/* Theme Name: Hideo Sasaki Foundation Theme URI: https://www.sasakifoundation.org/ Description: Blocksy child theme for the Hideo Sasaki Foundation website. Built by 465 Media. Author: 465 Media Author URI: https://465-media.com/ Template: blocksy Version: 1.0.2 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: hsf */ /* * Site-wide overrides go here. Prefer Blocksy Customizer settings and * GenerateBlocks global styles first; use this file only for what those * cannot express. */ /* ===== HSF design system ===== */ /* Align GB content width to Blocksy: 1290 max, 5vw edge spacing (band = min(1290px, 90vw)). Sections line up with the header/footer, and gutters scale on resize. */ :root{--gb-container-width:min(1290px, 90vw)} /* .hsf-container is a GB PRO GLOBAL STYLE (Styles panel), not defined here. */ .hsf-container--full{max-width:100%} /* What's New newsletter form — Gravity Forms styled to the design */ .wn-form .gform_wrapper,.wn-form form{margin:0} .wn-form .gform_heading,.wn-form .gform_description,.wn-form .gfield_required{display:none} .wn-form .gfield_label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wn-form .gform_fields{display:flex!important;flex-direction:column;gap:12px;grid-template-columns:1fr!important} .wn-form .gfield{margin:0!important} .wn-form .ginput_container input,.wn-form input.gform-control{width:100%;height:36px;border-radius:20px!important;border:1px solid #e2e2e2!important;background:#fff!important;padding:4px 18px!important;font-family:'Barlow',sans-serif;font-size:15px;color:#333;box-shadow:none!important} .wn-form input::placeholder{color:#aaa;text-transform:uppercase;font-weight:600;opacity:1} .wn-form .gform_footer{display:flex!important;justify-content:flex-end;padding:14px 0 0!important;margin:0!important} .wn-form .gform_footer input[type=submit],.wn-form .gform_footer button{background:#f9c8c8!important;color:#383838!important;border:none!important;border-radius:20px!important;padding:7px 24px!important;font-family:'Barlow',sans-serif;font-weight:600;text-transform:uppercase;font-size:15px;width:auto!important;cursor:pointer} .wn-form .gform_footer input[type=submit]:hover{background:#f4b3b3!important} .wn-form .gform_validation_errors{font-size:12px;margin:0 0 8px} .wn-form .validation_message{font-size:11px;color:#a41e28} /* About page section sub-nav (numbered; active item colored + bold per section) */ .about-subnav{list-style:none;counter-reset:sn;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-family:'Barlow',sans-serif;font-size:clamp(1.25rem, 2vw, 2rem);line-height:1.35;color:#3b3b3b} .about-subnav li{counter-increment:sn;display:flex;gap:14px} .about-subnav li::before{content:counter(sn) '.'} .about-subnav a{color:inherit;text-decoration:none} .about-subnav a:hover{opacity:.65} .about-subnav li.is-active{font-weight:700} /* GB figcaptions left-aligned (Blocksy centers figcaptions by default) */ .hsf-container figure.gb-element figcaption.gb-text{text-align:left} /* About – Timeline (vertical line + dots) */ .hsf-timeline{position:relative;display:flex;flex-direction:column;gap:2.1rem;padding-left:2.5rem;border-left:2px solid #d5d5d5} .hsf-timeline__item{position:relative} .hsf-timeline__item::before{content:'';position:absolute;left:calc(-2.5rem - 8px);top:1rem;width:15px;height:15px;border-radius:50%;background:#9a9a9a;box-shadow:0 0 0 4px #fff} .hsf-tl-photos{display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem} @media(max-width:781px){.hsf-tl-photos{display:none}.hsf-timeline{padding-left:1.75rem}.hsf-timeline__item::before{left:calc(-1.75rem - 8px)}} /* About – Publications carousels */ .hsf-pub-carousel{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0.5rem 0 1.25rem} .hsf-pub-carousel .gb-media{flex:0 0 auto;width:190px;height:auto;border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.14);scroll-snap-align:center} .hsf-pub-links{display:flex;flex-direction:column;gap:0.4rem;margin-top:2.5rem} .hsf-pub-links a:hover{opacity:.7} @media(max-width:781px){.hsf-pub-carousel .gb-media{width:150px}} /* ---------- Events List block (acf/events-list) ---------- */ .hsf-events{margin-block:clamp(2rem,4vw,3.5rem)} .hsf-events__heading{font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.1;color:#3b3b3b;margin:0 0 clamp(1.25rem,2.5vw,2rem)} .hsf-events__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(3,minmax(0,1fr))} .hsf-events--cols2 .hsf-events__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .hsf-events--cols4 .hsf-events__grid{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:900px){.hsf-events__grid,.hsf-events--cols2 .hsf-events__grid,.hsf-events--cols4 .hsf-events__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.hsf-events__grid,.hsf-events--cols2 .hsf-events__grid,.hsf-events--cols4 .hsf-events__grid{grid-template-columns:1fr}} .hsf-events__card{display:flex;flex-direction:column;min-width:0} .hsf-events__media{display:block;margin:0 0 .9rem;border-radius:5px;overflow:hidden} .hsf-events__media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} .hsf-events__date{font-family:'Barlow',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.8rem;color:#2f7471;margin:0 0 .35rem;display:flex;gap:.6rem;flex-wrap:wrap} .hsf-events__time{color:#8a8a8a;font-weight:400} .hsf-events__title{font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.18;margin:0 0 .4rem} .hsf-events__title a{color:#3b3b3b;text-decoration:none} .hsf-events__title a:hover,.hsf-events__title a:focus-visible{color:#2f7471;text-decoration:underline} .hsf-events__venue{font-family:'Barlow',sans-serif;font-weight:400;font-size:.9rem;line-height:1.35;color:#737373;margin:0 0 .5rem} .hsf-events__excerpt{font-family:'Barlow',sans-serif;font-weight:300;font-size:.95rem;line-height:1.45;color:#3b3b3b;margin:0} .hsf-events__cta{margin:.85rem 0 0} .hsf-events__cta a{display:inline-flex;align-items:center;font-family:'Barlow',sans-serif;font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;color:#2f7471;text-decoration:none;border:1px solid #2f7471;border-radius:999px;padding:.45rem 1.1rem;transition:background-color .15s ease,color .15s ease} .hsf-events__cta a:hover,.hsf-events__cta a:focus-visible{background:#2f7471;color:#fff} .hsf-events__flag{margin:.85rem 0 0;font-family:'Barlow',sans-serif;font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:#a41e27} .hsf-events__flag--postponed{color:#8a6b00} .hsf-events__flag--sold_out{color:#4c5255} .hsf-events__empty{font-family:'Barlow',sans-serif;font-weight:300;color:#8a8a8a;margin:0} /* ---------- Stories archive: program-area slot shows the first term only ---------- */ /* term_list wraps each term in its own ; hide all but the first. */ /* Remove this rule to let every program area show. */ .gb-text[class*="gb-text-g"] span ~ span{display:none} .gb-text[class*="gb-text-g"] span ~ span::before{content:none} /* ---------- Story single ---------- */ .hsf-story-aside img[src='']{display:none} .hsf-story-aside img:not([src]){display:none} .hsf-empty-hide:empty{display:none} .hsf-story-body > *:first-child{margin-top:0} .hsf-story-rail{display:none} /* awaiting share/print icon assets */ .hsf-post-nav{display:flex;justify-content:space-between;gap:1rem;font-family:'Barlow',sans-serif;font-weight:400;font-size:clamp(.95rem,1.25vw,18px);border-top:1px solid #e3e3e3;padding-top:clamp(1rem,2vw,1.5rem)} .hsf-post-nav a{color:#3b3b3b;text-decoration:none;display:inline-flex;align-items:center;gap:.6rem} .hsf-post-nav a:hover{color:#2f7471} .hsf-post-nav__side--next{margin-left:auto;text-align:right} /* single: program area shows first term only, matching the archive */ .gb-text-shterm span ~ span{display:none} /* single: with no secondary image, drop the aside and let the article run full width */ .hsf-story-aside:not(:has(img)){display:none} .gb-element-sbgrid:not(:has(.hsf-story-aside img)){grid-template-columns:1fr} /* ---------- Grant single ---------- */ .hsf-grant-link:not(:has(*)){display:none} .hsf-grant-link a[href='']{display:none} .hsf-grant-sponsor:not(:has(*)){display:none} .hsf-grant-related:not(:has(*)){display:none} .hsf-grant-body > *:first-child{margin-top:0} .hsf-grant-body > *:last-child{margin-bottom:0} /* ---------- Call for Proposals sections ---------- */ .hsf-cfp{margin-block:clamp(2rem,4vw,3.5rem)} .hsf-cfp__heading{font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.1;color:#3b3b3b;margin:0 0 clamp(1.25rem,2.5vw,2rem)} .hsf-cfp__timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .hsf-cfp__milestone{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:baseline;font-family:'Barlow',sans-serif;padding:clamp(.6rem,1.2vw,.9rem) 0;border-bottom:1px solid #e3e3e3} .hsf-cfp__ms-label{font-weight:400;font-size:clamp(1rem,1.3vw,1.15rem);color:#3b3b3b} .hsf-cfp__ms-date{font-weight:600;font-size:clamp(.95rem,1.2vw,1.1rem);color:#2f7471;text-align:right;white-space:nowrap} @media(max-width:560px){.hsf-cfp__milestone{grid-template-columns:1fr}.hsf-cfp__ms-date{text-align:left}} .hsf-cfp__jury{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem)} @media(max-width:900px){.hsf-cfp__jury{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:560px){.hsf-cfp__jury{grid-template-columns:repeat(2,minmax(0,1fr))}} .hsf-cfp__juror{display:flex;flex-direction:column;font-family:'Barlow',sans-serif} .hsf-cfp__juror-photo{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:.7rem} .hsf-cfp__juror-photo--empty{background:#e1eff5} .hsf-cfp__juror-name{font-weight:600;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.2;color:#3b3b3b} .hsf-cfp__juror-org{font-weight:400;font-size:clamp(.82rem,1vw,.95rem);line-height:1.3;color:#737373;margin-top:.2rem} .hsf-cfp__faq-group{margin-bottom:clamp(1.5rem,3vw,2.5rem)} .hsf-cfp__faq-section{font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.15rem,1.7vw,1.5rem);color:#2f7471;margin:0 0 .6rem} .hsf-cfp__faq-item{border-bottom:1px solid #e3e3e3} .hsf-cfp__faq-q{font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.35;color:#3b3b3b;padding:clamp(.7rem,1.4vw,1rem) 2rem clamp(.7rem,1.4vw,1rem) 0;cursor:pointer;position:relative;list-style:none} .hsf-cfp__faq-q::-webkit-details-marker{display:none} .hsf-cfp__faq-q::after{content:'+';position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-weight:400;font-size:1.3em;color:#2f7471;line-height:1} .hsf-cfp__faq-item[open] .hsf-cfp__faq-q::after{content:'\2013'} .hsf-cfp__faq-a{font-family:'Barlow',sans-serif;font-weight:300;font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.5;color:#3b3b3b;padding:0 2rem clamp(.9rem,1.8vw,1.2rem) 0} .hsf-cfp__faq-a p{margin:0 0 .8rem} .hsf-cfp__faq-a p:last-child{margin-bottom:0} /* ---------- Events: featured hero ---------- */ .hsf-events--featured{margin-block:clamp(1.5rem,3vw,2.5rem)} .hsf-events__feature{display:grid;grid-template-columns:879fr 445fr;gap:clamp(1.5rem,2.9vw,38px);align-items:start} @media(max-width:900px){.hsf-events__feature{grid-template-columns:1fr;gap:1.75rem}} .hsf-events__feature-media{display:block;border-radius:5px;overflow:hidden} .hsf-events__feature-media img{display:block;width:100%;height:auto;aspect-ratio:879/495;object-fit:cover} .hsf-events__feature-body{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem)} .hsf-events__feature-title{font-family:'Barlow',sans-serif;font-weight:400;font-size:clamp(1.9rem,4vw,57.6px);line-height:1.01;letter-spacing:-.07em;text-transform:uppercase;color:#171345;margin:0} .hsf-events__feature-title a{color:inherit;text-decoration:none} .hsf-events__feature-title a:hover{text-decoration:underline} .hsf-events__feature-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(.75rem,1.6vw,1.25rem);align-items:center} .hsf-events__feature-date{font-family:'Barlow',sans-serif;font-weight:300;font-size:clamp(2.1rem,4.4vw,64px);line-height:1;letter-spacing:-.07em;color:rgba(59,59,59,.8);margin:0} .hsf-events__feature-when{display:flex;flex-direction:column;gap:.15rem} .hsf-events__feature-time,.hsf-events__feature-venue{font-family:'Barlow',sans-serif;font-weight:300;font-size:clamp(1.05rem,2.1vw,30px);line-height:1.07;letter-spacing:-.06em;text-transform:uppercase;color:#3b3b3b;margin:0} .hsf-events__feature-time{font-weight:200} .hsf-events__feature-cta{margin:0} .hsf-events__feature-cta a{display:flex;align-items:center;justify-content:center;max-width:374px;padding:.35em .5em;background:#ededed;border-radius:9px;font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.15rem,2.5vw,36px);line-height:1.13;text-transform:uppercase;color:#3b3b3b;text-decoration:none;transition:background-color .15s ease} .hsf-events__feature-cta a:hover,.hsf-events__feature-cta a:focus-visible{background:#2f7471;color:#fff} /* ---------- Event single ---------- */ .hsf-event-hero .hsf-event-media--video{position:relative;padding-top:56.25%;border-radius:5px;overflow:hidden} .hsf-event-hero .hsf-event-media--video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .hsf-event-hero .hsf-event-media--image img{display:block;width:100%;height:auto;aspect-ratio:1089/612;object-fit:cover;border-radius:5px} .hsf-event-body > *:first-child{margin-top:0} .hsf-event-related:not(:has(*)){display:none} /* event single: program area shows first term only, matching archive + story single */ .gb-text-evterm span ~ span{display:none} /* ---------- Related items ([hsf_related] — grant + event singles) ---------- */ .hsf-rel-title{font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.05vw,27.9px);line-height:1.1;color:#525252;margin:0 0 clamp(1.2rem,2.4vw,1.8rem)} .hsf-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3.4vw,40px);align-items:start} @media (max-width:860px){.hsf-rel-grid{grid-template-columns:1fr;gap:2.5rem}} .hsf-rel-card{display:block;text-decoration:none;color:inherit} .hsf-rel-media{display:block;border-radius:10px;overflow:hidden} .hsf-rel-img{width:100%;height:auto;aspect-ratio:516/375;object-fit:cover;display:block;transition:transform .35s ease} .hsf-rel-card:hover .hsf-rel-img{transform:scale(1.03)} .hsf-rel-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(.75rem,1.5vw,1.5rem);align-items:start;margin-top:clamp(.9rem,1.5vw,1.15rem)} .hsf-rel-name{font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.1rem,1.55vw,21px);line-height:1.05;color:#525252;transition:color .2s ease} .hsf-rel-card:hover .hsf-rel-name{color:#2f7471} .hsf-rel-meta{font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(.72rem,.9vw,13px);line-height:1.12;color:#868686;text-align:right;max-width:7.5em} .hsf-rel-ex{font-family:'Barlow',sans-serif;font-weight:400;font-size:clamp(.85rem,1.03vw,14.8px);line-height:1.2;color:#525252;margin-top:clamp(.5rem,1vw,.9rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* ---------- Supporters ([hsf_sponsors] — Support page) ---------- */ .hsf-sponsors__level{font-family:'Barlow',sans-serif;font-weight:400;font-size:clamp(1.375rem,2.4vw,2.25rem);line-height:1.1;color:#2a347a;text-transform:uppercase;margin:0 0 1rem} .hsf-sponsors__row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);margin:0 0 clamp(2.5rem,5vw,4rem)} .hsf-sponsors__row--text{align-items:baseline;font-family:'Barlow',sans-serif;font-weight:400;font-size:clamp(1.125rem,1.9vw,1.875rem);color:#3b3b3b} .hsf-sponsors__item{color:#3b3b3b;display:inline-flex;align-items:center;text-decoration:none} .hsf-sponsors__row--text .hsf-sponsors__name{text-decoration:underline} .hsf-sponsors__logo{width:auto;max-width:100%;object-fit:contain;display:block} /* ---------- Hosted newsletter signup embed ([hsf_newsletter]) ---------- */ .hsf-nl-embed{width:100%} .hsf-nl-embed iframe{display:block;width:100%;max-width:450px;height:var(--hsf-nl-h,550px);border:0;background:transparent} @media (max-width:480px){.hsf-nl-embed iframe{max-width:100%}} /* the hosted form stacks tighter on desktop; give it headroom on small screens */ @media (max-width:600px){.hsf-nl-embed iframe{height:calc(var(--hsf-nl-h,550px) + 60px)}} /* ---------- Stories archive: search + filter band (Figma 43:3511) ---------- */ .hsf-tools__bar{display:flex;align-items:center;justify-content:flex-end;gap:clamp(.75rem,1.5vw,1.25rem)} .hsf-tools__search{width:min(214px,60vw)} .hsf-tools__search .wpgb-facet input[type="search"], .hsf-tools__search .wpgb-facet input[type="text"]{width:100%;height:32px;border:1px solid #c9c9c9;border-radius:16px;padding:0 2.25rem 0 1rem;font-family:'Barlow',sans-serif;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#525252;background:#fff} .hsf-tools__toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:35px;height:24px;padding:0;border:0;background:none;cursor:pointer} .hsf-tools__bars, .hsf-tools__bars::before, .hsf-tools__bars::after{display:block;height:2px;background:#525252;transition:width .2s ease} .hsf-tools__bars{width:35px;position:relative} .hsf-tools__bars::before,.hsf-tools__bars::after{content:"";position:absolute;left:0} .hsf-tools__bars::before{top:-8px;width:30px} .hsf-tools__bars::after{top:8px;width:27px} .hsf-tools__toggle[aria-expanded="true"] .hsf-tools__bars, .hsf-tools__toggle:hover .hsf-tools__bars{background:#2a347a} .hsf-tools__toggle[aria-expanded="true"] .hsf-tools__bars::before, .hsf-tools__toggle[aria-expanded="true"] .hsf-tools__bars::after, .hsf-tools__toggle:hover .hsf-tools__bars::before, .hsf-tools__toggle:hover .hsf-tools__bars::after{background:#2a347a} .hsf-tools__panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(1rem,2vw,1.5rem);padding-top:clamp(1rem,2vw,1.5rem);border-top:1px solid #e3e3e3} @media (max-width:760px){.hsf-tools__panel{grid-template-columns:1fr}} .hsf-tools__label{font-family:'Barlow',sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.08em;color:#525252;margin:0 0 .6rem} .hsf-tools__group .wpgb-facet{font-family:'Barlow',sans-serif;font-size:.9rem;color:#525252} /* ---------- Stories archive: uniform grid (Figma "Stories Example") ---------- */ .hsf-stories-grid-wrap{display:none} body.hsf-stories-filtered .hsf-stories-grid-wrap{display:block} body.hsf-stories-filtered .gb-query-qhero, body.hsf-stories-filtered .gb-element-w1, body.hsf-stories-filtered .gb-element-w2, body.hsf-stories-filtered .gb-element-w3, body.hsf-stories-filtered .gb-element-w4, body.hsf-stories-filtered .gb-element-w5{display:none} .hsf-stories-loadmore{display:flex;justify-content:center;margin-top:clamp(2rem,4vw,3.5rem)} .hsf-stories-loadmore .wpgb-facet button{font-family:'Barlow',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:#525252;background:none;border:0;border-bottom:2px solid #525252;padding:0 0 .35rem;cursor:pointer} .hsf-stories-loadmore .wpgb-facet button:hover{color:#2a347a;border-bottom-color:#2a347a} /* we supply our own SORT / TYPE / FOCUS AREA headings - hide WP Grid Builder's facet names */ .hsf-tools .wpgb-facet-title, .hsf-tools .wpgb-facet h1,.hsf-tools .wpgb-facet h2,.hsf-tools .wpgb-facet h3,.hsf-tools .wpgb-facet h4, .hsf-stories-loadmore .wpgb-facet-title{display:none} /* ---------- Stories filter panel: match Figma "Stories Example" ---------- In the design the panel sits under the search bar on the RIGHT, roughly the last 38% of the band - not full width. SORT | TYPE | FOCUS AREA. */ .hsf-tools__panel{margin-left:auto;max-width:none;grid-template-columns:repeat(3,max-content);column-gap:clamp(1.75rem,3.5vw,3rem);justify-content:end;border-top:0;padding-top:clamp(.75rem,1.5vw,1rem)} @media (max-width:960px){.hsf-tools__panel{max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}} @media (max-width:620px){.hsf-tools__panel{grid-template-columns:1fr}} .hsf-tools__panel--aligned{} /* a group whose facet has no choices (TYPE, until stories are tagged) should not leave a stranded heading */ .hsf-tools__group:has(.wpgb-facet:empty){display:none} .hsf-tools__label{font-size:.8rem;letter-spacing:.1em;color:#525252;margin:0 0 .75rem} /* the design marks choices with a small dot rather than a boxed checkbox */ .hsf-tools__panel label{display:flex;align-items:center;gap:.6rem;font-family:'Barlow',sans-serif;font-size:.9rem;line-height:1.5;color:#525252;cursor:pointer} .hsf-tools__panel input[type="checkbox"], .hsf-tools__panel input[type="radio"]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:7px;height:7px;margin:0;border:1px solid #9a9a9a;border-radius:50%;background:transparent;cursor:pointer} .hsf-tools__panel input[type="checkbox"]:checked, .hsf-tools__panel input[type="radio"]:checked{background:#2a347a;border-color:#2a347a} .hsf-tools__panel input[type="checkbox"]:focus-visible, .hsf-tools__panel input[type="radio"]:focus-visible{outline:2px solid #2a347a;outline-offset:2px} /* focus area carries the most terms - two columns once there is room */ @media (min-width:901px){.hsf-tools__group:last-child .wpgb-facet>ul,.hsf-tools__group:last-child .wpgb-facet>div{columns:2;column-gap:1.25rem}} /* sort is a select in WP Grid Builder (no radio variant) - keep it quiet */ .hsf-tools__panel select{width:auto;max-width:100%;border:0;border-bottom:1px solid #c9c9c9;border-radius:0;background:transparent;font-family:'Barlow',sans-serif;font-size:.9rem;color:#525252;padding:.15rem 0} /* the [hidden] attribute loses to the display:grid rule above - restore it */ .hsf-tools__panel[hidden]{display:none} /* WP Grid Builder puts a 40px bottom margin on its fieldset, which made the search wrapper 72px tall against a 32px input and threw the hamburger out of alignment */ .hsf-tools .wpgb-facet fieldset{margin:0} .hsf-tools .wpgb-facet{margin:0} /* WP Grid Builder prints its facet CSS inline, after this stylesheet, so a plain override loses. Scoped !important is the contained way to win it back. */ .hsf-tools fieldset, .hsf-tools .wpgb-facet, .hsf-stories-loadmore fieldset{margin:0 !important} /* ---------- Stories tools: suppress WPGB's own facet titles ---------- */ /* We print our own SORT / TYPE / FOCUS AREA headings, so the facet's built-in

would show the admin name twice. WPGB prints its CSS inline after this stylesheet, so the override has to be scoped + !important to win. The sr-only is left alone for a11y. */ .hsf-tools .wpgb-facet-title:not(.wpgb-sr-only), .hsf-stories-loadmore .wpgb-facet-title:not(.wpgb-sr-only), .hsf-archive-pagination .wpgb-facet-title:not(.wpgb-sr-only){display:none !important} /* ---------- Design Grants archive header (Figma 41:2850 / 41:2907) ---------- */ .hsf-grants-head{margin:0 0 clamp(1.75rem,3.5vw,2.5rem)} .hsf-grants-head__row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:clamp(1.5rem,3vw,2.5rem)} .hsf-grants-head__left{flex:1 1 420px;max-width:563px} .hsf-grants-head__right{flex:0 1 340px;display:flex;flex-direction:column;align-items:flex-end;gap:clamp(1rem,2vw,1.6rem)} @media (max-width:760px){.hsf-grants-head__right{flex-basis:100%;align-items:flex-start}} /* numbered pillar sub-nav */ .hsf-subnav ol{list-style:decimal;margin:0;padding:0 0 0 1.4em;font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.5;color:#3b3b3b} .hsf-subnav li{margin:0} .hsf-subnav a{color:#3b3b3b;text-decoration:none} .hsf-subnav a:hover,.hsf-subnav a:focus-visible{color:#ef4423} .hsf-subnav li.is-active{color:#ef4423;font-weight:600} .hsf-subnav li.is-active span{color:#ef4423} /* the tools band sits under the sub-nav here rather than alone on a row */ .hsf-grants-head__right .hsf-tools{width:100%} .hsf-grants-head__right .hsf-tools__bar{justify-content:flex-end} @media (max-width:760px){.hsf-grants-head__right .hsf-tools__bar{justify-content:flex-start}} /* WPGB pagination under the grid */ .hsf-archive-pagination{display:flex;justify-content:center;margin-top:clamp(2.5rem,5vw,4rem)} .hsf-archive-pagination .wpgb-facet{font-family:'Barlow',sans-serif} .hsf-grants-head__title{font-family:'Barlow',sans-serif;font-weight:800;font-size:clamp(2rem,4vw,2.5rem);line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:#ef4423;margin:0 0 clamp(1rem,2vw,1.5rem)} .hsf-grants-head__intro{font-family:'Barlow',sans-serif;font-weight:400;font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.45;color:#3b3b3b;max-width:563px} .hsf-grants-head__row>*{min-width:0} /* Grants panel carries longer labels than Stories, so it needs more room */ @media (max-width:860px){.hsf-tools[data-set="grants"] .hsf-tools__panel{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.hsf-tools[data-set="grants"] .hsf-tools__panel{grid-template-columns:1fr}} .hsf-tools__label{white-space:nowrap} /* ---------- Design Grants cards (Figma 41:2852) ---------- Blocksy has no "center the card title" control, so the alignment and the type are set here. Sampled from the design: #3b3b3b, two lines at a 20px pitch under a 260px square. Scoped by body[data-prefix] so it cannot leak into the other archives, and specific enough to beat Blocksy's own inline dynamic styles without !important. */ body[data-prefix="hsf_grant_archive"] .entries .entry-card .entry-title{ text-align:center; font-family:'Barlow',sans-serif; font-weight:500; font-size:clamp(.95rem,1.25vw,18px); line-height:1.15; letter-spacing:0; color:#3b3b3b; margin:clamp(2px,.4vw,4px) 0 0; text-wrap:balance; } body[data-prefix="hsf_grant_archive"] .entries .entry-card .entry-title a{ color:inherit; text-decoration:none; } body[data-prefix="hsf_grant_archive"] .entries .entry-card .entry-title a:hover, body[data-prefix="hsf_grant_archive"] .entries .entry-card .entry-title a:focus-visible{ color:#ef4423; } /* the square is the whole card's lead - keep the crop exact */ body[data-prefix="hsf_grant_archive"] .entries .entry-card .ct-media-container img{ aspect-ratio:1/1; object-fit:cover; width:100%; height:auto; } /* Blocksy puts 30px under the media container and 30px inside the card foot. The design runs tighter: image bottom to title box is 2px, and the next row starts 60px below the title - Blocksy's own 30px card foot plus the 30px grid row gap gives exactly that. */ body[data-prefix="hsf_grant_archive"] .entries .entry-card .ct-media-container{margin-bottom:0} /* ---------- Facet controls, per the design (Figma 56:2436) ---------- WPGB renders a checkbox as
with a .wpgb-checkbox-control span and an aria-pressed state - there is no real , which is why the earlier input[type=checkbox] rules never bit. Sampled from the artboard: hollow 7px ring #83878a, UPPERCASE labels #4c5255, column headings #b2b2b2. */ .hsf-tools .wpgb-checkbox{display:flex;align-items:center;gap:7px;cursor:pointer} .hsf-tools .wpgb-checkbox-control{flex:0 0 auto !important;width:7px !important;height:7px !important;min-width:7px !important;border:1px solid #83878a !important;border-radius:50% !important;background:none !important;box-shadow:none !important} .hsf-tools .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control{background:#4c5255 !important;border-color:#4c5255 !important} .hsf-tools .wpgb-checkbox-label{font-family:'Barlow',sans-serif !important;font-weight:400;font-size:13px !important;line-height:1.6 !important;letter-spacing:.02em;text-transform:uppercase;color:#4c5255 !important} .hsf-tools .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-label{font-weight:600} /* counts are ours, not the design's - keep them but make them recede */ .hsf-tools .wpgb-checkbox-label span{color:#a8abae;font-size:.9em;letter-spacing:0} .hsf-tools .wpgb-hierarchical-list{list-style:none;margin:0;padding:0} .hsf-tools .wpgb-hierarchical-list li{margin:0} /* the design splits a long term list into two sub-columns */ .hsf-tools .wpgb-hierarchical-list:has(li:nth-child(7)){columns:2;column-gap:clamp(1.25rem,2.4vw,2rem)} .hsf-tools .wpgb-hierarchical-list li{break-inside:avoid} /* column headings are lighter and larger than we had them */ .hsf-tools__label{font-family:'Barlow',sans-serif;font-weight:400;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#b2b2b2;margin:0 0 .55rem} /* SORT is a native select (WPGB sort facets offer no radio option) - strip it back so it reads as quietly as the rest of the panel */ .hsf-tools .wpgb-sort-facet select, .hsf-tools select.wpgb-select{font-family:'Barlow',sans-serif;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#4c5255;background:none;border:0;border-bottom:1px solid #d5d7d8;border-radius:0;padding:2px 1.5rem 3px 0;height:auto;box-shadow:none} .hsf-tools .wpgb-sort-facet select:focus-visible{outline:2px solid #4c5255;outline-offset:2px} .hsf-tools .wpgb-checkbox{display:flex !important;align-items:center !important;gap:7px !important} /* the sort select was clipping its own longest option */ .hsf-tools .wpgb-sort-facet select, .hsf-tools select.wpgb-select{min-width:11.5rem;width:auto;max-width:100%} /* keep the count clear of the term */ .hsf-tools .wpgb-checkbox-label span{margin-left:.15em;white-space:nowrap} .hsf-tools .wpgb-hierarchical-list:has(li:nth-child(7)) li{padding-right:.75rem} /* sort select: WPGB sets a 2px box inline, so stripping it back to the design's single underline needs !important like everything else here. */ .hsf-tools .wpgb-sort-facet select.wpgb-select{ border:0 !important; border-bottom:1px solid #d5d7d8 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; padding:2px 1.5rem 3px 0 !important; height:auto !important; font-size:13px !important; color:#4c5255 !important; } .hsf-tools .wpgb-sort-facet select.wpgb-select:focus{border-bottom-color:#4c5255 !important} /* Call for Proposals download links */ .hsf-cfp-download{margin:clamp(1rem,2vw,1.5rem) 0 0} .hsf-cfp-download + .hsf-cfp-download{margin-top:.4rem} .hsf-cfp-download a{font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(1.05rem,1.4vw,1.25rem);color:#2caba5;text-decoration:none} .hsf-cfp-download a:hover,.hsf-cfp-download a:focus-visible{text-decoration:underline} /* CFP side-nav proposal link + Apply button (were both href="#") */ .hsf-cfp-navlink{color:#3b3b3b;text-decoration:underline} .hsf-cfp-navlink:hover,.hsf-cfp-navlink:focus-visible{color:#2caba5} .hsf-cfp-apply{display:inline-flex;align-items:center;justify-content:center;background:#ee8d94;border-radius:8px;font-family:'Barlow',sans-serif;font-weight:600;font-size:clamp(1.05rem,1.4vw,1.3rem);color:#fff;text-decoration:none;min-height:52px;padding:.5rem 2.5rem;margin:clamp(1.25rem,2.5vw,1.75rem) 0 0} .hsf-cfp-apply:hover,.hsf-cfp-apply:focus-visible{background:#e07b83;color:#fff} /* --------------------------------------------------------------------------- Research archive — cards read "2021 .......... The Mobility Innovator" (year left, title right, one line across the card) --------------------------------------------------------------------------- */ body[data-prefix="hsf_research_archive"] .entries .entry-card .ct-media-container{margin-bottom:0} body[data-prefix="hsf_research_archive"] .entries .entry-card .entry-title{ margin:clamp(6px,.9vw,12px) 0 0; font-family:'Barlow',sans-serif; font-weight:500; font-size:clamp(.95rem,1.25vw,18px); line-height:1.15; } body[data-prefix="hsf_research_archive"] .entries .entry-card .entry-title a{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; color:#3b3b3b; text-decoration:none; } .hsf-card-year{ flex:0 0 auto; font-weight:400; color:#8a8a8a; } /* --------------------------------------------------------------------------- [hsf_documents] — report cover grid --------------------------------------------------------------------------- */ .hsf-research-reports{margin-top:clamp(2.5rem,5vw,4.5rem)} .hsf-docs{ display:grid; grid-template-columns:repeat(var(--hsf-docs-columns,4),minmax(0,1fr)); column-gap:clamp(1.25rem,2.6vw,3.9rem); row-gap:clamp(1.75rem,3.5vw,3rem); } .hsf-doc{display:block;text-decoration:none;color:inherit} .hsf-doc__cover{ display:block; width:100%; height:auto; aspect-ratio:248/320; object-fit:cover; border-radius:5px; } .hsf-doc__cover--empty{ display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem; aspect-ratio:248/320; border:2px dashed #ef4423; border-radius:5px; color:#ef4423; font-family:'Barlow',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.06em; } .hsf-doc__meta{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-top:clamp(6px,.9vw,12px); font-family:'Barlow',sans-serif; font-size:clamp(.85rem,1.05vw,15px); line-height:1.2; } .hsf-doc__year{flex:0 0 auto;font-weight:400;color:#8a8a8a} .hsf-doc__label{font-weight:500;color:#3b3b3b} @media (max-width:900px){.hsf-docs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.hsf-docs{grid-template-columns:1fr}} /* --------------------------------------------------------------------------- Archive cards with no featured image get a loud placeholder tile instead of a floating title. Disappears on its own the moment an image is set. --------------------------------------------------------------------------- */ body[data-prefix="hsf_grant_archive"] .entries .entry-card:not(:has(.ct-media-container))::before, body[data-prefix="hsf_research_archive"] .entries .entry-card:not(:has(.ct-media-container))::before{ content:"\26A0 NEEDS AN IMAGE"; display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem; border:2px dashed #ef4423; border-radius:5px; color:#ef4423; font-family:'Barlow',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.08em; } body[data-prefix="hsf_grant_archive"] .entries .entry-card:not(:has(.ct-media-container))::before{aspect-ratio:1} body[data-prefix="hsf_research_archive"] .entries .entry-card:not(:has(.ct-media-container))::before{aspect-ratio:4/3} /* --------------------------------------------------------------------------- Call for Proposals — copy now comes from fields, so the paragraph styles that used to be inline on the block markup live here. --------------------------------------------------------------------------- */ .cfp-intro p{ font-family:'Barlow',sans-serif; font-weight:300; font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.5; color:#3b3b3b; margin:0 0 clamp(1.25rem,2.5vw,1.75rem); } .cfp-intro p:last-child{margin-bottom:0} .cfp-theme p{ font-family:'Barlow',sans-serif; font-weight:300; font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.5; color:#3b3b3b; margin:0 0 1rem; } .cfp-theme p:last-child{margin-bottom:0} /* --------------------------------------------------------------------------- [hsf_media_cards] — image-led cards with taxonomy pills (CFP Events strip) --------------------------------------------------------------------------- */ .hsf-mcards{ display:grid; grid-template-columns:repeat(var(--hsf-mcards-columns,2),minmax(0,1fr)); gap:clamp(1.5rem,4vw,3rem); } .hsf-mcard{display:block;text-decoration:none;color:inherit} .hsf-mcard__img{ display:block; width:100%; aspect-ratio:408/228; object-fit:cover; border-radius:5px; } .hsf-mcard__pills{ display:flex; flex-wrap:wrap; gap:8px; margin:.75rem 0 0; } .hsf-mcard__pill{ display:inline-flex; align-items:center; height:22px; padding:0 12px; border:1px solid #bfbfbf; border-radius:11px; font-family:'Barlow',sans-serif; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:#4c5255; white-space:nowrap; } .hsf-mcard__pill--play{ justify-content:center; width:32px; padding:0; font-size:10px; } .hsf-mcard__title{ display:block; margin:.6rem 0 0; font-family:'Barlow',sans-serif; font-weight:500; font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.25; color:#3b3b3b; } .hsf-mcard:hover .hsf-mcard__title{color:#2caba5} @media (max-width:760px){.hsf-mcards{grid-template-columns:1fr;gap:1.5rem}} /* --------------------------------------------------------------------------- Dropdown item descriptions — bold label over a small grey line, per design --------------------------------------------------------------------------- */ #header .sub-menu .hsf-menu-desc, .sub-menu .hsf-menu-desc{ display:block; margin-top:2px; font-family:'Barlow',sans-serif; font-weight:400; font-size:12.5px; line-height:1.35; letter-spacing:.01em; color:#9a9a9a; text-transform:none; white-space:normal; max-width:26ch; } #header .sub-menu > li > a, .sub-menu > li > a{ display:block; line-height:1.2; } /* hsf dropdown rule — the design draws a vertical line down the left of the dropdown */ #header .sub-menu{border-left:1px solid #e2e2e2} /* --------------------------------------------------------------------------- Mobile grid collapses. These containers set grid-template-columns in an INLINE style attribute, and each page carried its own