3378 lines
No EOL
77 KiB
CSS
3378 lines
No EOL
77 KiB
CSS
@charset "UTF-8";
|
||
:root {
|
||
--font: 'Executive', Arial, sans-serif;
|
||
--title: 'System', Arial, sans-serif;
|
||
--fs-xsmall: 12px;
|
||
--fs-small: 16px;
|
||
--fs-normal: 20px;
|
||
--fs-text: 24px;
|
||
--fs-medium: 34px;
|
||
--fs-big: 45px;
|
||
--fs-button-bold: 22px;
|
||
--max-w-content: 700px;
|
||
--max-w-cards: 940px;
|
||
--max-w-site: 1600px;
|
||
--z-header: 2000;
|
||
--panel-w: 310px;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
:root {
|
||
--fs-medium: 20px;
|
||
--fs-big: 26px;
|
||
}
|
||
}
|
||
:root {
|
||
--leading-tight: 1.05;
|
||
--leading-normal: 1.3;
|
||
--leading-title: 1.2;
|
||
--fw-normal: 400;
|
||
--fw-medium: 500;
|
||
--fw-bold: 600;
|
||
--grey-100: #d8d8d8;
|
||
--grey-200: #c8c8c8;
|
||
--grey-300: #b9b9b9;
|
||
--grey-400: #969696;
|
||
--grey-600: #6d6d6d;
|
||
--grey-800: #383838;
|
||
--grey-950: #222222;
|
||
--color-bg: #161616;
|
||
--color-txt: #ffffff;
|
||
--color-txt-light: var(--grey-400);
|
||
--color-accent: #00ff00;
|
||
--color-accent-50: #e9ffe9;
|
||
--color-accent-100: #d8fdd8;
|
||
--dark: black;
|
||
--color-form: white;
|
||
--border: 1px solid var(--color-txt);
|
||
--border-medium: 1px solid var(--grey-600);
|
||
--border-light: 1px solid #414141;
|
||
--header-h: 80px;
|
||
--header-h-shrinked: 50px;
|
||
--menu-w: 420px;
|
||
--banner-medium: 220px;
|
||
--padding-body: 26px;
|
||
--padding-inner: 14px;
|
||
--radius-small: 4px;
|
||
--radius-btn: 4px;
|
||
--spacing: 30px;
|
||
--h-block: 30px;
|
||
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
--transition-scroll: .5s ease-in-out;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
:root {
|
||
--fs-xsmall: 12px;
|
||
--fs-small: 14px;
|
||
--fs-normal: 18px;
|
||
--fs-text: 18px;
|
||
--fs-medium: 24px;
|
||
--fs-big: 34px;
|
||
--header-h: 60px;
|
||
--padding-body: 16px;
|
||
}
|
||
}
|
||
:root[data-theme=light] {
|
||
--grey-100: #2f2f2f;
|
||
--grey-200: #2f2f2f;
|
||
--grey-300: #4a4a4a;
|
||
--grey-400: #6a6a6a;
|
||
--grey-600: #9a9a9a;
|
||
--grey-800: #cfcfcf;
|
||
--grey-950: #eaeaea;
|
||
--color-bg: #efefef;
|
||
--color-txt: #161616;
|
||
--color-txt-light: var(--grey-400);
|
||
--border-light: 1px solid var(--grey-800);
|
||
--color-accent: #ff00ff;
|
||
--color-accent-50: #ffe9ff;
|
||
--color-accent-100: #fdd8fd;
|
||
--dark: white;
|
||
--color-form: var(--color-bg);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-font-smoothing: antialiased;
|
||
-o-font-smoothing: antialiased;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
a {
|
||
color: currentColor;
|
||
}
|
||
|
||
button {
|
||
background: none;
|
||
outline: none;
|
||
border: none;
|
||
color: var(--color-txt);
|
||
}
|
||
|
||
iframe {
|
||
border: none;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font);
|
||
line-height: var(--leading-normal);
|
||
font-size: var(--fs-normal);
|
||
color: var(--color-txt);
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.link-block {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.swiper-button-next, .swiper-button-prev,
|
||
body, #site-header, #site-footer {
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
body.menu-open,
|
||
body.is-hidden {
|
||
overflow-y: hidden;
|
||
}
|
||
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, body.menu-open .bottom-bar__inner,
|
||
body.is-hidden main,
|
||
body.is-hidden footer,
|
||
body.is-hidden #nav-highlight,
|
||
body.is-hidden .btn--back-to-top,
|
||
body.is-hidden .bottom-bar__inner {
|
||
transition: opacity 0.3s ease-in;
|
||
opacity: 0.1;
|
||
}
|
||
|
||
#site-header {
|
||
z-index: var(--z-header);
|
||
--gap: 3ch;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: var(--header-h);
|
||
background-color: var(--color-bg);
|
||
padding: 0 var(--padding-body);
|
||
box-shadow: -1px 4px 10px 0px var(--color-bg);
|
||
}
|
||
#site-header .site-header__inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: calc(var(--gap) * 0.25);
|
||
}
|
||
#site-header a {
|
||
text-decoration: none;
|
||
}
|
||
#site-header a:hover {
|
||
color: var(--grey-200);
|
||
}
|
||
#site-header #site-title {
|
||
position: relative;
|
||
top: -3px;
|
||
width: 140px;
|
||
}
|
||
#site-header #site-title svg {
|
||
width: 100px;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#site-header #site-title svg {
|
||
width: 80px;
|
||
}
|
||
#site-header #site-title {
|
||
top: -4px;
|
||
}
|
||
}
|
||
#site-header #nav-highlight,
|
||
#site-header #nav-investigation {
|
||
flex-grow: 2;
|
||
}
|
||
#site-header #nav-highlight ul,
|
||
#site-header #nav-investigation ul {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--gap);
|
||
list-style-type: none;
|
||
}
|
||
#site-header #nav-highlight ul li,
|
||
#site-header #nav-investigation ul li {
|
||
white-space: nowrap;
|
||
}
|
||
#site-header #nav-highlight ul {
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
}
|
||
@media screen and (max-width: 1080px) {
|
||
#site-header #nav-highlight ul {
|
||
font-size: var(--fs-small);
|
||
}
|
||
}
|
||
@media screen and (max-width: 890px) {
|
||
#site-header #nav-highlight ul {
|
||
justify-content: flex-end;
|
||
padding-right: 2ch;
|
||
}
|
||
#site-header #nav-highlight ul li {
|
||
display: none;
|
||
}
|
||
#site-header #nav-highlight ul li.support {
|
||
display: block;
|
||
}
|
||
}
|
||
#site-header #nav-investigation {
|
||
position: absolute;
|
||
top: 10%;
|
||
left: 0;
|
||
display: flex;
|
||
opacity: 0;
|
||
transition: top 0.3s ease;
|
||
pointer-events: none;
|
||
min-width: 0;
|
||
}
|
||
#site-header #nav-investigation .title {
|
||
text-transform: uppercase;
|
||
font-size: var(--fs-small);
|
||
font-weight: 500;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding-left: 2ch;
|
||
padding-right: 2ch;
|
||
text-align: center;
|
||
color: var(--color-txt-light);
|
||
}
|
||
@media screen and (max-width: 1080px) {
|
||
#site-header #nav-investigation ul {
|
||
font-size: var(--fs-small);
|
||
padding-left: 6ch;
|
||
padding-right: 6ch;
|
||
}
|
||
}
|
||
#site-header #nav-investigation li {
|
||
color: var(--color-txt-light);
|
||
transition: color 0.3s ease;
|
||
}
|
||
#site-header #nav-investigation li.is-selected {
|
||
color: var(--color-txt);
|
||
}
|
||
#site-header #nav-investigation li.is-selected:hover {
|
||
color: var(--color-txt);
|
||
pointer-events: none;
|
||
}
|
||
#site-header #nav-investigation li.is-selected:hover a:hover {
|
||
color: var(--color-txt);
|
||
}
|
||
#site-header #theme-toggle {
|
||
width: var(--h-block);
|
||
height: var(--h-block);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
#site-header #theme-toggle svg {
|
||
width: 18px;
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
#site-header #lang-toggle {
|
||
display: flex;
|
||
gap: 0.75ch;
|
||
padding-right: 1.5ch;
|
||
}
|
||
#site-header #lang-toggle a {
|
||
font-size: var(--fs-small);
|
||
font-weight: 500;
|
||
}
|
||
#site-header #lang-toggle button:disabled {
|
||
color: var(--color-txt-light);
|
||
}
|
||
#site-header #menu-toggle {
|
||
cursor: pointer;
|
||
}
|
||
#site-header #menu-toggle svg {
|
||
width: 30px;
|
||
fill: var(--color-txt);
|
||
}
|
||
#site-header #menu-toggle .close {
|
||
display: none;
|
||
}
|
||
#site-header button:hover svg {
|
||
fill: var(--grey-200) !important;
|
||
}
|
||
|
||
#site-header.has-nav-investigation #nav-highlight {
|
||
display: none;
|
||
}
|
||
#site-header.has-nav-investigation #nav-investigation {
|
||
position: relative;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
top: 0px;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
#site-header #nav-investigation .title {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#site-header #nav-highlight ul {
|
||
display: none;
|
||
}
|
||
#site-header #nav-investigation .title {
|
||
display: none;
|
||
}
|
||
#site-header.has-nav-investigation #nav-investigation ul {
|
||
display: none;
|
||
}
|
||
#site-header.has-nav-investigation #nav-investigation .title {
|
||
display: block;
|
||
}
|
||
}
|
||
button {
|
||
cursor: pointer;
|
||
font-family: var(--font);
|
||
font-size: var(--fons-normal);
|
||
color: var(--color-txt);
|
||
}
|
||
button svg {
|
||
fill: var(--color-txt);
|
||
}
|
||
button:hover {
|
||
color: var(--grey-100);
|
||
}
|
||
button:hover svg {
|
||
fill: var(--grey-100);
|
||
}
|
||
button a {
|
||
text-decoration: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
button:disabled {
|
||
cursor: auto;
|
||
}
|
||
|
||
.support a {
|
||
color: var(--color-accent);
|
||
}
|
||
.support a:hover {
|
||
color: var(--color-accent) !important;
|
||
text-decoration: underline !important;
|
||
}
|
||
|
||
.btn--small {
|
||
height: calc(var(--h-block) * 1);
|
||
border: var(--border-light);
|
||
border-radius: var(--radius-btn);
|
||
font-size: var(--fs-small);
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
.btn--small a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1ch;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 1ch;
|
||
padding-top: 2px;
|
||
}
|
||
.btn--small .icon {
|
||
--size: 10px;
|
||
height: var(--size);
|
||
width: var(--size);
|
||
position: relative;
|
||
top: -8px;
|
||
}
|
||
.btn--small .icon svg {
|
||
width: 100%;
|
||
fill: var(--color-txt);
|
||
}
|
||
.btn--small.no-link {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1ch;
|
||
padding: 0 1ch;
|
||
padding-top: 2px;
|
||
}
|
||
.btn--small:hover {
|
||
color: currentColor;
|
||
border-color: currentColor;
|
||
background-color: var(--grey-950);
|
||
}
|
||
|
||
.btn--small.is-selected {
|
||
background-color: var(--color-txt);
|
||
border-color: var(--color-txt);
|
||
color: var(--color-bg);
|
||
}
|
||
.btn--small.is-selected a {
|
||
color: var(--color-bg);
|
||
}
|
||
.btn--small.is-selected svg {
|
||
fill: var(--color-bg);
|
||
}
|
||
|
||
.btn--simple {
|
||
height: calc(var(--h-block) * 1);
|
||
font-size: var(--fs-small);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
.btn--simple .icon {
|
||
display: flex;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.btn--simple .icon svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.btn--simple .icon {
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
.btn--simple a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1ch;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 2ch;
|
||
padding-top: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
.btn--simple.no-link {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1ch;
|
||
padding: 0 2ch;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.btn--bold,
|
||
.btn--bold-inline {
|
||
display: block;
|
||
height: calc(var(--h-block) * 1);
|
||
border: var(--border);
|
||
border-radius: var(--radius-btn);
|
||
font-size: var(--fs-small);
|
||
line-height: 1;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
.btn--bold .icon,
|
||
.btn--bold-inline .icon {
|
||
display: flex;
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
.btn--bold .icon svg,
|
||
.btn--bold-inline .icon svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
.btn--bold svg,
|
||
.btn--bold-inline svg {
|
||
position: relative;
|
||
top: -1px;
|
||
}
|
||
.btn--bold a,
|
||
.btn--bold-inline a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1ch;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 1.25ch;
|
||
padding-top: 4px;
|
||
}
|
||
.btn--bold.no-link,
|
||
.btn--bold-inline.no-link {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1ch;
|
||
padding: 0 1.25ch;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.btn--bold {
|
||
background-color: var(--color-txt);
|
||
color: var(--color-bg);
|
||
}
|
||
.btn--bold svg {
|
||
fill: var(--color-bg);
|
||
}
|
||
.btn--bold:hover {
|
||
background-color: var(--color-accent);
|
||
border-color: var(--color-accent);
|
||
}
|
||
.btn--bold:hover a {
|
||
color: var(--color-bg);
|
||
}
|
||
.btn--bold:hover svg {
|
||
fill: var(--color-bg);
|
||
}
|
||
|
||
.btn--bold-inline {
|
||
background-color: var(--color-bg);
|
||
}
|
||
.btn--bold-inline:hover {
|
||
background-color: var(--grey-950);
|
||
color: var(--grey-100);
|
||
border-color: var(--grey-100);
|
||
}
|
||
.btn--bold-inline:hover a {
|
||
background-color: var(--grey-950);
|
||
color: var(--grey-100);
|
||
}
|
||
.btn--bold-inline:hover svg {
|
||
fill: var(--grey-100);
|
||
}
|
||
|
||
.btn--toc svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
top: 0px;
|
||
}
|
||
|
||
@keyframes wiggle-left {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
40% {
|
||
transform: translateX(-10px);
|
||
}
|
||
80% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
#btn--back-to-top {
|
||
width: -moz-fit-content;
|
||
width: fit-content;
|
||
margin-bottom: var(--spacing);
|
||
margin-left: auto;
|
||
margin-right: var(--padding-body);
|
||
}
|
||
#btn--back-to-top a {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1ch;
|
||
}
|
||
#btn--back-to-top .text {
|
||
font-size: var(--fs-small);
|
||
padding-top: 2px;
|
||
}
|
||
#btn--back-to-top .icon {
|
||
flex-shrink: 0;
|
||
--size: 26px;
|
||
border: 1px solid var(--color-txt);
|
||
background-color: var(--color-bg);
|
||
border-radius: 50%;
|
||
width: var(--size);
|
||
height: var(--size);
|
||
transform: rotate(-90deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
#btn--back-to-top .icon svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
#btn--back-to-top:hover {
|
||
opacity: 0.8;
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
#btn--back-to-top {
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
position: fixed;
|
||
bottom: calc(var(--padding-body) * 1.5);
|
||
right: var(--padding-body);
|
||
z-index: var(--z-header);
|
||
margin-right: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
#btn--back-to-top .icon {
|
||
--size: 32px;
|
||
border-width: 2px;
|
||
}
|
||
#btn--back-to-top .icon svg {
|
||
width: 19px;
|
||
height: 19px;
|
||
}
|
||
#btn--back-to-top .text {
|
||
display: none;
|
||
}
|
||
#btn--back-to-top.is-visible {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.btn--support {
|
||
color: var(--color-accent);
|
||
}
|
||
.btn--support:hover {
|
||
color: var(--color-accent);
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
.type {
|
||
height: calc(var(--h-block) * 0.75);
|
||
border-radius: var(--radius-small);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 1ch;
|
||
padding-top: 3px;
|
||
font-size: var(--fs-xsmall);
|
||
line-height: 1;
|
||
font-weight: 500;
|
||
background-color: var(--color-txt);
|
||
color: var(--color-bg);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.category {
|
||
height: calc(var(--h-block) * 0.75);
|
||
border-radius: var(--radius-small);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 1ch;
|
||
padding-top: 3px;
|
||
font-size: var(--fs-xsmall);
|
||
line-height: 1;
|
||
font-weight: 500;
|
||
border: var(--border-medium);
|
||
background-color: var(--color-bg);
|
||
color: var(--color-txt-light);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.page__category {
|
||
height: calc(var(--h-block) * 1);
|
||
border-radius: var(--radius-small);
|
||
border: var(--border-medium);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 1.5ch;
|
||
padding-top: 5px;
|
||
font-size: var(--fs-small);
|
||
background-color: var(--color-bg);
|
||
color: var(--color-txt-light);
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-transform: uppercase;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.page__category {
|
||
height: calc(var(--h-block) * 0.75);
|
||
font-size: var(--fs-xsmall);
|
||
padding: 0 1ch;
|
||
padding-top: 3px;
|
||
}
|
||
}
|
||
|
||
.page__type {
|
||
height: calc(var(--h-block) * 1);
|
||
border-radius: var(--radius-small);
|
||
margin-left: calc(var(--padding-inner) * 0.25);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 1.5ch;
|
||
padding-top: 5px;
|
||
font-size: var(--fs-small);
|
||
background-color: var(--color-txt);
|
||
color: var(--color-bg);
|
||
font-weight: 500;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-transform: uppercase;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.page__type {
|
||
height: calc(var(--h-block) * 0.75);
|
||
font-size: var(--fs-xsmall);
|
||
padding: 0 1ch;
|
||
padding-top: 3px;
|
||
}
|
||
}
|
||
|
||
.keywords {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75ch;
|
||
}
|
||
.keywords a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: calc(var(--h-block) * 1);
|
||
padding: 0 1ch;
|
||
padding-top: 2px;
|
||
border: var(--border-light);
|
||
border-radius: var(--radius-btn);
|
||
font-size: var(--fs-small);
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
text-decoration: none;
|
||
}
|
||
.keywords a::before {
|
||
content: "#";
|
||
padding-right: 0.25ch;
|
||
}
|
||
.keywords a:hover {
|
||
border-color: currentColor;
|
||
background-color: var(--grey-800);
|
||
}
|
||
|
||
.keywords--small {
|
||
list-style: none;
|
||
}
|
||
.keywords--small li {
|
||
display: inline;
|
||
}
|
||
.keywords--small a {
|
||
text-decoration: none;
|
||
}
|
||
.keywords--small a::before {
|
||
content: "#";
|
||
padding-right: 0.25ch;
|
||
}
|
||
.keywords--small a::after {
|
||
content: " ";
|
||
}
|
||
|
||
button.sort .arrow {
|
||
line-height: 0;
|
||
--size: 12px;
|
||
height: var(--size);
|
||
width: var(--size);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
top: -2px;
|
||
transform: rotate(90deg);
|
||
transition: transform 0.2s ease-in;
|
||
}
|
||
button.sort .arrow svg {
|
||
width: 100%;
|
||
fill: var(--color-txt);
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
button.sort {
|
||
font-size: var(--fs-xsmall);
|
||
}
|
||
}
|
||
button.sort[data-sort-type=up] .arrow {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.page__sort {
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
display: flex;
|
||
justify-content: right;
|
||
grid-gap: var(--padding-inner);
|
||
width: 100%;
|
||
max-width: var(--max-w-cards);
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.btn--group__mobile {
|
||
z-index: calc(var(--z-header) - 10);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease-in;
|
||
}
|
||
.btn--group__mobile.is-visible {
|
||
opacity: 1;
|
||
}
|
||
.btn--group__mobile {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: calc(var(--h-block) * 3);
|
||
padding: calc(var(--spacing) * 0.75) var(--padding-body);
|
||
background-color: var(--color-bg);
|
||
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 75%, transparent 100%);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: var(--padding-inner);
|
||
}
|
||
.btn--group__mobile button, .btn--group__mobile .dropdown {
|
||
flex-grow: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
.btn--group__mobile {
|
||
display: none;
|
||
opacity: 0 !important;
|
||
}
|
||
}
|
||
#investigation__hero {
|
||
width: 100%;
|
||
max-width: var(--max-w-cards);
|
||
margin-inline: auto;
|
||
}
|
||
#investigation__hero figcaption {
|
||
color: var(--color-txt-light);
|
||
font-size: var(--fs-small);
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
#investigation__hero figcaption {
|
||
font-size: var(--fs-xsmall);
|
||
}
|
||
}
|
||
#investigation__hero figcaption {
|
||
padding: calc(var(--spacing) * 0.5) var(--padding-body);
|
||
padding-bottom: 0;
|
||
text-align: center;
|
||
max-width: var(--max-w-content);
|
||
margin-inline: auto;
|
||
}
|
||
#investigation__hero figure {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
#investigation__hero figure img {
|
||
width: 100%;
|
||
aspect-ratio: 2/1;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
}
|
||
#investigation__hero .player-container {
|
||
width: 100%;
|
||
position: relative;
|
||
aspect-ratio: 2/1;
|
||
}
|
||
#investigation__hero .player-container .extract, #investigation__hero .player-container video {
|
||
width: 100%;
|
||
height: 100%;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
position: relative;
|
||
}
|
||
#investigation__hero .player-container .video-full {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#investigation__hero .player-container .video-full iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#investigation__hero .player-container .video-full {
|
||
display: none;
|
||
}
|
||
#investigation__hero .player-container #hero-play-video {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
text-transform: uppercase;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
#investigation__hero .player-container #hero-play-video .btn--bold {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1ch;
|
||
padding: 0 1ch;
|
||
opacity: 0.8;
|
||
}
|
||
#investigation__hero .player-container #hero-play-video .btn--bold:hover {
|
||
opacity: 1;
|
||
}
|
||
#investigation__hero .player-container #hero-play-video .text {
|
||
color: black;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
padding-top: 4px;
|
||
}
|
||
#investigation__hero .player-container #hero-play-video svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
fill: black;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.form__newsletter {
|
||
--size: 24px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.form__newsletter input[type=email] {
|
||
height: calc(var(--h-block) * 1.25);
|
||
width: 100%;
|
||
border-radius: calc(var(--h-block) * 0.625);
|
||
outline: none;
|
||
border: 1px solid var(--color-txt);
|
||
padding: 0 2ch;
|
||
font-family: var(--font);
|
||
font-size: var(--fs-small);
|
||
z-index: 40;
|
||
padding-top: 4px;
|
||
background: var(--color-bg);
|
||
color: var(--color-txt);
|
||
}
|
||
.form__newsletter input[type=email]::-moz-placeholder {
|
||
font-family: var(--font);
|
||
font-size: var(--fs-small);
|
||
color: var(--color-txt);
|
||
}
|
||
.form__newsletter input[type=email]::placeholder {
|
||
font-family: var(--font);
|
||
font-size: var(--fs-small);
|
||
color: var(--color-txt);
|
||
}
|
||
.form__newsletter input[type=email]:focus {
|
||
border: 1px solid var(--color-accent);
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter {
|
||
position: absolute;
|
||
right: 4px;
|
||
z-index: 100;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter {
|
||
--size: calc(var(--h-block)*1.25 - 8px);
|
||
font-family: var(--font);
|
||
font-size: var(--fs-small);
|
||
height: var(--size);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75ch;
|
||
color: var(--color-accent);
|
||
font-weight: var(--fw-medium);
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter .icon, .form__newsletter button[type=submit].btn--newletter .txt {
|
||
z-index: 10;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter .icon {
|
||
width: var(--size);
|
||
height: var(--size);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--color-bg);
|
||
text-align: center;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter .icon svg {
|
||
fill: var(--color-bg);
|
||
width: 80%;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter .txt {
|
||
position: relative;
|
||
top: 2px;
|
||
font-size: var(--fs-small);
|
||
display: none;
|
||
padding-left: 1ch;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter::after {
|
||
content: "";
|
||
display: block;
|
||
background-color: var(--color-accent);
|
||
border-radius: calc(var(--size) / 2);
|
||
width: var(--size);
|
||
height: var(--size);
|
||
position: absolute;
|
||
right: 0;
|
||
z-index: 0;
|
||
transition: width 0.2s;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter:hover .txt {
|
||
color: var(--color-bg);
|
||
display: block;
|
||
}
|
||
.form__newsletter button[type=submit].btn--newletter:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.search-form {
|
||
--icon: 40px;
|
||
display: grid;
|
||
grid-template-columns: var(--icon) 1fr;
|
||
}
|
||
.search-form input {
|
||
grid-column: 1/3;
|
||
grid-row: 1;
|
||
height: calc(var(--h-block) * 1.5);
|
||
width: 100%;
|
||
background: var(--color-bg);
|
||
border: 1px solid var(--color-txt);
|
||
padding-left: var(--icon);
|
||
font-family: var(--font);
|
||
font-size: var(--fs-normal);
|
||
color: var(--color-txt);
|
||
padding-top: 3px;
|
||
}
|
||
.search-form input::-moz-placeholder {
|
||
font-family: var(--font);
|
||
font-size: var(--fs-normal);
|
||
color: var(--color-txt);
|
||
}
|
||
.search-form input::placeholder {
|
||
font-family: var(--font);
|
||
font-size: var(--fs-normal);
|
||
color: var(--color-txt);
|
||
}
|
||
.search-form input:focus {
|
||
border-color: var(--color-accent);
|
||
outline: none;
|
||
}
|
||
.search-form .icon {
|
||
grid-column: 1;
|
||
grid-row: 1;
|
||
z-index: 10;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.search-form .icon svg {
|
||
width: 20px;
|
||
}
|
||
|
||
.list-socials {
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
max-width: 350px;
|
||
}
|
||
.list-socials a {
|
||
display: flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
}
|
||
.list-socials li {
|
||
--size-icon: 20px;
|
||
}
|
||
.list-socials li[data-socials=youtube] {
|
||
--size-icon: 26px;
|
||
}
|
||
.list-socials .icon {
|
||
width: var(--size-icon);
|
||
height: var(--size-icon);
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
.list-socials svg {
|
||
display: flex;
|
||
align-items: center;
|
||
width: var(--size-icon);
|
||
height: var(--size-icon);
|
||
fill: var(--color-txt);
|
||
}
|
||
.list-socials a:hover svg {
|
||
fill: var(--color-txt-light);
|
||
}
|
||
|
||
.modal--share {
|
||
width: 240px;
|
||
padding-bottom: var(--padding-inner);
|
||
background-color: var(--color-bg);
|
||
}
|
||
.modal--share .title {
|
||
font-size: var(--fs-small);
|
||
line-height: 1.2;
|
||
padding: var(--padding-inner);
|
||
padding-bottom: 0px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
font-style: italic;
|
||
}
|
||
.modal--share .title::before {
|
||
content: "« ";
|
||
}
|
||
.modal--share .title::after {
|
||
content: " »";
|
||
}
|
||
.modal--share .socials {
|
||
display: block;
|
||
list-style: none;
|
||
}
|
||
.modal--share .socials li {
|
||
font-size: var(--fs-small);
|
||
border-bottom: var(--border-light);
|
||
}
|
||
.modal--share .socials li:first-of-type {
|
||
border-top: var(--border-light);
|
||
}
|
||
.modal--share .socials li a {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2ch;
|
||
text-decoration: none;
|
||
font-size: var(--fs-small);
|
||
}
|
||
.modal--share .socials li .icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.modal--share .socials li .icon svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.modal--share .socials li .text {
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
.modal--share .copy-link {
|
||
display: flex;
|
||
gap: 0.5ch;
|
||
padding: 0 var(--padding-inner);
|
||
height: var(--h-block);
|
||
width: 100%;
|
||
}
|
||
.modal--share .copy-link .copy-link__field {
|
||
flex-grow: 1;
|
||
display: grid;
|
||
grid-template-columns: var(--h-block) 1fr;
|
||
}
|
||
.modal--share .copy-link .icon {
|
||
display: flex;
|
||
width: var(--h-block);
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
grid-row: 1;
|
||
grid-column: 1;
|
||
}
|
||
.modal--share .copy-link .icon svg {
|
||
width: 12px;
|
||
}
|
||
.modal--share .copy-link input {
|
||
font-size: var(--fs-xsmall);
|
||
font-family: var(--font);
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-txt);
|
||
padding-top: 2px;
|
||
grid-column: 1/end;
|
||
grid-row: 1;
|
||
padding-left: var(--h-block);
|
||
padding-right: 0.5ch;
|
||
border: var(--border-light);
|
||
border-radius: var(--radius-btn);
|
||
height: var(--h-block);
|
||
}
|
||
.modal--share .copy-link input:focus {
|
||
border-color: var(--color-txt);
|
||
outline: none;
|
||
}
|
||
.modal--share .copy-link input.is-copied {
|
||
color: var(--color-accent) !important;
|
||
}
|
||
.modal--share .copy-link .copy-link__btn {
|
||
background-color: var(--color-txt);
|
||
color: var(--color-bg);
|
||
border-radius: var(--radius-btn);
|
||
padding: 0 1ch;
|
||
font-size: var(--fs-xsmall);
|
||
padding-top: 2px;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
width: 8ch !important;
|
||
}
|
||
.modal--share .copy-link .copy-link__btn::after {
|
||
content: " ";
|
||
}
|
||
.modal--share .copy-link .copy-link__btn:hover {
|
||
background-color: var(--color-accent);
|
||
}
|
||
|
||
#share-banner__content,
|
||
#share-banner__aside,
|
||
#share-banner__desktop {
|
||
display: none;
|
||
}
|
||
|
||
#share-banner__content ~ .modal--share,
|
||
#share-banner__aside ~ .modal--share,
|
||
#share-banner__desktop ~ .modal--share {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease-in;
|
||
}
|
||
|
||
#share-banner__content:checked ~ .modal--share,
|
||
#share-banner__aside:checked ~ .modal--share,
|
||
#share-banner__desktop:checked ~ .modal--share {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.dropdown__trigger {
|
||
cursor: pointer;
|
||
}
|
||
.dropdown__content {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
margin-top: var(--padding-inner);
|
||
background-color: var(--color-bg);
|
||
border: var(--border);
|
||
border-radius: var(--radius-btn);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(-4px);
|
||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||
z-index: calc(var(--z-header) - 100);
|
||
}
|
||
.dropdown__content::before {
|
||
content: "◀";
|
||
transform: rotate(90deg);
|
||
font-size: 14px;
|
||
position: absolute;
|
||
top: -13px;
|
||
left: 16px;
|
||
}
|
||
.dropdown__content ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: var(--padding-inner);
|
||
min-width: 180px;
|
||
}
|
||
.dropdown__content a,
|
||
.dropdown__content button {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 0.75em 1ch;
|
||
font-size: var(--fs-small);
|
||
text-align: left;
|
||
text-decoration: none;
|
||
color: var(--color-txt);
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.dropdown__content a:hover,
|
||
.dropdown__content button:hover {
|
||
background-color: var(--grey-800);
|
||
}
|
||
.dropdown--align-right .dropdown__content {
|
||
left: auto;
|
||
right: 0;
|
||
}
|
||
.dropdown--align-right .dropdown__content::before {
|
||
left: auto;
|
||
right: 16px;
|
||
}
|
||
.dropdown.is-open .dropdown__content {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
.dropdown--position-mobile .dropdown__content {
|
||
background-color: red;
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
.dropdown--position-panel .dropdown__content {
|
||
top: auto;
|
||
bottom: 0;
|
||
left: calc(100% + var(--padding-inner));
|
||
margin-top: 0;
|
||
margin-left: 4px;
|
||
}
|
||
.dropdown--position-panel .dropdown__content::before {
|
||
font-family: Arial;
|
||
content: "◀";
|
||
transform: rotate(0deg);
|
||
font-size: 14px;
|
||
position: absolute;
|
||
top: auto;
|
||
bottom: 4px;
|
||
left: -11px;
|
||
}
|
||
.dropdown--position-panel.is-open .dropdown__content {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
.dropdown .dropdown__content {
|
||
width: calc(100vw - var(--padding-body) * 2);
|
||
left: auto;
|
||
right: 0;
|
||
}
|
||
.dropdown .dropdown__content .modal--share {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
#bottom-bar .dropdown .dropdown__content {
|
||
top: auto;
|
||
bottom: calc(var(--h-block) + var(--padding-inner) * 2);
|
||
left: auto;
|
||
right: 0;
|
||
margin-top: 0;
|
||
margin-left: 4px;
|
||
}
|
||
#bottom-bar .dropdown .dropdown__content::before {
|
||
font-family: Arial;
|
||
content: "◀";
|
||
transform: rotate(-90deg);
|
||
font-size: 14px;
|
||
position: absolute;
|
||
top: auto;
|
||
bottom: -13px;
|
||
left: auto;
|
||
right: 10%;
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
#bottom-bar .dropdown .dropdown__content::before {
|
||
left: 20%;
|
||
right: auto;
|
||
}
|
||
}
|
||
#bottom-bar .dropdown.is-open .dropdown__content {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
[data-template=package] .page__content,
|
||
.main__single .page__content,
|
||
#investigation__content {
|
||
font-size: var(--fs-text);
|
||
}
|
||
[data-template=package] .page__content p, [data-template=package] .page__content li, [data-template=package] .page__content ul,
|
||
.main__single .page__content p,
|
||
.main__single .page__content li,
|
||
.main__single .page__content ul,
|
||
#investigation__content p,
|
||
#investigation__content li,
|
||
#investigation__content ul {
|
||
font-size: var(--fs-text);
|
||
}
|
||
[data-template=package] .page__content h3, [data-template=package] .page__content h4, [data-template=package] .page__content h5,
|
||
.main__single .page__content h3,
|
||
.main__single .page__content h4,
|
||
.main__single .page__content h5,
|
||
#investigation__content h3,
|
||
#investigation__content h4,
|
||
#investigation__content h5 {
|
||
font-weight: 500;
|
||
max-width: var(--max-w-content);
|
||
margin-inline: auto;
|
||
}
|
||
[data-template=package] .page__content h3,
|
||
.main__single .page__content h3,
|
||
#investigation__content h3 {
|
||
margin-top: calc(var(--spacing) * 4);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
font-size: 1.45em;
|
||
text-transform: uppercase;
|
||
}
|
||
[data-template=package] .page__content h4,
|
||
.main__single .page__content h4,
|
||
#investigation__content h4 {
|
||
margin-top: calc(var(--spacing) * 3);
|
||
margin-bottom: calc(var(--spacing) * 1.5);
|
||
font-size: 1.2em;
|
||
text-transform: uppercase;
|
||
}
|
||
[data-template=package] .page__content h5,
|
||
.main__single .page__content h5,
|
||
#investigation__content h5 {
|
||
margin-top: calc(var(--spacing) * 1.5);
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
font-size: 1.2em;
|
||
-webkit-text-decoration: 1px underline var(--grey-600);
|
||
text-decoration: 1px underline var(--grey-600);
|
||
text-underline-offset: 5px;
|
||
}
|
||
[data-template=package] .page__content p,
|
||
.main__single .page__content p,
|
||
#investigation__content p {
|
||
margin: calc(var(--spacing) * 0.75) 0;
|
||
}
|
||
[data-template=package] .page__content ul,
|
||
.main__single .page__content ul,
|
||
#investigation__content ul {
|
||
padding-left: 3ch;
|
||
}
|
||
[data-template=package] .page__content ul li,
|
||
.main__single .page__content ul li,
|
||
#investigation__content ul li {
|
||
margin: calc(var(--spacing) * 0.5) 0;
|
||
}
|
||
[data-template=package] .page__content figcaption, [data-template=package] .page__content .caption,
|
||
.main__single .page__content figcaption,
|
||
.main__single .page__content .caption,
|
||
#investigation__content figcaption,
|
||
#investigation__content .caption {
|
||
font-size: var(--fs-small);
|
||
color: var(--color-txt-light);
|
||
font-weight: 500;
|
||
line-height: 1.1;
|
||
margin: calc(var(--spacing) * 0.5) 0 !important;
|
||
}
|
||
[data-template=package] .page__content video, [data-template=package] .page__content figure, [data-template=package] .page__content img, [data-template=package] .page__content picture,
|
||
.main__single .page__content video,
|
||
.main__single .page__content figure,
|
||
.main__single .page__content img,
|
||
.main__single .page__content picture,
|
||
#investigation__content video,
|
||
#investigation__content figure,
|
||
#investigation__content img,
|
||
#investigation__content picture {
|
||
width: 100%;
|
||
}
|
||
[data-template=package] .page__content .insert,
|
||
.main__single .page__content .insert,
|
||
#investigation__content .insert {
|
||
max-width: var(--max-w-cards);
|
||
margin-inline: auto;
|
||
border: 1px solid var(--grey-600);
|
||
padding: calc(var(--padding-inner) * 3);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
[data-template=package] .page__content .insert,
|
||
.main__single .page__content .insert,
|
||
#investigation__content .insert {
|
||
padding: calc(var(--padding-inner) * 1);
|
||
}
|
||
}
|
||
[data-template=package] .page__content .insert,
|
||
.main__single .page__content .insert,
|
||
#investigation__content .insert {
|
||
background-color: var(--grey-800);
|
||
}
|
||
[data-template=package] .page__content .insert .insert--inner,
|
||
.main__single .page__content .insert .insert--inner,
|
||
#investigation__content .insert .insert--inner {
|
||
max-width: var(--max-w-content);
|
||
margin-inline: auto;
|
||
}
|
||
[data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5,
|
||
.main__single .page__content .insert h3,
|
||
.main__single .page__content .insert h4,
|
||
.main__single .page__content .insert h5,
|
||
#investigation__content .insert h3,
|
||
#investigation__content .insert h4,
|
||
#investigation__content .insert h5 {
|
||
margin-top: 0;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
[data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5,
|
||
.main__single .page__content .insert h3,
|
||
.main__single .page__content .insert h4,
|
||
.main__single .page__content .insert h5,
|
||
#investigation__content .insert h3,
|
||
#investigation__content .insert h4,
|
||
#investigation__content .insert h5 {
|
||
margin-top: calc(var(--spacing) * 0.5);
|
||
margin-bottom: calc(var(--spacing) * 0.75);
|
||
}
|
||
}
|
||
[data-template=package] .page__content > .insert, [data-template=package] .page__content > .swiper, [data-template=package] .page__content > .slider-before-after, [data-template=package] .page__content > figure,
|
||
.main__single .page__content > .insert,
|
||
.main__single .page__content > .swiper,
|
||
.main__single .page__content > .slider-before-after,
|
||
.main__single .page__content > figure,
|
||
#investigation__content > .insert,
|
||
#investigation__content > .swiper,
|
||
#investigation__content > .slider-before-after,
|
||
#investigation__content > figure {
|
||
margin-top: calc(var(--spacing) * 2);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
}
|
||
[data-template=package] .page__content > .insert + .caption, [data-template=package] .page__content > .swiper + .caption, [data-template=package] .page__content > .slider-before-after + .caption, [data-template=package] .page__content > figure + .caption,
|
||
.main__single .page__content > .insert + .caption,
|
||
.main__single .page__content > .swiper + .caption,
|
||
.main__single .page__content > .slider-before-after + .caption,
|
||
.main__single .page__content > figure + .caption,
|
||
#investigation__content > .insert + .caption,
|
||
#investigation__content > .swiper + .caption,
|
||
#investigation__content > .slider-before-after + .caption,
|
||
#investigation__content > figure + .caption {
|
||
margin-top: calc(var(--spacing) * -1.5) !important;
|
||
}
|
||
|
||
.card--article {
|
||
border: var(--border-light);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: var(--padding-inner);
|
||
}
|
||
.card--article > figure {
|
||
aspect-ratio: 16/9;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.card--article > figure img, .card--article > figure picture {
|
||
width: 100%;
|
||
height: 100%;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||
}
|
||
.card--article .pin {
|
||
z-index: 90;
|
||
width: 18px;
|
||
height: 18px;
|
||
transform: rotate(45deg);
|
||
transform-origin: center;
|
||
}
|
||
.card--article .pin svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
fill: var(--color-txt);
|
||
}
|
||
.card--article > figure,
|
||
.card--article .video-extract {
|
||
width: calc(100% + var(--padding-inner) * 2);
|
||
position: relative;
|
||
left: calc(var(--padding-inner) * -1);
|
||
top: calc(var(--padding-inner) * -1);
|
||
}
|
||
.card--article .video-extract video {
|
||
width: 100%;
|
||
width: 100%;
|
||
aspect-ratio: 16/9;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
position: relative;
|
||
}
|
||
.card--article .content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.card--article .pin {
|
||
position: absolute;
|
||
top: var(--padding-inner);
|
||
right: var(--padding-inner);
|
||
}
|
||
.card--article .time-alone {
|
||
display: none;
|
||
margin-top: calc(var(--spacing) * 0.25);
|
||
margin-bottom: calc(var(--spacing) * 0.75);
|
||
}
|
||
.card--article .title {
|
||
margin-top: calc(var(--spacing) * 0.75);
|
||
font-size: var(--fs-normal);
|
||
line-height: var(--leading-title);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
}
|
||
.card--article .title a {
|
||
text-decoration: none;
|
||
}
|
||
.card--article .description {
|
||
margin-top: calc(var(--spacing) * 1.25);
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
font-size: var(--fs-small);
|
||
}
|
||
.card--article .dl {
|
||
margin-top: calc(var(--spacing) * 0.75);
|
||
font-size: var(--fs-small);
|
||
flex-grow: 2;
|
||
}
|
||
.card--article .dl .dl__group {
|
||
display: grid;
|
||
grid-gap: var(--padding-inner);
|
||
grid-template-columns: 2fr 3fr;
|
||
position: relative;
|
||
border-top: var(--border-light);
|
||
padding: calc(var(--spacing) * 0.5) 0;
|
||
}
|
||
.card--article .dl .dl__group:last-of-type {
|
||
border-bottom: var(--border-light);
|
||
}
|
||
.card--article .dl dt {
|
||
color: var(--color-txt-light);
|
||
padding-right: 1ch;
|
||
}
|
||
.card--article .dl ul {
|
||
list-style: none;
|
||
}
|
||
.card--article .dl ul li {
|
||
padding-bottom: 0.2em;
|
||
}
|
||
.card--article:hover {
|
||
border-color: var(--color-txt);
|
||
background-color: var(--grey-950);
|
||
}
|
||
.card--article .keywords-wrapper {
|
||
padding-top: calc(var(--spacing) * 0.75);
|
||
z-index: 100;
|
||
}
|
||
.card--article .keywords-wrapper .keywords li a {
|
||
font-size: var(--fs-xsmall);
|
||
}
|
||
|
||
[data-template=home] .pinned-home {
|
||
grid-column: span 2;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
padding: calc(var(--padding-inner) * 2);
|
||
}
|
||
[data-template=home] .pinned-home figure,
|
||
[data-template=home] .pinned-home picture,
|
||
[data-template=home] .pinned-home .video-extract {
|
||
grid-column: span 2;
|
||
display: flex;
|
||
width: calc(100% + var(--padding-inner) * 4);
|
||
position: relative;
|
||
left: calc(var(--padding-inner) * -2);
|
||
top: calc(var(--padding-inner) * -2);
|
||
}
|
||
[data-template=home] .pinned-home .title {
|
||
grid-column: span 2;
|
||
font-size: var(--fs-text);
|
||
padding-right: 3ch;
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
margin-top: calc(var(--spacing) * 0.5);
|
||
}
|
||
[data-template=home] .pinned-home .description {
|
||
grid-column: 1;
|
||
grid-row: 3;
|
||
padding-right: 3ch;
|
||
display: block;
|
||
-webkit-line-clamp: unset;
|
||
-webkit-box-orient: unset;
|
||
overflow: visible;
|
||
font-size: var(--fs-normal);
|
||
margin-top: 0px;
|
||
}
|
||
[data-template=home] .pinned-home dl {
|
||
margin-top: 0px;
|
||
grid-column: 2;
|
||
grid-row: 3;
|
||
}
|
||
[data-template=home] .pinned-home .keywords-wrapper {
|
||
grid-column: span 2;
|
||
grid-row: 4;
|
||
}
|
||
|
||
.card--package,
|
||
.card--article-small {
|
||
display: grid;
|
||
grid-gap: var(--padding-inner);
|
||
grid-template-columns: 2fr 3fr;
|
||
position: relative;
|
||
margin-bottom: calc(var(--spacing) * 0.75);
|
||
border: var(--border-light);
|
||
}
|
||
.card--package:first-of-type,
|
||
.card--article-small:first-of-type {
|
||
border-top: var(--border-light);
|
||
}
|
||
.card--package > figure,
|
||
.card--article-small > figure {
|
||
aspect-ratio: 16/9;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.card--package > figure img, .card--package > figure picture,
|
||
.card--article-small > figure img,
|
||
.card--article-small > figure picture {
|
||
width: 100%;
|
||
height: 100%;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||
}
|
||
.card--package .type,
|
||
.card--article-small .type {
|
||
margin-bottom: calc(var(--spacing) * 0.75);
|
||
}
|
||
.card--package .content,
|
||
.card--article-small .content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
padding-top: calc(var(--padding-inner) * 2);
|
||
padding-bottom: calc(var(--padding-inner) * 2);
|
||
padding-left: calc(var(--padding-inner) * 1.5);
|
||
padding-right: calc(var(--padding-inner) * 3);
|
||
}
|
||
.card--package .title,
|
||
.card--article-small .title {
|
||
font-weight: 500;
|
||
font-size: var(--fs-normal);
|
||
margin-bottom: 0.25em;
|
||
text-wrap: balance;
|
||
max-width: 42ch;
|
||
text-transform: uppercase;
|
||
line-height: var(--leading-title);
|
||
flex-grow: 2;
|
||
}
|
||
.card--package .title a,
|
||
.card--article-small .title a {
|
||
text-decoration: none;
|
||
}
|
||
.card--package .date,
|
||
.card--package .details,
|
||
.card--article-small .date,
|
||
.card--article-small .details {
|
||
color: var(--color-txt-light);
|
||
font-size: var(--fs-small);
|
||
}
|
||
.card--package .details,
|
||
.card--article-small .details {
|
||
list-style: none;
|
||
}
|
||
.card--package .details li,
|
||
.card--article-small .details li {
|
||
display: inline;
|
||
}
|
||
.card--package .details li:not(:last-of-type)::after,
|
||
.card--article-small .details li:not(:last-of-type)::after {
|
||
content: "|";
|
||
padding-left: 1ch;
|
||
padding-right: 0.5ch;
|
||
}
|
||
.card--package .description,
|
||
.card--article-small .description {
|
||
font-size: var(--fs-small);
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
.card--package,
|
||
.card--article-small {
|
||
position: relative;
|
||
}
|
||
.card--package .btn--go-to,
|
||
.card--article-small .btn--go-to {
|
||
position: absolute;
|
||
right: var(--padding-inner);
|
||
bottom: calc(var(--padding-inner) - 3px);
|
||
}
|
||
.card--package .btn--go-to svg,
|
||
.card--article-small .btn--go-to svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
fill: var(--color-txt);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.card--package .btn--go-to svg,
|
||
.card--article-small .btn--go-to svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
.card--package .btn--go-to,
|
||
.card--article-small .btn--go-to {
|
||
right: calc(var(--padding-inner) * 0.5);
|
||
bottom: calc(var(--padding-inner) * 0.25);
|
||
}
|
||
.card--package .btn--go-to svg,
|
||
.card--article-small .btn--go-to svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
.card--package:hover .btn--go-to,
|
||
.card--article-small:hover .btn--go-to {
|
||
animation: wiggle-left 0.8s ease-in-out;
|
||
}
|
||
.card--package,
|
||
.card--article-small {
|
||
border-bottom: var(--border-light);
|
||
}
|
||
.card--package:first-of-type,
|
||
.card--article-small:first-of-type {
|
||
border-top: var(--border-light);
|
||
}
|
||
.card--package,
|
||
.card--article-small {
|
||
position: relative;
|
||
}
|
||
.card--package::before,
|
||
.card--article-small::before {
|
||
content: "";
|
||
width: 100%;
|
||
border-top: 1px solid transparent;
|
||
position: absolute;
|
||
top: -1px;
|
||
left: 0;
|
||
}
|
||
.card--package:hover,
|
||
.card--article-small:hover {
|
||
background-color: var(--grey-950);
|
||
border-color: var(--color-txt);
|
||
}
|
||
.card--package:hover::before,
|
||
.card--article-small:hover::before {
|
||
border-color: var(--color-txt);
|
||
}
|
||
@media screen and (max-width: 1080px) {
|
||
.card--package .title,
|
||
.card--article-small .title {
|
||
font-size: var(--fs-normal);
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.card--package,
|
||
.card--article-small {
|
||
row-gap: 0;
|
||
display: block;
|
||
}
|
||
.card--package .content,
|
||
.card--article-small .content {
|
||
padding: calc(var(--spacing) * 0.5) var(--padding-inner);
|
||
}
|
||
.card--package .type,
|
||
.card--article-small .type {
|
||
margin-bottom: calc(var(--spacing) * 0.75);
|
||
}
|
||
.card--package .title,
|
||
.card--article-small .title {
|
||
margin-bottom: calc(var(--spacing) * 0.25);
|
||
}
|
||
.card--package .details,
|
||
.card--package .date,
|
||
.card--article-small .details,
|
||
.card--article-small .date {
|
||
margin-top: calc(var(--spacing) * 0.5);
|
||
}
|
||
.card--package .btn--go-to,
|
||
.card--article-small .btn--go-to {
|
||
bottom: calc(var(--padding-inner) * 0.75);
|
||
right: calc(var(--padding-inner) * 0.75);
|
||
}
|
||
}
|
||
|
||
.card--block {
|
||
container-type: inline-size;
|
||
container-name: impact;
|
||
border: var(--border-light);
|
||
margin-bottom: calc(var(--padding-body) * 1);
|
||
padding: var(--padding-inner);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: start;
|
||
justify-content: start;
|
||
gap: calc(var(--spacing) * 0.25);
|
||
border-bottom: var(--border-light);
|
||
}
|
||
.card--block:first-of-type {
|
||
border-top: var(--border-light);
|
||
}
|
||
.card--block {
|
||
position: relative;
|
||
}
|
||
.card--block::before {
|
||
content: "";
|
||
width: 100%;
|
||
border-top: 1px solid transparent;
|
||
position: absolute;
|
||
top: -1px;
|
||
left: 0;
|
||
}
|
||
.card--block:hover {
|
||
background-color: var(--grey-950);
|
||
border-color: var(--color-txt);
|
||
}
|
||
.card--block:hover::before {
|
||
border-color: var(--color-txt);
|
||
}
|
||
.card--block > figure {
|
||
aspect-ratio: 16/9;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.card--block > figure img, .card--block > figure picture {
|
||
width: 100%;
|
||
height: 100%;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||
}
|
||
.card--block .pin {
|
||
z-index: 90;
|
||
width: 18px;
|
||
height: 18px;
|
||
transform: rotate(45deg);
|
||
transform-origin: center;
|
||
}
|
||
.card--block .pin svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
fill: var(--color-txt);
|
||
}
|
||
.card--block .group-top {
|
||
display: flex;
|
||
gap: calc(var(--padding-inner) * 0.5);
|
||
}
|
||
.card--block .type {
|
||
height: calc(var(--h-block) * 0.75);
|
||
border-radius: var(--radius-small);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 1ch;
|
||
padding-top: 3px;
|
||
font-size: var(--fs-xsmall);
|
||
line-height: 1;
|
||
font-weight: 500;
|
||
color: var(--color-txt-light);
|
||
border: 1px solid var(--color-txt-light);
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
.card--block .title {
|
||
font-size: var(--fs-normal);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
line-height: var(--leading-title);
|
||
padding-top: calc(var(--spacing) * 0.75);
|
||
padding-bottom: calc(var(--spacing) * 1);
|
||
margin-right: 2ch;
|
||
}
|
||
.card--block .date {
|
||
font-size: var(--fs-small);
|
||
}
|
||
.card--block .investigations {
|
||
text-decoration: none;
|
||
list-style: none;
|
||
padding-top: calc(var(--spacing) * 0.5);
|
||
width: 100%;
|
||
z-index: 100;
|
||
}
|
||
.card--block .investigations li {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: var(--color-txt-light);
|
||
font-size: var(--fs-small);
|
||
}
|
||
.card--block .investigations li a {
|
||
text-decoration: none;
|
||
color: var(--color-txt-light);
|
||
}
|
||
.card--block .investigations li a::before {
|
||
content: "↪ ";
|
||
}
|
||
.card--block .investigations li:hover a {
|
||
-webkit-text-decoration: underline 1px;
|
||
text-decoration: underline 1px;
|
||
text-underline-offset: 2px;
|
||
color: var(--color-txt);
|
||
}
|
||
.card--block .card--open-graph {
|
||
width: 100%;
|
||
margin: calc(var(--spacing) * 0.5) 0;
|
||
}
|
||
.card--block .pin {
|
||
position: absolute;
|
||
top: var(--padding-inner);
|
||
right: var(--padding-inner);
|
||
}
|
||
.card--block > figure {
|
||
width: calc(100% + var(--padding-inner) * 2);
|
||
position: relative;
|
||
left: calc(var(--padding-inner) * -1);
|
||
top: calc(var(--padding-inner) * -1);
|
||
}
|
||
.card--block .tag {
|
||
position: relative;
|
||
top: 3px;
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
.card--block,
|
||
.grid-sizer {
|
||
width: calc(50% - 13px);
|
||
}
|
||
}
|
||
.card--block-small {
|
||
border-bottom: var(--border-light);
|
||
padding: var(--padding-inner) 0;
|
||
padding-bottom: calc(var(--spacing) * 0.75);
|
||
}
|
||
.card--block-small:first-of-type {
|
||
border-top: var(--border-light);
|
||
}
|
||
.card--block-small {
|
||
display: grid;
|
||
grid-gap: var(--padding-inner);
|
||
grid-template-columns: 2fr 3fr;
|
||
position: relative;
|
||
border-bottom: var(--border-light);
|
||
}
|
||
.card--block-small:first-of-type {
|
||
border-top: var(--border-light);
|
||
}
|
||
.card--block-small {
|
||
position: relative;
|
||
}
|
||
.card--block-small::before {
|
||
content: "";
|
||
width: 100%;
|
||
border-top: 1px solid transparent;
|
||
position: absolute;
|
||
top: -1px;
|
||
left: 0;
|
||
}
|
||
.card--block-small:hover {
|
||
background-color: var(--grey-950);
|
||
border-color: var(--color-txt);
|
||
}
|
||
.card--block-small:hover::before {
|
||
border-color: var(--color-txt);
|
||
}
|
||
.card--block-small .group-top {
|
||
position: relative;
|
||
}
|
||
.card--block-small {
|
||
position: relative;
|
||
}
|
||
.card--block-small .btn--go-to {
|
||
position: absolute;
|
||
right: var(--padding-inner);
|
||
bottom: calc(var(--padding-inner) - 3px);
|
||
}
|
||
.card--block-small .btn--go-to svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
fill: var(--color-txt);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.card--block-small .btn--go-to svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
.card--block-small .btn--go-to {
|
||
right: calc(var(--padding-inner) * 0.5);
|
||
bottom: calc(var(--padding-inner) * 0.25);
|
||
}
|
||
.card--block-small .btn--go-to svg {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
.card--block-small:hover .btn--go-to {
|
||
animation: wiggle-left 0.8s ease-in-out;
|
||
}
|
||
.card--block-small .btn--go-to {
|
||
top: calc(var(--padding-inner) * 1);
|
||
bottom: auto;
|
||
}
|
||
.card--block-small .title {
|
||
grid-column: 2;
|
||
grid-row: 2;
|
||
font-size: var(--fs-normal);
|
||
line-height: var(--leading-title);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
margin-right: 4ch;
|
||
}
|
||
.card--block-small .date {
|
||
font-size: var(--fs-small);
|
||
grid-column: 2;
|
||
grid-row: 1;
|
||
margin-top: 4px;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.card--block-small {
|
||
display: block;
|
||
padding-bottom: calc(var(--spacing) * 0.5);
|
||
}
|
||
.card--block-small .btn--go-to {
|
||
top: auto;
|
||
bottom: calc(var(--padding-inner) * 1);
|
||
}
|
||
.card--block-small .group-top {
|
||
top: 0px;
|
||
margin-bottom: calc(var(--spacing) * 0.5);
|
||
}
|
||
.card--block-small .title {
|
||
margin-bottom: calc(var(--spacing) * 0.75);
|
||
margin-right: 1ch;
|
||
}
|
||
.card--block-small .date {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
|
||
.card--block-small .card--open-graph {
|
||
grid-column: 2;
|
||
z-index: 10;
|
||
}
|
||
.card--block-small .open-graph__details {
|
||
grid-column: 2;
|
||
}
|
||
.card--block-small .open-graph__details summary,
|
||
.card--block-small .open-graph__details .summary-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
gap: 0.5ch;
|
||
}
|
||
.card--block-small .open-graph__details .arrow-details {
|
||
line-height: 0;
|
||
--size: 11px;
|
||
height: var(--size);
|
||
width: var(--size);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
.card--block-small .open-graph__details .arrow-details svg {
|
||
transition: transform 0.2s ease-in;
|
||
width: 100%;
|
||
fill: var(--color-txt);
|
||
}
|
||
.card--block-small .open-graph__details summary:hover {
|
||
color: var(--color-txt);
|
||
}
|
||
.card--block-small .open-graph__details summary:hover .arrow-details svg {
|
||
fill: var(--color-txt);
|
||
}
|
||
.card--block-small .open-graph__details[open] .arrow-details svg {
|
||
transform: rotate(90deg);
|
||
}
|
||
.card--block-small .open-graph__details summary {
|
||
color: var(--color-txt-light);
|
||
}
|
||
.card--block-small .open-graph__details summary .arrow-details svg {
|
||
fill: var(--color-txt-light);
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
.card--block-small .open-graph__details summary {
|
||
display: grid;
|
||
grid-gap: var(--padding-inner);
|
||
grid-template-columns: 2fr 3fr;
|
||
position: relative;
|
||
grid-row-gap: 0;
|
||
}
|
||
.card--block-small .open-graph__details summary .summary-inner {
|
||
grid-column: 2;
|
||
}
|
||
.card--block-small .open-graph__details {
|
||
grid-column: 1/3;
|
||
}
|
||
}
|
||
|
||
.card--open-graph {
|
||
container-type: inline-size;
|
||
container-name: opengraph;
|
||
z-index: calc(var(--z-header) - 100);
|
||
}
|
||
.card--open-graph .open-graph__inner {
|
||
display: grid;
|
||
grid-gap: var(--padding-inner);
|
||
grid-template-columns: 2fr 3fr;
|
||
position: relative;
|
||
}
|
||
.card--open-graph {
|
||
border: 1px solid var(--grey-600);
|
||
border-radius: var(--radius-small);
|
||
position: relative;
|
||
}
|
||
.card--open-graph figure {
|
||
grid-column: 1;
|
||
grid-row: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.card--open-graph figure img {
|
||
width: 100%;
|
||
height: 100%;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
.card--open-graph figure {
|
||
height: 100%;
|
||
aspect-ratio: auto;
|
||
}
|
||
}
|
||
.card--open-graph .content {
|
||
padding-top: calc(var(--padding-inner) * 0.75);
|
||
padding-bottom: calc(var(--padding-inner) * 0.75);
|
||
padding-right: var(--padding-inner);
|
||
grid-column: 2;
|
||
grid-row: 1;
|
||
}
|
||
.card--open-graph .site-name {
|
||
color: var(--color-txt-light);
|
||
font-size: var(--fs-xsmall);
|
||
margin-bottom: 3px;
|
||
}
|
||
.card--open-graph .title {
|
||
font-size: var(--fs-small);
|
||
font-weight: 500;
|
||
line-height: 1.1;
|
||
padding-top: 2px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
margin-bottom: 0.5em;
|
||
}
|
||
.card--open-graph .title a {
|
||
text-decoration: none;
|
||
}
|
||
.card--open-graph .description {
|
||
font-size: var(--fs-xsmall);
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
.card--open-graph:hover {
|
||
border-color: var(--color-txt);
|
||
background-color: var(--grey-950);
|
||
}
|
||
|
||
@container opengraph (width < 500px) {}
|
||
.swiper {
|
||
width: 100% !important;
|
||
min-width: 0;
|
||
}
|
||
.swiper .swiper-button-prev,
|
||
.swiper .swiper-button-next {
|
||
color: var(--color-txt);
|
||
}
|
||
.swiper .swiper-button-prev svg,
|
||
.swiper .swiper-button-next svg {
|
||
width: 20px;
|
||
}
|
||
.swiper .swiper-pagination {
|
||
position: relative;
|
||
margin-top: 0px !important;
|
||
margin-top: calc(var(--spacing) * 0.5) !important;
|
||
}
|
||
.swiper .swiper-pagination .swiper-pagination-bullet {
|
||
width: 15px;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
background: var(--color-txt-light);
|
||
}
|
||
.swiper .swiper-pagination .swiper-pagination-bullet-active {
|
||
background: var(--color-txt);
|
||
}
|
||
.swiper .swiper-wrapper {
|
||
height: -moz-max-content;
|
||
height: max-content;
|
||
align-items: center;
|
||
}
|
||
.swiper .swiper-slide {
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.slider-before-after {
|
||
width: 100%;
|
||
max-width: 700px;
|
||
z-index: 300;
|
||
display: grid;
|
||
place-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
--position: 50%;
|
||
}
|
||
.slider-before-after img {
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
.slider-before-after .image-container {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
.slider-before-after .slider-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
-o-object-position: left;
|
||
object-position: left;
|
||
}
|
||
.slider-before-after .image-before {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: var(--position);
|
||
}
|
||
.slider-before-after .slider {
|
||
position: absolute;
|
||
inset: 0;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
/* for Firefox */
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.slider-before-after .slider:focus-visible ~ .slider-button {
|
||
outline: 5px solid black;
|
||
outline-offset: 3px;
|
||
}
|
||
.slider-before-after .slider-line {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 0.2rem;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
/* z-index: 10; */
|
||
left: var(--position);
|
||
transform: translateX(-50%);
|
||
pointer-events: none;
|
||
}
|
||
.slider-before-after .slider-button {
|
||
position: absolute;
|
||
background-color: #fff;
|
||
color: black;
|
||
padding: 0.5rem;
|
||
border-radius: 100vw;
|
||
display: grid;
|
||
place-items: center;
|
||
top: 50%;
|
||
left: var(--position);
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
/* z-index: 100; */
|
||
box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
|
||
}
|
||
|
||
#bottom-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: calc(var(--header-h) * -0.75);
|
||
}
|
||
#bottom-bar.is-visible {
|
||
bottom: 0px;
|
||
}
|
||
#bottom-bar {
|
||
z-index: calc(var(--z-header) - 10);
|
||
height: calc(var(--header-h) * 0.75);
|
||
width: 100vw;
|
||
background-color: var(--color-bg);
|
||
padding-left: var(--padding-body);
|
||
padding-right: var(--padding-body);
|
||
transition: bottom var(--transition-scroll);
|
||
}
|
||
#bottom-bar .progress-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 2px;
|
||
width: 100vw;
|
||
background-color: var(--grey-800);
|
||
}
|
||
#bottom-bar .progress-container .progress-bar {
|
||
height: 2px;
|
||
background-color: var(--color-txt);
|
||
width: 40%;
|
||
}
|
||
#bottom-bar .bottom-bar__inner {
|
||
height: calc(var(--header-h) * 0.75);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: var(--padding-inner);
|
||
}
|
||
#bottom-bar .btn--back-to-top .icon {
|
||
display: flex;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
#bottom-bar .btn--back-to-top .icon svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
#bottom-bar .btn--back-to-top {
|
||
position: relative;
|
||
top: -3px;
|
||
width: 100px;
|
||
}
|
||
#bottom-bar .btn--back-to-top a {
|
||
justify-content: flex-end;
|
||
}
|
||
#bottom-bar .btn--back-to-top .icon {
|
||
transform: rotate(-90deg);
|
||
transform-origin: center;
|
||
}
|
||
#bottom-bar .title-group {
|
||
font-size: var(--fs-small);
|
||
display: flex;
|
||
color: var(--color-txt-light);
|
||
flex-grow: 1;
|
||
width: 100%;
|
||
padding-top: 5px;
|
||
min-width: 0;
|
||
}
|
||
#bottom-bar .title-group .title-type {
|
||
text-transform: uppercase;
|
||
}
|
||
#bottom-bar .title-group .title-type::after {
|
||
content: "/";
|
||
padding-left: 1ch;
|
||
padding-right: 1ch;
|
||
}
|
||
#bottom-bar .title-group .title {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#bottom-bar .bottom-bar__inner {
|
||
height: calc(var(--header-h) * 0.75);
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
#bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
#bottom-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
#bottom-bar .title-group {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
#support-bar {
|
||
height: var(--header-h);
|
||
background-color: var(--color-accent);
|
||
color: var(--color-bg);
|
||
padding: 0 var(--padding-body);
|
||
}
|
||
#support-bar .support-bar__container {
|
||
max-width: var(--max-w-cards);
|
||
margin: 0 auto;
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
#support-bar .support-bar__container {
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 2ch;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#support-bar .support-bar__container {
|
||
flex-direction: column;
|
||
font-size: var(--fs-small);
|
||
line-height: 1.1;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
#support-bar .baseline {
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
}
|
||
#support-bar .btn {
|
||
text-transform: uppercase;
|
||
color: var(--color-bg);
|
||
font-weight: 500;
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
word-wrap: nowrap;
|
||
white-space: nowrap;
|
||
}
|
||
#support-bar .btn:hover {
|
||
opacity: 0.7;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#support-bar {
|
||
height: auto;
|
||
padding: calc(var(--spacing) * 0.75) var(--padding-body);
|
||
}
|
||
#support-bar .btn {
|
||
margin-top: calc(var(--spacing) * 0.75);
|
||
}
|
||
}
|
||
|
||
#site-header {
|
||
z-index: var(--z-header);
|
||
--gap: 3ch;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: var(--header-h);
|
||
background-color: var(--color-bg);
|
||
padding: 0 var(--padding-body);
|
||
box-shadow: -1px 4px 10px 0px var(--color-bg);
|
||
}
|
||
#site-header .site-header__inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: calc(var(--gap) * 0.25);
|
||
}
|
||
#site-header a {
|
||
text-decoration: none;
|
||
}
|
||
#site-header a:hover {
|
||
color: var(--grey-200);
|
||
}
|
||
#site-header #site-title {
|
||
position: relative;
|
||
top: -3px;
|
||
width: 140px;
|
||
}
|
||
#site-header #site-title svg {
|
||
width: 100px;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#site-header #site-title svg {
|
||
width: 80px;
|
||
}
|
||
#site-header #site-title {
|
||
top: -4px;
|
||
}
|
||
}
|
||
#site-header #nav-highlight,
|
||
#site-header #nav-investigation {
|
||
flex-grow: 2;
|
||
}
|
||
#site-header #nav-highlight ul,
|
||
#site-header #nav-investigation ul {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--gap);
|
||
list-style-type: none;
|
||
}
|
||
#site-header #nav-highlight ul li,
|
||
#site-header #nav-investigation ul li {
|
||
white-space: nowrap;
|
||
}
|
||
#site-header #nav-highlight ul {
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
}
|
||
@media screen and (max-width: 1080px) {
|
||
#site-header #nav-highlight ul {
|
||
font-size: var(--fs-small);
|
||
}
|
||
}
|
||
@media screen and (max-width: 890px) {
|
||
#site-header #nav-highlight ul {
|
||
justify-content: flex-end;
|
||
padding-right: 2ch;
|
||
}
|
||
#site-header #nav-highlight ul li {
|
||
display: none;
|
||
}
|
||
#site-header #nav-highlight ul li.support {
|
||
display: block;
|
||
}
|
||
}
|
||
#site-header #nav-investigation {
|
||
position: absolute;
|
||
top: 10%;
|
||
left: 0;
|
||
display: flex;
|
||
opacity: 0;
|
||
transition: top 0.3s ease;
|
||
pointer-events: none;
|
||
min-width: 0;
|
||
}
|
||
#site-header #nav-investigation .title {
|
||
text-transform: uppercase;
|
||
font-size: var(--fs-small);
|
||
font-weight: 500;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding-left: 2ch;
|
||
padding-right: 2ch;
|
||
text-align: center;
|
||
color: var(--color-txt-light);
|
||
}
|
||
@media screen and (max-width: 1080px) {
|
||
#site-header #nav-investigation ul {
|
||
font-size: var(--fs-small);
|
||
padding-left: 6ch;
|
||
padding-right: 6ch;
|
||
}
|
||
}
|
||
#site-header #nav-investigation li {
|
||
color: var(--color-txt-light);
|
||
transition: color 0.3s ease;
|
||
}
|
||
#site-header #nav-investigation li.is-selected {
|
||
color: var(--color-txt);
|
||
}
|
||
#site-header #nav-investigation li.is-selected:hover {
|
||
color: var(--color-txt);
|
||
pointer-events: none;
|
||
}
|
||
#site-header #nav-investigation li.is-selected:hover a:hover {
|
||
color: var(--color-txt);
|
||
}
|
||
#site-header #theme-toggle {
|
||
width: var(--h-block);
|
||
height: var(--h-block);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
#site-header #theme-toggle svg {
|
||
width: 18px;
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
#site-header #lang-toggle {
|
||
display: flex;
|
||
gap: 0.75ch;
|
||
padding-right: 1.5ch;
|
||
}
|
||
#site-header #lang-toggle a {
|
||
font-size: var(--fs-small);
|
||
font-weight: 500;
|
||
}
|
||
#site-header #lang-toggle button:disabled {
|
||
color: var(--color-txt-light);
|
||
}
|
||
#site-header #menu-toggle {
|
||
cursor: pointer;
|
||
}
|
||
#site-header #menu-toggle svg {
|
||
width: 30px;
|
||
fill: var(--color-txt);
|
||
}
|
||
#site-header #menu-toggle .close {
|
||
display: none;
|
||
}
|
||
#site-header button:hover svg {
|
||
fill: var(--grey-200) !important;
|
||
}
|
||
|
||
#site-header.has-nav-investigation #nav-highlight {
|
||
display: none;
|
||
}
|
||
#site-header.has-nav-investigation #nav-investigation {
|
||
position: relative;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
top: 0px;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
#site-header #nav-investigation .title {
|
||
display: none;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#site-header #nav-highlight ul {
|
||
display: none;
|
||
}
|
||
#site-header #nav-investigation .title {
|
||
display: none;
|
||
}
|
||
#site-header.has-nav-investigation #nav-investigation ul {
|
||
display: none;
|
||
}
|
||
#site-header.has-nav-investigation #nav-investigation .title {
|
||
display: block;
|
||
}
|
||
}
|
||
#site-menu {
|
||
position: fixed;
|
||
width: var(--menu-w);
|
||
height: calc(100dvh - var(--header-h));
|
||
height: calc(100vh - var(--header-h));
|
||
top: var(--header-h);
|
||
right: calc(var(--menu-w) * -1);
|
||
transition: right 0.3s ease-in;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#site-menu {
|
||
transition: right 0.4s ease-in;
|
||
}
|
||
}
|
||
#site-menu {
|
||
background-color: var(--color-bg);
|
||
border-left: var(--border-light);
|
||
padding: var(--padding-body);
|
||
z-index: calc(var(--z-header) - 1);
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
#site-menu {
|
||
width: 100vw;
|
||
right: -100vw;
|
||
}
|
||
}
|
||
#site-menu {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
#site-menu .search-form {
|
||
margin-top: calc(var(--spacing) * 1);
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
#site-menu nav {
|
||
flex-grow: 1;
|
||
}
|
||
#site-menu nav ul {
|
||
list-style-type: none;
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
}
|
||
#site-menu nav ul li {
|
||
font-size: var(--fs-normal);
|
||
}
|
||
#site-menu nav ul li a {
|
||
display: block;
|
||
text-decoration: none;
|
||
padding: 0.5em 0;
|
||
}
|
||
#site-menu nav ul li a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
#site-menu nav ul .highlight {
|
||
text-transform: uppercase;
|
||
}
|
||
#site-menu .socials {
|
||
padding-bottom: calc(var(--spacing) * 0.75);
|
||
}
|
||
|
||
body.menu-open #site-menu {
|
||
right: 0;
|
||
}
|
||
body.menu-open #menu-toggle .open {
|
||
display: none;
|
||
}
|
||
body.menu-open #menu-toggle .close {
|
||
display: block !important;
|
||
}
|
||
|
||
#site-footer {
|
||
background-color: var(--dark);
|
||
padding: calc(var(--spacing) * 2) var(--padding-body) calc(var(--spacing) * 1) var(--padding-body);
|
||
z-index: 500;
|
||
}
|
||
#site-footer .site-footer__container {
|
||
max-width: var(--max-w-cards);
|
||
margin: 0 auto;
|
||
font-size: var(--fs-small);
|
||
}
|
||
#site-footer .logo {
|
||
margin-bottom: calc(var(--spacing) * 0.5);
|
||
}
|
||
#site-footer .logo svg {
|
||
width: 100px;
|
||
}
|
||
#site-footer .baseline {
|
||
max-width: 40ch;
|
||
}
|
||
#site-footer .list-links ul {
|
||
list-style: none;
|
||
}
|
||
#site-footer .list-links ul li {
|
||
margin-bottom: calc(var(--spacing) * 0.25);
|
||
}
|
||
#site-footer .list-links ul a {
|
||
text-decoration: none;
|
||
}
|
||
#site-footer .list-links ul li:hover a {
|
||
text-decoration: underline;
|
||
}
|
||
#site-footer .list-links .hightlight {
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
#site-footer .site-footer__container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 350px;
|
||
-moz-column-gap: calc(var(--padding-inner) * 2);
|
||
column-gap: calc(var(--padding-inner) * 2);
|
||
}
|
||
#site-footer .site-footer__container .logo {
|
||
grid-column: span 2;
|
||
}
|
||
#site-footer .site-footer__container .baseline {
|
||
grid-column: 1;
|
||
grid-row: 2;
|
||
}
|
||
#site-footer .site-footer__container .list-links {
|
||
grid-column: 2;
|
||
grid-row: 2;
|
||
max-width: 350px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--padding-inner);
|
||
}
|
||
#site-footer .site-footer__container .socials {
|
||
grid-column: 1;
|
||
grid-row: 3;
|
||
}
|
||
#site-footer .site-footer__container .credits {
|
||
font-size: var(--fs-xsmall);
|
||
grid-column: 1;
|
||
grid-row: 4;
|
||
margin-top: calc(var(--spacing) * 2);
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#site-footer .list-links {
|
||
margin-top: calc(var(--spacing) * 1);
|
||
}
|
||
#site-footer .list-links .hightlight {
|
||
margin-top: calc(var(--spacing) * 0.5);
|
||
}
|
||
#site-footer .socials {
|
||
margin-top: calc(var(--spacing) * 1);
|
||
}
|
||
#site-footer .credits {
|
||
margin-top: calc(var(--spacing) * 2);
|
||
}
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
#site-footer .credits {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
body {
|
||
min-height: 100dvh;
|
||
min-height: 100vh;
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
body main {
|
||
flex-grow: 1;
|
||
padding: 0 var(--padding-body);
|
||
padding-top: var(--header-h);
|
||
padding-bottom: calc(var(--spacing) * 6);
|
||
min-height: 100dvh;
|
||
min-height: 100vh;
|
||
}
|
||
body main .page__content {
|
||
max-width: var(--max-w-cards);
|
||
margin-inline: auto;
|
||
}
|
||
body main .page__header {
|
||
max-width: var(--max-w-cards);
|
||
margin-inline: auto;
|
||
}
|
||
|
||
main .page__header {
|
||
margin-top: calc(var(--spacing) * 3);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
main .page__header {
|
||
margin-top: calc(var(--spacing) * 1);
|
||
}
|
||
}
|
||
main .page__header .page__type {
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
main .page__header .page__title {
|
||
max-width: var(--max-w-content);
|
||
text-transform: uppercase;
|
||
font-weight: normal;
|
||
font-size: var(--fs-medium);
|
||
font-weight: 500;
|
||
line-height: var(--leading-title);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
main .page__header .page__title {
|
||
text-wrap: balance;
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
main .page__header .page__title {
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
}
|
||
main .page__header .date {
|
||
display: block;
|
||
margin-top: calc(var(--spacing) * -1.5);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
color: var(--color-txt-light);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
main .page__header .date {
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
margin-top: calc(var(--spacing) * -0.75);
|
||
}
|
||
}
|
||
main .page__header .page__description {
|
||
font-size: var(--fs-text);
|
||
margin-bottom: calc(var(--spacing) * 3);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
main .page__header .page__description {
|
||
margin-bottom: calc(var(--spacing) * 1.5);
|
||
}
|
||
}
|
||
main .page__header .page__description {
|
||
max-width: var(--max-w-content);
|
||
}
|
||
main .page__header ul.details {
|
||
display: flex;
|
||
gap: 3ch;
|
||
list-style: none;
|
||
margin-top: calc(var(--spacing) * -1.5);
|
||
color: var(--color-txt-light);
|
||
}
|
||
main .page__header ul.details a {
|
||
text-decoration: none;
|
||
text-transform: lowercase;
|
||
}
|
||
main .page__header ul.details a::after {
|
||
content: " ↓";
|
||
}
|
||
main .page__header ul.details li:hover {
|
||
color: var(--color-txt);
|
||
}
|
||
|
||
.package__section,
|
||
.page__aside {
|
||
max-width: var(--max-w-cards);
|
||
margin-inline: auto;
|
||
padding-top: calc(var(--spacing) * 4);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.package__section,
|
||
.page__aside {
|
||
padding-top: calc(var(--spacing) * 3);
|
||
}
|
||
}
|
||
.package__section .section__title,
|
||
.package__section .aside__title,
|
||
.page__aside .section__title,
|
||
.page__aside .aside__title {
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
font-size: 1.2em;
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.package__section .section__title,
|
||
.package__section .aside__title,
|
||
.page__aside .section__title,
|
||
.page__aside .aside__title {
|
||
font-size: var(--fs-normal);
|
||
}
|
||
}
|
||
|
||
.container-cards {
|
||
max-width: var(--max-w-cards);
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-gap: calc(var(--spacing) * 1);
|
||
}
|
||
|
||
@media screen and (min-width: 560px) {
|
||
.container-cards__investigations {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||
grid-auto-rows: minmax(100px, auto);
|
||
grid-gap: var(--padding-body);
|
||
margin-bottom: 10vh;
|
||
}
|
||
}
|
||
@media screen and (max-width: 560px) {
|
||
.container-cards__investigations {
|
||
margin-bottom: 10vh;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
.section--home {
|
||
border-bottom: var(--border-light);
|
||
}
|
||
}
|
||
@media screen and (max-width: 1080px) {
|
||
.section--home {
|
||
padding-bottom: calc(var(--spacing) * 4);
|
||
margin-bottom: calc(var(--spacing) * 4);
|
||
}
|
||
.section--home:first-of-type {
|
||
padding-top: calc(var(--spacing) * 2);
|
||
}
|
||
.section--home .col-left {
|
||
margin-bottom: calc(var(--spacing) * 3);
|
||
}
|
||
}
|
||
.section--home .baseline-section {
|
||
max-width: 42ch;
|
||
font-size: var(--fs-medium);
|
||
line-height: 1.1;
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
.section--home .btn--bold-inline {
|
||
text-transform: none;
|
||
font-weight: 500;
|
||
font-size: var(--fs-small);
|
||
}
|
||
.section--home .btn--bold-inline .icon {
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
.section--home .btn--bold-inline svg {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
@media screen and (min-width: 1080px) {
|
||
.section--home .section--inner {
|
||
max-width: 1600px;
|
||
margin-inline: auto;
|
||
margin-bottom: calc(var(--spacing) * 4);
|
||
padding-top: calc(var(--spacing) * 4);
|
||
display: grid;
|
||
grid-template-columns: minmax(360px, 1fr) 2fr;
|
||
grid-gap: calc(var(--padding-body) * 3);
|
||
}
|
||
.section--home .col-left {
|
||
align-self: start;
|
||
position: sticky;
|
||
top: calc(var(--header-h) + var(--spacing) * 4);
|
||
}
|
||
.section--home .col-right {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.section--home#home__investigations .section--inner .section--inner {
|
||
padding-top: calc(var(--spacing) * 1);
|
||
}
|
||
.section--home#home__investigations .section--inner .col-left {
|
||
top: calc(var(--header-h) + var(--spacing) * 1.5);
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.section--home .card--article,
|
||
.section--home .card--block {
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
.section--home .baseline-section {
|
||
font-size: var(--fs-big);
|
||
}
|
||
}
|
||
|
||
#home__investigations .section--inner {
|
||
padding-top: calc(var(--spacing) * 1.5);
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
#home__investigations .col-right {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--padding-body);
|
||
}
|
||
#home__investigations .col-right .see-more {
|
||
grid-column: span 2;
|
||
}
|
||
}
|
||
|
||
.main__single .page__header {
|
||
max-width: var(--max-w-content);
|
||
border-bottom: var(--border-light);
|
||
padding-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
.main__single .page__header .page__description {
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
.main__single .page__header > figure {
|
||
aspect-ratio: 16/9;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.main__single .page__header > figure img, .main__single .page__header > figure picture {
|
||
width: 100%;
|
||
height: 100%;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||
}
|
||
.main__single .page__content {
|
||
max-width: var(--max-w-content);
|
||
margin-top: calc(var(--spacing) * 3);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.main__single .page__content {
|
||
margin-top: calc(var(--spacing) * 1.25);
|
||
}
|
||
}
|
||
|
||
.page__header + #related-investigations {
|
||
padding-top: calc(var(--spacing) * 1);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
.page__header + #related-investigations {
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
|
||
[data-template=investigation] main {
|
||
position: relative;
|
||
}
|
||
[data-template=investigation] main .page__header {
|
||
margin-inline: auto;
|
||
max-width: var(--max-w-content);
|
||
margin-bottom: 0px;
|
||
}
|
||
[data-template=investigation] main .page__header .page__description {
|
||
margin-bottom: 0px;
|
||
}
|
||
[data-template=investigation] main .page__content {
|
||
max-width: 100%;
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
[data-template=investigation] main #investigation__hero {
|
||
padding-top: calc(var(--spacing) * 2.5);
|
||
margin-bottom: calc(var(--spacing) * 3);
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
[data-template=investigation] main #investigation__hero {
|
||
padding-top: calc(var(--spacing) * 1.5);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
}
|
||
}
|
||
[data-template=investigation] main #investigation__dl {
|
||
margin-top: calc(var(--spacing) * 1.5);
|
||
border-bottom: var(--border-light);
|
||
max-width: var(--max-w-content);
|
||
max-width: var(--max-w-cards);
|
||
margin-inline: auto;
|
||
font-size: var(--fs-normal);
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
[data-template=investigation] main #investigation__dl {
|
||
font-size: var(--fs-small);
|
||
}
|
||
}
|
||
[data-template=investigation] main #investigation__dl .dl__group {
|
||
display: grid;
|
||
grid-gap: var(--padding-inner);
|
||
grid-template-columns: 2fr 3fr;
|
||
position: relative;
|
||
-moz-column-gap: 1ch;
|
||
column-gap: 1ch;
|
||
border-top: var(--border-light);
|
||
padding: calc(var(--spacing) * 0.5) 0;
|
||
}
|
||
[data-template=investigation] main #investigation__dl dt {
|
||
color: var(--color-txt-light);
|
||
padding-right: 1ch;
|
||
}
|
||
[data-template=investigation] main #investigation__dl ul:not(.keywords) {
|
||
list-style: none;
|
||
}
|
||
[data-template=investigation] main #investigation__dl ul:not(.keywords) li {
|
||
padding-bottom: 0.2em;
|
||
}
|
||
|
||
#investigation__content {
|
||
padding-top: calc(var(--spacing) * 4);
|
||
}
|
||
#investigation__content .section-title-only {
|
||
margin-bottom: 0;
|
||
}
|
||
#investigation__content .section-txt {
|
||
max-width: var(--max-w-content);
|
||
margin-inline: auto;
|
||
}
|
||
#investigation__content .subsection-txt .insert {
|
||
margin-top: calc(var(--spacing) * 2);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
padding: calc(var(--padding-inner) * 2) calc(var(--padding-inner) * 1.5);
|
||
}
|
||
#investigation__content .subsection-txt {
|
||
max-width: var(--max-w-content);
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
#investigation__content .section-content {
|
||
margin-bottom: calc(var(--spacing) * 4);
|
||
}
|
||
#investigation__content .subsection-w-media {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
gap: var(--padding-body);
|
||
position: relative;
|
||
}
|
||
#investigation__content .subsection-w-media .media {
|
||
margin-inline: auto;
|
||
max-width: var(--max-w-content);
|
||
min-width: 0;
|
||
position: sticky;
|
||
top: calc(var(--header-h) + var(--spacing));
|
||
align-self: start;
|
||
}
|
||
}
|
||
@media screen and (min-width: 768px) and (min-width: 1080px) {
|
||
#investigation__content .subsection-w-media .media {
|
||
padding-left: var(--padding-inner);
|
||
padding-right: var(--padding-inner);
|
||
}
|
||
}
|
||
@media screen and (min-width: 768px) {
|
||
#investigation__content .subsection-txt {
|
||
min-height: calc(100vh - var(--header-h));
|
||
padding-left: var(--padding-inner);
|
||
padding-right: var(--padding-inner);
|
||
padding-bottom: calc(var(--spacing) * 6);
|
||
}
|
||
}
|
||
@media screen and (max-width: 768px) {
|
||
#investigation__content .section-content:not(.section-title-only) {
|
||
padding-bottom: calc(var(--spacing) * 1);
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
border-bottom: var(--border-light);
|
||
}
|
||
#investigation__content .section-title-only {
|
||
margin-bottom: calc(var(--spacing) * 1.5);
|
||
}
|
||
#investigation__content .media {
|
||
margin-bottom: calc(var(--spacing) * 2);
|
||
}
|
||
#investigation__content h3 {
|
||
margin-top: calc(var(--spacing) * 3);
|
||
margin-bottom: calc(var(--spacing) * 1.5);
|
||
font-size: 1.35em;
|
||
}
|
||
#investigation__content h4 {
|
||
margin-top: calc(var(--spacing) * 3);
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
font-size: 1em;
|
||
}
|
||
#investigation__content h4, #investigation__content h5 {
|
||
margin-top: calc(var(--spacing) * 3);
|
||
margin-bottom: calc(var(--spacing) * 1);
|
||
}
|
||
#investigation__content .subsection-txt .insert {
|
||
margin-top: calc(var(--spacing) * 1.5);
|
||
}
|
||
}
|
||
#investigation__content .subsection-w-hscroll {
|
||
position: relative;
|
||
margin-bottom: calc(var(--spacing) * 4);
|
||
}
|
||
#investigation__content .subsection-w-hscroll .horizontal-scroll {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
#investigation__content .subsection-w-hscroll .horizontal-scroll-wrapper {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
will-change: transform;
|
||
}
|
||
#investigation__content .subsection-w-hscroll .horizontal-scroll-slide {
|
||
flex-shrink: 0;
|
||
width: 90vw;
|
||
max-width: 700px;
|
||
padding: 0 calc(var(--spacing) * 1);
|
||
}
|
||
#investigation__content .subsection-w-hscroll .horizontal-scroll-slide figure, #investigation__content .subsection-w-hscroll .horizontal-scroll-slide img {
|
||
width: 100%;
|
||
}
|
||
#investigation__content .subsection-w-hscroll .horizontal-scroll-pagination {
|
||
position: fixed;
|
||
bottom: calc(var(--spacing) * 2);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 8px;
|
||
z-index: 10;
|
||
}
|
||
#investigation__content .insert--inner > :last-child {
|
||
margin-bottom: 0px;
|
||
}
|
||
#investigation__content .insert--inner > :first-child,
|
||
#investigation__content .subsection-txt > :first-child,
|
||
#investigation__content .section-content > :first-child {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.investigation__content:target {
|
||
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
|
||
}
|
||
|
||
.media video {
|
||
width: 100%;
|
||
}
|
||
.media figure {
|
||
height: auto;
|
||
}/*# sourceMappingURL=style.css.map */ |