/* ========================================================= WCCTC — built to the approved design. Scale system per the design review: a contained 1180px shell with full-bleed visual bands. That keeps the page closer to the SportBC rhythm: cinematic, centered, and not stretched like a municipal template. Two colours from the supplied palette were measured and failed AA, so they are darkened here by the minimum that passes, hue and saturation held: --blue #1488c4 3.93 -> #127cb3 4.61 --lime-dark #6d9326 3.59 -> #608121 4.51 Everything else is as specified. ========================================================= */ /* Inter.ttf was the BOLD static face declared across the whole 100–900 range, so the browser used it for every weight and every paragraph on the site came out bold — one dark slab of text. Four real faces, each declared at the weight it actually is, and woff2 rather than a 326 KB TrueType. */ @font-face{font-family:WCCTCInter;src:url("assets/fonts/Inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:WCCTCInter;src:url("assets/fonts/Inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:WCCTCInter;src:url("assets/fonts/Inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:WCCTCInter;src:url("assets/fonts/Inter-700.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap} @font-face{font-family:WCCTCPlayfair;src:url("assets/fonts/PlayfairDisplay.ttf") format("truetype");font-weight:700 900;font-display:swap} @font-face{font-family:WCCTCBrush;src:url("assets/fonts/ShantellBoldItalic.ttf") format("truetype");font-weight:700;font-display:swap} :root{ --font-display:WCCTCPlayfair,Georgia,'Times New Roman',serif; --font-brush:WCCTCBrush,"Comic Sans MS",cursive; --font-sans:WCCTCInter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --navy:#003258; --navy-deep:#002742; --blue:#197bba; --blue-dark:#145d8c; --lime:#b8e038; --lime-dark:#50721b; --ink:#082f52; /* on white 13.65 */ --muted:#52687a; /* on white 5.80 */ --paper:#ffffff; --soft:#f3f6f8; --line:#ccd8e0; --shell:1180px; --gutter:32px; --radius-sm:14px; --radius-md:22px; --radius-lg:28px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:var(--font-sans);color:var(--ink);background:#fff; font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} [hidden]{display:none!important} h1,h2,h3,h4,p{margin-top:0} .container{width:min(var(--shell),calc(100% - (var(--gutter) * 2)));margin-inline:auto} .sr-only{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* the point of the whole project — nobody loses their place */ a:focus-visible,button:focus-visible,input:focus-visible, summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid #ffd34e;outline-offset:3px;border-radius:4px; box-shadow:0 0 0 6px var(--navy); } /* A single yellow ring measures 1.43:1 on white, and WCAG 2.1 asks 3:1 of a non-text indicator. The navy halo outside it is 12.42 on white and the yellow is 8.68 on the navy, so the pair reads on any background here. */ .skip{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--navy);color:#fff;padding:14px 22px;font-weight:700; } .skip:focus{left:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} } @keyframes heroLensDrift{ from{transform:scale(1.012) translate3d(-.35%,0,0)} to{transform:scale(1.042) translate3d(.45%,-.28%,0)} } @keyframes busLightSweep{ from{transform:translateX(-2%);opacity:.42} to{transform:translateX(2.5%);opacity:.74} } @keyframes copyArrive{ from{opacity:0;transform:translate3d(-22px,20px,0) rotate(-1deg)} to{opacity:1;transform:translate3d(0,0,0)} } @keyframes cardArrive{ from{opacity:0;transform:translate3d(18px,22px,0) scale(.975)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} } @keyframes cityRise{ from{opacity:0;transform:translate3d(0,34px,0)} to{opacity:1;transform:translate3d(0,0,0)} } @keyframes cityDance{ 0%{transform:translate3d(0,0,0) rotate(0deg)} 35%{transform:translate3d(0,-8px,0) rotate(-.8deg)} 70%{transform:translate3d(0,-4px,0) rotate(.55deg)} 100%{transform:translate3d(0,-7px,0) rotate(0deg)} } /* ---------------------------------------------------------- utility bar */ /* The demonstration notice. Deliberately plain and deliberately first: it is a statement of fact, not a decoration, and it must be read before any page offers to take somebody's application. Amber on near-black measures 11.4:1. */ .demobar{background:#1b1200;border-bottom:3px solid #f0b429;color:#ffe9b8} .demobar .container{padding-block:9px} .demobar p{margin:0;font-size:13.5px;line-height:1.45;max-width:none} .demobar strong{color:#ffc43d} .demobar a{color:#ffe9b8;font-weight:700;text-underline-offset:3px; /* 24px of target for WCAG 2.5.8, same as the utility bar links */ display:inline-block;padding-block:3px} .demobar a:hover{color:#fff} @media (max-width:620px){.demobar p{font-size:12.5px}} .utility{background:linear-gradient(180deg,#fff 0%,#f5f9fc 100%);border-bottom:1px solid rgba(8,47,82,.08);font-size:13.5px} .utility .container{display:flex;align-items:center;justify-content:flex-end; gap:18px;flex-wrap:wrap;padding-block:7px} .utility a{color:var(--blue-dark);font-weight:600;text-decoration:none; /* WCAG 2.5.8 asks for 24px of target, and these were 18 */ display:inline-flex;align-items:center;min-height:24px} .utility a:hover{text-decoration:underline} .util-sep{color:var(--line)} .util-install{display:inline-flex;align-items:center;gap:6px;min-height:24px; background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--blue-dark); cursor:pointer} .util-install:hover{text-decoration:underline} .util-install svg{flex:none} .textsize{display:flex;align-items:center;gap:7px} .textsize > span{color:var(--muted);font-weight:600} .textsize button{ appearance:none;border:1px solid transparent;background:none;cursor:pointer; font-family:var(--font-sans);color:var(--muted);font-weight:700;line-height:1; padding:4px 8px;border-radius:6px;min-width:32px;min-height:32px; } .textsize button:hover{background:#fff;border-color:var(--line)} .textsize button[aria-pressed="true"]{background:var(--navy);color:#fff} .textsize .t1{font-size:13px}.textsize .t2{font-size:16px}.textsize .t3{font-size:20px} .search{display:flex;align-items:stretch} .search input{ border:1px solid var(--line);border-right:0;border-radius:8px 0 0 8px; padding:8px 14px;font:inherit;font-size:15px;min-width:200px;min-height:40px;background:#fff; } .search button{border:0;background:var(--navy);color:#fff;border-radius:0 8px 8px 0; padding:0 15px;min-height:40px;cursor:pointer;display:grid;place-items:center} .search button:hover{background:#052744} /* ---------------------------------------------------------- header */ .site-header{position:relative;z-index:100;background:rgba(255,255,255,.98);box-shadow:0 8px 24px rgba(0,50,88,.06)} .header-main{min-height:76px;display:flex;align-items:center} .header-main .container{display:grid;grid-template-columns:minmax(300px,390px) 1fr; align-items:center;gap:32px} .site-logo{display:block;text-decoration:none} .site-logo img{width:min(100%,320px);height:auto;display:block} .brand-tag{display:block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.18em; color:var(--lime-dark);text-transform:uppercase} /* eight sections plus their chevrons no longer fit at the old gap, and the labels were breaking mid-phrase ('Plans / and / Studies'). Tighter spacing, no wrapping, and a slightly smaller logo buy the room back. */ .main-nav{display:flex;justify-content:flex-end;align-items:center; gap:clamp(9px,.95vw,18px);flex-wrap:nowrap} .main-nav > a,.nav-item > a{white-space:nowrap} .main-nav a{ position:relative;color:var(--navy);text-decoration:none; font-size:13.5px;line-height:1;font-weight:800;padding:24px 0 20px; } .main-nav a::after{ content:"";position:absolute;left:0;right:100%;bottom:14px;height:3px; border-radius:99px;background:var(--lime);transition:right .22s ease; } .main-nav a:hover::after,.main-nav a:focus-visible::after, .main-nav a[aria-current="page"]::after{right:0} .nav-toggle{display:none} /* site.js appends the close control to the nav on every width; above the collapse breakpoint there is no overlay to close, and an unstyled button was showing as a bare box beside "Opportunities". */ .nav-close{display:none} /* ---------------------------------------------------------- hero */ /* The hero's own bottom edge is straight. It used to be hidden under the wave's white fill, which is what forced the photographs below to start on a flat line ~95px under the blue ribbon. Masking the hero along the identical curve removes the need for that white: the hero now ENDS on the curve. Two mask layers - a plain opaque block for everything above the wave zone, and the curve itself for the last var(--wave-h). z-index 8 puts it over the city photographs (which now reach up behind it) but under the ribbons at 9. */ .hero{position:relative;z-index:8;min-height:500px;overflow:hidden;isolation:isolate;background:var(--navy); --hero-curve:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 190' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V46C1300 74 1130 106 880 104C560 96 300 10 0 40Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image:linear-gradient(#000,#000),var(--hero-curve); mask-image:linear-gradient(#000,#000),var(--hero-curve); -webkit-mask-size:100% calc(100% - var(--wave-h) + 1px),100% var(--wave-h); mask-size:100% calc(100% - var(--wave-h) + 1px),100% var(--wave-h); -webkit-mask-position:left top,left bottom; mask-position:left top,left bottom; -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat; } /* The hero box is exactly as it was — same mask, same curve, same height. The only change is that several photographs now stack inside it and cross-fade, so nothing about the shape or the spacing moves. */ .hero-picture,.hero-picture img{position:absolute;inset:0;width:100%;height:100%} .hero-picture img{object-fit:cover;object-position:60% 42%} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease; pointer-events:none} .hero-slide.is-on{opacity:1} /* the drift runs on the slide being looked at, not on all six at once */ .hero-slide.is-on img{animation:heroLensDrift 18s ease-in-out infinite alternate; will-change:transform} /* Controls sit over the photograph above the wave, so they add nothing to the layout. WCAG 2.2.2 is Level A: anything that moves by itself for more than five seconds needs a visible way to stop it. */ /* The hero is 500px and every part of it is spoken for: the headline and button hold the left, the meeting card runs 184–503 on the right, and the wave starts at 489. The one free band is the strip of sky above the card, measured at 1440, 1200, 1024, 768 and 390. So the row is small enough to live there: dots and a pause, no arrows — the dots take focus, arrow keys move between them and touch swipes, which is the whole control surface WCAG asks for. */ .hero-controls{position:absolute;z-index:6;left:50%;transform:translateX(-50%); top:5px; width:min(var(--shell),calc(100% - (var(--gutter) * 2))); display:flex;align-items:center;justify-content:flex-end;gap:6px; pointer-events:none} .hero-controls > *{pointer-events:auto} .hero-nav{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-width:28px;min-height:28px;padding:0 10px; border:1px solid rgba(255,255,255,.42);border-radius:999px; background:rgba(2,26,45,.46);color:#fff;cursor:pointer; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font:700 13px/1 var(--font-sans); transition:background .18s ease,border-color .18s ease; } .hero-nav:hover{background:rgba(2,26,45,.72);border-color:rgba(255,255,255,.8)} .hero-nav:focus-visible{outline:3px solid var(--lime);outline-offset:3px} /* The dots sit on whatever photograph is showing — sky, concrete, a pale jacket — so they need their own ground or they disappear. Same treatment as the pause button, so the row reads as one control. */ .hero-dots{display:flex;align-items:center;gap:2px;padding:0 8px; border:1px solid rgba(255,255,255,.42);border-radius:999px; background:rgba(2,26,45,.46); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .hero-dot{ width:24px;height:28px;padding:0;border:0;background:none;cursor:pointer; display:grid;place-items:center; } .hero-dot::before{content:"";display:block;width:16px;height:3px;border-radius:99px; background:rgba(255,255,255,.62);transition:background .2s ease,width .2s ease} .hero-dot[aria-selected="true"]::before{background:var(--lime);width:24px} .hero-dot:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:8px} .hero-pause{margin-left:4px} .hero-pause-label{font-weight:700} @media (max-width:760px){ .hero-controls{gap:5px;top:5px;justify-content:flex-start} .hero-nav{min-width:38px;min-height:38px;padding:0 9px;font-size:12px} .hero-dot{width:26px} .hero-dot::before{width:18px} .hero-dot[aria-selected="true"]::before{width:24px} } @media (prefers-reduced-motion:reduce){ /* no cross-fade, and the script never auto-advances */ .hero-slide{transition:none} } .hero::before{ content:"";position:absolute;inset:0;z-index:1; background: radial-gradient(circle at 54% 42%,rgba(255,255,255,.07) 0 16%,rgba(0,0,0,0) 34%), linear-gradient(90deg,rgba(0,32,56,.58) 0%,rgba(0,32,56,.42) 25%, rgba(0,32,56,.14) 50%,rgba(0,32,56,.04) 69%,rgba(0,32,56,.22) 100%); } .hero::after{ content:"";position:absolute;z-index:2;inset:0;pointer-events:none; background: linear-gradient(102deg,transparent 58%,rgba(184,224,56,.08) 64%,transparent 72%), radial-gradient(circle at 86% 22%,rgba(255,200,84,.18),transparent 18%); mix-blend-mode:screen;opacity:.7; animation:busLightSweep 7s ease-in-out infinite alternate; } .hero-inner{ position:relative;z-index:3;min-height:500px; display:grid;grid-template-columns:minmax(430px,1fr) minmax(310px,350px); align-items:center;gap:clamp(32px,4.5vw,62px); padding-top:0;padding-bottom:clamp(66px,5.2vw,88px); } .hero-copy{align-self:center;max-width:690px;animation:copyArrive .82s cubic-bezier(.2,.72,.18,1) both} .hero-title{ margin:0 0 5px;font-family:var(--font-brush);font-weight:700;color:#fff; font-size:clamp(66px,6.15vw,96px);line-height:.8;letter-spacing:-.055em; transform:rotate(-3.2deg) skewX(-4deg);transform-origin:left center; text-shadow:0 8px 28px rgba(0,19,36,.30); } .hero-title span{display:block} .hero-title .hero-green{color:var(--lime);position:relative;width:max-content} .hero-swoosh{ display:block;width:clamp(230px,22vw,390px);height:11px;margin:-5px 0 22px 126px; border-radius:999px;background:var(--lime); transform:rotate(-5.6deg) skewX(-20deg); box-shadow:0 7px 22px rgba(184,224,56,.28); } .hero-subtitle{ max-width:530px;margin:0 0 24px;color:#fff; font-size:clamp(20px,1.48vw,24px);line-height:1.12;font-weight:850;letter-spacing:-.035em; } /* white over the 0-25% band of the overlay, .94 to .82 navy — well past 4.5 */ .hero-aside{ position:absolute;z-index:4;right:clamp(16px,1.6vw,34px);bottom:clamp(150px,13vw,215px); margin:0;font-family:var(--font-brush);color:#fff; font-size:clamp(21px,1.62vw,30px);line-height:1.02;text-align:right;max-width:10ch; transform:rotate(-4deg) skewX(-5deg);text-shadow:0 2px 18px rgba(0,20,38,.65); } .hero-aside::after{content:"";display:block;width:112px;height:8px;margin:10px 0 0 auto;border-radius:999px;background:var(--lime);transform:rotate(-8deg)} @media (max-width:1280px){.hero-aside{display:none}} /* ---------------------------------------------------------- buttons */ /* The buttons were flat fills. A moulded pill needs the same five things the glass panels do: a vertical gradient, a lit top edge, a rim, a soft coloured bloom under it, and a shadow tucked inside the bottom lip. Every gradient's LIGHTEST stop is the one that decides contrast for white text, so the blue and navy ramps are built from the measured colour upward only as far as white still clears 4.5. Lime carries navy text, so there the darkest stop is the one that matters. */ .button{ position:relative;isolation:isolate; min-height:53px;padding:0 29px;display:inline-flex;align-items:center;justify-content:center; gap:14px;border:0;border-radius:999px;font-family:var(--font-sans); font-size:14px;font-weight:900;text-decoration:none;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; } /* the lit top edge and the sheen across the upper half */ .button::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; /* stops by 40%, which is above the cap height of the centred label - the lit lip is decorative, and no text ever sits in it */ background: linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.07) 26%,rgba(255,255,255,0) 40%), linear-gradient(100deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.10) 46%,rgba(255,255,255,0) 58%); } .button:hover{transform:translateY(-2px);filter:saturate(1.06) brightness(1.04)} .button:active{transform:translateY(0)} .button::after{content:"→";font-size:20px;line-height:1} .button--lime{color:#06304f; background:linear-gradient(180deg,#c7ef46 0%,#b1dc2c 52%,#9cc91f 100%); box-shadow:0 10px 26px rgba(150,205,30,.34),0 0 26px -8px rgba(176,226,60,.55), inset 0 1px 0 rgba(255,255,255,.62),inset 0 -3px 8px -4px rgba(24,60,4,.5)} .button--blue{color:#fff; background:linear-gradient(180deg,#17739f 0%,#136291 52%,#0c5180 100%); box-shadow:0 10px 26px rgba(20,110,170,.34),0 0 26px -8px rgba(60,160,220,.6), inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 9px -4px rgba(0,26,48,.6)} .button--navy{color:#fff; background:linear-gradient(180deg,#0a4a7a 0%,#043a62 50%,#012a49 100%); box-shadow:0 10px 26px rgba(2,40,70,.36),0 0 24px -8px rgba(40,120,180,.5), inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 9px -4px rgba(0,12,26,.7)} .button--white{color:var(--navy); background:linear-gradient(180deg,#ffffff 0%,#f4f9fc 54%,#e8f1f7 100%); box-shadow:0 12px 30px rgba(0,30,54,.24),0 0 26px -10px rgba(190,225,245,.8), inset 0 1px 0 rgba(255,255,255,1),inset 0 -3px 8px -5px rgba(8,50,84,.35)} /* the white pill carries its arrow in a navy disc, as in the design */ .button--white::after{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:var(--navy);color:#fff;font-size:16px;margin-right:-12px} /* lime carries NAVY text only. White on lime is 1.47 and never appears. */ /* ---------------------------------------------------------- meeting card */ .meeting-card{ width:100%;max-width:330px;justify-self:end;padding:23px 24px; border:1px solid rgba(255,255,255,.78);border-radius:24px; background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(239,247,251,.76)); -webkit-backdrop-filter:blur(22px) saturate(1.08);backdrop-filter:blur(22px) saturate(1.08); box-shadow:0 28px 70px rgba(0,26,47,.32),inset 0 1px 0 rgba(255,255,255,.95); color:var(--navy); animation:cardArrive .9s cubic-bezier(.2,.72,.18,1) .1s both; } .meeting-card .meeting-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .meeting-card h2{font-family:var(--font-sans);font-size:20px;line-height:1.12; font-weight:900;margin:0} .meeting-date{font-size:17px;line-height:1.45;margin-bottom:18px;color:var(--ink)} .meeting-date b{display:block;font-weight:800} .meeting-card .button{width:100%;min-height:48px;margin-top:10px} .meeting-note{display:none} .meeting-note a{color:var(--blue-dark);font-weight:700} /* ---------------------------------------------------------- hero wave */ /* Sits between the hero and the communities band and paints over both, so the city cards can slide up underneath it. --wave-drop is how far past the hero's bottom edge the sweep reaches; the two margins cancel its own height out of the flow so it costs no vertical space. */ /* --strip-drop is where the city cards sit against the wave above them. They used to climb 96px up behind it, which put the lime ribbon across the top of every photograph. Measured at 1512: the ribbon's lowest point over the strip falls at y564 and the cards began at y530, so they were 34px into it. This sets them below it with clear air, images unchanged in size. */ /* --strip-drop is the strip's top, measured down from the top of the band. Derivation, from the live geometry: the strip has to begin at or above the highest point of the wave's curve across its width, or a straight edge shows. That highest point is always the right-hand end of the path, viewBox y=46 of 190 - fixed, so this holds at every width. curve top = heroBottom - waveH + 46/190 * waveH band top = heroBottom - commRise strip drop = curve top - band top - 6px clearance = waveH * (46/190 - 1) + commRise - 6px = waveH * -0.7579 + commRise - 6px At 1512 that is 127 * -0.7579 + 54 - 6 = -48.3px, against the +24px it was: the strip rises 72px and its top edge is then cut by the curve. The clamp below repeats the one on .communities margin-top - they must stay equal. */ :root{ --wave-h:clamp(108px,8.4vw,142px); --strip-drop:calc(var(--wave-h) * -0.7579 + clamp(36px,4.1vw,54px) - 6px); } /* The hero and its wave are the front layer of this area. The communities band sits at z-index 7, so at 6 the band was painting over the sweep and a city card could cut across the green and blue lines instead of passing behind them. Measured at 1512: the strip's top reaches 30px into the wave's box. */ .hero-wave{position:relative;z-index:9;width:100%;height:var(--wave-h); margin-top:calc(var(--wave-h) * -1);margin-bottom:0;pointer-events:none} .hero-wave svg{width:100%;height:100%;display:block} /* ---------------------------------------------------------- communities */ .communities{position:relative;padding:0 0 0;background:#fff;overflow-x:clip; margin-top:clamp(-54px,-4.1vw,-36px);z-index:auto} .communities::before{ content:"";position:absolute;z-index:0;left:-8vw;right:-8vw;top:-14px;height:108px; background:#fff;border-radius:0 0 50% 50% / 0 0 100% 100%; transform:rotate(-1.1deg); } .communities-layout{ /* Measured across five widths, the copy block sat hard against the bottom of the band - 44.7 to 50px of air above the heading against 0 to 0.9px below the button at desktop, and 157 to 210px above at tablet. Centring absorbs the slack between the copy and the taller photo strip; the offset on .communities-copy accounts for the rest. The strip is align-self:stretch, so it ignores this and does not move. */ position:relative;z-index:auto;display:grid;align-items:center;gap:clamp(18px,1.45vw,24px); /* the left column keeps the shell's gutter; the strip bleeds off the right edge, which is what gives the design its width */ grid-template-columns:clamp(260px,21vw,310px) minmax(0,870px); padding-left:max(var(--gutter),calc((100vw - var(--shell)) / 2)); padding-right:max(var(--gutter),calc((100vw - var(--shell)) / 2)); padding-top:0;padding-bottom:0; } /* The band's top edge is the hero's curve, which sits 34 to 47.6px above the top of the grid row because the strip reaches up behind it. Half of that is what remains to shift after the row centring above. `top` on a relative box is paint-only - nothing reflows, and nothing below the band moves. */ .communities-copy{position:relative;z-index:10;padding:0; top:calc(-1 * clamp(17px,1.45vw,24px)); /* Edge-aligned. The block gives up the shell gutter entirely, so the only thing insetting it from the page edge is its own slope. The white left of the words then mirrors the white right of El Cerrito: both run from a few px at the head to the full lean at the foot. `left` on a relative box is paint-only - the photo strip beside it does not move. */ /* Was edge-aligned, which left 180px of dead white between the copy and Richmond. Now: 42px in from the page edge, and the block widened to use that white rather than the white being made bigger. --richmond is where the first card's leading edge falls - shell gutter + copy column + gap - so the reserved breathing room is measured against the real card, not a guess. The slope offset is subtracted because the paragraph is the widest element and it is translated right by .68 of the slope. */ --richmond:calc(max(var(--gutter), (100vw - var(--shell)) / 2) + clamp(260px,21vw,310px) + clamp(18px,1.45vw,24px)); --breathe:clamp(35px,2.6vw,45px); left:calc(42px - max(var(--gutter), (100vw - var(--shell)) / 2)); width:calc(var(--richmond) - 42px - var(--breathe) - var(--slope) * .68)} /* The photo cards all lean one way - their right edge tracks 42.3px to the left between head and foot. The copy leans the other way to answer it: each block steps further right the lower it sits, so the white beside the words forms a wedge that mirrors the one beside El Cerrito. --slope must stay equal to the strip's --lean or the two stop rhyming. The fractions are each block's vertical centre as a share of the button's, measured live: h2 .221, p .621, button .911 - normalised so the button, the lowest element, lands on the full slope. That is the distance he asked to match: the button sits as far in from the left as El Cerrito's foot sits from the right. h2 and p are moved with translateX, not margin: a margin would narrow their measure and could rewrap a line. A transform cannot - it is paint only. The button takes margin-left instead, because it already uses transform for its hover lift and the two would fight. */ .communities-copy{--slope:clamp(30px,2.8vw,48px)} .communities-copy h2{transform:translateX(calc(var(--slope) * .24))} .communities-copy p{transform:translateX(calc(var(--slope) * .68))} .communities-copy .button{margin-left:var(--slope)} .communities-copy h2{ font-family:var(--font-display);font-size:clamp(39px,3.25vw,58px);line-height:.88; font-weight:800;letter-spacing:-.039em;color:var(--navy); margin-bottom:clamp(14px,1.3vw,20px); } .communities-copy h2 .green{color:var(--lime-dark);display:block} /* the paragraph was capped at 430px inside a 310px column, so it broke at "West Contra / Costa" and threw the rest of the width away */ .communities-copy p{max-width:none;font-size:clamp(17px,1.5vw,23px);line-height:1.3; margin-bottom:clamp(18px,1.7vw,26px);color:var(--ink)} /* the button is the one element wide enough to reach Richmond at narrow widths, so its width is capped by the room actually left beside the card */ .communities-copy .button{ min-width:min(clamp(230px,23.5vw,355px), calc(var(--richmond) - 42px - var(--breathe) - var(--slope))); min-height:clamp(56px,4.9vw,74px);font-size:clamp(15px,1.32vw,20px)} .city-strip{ /* --lean is the horizontal throw of each card's slanted edge; --sliver is the white gap left between two neighbours. Measured off the design: the edges run about 7 degrees off vertical and the gaps are thin, roughly 11px at this width. The band itself is level — the lean and the wave above it are what make it read as tilted. */ --lean:clamp(30px,2.8vw,48px);--sliver:clamp(7px,.58vw,10px); position:relative;display:grid;grid-template-columns:repeat(5,1fr); gap:0;overflow:visible;padding:0;list-style:none; /* The strip runs off the right edge, as it does in the approved design. Held inside the shell each card was only ~170px wide and the longest names - Richmond, El Cerrito - were cut off mid-word by their own slanted edge. The bleed is the shell's own right padding, negated. */ /* A fixed height cannot work here: the strip's top is anchored to the hero's wave but its bottom has to reach the closing wave, and that one sits after the grid row, whose height is set by the copy column and changes with the window. So the strip stretches to the row instead, and overhangs it at both ends by a known amount - top by --strip-drop, bottom by --strip-overhang. Its bottom then tracks the row automatically at any width. --strip-overhang has to sit between two measured bounds: far enough past the row that the closing wave's curve still crops the photographs (16.1px at 1512, 20.7px at 1960), but not so far that the strip pokes out under the wave's own bottom edge (31.5px at 1512 is the tightest ceiling). --strip-box keeps the row sizing exactly as it was, so the heading, the button and everything below the band do not move. */ --strip-box:calc(clamp(24px,1.4vw,30px) + clamp(266px,18.6vw,330px)); --strip-overhang:clamp(18px,1.6vw,28px); align-self:stretch; min-height:calc(var(--strip-box) - var(--strip-drop) + var(--strip-overhang)); margin:var(--strip-drop) calc(-1 * max(var(--gutter), (100vw - var(--shell)) / 2)) calc(-1 * var(--strip-overhang)) 0; } .city-card{position:relative;overflow:hidden;border-radius:3px; margin-left:calc(var(--sliver) - var(--lean)); clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%); background:var(--navy);animation:cityRise .75s cubic-bezier(.2,.72,.18,1) both; transition:filter .22s ease,box-shadow .22s ease;will-change:transform} .city-card:nth-child(2){animation-delay:.05s} .city-card:nth-child(3){animation-delay:.1s} .city-card:nth-child(4){animation-delay:.15s} .city-card:nth-child(5){animation-delay:.2s} .city-card a{display:block;width:100%;height:100%;color:inherit;text-decoration:none;outline:0} .city-card a::before{ content:"";position:absolute;z-index:2;inset:0;border:0 solid transparent; background:linear-gradient(120deg,rgba(184,224,56,0) 0%,rgba(184,224,56,.22) 48%,rgba(25,123,186,0) 64%); opacity:0;transform:translateX(-45%);transition:opacity .22s ease,transform .38s ease; } .city-card:hover,.city-card:focus-within{ animation:cityDance .62s cubic-bezier(.18,.8,.2,1) both; filter:saturate(1.08) contrast(1.04); box-shadow:0 18px 42px rgba(0,50,88,.18); } .city-card:hover a::before,.city-card:focus-within a::before{opacity:1;transform:translateX(32%)} .city-card:first-child{margin-left:0} .city-card img{width:100%;height:100%;object-fit:cover; transform:scale(1.03);transition:transform .42s cubic-bezier(.18,.8,.2,1),filter .32s ease} .city-card:hover img,.city-card:focus-within img{transform:scale(1.11) rotate(.6deg);filter:brightness(1.07)} .city-card::after{content:"";position:absolute;inset:52% 0 0; background:linear-gradient(to bottom,transparent,rgba(1,30,51,.78))} .city-card:focus-within::after,.city-card:hover::after{ background:linear-gradient(to bottom,rgba(184,224,56,.02),rgba(1,30,51,.66)); } .city-card h3{ /* the insets clear the slanted edges: the next card overlaps this one by (lean - sliver), so the name has to stop short of the nominal right edge */ position:absolute;z-index:3;margin:0;color:#fff; left:calc(var(--lean) * .38);right:calc(var(--lean) * .8); /* the strip now hangs --strip-overhang past the row so the closing wave can crop it; the names have to rise by the same amount or they end up underneath the green ribbon instead of above it */ bottom:calc(clamp(22px,2.55vw,42px) + var(--strip-overhang)); font-family:var(--font-display);font-size:clamp(24px,1.8vw,34px);line-height:.94;font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.45); transition:transform .24s ease,text-shadow .24s ease; } .city-card:hover h3,.city-card:focus-within h3{transform:translateY(-5px);text-shadow:0 6px 18px rgba(0,0,0,.52)} /* white on the gradient's #011e33 at 80% is past 4.5 */ /* ---------------------------------------------------------- quick links */ /* bites into the bottom of the cards, as it does in the design, rather than sitting under them as a separate band */ .communities-wave{position:relative;z-index:4;line-height:0;margin-top:clamp(-32px,-2.3vw,-16px)} .communities-wave svg{display:block;width:100%;height:clamp(48px,4.2vw,72px)} /* The quick links are four separate glass cards now, and they open the programs panel rather than closing the communities band. The bars in the artwork folder only exist for two of the four, so the bar itself is built in CSS and the supplied icon tiles are dropped into it - that way all four match, the labels stay real text, and the text-size control still works on them. */ .quick-links{ position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.1vw,18px);margin:0 0 clamp(26px,2.6vw,40px); } .quick-link{ position:relative;min-height:92px;padding:14px 18px 14px 14px;display:flex; align-items:center;gap:14px;color:var(--navy);text-decoration:none; border-radius:18px; transition:transform .2s ease,box-shadow .2s ease; } .quick-link:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(7,54,92,.16),inset 0 1px 0 rgba(255,255,255,.95)} .quick-link-tile{flex:none;width:clamp(48px,3.6vw,58px);aspect-ratio:1;border-radius:26%; overflow:hidden;display:block;box-shadow:0 4px 12px rgba(7,54,92,.12)} .quick-link-tile img{width:100%;height:100%;object-fit:cover;display:block} .quick-link-text{flex:1;font-family:var(--font-display);font-weight:800; font-size:clamp(17px,1.35vw,22px);line-height:1.06;letter-spacing:-.03em} .quick-link .arrow{flex:none;color:var(--blue);font-family:var(--font-sans); font-size:30px;font-weight:400;line-height:1} /* ============================================================ glass Five things separate a rendered glass panel from a flat tinted box, and the first pass here only had one of them. All five are below. 1 a diagonal fill, brighter at the top left, not one flat tint 2 a rim that varies round the edge - bright on the top and left where the light lands, dark on the bottom and right - which is what gives the panel thickness. Done with a masked ::after so the gradient can sit in the border itself rather than one uniform 1px line. 3 a specular streak across the surface, from the ::before 4 coloured bloom leaking past the edge, in the outer box-shadows 5 an inner glow hugging the inside of the rim, in the inset shadows --glass-tint and --glass-rim let each panel set its own strength; the darker panels over the sunset need far more tint than the ones on the pale ground, and those numbers are contrast-driven, not taste. */ .glass{ position:relative;isolation:isolate; --glass-tint:rgba(255,255,255,.62); --glass-tint-2:rgba(214,236,250,.48); --glass-rim:rgba(255,255,255,.95); --glass-rim-2:rgba(255,255,255,.12); --glass-bloom:rgba(120,190,235,.30); --glass-bloom-2:rgba(160,225,120,.20); background-image:linear-gradient(142deg,var(--glass-tint) 0%,var(--glass-tint-2) 58%,var(--glass-tint-2) 100%); -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35); box-shadow: 0 18px 44px rgba(7,44,74,.16), 0 0 34px -8px var(--glass-bloom), 0 0 46px -14px var(--glass-bloom-2), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -14px 24px -18px rgba(3,30,52,.55); border:0; } /* the specular sweep */ .glass::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:linear-gradient(104deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.34) 41%, rgba(255,255,255,.06) 52%, rgba(255,255,255,0) 66%); } /* the rim: a gradient ring, not a flat border */ .glass::after{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; padding:1.4px; background:linear-gradient(140deg,var(--glass-rim) 0%,var(--glass-rim-2) 44%, rgba(255,255,255,.06) 62%,var(--glass-rim) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } /* over photography the tint has to carry the contrast, so it is set per panel */ .glass--dark{ --glass-tint:rgba(4,38,62,.74); --glass-tint-2:rgba(1,24,42,.70); --glass-rim:rgba(255,255,255,.78); --glass-rim-2:rgba(255,255,255,.10); --glass-bloom:rgba(90,200,220,.34); --glass-bloom-2:rgba(150,225,110,.26); box-shadow: 0 26px 64px rgba(0,18,32,.40), 0 0 40px -6px var(--glass-bloom), 0 0 56px -16px var(--glass-bloom-2), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -18px 30px -22px rgba(0,10,20,.7); } .glass--dark::before{ background:linear-gradient(104deg, rgba(255,255,255,0) 24%, rgba(255,255,255,.20) 40%, rgba(255,255,255,.04) 51%, rgba(255,255,255,0) 64%); } /* ---------------------------------------------------------- programs */ /* The panel's own top edge is now the closing wave's curve. It rises by exactly the wave's height so the mask lands on the real path, crops the city photos along it, and leaves the ribbons - which sit at z-index 4, above this - riding on top. Nothing white is left between the two sections because nothing white exists any more. Same construction as the hero. */ /* the top padding carries the wave's height too, since the panel now begins at the top of the wave rather than below it - without this the quick links ride up into the ribbons */ .programs{position:relative;padding:calc(clamp(34px,3.4vw,54px) + var(--cwave-h)) 0 38px; overflow:hidden;isolation:isolate; --cwave-h:clamp(48px,4.2vw,72px); margin-top:calc(var(--cwave-h) * -1); --curve:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 96C280 130 620 44 940 38 1180 34 1320 58 1440 78L1440 120 0 120Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image:var(--curve),linear-gradient(#000,#000); mask-image:var(--curve),linear-gradient(#000,#000); -webkit-mask-size:100% var(--cwave-h),100% calc(100% - var(--cwave-h) + 1px); mask-size:100% var(--cwave-h),100% calc(100% - var(--cwave-h) + 1px); -webkit-mask-position:left top,left bottom; mask-position:left top,left bottom; -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat; background: radial-gradient(60% 50% at 12% 18%,rgba(183,229,167,.22) 0%,rgba(255,255,255,0) 70%), radial-gradient(70% 60% at 88% 6%,rgba(150,205,240,.30) 0%,rgba(255,255,255,0) 70%), linear-gradient(180deg,#f2f9fd 0%,#eaf4fb 48%,#f6fbfe 100%); } /* the blurred bay, sitting behind the top right and fading out into the panel */ .programs-scene{position:absolute;z-index:-2;top:0;right:0;width:min(74%,1180px); pointer-events:none; -webkit-mask-image:linear-gradient(200deg,#000 8%,rgba(0,0,0,.55) 42%,transparent 72%); mask-image:linear-gradient(200deg,#000 8%,rgba(0,0,0,.55) 42%,transparent 72%); opacity:.72} .programs-scene img{width:100%;height:auto;display:block} .programs-rail{position:absolute;z-index:-1;display:block;width:clamp(74px,7.4vw,116px); pointer-events:none;opacity:.92} .programs-rail img{width:100%;height:auto;display:block} /* flush to the edge, not bled off it - the words on the panel have to stay readable */ .programs-rail--left{left:0;top:40%} .programs-rail--right{right:0;top:-5%} @media (max-width:1320px){.programs-rail{display:none}} .programs-heading-row{position:relative;display:grid;align-items:end; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,2.6vw,48px);margin-bottom:clamp(26px,2.6vw,38px)} .programs-headline{min-width:0} .programs-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px; font-size:clamp(10px,.78vw,12px);font-weight:800;letter-spacing:.2em; text-transform:uppercase;color:var(--navy)} .programs-eyebrow::before{content:"";width:clamp(22px,2vw,32px);height:4px;border-radius:99px; background:var(--lime);flex:none} .programs-heading-row h2{margin:0;line-height:0} .programs-heading-row h2 img{width:100%;max-width:clamp(360px,46vw,660px);height:auto;display:block} .programs-motto{margin:14px 0 0;font-size:clamp(10px,.78vw,12px);font-weight:800; letter-spacing:.22em;text-transform:uppercase;color:var(--blue-dark)} .programs-intro{position:relative;max-width:430px;display:flex;flex-direction:column; align-items:flex-start;gap:16px;padding-left:clamp(20px,2.2vw,34px);justify-self:start} /* the hairline that separates the headline from the intro in the design */ .programs-intro::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px; background:linear-gradient(180deg,rgba(7,54,92,0),rgba(7,54,92,.22),rgba(7,54,92,0))} .programs-intro p{font-size:clamp(15px,1.15vw,17px);line-height:1.4;margin:0;color:var(--ink)} /* Sits against the section, not the heading row: in the design it floats over the bay to the right of the intro, below the quick links. Anchored to the heading row it was clipped by the panel's own overflow and ran into the STMP card. */ .programs-script{position:absolute;z-index:1;right:clamp(6px,2.4vw,46px); top:clamp(150px,15.5vw,235px);display:block; width:clamp(140px,14vw,220px);transform:rotate(-7deg);pointer-events:none} .programs-script img{width:100%;height:auto;display:block} @media (max-width:1100px){.programs-script{display:none}} .program-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px; margin:0;padding:0;list-style:none} .program-card{ position:relative;min-height:352px;padding:18px 19px 20px;display:flex;flex-direction:column; border-radius:clamp(17px,1.5vw,22px);overflow:hidden; transition:transform .24s ease,box-shadow .24s ease; } .program-card:hover{transform:translateY(-6px)} .program-card-image{height:170px;margin-bottom:17px;display:grid;place-items:center; overflow:hidden;border-radius:14px; background:linear-gradient(168deg,#ffffff 0%,#f7fbfd 46%,#eef5fa 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -8px 16px -12px rgba(8,50,84,.35), 0 1px 0 rgba(255,255,255,.7)} .program-card-image img{width:100%;height:100%;object-fit:contain} .program-card h3{margin:0 0 4px;font-family:var(--font-display);font-weight:800; font-size:clamp(25px,1.9vw,31px);line-height:.92;letter-spacing:-.04em;color:var(--navy)} .program-card p{font-size:16px;line-height:1.18;margin-bottom:18px;color:var(--ink)} .program-card .button{margin-top:auto;align-self:flex-start} /* ---------------------------------------------------------- investing */ /* ============================================================ closing scene One photograph carries the investing band and the footer. The section is sized to the plate's own 2.186:1 so the whole scene shows, and the footer is pulled back up onto its lower third - no second copy of the image, no seam. Every scrim below is measured, not chosen. White text was sampled against the worst 5% of pixels behind each region of the real plate: left column 5.41:1 raw - passes, light gradient kept for safety stats panel 1.59:1 raw - needs rgba(1,28,48,.72) -> 4.60 footer bar 2.63:1 raw - needs rgba(1,28,48,.50) -> 4.56 legal + terms 3.68:1 raw - needs rgba(1,28,48,.24) -> 4.53 */ .investing{position:relative;min-height:calc(100vw / 2.186);display:flex;align-items:flex-start; overflow:hidden;color:#fff;background:#0b2f3c} .investing > picture,.investing > picture img{position:absolute;inset:0;width:100%;height:100%} .investing > picture img{object-fit:cover;object-position:center top} .investing::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(97deg,rgba(1,28,48,.42) 0%,rgba(1,28,48,.22) 34%,rgba(1,28,48,0) 62%); } .investing .container{position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start; gap:clamp(28px,3vw,64px);padding-top:clamp(34px,4vw,70px)} .investing h2{max-width:560px;margin:0 0 17px;color:#fff;font-family:var(--font-display); font-size:clamp(46px,4.3vw,74px);line-height:.88;letter-spacing:-.055em;font-weight:800} .investing h2 .green{color:var(--lime)} .investing p{color:#eef4f8;font-size:clamp(15px,1.15vw,17px);line-height:1.45;max-width:38ch;margin:0 0 22px} .investing-stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch; margin:0;padding:clamp(14px,1.5vw,24px) clamp(6px,.8vw,14px); border-radius:clamp(20px,2vw,30px); } .stat{min-height:132px;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;text-align:center;padding:6px clamp(8px,1vw,18px); border-left:1px solid rgba(255,255,255,.34)} .stat:first-child{border-left:0} .stat dd{margin:0;display:flex;flex-direction:column;align-items:center} /* the icon sits in a glass disc, as in the design */ .stat i{display:grid;place-items:center;width:clamp(44px,3.4vw,54px);aspect-ratio:1; border-radius:50%;margin-bottom:12px;color:#fff;line-height:0} .stat i svg{width:clamp(22px,1.7vw,26px);height:auto} .stat strong{display:block;font-family:var(--font-display);font-size:clamp(28px,2.6vw,42px);line-height:1} .stat span{display:block;margin-top:4px;font-size:clamp(13px,1.05vw,16px);line-height:1.15;font-weight:700} .stat em{display:block;width:34px;height:3px;border-radius:99px;background:var(--lime);margin-top:12px} /* ---------------------------------------------------------- footer */ /* Lifted back onto the lower third of the scene above it. Nothing of its own behind it but the glass bar - the photograph is the investing section's. */ .site-footer{position:relative;z-index:3;color:#fff;background:none; --footer-h:clamp(250px,20vw,330px); min-height:var(--footer-h);margin-top:calc(var(--footer-h) * -1); padding:0 0 clamp(16px,1.6vw,26px)} /* The footer lifts its own height so it sits ON the closing photograph. Only the home page has that photograph; on every other page the lift was pulling the footer up over the last block of content instead. Those pages reserve the height back, so the footer lands on ground of its own. */ main:not(.has-closing){padding-bottom:clamp(250px,20vw,330px)} /* The footer is transparent because on the home page it sits ON the closing photograph. Every other page has no photograph there, so the footer had no ground at all: the legal line is #eaf3f8 and it was sitting on white, which is invisible. Those pages get the same ground the phone layout uses. */ main:not(.has-closing) + .site-footer{ background:linear-gradient(180deg,#22453c 0%,#2b4a2c 62%,#344f24 100%); margin-top:0;min-height:0;padding-top:clamp(26px,2.6vw,40px)} main:not(.has-closing) + .site-footer .container{background:rgba(0,0,0,.14)} /* Below 1100px the footer stops lifting and stands on its own ground, so the height reserved for it becomes an empty void between the last block and the footer. Give the page a normal gap there instead. */ @media (max-width:1100px){ main:not(.has-closing){padding-bottom:clamp(40px,6vw,64px)} } .site-footer .container{display:grid;grid-template-columns:1.15fr auto auto; align-items:center;gap:clamp(22px,2.4vw,44px);position:relative;z-index:1; padding:clamp(16px,1.7vw,26px) clamp(20px,2.2vw,34px); border-radius:clamp(18px,1.8vw,26px)} .footer-brand img{width:clamp(180px,16vw,238px);height:auto;display:block; filter:brightness(0) invert(1)} .footer-brand span{display:block;margin-top:8px;font-size:clamp(10px,.8vw,12px);letter-spacing:.14em; text-transform:uppercase;color:#dcecf6;font-weight:700} .footer-nav{display:flex;justify-content:center;gap:clamp(16px,1.8vw,32px);flex-wrap:wrap} .footer-nav a{color:#fff;text-decoration:none;font-size:clamp(13px,1vw,15px);font-weight:600; display:inline-flex;align-items:center;min-height:24px} .footer-nav a:hover{text-decoration:underline} .footer-right{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px)} .footer-social{display:flex;gap:clamp(8px,.8vw,12px)} .footer-social a{width:clamp(34px,2.7vw,42px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center; color:#fff;text-decoration:none;transition:box-shadow .2s ease} .footer-social a:hover{background:rgba(255,255,255,.3)} .footer-sign{margin:0;font-family:var(--font-brush);font-size:clamp(20px,1.7vw,29px); color:#fff;line-height:1.04;text-align:right;transform:rotate(-1.6deg); padding-left:clamp(14px,1.6vw,26px);border-left:1px solid rgba(255,255,255,.3)} /* The legal block sits on the photograph, outside the bar, as in the design. It carried its contrast with a text-shadow, which works over the dark part of a photograph and fails completely over a light one: on the home page this text landed on the near-white closing block at 2.45:1, so the copyright line and the Terms / Privacy / Accessibility Statement links were unreadable — the accessibility link most of all. It now carries its own ground and no longer depends on what happens to be behind it. Measured 12.1:1. */ .footer-base{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto; align-items:end;gap:clamp(14px,2vw,34px); width:min(var(--shell),calc(100% - (var(--gutter) * 2)));margin:clamp(14px,1.4vw,22px) auto 0; background:rgba(0,22,38,.82);border-radius:12px; padding:clamp(10px,1vw,15px) clamp(13px,1.3vw,20px)} .footer-legal{margin:0;font-size:clamp(11.5px,.92vw,13.5px);line-height:1.5;color:#eaf3f8; max-width:70ch} .footer-demo{display:block;margin-top:6px;color:#eaf3f8;opacity:.88} .footer-demo a{color:#fff;text-decoration:underline} .footer-demo strong{color:#fff} .footer-legal-nav{display:flex;gap:clamp(10px,1.1vw,18px);flex-wrap:wrap;justify-content:flex-end} .footer-legal-nav a{color:#eaf3f8;text-decoration:none;font-size:clamp(11.5px,.92vw,13.5px); display:inline-flex;align-items:center;min-height:24px; text-shadow:0 1px 3px rgba(0,18,30,.55)} .footer-legal-nav a + a{padding-left:clamp(10px,1.1vw,18px);border-left:1px solid rgba(255,255,255,.34)} .footer-legal-nav a:hover{text-decoration:underline} /* ------------------------------------------- nav collapses before tablet */ /* Seven top-level items plus the wordmark stop fitting on one line at about 1030px; below that the row overflowed the viewport and put a horizontal scrollbar on the whole page, so the toggle starts here rather than at 760. */ @media (max-width:1024px){ .header-main .container{grid-template-columns:minmax(0,1fr) auto;gap:16px} .site-logo{min-width:0} .nav-toggle{ display:inline-flex;align-items:center;gap:9px;appearance:none;cursor:pointer; background:var(--navy);color:#fff;border:0;border-radius:999px; min-height:48px;padding:0 20px;font:800 15px/1 var(--font-sans); } .main-nav{display:none;grid-column:1 / -1;flex-direction:column;align-items:stretch; gap:0;border-top:1px solid var(--line);margin-top:6px} .main-nav.is-open{display:flex} .main-nav a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:17px} .main-nav a::after{display:none} } /* ---------------------------------------------------------- tablet */ @media (max-width:1100px){ /* Below this the footer stacks and becomes taller than the photograph above it, so the legal block fell off the picture. It stops lifting here and stands on its own ground - colours sampled from the plate's lower band, rgb(34,69,60) and rgb(52,79,36), so the join reads as a continuation. */ .investing{min-height:0;padding-bottom:clamp(20px,3vw,40px)} .site-footer{margin-top:0;min-height:0;padding-top:clamp(20px,2.6vw,34px); background:linear-gradient(180deg,#22453c 0%,#2b4a2c 62%,#344f24 100%)} .site-footer .container{grid-template-columns:1fr;justify-items:start;text-align:left} .footer-nav{justify-content:flex-start} .footer-sign{border-left:0;padding-left:0;text-align:left} .footer-base{grid-template-columns:1fr;align-items:start} .footer-legal-nav{justify-content:flex-start} :root{--gutter:24px} .hero-inner{grid-template-columns:1fr 340px;gap:35px} .hero-title{font-size:clamp(65px,8vw,90px)} .communities-layout{grid-template-columns:minmax(220px,280px) 1fr; padding-left:var(--gutter)} /* the tablet grid uses different columns, so the desktop --richmond maths does not apply; the copy fills its own column there instead */ /* width less the slope, so the translated blocks stay inside the column and do not reach across the gap into Richmond */ .communities-copy{--slope:clamp(28px,3.4vw,50px);width:calc(100% - var(--slope));left:0} .communities-copy h2{font-size:clamp(36px,4.3vw,50px)} .communities-copy p{font-size:16px} /* the cards have to stay at least as tall as the copy beside them, or the button drops below the band and the closing wave stops meeting the photos */ .city-strip{--strip-box:calc(clamp(24px,1.4vw,30px) + clamp(330px,46vw,430px)); --lean:clamp(28px,3.4vw,50px)} .city-card h3{font-size:clamp(18px,2.2vw,26px)} .programs-heading-row{grid-template-columns:1fr;align-items:start;gap:22px} .programs-intro{max-width:none;padding-left:0} .programs-intro::before{display:none} .quick-links{grid-template-columns:repeat(2,1fr)} .program-grid{grid-template-columns:repeat(2,1fr)} .investing .container{gap:40px} .site-footer .container{grid-template-columns:1fr auto;gap:28px} } /* ---------------------------------------------------------- mobile */ @media (max-width:760px){ :root{--gutter:18px} .utility .container{justify-content:flex-start;gap:9px} .utility a,.textsize > span{font-size:12.5px} .textsize{display:none} .textsize button{min-width:28px;min-height:28px;padding:3px 6px} .search{flex:1 1 100%;order:3} .search input{min-width:0;width:100%} .header-main{min-height:78px;position:relative} .header-main .container{display:flex;align-items:center;justify-content:space-between} .header-main .container{gap:8px} .site-logo img{width:min(100%,260px)} .brand-tag{font-size:10px;letter-spacing:.16em} .nav-toggle{display:inline-flex!important;position:absolute;right:18px;top:18px;z-index:3; min-height:42px;width:42px;padding:0;justify-content:center;border-radius:50%} .nav-toggle svg{width:21px;height:21px} .nav-toggle{font-size:0;gap:0} .hero{min-height:auto} .hero-picture img{object-position:54% 45%;animation:none} /* 1fr has an automatic minimum of its content's size, so the column grew past the container and took the meeting card with it */ .hero-inner{min-height:700px;grid-template-columns:minmax(0,1fr);align-content:end; padding-top:100px;padding-bottom:75px} .hero-title{ font-size:clamp(40px,11.4vw,52px);line-height:.86;margin-bottom:16px; max-width:calc(100vw - 36px);overflow:visible;letter-spacing:-.06em; transform:rotate(-2.2deg) skewX(-3deg); } .hero-title .hero-green{width:auto} .hero-swoosh{width:min(66vw,260px);height:9px;margin:-4px 0 21px 112px} /* line-height .75 is right at desktop size; on a phone the descenders and the swoosh ran into the sub-head */ .hero-subtitle{font-size:20px} /* a grid item defaults to min-width:auto, so this one refused to shrink below its content and hung 15px past the phone's right edge */ .meeting-card{justify-self:stretch;max-width:100%;min-width:0;padding:22px} .meeting-card .button{min-height:46px} /* on a phone the strip becomes a swipeable row of plain cards, so the band sits below the wave in the normal way instead of rising into it */ .communities{margin-top:0} .communities-layout{grid-template-columns:1fr;padding-left:var(--gutter); padding-right:var(--gutter);padding-top:26px} .communities-copy h2{font-size:clamp(32px,9.4vw,39px);letter-spacing:-.055em;max-width:10ch} /* the phone stacks the band, so there is no band to sit centred in and no leaning cards for the words to answer */ .communities-copy{top:0;left:0;width:auto;--slope:0px} .communities-copy p{max-width:540px} /* the city label needs 305px inside a 300px card, so five pixels of it were being clipped at 200% text size */ .city-strip{overflow-x:auto;display:flex;height:auto;min-height:320px; scroll-snap-type:x mandatory; align-self:auto;margin:0 calc(var(--gutter) * -1) 0 0} .city-card{flex:0 0 72%;min-width:230px;clip-path:none;margin-left:12px; border-radius:14px;scroll-snap-align:start} .city-card h3{bottom:22px;left:22px;right:18px} .city-card:first-child{margin-left:0} .quick-links{grid-template-columns:1fr} .quick-link{border-right:0;border-bottom:1px solid var(--line)} .quick-link:last-child{border-bottom:0} .programs-heading-row{grid-template-columns:1fr;align-items:start;gap:20px} .programs-intro{max-width:none;padding-left:0} .programs-intro::before{display:none} .programs-heading-row h2 img{max-width:100%} .program-grid{grid-template-columns:1fr} .investing .container{grid-template-columns:1fr;gap:28px} .investing-stats{grid-template-columns:repeat(2,1fr)} .stat:nth-child(3){border-left:0} .site-footer .container{grid-template-columns:1fr;gap:22px} .footer-nav{justify-content:flex-start} .footer-right{justify-content:space-between} .footer-sign{text-align:left} } /* text-size control */ html[data-textsize="large"] body{font-size:19px} html[data-textsize="larger"] body{font-size:21px} html[data-textsize="large"] .main-nav a,html[data-textsize="larger"] .main-nav a{font-size:17px} @media print{ .utility,.nav-toggle,.footer-social,.hero-aside,.hero-wave{display:none} .hero::before,.investing::after{background:none} body{font-size:12pt;color:#000} } /* ============================================================ inner pages Same theme as the home page - same glass, same green marker, same two-tone headline - so a section page reads as the same site rather than a template. */ .page-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:var(--navy); min-height:clamp(300px,30vw,420px);display:flex;align-items:flex-end} .page-hero-media,.page-hero-media img{position:absolute;inset:0;width:100%;height:100%} .page-hero-media img{object-fit:cover;object-position:center 42%} .page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(92deg,rgba(0,32,56,.88) 0%,rgba(0,32,56,.70) 38%, rgba(0,32,56,.34) 68%,rgba(0,32,56,.48) 100%)} /* the wave that follows paints over the hero at z-index 9, so the bottom padding has to clear its full height or it sits on top of the lede */ .page-hero .container{position:relative;z-index:2; padding-block:clamp(26px,3vw,46px) calc(var(--wave-h) + clamp(14px,1.5vw,24px))} .page-hero .programs-eyebrow{color:#dff0fa} .page-hero .programs-eyebrow::before{background:var(--lime)} .page-hero h1{margin:0 0 14px;font-family:var(--font-display);font-weight:800;color:#fff; font-size:clamp(40px,4.6vw,74px);line-height:.9;letter-spacing:-.05em;max-width:18ch} .page-hero h1 .green{color:var(--lime)} .page-lede{margin:0;max-width:56ch;color:#eaf4fa;font-size:clamp(16px,1.3vw,20px);line-height:1.45} .crumbs{margin:0 0 clamp(14px,1.6vw,22px)} .crumbs ol{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none; font-size:clamp(12px,.95vw,14px);font-weight:700;color:#cfe6f5} .crumbs li + li::before{content:"›";margin-right:10px;color:#9fc6de} .crumbs a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45); display:inline-flex;align-items:center;min-height:24px} .crumbs a:hover{border-bottom-color:#fff} .block{padding-block:clamp(30px,3.4vw,58px)} .block:first-of-type{padding-top:clamp(26px,3vw,48px)} .block h2{margin:0 0 clamp(14px,1.4vw,20px);font-family:var(--font-display);font-weight:800; color:var(--navy);font-size:clamp(30px,3vw,48px);line-height:.94;letter-spacing:-.045em} .block p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.55;color:var(--ink);max-width:70ch} .block--prose p + p{margin-top:14px} .block-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:clamp(10px,.78vw,12px); font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-dark)} .block-eyebrow::before{content:"";width:clamp(22px,2vw,32px);height:4px;border-radius:99px; background:var(--lime);flex:none} .block-intro{margin:0 0 clamp(18px,2vw,28px);color:var(--muted)} .block-note{margin:0 0 clamp(16px,1.8vw,24px);color:var(--muted);font-size:clamp(14px,1.05vw,16px)} .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr)); gap:clamp(14px,1.5vw,22px);margin:0;padding:0;list-style:none} .info-card{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,1.8vw,26px); border-radius:clamp(16px,1.5vw,22px)} .info-card h3{margin:0;font-family:var(--font-display);font-weight:800;color:var(--navy); font-size:clamp(21px,1.75vw,27px);line-height:1;letter-spacing:-.035em} .info-card p{margin:0;font-size:clamp(14.5px,1.08vw,16.5px);line-height:1.42} .info-card .button{margin-top:auto;align-self:flex-start} .table-wrap{overflow-x:auto;border-radius:clamp(14px,1.4vw,20px)} .block--table table{width:100%;border-collapse:collapse;min-width:520px;background:#fff; box-shadow:0 12px 34px rgba(0,50,88,.09)} .block--table caption{caption-side:bottom;padding-top:12px;text-align:left; font-size:14px;color:var(--muted)} .block--table th,.block--table td{padding:clamp(11px,1.1vw,16px) clamp(12px,1.2vw,20px); text-align:left;border-bottom:1px solid var(--line);font-size:clamp(14px,1.08vw,16.5px)} .block--table thead th{background:var(--navy);color:#fff;font-weight:800;border-bottom:0} .block--table tbody th{font-weight:700;color:var(--navy)} .block--table tbody tr:nth-child(even){background:#f6fafc} .block--table tbody tr:last-child th,.block--table tbody tr:last-child td{border-bottom:0} /* 230px let four cards sit in a row, which broke every job title across three lines and every email address across three more. Two columns give a .gov address a line of its own and leave the four staff in a tidy square. */ .people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)); gap:clamp(14px,1.5vw,22px);margin:0;padding:0;list-style:none} .person{padding:clamp(18px,1.8vw,26px);border-radius:clamp(16px,1.5vw,22px)} .person-role{margin:0 0 6px;font-size:clamp(10px,.78vw,12px);font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--blue-dark)} .person h3{margin:0 0 10px;font-family:var(--font-display);font-weight:800;color:var(--navy); font-size:clamp(21px,1.7vw,26px);line-height:1;letter-spacing:-.035em} .person-lines{margin:0;font-size:clamp(14px,1.05vw,16px);line-height:1.6} .person-lines a{color:var(--blue-dark);font-weight:600;word-break:break-word; /* a phone number is the one link on this page someone taps on a phone; give it a real target rather than a 19px line of text */ display:inline-flex;align-items:center;min-height:26px} .doc-list{display:grid;gap:clamp(10px,1vw,14px);margin:0;padding:0;list-style:none} .doc{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center; gap:clamp(12px,1.2vw,20px);padding:clamp(13px,1.3vw,19px) clamp(15px,1.5vw,22px); border-radius:clamp(13px,1.2vw,17px);text-decoration:none;color:var(--navy)} .doc-kind{font-size:11px;font-weight:900;letter-spacing:.1em;padding:5px 9px;border-radius:7px; background:var(--navy);color:#fff} .doc-name{font-family:var(--font-display);font-weight:800;font-size:clamp(16px,1.3vw,21px); letter-spacing:-.03em;line-height:1.1} .doc-meta{color:var(--muted);font-size:clamp(12.5px,.95vw,14.5px)} .doc .arrow{color:var(--blue);font-size:26px;line-height:1} .doc:hover{transform:translateY(-2px)} .block--feature .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;gap:clamp(22px,3vw,54px)} .block--feature.is-flipped .feature-media{order:2} .feature-media img{width:100%;height:auto;display:block;border-radius:clamp(16px,1.6vw,24px); box-shadow:0 20px 50px rgba(0,50,88,.16)} .feature-copy p + p{margin-top:12px} .cta-panel{display:grid;grid-template-columns:1fr auto;align-items:center; gap:clamp(18px,2.2vw,40px);padding:clamp(22px,2.4vw,38px); border-radius:clamp(18px,1.8vw,28px);color:#fff} .cta-panel h2{color:#fff;margin:0 0 8px;font-size:clamp(25px,2.3vw,38px)} .cta-panel p{color:#e8f2f8;margin:0;max-width:52ch;font-size:clamp(14.5px,1.1vw,17px)} .cta-actions{display:flex;gap:12px;flex-wrap:wrap} .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,22px); padding:clamp(20px,2.2vw,34px);border-radius:clamp(18px,1.8vw,26px)} .field{display:flex;flex-direction:column;gap:7px} .field--wide{grid-column:1 / -1} .field label{font-weight:800;color:var(--navy);font-size:clamp(13.5px,1.02vw,15.5px)} .field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink); padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:48px} .field textarea{min-height:130px;resize:vertical} .hint{margin:0;font-size:13px;color:var(--muted)} .form-actions{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap} .form-status{margin:0;font-size:14.5px;font-weight:700;color:var(--blue-dark)} .form-status[data-state="error"]{color:#a3272b} .field [aria-invalid="true"]{border-color:#a3272b;box-shadow:0 0 0 3px rgba(163,39,43,.14)} .field-error{margin:0;font-size:13.5px;font-weight:700;color:#a3272b} /* ======================================== mobile: the Life & Faith menu Full-screen white overlay rather than a squashed dropdown, faded in over .25s, links grouped under labelled headings. Same pattern as lifeandfaithclothing.com, which is the one Prince asked to match. */ @media (max-width:1024px){ .main-nav{ position:fixed;inset:0;z-index:200;display:flex!important;flex-direction:column; align-items:stretch;gap:0;margin:0;padding:0;border-top:0; background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s ease,visibility .25s ease; } /* the desktop rule pushes the row to the right; turned upright by the overlay that becomes flex-end at the BOTTOM, which left the links sitting below a third of a blank screen */ .main-nav{justify-content:flex-start} .main-nav.is-open{opacity:1;visibility:visible;pointer-events:auto} /* the chat launcher is fixed and outranked the panel's own stacking context, so it floated over the last nav item */ html.nav-open .chat-bubble{display:none} .main-nav::before{ content:"Menu";display:block;flex:none; /* the close control is 48px tall and sits in this band; the right padding keeps the label out from under it and the height keeps the rule below the button rather than through it */ padding:30px 76px 20px var(--gutter); font:800 12px/1 var(--font-sans);letter-spacing:.22em;text-transform:uppercase; color:var(--lime-dark);border-bottom:1px solid var(--line); } .main-nav a{ display:flex;align-items:center;justify-content:space-between; padding:17px var(--gutter);border-bottom:1px solid var(--line); font-family:var(--font-display);font-weight:800;font-size:23px;letter-spacing:-.035em; color:var(--navy); } .main-nav a::after{content:"›";font-family:var(--font-sans);font-size:26px; font-weight:400;color:var(--blue);display:block;right:auto;position:static; background:none;height:auto;border-radius:0;transition:none} .main-nav a[aria-current="page"]{background:#f2f9fd} .main-nav a[aria-current="page"]::after{color:var(--lime-dark)} /* the close control, injected by site.js so it only exists when it works */ .nav-close{ position:absolute;top:14px;right:var(--gutter);z-index:2; appearance:none;border:0;cursor:pointer;min-width:48px;min-height:48px; border-radius:50%;background:var(--navy);color:#fff; font:900 22px/1 var(--font-sans);display:grid;place-items:center; } html.nav-open,html.nav-open body{overflow:hidden} .nav-toggle[aria-expanded="true"]{background:var(--blue-dark)} } /* ======================================== mobile: pages + card cropping */ @media (max-width:860px){ .block--feature .container{grid-template-columns:1fr} .block--feature.is-flipped .feature-media{order:0} .cta-panel{grid-template-columns:1fr} .contact-form{grid-template-columns:1fr} } @media (max-width:760px){ .page-hero{min-height:0} .page-hero h1{font-size:clamp(32px,9vw,44px);max-width:none} .doc{grid-template-columns:auto 1fr auto;row-gap:6px} .doc-meta{grid-column:2 / -1} /* The programme card art was being cropped: a fixed 170px well with object-fit:contain squeezed a 4:3 render into a letterbox on a narrow screen. The well now keeps the artwork's own ratio and the image is never taller than it. */ .program-card{min-height:0} .program-card-image{height:auto;aspect-ratio:4 / 3;padding:10px} .program-card-image img{width:100%;height:100%;object-fit:contain} .program-grid{gap:18px} .programs-heading-row h2 img{max-width:100%} .investing-stats{grid-template-columns:repeat(2,1fr);row-gap:6px} .stat{border-left:0;min-height:0;padding-block:14px} .stat:nth-child(even){border-left:1px solid rgba(255,255,255,.34)} .footer-legal-nav{justify-content:flex-start} } @media (max-width:420px){ .info-grid,.people-grid{grid-template-columns:1fr} .investing-stats{grid-template-columns:1fr} .stat:nth-child(even){border-left:0} } /* ======================================== the chat bubble */ .chat-bubble{position:fixed;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);z-index:180; font-family:var(--font-sans)} .chat-open{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 20px;border:0; border-radius:999px;cursor:pointer;font:900 14px/1 var(--font-sans);color:#fff; background:linear-gradient(180deg,#17739f,#0c5180); box-shadow:0 14px 34px rgba(2,40,70,.36),0 0 26px -8px rgba(60,160,220,.6)} .chat-open:hover{transform:translateY(-2px)} .chat-open.has-new::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime); box-shadow:0 0 0 4px rgba(184,224,56,.3)} .chat-panel{position:absolute;right:0;bottom:64px;width:min(330px,calc(100vw - 24px)); background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden; box-shadow:0 26px 64px rgba(0,30,54,.28);display:flex;flex-direction:column} .chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px; background:var(--navy);color:#fff;font-size:15px} .chat-close{appearance:none;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer; width:30px;height:30px;border-radius:50%;font:700 18px/1 var(--font-sans)} .chat-log{list-style:none;margin:0;padding:12px;max-height:280px;overflow:auto;display:grid;gap:8px} .chat-log li{padding:9px 12px;border-radius:13px;font-size:14.5px;line-height:1.35;max-width:88%} .chat-log .them{background:#eef5fa;color:var(--ink);justify-self:start} .chat-log .me{background:var(--navy);color:#fff;justify-self:end} .chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)} .chat-form input{flex:1;font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--line); border-radius:11px;min-height:44px} .chat-form .button{min-height:44px;padding:0 16px;font-size:13px} .chat-form .button::after{display:none} @media (max-width:480px){.chat-open-label{display:none}.chat-open{padding:0 16px}} @media print{.chat-bubble{display:none}} /* ======================================== search results The header's search box used to point at "#". It now lands here, on a page built from the same blocks as every other one. */ .search-page-form{margin:0 0 clamp(18px,2vw,26px)} .search-page-form label{display:block;margin:0 0 10px;font-weight:700;color:var(--navy)} .search-page-row{display:flex;gap:12px;flex-wrap:wrap} .search-page-row input{ flex:1 1 320px;min-width:0;min-height:56px;padding:0 18px; border:1px solid var(--line);border-radius:14px;background:#fff; font:inherit;font-size:17px;color:var(--ink); } .search-page-row input:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .search-page-row .button{flex:0 0 auto} .search-count{margin:0 0 clamp(14px,1.5vw,20px);color:var(--muted);font-size:16px} .search-results{list-style:none;margin:0;padding:0;display:grid;gap:12px} .search-result a{ display:grid;grid-template-columns:1fr auto;align-items:center; gap:6px clamp(14px,1.6vw,22px); padding:clamp(16px,1.7vw,22px);border:1px solid var(--line);border-radius:16px; background:#fff;color:inherit;text-decoration:none; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; } .search-result a:hover,.search-result a:focus-visible{ border-color:var(--blue);transform:translateY(-2px); box-shadow:0 12px 26px rgba(7,44,74,.10); } .search-result-title{ grid-column:1;font-family:var(--font-display);font-weight:800; font-size:clamp(18px,1.5vw,23px);color:var(--navy);line-height:1.15; } .search-result-snip{grid-column:1;color:var(--muted);font-size:15.5px;line-height:1.55} .search-result .arrow{grid-column:2;grid-row:1 / span 2;color:var(--blue);font-size:26px;line-height:1} .search-result mark{background:#eaf7c8;color:var(--navy);padding:0 2px;border-radius:3px} @media (max-width:640px){ .search-result a{grid-template-columns:1fr} .search-result .arrow{display:none} } /* ======================================== forms, cases and the agreement The applications that used to be PDFs. Everything here has to work at a large text size and on a phone, because the people filling these in are the ones the agency's own programmes serve. */ .applyform{max-width:720px;margin:0} .applyform--short{max-width:520px} .form-replaces{margin:0 0 clamp(20px,2.2vw,30px);padding:14px 18px; border-left:4px solid var(--lime-dark);background:var(--soft);border-radius:0 12px 12px 0; color:var(--muted);font-size:15.5px;line-height:1.5} .form-replaces strong{color:var(--navy)} .field{margin:0 0 clamp(18px,2vw,26px)} /* :not(.choice) matters: a radio or checkbox row is also a