<div class="hero hero--politics-society">
<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">Politics & Society</h1>
<p class="hero__description">From economic crises and trade wars to the rise of populism and strained international cooperation, it seems that the United States and its European partners are growing apart on many levels. We follow the state of the transatlantic relationship
and how politics and societies on both sides of the Atlantic are handling the global challenges of the 21st century. Through research, polling, and our transatlantic legislative exchange program, CEPI, we seek to foster stronger transatlantic
ties through a deeper mutual understanding.
</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": "politics-society",
"heading": "Politics & Society",
"description": "From economic crises and trade wars to the rise of populism and strained international cooperation, it seems that the United States and its European partners are growing apart on many levels. We follow the state of the transatlantic relationship and how politics and societies on both sides of the Atlantic are handling the global challenges of the 21st century. Through research, polling, and our transatlantic legislative exchange program, CEPI, we seek to foster stronger transatlantic ties through a deeper mutual understanding.\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.