/* ============================================================ Department of Tourism, Vanuatu — homepage Design language modelled on marketdevelopmentfacility.org: black canvas, full-bleed photography, heavy grotesque heads, a clickable dot map, and an expanding tile wall. Palette grounded in the Vanuatu flag. ============================================================ */ :root{ /* Official Department of Tourism palette. flame #fa4238 the single accent: eyebrows, focus, hover fills, rules green #009776 fills, icons, map dots; green-ink is its text-safe tint ochre #ca8241 warm fields — the sand section and the artwork slide bed blue #0091b2 secondary accent: arrows, icon gradients, the deep field ink #231f20 the canvas, and headings on the light fields */ --flame:#fa4238; --green:#009776; --green-ink:#00654f; /* 6.1:1 on cream — use this whenever green is text */ --ochre:#ca8241; --blue:#0091b2; --blue-lt:#4cc3de; /* blue is too dark to read on the deep field */ --ink:#231f20; --ink-2:#2a2526; /* section separation */ --ink-3:#332e2f; /* cards, hairlines */ --deep:#1a3b44; /* header and footer: the brand blue over the ink */ --cream:#F7EFE6; /* ochre at 10% */ --sand:#F4E7D8; /* ochre at 18% */ --paper:#ffffff; --ash:#8f8a88; /* secondary text */ --hair:rgba(255,255,255,.14); --shell:min(1360px, 100% - 3rem); --head-h:82px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} /* The browser hides [hidden] with display:none, but any rule of ours that sets display beats it — which silently broke the reports filter, where the rows are laid out with flex. Say it once, here, so hiding always means hidden. */ [hidden]{display:none !important} html{scroll-behavior:smooth} body{ margin:0; background:var(--ink); color:var(--paper); font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; font-variation-settings:"wdth" 100; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:3px solid var(--flame); outline-offset:3px} .news :focus-visible, .links :focus-visible, .vstp :focus-visible{outline-color:#231f20} /* ---------- type scale ---------- */ .display{ font-variation-settings:"wdth" 84,"wght" 800; font-size:clamp(2.9rem, 7.4vw, 6.4rem); line-height:.92; letter-spacing:-.02em; margin:0; text-transform:none; } .h2{ font-variation-settings:"wdth" 86,"wght" 800; font-size:clamp(2rem,4.4vw,3.5rem); line-height:1; letter-spacing:-.015em; margin:0; } .h3{ font-variation-settings:"wdth" 90,"wght" 700; font-size:1.35rem; line-height:1.15; letter-spacing:-.01em; margin:0; } .eyebrow{ font-variation-settings:"wdth" 100,"wght" 700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--flame); margin:0 0 1.1rem; } .lede{font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.55; color:rgba(255,255,255,.9)} .muted{color:var(--ash)} .shell{width:var(--shell); margin-inline:auto} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---------- link button (MDF's outlined pill) ---------- */ .btn{ display:inline-flex; align-items:center; gap:.75rem; border:1.5px solid var(--paper); border-radius:999px; padding:.72rem 1.5rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-variation-settings:"wght" 700; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .btn svg{width:14px;height:14px;transition:transform .35s var(--ease)} .btn:hover{background:var(--flame); border-color:var(--flame); color:var(--ink)} .btn:hover svg{transform:translateX(4px)} /* ============ HEADER ============ */ .head{ position:fixed; inset:0 0 auto; z-index:60; height:var(--head-h); display:flex; align-items:center; transition:background .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease); border-bottom:1px solid transparent; } /* The deep field, matching the footer, so the page opens and closes on the same colour. Left transparent in its base state so the hero stays full-bleed; these are the two states where the bar is actually drawn. */ .head.stuck{background:rgba(26,59,68,.94); backdrop-filter:blur(14px); height:68px; border-bottom-color:var(--hair)} .head__in{width:var(--shell); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:2rem} /* co-branded lockup, in the spirit of MDF + DFAT */ /* The official mark carries the name itself, so no typeset lockup beside it. */ .lockup{display:flex; align-items:center} .lockup__mark{height:42px; width:auto; transition:height .4s var(--ease)} .head.stuck .lockup__mark{height:34px} .foot .lockup__mark{height:54px} /* The gap gives way before the labels do: French runs a good deal longer than English and a wrapped top level row reads as a mistake. */ .nav{display:flex; align-items:center; gap:clamp(1rem,1.55vw,2.1rem)} .nav a, .nav__trigger{font-size:.86rem; letter-spacing:.02em; font-variation-settings:"wght" 500; position:relative; padding:.35rem 0} .nav > a, .nav__trigger, .nav__has > a{white-space:nowrap} /* French sets the same menu in noticeably longer words, so it needs the row to ease off sooner — smaller labels through the middle widths, and the drawer at the point where the row would otherwise run past the flags. English keeps its own, later, breakpoint below. */ @media (min-width:1081px) and (max-width:1400px){ html[lang^="fr"] .nav{gap:clamp(.85rem,1.05vw,1.4rem)} html[lang^="fr"] .nav a, html[lang^="fr"] .nav__trigger{font-size:.79rem} html[lang^="fr"] .nav a.nav__btn{padding-inline:1.15rem} } .nav a::after, .nav__trigger::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--flame); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease); } .nav a:hover::after, .nav__trigger:hover::after{transform:scaleX(1)} /* Icon only: the label lives in aria-label so it is still announced. */ .nav__search{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--ash); transition:color .25s var(--ease), background .25s var(--ease)} .nav__search:hover{color:var(--paper); background:rgba(255,255,255,.08)} .nav__search svg{width:16px;height:16px} .burger{display:none; width:30px; height:20px; position:relative} .burger i{position:absolute; left:0; right:0; height:2px; background:var(--paper); transition:transform .3s var(--ease), opacity .2s} .burger i:nth-child(1){top:0} .burger i:nth-child(2){top:9px} .burger i:nth-child(3){top:18px} .head.open .burger i:nth-child(1){transform:translateY(9px) rotate(45deg)} .head.open .burger i:nth-child(2){opacity:0} .head.open .burger i:nth-child(3){transform:translateY(-9px) rotate(-45deg)} /* The header collapses earlier than the page grids do: the row has to hold the whole menu, the search and both flags, and it runs out of room well before a two column layout does. */ @media (max-width:1080px){ .burger{display:block} .lockup__mark{height:34px} .nav{ position:fixed; inset:var(--head-h) 0 0; background:var(--deep); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; padding:2rem 1.4rem; transform:translateX(100%); transition:transform .45s var(--ease); overflow:auto; } .head.open .nav{transform:none} .head.open{background:var(--deep)} .nav a, .nav__trigger{font-size:1.6rem; font-variation-settings:"wdth" 86,"wght" 700} /* In the drawer the pill sits on its own, not stretched across the column. */ .nav a.nav__btn{font-size:.92rem; padding:.7rem 1.5rem; align-self:flex-start; margin-top:.4rem} } /* ============ HERO SLIDESHOW ============ */ .hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate} /* --- stacked slides, crossfaded --- */ .slide{position:absolute; inset:0; opacity:0; pointer-events:none; z-index:1} .slide.is-active{opacity:1; pointer-events:auto; z-index:2} .slide__media{position:absolute; inset:0; overflow:hidden} .slide__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 9s linear, opacity 1.2s var(--ease); opacity:0; } .slide.is-active .slide__media img{transform:scale(1); opacity:1} .slide__media::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.26) 38%, rgba(0,0,0,.92) 100%), linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 62%); } .slide__in{ position:absolute; inset:auto 0 0 0; width:var(--shell); margin-inline:auto; z-index:2; padding:0 0 clamp(6rem,11vh,8.5rem); } /* One column: eyebrow, title, standfirst, supporting paragraph, then the button — each following the one above rather than sitting beside it. */ .hero__grid{display:grid; grid-template-columns:minmax(0, 680px)} .hero__copy p{margin:1.6rem 0 0; max-width:52ch} .hero__meta{ margin-top:clamp(1.6rem,3vh,2.2rem); border-top:1px solid var(--hair); padding-top:1.4rem; font-size:.9rem; color:var(--ash); max-width:52ch; } .hero__meta > *:first-child{margin-top:0} .hero__meta > *:last-child{margin-bottom:0} .hero__meta b{color:var(--paper); font-variation-settings:"wght" 600} .hero__cta{margin-top:clamp(1.4rem,2.6vh,1.9rem)} /* copy lifts in, staggered, only on the active slide */ .slide .lift{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)} .slide.is-active .lift{opacity:1; transform:none} .slide.is-active .lift:nth-child(1){transition-delay:.15s} .slide.is-active .lift:nth-child(2){transition-delay:.28s} .slide.is-active .lift:nth-child(3){transition-delay:.4s} .slide.is-active .hero__meta{transition-delay:.46s} .slide.is-active .hero__cta{transition-delay:.54s} /* --- controls --- */ .hero__ui{ position:absolute; z-index:5; inset:auto 0 0 0; width:var(--shell); margin-inline:auto; padding-bottom:clamp(2rem,4vh,2.8rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .hero__tabs{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap} .tab{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); font-variation-settings:"wght" 700; transition:color .3s var(--ease); } .tab i{display:block; width:26px; height:2px; background:rgba(255,255,255,.28); position:relative; overflow:hidden} .tab i::after{ content:""; position:absolute; inset:0; background:var(--flame); transform:scaleX(0); transform-origin:left; } .tab:hover{color:rgba(255,255,255,.85)} .tab[aria-current="true"]{color:var(--paper)} .tab[aria-current="true"] i{width:56px} .tab[aria-current="true"] i::after{animation:fill var(--dwell,7s) linear forwards} .hero.is-paused .tab[aria-current="true"] i::after{animation-play-state:paused} @keyframes fill{to{transform:scaleX(1)}} .hero__arrows{display:flex; gap:.6rem} .arrow{ width:46px; height:46px; border:1.5px solid rgba(255,255,255,.4); border-radius:50%; display:grid; place-items:center; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .arrow svg{width:16px; height:16px} .arrow:hover{background:var(--flame); border-color:var(--flame); color:var(--ink)} /* --- artwork slide: a light, self-contained graphic, not a photo --- */ /* The Department's post art carries its own black logo and headline, so the usual heavy scrim would erase them. Here the top stays clean and only the foot of the slide darkens, letting the copy sit in the empty terracotta. */ .slide--art .slide__media{background:var(--ochre)} .slide--art .slide__media img{object-position:center 46%} .slide--art .slide__media::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 44%, rgba(0,0,0,.42) 62%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.98) 100%); } /* the header can't sit transparent over light art, so it goes solid here */ .head.solid{background:rgba(26,59,68,.94); backdrop-filter:blur(14px); border-bottom-color:var(--hair)} /* ============ SECTIONS ============ */ .sec{padding:clamp(5rem,11vh,9rem) 0} .sec--alt{background:var(--cream); color:#231f20} .sec__head{max-width:64ch; margin-bottom:clamp(2.5rem,5vh,4rem)} .sec__head p{margin:1.1rem 0 0} /* ---- Where we work: the dot map (MDF's signature, retuned to the archipelago) ---- */ .map{display:grid; grid-template-columns:minmax(280px,.9fr) 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center} .map__stage{position:relative} .map__stage svg{width:100%; height:auto; max-height:72vh} .isle{fill:#332e2f; stroke:#4a4344; stroke-width:1} .dot{cursor:pointer} .dot circle.hit{fill:transparent} .dot circle.core{fill:var(--flame); transition:r .3s var(--ease), fill .3s var(--ease)} .dot circle.ring{fill:none; stroke:var(--flame); stroke-width:1.4; opacity:.45; transform-box:fill-box; transform-origin:center; animation:pulse 3.4s var(--ease) infinite} .dot text{fill:var(--ash); font-size:12px; letter-spacing:.14em; font-variation-settings:"wght" 700; text-transform:uppercase; transition:fill .3s} .dot:hover circle.core, .dot[aria-selected="true"] circle.core{r:9; fill:var(--paper)} .dot:hover text, .dot[aria-selected="true"] text{fill:var(--paper)} .dot[aria-selected="true"] circle.ring{stroke:var(--paper); opacity:.8} @keyframes pulse{0%{transform:scale(1);opacity:.5} 70%{transform:scale(2.6);opacity:0} 100%{opacity:0}} .map__panel{border-top:2px solid var(--flame); padding-top:1.8rem} .map__panel .num{font-size:.7rem; letter-spacing:.22em; color:var(--flame); text-transform:uppercase} .map__panel h3{font-variation-settings:"wdth" 84,"wght" 800; font-size:clamp(2rem,3.6vw,3rem); line-height:1; margin:.7rem 0 .2rem} .map__panel .isles{font-size:.9rem; color:var(--ash); letter-spacing:.04em} .map__panel .body{margin:1.3rem 0 1.7rem; max-width:50ch; color:rgba(255,255,255,.88)} .map__stats{display:flex; flex-wrap:wrap; gap:2.5rem; margin-bottom:2rem} .map__stats div span{display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash)} .map__stats div b{font-variation-settings:"wdth" 84,"wght" 800; font-size:1.9rem; letter-spacing:-.01em} .fade-swap{animation:fade .45s var(--ease)} @keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}} /* --- Where we work on cream ------------------------------------------------ The map was drawn for a black canvas: white type, flame dots, near-black islands. On var(--cream) every one of those inverts or vanishes, so the whole section is re-toned to the ink/green the other light sections use. Flame is dropped here: it reads 3.1:1 on cream, under AA for text. */ .sec--alt .eyebrow{color:var(--green-ink)} .sec--alt .h2{color:#231f20} .sec--alt .lede{color:#5b5f5d} .sec--alt .muted{color:#8b8785} .sec--alt :focus-visible{outline-color:#231f20} .sec--alt .isle{fill:#EADFCF; stroke:#DCC9AE} .sec--alt .dot circle.core{fill:var(--green-ink)} .sec--alt .dot circle.ring{stroke:var(--green-ink)} .sec--alt .dot text{fill:#8b8785} .sec--alt .dot:hover circle.core, .sec--alt .dot[aria-selected="true"] circle.core{fill:#231f20} .sec--alt .dot:hover text, .sec--alt .dot[aria-selected="true"] text{fill:#231f20} .sec--alt .dot[aria-selected="true"] circle.ring{stroke:#231f20} .sec--alt .map__panel{border-top-color:var(--green-ink)} .sec--alt .map__panel .num{color:var(--green-ink)} .sec--alt .map__panel h3{color:#231f20} .sec--alt .map__panel .isles{color:#8b8785} .sec--alt .map__panel .body{color:#5b5f5d} .sec--alt .map__stats div span{color:#8b8785} .sec--alt .map__stats div b{color:#231f20} /* the outlined pill is white-on-black; it needs the light-section treatment */ .sec--alt .btn{border-color:#231f20; color:#231f20} .sec--alt .btn:hover{background:var(--green-ink); border-color:var(--green-ink); color:#fff} /* ---- Work with us --------------------------------------------------------- Sampled var(--sand). Useful links sits directly above on var(--cream) — ΔE 3.3, so the boundary between them is faintly visible. Swap this to var(--cream) if the whole light zone should read as one field. Like the map section, everything here was toned for black and is re-toned. */ .sec--work{background:var(--sand); color:#231f20} .sec--work .eyebrow{color:var(--green-ink)} .sec--work .h2{color:#231f20} .sec--work .lede{color:#5b5f5d} .sec--work :focus-visible{outline-color:#231f20} .sec--work .pillars{border-top-color:rgba(35,31,32,.16)} .sec--work .pillars li{border-bottom-color:rgba(35,31,32,.16)} .sec--work .pillars li em{color:var(--green-ink)} .sec--work .pillars li b{color:#231f20} .sec--work .pillars li p{color:#8b8785} .sec--work .btn{border-color:#231f20; color:#231f20} .sec--work .btn:hover{background:var(--green-ink); border-color:var(--green-ink); color:#fff} /* ---- What we do ---- */ .mandate{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem)} .pillars{list-style:none; margin:2.4rem 0 0; padding:0; border-top:1px solid var(--hair)} .pillars li{border-bottom:1px solid var(--hair); padding:1.15rem 0; display:flex; align-items:baseline; gap:1.2rem} .pillars li em{ font-style:normal; color:var(--flame); font-size:.72rem; letter-spacing:.16em; font-variation-settings:"wght" 700; min-width:2.2rem; } .pillars li b{font-variation-settings:"wdth" 90,"wght" 700; font-size:1.05rem} .pillars li p{margin:.25rem 0 0; font-size:.92rem; color:var(--ash)} /* --- notice slides: Department graphics, shown whole ---------------------- These assets are composites, not photographs. Cropping them to fill the frame would cut the artwork, and a scrim across them would bury it. So the graphic sits as a panel at close to its native width, with the copy on a clean black bed beneath it rather than on top. */ .slide--doc .slide__media{inset:calc(var(--head-h) + 1.2rem) 0 34% 0; background:none} .slide--doc .slide__media::after{display:none} .slide--doc .slide__media img{ position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:min(var(--shell), 100%); max-height:100%; object-fit:contain; transform:scale(1.03); transition:transform 1.4s var(--ease), opacity 1.1s var(--ease); } .slide--doc .slide__in{padding-bottom:clamp(6rem,11vh,8.5rem)} /* ---- What we do ----------------------------------------------------------- Photographic bed, serif headings, glass cards. The wash runs from the department green at the top edge to the department blue at the bottom, so two of the five official colours carry the band. */ .wwd{position:relative; overflow:hidden; padding:clamp(5rem,11vh,9rem) 0} .wwd__bg{position:absolute; inset:0; z-index:0} .wwd__bg img{width:100%; height:100%; object-fit:cover; object-position:center 60%} .wwd__bg::after{ content:""; position:absolute; inset:0; background: /* A scrim under the section head, so the title holds up over a bright sky whatever photograph is uploaded. Same idea as the page head banner. */ linear-gradient(90deg, rgba(2,22,26,.66) 0%, rgba(2,22,26,.30) 42%, rgba(0,0,0,0) 70%), /* Light enough to read the photograph through; the cards carry their own dark panel so the text does not rely on this wash for contrast. */ linear-gradient(155deg, rgba(0,62,50,.34) 0%, rgba(2,50,62,.40) 55%, rgba(4,26,32,.52) 100%), /* black above, cream below: this section sits between the dark map and the light policy section, so each edge fades into what it actually meets */ linear-gradient(180deg, var(--cream) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 84%, var(--cream) 100%); } .wwd .shell{position:relative; z-index:1} /* Insurance on top of the scrim: the head sits directly on a photograph. */ .wwd__head{max-width:60ch; margin-bottom:clamp(2.5rem,5vh,3.6rem); text-shadow:0 2px 16px rgba(0,18,22,.55)} .wwd__eyebrow{display:flex; align-items:center; gap:.6rem; color:#7BE8CC; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-variation-settings:"wght" 700; margin:0 0 1.3rem} .wwd__eyebrow svg{width:15px; height:15px} .wwd h2{ font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:clamp(2rem,3.9vw,3.1rem); line-height:1.14; letter-spacing:-.005em; margin:0; max-width:20ch; } .wwd__lede{margin:1.5rem 0 0; color:rgba(255,255,255,.78); max-width:58ch; font-size:1.02rem} .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem} .card{ /* A dark translucent panel, not a white tint: the photograph behind is now visible, so the cards have to hold their own contrast. */ background:rgba(4,26,30,.50); border:1px solid rgba(255,255,255,.20); border-radius:14px; padding:1.6rem 1.5rem 1.4rem; backdrop-filter:blur(10px); display:flex; flex-direction:column; transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); } .card:hover{background:rgba(4,26,30,.62); border-color:rgba(255,255,255,.34); transform:translateY(-4px)} .card__icon{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; margin-bottom:1.5rem; background:linear-gradient(150deg,var(--green),var(--blue)); box-shadow:0 6px 18px rgba(0,0,0,.35); } .card__icon svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8} .card h3{font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.2rem; margin:0 0 .7rem; letter-spacing:0} .card p{margin:0 0 1.4rem; font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.72)} .card__more{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; color:var(--flame); font-size:.82rem; font-variation-settings:"wght" 600; } .card__more svg{width:13px; height:13px; transition:transform .3s var(--ease)} .card:hover .card__more svg{transform:translateX(4px)} /* the buttons under the cards; this rule went with the tile wall */ .sec__foot{margin-top:clamp(2.5rem,5vh,3.5rem)} /* ---- Sustainable tourism policy ------------------------------------------- Per a supplied reference, sitting under What we do. Shares the cream and serif of the two sections below it, so the page reads as one light zone rather than alternating stripes. */ /* ---- Welcome -------------------------------------------------------------- A message from the Department beside an optional portrait. Same cream field and serif voice as Sustainable tourism; the rule under the title is the one piece of flame on a light section. */ .welcome{background:var(--cream); color:#231f20; padding:clamp(4.5rem,10vh,8rem) 0} /* The message carries the section, so its column is the wider of the two and the text runs the full width of it — a capped measure here just reads as a gap between the words and the portrait. */ .welcome__grid{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:center} .welcome--solo .welcome__grid{grid-template-columns:minmax(0,72ch)} .welcome__title{ font-variation-settings:"wdth" 86,"wght" 800; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.05; letter-spacing:-.015em; color:#231f20; margin:0 0 1.6rem; text-transform:uppercase; } .welcome__title::after{content:""; display:block; width:64px; height:3px; background:var(--flame); margin-top:1.1rem} .welcome__body{color:#5b5f5d; font-size:1rem; line-height:1.75} /* On its own, with no portrait beside it, the measure still needs a limit. */ .welcome--solo .welcome__body{max-width:72ch} .welcome__body > *:first-child{margin-top:0} .welcome__body > *:last-child{margin-bottom:0} .welcome__body p{margin:0 0 1.1rem} .welcome__body h3, .welcome__body h4{ font-family:"Playfair Display",Georgia,serif; font-weight:600; color:#231f20; font-size:1.15rem; margin:1.8rem 0 .7rem; } .welcome__body ul, .welcome__body ol{margin:0 0 1.1rem; padding-left:1.15rem} .welcome__body li{margin-bottom:.5rem} .welcome__body li::marker{color:var(--green-ink)} .welcome__body a{color:var(--green-ink); text-decoration:underline; text-underline-offset:3px} .welcome__body b, .welcome__body strong{color:#231f20; font-variation-settings:"wght" 600} .welcome__figure{margin:0} .welcome__figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:16px; box-shadow:0 3px 8px rgba(35,31,32,.10), 0 26px 50px rgba(35,31,32,.16); } .welcome__caption{text-align:center; margin-top:1.3rem} .welcome__caption b{ display:block; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.1rem; color:#231f20; } .welcome__caption span{ display:block; margin-top:.35rem; color:var(--green-ink); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-variation-settings:"wght" 700; } @media (max-width:880px){ .welcome__grid{grid-template-columns:1fr; gap:2.5rem} .welcome__figure{max-width:340px; margin-inline:auto} } /* ---- Facebook, documents & news ------------------------------------------- Three columns on the same cream field as the Welcome section. A column with nothing in it is omitted in PHP and the grid adapts, so the row never gaps. */ .feeds{background:var(--cream); color:#231f20; padding:clamp(4.5rem,10vh,8rem) 0} .feeds__head{max-width:60ch; margin-bottom:clamp(2.2rem,4.5vh,3.2rem)} .feeds__head h2{ font-family:"Playfair Display",Georgia,serif; font-weight:500; color:#231f20; font-size:clamp(1.75rem,3.1vw,2.45rem); line-height:1.2; margin:0; } .feeds__lede{margin:1.1rem 0 0; color:#5b5f5d; font-size:.98rem; line-height:1.7} .feeds__grid{display:grid; gap:clamp(1.6rem,3vw,2.6rem); align-items:start} .feeds__grid--3{grid-template-columns:repeat(3,1fr)} .feeds__grid--2{grid-template-columns:repeat(2,1fr)} .feeds__grid--1{grid-template-columns:minmax(0,560px)} .feeds__col{min-width:0} .feeds__title{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green-ink); font-variation-settings:"wght" 700; margin:0; } /* The rule under the heading now carries the "view all" link too, so it moves from the heading itself to the row the two share. */ .feeds__colhead{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0 0 1.2rem; padding-bottom:.9rem; border-bottom:1px solid rgba(35,31,32,.16); } /* The Facebook page plugin renders at a fixed pixel width and refuses to go past 500, so the frame is capped to match. Any wider and the plugin would leave bare white down the right hand side. */ .feeds__fb{ background:var(--paper); border:1px solid rgba(35,31,32,.12); border-radius:12px; overflow:hidden; height:var(--fb-h,560px); max-width:500px; } .feeds__fb iframe{width:100%; height:100%; border:0; display:block} /* documents & reports */ .docs{list-style:none; margin:0; padding:0; display:grid; gap:.7rem} .docs__link{ display:flex; gap:.9rem; align-items:flex-start; background:var(--paper); border:1px solid rgba(35,31,32,.12); border-radius:10px; padding:.9rem 1rem; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .docs__link:hover{border-color:var(--green-ink); transform:translateY(-2px); box-shadow:0 10px 24px rgba(35,31,32,.10)} .docs__link--plain{cursor:default} .docs__link--plain:hover{border-color:rgba(35,31,32,.12); transform:none; box-shadow:none} .docs__icon{flex:0 0 auto; color:var(--green-ink); display:grid; place-items:center; padding-top:.1rem} .docs__icon svg{width:20px; height:20px} .docs__body{min-width:0} .docs__body b{display:block; font-size:.94rem; color:#231f20; font-variation-settings:"wght" 600; line-height:1.4} .docs__body small{display:block; margin-top:.25rem; font-size:.76rem; color:#8b8785; letter-spacing:.04em} /* latest news, as a compact list rather than cards */ .feed{list-style:none; margin:0; padding:0; display:grid; gap:.2rem} .feed__item a{ display:block; padding:.9rem 0; border-bottom:1px solid rgba(35,31,32,.14); transition:padding-left .3s var(--ease); } .feed__item:first-child a{padding-top:0} .feed__item a:hover{padding-left:.4rem} /* The article's intro image sits to the left of the title; without one the text simply runs the full width of the column. */ .feed__item--media a{display:flex; gap:.9rem; align-items:flex-start} .feed__media{flex:0 0 84px} .feed__media img{ width:84px; height:84px; object-fit:cover; border-radius:8px; display:block; background:rgba(35,31,32,.06); } .feed__text{display:block; min-width:0} .feed__item time{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8b8785} .feed__item b{ display:block; margin-top:.35rem; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.02rem; line-height:1.32; color:#231f20; } .feed__item a:hover b{color:var(--green-ink)} .feed__excerpt{display:block; margin-top:.3rem; font-size:.86rem; line-height:1.55; color:#5b5f5d} .feeds__all{ display:inline-flex; align-items:center; gap:.4rem; flex:none; white-space:nowrap; color:var(--green-ink); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-variation-settings:"wght" 700; opacity:.75; transition:opacity .25s var(--ease); } .feeds__all:hover, .feeds__all:focus-visible{opacity:1} .feeds__all svg{width:12px; height:12px; transition:transform .3s var(--ease)} .feeds__all:hover svg{transform:translateX(4px)} @media (max-width:980px){ .feeds__grid--3, .feeds__grid--2{grid-template-columns:1fr} .feeds__grid--1{grid-template-columns:1fr} } @media (max-width:420px){ /* Rather than squeeze both onto one line, let the link drop below. */ .feeds__colhead{flex-wrap:wrap; gap:.35rem} } .vstp{background:var(--cream); color:#231f20; padding:clamp(4.5rem,10vh,8rem) 0 clamp(3rem,6vh,4.5rem)} .vstp__grid{display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center} .vstp__figure{position:relative; padding-bottom:2.5rem} .vstp__figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; box-shadow:0 3px 8px rgba(35,31,32,.10), 0 26px 50px rgba(35,31,32,.16); } .vstp__badge{ position:absolute; right:-1.5rem; bottom:0; width:min(215px, 62%); background:var(--green-ink); color:#fff; border-radius:14px; padding:1.35rem 1.4rem; box-shadow:0 16px 36px rgba(35,31,32,.34); } .vstp__badge svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:1.7; margin-bottom:1.5rem} .vstp__badge p{margin:0; font-family:"Playfair Display",Georgia,serif; font-size:1.08rem; line-height:1.32} .vstp__eyebrow{display:flex; align-items:center; gap:.6rem; color:var(--green-ink); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-variation-settings:"wght" 700; margin:0 0 1.2rem} .vstp__eyebrow svg{width:15px; height:15px} .vstp h2{font-family:"Playfair Display",Georgia,serif; font-weight:500; color:#231f20; font-size:clamp(1.75rem,3.1vw,2.45rem); line-height:1.2; margin:0} .vstp__body{margin:1.4rem 0 2rem; color:#5b5f5d; font-size:.98rem; line-height:1.7; max-width:60ch} .vstp__pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem} .vstp__pillar{background:#E9F3F0; border:1px solid #CFE5DF; border-radius:9px; padding:1rem 1.05rem} .vstp__pillar b{display:block; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1rem; color:#231f20; margin-bottom:.45rem} .vstp__pillar span{font-size:.82rem; line-height:1.5; color:#5b5f5d} /* ---- Latest news ---------------------------------------------------------- Per a supplied reference: cream field, serif heads, white cards. This is the page's first light section — the same green/serif language as What we do, inverted. */ .news{background:var(--cream); color:#231f20; padding:clamp(4.5rem,10vh,8rem) 0 clamp(3.5rem,7vh,5rem)} .news__head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.2rem,4.5vh,3.2rem)} .news__eyebrow{display:flex; align-items:center; gap:.6rem; color:var(--green-ink); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-variation-settings:"wght" 700; margin:0 0 1.2rem} .news__eyebrow svg{width:15px; height:15px} .news h2{ font-family:"Playfair Display",Georgia,serif; font-weight:500; color:#231f20; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.16; margin:0; max-width:19ch; } .news__all{display:inline-flex; align-items:center; gap:.5rem; color:#231f20; font-size:.88rem; font-variation-settings:"wght" 600; white-space:nowrap; padding-bottom:.4rem} .news__all svg{width:14px; height:14px; transition:transform .3s var(--ease)} .news__all:hover{color:var(--green-ink)} .news__all:hover svg{transform:translateX(4px)} .news__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem} .post{ background:#fff; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(35,31,32,.06), 0 12px 28px rgba(35,31,32,.07); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .post:hover{transform:translateY(-5px); box-shadow:0 2px 4px rgba(35,31,32,.08), 0 20px 44px rgba(35,31,32,.14)} .post__media{position:relative; aspect-ratio:16/9; overflow:hidden; background:#E3D6C6} .post__media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)} .post:hover .post__media img{transform:scale(1.05)} .post__tag{ position:absolute; top:.85rem; left:.85rem; background:rgba(35,31,32,.92); color:#fff; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-variation-settings:"wght" 700; padding:.42rem .7rem; border-radius:5px; backdrop-filter:blur(4px); } .post__body{padding:1.5rem 1.5rem 1.4rem; display:flex; flex-direction:column; flex:1} .post__date{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#8b8785; margin:0 0 .7rem} .post h3{font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.15rem; line-height:1.32; margin:0 0 .7rem; color:#231f20} .post p{margin:0 0 1.4rem; font-size:.92rem; line-height:1.6; color:#5b5f5d} .post__more{margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; color:var(--green-ink); font-size:.84rem; font-variation-settings:"wght" 600} .post__more svg{width:13px; height:13px; transition:transform .3s var(--ease)} .post:hover .post__more svg{transform:translateX(4px)} /* ---- Useful links --------------------------------------------------------- Per a supplied reference. It shares the cream and the serif of Latest news and sits directly beneath it, so the two read as one light zone rather than another stripe. The reference's arrows are blue and its heading navy; both are pulled to the green already established, to avoid opening a fourth hue. */ .links{background:var(--cream); color:#231f20; padding:0 0 clamp(4.5rem,10vh,7.5rem)} .links__head{max-width:62ch; margin-bottom:clamp(2rem,4vh,2.8rem)} .links__eyebrow{display:flex; align-items:center; gap:.6rem; color:var(--green-ink); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-variation-settings:"wght" 700; margin:0 0 1.2rem} .links__eyebrow svg{width:15px; height:15px} .links h2{font-family:"Playfair Display",Georgia,serif; font-weight:500; color:#231f20; font-size:clamp(1.8rem,3.3vw,2.6rem); line-height:1.16; margin:0} .links__lede{margin:1.2rem 0 0; color:#5b5f5d; max-width:56ch; font-size:1rem} .links__lede a{color:var(--green-ink); font-variation-settings:"wght" 600; text-decoration:underline; text-underline-offset:3px} .links__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem} .link-card{ background:#fff; border:1px solid rgba(35,31,32,.10); border-radius:10px; padding:1.15rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; box-shadow:0 1px 2px rgba(35,31,32,.05); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .link-card b{font-variation-settings:"wght" 600; font-size:.98rem; letter-spacing:-.005em} .link-card svg{width:17px; height:17px; flex:none; color:var(--blue); transition:transform .3s var(--ease)} .link-card:hover{transform:translateY(-3px); border-color:rgba(202,130,65,.55); box-shadow:0 2px 4px rgba(35,31,32,.06), 0 14px 30px rgba(35,31,32,.10)} .link-card:hover svg{transform:translateX(5px)} /* ============ FOOTER ============ */ /* The deep field rather than the page's ink. Work with us sits directly above, so the brand rule is what keeps the two bands from muddying into each other. All footer text clears AA on this: white 11.9:1, ash 4.6:1. */ .foot{position:relative; background:var(--deep); padding:clamp(3.5rem,7vh,5.5rem) 0 2rem} /* The brand rule. Four of the five official colours, equal segments, drawn at the foot of the page and again under the header once it goes solid. It is the only place the palette appears all at once. */ .foot::before, .head.stuck::after, .head.solid::after{ content:""; position:absolute; inset:auto 0 0 0; height:4px; z-index:1; background:linear-gradient(90deg, var(--flame) 0 25%, var(--green) 25% 50%, var(--ochre) 50% 75%, var(--blue) 75% 100%); } .head.stuck::after, .head.solid::after{inset:auto 0 -1px 0; height:3px} .foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem} .foot h4{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); margin:0 0 1.1rem; font-variation-settings:"wght" 700} .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem} .foot ul a{font-size:.92rem; color:rgba(255,255,255,.82)} .foot ul a:hover{color:var(--blue-lt)} .foot address{font-style:normal; font-size:.92rem; color:rgba(255,255,255,.82); line-height:1.75} .foot__note{font-size:.84rem; color:var(--ash); margin:1.4rem 0 0; max-width:40ch} .foot__bar{ margin-top:clamp(2.5rem,5vh,4rem); padding-top:1.6rem; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--ash); } .foot__legal{display:flex; flex-wrap:wrap; gap:1.4rem} .foot__legal a:hover{color:var(--blue-lt)} .social{display:flex; gap:.7rem; align-items:center} .social a{ width:34px;height:34px;border:1px solid var(--hair); border-radius:50%; display:grid; place-items:center; transition:background .3s, border-color .3s, color .3s; } .social a:hover{background:var(--flame); border-color:var(--flame); color:var(--ink)} .social svg{width:15px;height:15px} /* ---- reveal on scroll ---- */ .rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)} .rv.in{opacity:1; transform:none} /* ============ RESPONSIVE ============ */ @media (max-width:1080px){ .cards{grid-template-columns:repeat(2,1fr)} .news__head{flex-direction:column; align-items:flex-start; gap:1rem} .links__grid{grid-template-columns:repeat(2,1fr)} .vstp__grid{grid-template-columns:1fr} .vstp__badge{right:0} .foot__grid{grid-template-columns:1fr 1fr} .hero__grid{grid-template-columns:1fr; gap:2.4rem} .mandate{grid-template-columns:1fr} .map{grid-template-columns:1fr} .map__stage svg{max-height:56vh} } @media (max-width:820px){ :root{--shell:calc(100% - 2.2rem)} .cards{grid-template-columns:1fr} .news__grid{grid-template-columns:1fr} .links__grid{grid-template-columns:1fr} .vstp__pillars{grid-template-columns:1fr} .vstp__badge{position:static; width:100%; margin-top:1rem} .vstp__figure{padding-bottom:0} .foot__grid{grid-template-columns:1fr} .hero__ui{flex-direction:column; align-items:flex-start; gap:1rem} .hero__tabs{gap:.4rem 1rem} .tab{font-size:.6rem} .tab i{display:none} .slide__in{padding-bottom:clamp(8.5rem,18vh,11rem)} /* a 1.19:1 graphic can't cover a tall phone without losing the logo, so it is shown whole against a matched terracotta field */ .slide--art .slide__media img{object-fit:contain; object-position:center 20%} .slide--art .slide__media::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 58%, rgba(0,0,0,.97) 78%); } } @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition-duration:.01ms !important} html{scroll-behavior:auto} .rv{opacity:1; transform:none} } /* ============================================================ JOOMLA INTEGRATION Everything above this line is the approved design, unchanged. Everything below wires it to Joomla's own markup: page heads, article bodies, module chromes, menus, forms and messages. Content colour is driven by four custom properties so a page can be flipped from the black canvas to the cream one by adding "vdot-cream" or "vdot-sand" to its menu item Page Class. ============================================================ */ .page{ --tx:rgba(255,255,255,.88); --tx-strong:#ffffff; --tx-muted:var(--ash); --rule:var(--hair); --acc:var(--flame); --panel:rgba(255,255,255,.05); } .vdot-cream .page, .vdot-sand .page{ --tx:#5b5f5d; --tx-strong:#231f20; --tx-muted:#8b8785; --rule:rgba(35,31,32,.16); --acc:var(--green-ink); --panel:#ffffff; } .vdot-cream .sec--content{background:var(--cream); color:#231f20} .vdot-sand .sec--content{background:var(--sand); color:#231f20} .vdot-cream .sec--content :focus-visible, .vdot-sand .sec--content :focus-visible{outline-color:#231f20} /* ---------- skip link ---------- */ .skip{ position:absolute; left:1rem; top:-100px; z-index:200; background:var(--flame); color:var(--ink); padding:.7rem 1.2rem; border-radius:6px; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-variation-settings:"wght" 700; transition:top .25s var(--ease); } .skip:focus{top:1rem} /* ---------- interior pages sit under a solid bar ---------- */ .no-hero .head{background:rgba(26,59,68,.94); backdrop-filter:blur(14px); border-bottom-color:var(--hair)} .head-spacer{height:var(--head-h)} /* ---------- page head (menu-item driven) ---------- */ .pagehead{ position:relative; isolation:isolate; background:var(--ink-2); /* The head-h term clears the fixed header; only the clamps are breathing room. */ padding:calc(var(--head-h) + clamp(2.25rem,5vh,3.75rem)) 0 clamp(1.75rem,4vh,3rem); } .pagehead__media{position:absolute; inset:0; z-index:-1; overflow:hidden} .pagehead__media img{width:100%; height:100%; object-fit:cover} .pagehead__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.86) 100%), linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 70%); } .pagehead--media{min-height:min(58vh, 520px); display:flex; align-items:flex-end} .pagehead__title{max-width:22ch} .pagehead__lede{margin:1.4rem 0 0; max-width:60ch} /* ---------- page grid ---------- */ .sec--content{padding:clamp(3.5rem,8vh,6rem) 0} /* Nothing in the main column: collapse the band so the page head sits straight on top of the first design block. Set from index.php. */ .sec--content--empty{padding:0} .sec--content--empty .page__main > *{display:none} .page__grid--aside{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2rem,4vw,3.5rem); align-items:start} .page__grid--sidebar-left{grid-template-columns:320px minmax(0,1fr)} .page__grid--sidebar-left .page__main{order:2} .page__grid--sidebar-left .page__aside{order:1} @media (max-width:980px){ .page__grid--aside, .page__grid--sidebar-left{grid-template-columns:1fr} .page__grid--sidebar-left .page__main{order:1} .page__grid--sidebar-left .page__aside{order:2} } /* ---------- article typography ---------- */ .page__main{color:var(--tx); min-width:0} .page__main h1, .page__main h2, .page__main h3, .page__main h4{color:var(--tx-strong)} .page__main h1{font-variation-settings:"wdth" 86,"wght" 800; font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.02; letter-spacing:-.015em; margin:0 0 1.4rem} .page__main h2{font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.2; margin:2.6rem 0 1rem} .page__main h3{font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.25rem; margin:2rem 0 .8rem} .page__main h4{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-muted); margin:2rem 0 .8rem} /* Article text runs the full width of its column rather than to a fixed measure: these pages are wide documents, not narrow articles. */ .page__main p{margin:0 0 1.2rem} .page__main > *:first-child{margin-top:0} .page__main a:not(.btn):not(.card__more):not(.post__more):not(.link-card):not(.page-link):not(.provlink){ color:var(--acc); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .page__main a:not(.btn):not(.page-link):not(.provlink):hover{text-decoration-thickness:2px} .page__main ul, .page__main ol{margin:0 0 1.4rem; padding-left:1.3rem} .page__main li{margin-bottom:.5rem} .page__main ul.pillars, .page__main ul.links__grid, .page__main ul.cards{padding-left:0} /* ---- reports library ------------------------------------------------------ Driven entirely by what is in the media folder. The newest document gets a panel of its own; the rest are grouped by year and can be searched. */ .reports{background:var(--cream); color:#231f20; padding:clamp(3rem,7vh,5rem) 0 clamp(4rem,9vh,7rem)} .reports__head{max-width:60ch; margin-bottom:clamp(1.8rem,4vh,2.6rem)} .reports__head h2{ font-family:"Playfair Display",Georgia,serif; font-weight:500; color:#231f20; font-size:clamp(1.75rem,3.1vw,2.45rem); line-height:1.2; margin:0; } .reports__lede{margin:1rem 0 0; color:#5b5f5d; font-size:.98rem; line-height:1.7} .reports__empty{ background:var(--paper); border:1px dashed rgba(35,31,32,.22); border-radius:12px; padding:1.6rem; color:#5b5f5d; font-size:.95rem; } /* the featured document */ .rfeat{ display:grid; grid-template-columns:1.35fr .65fr; align-items:stretch; background:var(--deep); color:#fff; border-radius:16px; overflow:hidden; margin-bottom:clamp(2rem,4vh,3rem); box-shadow:0 20px 44px rgba(26,59,68,.24); } .rfeat__body{padding:clamp(1.6rem,3vw,2.4rem)} .rfeat__flag{ display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-variation-settings:"wght" 700; color:rgba(255,255,255,.72); } .rfeat__flag span{width:8px; height:8px; border-radius:50%; background:var(--flame)} .rfeat__title{ font-family:"Playfair Display",Georgia,serif; font-weight:600; color:#fff; font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.15; margin:0; } .rfeat__sub{margin:.6rem 0 0; color:rgba(255,255,255,.74); font-size:.9rem; line-height:1.5} .rfeat__facts{display:flex; flex-wrap:wrap; gap:2.2rem; margin:1.6rem 0 0} .rfeat__facts div{margin:0} .rfeat__facts dt{ font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); font-variation-settings:"wght" 700; } .rfeat__facts dd{margin:.35rem 0 0; font-variation-settings:"wdth" 86,"wght" 800; font-size:1.5rem} .rfeat__acts{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.7rem 0 0} .rfeat__stamp{ display:grid; place-content:center; text-align:center; border-left:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); padding:1.5rem; } .rfeat__stamp b{ display:block; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:clamp(3rem,6vw,4.6rem); line-height:1; color:rgba(255,255,255,.92); } .rfeat__stamp span{ display:block; margin-top:.5rem; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.55); } /* buttons used across the block */ .rbtn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.68rem 1.3rem; font-size:.82rem; font-variation-settings:"wght" 700; border:1.5px solid currentColor; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .rbtn svg{width:16px; height:16px} .rbtn--solid{background:var(--flame); border-color:var(--flame); color:#fff} .rbtn--solid:hover{background:#e0372d; border-color:#e0372d} .rfeat .rbtn:not(.rbtn--solid){color:#fff} .rfeat .rbtn:not(.rbtn--solid):hover{background:#fff; color:var(--deep)} .rbtn--sm{padding:.5rem 1.05rem; font-size:.76rem} .rrow .rbtn:not(.rbtn--solid){color:var(--green-ink); border-color:rgba(35,31,32,.28)} .rrow .rbtn:not(.rbtn--solid):hover{border-color:var(--green-ink); background:rgba(0,101,79,.06)} /* search and year chips */ .rfilter{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-bottom:1.4rem} .rfilter__search{ flex:1 1 320px; display:flex; align-items:center; gap:.7rem; margin:0; background:var(--paper); border:1px solid rgba(35,31,32,.16); border-radius:999px; padding:.7rem 1.2rem; } .rfilter__search svg{width:17px; height:17px; color:#8b8785; flex:0 0 auto} .rfilter__search input{ flex:1 1 auto; border:0; background:none; font:inherit; font-size:.92rem; color:#231f20; outline:none; min-width:0; } .rfilter__years{display:flex; flex-wrap:wrap; gap:.5rem} .rchip{ border:1px solid rgba(35,31,32,.18); border-radius:999px; padding:.6rem 1.15rem; font-size:.82rem; font-variation-settings:"wght" 600; background:var(--paper); color:#231f20; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .rchip:hover{border-color:var(--green-ink)} .rchip.is-on{background:var(--green-ink); border-color:var(--green-ink); color:#fff} .rcount{margin:0 0 1.2rem; font-size:.84rem; color:#8b8785} /* the list */ .rlist{border-top:1px solid rgba(35,31,32,.16)} .rgroup{ display:flex; align-items:baseline; gap:.8rem; margin:2rem 0 .9rem; } .rgroup b{font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.9rem; color:#231f20; line-height:1} .rgroup span{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#8b8785} .rrow{ display:flex; align-items:center; gap:1.1rem; padding:1rem 1.1rem; margin-bottom:.7rem; background:var(--paper); border:1px solid rgba(35,31,32,.12); border-radius:12px; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .rrow:hover{border-color:var(--green-ink); transform:translateY(-2px); box-shadow:0 10px 24px rgba(35,31,32,.09)} .rrow__badge{ flex:0 0 auto; display:grid; place-content:center; width:56px; height:66px; border-radius:6px; background:var(--deep); color:#fff; border-left:4px solid var(--ochre); font-size:.82rem; font-variation-settings:"wght" 700; letter-spacing:.02em; } .rrow__body{flex:1 1 auto; min-width:0} .rrow__body h4{ margin:0 !important; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.08rem; line-height:1.3; color:#231f20; text-transform:none; letter-spacing:0; } .rrow__from{ margin:.3rem 0 0; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-ink); font-variation-settings:"wght" 700; } .rrow__meta{margin:.35rem 0 0; font-size:.82rem; color:#8b8785; line-height:1.5; word-break:break-word} .rrow__meta em{color:var(--flame); font-style:normal} .rrow__acts{display:flex; gap:.5rem; margin:0; flex:0 0 auto} .rlist__none{padding:2rem 0; color:#8b8785} @media (max-width:900px){ .rfeat{grid-template-columns:1fr} .rfeat__stamp{border-left:0; border-top:1px solid rgba(255,255,255,.12); padding:1.2rem} .rfeat__stamp b{font-size:2.8rem} .rrow{flex-wrap:wrap} .rrow__acts{width:100%; justify-content:flex-start} } /* the relevant acts page: the article card grid, on its own cream field */ .acts{background:var(--cream); color:#231f20; padding:0 0 clamp(4rem,9vh,7rem)} .acts .pdfs{margin:0 !important} /* ---- article tabs --------------------------------------------------------- Built by js/template.js from the h3s in an article on a page whose Page Class carries "vdot-tabs". Without the script the article is unchanged, so the content is never trapped behind the widget. */ .tabs{display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); margin:2rem 0 0} .tabs__list{display:flex; flex-direction:column; gap:.3rem; align-self:start; position:sticky; top:calc(var(--head-h) + 1rem)} /* .page__main button turns every button into an uppercase pill, so these have to out-rank it and put the ordinary properties back. */ .tabs .tabs__tab{ display:block; width:100%; text-align:left; padding:.85rem 1.1rem; border:1px solid transparent; border-radius:10px; color:var(--tx); font-size:.92rem; line-height:1.35; letter-spacing:0; text-transform:none; font-variation-settings:"wght" 500; background:none; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .tabs .tabs__tab:hover{background:var(--panel); color:var(--tx-strong); border-color:transparent} .tabs .tabs__tab.is-on{ background:var(--panel); border-color:var(--rule); color:var(--tx-strong); font-variation-settings:"wght" 700; box-shadow:inset 3px 0 0 var(--acc); } /* An h2 in the article labels the run of tabs that follows it. */ .tabs__grouphead{ margin:1.1rem 0 .35rem !important; padding:0 1.1rem; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-muted); font-variation-settings:"wght" 700; } .tabs__list > .tabs__grouphead:first-child{margin-top:0 !important} /* A section's opening picture, lifted above its heading. */ .tabs__banner{margin:0 0 1.2rem !important} .tabs__banner img{width:100%; height:auto; display:block; margin:0 !important; border-radius:10px} .tabs__panel > *:first-child{margin-top:0 !important} .tabs__panel h3{margin-top:0 !important} @media (max-width:820px){ /* Stack the list above the panel; a sticky rail has nowhere to go here. */ .tabs{grid-template-columns:1fr; gap:1.2rem} .tabs__list{position:static; flex-direction:row; flex-wrap:wrap; gap:.4rem} .tabs .tabs__tab{width:auto; padding:.6rem .95rem; font-size:.85rem} .tabs .tabs__tab.is-on{box-shadow:none; border-color:var(--acc)} } /* ---- contact page --------------------------------------------------------- Address, ways to reach the office and a map on one side; Joomla's enquiry form on the other, restyled to match the rest of the site. */ .ctc{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,3vw,2.6rem); align-items:start} .ctc__side{display:grid; gap:clamp(1.2rem,2.5vw,1.8rem)} .ctc__card{background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:clamp(1.3rem,2.5vw,1.9rem)} .ctc__h{ margin:0 0 1.1rem !important; font-family:"Playfair Display",Georgia,serif !important; font-weight:600 !important; font-size:1.2rem !important; color:var(--tx-strong) !important; letter-spacing:0 !important; text-transform:none !important; } .ctc__lede{margin:-.5rem 0 1.4rem; color:var(--tx-muted); font-size:.9rem; line-height:1.6} .ctc__addr{font-style:normal; display:grid; gap:.2rem; margin:0 0 1.4rem; line-height:1.6} .ctc__addr b{font-variation-settings:"wght" 700; color:var(--tx-strong)} .ctc__addr span{color:var(--tx)} .ctc__reach{margin:0; display:grid; gap:.8rem} .ctc__reach div{display:grid; gap:.15rem} .ctc__reach dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-muted); font-variation-settings:"wght" 700; } .ctc__reach dd{margin:0} .ctc__reach a{color:var(--acc); text-decoration:none} .ctc__reach a:hover{text-decoration:underline; text-underline-offset:3px} .ctc__misc{margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--rule); color:var(--tx-muted); font-size:.88rem} .ctc__misc p{margin:0 !important} .ctc__map{border-radius:10px; overflow:hidden; border:1px solid var(--rule); aspect-ratio:4/3; background:var(--panel)} .ctc__map iframe{width:100%; height:100%; border:0; display:block} .ctc__maplink{margin:.8rem 0 0 !important; font-size:.82rem} .ctc__maplink a{color:var(--acc)} /* Joomla's form markup, dressed to match */ .ctc .control-group{margin-bottom:1.1rem} .ctc .control-label label, .ctc label{ display:block; margin:0 0 .4rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-muted); font-variation-settings:"wght" 700; } .ctc input[type="text"], .ctc input[type="email"], .ctc input[type="tel"], .ctc textarea{ width:100%; background:var(--paper); color:#231f20; border:1px solid var(--rule); border-radius:9px; padding:.7rem .9rem; font:inherit; font-size:.92rem; transition:border-color .25s var(--ease); } .ctc textarea{min-height:170px; resize:vertical} .ctc input:focus, .ctc textarea:focus{outline:none; border-color:var(--acc)} .ctc fieldset{border:0; padding:0; margin:0} .ctc legend{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-muted); font-variation-settings:"wght" 700; margin-bottom:.8rem; } .ctc .form-control-feedback, .ctc .invalid-feedback{font-size:.8rem; color:var(--flame)} .ctc .btn, .ctc button[type="submit"]{ display:inline-flex; align-items:center; gap:.6rem; background:var(--acc); border:1.5px solid var(--acc); color:#fff; border-radius:999px; padding:.75rem 1.6rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-variation-settings:"wght" 700; cursor:pointer; transition:opacity .25s var(--ease); } .ctc .btn:hover, .ctc button[type="submit"]:hover{opacity:.88} @media (max-width:900px){ .ctc{grid-template-columns:1fr} .ctc__map{aspect-ratio:16/10} } /* ---- embedded document reader ------------------------------------------- Built by js/template.js from a link to a hosted document. The link stays underneath, so the document is reachable if the frame will not load. */ .docembed{margin:1.6rem 0 2rem} .docembed__frame{ width:100%; height:min(70vh,640px); display:block; border:1px solid var(--rule); border-radius:12px; background:var(--panel); } .docembed__link{margin:.7rem 0 0 !important; font-size:.82rem} /* An interactive map needs room to be usable; a document reader does not. */ .docembed--map .docembed__frame{height:min(80vh,760px); background:var(--cream)} @media (max-width:720px){ .docembed--map .docembed__frame{height:min(70vh,520px)} } /* ---- staged process flow -------------------------------------------------- A step by step process written as real text rather than a flat picture, so it can be searched, read aloud and followed on a phone. Each stage is a row: its name and time frame on the left, its numbered steps on the right. */ .flow{margin:2rem 0 0; border-top:1px solid var(--rule)} .flow__stage{ display:grid; grid-template-columns:minmax(150px,200px) minmax(0,1fr); gap:clamp(1rem,2.5vw,2.2rem); padding:1.6rem 0; border-bottom:1px solid var(--rule); } .flow__label{align-self:start} .flow__no{ margin:0 !important; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); font-variation-settings:"wght" 700; } .flow__name{ margin:.4rem 0 0 !important; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.05rem; line-height:1.25; color:var(--tx-strong); text-transform:none !important; letter-spacing:0 !important; } .flow__time{ display:inline-block; margin:.6rem 0 0 !important; padding:.22rem .6rem; border:1px solid var(--rule); border-radius:999px; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-muted); } .flow__steps{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem 1.9rem; } .flow__step{ margin:0 !important; display:flex; gap:.7rem; align-items:flex-start; padding:.8rem .9rem; border-radius:10px; background:var(--panel); border:1px solid var(--rule); } .flow__step b{ flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--acc); color:#fff; font-size:.72rem; font-variation-settings:"wght" 700; } .flow__step span{font-size:.86rem; line-height:1.45; color:var(--tx)} .flow__step small{display:block; margin-top:.3rem; font-size:.72rem; color:var(--tx-muted)} /* Where the process forks, the alternatives are marked rather than implied. */ .flow__step--branch{border-style:dashed} .flow__step--branch b{background:var(--tx-muted)} /* Arrows sit in the gap between steps. A step that starts a wrapped row is marked by script so its arrow is dropped — it would point at the margin. */ .flow__step{position:relative} .flow__step + .flow__step::before{ content:""; position:absolute; left:-1.35rem; top:50%; width:9px; height:9px; margin-top:-5px; border-top:2px solid var(--tx-muted); border-right:2px solid var(--tx-muted); transform:rotate(45deg); opacity:.75; } /* Two alternatives do not follow one another, so they get a fork, not an arrow. */ .flow__step--branch + .flow__step--branch::before{ content:"or"; width:auto; height:auto; margin-top:-.55em; left:-1.7rem; border:0; transform:none; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-muted); opacity:1; } .flow__step.is-rowstart::before{display:none} /* Between stages, the process moves down. */ .flow__stage{position:relative} .flow__stage + .flow__stage::before{ content:""; position:absolute; left:calc(min(200px,28%) / 2); top:-1px; width:9px; height:9px; margin-left:-5px; border-right:2px solid var(--acc); border-bottom:2px solid var(--acc); transform:translateY(-50%) rotate(45deg); background:var(--cream); } @media (max-width:720px){ .flow__step + .flow__step::before{ left:1.1rem; top:-.85rem; margin-top:0; transform:rotate(135deg); } .flow__step--branch + .flow__step--branch::before{left:1rem; top:-1rem; transform:none} .flow__stage + .flow__stage::before{left:1.1rem} } @media (max-width:720px){ .flow__stage{grid-template-columns:1fr; gap:.9rem} } /* ---- province link cards -------------------------------------------------- A province heading and the places listed under it, as one card each. */ .provcards{ list-style:none !important; margin:1.8rem 0 0 !important; padding:0 !important; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; } .provcard{ margin:0 !important; padding:1.2rem 1.3rem; border-radius:12px; background:var(--panel); border:1px solid var(--rule); transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .provcard:hover{border-color:var(--acc); transform:translateY(-2px); box-shadow:0 12px 26px rgba(35,31,32,.10)} .provcard__name{ margin:0 0 .9rem !important; padding-bottom:.7rem; border-bottom:1px solid var(--rule); font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.06rem; line-height:1.3; color:var(--tx-strong); } .provcard__name a{color:inherit; text-decoration:none !important} .provcard__name a:hover{color:var(--acc)} .provcard__list{list-style:none !important; margin:0 !important; padding:0 !important; display:grid; gap:.15rem} .provcard__list li{margin:0 !important} .provcard__list a{ display:flex; gap:.55rem; align-items:baseline; padding:.4rem 0; font-size:.88rem; line-height:1.4; color:var(--tx); text-decoration:none !important; } .provcard__list a::before{ content:""; flex:0 0 auto; width:5px; height:5px; margin-top:.42em; border-radius:50%; background:var(--acc); } .provcard__list a{ border-radius:7px; padding-left:.55rem; margin-left:-.55rem; transition:color .2s var(--ease), background .2s var(--ease), padding-left .2s var(--ease); } .provcard__list a::before{transition:transform .2s var(--ease), background .2s var(--ease)} .provcard__list a:hover, .provcard__list a:focus-visible{ color:var(--acc); background:rgba(0,101,79,.08); padding-left:.85rem; } .provcard__list a:hover::before{transform:scale(1.9)} .provcard__name a{transition:color .2s var(--ease)} .provcard__name a:hover{color:var(--acc); text-decoration:underline !important; text-underline-offset:4px} /* ---- document cards inside an article ------------------------------------ For a page that links a handful of PDFs by hand. The Reports page builds its own list from a folder; this is the same idea for prose pages. */ .pdfs{ list-style:none !important; margin:1.6rem 0 2.2rem !important; padding:0 !important; display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1rem; } .pdfcard{ margin:0 !important; display:flex; flex-direction:column; gap:.9rem; padding:1.2rem 1.3rem; border-radius:12px; background:var(--panel); border:1px solid var(--rule); transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .pdfcard:hover{border-color:var(--acc); transform:translateY(-2px); box-shadow:0 12px 26px rgba(35,31,32,.10)} .pdfcard__type{ display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start; padding:.28rem .6rem; border-radius:5px; background:var(--acc); color:#fff; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-variation-settings:"wght" 700; } .pdfcard__type svg{width:13px; height:13px} /* an archive is not a document; give it its own colour so the two read apart */ .pdfcard__type.pdfcard__type--zip{background:var(--ochre)} .pdfcard__title{ margin:0 !important; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.02rem; line-height:1.32; color:var(--tx-strong); } .pdfcard__file{ margin:0 !important; font-size:.72rem; color:var(--tx-muted); line-height:1.5; word-break:break-word; } .pdfcard__go{ margin:auto 0 0 !important; display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; border:1.5px solid var(--acc); color:var(--acc); border-radius:999px; padding:.5rem 1.05rem; font-size:.76rem; font-variation-settings:"wght" 700; text-decoration:none !important; transition:background .3s var(--ease), color .3s var(--ease); } .pdfcard__go:hover{background:var(--acc); color:#fff} .pdfcard__go svg{width:14px; height:14px} /* ---- language switcher ---------------------------------------------------- Flags in the top bar. The current language stays fully lit; the other sits back until pointed at, so it reads as an alternative rather than a pair. */ /* Sits in the header bar rather than in the nav, so it stays on screen when the nav collapses into the drawer. */ .nav__lang{display:flex; align-items:center; margin-left:-1.1rem} /* Once the menu is behind the burger the flags travel with it, at the right hand end of the bar rather than adrift in the middle of it. */ @media (max-width:1080px){ .nav__lang{margin-left:auto; margin-right:1.4rem} } @media (max-width:820px){ .mod-languages__list img{width:22px} } .mod-languages__list{ display:flex !important; align-items:center; gap:.55rem; list-style:none !important; margin:0 !important; padding:0 !important; } .mod-languages__list li{margin:0 !important} .mod-languages__list a{ display:block; padding:.2rem; border-radius:4px; line-height:0; border:1px solid transparent; transition:border-color .25s var(--ease), opacity .25s var(--ease); } .mod-languages__list img{ display:block; width:26px; height:auto; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.35); } /* the language not currently in use */ .mod-languages__list li:not(.lang-active) a{opacity:.5} .mod-languages__list li:not(.lang-active) a:hover, .mod-languages__list li:not(.lang-active) a:focus-visible{opacity:1; border-color:rgba(255,255,255,.45)} .mod-languages__list .lang-active a{opacity:1; border-color:var(--flame)} .visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ---- staff directory ------------------------------------------------------ Used inside an article body: a group per office or province, and within each a card per person — role, name, then how to reach them. Reads as a list on a phone and as a grid on a desktop, which a pasted three column table cannot. */ .staff{margin:2.2rem 0 0} .staff__group{margin-bottom:clamp(2rem,4vh,3rem)} .staff__title{ font-size:.72rem !important; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); font-variation-settings:"wght" 700; margin:0 0 1.1rem !important; padding-bottom:.8rem; border-bottom:1px solid var(--rule); font-family:inherit !important; } /* ---- organisation chart --------------------------------------------------- Centred parent nodes with drawn connectors, the way the chart it replaces was laid out. The column count is fixed per breakpoint so the horizontal bar can be inset to meet the outer cards' centres; below the last one the cards stack and the connectors are dropped rather than drawn wrong. */ .staff__tree{text-align:center} .staff__node{ display:inline-block; margin:0 !important; padding:.85rem 1.3rem; min-width:min(300px, 82%); border-radius:10px; border:1px solid var(--rule); border-top:3px solid var(--acc); background:var(--panel); font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.05rem; color:var(--tx-strong); } .staff__drop{width:2px; height:1.7rem; background:var(--rule); margin:0 auto !important} .staff__grid.staff__grid--tree{ /* the top margin is the room the stubs drop through */ position:relative; margin:1.7rem 0 0 !important; text-align:left; grid-template-columns:repeat(4,minmax(0,1fr)); } .staff__grid--tree::before{ /* the bar the children hang from */ content:""; position:absolute; top:-1.7rem; height:2px; background:var(--rule); left:12.5%; right:12.5%; } .staff__grid--tree > li{position:relative} .staff__grid--tree > li:nth-child(-n+4)::before{ /* a stub up from the top row */ content:""; position:absolute; left:50%; top:-1.7rem; width:2px; height:1.7rem; background:var(--rule); transform:translateX(-50%); } @media (max-width:1180px){ .staff__grid.staff__grid--tree{grid-template-columns:repeat(2,minmax(0,1fr))} .staff__grid--tree::before{left:25%; right:25%} .staff__grid--tree > li:nth-child(n+3)::before{display:none} /* rows below the bar */ } @media (max-width:760px){ .staff__grid.staff__grid--tree{grid-template-columns:minmax(0,1fr)} .staff__grid--tree::before, .staff__grid--tree > li::before{display:none} .staff__drop{height:1.1rem} } /* A node the cards below report to. Stacking two gives a second level; the left rule and the indent carry the hierarchy an org chart drew with lines. */ .staff__lead{ margin:0 0 .9rem !important; padding:.85rem 1.1rem; border-radius:10px; border:1px solid var(--rule); border-left:3px solid var(--acc); background:var(--panel); font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.05rem; color:var(--tx-strong); } .staff__lead small{ display:block; margin-bottom:.2rem; font-family:inherit; font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400; color:var(--tx-muted); } .staff__lead--sub{margin-left:1.6rem !important} .staff__grid.staff__grid--under{margin-left:3.2rem !important} @media (max-width:720px){ .staff__lead--sub{margin-left:.8rem !important} .staff__grid.staff__grid--under{margin-left:0 !important} } .staff__grid{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.9rem; } .staff__card{ margin:0 !important; padding:1rem 1.1rem; border-radius:10px; background:var(--panel); border:1px solid var(--rule); transition:border-color .3s var(--ease), transform .3s var(--ease); } .staff__card:hover{border-color:var(--acc); transform:translateY(-2px)} .staff__role{ margin:0 0 .35rem !important; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-muted); line-height:1.4; } .staff__name{ margin:0 0 .5rem !important; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.05rem; line-height:1.3; color:var(--tx-strong); } .staff__contact{margin:0 !important; font-size:.84rem; line-height:1.6; word-break:break-word} .staff__contact a{color:var(--acc)} .staff__missing{color:var(--tx-muted); font-style:italic} /* Content pasted in from another site often carries class names of its own — "hero", "card", "news" and the like. Inside an article body those mean nothing, but they collide with this template's layout classes: a blockquote marked class="hero" would otherwise inherit min-height:100svh and stretch to a full screen. Strip the layout back out; the semantic rules still apply. */ .page__main .hero, .page__main .slide, .page__main .card, .page__main .cards, .page__main .map, .page__main .news, .page__main .feeds, .page__main .welcome, .page__main .wwd, .page__main .vstp, .page__main .links, .page__main .plist, .page__main .foot, .page__main .nav, .page__main .sec{ position:static; min-height:0; max-height:none; height:auto; display:block; overflow:visible; isolation:auto; align-items:normal; justify-content:normal; grid-template-columns:none; background:none; } .page__main blockquote{ margin:2rem 0; padding:.2rem 0 .2rem 1.5rem; border-left:2px solid var(--acc); font-size:1.12rem; line-height:1.55; color:var(--tx-strong); } .page__main hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0} .page__main img{border-radius:10px; margin:1rem 0} .page__main figure{margin:2rem 0} .page__main figcaption{font-size:.84rem; color:var(--tx-muted); margin-top:.7rem} .page__main table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.94rem} .page__main th, .page__main td{text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--rule)} .page__main th{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-muted); font-variation-settings:"wght" 700; } .page__main code, .page__main pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em} .page__main pre{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:1.2rem; overflow:auto} /* article furniture Joomla emits */ .page__main .page-header h1, .page__main .page-header h2{margin-top:0} .page__main .article-info{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0 0 1.8rem; padding:0; list-style:none; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-muted); } .page__main .article-info dd{margin:0} .page__main .article-info-term{display:none} .page__main .icons, .page__main .btn-group{margin-bottom:1.5rem} .page__main .readmore{margin:1rem 0 2.5rem} /* ---------- news / blog list ---------- */ .blog-items.news__grid{margin-top:.5rem} /* ---- pagination ----------------------------------------------------------- Joomla puts the class on the