/* Two Generations · design mockup v2 · 28 September 2026 Brand values are tokens at the top. Structure below reads only tokens, so the build can lift structure into the engine and values into the client brand file. */ :root{ /* brand, read from the logo */ --navy:#284F69; --teal:#32758F; --sky:#6FB1C8; --leaf:#9CC39B; --sage:#7F9C78; /* working colours */ --navy-deep:#1E3F55; --ink:#1D3A4C; --body:#3B5462; --line:#DCE6E8; --white:#fff; --paper:#FCFBF7; --meadow:#E9F3E6; --mist:#E3F0F5; --sun:#FFEFC9; --sun-deep:#FBD98A; /* set per audience on */ --tint:var(--meadow); --tint-2:#D6E8D2; --accent:var(--sage); --accent-deep:#55744F; --hero-a:#E9F3E6; --hero-b:#FFF6E0; /* type */ --display:"Fraunces", Georgia, serif; --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* layout */ --wrap:1280px; --gutter:clamp(20px,4vw,48px); --space:clamp(80px,9vw,136px); --edge:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); --radius:28px; --radius-lg:56px; --radius-sm:16px; --shadow:0 1px 2px rgba(40,79,105,.06), 0 16px 40px -16px rgba(40,79,105,.22); } body.orgs{ --tint:var(--mist); --tint-2:#CFE4EC; --accent:var(--teal); --accent-deep:var(--teal); --hero-a:#E3F0F5; --hero-b:#EAF4E8; } *{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{margin:0; background:var(--paper); color:var(--body); font:400 18px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip} img{max-width:100%; display:block} a{color:var(--teal); text-underline-offset:3px} h1,h2,h3{font-family:var(--display); color:var(--ink); font-weight:400; line-height:1.1; margin:0 0 .5em; letter-spacing:-.018em; font-optical-sizing:auto} h1{font-size:clamp(42px,5.4vw,76px)} h2{font-size:clamp(34px,3.9vw,54px)} h3{font-size:clamp(21px,1.7vw,25px); line-height:1.25; letter-spacing:-.005em} p{margin:0 0 1em} .lede{font-size:clamp(19px,1.5vw,22px); line-height:1.6} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)} .section{padding:var(--space) 0; position:relative} .measure{max-width:720px} :focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px} .skip{position:absolute; left:-999px} .skip:focus{left:16px; top:16px; background:#fff; padding:10px 16px; z-index:100} /* colour bands: the page moves through colour, it is never all white */ .bg-tint{background:var(--tint)} .bg-meadow{background:var(--meadow)} .bg-mist{background:var(--mist)} .bg-sun{background:var(--sun)} .bg-white{background:#fff} .bg-navy{background:var(--navy-deep); color:#CFE0E8} .bg-navy h2,.bg-navy h3{color:#fff} .bg-navy .lede{color:#CFE0E8} /* buttons */ .btn{display:inline-flex; align-items:center; gap:10px; min-height:56px; padding:0 30px; border-radius:999px; font:600 17px/1 var(--sans); text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, box-shadow .15s ease} .btn--solid{background:var(--navy); color:#fff} .btn--solid:hover{background:var(--navy-deep); transform:translateY(-1px); box-shadow:var(--shadow)} .btn--ghost{border-color:var(--navy); color:var(--navy); background:transparent} .btn--ghost:hover{background:rgba(40,79,105,.07)} .btn--white{background:#fff; color:var(--navy)} .btn--white:hover{transform:translateY(-1px); box-shadow:var(--shadow)} .link-arrow{font-weight:600; color:var(--navy); text-decoration:none; display:inline-flex; gap:8px; align-items:center} .link-arrow::after{content:"→"; transition:transform .15s ease} a:hover .link-arrow::after,.link-arrow:hover::after{transform:translateX(4px)} /* audience bar: the switch between the two sides of the organisation */ .audbar{background:var(--navy-deep); font-size:15px} .audbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px} .switch{display:inline-flex; background:rgba(255,255,255,.12); border-radius:999px; padding:4px; gap:2px} .switch a{padding:9px 20px; border-radius:999px; text-decoration:none; color:#DCE8EE; font-weight:600; white-space:nowrap; transition:background .15s ease} .switch a:hover{color:#fff; background:rgba(255,255,255,.1)} .switch a[aria-current="page"]{background:#fff; color:var(--navy-deep)} .audbar__contact{display:flex; gap:24px; align-items:center} .audbar__contact a{color:#fff; text-decoration:none; font-weight:600} .audbar__contact a:hover{text-decoration:underline} /* header */ .header{position:sticky; top:0; z-index:600; background:rgba(252,251,247,.94); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent} .header.is-stuck{border-bottom-color:var(--line)} .header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px} .logo img{height:50px; width:auto} .nav{display:flex; align-items:center; gap:clamp(16px,2.2vw,34px)} .nav a:not(.btn){color:var(--ink); text-decoration:none; font-weight:500; font-size:17px; padding:8px 0; border-bottom:2px solid transparent} .nav a:not(.btn):hover{border-bottom-color:var(--accent)} .navtoggle{display:none; background:none; border:0; padding:10px; cursor:pointer} .navtoggle span{display:block; width:26px; height:2px; background:var(--ink); margin:6px 0; border-radius:2px} /* hero: big photograph running off the right edge, two ribbons across it */ .hero{background:linear-gradient(120deg,var(--hero-a) 0%, var(--hero-b) 100%); padding:clamp(28px,3vw,48px) 0 0; overflow:hidden} .hero__grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,4vw,72px); align-items:center; padding-left:var(--edge)} .hero h1 em{font-style:italic; color:var(--accent-deep)} .hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px} .hero__media{position:relative; height:clamp(520px,72vh,760px); border-radius:var(--radius-lg) 0 0 var(--radius-lg); overflow:hidden} .hero__media img{width:100%; height:100%; object-fit:cover} .ribbon{position:absolute; inset:0; width:100%; height:100%; pointer-events:none} .ribbon path{fill:none; stroke-linecap:round; stroke-width:44} .hero__note{position:absolute; left:28px; top:28px; background:rgba(255,255,255,.96); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:16px 20px; max-width:300px; font-size:15.5px; line-height:1.45} .hero__note strong{display:block; color:var(--ink); font-size:16px} /* chooser: "what brings you here" */ .chooser{padding-top:clamp(48px,5vw,80px); padding-bottom:var(--space)} .chooser__label{font:400 clamp(26px,2.4vw,34px)/1.2 var(--display); color:var(--ink); margin:0 0 28px; letter-spacing:-.01em} .chooser__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px} .choice{display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:var(--radius); padding:32px; text-decoration:none; color:var(--body); box-shadow:0 1px 2px rgba(40,79,105,.05); transition:transform .18s ease, box-shadow .18s ease} .choice:hover{transform:translateY(-4px); box-shadow:var(--shadow)} .choice__icon{width:56px; height:56px; border-radius:50%; background:var(--tint); display:grid; place-items:center; color:var(--accent-deep)} .choice__icon svg{width:28px; height:28px} .choice h3{margin:8px 0 0} .choice p{margin:0; font-size:16.5px; line-height:1.55} .choice .link-arrow{margin-top:auto; padding-top:12px} .chooser__aside{margin:28px 0 0; font-size:16.5px} /* name strip */ .strip{background:#fff} .strip .wrap{display:flex; align-items:center; gap:clamp(20px,4vw,56px); min-height:104px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px} .strip__label{font-size:15px; white-space:nowrap} .strip__names{display:flex; flex-wrap:wrap; gap:clamp(18px,3.4vw,52px); align-items:center; font:500 20px/1 var(--display); color:var(--navy)} /* bleed split: a large photograph running off one edge of the page */ .bleed{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,96px); align-items:center} .bleed__media{position:relative; height:clamp(440px,60vh,680px); border-radius:0 var(--radius-lg) var(--radius-lg) 0; overflow:hidden} .bleed__media img{width:100%; height:100%; object-fit:cover} .bleed__body{padding-right:var(--edge)} .bleed--flip .bleed__media{order:2; border-radius:var(--radius-lg) 0 0 var(--radius-lg)} .bleed--flip .bleed__body{padding-right:0; padding-left:var(--edge)} /* spotlight: one testimonial given the whole width */ .spot blockquote{margin:0 0 28px; font:400 clamp(28px,3vw,44px)/1.25 var(--display); color:var(--ink); letter-spacing:-.015em} .spot blockquote::before{content:"“"; display:block; font-size:2.6em; line-height:.6; color:var(--sun-deep); margin-bottom:.12em} .spot__who{font-size:17px; margin-bottom:6px} .spot__who strong{color:var(--ink)} .spot__story{font-size:16.5px; max-width:520px} /* cards */ .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px} .card{background:#fff; border-radius:var(--radius); padding:36px} .card h3{margin-bottom:10px} .card p:last-child{margin-bottom:0} .card__figure{font:400 48px/1 var(--display); color:var(--accent-deep); margin:0 0 14px; letter-spacing:-.02em} .card__figure small{font:500 16px/1 var(--sans); color:var(--body); letter-spacing:0} /* tabs: the smaller groups inside each audience */ .tabs__list{display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 28px} .tabs__tab{font:600 17px/1 var(--sans); padding:16px 26px; border-radius:999px; border:0; background:#fff; color:var(--ink); cursor:pointer; box-shadow:0 1px 2px rgba(40,79,105,.08)} .tabs__tab:hover{background:var(--tint-2)} .tabs__tab[aria-selected="true"]{background:var(--navy); color:#fff} .tabs__panel{background:#fff; border-radius:var(--radius-lg); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,3vw,56px); align-items:center; padding:clamp(20px,2.4vw,36px); box-shadow:var(--shadow)} .tabs__panel[hidden]{display:none} .tabs__text{padding:clamp(8px,2vw,32px)} .tabs__media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius)} .tabs__quote{margin:0; padding:24px 8px 4px} .tabs__quote blockquote{margin:0 0 10px; font:400 italic clamp(19px,1.5vw,22px)/1.45 var(--display); color:var(--ink)} .tabs__quote figcaption{font-size:15.5px} .tabs__quote strong{color:var(--ink)} .ticks{list-style:none; padding:0; margin:0 0 28px} .ticks li{padding-left:36px; position:relative; margin-bottom:12px} .ticks li::before{content:""; position:absolute; left:0; top:.28em; width:24px; height:24px; border-radius:50%; background:var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23284F69' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat} /* stories: the testimonial slider */ .stories__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap} .stories__head h2{margin:0} .stories__nav{display:flex; gap:10px} .stories__nav button{width:56px; height:56px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); background:none; color:#fff; font-size:22px; cursor:pointer; transition:background .15s ease} .stories__nav button:hover{background:rgba(255,255,255,.14)} .stories__track{display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding:48px var(--edge) 12px; scrollbar-width:none; scroll-padding-left:var(--edge)} .stories__track::-webkit-scrollbar{display:none} .story{flex:0 0 min(620px,84vw); scroll-snap-align:start; border-radius:var(--radius-lg); overflow:hidden; background:#fff; display:flex; flex-direction:column} .story__photo{aspect-ratio:3/2; overflow:hidden} .story__photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease} .story:hover .story__photo img{transform:scale(1.03)} .story__card{padding:30px 34px 34px; color:var(--body); display:flex; flex-direction:column; gap:14px; flex:1} .story__card blockquote{margin:0; font:400 italic clamp(20px,1.6vw,23px)/1.42 var(--display); color:var(--ink)} .story__who{font-size:16px; margin:auto 0 0} .story__who strong{color:var(--ink)} /* quote wall, used on the organisations side */ .wall{display:grid; grid-template-columns:1.25fr 1fr; gap:28px; margin-top:48px} .wall__stack{display:grid; gap:28px} .wquote{margin:0; border-radius:var(--radius-lg); padding:clamp(28px,3.4vw,52px); background:rgba(255,255,255,.08); display:flex; flex-direction:column; justify-content:space-between; gap:28px} .wquote blockquote{margin:0; font:400 clamp(20px,1.7vw,24px)/1.45 var(--display); color:#fff} .wquote--lead{background:#fff} .wquote--lead blockquote{font-size:clamp(21px,1.9vw,28px); line-height:1.36; color:var(--ink)} .wquote--lead blockquote::before{content:"“"; display:block; font-size:2.6em; line-height:.6; color:var(--sky); margin-bottom:.12em} .wquote figcaption{font-size:16px; color:#CFE0E8} .wquote figcaption strong{color:#fff; display:block; font-size:17px} .wquote--lead figcaption{color:var(--body)} .wquote--lead figcaption strong{color:var(--ink)} /* finder: full width, photographs on the left, map on the right */ .finder{margin:44px clamp(12px,2vw,28px) 0; background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); height:clamp(640px,86vh,880px)} .finder__panel{display:flex; flex-direction:column; min-height:0} .finder__head{padding:24px 28px 18px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; border-bottom:1px solid var(--line)} .finder__modes{display:flex; background:var(--tint); border-radius:999px; padding:4px} .finder__modes button{border:0; background:none; font:600 15.5px/1 var(--sans); padding:12px 20px; border-radius:999px; color:var(--body); cursor:pointer; white-space:nowrap} .finder__modes button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(40,79,105,.2)} .finder__search{flex:1; min-width:220px; display:flex} .finder__search input{flex:1; min-width:0; height:52px; border-radius:999px; border:1.5px solid var(--line); padding:0 22px; font:400 16.5px var(--sans); color:var(--ink); background:var(--paper)} .finder__search input:focus{outline:none; border-color:var(--teal)} .finder__count{width:100%; font-size:15px; margin:0} .finder__list{overflow:auto; padding:24px 28px 28px; flex:1; min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; align-content:start} .place{display:block} .place__show{display:block; width:100%; text-align:left; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; border-radius:var(--radius-sm)} .place__link{display:inline-block; margin-top:6px; font-size:15px; font-weight:600; color:var(--teal)} .place__photo{display:block; aspect-ratio:4/3; border-radius:20px; overflow:hidden; background:var(--tint); margin-bottom:12px; position:relative} .place__photo img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease} .place:hover .place__photo img{transform:scale(1.04)} .place.is-active .place__photo{outline:3px solid var(--navy); outline-offset:3px} .place__name{display:block; font-weight:600; color:var(--ink); font-size:17.5px; line-height:1.3} .place__meta{display:block; font-size:15px; line-height:1.45} .place__price{display:block; margin-top:4px; color:var(--ink); font-size:16px} .place__price b{font-weight:600} .place--area{background:var(--tint); border-radius:20px; padding:24px} .place--area.is-active{outline:3px solid var(--navy); outline-offset:3px} .place__tag{display:inline-block; font-size:13.5px; font-weight:600; background:#fff; color:var(--ink); border-radius:999px; padding:5px 12px; margin-bottom:12px} .finder__fallback{grid-column:1/-1; margin:0} .finder__map{position:relative; background:var(--mist)} #map{position:absolute; inset:0} .leaflet-tile-pane{filter:saturate(.5) brightness(1.05) contrast(.95)} .finder__safe{position:absolute; left:16px; bottom:16px; z-index:500; background:rgba(255,255,255,.96); border-radius:999px; padding:9px 16px; font-size:13.5px; color:var(--ink); box-shadow:var(--shadow)} .pill{display:inline-block; transform:translate(-50%,-50%); background:#fff; color:var(--ink); font:600 14.5px/1 var(--sans); padding:9px 13px; border-radius:999px; box-shadow:0 2px 8px rgba(30,63,85,.28); white-space:nowrap; transition:transform .15s ease, background .15s ease} .pill:hover,.pill.is-active{background:var(--navy-deep); color:#fff; transform:translate(-50%,-50%) scale(1.08)} .pill--area{background:var(--teal); color:#fff} .leaflet-popup-content-wrapper{border-radius:20px; box-shadow:var(--shadow); padding:0; overflow:hidden} .leaflet-popup-content{font:400 15px/1.5 var(--sans); color:var(--body); margin:0; width:240px !important} .leaflet-popup-content img{width:100%; height:150px; object-fit:cover} .leaflet-popup-content div{padding:14px 18px 18px} .leaflet-popup-content strong{display:block; color:var(--ink); font-size:17px} .leaflet-popup-content a{font-weight:600} /* steps */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; counter-reset:step} .step{background:#fff; border-radius:var(--radius); padding:36px; counter-increment:step} .step::before{content:counter(step); display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff; font:500 21px/1 var(--display); margin-bottom:20px} .step p{margin:0; font-size:16.5px} /* partner areas */ .areas{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px} .area{background:#fff; border-radius:var(--radius); padding:32px} .area__tag{display:inline-block; font-size:13.5px; font-weight:600; background:var(--tint); color:var(--ink); border-radius:999px; padding:5px 12px; margin-bottom:14px} .area p{font-size:16.5px; margin:0} /* closing call to action: full width, brand gradient, ribbons behind */ .close{background:linear-gradient(115deg,var(--navy-deep) 0%, var(--teal) 60%, #5E9C8C 100%); color:#E4EFF3; position:relative; overflow:hidden} .close .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; position:relative; z-index:1} .close h2{color:#fff; font-size:clamp(38px,4.6vw,64px)} .close p{margin:0} .close__actions{display:flex; flex-direction:column; gap:16px; align-items:stretch} .close__actions .btn{justify-content:center} .close a:not(.btn){color:#fff; font-weight:600; font-size:18px} .close .ribbon{opacity:.22} /* footer */ .footer{padding:80px 0 40px; font-size:15.5px; background:var(--navy-deep); color:#BBD0DB} .footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px} .footer__logo{background:#fff; display:inline-block; padding:12px 18px; border-radius:var(--radius-sm); margin-bottom:24px} .footer__logo img{height:40px} .footer h4{font:600 15px/1 var(--sans); color:#fff; margin:0 0 16px} .footer ul{list-style:none; margin:0; padding:0} .footer li{margin-bottom:10px} .footer a{color:#BBD0DB; text-decoration:none} .footer a:hover{color:#fff; text-decoration:underline} .footer__legal{margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); font-size:14px} /* mockup note, not part of the design */ .mocknote{background:#12293A; color:#a9c0cd; font-size:13px; text-align:center; padding:7px 16px} /* reveal */ /* content shows by default; it is only hidden once the page knows its script is running */ .js .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease} .js .reveal.is-in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto}} /* tablet */ @media (max-width:1020px){ .hero__grid{grid-template-columns:1fr; padding-left:0} .hero__text{padding:0 var(--gutter)} .hero__media{border-radius:var(--radius-lg) var(--radius-lg) 0 0; margin:0 var(--gutter); height:auto; aspect-ratio:4/3} .bleed,.bleed--flip{grid-template-columns:1fr} .bleed__media,.bleed--flip .bleed__media{order:0; border-radius:var(--radius-lg); margin:0 var(--gutter); height:auto; aspect-ratio:4/3} .bleed__body,.bleed--flip .bleed__body{padding:0 var(--gutter)} .tabs__panel,.close .wrap,.wall{grid-template-columns:1fr} .tabs__media{order:-1} .chooser__grid,.cards,.steps,.areas{grid-template-columns:repeat(2,1fr)} .finder{grid-template-columns:1fr; height:auto} .finder__map{height:460px; order:-1} .finder__list{max-height:720px} .footer__grid{grid-template-columns:1fr 1fr} /* without a working script the menu wraps under the logo; with one it folds behind the button */ .header .wrap{min-height:76px; position:relative; flex-wrap:wrap; padding-top:10px; padding-bottom:10px} .nav{flex-wrap:wrap; gap:4px 20px} .js .header .wrap{flex-wrap:nowrap; padding-top:0; padding-bottom:0} .js .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); flex-direction:column; flex-wrap:nowrap; align-items:flex-start; padding:16px var(--gutter) 28px; border-bottom:1px solid var(--line); gap:6px} .js .nav.is-open{display:flex} .js .nav a:not(.btn){font-size:19px; padding:12px 0; width:100%} .js .navtoggle{display:block} .audbar__contact .hide-s{display:none} } /* phone */ @media (max-width:640px){ body{font-size:17px} .chooser__grid,.cards,.steps,.areas,.footer__grid{grid-template-columns:1fr} .audbar .wrap{flex-direction:column; align-items:stretch; padding-top:10px; padding-bottom:10px; gap:8px} .switch a{flex:1; text-align:center; padding:10px 8px; font-size:14.5px} .audbar__contact{justify-content:center} .btn{width:100%; justify-content:center} .hero__cta{flex-direction:column} .hero__media{aspect-ratio:1/1} .hero__note{left:16px; top:16px; right:16px; max-width:none} .ribbon path{stroke-width:34} .tabs__tab{flex:1 1 auto} .finder__list{grid-template-columns:1fr 1fr; gap:20px 14px; padding:18px} .finder__head{padding:18px} .story__card{padding:22px 24px 26px} .story__card blockquote{font-size:18px} }