<div class="hero hero--future-leadership">
<div class="announcement announcement--democracy">
<a class="announcement__content" href="#"><strong>Just Launched</strong><span> | </span>How to Fix Democracy Season 2</a>
</div>
<div class="wrapper stack-l hero__content">
<div>
<a class="hero__logo" href="/"><svg version="1.1" id="bfna-logo" class="bfna-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 695.1 266.6" style="enable-background:new 0 0 695.1 266.6;" xml:space="preserve">
<path class="st0" d="M62.2,76.5c0-13.7-8.1-24.4-22-26.6c7-4.3,12.4-11.8,12.4-23.3C52.6,10.7,41.8,0,23.3,0H0v106.3h29.2
C48.4,106.3,62.2,95.1,62.2,76.5z M7,6.4h13.5c5.6,0,12.5,0.3,17.7,4.5c3.5,2.9,7.2,8.1,7.2,16.6c0,7.3-2.7,12.7-7,16.2
c-4.6,3.8-9.1,4.5-14.5,4.5H7V6.4z M7,99.9V54.5h16.6c11.8,0,17.1,1.7,19.9,3c8,3.7,11.3,10.2,11.3,19.8c0,4.9-1.1,11.2-6.9,16.3
c-7.2,6.4-15.9,6.4-23.1,6.4H7z"/>
<path class="st0" d="M110.1,108c16.1,0,24.7-10.3,28.5-17.6l-5.4-3.2c-4.1,8.6-12.1,14.8-22.6,14.8c-13.7,0-25.8-10.8-25.8-27.4
l55.6-0.1c0-20.7-13.2-34.7-30.8-34.7c-15.9,0-31.5,11.6-31.5,34.2C78.1,93,89.9,108,110.1,108z M109.6,46
c12.9,0,22.5,9.7,24.1,22.6l-48.4-0.1C87,55.9,96.4,45.9,109.6,46z"/>
<path class="st0" d="M165.6,106.3V71.4c0-8.1,0.2-25.5,13.2-25.5c2.9,0,4.1,0.8,4.8,1.3l3.1-5.8c-2.1-1.1-4.5-1.6-6.8-1.6
c-7,0-12,4.3-14.3,9.9v-8.4h-6.4l0,65H165.6z"/>
<polygon class="st0" points="201.1,106.3 207.5,106.3 207.5,47.3 218.8,47.3 218.8,41.3 207.5,41.3 207.5,18 201.1,18 201.1,41.3
193.9,41.3 193.9,47.3 201.1,47.3 "/>
<path class="st0" d="M259.4,108c16.1,0,24.7-10.3,28.5-17.6l-5.4-3.2c-4.1,8.6-12.1,14.8-22.6,14.8c-13.7,0-25.8-10.8-25.8-27.4
l55.6-0.1c0-20.7-13.2-34.7-30.7-34.7c-15.9,0-31.5,11.6-31.5,34.2C227.4,93,239.2,108,259.4,108z M258.9,45.9
c12.9,0,22.5,9.7,24.1,22.7l-48.4-0.1C236.3,55.9,245.7,45.9,258.9,45.9z"/>
<rect x="308.5" class="st0" width="6.4" height="106.3"/>
<path class="st0" d="M353.6,102c-7.2,0-14-4.5-16.2-13.1l-6.2,1.9c2.7,10.8,11.6,17.2,22.5,17.2c10,0,21.2-5.9,21.2-20.7
c0-3.7-0.6-7.2-3.3-10.5c-4.1-5.3-10.2-7-16.7-9.6c-6.4-2.5-11.5-4.6-11.5-11c0-4.8,3.7-10.4,11-10.4c4.9-0.1,9.4,2.8,11.3,7.3
l5.4-2.8c-3-7-9.4-10.5-17-10.5c-9.9,0-17.4,6.9-17.4,16.7c0,3.1,1,6,2.9,8.5c2.9,3.8,7.6,5.9,14.2,8.6c9.9,4,14.5,6.7,14.5,14
C368.1,96.1,361.9,102,353.6,102z"/>
<path class="st0" d="M397.3,68.7c0-12.9,5.3-22.8,16.6-22.8c14,0,14.3,14.5,14.3,18.6v41.8h6.4V67.1c0-4,0.2-21.2,17.4-21.2
c3.6-0.2,7.1,1.2,9.7,3.7c3.5,3.7,3.8,9.1,3.8,13.4v43.3h6.4V63c0-5.3-0.3-12.4-5.6-17.7c-2.9-2.9-7.5-5.4-14.7-5.4
c-8.6,0-15.6,4-19.3,11.8c-1.3-3.3-5.4-11.8-18.2-11.8c-7-0.3-13.5,3.4-16.9,9.6v-8.1H391v65h6.3V68.7z"/>
<path class="st0" d="M522.5,108.1c10.2,0.2,19.7-4.9,25.3-13.4v11.6h6.4v-65h-6.4v11.4c-6.2-8.8-15.1-12.8-25.3-12.8
c-19,0-31.7,13.9-31.7,33.9C490.8,95.2,505.4,108.1,522.5,108.1z M522.8,45.9c11.2,0,25.3,8.1,25.3,27.4c0,15-8.9,28.7-25.2,28.7
c-16.4,0-25.5-14-25.5-28.7C497.5,55.6,509.9,45.9,522.8,45.9z"/>
<path class="st0" d="M583.5,72.5c0-6.4,0.6-12.4,3.5-17.5c2.4-4.3,7-9.1,15.9-9.1c7.8,0,11.3,4,12.8,6.4c2.4,3.7,2.5,8.6,2.5,13.1
v41h6.4v-41c0-5.7-0.3-11.8-3.2-16.4c-1.4-2.2-6.4-9.1-18-9.1c-11,0-16.9,6.2-19.9,11.6V41.3h-6.4v65h6.4V72.5z"/>
<path class="st0" d="M653.9,72.5c0-6.4,0.6-12.4,3.5-17.5c2.4-4.3,7-9.1,15.9-9.1c7.8,0,11.3,4,12.8,6.4c2.4,3.7,2.5,8.6,2.5,13.1
v41h6.4v-41c0-5.7-0.3-11.8-3.2-16.4c-1.4-2.2-6.4-9.1-18-9.1c-11,0-16.9,6.2-19.9,11.6V41.3h-6.4l0,65h6.4V72.5z"/>
<path class="st0" d="M329.9,162.6h-9.5v64.2h9.5c19.3,0,32.5-13.1,32.5-32.1C362.5,176.1,349.1,162.6,329.9,162.6z"/>
<polygon class="st0" points="389.3,202.9 416.9,202.9 403.2,168.3 "/>
<path class="st0" d="M543.6,161.6c-18.8,0-32.8,14.6-32.8,33.3c0,18.7,14,33.2,32.8,33.2s32.8-14.6,32.8-33.2h0
C576.5,176.2,562.5,161.6,543.6,161.6z"/>
<path class="st0" d="M106.8,161.6C88,161.6,74,176.2,74,194.9c0,18.7,14,33.2,32.8,33.2c18.8,0,32.8-14.6,32.8-33.2h0.1
C139.6,176.2,125.6,161.6,106.8,161.6z"/>
<path class="st0" d="M0,122.5v144.1h695.1V122.5H0z M61.3,162.6H36.5v26.5h24.1v4.4H36.5v37.8h-4.8v-73h29.6V162.6z M144.6,194.9
c0,21-16.5,37.5-37.9,37.5c-21.3,0-37.9-16.5-37.9-37.5c0-20.9,17-37.9,37.9-37.9S144.6,174,144.6,194.9L144.6,194.9z M210.1,203.9
c0,8-0.4,13.2-4.2,18.7c-5.5,8-14.1,9.8-20.7,9.8s-15.2-1.9-20.7-9.8c-3.7-5.5-4.2-10.7-4.2-18.7v-45.6h4.7v45.6
c0,6.9,0.3,11.4,3.1,15.8c4.3,6.9,12.3,8.4,17,8.4c4.7,0,12.7-1.5,17-8.4c2.7-4.4,3.1-8.9,3.1-15.8v-45.7h4.8V203.9z M295.8,233.1
L234.6,169v62.3l-4.9,0v-73.8l61.3,64.2v-63.4h4.8V233.1z M357,221.1c-9.2,9.2-20.5,10.2-26.9,10.2l-14.5,0v-73H330
c6.5,0,17.7,1,26.9,10.2c7.8,7.8,10.5,18.4,10.5,26.4S364.8,213.3,357,221.1z M428.4,231.3l-9.7-24h-31.1l-9.7,24h-5.3l30.8-75.2
l30.3,75.2H428.4z M473.8,162.6h-18.9v68.6H450v-68.6h-18.9v-4.4h42.7V162.6z M490,231.2h-4.8v-73h4.8V231.2z M581.5,194.9
c0,21-16.5,37.5-37.9,37.5s-37.9-16.5-37.9-37.5c0-20.9,17-37.9,37.9-37.9S581.5,174,581.5,194.9L581.5,194.9z M663.3,233.1
L602,169v62.3l-4.8,0v-73.8l61.3,64.2v-63.4h4.8V233.1z"/>
</svg>
</a>
</div>
<hgroup class="stack-l">
<h1 class="hero__heading">The Future Leadership</h1>
<p class="hero__description">Technology and automation are rapidly reshaping industries, economies, and the world of work, and transatlantic exchange on the future of work is key to ensuring a sustainable future for all. We have generated national and international dialogue
on how the U.S. and Europe can learn from each other, before shifting to focus on how cities, counties, and states can pioneer future of work policy. Using stakeholder engagement, video, and multimedia tools, we make the case for why local
leaders should be thinking about — and planning for — the future leadership.
</p>
</hgroup>
<footer>
</footer>
</div>
</div>
<div class="hero{% if theme %} hero--{{theme}}{% endif %}">
{% render '@announcement' %}
<div class="wrapper stack-l hero__content">
<div>
<a class="hero__logo" href="/">{% render '@logo' %}</a>
</div>
<hgroup class="stack-l">
{% if heading %}
<h1 class="hero__heading">{{ heading }}</h1>
{% endif %}
{% if subheading %}
<h2 class="hero__subheading">{{ subheading }}</h2>
{% endif %}
{% if description %}
<p class="hero__description">{{ description }}</p>
{% endif %}
</hgroup>
<footer>
{% if button %}
<a href="{{ button.url }}" class="button button--primary button--navy">{{ button.label }}</a>
{% endif %}
</footer>
</div>
</div>
{
"theme": "future-leadership",
"heading": "The Future Leadership",
"description": "Technology and automation are rapidly reshaping industries, economies, and the world of work, and transatlantic exchange on the future of work is key to ensuring a sustainable future for all. We have generated national and international dialogue on how the U.S. and Europe can learn from each other, before shifting to focus on how cities, counties, and states can pioneer future of work policy. Using stakeholder engagement, video, and multimedia tools, we make the case for why local leaders should be thinking about — and planning for — the future leadership.\n"
}
// ===============================================
// Hero Styles
// ===============================================
.hero {
// sets the base values for the local variables
--theme-hsl: var(--navy-hsl);
--button-hsl: var(--theme-hsl);
--bg-img: url(/images/hero/homepage.jpg);
}
// ===============================================
// Main layout styles
// Based on this implementation by Heydon Pickering
// https://every-layout.dev/layouts/cover/#the-generator
// ===============================================
.hero {
display: flex;
min-height: 70vh;
flex-direction: column;
}
.hero > * {
margin-top: 1rem;
margin-bottom: 1rem;
}
.hero > :first-child:not(.hero__content) { margin-top: 0; }
.hero > :last-child:not(.hero__content) { margin-bottom: 0; }
.hero__content {
margin-top: auto; // This pushes the main content as far as possible from the top
@include breakpoint($large) { margin-bottom: auto; } // This makes the main content centered vertically on large screens
}
// ===============================================
// Main content styles
// ===============================================
.hero__content {
padding-top: var(--s2);
padding-bottom: var(--s2);
width: calc(100% - 2rem);
}
// ===============================================
// Internal Elements Styles
// ===============================================
.hero__logo {
// Sets the logo size on different screen-sizes
display: block;
max-width: 120px;
@include breakpoint($large) { max-width: 160px; }
}
.hero__heading {
// Typographic styles for the main heading
font-weight: 600;
font-size: 2rem;
line-height: 1.3;
color: hsla(var(--theme-hsl), 1);
@include breakpoint($large) {
font-size: 2.5rem;
line-height: 1.1;
letter-spacing: 1px;
}
}
.hero__subheading {
max-width: 45ch; // Sets the max-width as a function of the number of characters, so we don't need to worry about media queries
// Adds a white text-shadow to improve legibility.
// This should be very subtle and not evident visually
text-shadow: 0 0 6px hsla(var(--white-hsl), .7);
// Typographic styles for the sub heading
font-size: 1.2rem;
line-height: 1.5;
font-weight: 300;
@include breakpoint($large) {
font-size: 1.6rem;
line-height: 1.5;
letter-spacing: .3px;
}
}
.hero__description {
max-width: 75ch; // Sets the max-width as a function of the number of characters, so we don't need to worry about media queries
// Adds a white text-shadow to improve legibility.
// This should be very subtle and not evident visually
text-shadow: 0 0 6px hsla(var(--white-hsl), .7);
padding-bottom: 1.5rem;
}
// ===============================================
// Here we deal with the two overlays of the hero.
// ===============================================
.hero { position: relative; } // Setting the position relative, so the pseudo elements use this as a reference point.
.hero:after,
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
@include breakpoint($large) { left: 50%; }
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
background-image: var(--bg-img);
}
// Applying the background image variable
.hero:before {
z-index: -3; // Sets the bg-image behind the gradient overlay
background-image: var(--bg-img);
}
// Applies a linear gradient to to create the fading effect.
// The effect swicthes direction depending on the screensize.
.hero:after {
z-index: -2; // Sets the bg-image in front of the gradient overlay
background-image: linear-gradient(0deg, hsla(var(--white-hsl), 1) 20%, hsla(var(--white-hsl), 0.2) 100%);
@include breakpoint($large) {
// This sets the width of the gradient overlay slightly shorter than the background-image.
// This was done to prevent a small glitch to happen when a thin line of the background image
// appeared behind the gradient in some screensizes. I suspect this has something to do with split-pixels.
left: calc(50% - 5px);
border-left: 4px solid hsla(var(--white-hsl), 1);
background-image: linear-gradient(90deg, hsla(var(--white-hsl), 1) 0%, hsla(var(--white-hsl), 0) 100%);
}
}
// Applying the background image variables and the theme colors
.hero--democracy {
--theme-hsl: var(--green-hsl);
--bg-img: url(/images/hero/democracy@2x.jpg);
}
.hero--future-leadership {
--theme-hsl: var(--red-hsl);
--bg-img: url(/images/hero/future-leadership@2x.jpg);
}
.hero--politics-society {
--theme-hsl: var(--yellow-hsl);
--bg-img: url(/images/hero/politics-society@2x.jpg);
}
.hero--digital-world {
--theme-hsl: var(--purple-hsl);
--bg-img: url(/images/hero/digital-world@2x.jpg);
}
// Setting only the bg-image, since the --theme-hsl is already the default navy.
.hero--team { --bg-img: url(/images/hero/team@2x.jpg); }
.hero--about { --bg-img: url(/images/hero/about@2x.jpg); }
.hero--stiftung { --bg-img: url(/images/hero/stiftung.jpg); }
.hero--archives { --bg-img: url(/images/hero/archives@2x.jpg); }
.hero--updates { --bg-img: url(/images/hero/updates@2x.jpg); }
There are no notes for this item.