/* ============================================================ CCJ Redesign — Shared Theme Matched to ccj.org brand: navy/royal-blue, cool grounds, bright-blue accent. Used by all subpage templates. Premium, dignified, AA-contrast, mobile-first. ============================================================ */ :root{ /* CCJ Pantone palette refresh (2026-07-10, from "CCJ Colour Palette" doc) mapped onto the wireframe roles: ink=Black 3C #212721 (body text) · teal=3597C #21366E (headings/primary, was Reflex Blue #2C2C6C) teal-700/teal-deep=2767C #13294B (hover-darken + dark surfaces, was Royal 2370/#23235A) gold/gold-soft=7454C #5F8FB4 + lightened tint (accents/highlights, was Light Blue 292 #4D9ACB) blue/blue-700/focus=1795C #D22630 + darkened hover (buttons/links, was Cyan 2202 #01A3DD) — chosen over 7454C because it's the only non-navy swatch in the new palette that clears AA text contrast (5.17:1) against white button fills; user-approved trade-off, see chat 2026-07-10. Supporting/remaining accent swatches (7738C green, 359C light-green, 570C teal, 2007C orange, 121C yellow) are NOT yet wired to a token — available for a future role (status/success/warning badges) if one is wanted. Neutral backgrounds (ivory/stone/ice/muted) are intentionally UNCHANGED: they're custom cool-blue tints, not sourced from a named Pantone swatch in the new doc, and are used too pervasively to swap without a confident source color. Old palette preserved in assets/ccj-theme.pre-pantone-refresh-2026-07-10.css */ --ink:#212721; --teal:#21366E; --teal-deep:#13294B; --teal-700:#13294B; --gold:#5F8FB4; --gold-soft:#A7C1D6; --blue:#D22630; --blue-700:#A41E25; --focus:#D22630; --ivory:#F4F7FB; --stone:#E8EEF6; --stone-line:#D6DFEB; --white:#FFFFFF; --footer-bg:#2F328D; /* footer band (royal blue; decoupled from --teal-deep 2026-07-10) */ --ice:#F2F7FC; --ice-line:#DEE9F5; /* very-light-blue surface (box tints, zebra, icon chips) */ --muted:#4A5A6E; --muted-on-dark:#C5CFDA; --breadcrumb:#C5CFDA; /* masthead breadcrumb trail (own palette role; links inherit) */ --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --maxw:1240px; --radius:3px; --header-h:117px; /* fallback (matches unscrolled .nav height); ccj.js overwrites this live so 100vh sections can subtract the real, current header height */ /* ---- SPACING SYSTEM ---------------------------------------------- Scale (8px base): 3xs 4 · 2xs 8 · xs 12 · s 16 · m 24 · l 32 · xl 48 · 2xl 64 · 3xl 96 Fluid structural tokens (clamp): scale smoothly with viewport — no breakpoint jumps. Rule of thumb: layout spacing uses tokens; intra-component micro-gaps may stay literal. */ --sp-3xs:4px; --sp-2xs:8px; --sp-xs:12px; --sp-s:16px; --sp-m:24px; --sp-l:32px; --sp-xl:48px; --sp-2xl:64px; --sp-3xl:96px; --space-section:clamp(44px, 2.5vw + 34px, 70px); /* main sections: 70 desktop -> 44 small, fluid */ --space-hero:clamp(56px, 4vw + 39px, 96px); /* hero band */ --space-masthead:clamp(40px, 2vw + 32px, 60px); /* page mastheads */ --space-heading:clamp(28px, 1.5vw + 22px, 44px); /* gap under section heads */ --section-pad-y:var(--space-section); --gap-grid:var(--sp-m); /* card/tile grids */ --gap-docs:50px; /* document-card grids (user standard) */ --gap-grid-lg:var(--sp-xl); /* editorial two-column splits */ --pad-card:var(--sp-m); /* tile/card inner padding */ --flow-space:1em; /* .flow vertical rhythm */ --shadow:0 1px 2px rgba(10,42,48,.04),0 8px 28px rgba(10,42,48,.08); } *{box-sizing:border-box;margin:0;padding:0} /* Scoped reset — re-adds the wireframe reset ONLY inside .ccj-wire (exact HTML), placed BEFORE the components so they override it (fixes .wrap padding, grids, gaps). */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.8;font-size:1.0625rem;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;font-weight:600;letter-spacing:-.01em} a{color:inherit;text-decoration:none} svg{display:block} ul{list-style:none} img{max-width:100%;display:block} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px} .skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.75rem 1.25rem;font-weight:600;z-index:200} .skip:focus{left:.5rem;top:.5rem} .proto-banner{background:#FBF3D6;color:#5A4B1A;border-bottom:1px solid #ECDFB0;text-align:center;font-size:.8rem;padding:.5rem 1rem;font-weight:500} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)} .overline{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:.85rem} .band-teal .overline,.masthead .overline{color:var(--gold-soft)} .band-stone .overline{color:var(--teal)} .lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:62ch} .center{text-align:center}.mt0{margin-top:0} /* ---------- buttons / links ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--sans);font-weight:600;font-size:1rem;padding:.8rem 1.4rem;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;transition:.18s ease} .btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-700)} .btn-solid{background:var(--teal);color:#fff}.btn-solid:hover{background:var(--teal-700)} .btn-outline{background:transparent;color:var(--teal);border-color:var(--stone-line)}.btn-outline:hover{border-color:var(--teal);background:var(--white)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)} .link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--blue)} .arrow{transition:transform .18s ease}.link:hover .arrow,.btn:hover .arrow{transform:translateX(3px)} /* ---------- utility bar + header ---------- */ .utility{background:var(--teal-deep);color:var(--muted-on-dark);font-size:.82rem} .utility .wrap{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;height:42px} .utility a{display:inline-flex;align-items:center;gap:.4rem}.utility a:hover{color:#fff} .live{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold-soft);font-weight:600} .live .dot{width:8px;height:8px;border-radius:50%;background:#E5484D;animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}} header.site{position:sticky;top:0;z-index:100;background:#fff;transition:box-shadow .3s ease} /* ---------- SiteMapNav mega menu (UKSC-style bar + full-width white dropdown) ---------- */ .megabar-wrap{position:relative;background:#323392;z-index:90} /* Logo Royal */ .megabar-list{display:flex;justify-content:space-between;gap:.5rem;list-style:none} /* padding/max-width come from the enclosing .wrap */ .mega-item{list-style:none;display:flex} .mega-top{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:1.5rem 1rem;color:#fff;font-family:var(--sans);font-weight:500;font-size:.95rem;white-space:nowrap;line-height:1;transition:padding .3s ease} header.site.scrolled .mega-top{padding-block:.85rem} /* condensed bar when scrolled */ .mega-item:hover .mega-top,.mega-item:focus-within .mega-top{background:rgba(255,255,255,.12)} .mega-caret{transition:transform .2s ease} .mega-item:hover .mega-caret,.mega-item:focus-within .mega-caret{transform:rotate(180deg)} .mega-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--stone-line);box-shadow:0 22px 44px rgba(10,20,60,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120} .mega-item:hover .mega-panel,.mega-item:focus-within .mega-panel{opacity:1;visibility:visible;transform:none} .mega-panel-inner{max-width:var(--maxw);margin-inline:auto;padding:2.25rem clamp(1.25rem,4vw,2.5rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem 2rem} .mega-col-head{display:block;font-family:var(--sans);font-weight:700;font-size:.97rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:.7rem} .mega-col-head:hover{color:#323392} .mega-col-link{display:block;color:var(--ink);font-size:.9rem;line-height:1.3} /* childless level-2 items: same voice as the column links */ .mega-col ul{list-style:none;display:flex;flex-direction:column;gap:.45rem} .mega-col ul a{color:var(--ink);font-size:.9rem;line-height:1.3} .mega-col ul a:hover,.mega-col-link:hover{color:#323392;text-decoration:underline!important;text-underline-offset:3px} @media(max-width:980px){.megabar-wrap{display:none}} header.site.scrolled{box-shadow:0 4px 24px rgba(10,20,60,.10)} .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:50px 30px;transition:padding .3s ease} header.site.scrolled .nav{padding-block:9px} .brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0} .seal{width:56px;height:56px;flex-shrink:0;display:block;object-fit:contain;transition:width .3s ease,height .3s ease} header.site.scrolled .seal{width:36px;height:36px} .brand-txt strong{display:block;font-family:var(--sans);font-weight:700;font-size:1.15rem;color:var(--teal);line-height:1.1;transition:font-size .3s ease} .hb-br{display:none} /* wordmark splits "Caribbean / Court of Justice" on phones only */ header.site.scrolled .brand-txt strong{font-size:.92rem} .brand-txt span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px;transition:font-size .3s ease,margin-top .3s ease,opacity .3s ease} header.site.scrolled .brand-txt span{font-size:0;margin-top:0;opacity:0} .primary-nav ul{display:flex;gap:.25rem} .primary-nav a{display:block;padding:.55rem .8rem;font-weight:500;font-size:.95rem;border-radius:var(--radius);color:var(--ink)} .primary-nav a:hover{color:var(--teal);background:var(--stone)} .primary-nav a[aria-current="page"]{color:var(--teal);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)} .nav-cta{display:flex;align-items:center;gap:.6rem} .cta-links{display:flex;align-items:center;gap:1.15rem;margin-left:.6rem;margin-right:1.5rem} /* quick links after Search; space before the menu button */ .cta-links a{font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap} /* matches the Search label */ .cta-links a:hover{color:var(--blue)} .cta-sep{width:1px;height:16px;background:var(--stone-line)} @media(max-width:980px){.cta-links{display:none}} .mobile-only{display:none} /* ---- Header on phones: the row must never exceed the viewport. The letter-spaced tagline + non-shrinking brand were forcing a 512px document on 390px phones (pushing search/menu off-canvas and adding page-wide horizontal scroll), so: tagline hidden, brand allowed to shrink/wrap, paddings compacted. ---- */ @media(max-width:640px){ .nav{gap:.9rem;padding-block:18px 14px} .brand{flex-shrink:1;min-width:0;gap:.7rem} .seal{width:44px;height:44px} .brand-txt{min-width:0} .brand-txt strong{font-size:1.02rem;white-space:normal} .brand-txt span{display:none} .hb-br{display:inline} header.site.scrolled .nav{padding-block:8px} } /* Safety net: nothing may widen the page sideways (clip, not hidden — doesn't create a scroll container, keeps position:sticky working). */ html{overflow-x:clip} .nav-overlay{position:fixed;inset:0;background:rgba(8,46,53,.55);opacity:0;visibility:hidden;transition:opacity .25s;z-index:140} .nav-overlay.show{opacity:1;visibility:visible} body.nav-open{overflow:hidden} /* ---------- masthead ---------- */ /* page-title masthead: CCJ robe photo (royal + gold sash) concentrated right, navy sweep from the left keeps the breadcrumb/title fully readable */ .masthead{position:relative;overflow:hidden;color:#fff;background:#052A5E} /* robe photo lives on a blurred underlay (background-images can't blur directly); the -18px inset keeps the blur's transparent edge fringe outside the clip */ .masthead::before{content:"";position:absolute;inset:-26px;filter:blur(11px);background: linear-gradient(90deg,#052A5E 0%,rgba(5,42,94,.97) 34%,rgba(5,42,94,.78) 52%,rgba(5,42,94,.38) 74%,rgba(5,42,94,.18) 100%), url("img/masthead-robe.jpg") right center/cover no-repeat #052A5E} .masthead .wrap{padding-block:var(--space-masthead);position:relative;z-index:1} .breadcrumb{font-size:.85rem;color:var(--breadcrumb);margin-bottom:1.25rem} .breadcrumb a:hover{color:#fff}.breadcrumb span{margin-inline:.5rem;opacity:.5} /* masthead tone variants — per page via `ccj_masthead` post meta (light|white) */ body.mast-light .masthead,body.mast-white .masthead{color:var(--ink)} body.mast-light .masthead::before,body.mast-white .masthead::before{content:none} /* no robe photo */ body.mast-white .masthead{background:#fff} body.mast-light .masthead{background:linear-gradient(135deg,#F5F6FB 0%,#EBECF6 55%,#E6E7F2 100%)} /* lightest Logo-Royal tints */ body.mast-light .masthead+.band,body.mast-white .masthead+.band{border-top:0} /* no hairline under light/white title bands */ body.mast-light .masthead h1,body.mast-white .masthead h1{color:var(--teal);text-shadow:none} body.mast-light .masthead .breadcrumb,body.mast-white .masthead .breadcrumb{color:var(--muted)} body.mast-light .masthead .breadcrumb a:hover,body.mast-white .masthead .breadcrumb a:hover{color:#323392} body.mast-light .masthead p.intro,body.mast-white .masthead p.intro{color:var(--muted)} .masthead h1{font-size:clamp(2.3rem,4.8vw,3.5rem);line-height:1.1;letter-spacing:-.015em;max-width:22ch} /* no text-shadow: the navy sweep behind the title already guarantees contrast; the glow read as smudge */ .masthead h1::after{content:"";display:block;width:58px;height:3px;background:#E0A526;margin-top:1.15rem;border-radius:2px} /* Amber 2007C on the navy-robe (and light) mastheads */ body.mast-white .masthead h1::after{background:#01A3DD} /* Logo Cyan only on the white variant */ .masthead p.intro{color:#E2ECF6;margin-top:.9rem;max-width:60ch;font-size:1.08rem} .masthead .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.75rem} /* ---------- sections / scaffold ---------- */ section.block{padding-block:var(--section-pad-y)} .band{background:var(--white);border-block:1px solid var(--stone-line)} .band-stone{background:var(--stone)} .band-teal{background:var(--teal-deep);color:#fff} .band-teal h2,.band-teal h3{color:#fff}.band-teal .lede{color:var(--muted-on-dark)} .sec-head{max-width:64ch;margin-bottom:var(--space-heading)} .sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--teal)} .sec-head .lede{margin-top:.9rem} /* ---------- editorial + anchor nav (jurisdiction / about) ---------- */ .editorial{display:grid;grid-template-columns:230px 1fr;gap:var(--gap-grid-lg);align-items:start} .anchornav{position:sticky;top:76px} .anchornav h2{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--sans);margin-bottom:.9rem} .anchornav a{display:block;padding:.5rem .75rem;font-size:.94rem;color:var(--muted);border-left:2px solid var(--stone-line);border-radius:0 var(--radius) var(--radius) 0} .anchornav a:hover,.anchornav a.active{color:var(--teal);border-left-color:var(--gold);background:var(--stone);font-weight:600} /* "In this section" rail: sibling-page nav in a right column on interior pages (menu-driven, see ccj_section_nav()). Sticky offset tracks the live header height that ccj.js maintains in --header-h. */ .page-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2.2rem,4.5vw,4.75rem);align-items:start} /* rail nav in a light shaded box hugging its content; the box itself sticks on scroll */ .secnav{position:sticky;top:calc(var(--header-h) + 28px);background:var(--ivory);border-radius:5px;padding:1.9rem clamp(1.4rem,1.8vw,1.9rem);font-family:var(--sans)} .secnav .sn-head{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#323392;padding-bottom:.75rem;border-bottom:2px solid #323392;margin-bottom:.75rem;line-height:1.4} .secnav a.sn-head:hover{color:#01A3DD;border-bottom-color:#01A3DD} .secnav ul{list-style:none;margin:0;padding:0} .secnav .sn-list>li{border-bottom:1px solid var(--stone-line)} .secnav .sn-list a{display:block;padding:.62rem .5rem .62rem .75rem;font-size:.92rem;line-height:1.4;color:var(--ink);border-left:3px solid transparent;transition:background .15s ease,color .15s ease} .secnav .sn-list a:hover{background:#fff;color:#323392} .secnav .sn-list>li.cur>a,.secnav .sn-head.cur{color:#323392} .secnav .sn-list>li.cur>a{border-left-color:#323392;background:#E6E7F2;font-weight:600} .secnav .sn-group{display:block;padding:.8rem .5rem .15rem 0;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .secnav .sn-sub{margin:.1rem 0 .55rem} .secnav .sn-sub a{padding:.38rem .5rem .38rem 1.7rem;font-size:.86rem;color:var(--muted)} .secnav .sn-sub li.cur>a{border-left-color:#323392;background:#E6E7F2;font-weight:600;color:#323392} @media (max-width:980px){ .page-cols{display:block} .secnav{position:static;margin-top:3.2rem;padding:1.7rem 1.4rem;max-width:440px} } /* interior pages: body copy in the brand serif (Times New Roman -> Source Serif 4 on web). Headings/buttons keep their own font rules; homepage (.home) stays sans. */ body:not(.home) .prose{font-family:var(--serif)} body:not(.home) .prose .btn,body:not(.home) .prose .chip{font-family:var(--sans)} .prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--teal);margin:2.25rem 0 .85rem;scroll-margin-top:76px} .prose h2:first-child{margin-top:0} .prose h3{font-size:1.2rem;color:var(--ink);margin:1.5rem 0 .5rem} .prose p{margin-bottom:1.1rem;max-width:65ch} .prose p:has(>img:only-child),.prose p:has(>a:only-child>img){max-width:none} /* lone images (posters, notices) get the full column */ .prose ul.bullets{margin:0 0 1.1rem 1.1rem;max-width:65ch} /* editorial auto-lede: the opening paragraph of a generic interior page reads as an intro */ .prose-content>p:first-child{font-size:1.26rem;line-height:1.65;color:var(--muted);max-width:56ch;padding-bottom:1.7rem;border-bottom:1px solid var(--stone-line);margin-bottom:1.9rem} /* quoted material (treaty text, judgments) — serif italic behind a whisper-of-royal rule */ .prose blockquote{margin:2.1rem 0;padding:.35rem 0 .35rem 1.7rem;border-left:3px solid rgba(50,51,146,.4)} .prose blockquote p{font-style:italic;font-size:1.13rem} .prose blockquote p:last-child{margin-bottom:0} .prose blockquote cite{display:block;margin-top:.7rem;font-style:normal;font-family:var(--sans);font-size:.85rem;color:var(--muted)} /* figures: plain image + quiet caption; .fig-right floats beside the prose */ .prose figure{margin:2.1rem 0} .prose figure img{max-width:100%;height:auto} .prose figure figcaption{margin-top:.75rem;font-family:var(--sans);font-size:.84rem;color:var(--muted);text-align:center} .prose figure.fig-right{float:right;width:min(46%,330px);margin:.4rem 0 1.6rem 2.4rem} @media(max-width:700px){.prose figure.fig-right{float:none;width:100%;margin:1.8rem 0}} /* legacy Divi accordions (FAQs) render as native details/summary — light cards, first one open */ .prose details.acc{background:var(--ivory);border-radius:5px;padding:0 1.35rem;margin-bottom:.85rem;max-width:70ch} .prose details.acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:1rem;padding:1.05rem .15rem;font-family:var(--sans);font-weight:600;font-size:.99rem;line-height:1.45;color:var(--ink);transition:color .15s ease} .prose details.acc>summary::-webkit-details-marker{display:none} /* click focus-ring suppression lives in ccj.js (summary blur-on-click) — Chrome paints the :focus-visible ring even for mouse clicks on , so CSS alone can't split pointer from keyboard; the global summary:focus-visible rule still covers keyboard */ .prose details.acc>summary::after{content:"+";margin-left:auto;flex:none;font-size:1.5rem;font-weight:300;line-height:1;color:#323392;transition:transform .25s ease} .prose details.acc[open]>summary::after{transform:rotate(45deg)} .prose details.acc>summary:hover{color:#323392} .prose .acc-body{padding:.15rem .15rem 1.3rem} .prose .acc-body>p:last-child{margin-bottom:0} /* opened FAQ flips dark: Court-Navy card, white question, soft-white answer */ .prose details.acc[open]{background:#13294B} .prose details.acc[open]>summary,.prose details.acc[open]>summary:hover{color:#fff} .prose details.acc[open]>summary::after{color:#fff} .prose details.acc[open] .acc-body p{color:var(--muted-on-dark)} .prose details.acc[open] .acc-body a{color:#8FD8F8} /* quiet end-of-article mark */ .prose-content::after{content:"\00B7\2002\00B7\2002\00B7";display:block;margin-top:3.2rem;text-align:center;font-family:var(--serif);font-size:1.25rem;letter-spacing:.18em;color:var(--muted);opacity:.55} /* ---------- "Who we are" remodel (page 1330 content sections) ---------- Band colors sampled from the retired Mission/Vision/Core-Values graphics: mission = sky-cyan watercolor, vision = orchid watercolor, values = sand. */ .page-template-page-fullwidth .band{overflow-x:clip} /* content that OPENS with a full-bleed band sits flush under the page title */ .band:has(>.wrap>.prose-content>.ww-band:first-child),.band:has(>.wrap.prose-content>.ww-band:first-child){padding-top:0} .ww-bleed{width:100vw;margin-left:calc(50% - 50vw)} .ww-band{font-family:var(--sans)} .ww-kicker{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#323392;margin-bottom:.6rem} /* 40% title column + 60% body, packed close */ .ww-cols{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem);align-items:center;padding-block:clamp(3rem,7vw,5.5rem)} /* mission: the retired graphic sits faded on the right, swept into the band blue from the left */ .ww-mission{background: linear-gradient(90deg,#CFEAF8 0%,#CFEAF8 40%,rgba(207,234,248,.86) 58%,rgba(207,234,248,.55) 76%,rgba(207,234,248,.38) 100%), url("img/ww-mission-bg.jpg") right center/cover no-repeat, linear-gradient(135deg,#E9F6FD 0%,#C2E7F8 55%,#A5DCF5 100%)} /* vision: mirrored — artwork faded on the left, swept into the band pink from the right */ .ww-vision{margin-top:1.375rem;background: linear-gradient(270deg,#F0DAEB 0%,#F0DAEB 40%,rgba(240,218,235,.86) 58%,rgba(240,218,235,.55) 76%,rgba(240,218,235,.38) 100%), url("img/ww-vision-bg.jpg") left center/cover no-repeat, linear-gradient(135deg,#F7EBF3 0%,#EACFE3 55%,#DDBCDB 100%)} .prose .ww-band h2{font-size:clamp(2.3rem,4.6vw,3.6rem);color:#323392;margin:0;line-height:1.05} .ww-body p{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.55;color:#13294B;margin:0;max-width:none} .ww-vision .ww-body p{font-size:clamp(1.45rem,2.4vw,1.95rem)} @media(min-width:901px){ .ww-rev{grid-template-columns:minmax(0,1fr) minmax(0,40%)} .ww-rev .ww-title{order:2;justify-self:end;text-align:right} } /* values: watercolor from the JUSTICE graphic as a whisper backdrop, fading out down the page */ .ww-values{margin-top:1.375rem;background: linear-gradient(180deg,rgba(252,247,234,.5) 0%,rgba(250,243,226,.85) 42%,#F6ECD4 70%,#F4E8CB 100%), url("img/ww-values-bg.jpg") center top/cover no-repeat, linear-gradient(160deg,#FCF7EA 0%,#F4E8CB 100%);padding-block:clamp(3rem,6vw,5rem)} .prose .ww-values h2,.prose .ww-history h2{font-size:clamp(2rem,3.6vw,2.8rem);margin:.15rem 0 .35rem} .ww-note{color:var(--muted);margin:0 0 2.3rem;font-size:1.02rem} .ww-vlist{display:grid;gap:1.05rem} .ww-v{display:grid;grid-template-columns:64px 1fr;gap:1.3rem;align-items:start;background:rgba(255,255,255,.72);border-radius:5px;padding:1.2rem 1.5rem} .ww-v>p:empty{display:none} /* wpautop injects a stray

that would hijack the 1fr column */ .ww-v>div{min-width:0} .ww-ltr{font-family:var(--serif);font-weight:700;font-size:2.7rem;line-height:1;color:#323392;text-align:center} .ww-v h3{font-family:var(--sans);font-weight:700;font-size:1.06rem;color:#13294B;margin:0 0 .35rem} .ww-v p{font-size:.97rem;line-height:1.65;color:#3A4757;margin:0;max-width:none} .ww-history{background:linear-gradient(150deg,#0E2140 0%,#13294B 60%,#1B3A66 100%);color:#fff;padding-block:clamp(3rem,6vw,5rem) clamp(3.2rem,6vw,5.2rem)} .ww-history .ww-kicker{color:#8FD8F8} .prose .ww-history h2{color:#fff} .ww-history .ww-note{color:var(--muted-on-dark);margin:0} .ww-hist-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.4rem} .ww-tl-nav{display:flex;gap:.7rem;flex:none} .ww-tl-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .18s ease,color .18s ease,border-color .18s ease} .ww-tl-btn:hover{background:#fff;border-color:#fff;color:#13294B} .ww-tl-btn svg{width:19px;height:19px} .ww-tl{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(270px,26vw,330px);gap:2.2rem;margin:0;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:.6rem max(1.25rem,calc(50vw - 620px + 2.5rem)) 1.5rem;scroll-padding-left:max(1.25rem,calc(50vw - 620px + 2.5rem))} /* snap respects the wrap-aligned inset, else load snaps card 1 to the raw edge */ .ww-tl li{scroll-snap-align:start;position:relative;border-top:2px solid rgba(255,255,255,.22);padding-top:1.5rem} .ww-tl li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:#E0A526} .ww-yr{display:block;font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1;color:#E0A526;margin-bottom:.65rem} .ww-tl h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;line-height:1.4;color:#fff;margin:0 0 .5rem} .ww-tl p{font-family:var(--sans);font-size:.9rem;line-height:1.65;color:var(--muted-on-dark);margin:0;max-width:none} .ww-tl::-webkit-scrollbar{height:8px} .ww-tl::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:4px} .ww-tl::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px} .ww-jur{max-width:75%;margin-top:3.5rem} .ww-jur p{max-width:none} @media(max-width:900px){ .ww-cols{grid-template-columns:1fr;gap:1.3rem;padding-block:2.6rem} .ww-v{grid-template-columns:48px 1fr;padding:1.05rem 1.15rem} .ww-ltr{font-size:2.1rem} .ww-jur{max-width:none} } /* ---------- Careers page: three color-block columns (page 15772) ---------- */ .cr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem} .cr-card{--bg:#323392;height:100%;display:flex;flex-direction:column;gap:.85rem;background:var(--bg);color:#fff;border-radius:5px;padding:2.4rem 2.2rem 2.1rem;min-height:330px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,filter .22s ease} .cr-cell:nth-child(2) .cr-card{--bg:#0186BD} .cr-cell:nth-child(3) .cr-card{--bg:#13294B} .cr-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -14px rgba(19,41,75,.5);filter:brightness(1.08)} .cr-kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)} .cr-title{display:block;font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:#fff;font-size:1.6rem;line-height:1.15} .cr-desc{display:block;font-family:var(--sans);font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.85);flex:1} .cr-link{font-family:var(--sans);display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:#fff} .cr-link svg{width:16px;height:16px;transition:transform .2s ease} .cr-card:hover .cr-link svg{transform:translateX(4px)} @media(max-width:900px){.cr-grid{grid-template-columns:1fr}.cr-card{min-height:0}} .prose ul.bullets li{list-style:disc;margin-bottom:.45rem;padding-left:.25rem} .callout{background:var(--stone);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;padding:1.25rem 1.5rem;margin:0 0 1.5rem} .callout strong{color:var(--teal)} /* ---------- steps (process) ---------- */ .steps{counter-reset:step;display:grid;gap:1rem;margin:1.25rem 0} .step{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-s);align-items:start;background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow)} .step::before{counter-increment:step;content:counter(step);width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--serif);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1.1rem} .step h3{font-size:1.1rem;color:var(--teal);margin-bottom:.25rem} .step p{color:var(--muted);font-size:.96rem;max-width:64ch} /* ---------- cards / tiles ---------- */ .cardgrid{display:grid;gap:var(--gap-grid)} .cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)} .tile{background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column;gap:.5rem} .tile:hover{transform:translateY(-3px);border-color:var(--teal)} .tile .ico{width:36px;height:36px;color:var(--blue);margin-bottom:.3rem} .tile h3{font-size:1.18rem;color:var(--teal)} .tile p{font-size:.94rem;color:var(--muted);flex:1} .tile .link{margin-top:.3rem;font-size:.95rem} /* ---------- badges ---------- */ .badge{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:.28rem .6rem;border-radius:2px;display:inline-block} .b-orig{background:#E6F3FE;color:#0A5FA6;border:1px solid #BFE0FB} .b-appel{background:#EAF0F8;color:#0A326E;border:1px solid #CDDCEE} .kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue)} /* ---------- member-state chips ---------- */ .states{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem} .state{display:inline-flex;align-items:center;gap:.5rem;background:var(--white);border:1px solid var(--stone-line);border-radius:999px;padding:.5rem 1rem;font-size:.92rem;font-weight:500} .state .pip{width:9px;height:9px;border-radius:50%;background:var(--gold)} .state.appel .pip{background:var(--teal)} .band-teal .state{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff} /* ---------- FAQ / accordion ---------- */ .faq{border-top:1px solid var(--stone-line);max-width:80ch} .faq details{border-bottom:1px solid var(--stone-line)} .faq summary{list-style:none;cursor:pointer;padding:1.1rem .25rem;font-weight:600;color:var(--teal);display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:1.05rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.4rem;color:var(--blue);font-weight:400;transition:.2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq .ans{padding:0 .25rem 1.2rem;color:var(--muted);max-width:72ch} /* ---------- document library (publications) ---------- */ .doclib{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)} .doc-card{background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column} .doc-card:hover{transform:translateY(-3px);border-color:var(--teal)} .doc-cover{aspect-ratio:8/5;background:linear-gradient(135deg,#063061,#0C71C3);display:flex;align-items:flex-end;padding:1.1rem;color:#fff;position:relative} .doc-cover .type{position:absolute;top:.9rem;left:.9rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:rgba(255,255,255,.16);padding:.25rem .55rem;border-radius:2px} .doc-cover .yr{font-family:var(--serif);font-size:1.6rem;font-weight:600} .doc-meta{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .doc-meta h3{font-size:1.08rem;color:var(--teal)} .doc-meta p{font-size:.9rem;color:var(--muted);flex:1} .doc-dl{display:flex;align-items:center;justify-content:space-between;font-size:.84rem;color:var(--muted);border-top:1px solid var(--stone-line);padding-top:.75rem} .doc-dl .link{font-size:.88rem} /* feature doc (latest report) */ .feature-doc{display:grid;grid-template-columns:300px 1fr;gap:var(--sp-xl);align-items:center;background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--sp-l);box-shadow:var(--shadow)} .feature-doc .cover{aspect-ratio:8/10;border-radius:var(--radius);background:linear-gradient(150deg,#022B57,#0C71C3);display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem;color:#fff} .feature-doc .cover .yr{font-family:var(--serif);font-size:2.4rem;font-weight:600} /* ---------- news list (media) ---------- */ .newslist{display:flex;flex-direction:column;gap:1rem} .news-card{display:grid;grid-template-columns:130px 1fr;gap:var(--gap-grid);background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow);transition:.16s;align-items:center} .news-card:hover{transform:translateY(-2px);border-color:var(--teal)} .news-date{font-family:var(--serif);color:var(--blue);text-align:center;border-right:1px solid var(--stone-line);padding-right:1rem} .news-date b{display:block;font-size:1.8rem;color:var(--teal);line-height:1} .news-date span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .news-body h3{font-size:1.2rem;color:var(--teal);margin:.35rem 0} .news-body p{font-size:.95rem;color:var(--muted);max-width:70ch} /* ---------- sittings ---------- */ .sit-row{display:grid;grid-template-columns:90px 1fr auto;gap:1.5rem;align-items:center;background:var(--white);border:1px solid var(--stone-line);border-left:4px solid var(--blue);border-radius:var(--radius);padding:1.25rem 1.5rem;box-shadow:var(--shadow);margin-bottom:1rem} .sit-row.orig{border-left-color:var(--gold)} .sit-when{text-align:center;background:var(--stone);border-radius:var(--radius);padding:.6rem} .sit-when b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--teal);line-height:1} .sit-when span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .sit-info h3{font-size:1.15rem;color:var(--teal);margin-bottom:.2rem} .sit-info p{font-size:.92rem;color:var(--muted)} .table-wrap{overflow-x:auto;border:1px solid var(--stone-line);border-radius:var(--radius);background:#fff} table.cause{width:100%;border-collapse:collapse;min-width:560px} table.cause th,table.cause td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--stone-line);font-size:.94rem} table.cause th{background:var(--stone);font-family:var(--sans);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} table.cause tr:last-child td{border-bottom:none} /* tabs */ .tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--stone-line);margin-bottom:1.75rem} .tab{background:none;border:none;font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--muted);padding:.85rem 1.1rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px} .tab[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--gold)} .tabpanel[hidden]{display:none} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid-lg);align-items:start} .contact-card{background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);padding:var(--pad-card);box-shadow:var(--shadow);margin-bottom:1.25rem} .contact-card h3{font-size:1.15rem;color:var(--teal);margin-bottom:.75rem} .contact-card dl div{display:flex;gap:.6rem;padding:.4rem 0;font-size:.95rem} .contact-card dt{color:var(--muted);min-width:72px} .contact-card dd{color:var(--ink);font-weight:500} .map-embed{aspect-ratio:16/10;border-radius:var(--radius);background:linear-gradient(135deg,#0A326E,#0C71C3);display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:2rem;border:1px solid var(--stone-line)} .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem} .field label{font-weight:600;font-size:.92rem;color:var(--ink)} .field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;padding:.75rem .85rem;border:1px solid var(--stone-line);border-radius:var(--radius);color:var(--ink);background:#fff} .field textarea{min-height:120px;resize:vertical} /* facts strip */ .facts4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)} .facts4 .f b{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--gold-soft);line-height:1} .facts4 .f span{display:block;color:var(--muted-on-dark);font-size:.92rem;margin-top:.4rem} /* judges grid */ .judges{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)} .judge{text-align:center} .judge .av{aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,#0A326E,#0C71C3);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:1.8rem;margin-bottom:.85rem;box-shadow:var(--shadow)} .judge h3{font-size:1.05rem;color:var(--teal)} .judge p{font-size:.85rem;color:var(--muted)} /* related feed */ .relfeed{display:flex;flex-direction:column;gap:.75rem} .rel{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.25rem;background:var(--white);border:1px solid var(--stone-line);border-radius:var(--radius);transition:.15s} .rel:hover{border-color:var(--teal);transform:translateY(-2px)} .rel .t{font-family:var(--serif);color:var(--teal);font-size:1.05rem} .rel .c{font-size:.84rem;color:var(--muted)} /* ---------- footer ---------- */ footer.site{background:var(--footer-bg);color:var(--muted-on-dark);padding-block:var(--sp-2xl) var(--sp-l);margin-top:0;position:relative} /* the section above "casts a shadow" onto the footer: deep but soft top gradient */ footer.site::before{content:"";position:absolute;top:0;left:0;right:0;height:74px;background:linear-gradient(180deg,rgba(6,10,26,.30) 0%,rgba(6,10,26,.11) 46%,rgba(6,10,26,0) 100%);pointer-events:none} footer.site>.wrap{position:relative;z-index:1} .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--gap-grid-lg)} .foot-brand{text-align:center} .foot-brand .seal{width:160px;height:160px;margin:0 auto 1rem;object-fit:contain} .foot-brand p{max-width:32ch;margin-inline:auto;font-size:.92rem;font-weight:700;color:#fff} .fb-br{display:none} /* two-line name lockup is a phone-only treatment */ /* contact block lives in the Connect row: left-aligned two-column box, ≤40% of the section */ .foot-contact{max-width:60%;display:flex;gap:clamp(1.5rem,4vw,3rem);text-align:left} .foot-contact .fc-col{display:flex;flex-direction:column;gap:1.1rem;font-style:normal;font-size:.9rem;color:var(--muted-on-dark)} .foot-contact .fc-col+.fc-col{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(1.5rem,4vw,3rem)} .foot-contact .fc-col p{display:flex;flex-direction:column;gap:.1rem;margin:0;line-height:1.3} .foot-contact .fc-col span{display:block} .foot-contact a:hover{color:#fff} .fc-connect{display:flex;align-items:center;gap:.75rem} footer h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.1rem} footer li{margin-bottom:.6rem}footer li a{font-size:.92rem}footer li a:hover{color:#fff} .foot-connect{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.14)} .foot-connect h4{margin:0} .social-row{display:flex;gap:.6rem} .social-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--teal-deep);flex-shrink:0;transition:transform .15s ease,background .15s ease} .social-ico svg{width:18px;height:18px} .social-ico:hover{background:var(--gold-soft);transform:translateY(-2px)} .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem} .foot-bottom nav{display:flex;flex-wrap:wrap;gap:1.5rem;width:100%;justify-content:space-between} /* ---------- responsive ---------- */ @media(max-width:980px){ .editorial{grid-template-columns:1fr;gap:1.5rem} .anchornav{position:static;display:none} .cols-3,.cols-4,.doclib,.judges,.facts4{grid-template-columns:repeat(2,1fr)} .cols-2,.contact-grid,.feature-doc,.feature-doc .cover{grid-template-columns:1fr} .feature-doc .cover{max-width:260px} .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}.foot-brand{grid-column:1/-1} /* brand block goes compact + left-aligned when it spans the full row (the desktop treatment centered a 160px seal across the whole phone) */ .foot-brand{display:flex;align-items:center;gap:1rem;text-align:left;margin-bottom:.5rem} .foot-brand .seal{width:92px;height:92px;margin:0} .foot-brand p{margin:0;max-width:none;line-height:1.35} .fb-br{display:inline} /* name splits into a two-line lockup beside the seal */ .primary-nav{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,340px);background:var(--ivory);z-index:150;transform:translateX(100%);transition:transform .28s ease;padding:1rem 1.1rem 2rem;overflow-y:auto;box-shadow:-14px 0 40px rgba(8,46,53,.22)} .primary-nav.open{transform:translateX(0)} .primary-nav .mobile-only{display:flex} .primary-nav ul{flex-direction:column;gap:.1rem} .primary-nav a{padding:1rem .75rem;font-size:1.08rem;border-bottom:1px solid var(--stone-line);border-radius:0} .drawer-head{justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--stone-line)} .drawer-title{font-family:var(--serif);font-weight:600;color:var(--teal);font-size:1.15rem} .drawer-close{background:var(--stone);border:none;border-radius:4px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer} } @media(max-width:620px){ .cols-3,.cols-4,.doclib,.judges,.facts4{grid-template-columns:1fr} .news-card{grid-template-columns:1fr;gap:.6rem} .news-date{display:flex;gap:.5rem;align-items:baseline;border-right:none;border-bottom:1px solid var(--stone-line);padding:0 0 .5rem;text-align:left} .news-date b{font-size:1.2rem} .sit-row{grid-template-columns:1fr;gap:.75rem} .step{grid-template-columns:1fr}.step::before{margin-bottom:.25rem} .utility a:not(.live){display:none} .facts4 .f b{font-size:1.7rem} .foot-connect{flex-direction:column;align-items:flex-start;gap:.85rem} .foot-contact{max-width:100%;flex-wrap:wrap;flex-direction:column;gap:1.1rem} .foot-contact .fc-col+.fc-col{border-left:0;padding-left:0} /* divider only makes sense side-by-side */ /* ---- Phone footer: link groups collapse to accordion rows ---- ccj.js adds .foot-acc (and per-group toggle buttons) only when JS runs; without JS the footer just stays fully expanded. Collapsed groups take the footer from ~2 screens of links down to one. */ .foot-acc{display:block} .foot-acc>div:not(.foot-brand){border-top:1px solid rgba(255,255,255,.14)} .foot-acc>div:last-child{border-bottom:1px solid rgba(255,255,255,.14)} .foot-acc h4{margin:0} .foot-acc .fg-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 0;background:none;border:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left} .foot-acc .fg-btn::after{content:"+";font-size:1.35rem;font-weight:300;line-height:1;color:var(--gold-soft);transition:transform .25s ease} .foot-acc .open .fg-btn::after{transform:rotate(45deg)} .foot-acc>div:not(.foot-brand) ul{display:none;padding-bottom:.85rem} .foot-acc>div.open ul{display:block} .foot-acc ul li{margin:0} .foot-acc ul li a{display:block;padding:.45rem 0;font-size:.95rem} .foot-brand{margin-bottom:1.15rem} /* the accordion's own bottom hairline replaces .foot-connect's top border; without this the two lines double up around a dead 5rem gap */ .foot-connect{margin-top:1.4rem;padding-top:0;border-top:0} /* contact block: tighter rhythm, clearly tappable links */ .foot-contact .fc-col p{line-height:1.5;gap:.15rem} .foot-contact a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)} /* divider between the contact block (ends at "Website feedback") and Connect */ .fc-connect{width:100%;border-top:1px solid rgba(255,255,255,.14);margin-top:.8rem;padding-top:1.5rem} /* smaller legal line */ .foot-bottom{font-size:.74rem} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* CCJ fix: a .sec-head heading on a dark band must stay white (beats .sec-head h2 teal) */ .band-teal .sec-head h2,.band-teal .sec-head h3{color:#fff} .band-teal .sec-head .lede{color:var(--muted-on-dark)} /* ============================================================ CCJ header nav v2 — right-side hamburger drawer at ALL sizes (replaces the horizontal desktop nav that overflowed). ============================================================ */ .site a,.site a:hover,header.site a,footer.site a,#main a.btn,#main a.link,.ncard,.jrow,.tile{text-decoration:none} .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;background:var(--white);border:1px solid var(--ivory);border-radius:50%;cursor:pointer;padding:0;transition:border-color .2s ease,background .2s ease} /* border matches header bg (per Hilwyn, for now) */ .menu-btn:hover{border-color:var(--ivory);background:var(--stone)} .menu-icon{position:relative;width:18px;height:13px;flex-shrink:0} .menu-icon span{position:absolute;left:0;height:2px;border-radius:1px;background:var(--ink);transition:transform .25s ease,opacity .2s ease,width .25s ease,left .25s ease} .menu-icon span:nth-child(1){top:0;width:18px} .menu-icon span:nth-child(2){top:5.5px;width:11px;left:7px} .menu-icon span:nth-child(3){top:11px;width:18px} .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1){top:5.5px;left:0;width:18px;transform:rotate(45deg)} .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3){top:5.5px;left:0;width:18px;transform:rotate(-45deg)} /* Drawer glass: translucent-blur like the search overlay, but light/frosted */ .primary-nav{position:fixed;top:0;right:0;height:100dvh;width:min(88vw,360px);background:linear-gradient(172deg,#FFFFFF 0%,#FFFFFF 44%,#E6E7F2 74%,#E0F4FB 100%);z-index:150;transform:translateX(100%);transition:transform .28s ease;padding:1.1rem 1.2rem 2rem;overflow-y:auto;box-shadow:-14px 0 40px rgba(8,46,48,.22);display:block} /* white top for clean menu items, fading into the logo tints (royal #E6E7F2 → cyan #E0F4FB) */ .primary-nav.open{transform:translateX(0)} .primary-nav .mobile-only{display:flex} .primary-nav ul{flex-direction:column;gap:.1rem;display:block} .primary-nav li{display:block;width:100%} .primary-nav a{display:block;padding:.95rem .6rem;font-size:1.05rem;line-height:1.3;border-bottom:1px solid rgba(21,35,59,.12);border-radius:0;color:var(--ink);box-shadow:none;text-transform:none} .primary-nav a:hover{background:rgba(21,35,59,.06);color:var(--teal)} body.nav-open{overflow:hidden} /* Kill legacy plugin underline forcing (#et-main-area a / ubermenu). Design uses none. */ a{text-decoration:none!important} .single .prose a{text-decoration:underline!important;text-underline-offset:2px} /* article-content links only */ .prose-content a:not(.btn):not(.doc-card):not(.cr-card):not(.mc-link):not(.desc_trig){text-decoration:underline!important;text-underline-offset:2px} /* generic re-authored pages (page.php); card-links opt out */ /* Drawer header + in-drawer search — apply at all sizes (were mobile-only) */ .primary-nav .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid rgba(21,35,59,.14)} .primary-nav .drawer-title{font-family:var(--serif);font-weight:600;color:var(--teal);font-size:1.15rem} .primary-nav .drawer-close{background:rgba(255,255,255,.65);border:0;border-radius:4px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer} .primary-nav .drawer-close:hover{background:#fff} .primary-nav .drawer-close:focus,.primary-nav .drawer-close:focus-visible{outline:0!important;box-shadow:none} .primary-nav .mobile-search{display:flex;align-items:center;gap:.35rem;margin:0 0 1rem;background:#E0F4FB;border:0;border-radius:5px;padding:.3rem} /* lightest Logo-Cyan tint; borderless */ .primary-nav .mobile-search input{flex:1;min-width:0;padding:.6rem .75rem;border:0;background:transparent;outline:0;border-radius:var(--radius);font-family:var(--sans);font-size:.95rem;color:var(--ink)} .primary-nav .mobile-search button{background:var(--blue);border:none;border-radius:var(--radius);width:44px;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} /* Drawer utility links (Contact / Gift Shop / Careers) — the header's .cta-links are hidden <=980px, so the drawer carries them: a compact, muted secondary group under the menu. */ .primary-nav .drawer-utils{display:flex;flex-direction:column;margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid rgba(21,35,59,.14)} .primary-nav .drawer-utils a{padding:.6rem .75rem;font-size:.92rem;font-weight:500;color:var(--muted);border-bottom:0} .primary-nav .drawer-utils a:hover{color:var(--teal)} /* Header search button — global (was homepage-only in the prototype) */ .search-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;border:0;border-radius:var(--radius);padding:.6rem .9rem;font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer} /* matches .cta-links */ .search-btn:hover{color:var(--teal)} @media(max-width:980px){.search-btn .lbl{display:none}} /* Fullscreen search overlay — "zoom into focus" fade+scale, opened from .search-btn */ .search-overlay{position:fixed;inset:0;z-index:180;background:rgba(15,23,43,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s} .search-overlay.open{opacity:1;visibility:visible;transform:scale(1);transition:opacity .28s ease,transform .28s ease,visibility 0s} .search-overlay-form{width:min(92vw,680px);display:flex;align-items:center;gap:.75rem;background:var(--white);border-radius:8px;padding:1.1rem 1.4rem;box-shadow:0 24px 80px rgba(8,12,30,.4);color:var(--muted);transform:translateY(-14px) scale(.97);transition:transform .3s ease} .search-overlay.open .search-overlay-form{transform:translateY(0) scale(1)} .search-overlay-form input{flex:1;border:0;outline:0;-webkit-appearance:none;appearance:none;font-family:var(--serif);font-size:1.35rem;color:var(--ink);background:transparent;min-width:0} .search-overlay-form input:focus,.search-overlay-form input:focus-visible{outline:0 !important;border:0 !important;box-shadow:none !important} .search-overlay-form input::-webkit-search-decoration,.search-overlay-form input::-webkit-search-cancel-button{-webkit-appearance:none} .search-overlay-form input::placeholder{color:var(--muted);opacity:.75} .search-overlay-form button[type=submit]{background:var(--blue);border:none;border-radius:5px;width:42px;height:42px;flex-shrink:0;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease} .search-overlay-form button[type=submit]:hover{background:var(--blue-700)} .search-overlay-close{position:absolute;top:2rem;right:2rem;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease} .search-overlay-close:hover{background:rgba(255,255,255,.22)} body.search-open{overflow:hidden} @media(max-width:620px){.search-overlay{padding:1.25rem}.search-overlay-close{top:1.25rem;right:1.25rem}.search-overlay-form{padding:1rem .85rem;gap:.5rem}.search-overlay-form input::placeholder{font-size:calc(1.35rem - 2px)}} /* Gravity Forms — harmonize with the design system (.field look + primary button) */ .gform_wrapper label.gfield_label{font-weight:600;font-size:.92rem;color:var(--ink);font-family:var(--sans)} .gform_wrapper .gfield_required{color:var(--blue)} .gform_wrapper input[type=text],.gform_wrapper input[type=email],.gform_wrapper input[type=tel], .gform_wrapper select,.gform_wrapper textarea{ width:100%;font-family:var(--sans);font-size:1rem;padding:.75rem .85rem; border:1px solid var(--stone-line);border-radius:var(--radius);color:var(--ink);background:#fff} .gform_wrapper textarea{min-height:120px;resize:vertical} .gform_wrapper .gfield{margin-bottom:1rem} .gform_wrapper input[type=submit],.gform_wrapper .gform_button{ display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600; font-size:1rem;padding:.8rem 1.6rem;border-radius:var(--radius);border:1.5px solid transparent; background:var(--blue);color:#fff;cursor:pointer;transition:.18s ease} .gform_wrapper input[type=submit]:hover{background:var(--blue-700)} /* ============================================================ CCJ standard: main content sections = 70px vertical padding. Token --section-pad-y (in :root). Applies to all band sections; .masthead and .hero keep their own rhythm. Mobile reduces to 44px — change the token in the media query below to make it uniform. ============================================================ */ section.band,section.band-stone,section.band-teal{padding-block:var(--section-pad-y)} /* (mobile handled fluidly by --space-section) */ /* Vertical-rhythm utility: space between siblings, none at edges. Usage: add "flow" to any container; tune per-instance with style="--flow-space:var(--sp-l)". */ .flow>*+*{margin-top:var(--flow-space,1em)} /* ============================================================ Wide container for data-table pages (page-fulltable.php) ============================================================ */ .wrap-wide{max-width:min(96vw,1680px);margin-inline:auto;padding-inline:clamp(1rem,2vw,2rem)} .wrap-wide h2,.wrap-wide h3{color:var(--teal)} /* ============================================================ NINJA TABLES — modern skin (all judgment/paper databases) Zebra light-blue rows, hairline separators, roomy cells, navy header, horizontal scroll instead of ugly wrapping. ============================================================ */ #main .ninja_table_wrapper{overflow-x:auto;background:#fff;border:1px solid var(--stone-line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(21,35,59,.05),0 8px 24px rgba(21,35,59,.06);padding:var(--sp-s)} #main .ninja_table_wrapper table{border-collapse:separate;border-spacing:0;width:100%;min-width:820px;margin:0} #main .ninja_table_wrapper th, #main .ninja_table_wrapper thead td{background:var(--teal)!important;color:#fff!important;font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:var(--sp-s) var(--sp-m);border:0;text-align:left} #main .ninja_table_wrapper tbody td{padding:.95rem var(--sp-m);border-bottom:1px solid var(--stone-line);font-size:.95rem;color:var(--ink);vertical-align:top;background:#fff} #main .ninja_table_wrapper tbody tr:nth-child(even) td{background:#F2F7FC} /* light-blue zebra */ #main .ninja_table_wrapper tbody tr:hover td{background:#EAF3FB} #main .ninja_table_wrapper tbody tr:last-child td{border-bottom:0} #main .ninja_table_wrapper a{color:var(--blue);font-weight:600} #main .ninja_table_wrapper a:hover{color:var(--teal)} /* search box + controls above the table */ #main .ninja_table_wrapper input[type=search], #main .ninja_table_wrapper .ninja-forms-field, #main .ninja_table_wrapper select{font-family:var(--sans);padding:.55rem .8rem;border:1px solid var(--stone-line);border-radius:var(--radius)} /* footable pagination (if enabled per-table) */ #main .ninja_table_wrapper .pagination>li>a{border:1px solid var(--stone-line);color:var(--teal);padding:.4rem .8rem;border-radius:3px;margin:0 2px} #main .ninja_table_wrapper .pagination>li.active>a{background:var(--blue);border-color:var(--blue);color:#fff} /* ============================================================ CONTENT VIEWS grids — modern card skin (judges, reports, …) Soft shadow instead of hard borders, gentle hover lift. ============================================================ */ #main .pt-cv-view .pt-cv-content-item{background:#fff;border:0!important;border-radius:5px;box-shadow:0 1px 2px rgba(21,35,59,.06),0 10px 28px rgba(21,35,59,.08);padding:var(--sp-m);transition:transform .18s ease,box-shadow .18s ease} #main .pt-cv-view .pt-cv-content-item:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,35,59,.08),0 16px 40px rgba(21,35,59,.12)} #main .pt-cv-view .pt-cv-content-item img{border-radius:4px} #main .pt-cv-view .pt-cv-title,#main .pt-cv-view .pt-cv-title a{font-family:var(--serif);color:var(--teal);font-weight:600;text-decoration:none} #main .pt-cv-view .pt-cv-title a:hover{color:var(--blue)} #main .pt-cv-view .pt-cv-readmore{background:var(--blue);color:#fff;border-radius:var(--radius);padding:.45rem 1rem;text-decoration:none;font-weight:600} #main .pt-cv-view .pt-cv-readmore:hover{background:var(--teal)} #main .pt-cv-page{row-gap:var(--gap-grid)} /* Legacy Divi prose: neutralize inline justified text (rivers of whitespace) */ .prose [style*="text-align: justify"],.prose [style*="text-align:justify"]{text-align:left!important} /* Plain content lists (legacy pages) get bullets back; authored classes opt out */ .prose ul:not([class]){margin:0 0 1.1rem 1.1rem;max-width:70ch} .prose ul:not([class]) li{list-style:disc;margin-bottom:.45rem;padding-left:.25rem} .prose ol:not([class]){margin:0 0 1.1rem 1.35rem;max-width:70ch} .prose ol:not([class]) li{list-style:decimal;margin-bottom:.45rem;padding-left:.25rem} .prose .img-right{float:right;width:min(280px,42%);margin:.35rem 0 1.25rem 1.75rem;border-radius:var(--radius)} @media (max-width:640px){.prose .img-right{float:none;width:min(280px,100%);margin:0 auto 1.25rem}} /* ============================================================ BOX TINTS — uniform surface variants for any box/card/band. Combine with a component:

. tint-blue = very light blue · tint-navy = dark blue (light text) tint-royal = royal blue (light text) · tint-stone = warm neutral. ============================================================ */ .tint-blue{background:var(--ice);border:1px solid var(--ice-line)} .tint-stone{background:var(--stone);border:1px solid var(--stone-line)} .tint-navy{background:var(--teal-deep);border:1px solid var(--teal-deep)} .tint-royal{background:var(--teal-700);border:1px solid var(--teal-700)} .tint-navy,.tint-navy p,.tint-navy dd,.tint-royal,.tint-royal p,.tint-royal dd{color:#fff} .tint-navy h2,.tint-navy h3,.tint-navy h4,.tint-royal h2,.tint-royal h3,.tint-royal h4{color:#fff} .tint-navy .lede,.tint-navy dt,.tint-royal .lede,.tint-royal dt{color:var(--muted-on-dark)} .tint-navy a:not(.btn),.tint-royal a:not(.btn){color:var(--gold-soft);text-decoration:underline;text-decoration-color:rgba(143,199,234,.5)} .tint-navy a:not(.btn):hover,.tint-royal a:not(.btn):hover{color:#fff} /* ============================================================ DOCUMENT CARDS — templated design for document/PDF links. Sources: