<div class="hero hero--digital-world">
<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">Transatlantic Perspectives on Global Challenges</h1>
<p class="hero__description">Around the world, humanity navigates a digital revolution that’s upending life as we know it. And while the United States and Europe are the nexus of the world's data flows and digital trade for now, the rest of the world is expanding
digital output exponentially. It’s now more essential than ever that the conversation about these changes be inclusive. A successful transition to a digital world requires input from all sectors of society. Through analysis, data visualization,
and documentary storytelling, we bring you inside the issues shaping today's global digital economy.
</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": "digital-world",
"heading": "Transatlantic Perspectives on Global Challenges",
"description": "Around the world, humanity navigates a digital revolution that’s upending life as we know it. And while the United States and Europe are the nexus of the world's data flows and digital trade for now, the rest of the world is expanding digital output exponentially. It’s now more essential than ever that the conversation about these changes be inclusive. A successful transition to a digital world requires input from all sectors of society. Through analysis, data visualization, and documentary storytelling, we bring you inside the issues shaping today's global digital economy.\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.