<div class="hero hero--about">
<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 Bertelsmann Foundation</h1>
<p class="hero__description">The Bertelsmann Foundation (North America), Inc., established in 2008, was created to promote and strengthen the transatlantic relationship. Through its research, debate forums and multimedia tools, the Foundation provides analysis and solutions
to the most pressing economic, political and social challenges impacting the United States and Europe.</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": "about",
"heading": "The Bertelsmann Foundation",
"description": "The Bertelsmann Foundation (North America), Inc., established in 2008, was created to promote and strengthen the transatlantic relationship. Through its research, debate forums and multimedia tools, the Foundation provides analysis and solutions to the most pressing economic, political and social challenges impacting the United States and Europe."
}
// ===============================================
// 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.