<div class="hero hero--stiftung">
<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">Bertelsmann Stiftung</h1>
<h2 class="hero__subheading">The Bertelsmann Stiftung is an independent foundation headquartered in the northern German town of Gütersloh. The Washington, DC-based Foundation is part of the Stiftung’s international network.</h2>
</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": "stiftung",
"heading": "Bertelsmann Stiftung",
"subheading": "The Bertelsmann Stiftung is an independent foundation headquartered in the northern German town of Gütersloh. The Washington, DC-based Foundation is part of the Stiftung’s international network."
}
// ===============================================
// 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.