Initial static HTML project

Migrated from PHP includes to a single index.html with external SCSS/CSS.
Adds timeline section with JS-driven proportional year spacing, video section,
featured-text variants, and two-column layouts. Fonts: Special Gothic (variable TTF)
and Times NR MT Std Medium (OTF).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-05-31 13:28:26 +02:00
commit 2acd9de331
23 changed files with 1122 additions and 0 deletions

View file

@ -0,0 +1,15 @@
@font-face {
font-family: 'Special Gothic';
src: url('../fonts/SpecialGothic-VariableFont_wdth,wght.ttf') format('truetype');
font-weight: 100 900;
font-stretch: 75% 125%;
font-display: swap;
}
@font-face {
font-family: 'Times NR MT Std';
src: url('../fonts/TimesNRMTStd-Medium.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}

View file

@ -0,0 +1,28 @@
button {
cursor: pointer;
}
body {
font-family: 'Special Gothic', sans-serif;
}
figure {
display: block;
}
img,
video {
width: 100%;
height: 100%;
}
h3 {
font-size: 2.25rem;
font-weight: 500;
font-stretch: 75%;
}
p {
font-stretch: 110%;
font-weight: 470;
}

View file

@ -0,0 +1,54 @@
body > header {
position: relative;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--space-body);
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
.logo {
path {
fill: #000 !important;
}
}
button.burger {
display: block;
position: relative;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
.burger__line,
.burger__line::before,
.burger__line::after {
display: block;
width: 100%;
height: 1px;
background-color: #000;
}
.burger__line {
&::before,
&::after {
left: 0;
position: absolute;
content: '';
}
&::before {
top: 1.2rem;
}
&::after {
top: 2.8rem;
}
}
}
}

View file

@ -0,0 +1,33 @@
button {
border: none;
background-color: transparent;
padding: 0;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
figcaption,
ul,
blockquote,
figure {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
img {
width: 100%;
height: auto;
object-fit: contain;
}

View file

@ -0,0 +1,4 @@
:root {
--space-body: 2rem;
--color-yellow: rgba(250, 255, 101, 1);
}

View file

@ -0,0 +1,34 @@
main > section.featured-text {
height: 50vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
h3 {
font-size: 1rem;
font-stretch: 110%;
font-weight: 470;
margin-bottom: 1.5rem;
}
.main {
font-family: 'Times NR MT Std', 'Times New Roman', serif;
font-size: 2.1875rem;
text-align: center;
width: min(60rem, 90vw);
}
&.colored {
background: var(--background);
color: var(--color);
}
figcaption {
font-family: 'Special Gothic', sans-serif;
text-align: center;
font-weight: 470;
font-stretch: 110%;
}
}

View file

@ -0,0 +1,23 @@
main > section.hero {
height: 100vh;
background-image: url('/assets/images/hero.svg');
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: flex-end;
.text {
color: #7029ff;
padding: 0 var(--space-body);
.intro {
font-size: 2.1875rem;
font-stretch: 110%;
}
.title {
font-size: 8.75rem;
font-stretch: 75%;
font-weight: 470;
}
}
}

View file

@ -0,0 +1,71 @@
section.timeline {
background: linear-gradient(180deg, #b5ffda 80%, #33ffb0 100%);
padding: calc(var(--space-body) * 2) var(--space-body);
overflow-x: scroll;
.time {
display: flex;
.year {
display: flex;
flex-direction: column-reverse;
position: relative;
min-width: 21rem;
&::before {
content: '';
width: 1rem;
height: 1rem;
border-radius: 100%;
background-color: var(--color-yellow);
position: absolute;
bottom: 3.45rem;
left: -0.5rem;
}
h4 {
font-family: 'Special Gothic', sans-serif;
font-size: 2.1875rem;
font-stretch: 75%;
font-weight: 700;
padding-top: 1rem;
border-top: 1px solid #000;
}
.events {
display: flex;
flex-direction: column-reverse;
gap: 2rem;
border-left: 1px solid #000;
padding-left: 0.8rem;
padding-bottom: 0.5rem;
.event {
width: 17rem;
h5 {
text-transform: uppercase;
font-weight: 700;
font-size: 1.5rem;
font-stretch: 75%;
}
}
}
}
}
.controls {
display: flex;
justify-content: space-between;
gap: 20vw;
margin: auto;
margin-top: 3rem;
width: fit-content;
button {
&:last-child {
transform: rotate(180deg);
}
}
}
}

View file

@ -0,0 +1,34 @@
main > section.two-columns {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
margin: 5rem 0;
.column {
max-height: 90vh;
figure {
width: 100%;
height: 100%;
}
&.text-column {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding-right: var(--space-body);
.text {
width: 100%;
display: flex;
flex-direction: column;
align-items: end;
p {
box-sizing: border-box;
width: 100%;
padding-left: 20%;
}
}
}
}
}

View file

@ -0,0 +1,12 @@
section.video {
padding: 20vh var(--space-body);
display: grid;
grid-template-columns: 1fr 4fr;
column-gap: 1rem;
.text-column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}

289
assets/css/style.css Normal file
View file

@ -0,0 +1,289 @@
@font-face {
font-family: "Special Gothic";
src: url("../fonts/SpecialGothic-VariableFont_wdth,wght.ttf") format("truetype");
font-weight: 100 900;
font-stretch: 75% 125%;
font-display: swap;
}
@font-face {
font-family: "Times NR MT Std";
src: url("../fonts/TimesNRMTStd-Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
button {
border: none;
background-color: transparent;
padding: 0;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
figcaption,
ul,
blockquote,
figure {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
img {
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
:root {
--space-body: 2rem;
--color-yellow: rgba(250, 255, 101, 1);
}
button {
cursor: pointer;
}
body {
font-family: "Special Gothic", sans-serif;
}
figure {
display: block;
}
img,
video {
width: 100%;
height: 100%;
}
h3 {
font-size: 2.25rem;
font-weight: 500;
font-stretch: 75%;
}
p {
font-stretch: 110%;
font-weight: 470;
}
body > header {
position: relative;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--space-body);
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
}
body > header .logo path {
fill: #000 !important;
}
body > header button.burger {
display: block;
position: relative;
width: 5rem;
height: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
body > header button.burger .burger__line,
body > header button.burger .burger__line::before,
body > header button.burger .burger__line::after {
display: block;
width: 100%;
height: 1px;
background-color: #000;
}
body > header button.burger .burger__line::before, body > header button.burger .burger__line::after {
left: 0;
position: absolute;
content: "";
}
body > header button.burger .burger__line::before {
top: 1.2rem;
}
body > header button.burger .burger__line::after {
top: 2.8rem;
}
main > section.hero {
height: 100vh;
background-image: url("/assets/images/hero.svg");
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: flex-end;
}
main > section.hero .text {
color: #7029ff;
padding: 0 var(--space-body);
}
main > section.hero .text .intro {
font-size: 2.1875rem;
font-stretch: 110%;
}
main > section.hero .text .title {
font-size: 8.75rem;
font-stretch: 75%;
font-weight: 470;
}
main > section.featured-text {
height: 50vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
main > section.featured-text h3 {
font-size: 1rem;
font-stretch: 110%;
font-weight: 470;
margin-bottom: 1.5rem;
}
main > section.featured-text .main {
font-family: "Times NR MT Std", "Times New Roman", serif;
font-size: 2.1875rem;
text-align: center;
width: min(60rem, 90vw);
}
main > section.featured-text.colored {
background: var(--background);
color: var(--color);
}
main > section.featured-text figcaption {
font-family: "Special Gothic", sans-serif;
text-align: center;
font-weight: 470;
font-stretch: 110%;
}
main > section.two-columns {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
-moz-column-gap: 2rem;
column-gap: 2rem;
margin: 5rem 0;
}
main > section.two-columns .column {
max-height: 90vh;
}
main > section.two-columns .column figure {
width: 100%;
height: 100%;
}
main > section.two-columns .column.text-column {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding-right: var(--space-body);
}
main > section.two-columns .column.text-column .text {
width: 100%;
display: flex;
flex-direction: column;
align-items: end;
}
main > section.two-columns .column.text-column .text p {
box-sizing: border-box;
width: 100%;
padding-left: 20%;
}
section.video {
padding: 20vh var(--space-body);
display: grid;
grid-template-columns: 1fr 4fr;
-moz-column-gap: 1rem;
column-gap: 1rem;
}
section.video .text-column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
section.timeline {
background: linear-gradient(180deg, #b5ffda 80%, #33ffb0 100%);
padding: calc(var(--space-body) * 2) var(--space-body);
overflow-x: scroll;
}
section.timeline .time {
display: flex;
}
section.timeline .time .year {
display: flex;
flex-direction: column-reverse;
position: relative;
min-width: 21rem;
}
section.timeline .time .year::before {
content: "";
width: 1rem;
height: 1rem;
border-radius: 100%;
background-color: var(--color-yellow);
position: absolute;
bottom: 3.45rem;
left: -0.5rem;
}
section.timeline .time .year h4 {
font-family: "Special Gothic", sans-serif;
font-size: 2.1875rem;
font-stretch: 75%;
font-weight: 700;
padding-top: 1rem;
border-top: 1px solid #000;
}
section.timeline .time .year .events {
display: flex;
flex-direction: column-reverse;
gap: 2rem;
border-left: 1px solid #000;
padding-left: 0.8rem;
padding-bottom: 0.5rem;
}
section.timeline .time .year .events .event {
width: 17rem;
}
section.timeline .time .year .events .event h5 {
text-transform: uppercase;
font-weight: 700;
font-size: 1.5rem;
font-stretch: 75%;
}
section.timeline .controls {
display: flex;
justify-content: space-between;
gap: 20vw;
margin: auto;
margin-top: 3rem;
width: -moz-fit-content;
width: fit-content;
}
section.timeline .controls button:last-child {
transform: rotate(180deg);
}/*# sourceMappingURL=style.css.map */

1
assets/css/style.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["src/_fonts.scss","style.css","src/_reset.scss","src/_variables.scss","src/_global.scss","src/_header.scss","src/sections/_hero.scss","src/sections/_featured-text.scss","src/sections/_two-columns.scss","src/sections/_video.scss","src/sections/_timeline.scss"],"names":[],"mappings":"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","file":"style.css"}

11
assets/css/style.scss Normal file
View file

@ -0,0 +1,11 @@
@import 'src/_fonts.scss';
@import 'src/_reset.scss';
@import 'src/_variables.scss';
@import 'src/_global.scss';
@import 'src/_header.scss';
@import 'src/sections/_hero.scss';
@import 'src/sections/_featured-text.scss';
@import 'src/sections/_two-columns.scss';
@import 'src/sections/_video.scss';
@import 'src/sections/_timeline.scss';

Binary file not shown.

Binary file not shown.

153
assets/images/hero.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 56 KiB

BIN
assets/images/image-1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 555 KiB

BIN
assets/images/image-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 MiB

70
assets/images/logo.svg Normal file
View file

@ -0,0 +1,70 @@
<svg width="210" height="81" viewBox="0 0 210 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_381_504" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="210" height="81">
<path d="M210 0H0V81H210V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_381_504)">
<path d="M14.9483 35.7858C14.1101 35.4654 12.7795 35.2728 11.791 35.1882V33.7158H25.2998V35.1882C24.3114 35.2728 22.9808 35.4654 22.1426 35.7858C21.241 36.1278 20.7902 36.81 20.7902 38.0484V59.166C20.7902 60.4044 21.241 61.0866 22.1426 61.4286C22.9808 61.749 24.3114 61.9416 25.2998 62.0262V63.5004H11.791V62.0262C12.7795 61.9416 14.1101 61.749 14.9483 61.4286C15.8498 61.0866 16.3006 60.4044 16.3006 59.166V38.0484C16.3006 36.81 15.8498 36.126 14.9483 35.7858ZM115.517 45.6282C120.198 51.1578 121.143 53.892 121.143 56.5182C121.143 60.5754 118.373 64.206 113.026 64.206C109.16 64.206 106.367 61.0884 106.367 58.0986C106.367 55.2798 107.055 52.7184 111.521 47.4012C109.202 44.775 105.981 41.5296 101.514 37.494V54.8316C101.514 59.1228 101.749 60.0408 102.243 60.6816C102.931 61.5564 104.111 62.0262 105.594 62.0262V63.5004H94.9637V62.0262C96.66 61.8336 97.8421 61.5348 98.4649 60.831C99.2596 59.913 99.5602 58.9104 99.5602 55.1304V39.0942C99.5602 36.0828 97.3262 35.2296 95.114 35.2296V33.714H104.155C108.579 38.0484 111.865 41.4648 114.313 44.2404C116.932 41.4216 120.368 38.0268 124.856 33.714H129.903V63.5004H125.158V36.0846C121.078 39.8844 117.921 43.0236 115.517 45.6282ZM112.767 62.5176C115.536 62.5176 117.298 60.5322 117.298 57.7566C117.298 56.0052 116.568 53.4654 112.723 48.8106C109.008 53.316 108.129 55.8144 108.129 57.7566C108.129 60.4692 109.868 62.5176 112.767 62.5176Z" fill="black"/>
</g>
<path d="M68.5073 48.4254C68.5073 55.6632 71.1703 60.6816 75.7016 61.8354C72.3941 59.5512 70.3339 55.3014 70.3339 48.4254C70.3339 41.5494 72.3959 37.2366 75.7016 34.9524C71.1703 36.1062 68.5073 41.1876 68.5073 48.4254ZM61.313 48.4254C61.313 59.0796 68.7644 65.4642 77.7835 65.4642C86.8026 65.4642 94.2558 59.2938 94.2558 48.6594C94.2558 39.3498 89.2955 33.6906 82.9593 32.2182C87.4254 34.5456 92.1504 39.6486 92.1504 48.6594C92.1504 58.9716 84.9778 64.161 77.7835 64.161C70.5892 64.161 63.4166 58.7592 63.4166 48.4236C63.4166 38.6874 69.4288 33.0498 75.0571 33.0498C80.2963 33.0498 85.215 37.4904 85.215 47.5686C85.215 55.3194 83.153 59.5476 79.8455 61.8318C84.3768 60.678 87.0398 55.6614 87.0398 47.5686C87.0398 36.486 81.2847 31.7466 75.0571 31.7466C68.4639 31.7466 61.313 37.683 61.313 48.4236" fill="black"/>
<mask id="mask1_381_504" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="61" y="31" width="34" height="35">
<path d="M68.5073 48.4254C68.5073 55.6632 71.1703 60.6816 75.7016 61.8354C72.3941 59.5512 70.3339 55.3014 70.3339 48.4254C70.3339 41.5494 72.3959 37.2366 75.7016 34.9524C71.1703 36.1062 68.5073 41.1876 68.5073 48.4254ZM61.313 48.4254C61.313 59.0796 68.7644 65.4642 77.7835 65.4642C86.8026 65.4642 94.2558 59.2938 94.2558 48.6594C94.2558 39.3498 89.2955 33.6906 82.9593 32.2182C87.4254 34.5456 92.1504 39.6486 92.1504 48.6594C92.1504 58.9716 84.9778 64.161 77.7835 64.161C70.5892 64.161 63.4166 58.7592 63.4166 48.4236C63.4166 38.6874 69.4288 33.0498 75.0571 33.0498C80.2963 33.0498 85.215 37.4904 85.215 47.5686C85.215 55.3194 83.153 59.5476 79.8455 61.8318C84.3768 60.678 87.0398 55.6614 87.0398 47.5686C87.0398 36.486 81.2847 31.7466 75.0571 31.7466C68.4639 31.7466 61.313 37.683 61.313 48.4236" fill="white"/>
</mask>
<g mask="url(#mask1_381_504)">
<path d="M94.2558 31.7502H61.313V65.466H94.2558V31.7502Z" fill="black"/>
</g>
<path d="M45.8921 61.8354C49.7789 60.939 52.7642 58.2264 54.2034 54.5544L52.6357 53.892C51.3032 57.33 48.662 60.0408 45.8921 61.8354ZM34.1683 21.33C34.1683 24.8958 36.0366 28.1844 39.708 30.6612C33.7375 33.48 27.3813 38.349 27.3813 48.4272C27.3813 59.0814 34.8327 65.466 43.8537 65.466C52.2283 65.466 56.8682 61.11 58.7365 56.4552L57.0837 55.7514C55.2371 60.4278 50.4053 64.1646 43.8555 64.1646C36.6612 64.1646 29.4886 58.7628 29.4886 48.4272C29.4886 38.6478 35.5659 34.227 42.867 30.9186L41.2359 29.808C37.1988 27.054 35.7813 23.9148 35.7813 20.862C35.7813 17.8092 37.4994 14.904 39.927 13.8582C36.2973 14.5422 34.172 17.7228 34.172 21.3318M55.2987 20.3688C55.2987 26.3466 50.8326 28.9314 46.1293 31.707C40.6095 34.9956 34.5757 38.7738 34.5757 48.852C34.5757 55.4292 37.2387 60.6816 41.7482 61.8336C38.4625 59.5494 36.4005 55.0854 36.4005 48.852C36.4005 39.798 41.7482 36.2538 46.9874 33.0948C51.9477 30.0834 57.1235 27.2232 57.1235 20.3904C57.1235 15.5646 54.0097 12.3192 50.1229 11.2932C52.9145 13.1076 55.2987 15.6492 55.2987 20.3688ZM29.1211 20.988C29.1211 26.3052 32.7508 29.3148 36.4222 30.276C33.3718 28.1844 31.1613 25.7058 31.1613 20.988C31.1613 15.372 35.6275 11.7 41.3192 11.7C47.0109 11.7 50.3601 15.543 50.3601 19.9422C50.3601 24.3414 47.0308 26.5608 43.488 28.611L45.034 29.6568C48.7271 27.522 52.2935 24.9174 52.2935 19.9422C52.2935 15.2226 48.2981 10.3986 41.3192 10.3986C34.3403 10.3986 29.1211 14.7114 29.1211 20.9898" fill="black"/>
<mask id="mask2_381_504" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="27" y="10" width="32" height="56">
<path d="M45.8921 61.8354C49.7789 60.939 52.7642 58.2264 54.2034 54.5544L52.6357 53.892C51.3032 57.33 48.662 60.0408 45.8921 61.8354ZM34.1683 21.33C34.1683 24.8958 36.0366 28.1844 39.708 30.6612C33.7375 33.48 27.3813 38.349 27.3813 48.4272C27.3813 59.0814 34.8327 65.466 43.8537 65.466C52.2283 65.466 56.8682 61.11 58.7365 56.4552L57.0837 55.7514C55.2371 60.4278 50.4053 64.1646 43.8555 64.1646C36.6612 64.1646 29.4886 58.7628 29.4886 48.4272C29.4886 38.6478 35.5659 34.227 42.867 30.9186L41.2359 29.808C37.1988 27.054 35.7813 23.9148 35.7813 20.862C35.7813 17.8092 37.4994 14.904 39.927 13.8582C36.2973 14.5422 34.172 17.7228 34.172 21.3318M55.2987 20.3688C55.2987 26.3466 50.8326 28.9314 46.1293 31.707C40.6095 34.9956 34.5757 38.7738 34.5757 48.852C34.5757 55.4292 37.2387 60.6816 41.7482 61.8336C38.4625 59.5494 36.4005 55.0854 36.4005 48.852C36.4005 39.798 41.7482 36.2538 46.9874 33.0948C51.9477 30.0834 57.1235 27.2232 57.1235 20.3904C57.1235 15.5646 54.0097 12.3192 50.1229 11.2932C52.9145 13.1076 55.2987 15.6492 55.2987 20.3688ZM29.1211 20.988C29.1211 26.3052 32.7508 29.3148 36.4222 30.276C33.3718 28.1844 31.1613 25.7058 31.1613 20.988C31.1613 15.372 35.6275 11.7 41.3192 11.7C47.0109 11.7 50.3601 15.543 50.3601 19.9422C50.3601 24.3414 47.0308 26.5608 43.488 28.611L45.034 29.6568C48.7271 27.522 52.2935 24.9174 52.2935 19.9422C52.2935 15.2226 48.2981 10.3986 41.3192 10.3986C34.3403 10.3986 29.1211 14.7114 29.1211 20.9898" fill="white"/>
</mask>
<g mask="url(#mask2_381_504)">
<path d="M58.7347 10.3968H27.3813V65.4642H58.7347V10.3968Z" fill="black"/>
</g>
<path d="M51.8846 43.2162L53.5592 42.8958C52.9147 39.0096 51.0681 35.8488 47.9326 34.2054C49.8661 36.3834 51.2618 39.564 51.8846 43.2162Z" fill="black"/>
<mask id="mask3_381_504" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="47" y="34" width="7" height="10">
<path d="M51.8846 43.2162L53.5592 42.8958C52.9147 39.0096 51.0681 35.8488 47.9326 34.2054C49.8661 36.3834 51.2618 39.564 51.8846 43.2162Z" fill="white"/>
</mask>
<g mask="url(#mask3_381_504)">
<path d="M52.1529 31.7831L44.0098 36.4577L49.3403 45.6378L57.4835 40.9632L52.1529 31.7831Z" fill="black"/>
</g>
<path d="M56.3722 42.3612L58.1753 42.0192C57.3154 37.0008 54.0097 33.8418 49.8857 32.9652C52.6773 34.5672 55.5557 37.6416 56.3704 42.3612" fill="black"/>
<mask id="mask4_381_504" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="49" y="32" width="10" height="11">
<path d="M56.3722 42.3612L58.1753 42.0192C57.3154 37.0008 54.0097 33.8418 49.8857 32.9652C52.6773 34.5672 55.5557 37.6416 56.3704 42.3612" fill="white"/>
</mask>
<g mask="url(#mask4_381_504)">
<path d="M56.1042 29.399L45.7959 35.3165L51.9601 45.9322L62.2684 40.0147L56.1042 29.399Z" fill="black"/>
</g>
<mask id="mask5_381_504" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="210" height="81">
<path d="M210 0H0V81H210V0Z" fill="white"/>
</mask>
<g mask="url(#mask5_381_504)">
<path d="M139.498 33.7644H140.791V34.9524H139.498V33.7644ZM139.498 35.6058H140.791V40.464H139.498V35.6058Z" fill="black"/>
<path d="M146.596 40.464H145.304V37.9818C145.304 37.458 145.278 37.1196 145.226 36.9666C145.173 36.8136 145.085 36.6966 144.96 36.612C144.835 36.5292 144.683 36.486 144.505 36.486C144.288 36.486 144.089 36.5454 143.91 36.666C143.73 36.7866 143.607 36.9468 143.542 37.1484C143.477 37.35 143.443 37.7208 143.443 38.2644V40.4622H142.152V35.604H143.352V36.3258C143.778 35.7768 144.315 35.5032 144.962 35.5032C145.249 35.5032 145.512 35.5536 145.747 35.6508C145.983 35.7498 146.16 35.8794 146.278 36.0396C146.395 36.1998 146.479 36.3816 146.526 36.5832C146.573 36.7866 146.596 37.0746 146.596 37.449V40.4604V40.464Z" fill="black"/>
<path d="M150.201 35.6058V36.6336H149.313V38.5902C149.313 38.9826 149.323 39.213 149.339 39.2778C149.355 39.3444 149.393 39.3984 149.455 39.4416C149.514 39.4866 149.587 39.5082 149.674 39.5082C149.793 39.5082 149.967 39.4668 150.193 39.384L150.304 40.3812C150.003 40.5126 149.661 40.5774 149.279 40.5774C149.006 40.5774 148.765 40.5234 148.557 40.4136C148.349 40.3038 148.207 40.1418 148.131 39.9294C148.055 39.7152 148.019 39.3228 148.019 38.7504V36.6336H147.425V35.6058H148.019V34.641L149.315 33.8922V35.6058H150.202H150.201Z" fill="black"/>
<path d="M153.966 38.9196L155.253 39.1338C154.907 40.0968 154.2 40.5774 153.13 40.5774C152.366 40.5774 151.783 40.3524 151.375 39.9006C150.97 39.4506 150.767 38.8422 150.767 38.0772C150.767 37.2726 150.979 36.6426 151.401 36.1872C151.824 35.7318 152.358 35.505 153.005 35.505C153.725 35.505 154.292 35.7372 154.703 36.2034C155.116 36.6696 155.32 37.3608 155.32 38.2788V38.4012H152.08C152.092 38.7828 152.197 39.0798 152.395 39.2922C152.592 39.5064 152.844 39.6126 153.146 39.6126C153.557 39.6126 153.83 39.3804 153.964 38.9178M154.04 37.6182C154.028 37.2528 153.932 36.9738 153.749 36.7794C153.566 36.5868 153.343 36.4896 153.079 36.4896C152.796 36.4896 152.565 36.5904 152.382 36.792C152.199 36.9936 152.109 37.2582 152.109 37.5876V37.62H154.038L154.04 37.6182Z" fill="black"/>
<path d="M157.657 40.464H156.365V35.6058H157.56V36.3006C157.768 35.9748 157.954 35.7606 158.115 35.658C158.276 35.5554 158.467 35.505 158.68 35.505C158.968 35.505 159.25 35.586 159.526 35.748L159.122 36.864C158.91 36.7236 158.709 36.6534 158.519 36.6534C158.329 36.6534 158.184 36.7038 158.059 36.8046C157.934 36.9054 157.835 37.0854 157.762 37.3446C157.69 37.6038 157.654 38.1438 157.654 38.9664V40.4658L157.657 40.464Z" fill="black"/>
<path d="M164.568 40.464H163.275V37.9818C163.275 37.458 163.25 37.1196 163.197 36.9666C163.145 36.8136 163.056 36.6966 162.931 36.612C162.806 36.5292 162.654 36.486 162.477 36.486C162.26 36.486 162.06 36.5454 161.881 36.666C161.702 36.7866 161.579 36.9468 161.514 37.1484C161.449 37.35 161.414 37.7208 161.414 38.2644V40.4622H160.122V35.604H161.322V36.3258C161.747 35.7768 162.285 35.5032 162.931 35.5032C163.219 35.5032 163.482 35.5536 163.717 35.6508C163.952 35.7498 164.13 35.8794 164.247 36.0396C164.365 36.1998 164.448 36.3816 164.495 36.5832C164.542 36.7866 164.566 37.0746 164.566 37.449V40.4604L164.568 40.464Z" fill="black"/>
<path d="M166.89 37.0962L165.723 36.882C165.855 36.4122 166.081 36.0666 166.4 35.8416C166.72 35.6184 167.198 35.505 167.832 35.505C168.411 35.505 168.842 35.5716 169.124 35.7066C169.407 35.8398 169.606 36.0126 169.722 36.2214C169.838 36.4302 169.897 36.8118 169.897 37.3662L169.879 38.8746C169.879 39.2976 169.899 39.6108 169.939 39.8142C169.979 40.0176 170.055 40.2336 170.169 40.4658H168.9C168.866 40.392 168.831 40.2912 168.797 40.1598C168.761 40.0284 168.739 39.9528 168.73 39.9312C168.283 40.3632 167.776 40.5792 167.213 40.5792C166.709 40.5792 166.315 40.4424 166.027 40.1706C165.739 39.8988 165.594 39.5532 165.594 39.1356C165.594 38.862 165.659 38.619 165.792 38.4066C165.924 38.1942 166.107 38.0304 166.34 37.9152C166.574 37.8 166.918 37.6974 167.372 37.6092C167.973 37.4958 168.389 37.395 168.623 37.3032V37.17C168.623 36.9198 168.561 36.7434 168.438 36.6426C168.315 36.54 168.085 36.4896 167.749 36.4896C167.515 36.4896 167.334 36.5346 167.205 36.6246C167.077 36.7146 166.972 36.873 166.889 37.098M168.623 38.133C168.46 38.187 168.199 38.2536 167.837 38.3292C167.475 38.4048 167.243 38.4804 167.138 38.5524C166.966 38.6712 166.881 38.8224 166.881 39.0042C166.881 39.186 166.948 39.339 167.084 39.4704C167.218 39.6018 167.39 39.6666 167.598 39.6666C167.741 39.6666 167.883 39.6378 168.018 39.5802C168.154 39.5226 168.27 39.4488 168.362 39.3588C168.456 39.2688 168.523 39.168 168.561 39.0546C168.601 38.9412 168.621 38.718 168.621 38.3832V38.1312L168.623 38.133Z" fill="black"/>
<path d="M173.454 35.6058V36.6336H172.567V38.5902C172.567 38.9826 172.576 39.213 172.593 39.2778C172.609 39.3444 172.647 39.3984 172.709 39.4416C172.768 39.4866 172.841 39.5082 172.928 39.5082C173.047 39.5082 173.221 39.4668 173.447 39.384L173.558 40.3812C173.257 40.5126 172.915 40.5774 172.533 40.5774C172.26 40.5774 172.019 40.5234 171.811 40.4136C171.602 40.3038 171.461 40.1418 171.385 39.9294C171.309 39.7152 171.273 39.3228 171.273 38.7504V36.6336H170.679V35.6058H171.273V34.641L172.569 33.8922V35.6058H173.456H173.454Z" fill="black"/>
<path d="M174.394 33.7644H175.687V34.9524H174.394V33.7644ZM174.394 35.6058H175.687V40.464H174.394V35.6058Z" fill="black"/>
<path d="M176.758 37.9656C176.758 37.5426 176.863 37.1304 177.073 36.7326C177.283 36.333 177.582 36.0288 177.971 35.82C178.36 35.6112 178.793 35.5068 179.273 35.5068C180.011 35.5068 180.616 35.7444 181.089 36.2214C181.561 36.6984 181.796 37.2978 181.796 38.0196C181.796 38.7414 181.558 39.3678 181.08 39.852C180.602 40.3362 180.002 40.5792 179.282 40.5792C178.835 40.5792 178.408 40.4766 178 40.2732C177.593 40.0698 177.283 39.7746 177.073 39.3894C176.863 39.0042 176.758 38.529 176.758 37.9656ZM178.087 38.043C178.087 38.5218 178.201 38.889 178.429 39.1446C178.657 39.4002 178.942 39.528 179.282 39.528C179.622 39.528 179.894 39.4002 180.124 39.1446C180.354 38.889 180.468 38.5182 180.468 38.034C180.468 37.5498 180.354 37.1934 180.124 36.9378C179.894 36.6822 179.613 36.5544 179.282 36.5544C178.951 36.5544 178.657 36.6822 178.429 36.9378C178.201 37.1934 178.087 37.5624 178.087 38.0448" fill="black"/>
<path d="M187.289 40.464H185.996V37.9818C185.996 37.458 185.971 37.1196 185.919 36.9666C185.866 36.8136 185.777 36.6966 185.652 36.612C185.528 36.5292 185.375 36.486 185.198 36.486C184.981 36.486 184.782 36.5454 184.602 36.666C184.423 36.7866 184.3 36.9468 184.235 37.1484C184.17 37.35 184.135 37.7208 184.135 38.2644V40.4622H182.843V35.604H184.043V36.3258C184.468 35.7768 185.006 35.5032 185.652 35.5032C185.94 35.5032 186.203 35.5536 186.438 35.6508C186.673 35.7498 186.851 35.8794 186.969 36.0396C187.086 36.1998 187.17 36.3816 187.217 36.5832C187.264 36.7866 187.287 37.0746 187.287 37.449V40.4604L187.289 40.464Z" fill="black"/>
<path d="M189.612 37.0962L188.444 36.882C188.576 36.4122 188.803 36.0666 189.121 35.8416C189.442 35.6184 189.92 35.505 190.553 35.505C191.133 35.505 191.563 35.5716 191.844 35.7066C192.126 35.8398 192.326 36.0126 192.441 36.2214C192.557 36.4302 192.615 36.8118 192.615 37.3662L192.597 38.8746C192.597 39.2976 192.617 39.6108 192.657 39.8142C192.697 40.0176 192.773 40.2336 192.887 40.4658H191.618C191.583 40.392 191.549 40.2912 191.515 40.1598C191.478 40.0284 191.457 39.9528 191.448 39.9312C191 40.3632 190.493 40.5792 189.93 40.5792C189.427 40.5792 189.033 40.4424 188.745 40.1706C188.457 39.8988 188.312 39.5532 188.312 39.1356C188.312 38.862 188.377 38.619 188.509 38.4066C188.642 38.1942 188.824 38.0304 189.06 37.9152C189.293 37.8 189.637 37.6974 190.092 37.6092C190.693 37.4958 191.109 37.395 191.343 37.3032V37.17C191.343 36.9198 191.281 36.7434 191.158 36.6426C191.035 36.54 190.805 36.4896 190.468 36.4896C190.235 36.4896 190.054 36.5346 189.925 36.6246C189.797 36.7146 189.69 36.873 189.608 37.098M191.344 38.133C191.181 38.187 190.921 38.2536 190.559 38.3292C190.197 38.4048 189.965 38.4804 189.86 38.5524C189.688 38.6712 189.603 38.8224 189.603 39.0042C189.603 39.186 189.67 39.339 189.806 39.4704C189.94 39.6018 190.112 39.6666 190.32 39.6666C190.465 39.6666 190.604 39.6378 190.74 39.5802C190.875 39.5226 190.991 39.4488 191.084 39.3588C191.178 39.2688 191.245 39.168 191.285 39.0546C191.324 38.9412 191.344 38.718 191.344 38.3832V38.1312V38.133Z" fill="black"/>
<path d="M195.228 33.7644H193.935V40.464H195.228V33.7644Z" fill="black"/>
<path d="M143.754 48.5658L142.485 48.7944C142.44 48.5442 142.34 48.3552 142.186 48.2274C142.032 48.0996 141.837 48.0348 141.598 48.0348C141.279 48.0348 141.024 48.1446 140.832 48.3624C140.64 48.5802 140.544 48.9492 140.544 49.4658C140.544 50.0472 140.642 50.4576 140.836 50.6934C141.029 50.9292 141.29 51.048 141.614 51.048C141.858 51.048 142.061 50.9778 142.219 50.8374C142.376 50.697 142.487 50.4576 142.548 50.1192L143.817 50.3388C143.551 51.5124 142.798 52.0974 141.56 52.0974C140.843 52.0974 140.273 51.8724 139.849 51.4242C139.425 50.9742 139.215 50.3532 139.215 49.5612C139.215 48.7692 139.427 48.1374 139.849 47.691C140.273 47.2464 140.848 47.0232 141.578 47.0232C142.175 47.0232 142.65 47.1492 143.001 47.4012C143.352 47.6532 143.602 48.0402 143.752 48.564" fill="black"/>
<path d="M144.482 49.4856C144.482 49.0626 144.587 48.6504 144.797 48.2526C145.007 47.853 145.306 47.5488 145.695 47.34C146.084 47.1312 146.517 47.0268 146.996 47.0268C147.735 47.0268 148.34 47.2644 148.812 47.7414C149.285 48.2184 149.52 48.8178 149.52 49.5396C149.52 50.2614 149.281 50.8878 148.803 51.372C148.325 51.8562 147.726 52.0992 147.006 52.0992C146.558 52.0992 146.131 51.9966 145.724 51.7932C145.316 51.5898 145.007 51.2946 144.797 50.9094C144.587 50.5242 144.482 50.049 144.482 49.4856ZM145.809 49.563C145.809 50.0418 145.923 50.409 146.151 50.6646C146.379 50.9202 146.663 51.048 147.004 51.048C147.344 51.048 147.616 50.9202 147.846 50.6646C148.075 50.409 148.19 50.0382 148.19 49.554C148.19 49.0698 148.075 48.7134 147.846 48.4578C147.616 48.2022 147.335 48.0744 147.004 48.0744C146.672 48.0744 146.379 48.2022 146.151 48.4578C145.923 48.7134 145.809 49.0824 145.809 49.5648" fill="black"/>
<path d="M153.791 51.984V51.2532C153.613 51.516 153.378 51.7212 153.087 51.8724C152.795 52.0236 152.491 52.0992 152.172 52.0992C151.854 52.0992 151.55 52.0272 151.289 51.8814C151.028 51.7374 150.84 51.534 150.724 51.2748C150.608 51.0156 150.55 50.6592 150.55 50.2056V47.1258H151.841V49.365C151.841 50.0436 151.865 50.4612 151.912 50.6124C151.959 50.7654 152.046 50.886 152.171 50.9778C152.295 51.0696 152.457 51.1146 152.648 51.1146C152.869 51.1146 153.067 51.0552 153.242 50.9364C153.416 50.8176 153.536 50.6682 153.599 50.49C153.662 50.3118 153.693 49.8744 153.693 49.176V47.124H154.993V51.9822H153.789L153.791 51.984Z" fill="black"/>
<path d="M160.811 51.984H159.519V49.5018C159.519 48.978 159.493 48.6396 159.441 48.4866C159.388 48.3336 159.299 48.2166 159.175 48.132C159.05 48.0492 158.898 48.006 158.72 48.006C158.503 48.006 158.304 48.0654 158.125 48.186C157.945 48.3066 157.822 48.4668 157.757 48.6684C157.692 48.87 157.657 49.2408 157.657 49.7844V51.9822H156.367V47.124H157.567V47.8458C157.992 47.2968 158.53 47.0232 159.176 47.0232C159.464 47.0232 159.727 47.0736 159.962 47.1708C160.197 47.2698 160.375 47.3994 160.492 47.5596C160.61 47.7198 160.693 47.9016 160.74 48.1032C160.788 48.3066 160.811 48.5946 160.811 48.969V51.9804V51.984Z" fill="black"/>
<path d="M166.429 48.5658L165.16 48.7944C165.114 48.5442 165.015 48.3552 164.861 48.2274C164.707 48.0996 164.512 48.0348 164.273 48.0348C163.954 48.0348 163.699 48.1446 163.507 48.3624C163.315 48.5802 163.219 48.9492 163.219 49.4658C163.219 50.0472 163.317 50.4576 163.51 50.6934C163.704 50.9292 163.965 51.048 164.289 51.048C164.533 51.048 164.736 50.9778 164.894 50.8374C165.051 50.697 165.161 50.4576 165.223 50.1192L166.492 50.3388C166.226 51.5124 165.473 52.0974 164.235 52.0974C163.518 52.0974 162.947 51.8724 162.524 51.4242C162.1 50.9742 161.89 50.3532 161.89 49.5612C161.89 48.7692 162.102 48.1374 162.524 47.691C162.947 47.2464 163.523 47.0232 164.253 47.0232C164.85 47.0232 165.324 47.1492 165.676 47.4012C166.027 47.6532 166.277 48.0402 166.427 48.564" fill="black"/>
<path d="M167.455 45.2844H168.748V46.4724H167.455V45.2844ZM167.455 47.1258H168.748V51.984H167.455V47.1258Z" fill="black"/>
<path d="M171.411 45.2844H170.118V51.984H171.411V45.2844Z" fill="black"/>
<path d="M139.199 61.0056C139.199 60.5826 139.304 60.1704 139.514 59.7708C139.724 59.3712 140.023 59.067 140.412 58.8582C140.801 58.6494 141.234 58.545 141.714 58.545C142.452 58.545 143.057 58.7844 143.53 59.2596C144.002 59.7366 144.237 60.336 144.237 61.0578C144.237 61.7796 143.998 62.406 143.521 62.8902C143.043 63.3744 142.443 63.6174 141.723 63.6174C141.276 63.6174 140.848 63.5148 140.441 63.3114C140.034 63.108 139.724 62.8128 139.514 62.4276C139.304 62.0424 139.199 61.5672 139.199 61.0038M140.526 61.083C140.526 61.5618 140.64 61.929 140.868 62.1846C141.096 62.4402 141.381 62.568 141.721 62.568C142.061 62.568 142.333 62.4402 142.563 62.1846C142.793 61.929 142.907 61.5582 142.907 61.074C142.907 60.5898 142.793 60.2334 142.563 59.9778C142.333 59.7222 142.052 59.5944 141.721 59.5944C141.39 59.5944 141.096 59.7222 140.868 59.9778C140.64 60.2334 140.526 60.6024 140.526 61.083Z" fill="black"/>
<path d="M144.733 58.6458H145.447V58.2804C145.447 57.8754 145.492 57.573 145.581 57.3732C145.669 57.1734 145.83 57.0096 146.06 56.8818C146.29 56.754 146.589 56.6892 146.955 56.6892C147.32 56.6892 147.677 56.745 148.026 56.8584L147.862 57.7458C147.653 57.6972 147.454 57.672 147.264 57.672C147.074 57.672 146.944 57.7152 146.862 57.8016C146.781 57.888 146.741 58.0572 146.741 58.3074V58.6458H147.711V59.6556H146.741V63.504H145.45V59.6556H144.737V58.6458H144.733Z" fill="black"/>
<path d="M151.048 58.6458H152.234V59.3082C152.659 58.7988 153.168 58.545 153.76 58.545C154.384 58.545 154.842 58.7988 155.134 59.3082C155.559 58.7988 156.055 58.545 156.618 58.545C156.95 58.545 157.236 58.6062 157.476 58.7304C157.717 58.8528 157.902 59.0346 158.03 59.2722C158.159 59.5098 158.224 59.8842 158.224 60.3972V63.504H156.931V60.7338C156.931 60.21 156.872 59.877 156.754 59.7366C156.636 59.5962 156.466 59.526 156.242 59.526C156.061 59.526 155.892 59.58 155.737 59.688C155.581 59.796 155.467 59.9562 155.394 60.1704C155.322 60.3846 155.286 60.7176 155.286 61.1712V63.5022H153.995V60.8418C153.995 60.3702 153.972 60.0642 153.924 59.9274C153.877 59.7906 153.807 59.6898 153.713 59.6232C153.619 59.5584 153.488 59.5242 153.32 59.5242C153.117 59.5242 152.938 59.5764 152.782 59.6826C152.626 59.787 152.512 59.94 152.444 60.1398C152.375 60.3396 152.34 60.6744 152.34 61.1424V63.5004H151.048V58.6422V58.6458Z" fill="black"/>
<path d="M162.77 63.504V62.7732C162.592 63.036 162.357 63.2412 162.066 63.3924C161.774 63.5436 161.47 63.6192 161.151 63.6192C160.833 63.6192 160.529 63.5472 160.268 63.4014C160.007 63.2574 159.819 63.054 159.703 62.7966C159.587 62.5374 159.529 62.181 159.529 61.7274V58.6476H160.82V60.8868C160.82 61.5654 160.844 61.983 160.891 62.1342C160.938 62.2872 161.025 62.4078 161.15 62.4996C161.274 62.5914 161.436 62.6364 161.627 62.6364C161.848 62.6364 162.046 62.577 162.221 62.4582C162.395 62.3394 162.515 62.19 162.578 62.0118C162.641 61.8336 162.672 61.3962 162.672 60.6978V58.6458H163.972V63.504H162.768H162.77Z" fill="black"/>
<path d="M164.895 62.1198L166.197 61.9236C166.311 62.4348 166.658 62.6922 167.24 62.6922C167.524 62.6922 167.75 62.6472 167.915 62.5554C168.08 62.4636 168.163 62.3322 168.163 62.1576C168.163 62.064 168.128 61.983 168.06 61.9182C167.991 61.8534 167.85 61.7994 167.634 61.7562C166.592 61.524 165.933 61.3152 165.657 61.1298C165.268 60.867 165.073 60.5016 165.073 60.0336C165.073 59.616 165.241 59.265 165.576 58.977C165.911 58.6908 166.432 58.5468 167.136 58.5468C167.801 58.5468 168.297 58.6548 168.623 58.869C168.949 59.0832 169.171 59.4036 169.293 59.8266L168.074 60.0498C167.969 59.6574 167.663 59.4594 167.155 59.4594C166.57 59.4594 166.277 59.5944 166.277 59.8608C166.277 59.9976 166.374 60.1038 166.57 60.1776C166.765 60.2532 167.113 60.345 167.609 60.4584C168.286 60.6132 168.764 60.8022 169.041 61.02C169.318 61.2396 169.457 61.5618 169.457 61.9848C169.457 62.4294 169.271 62.8128 168.898 63.135C168.525 63.4572 167.971 63.6174 167.236 63.6174C166.572 63.6174 166.045 63.4824 165.656 63.2124C165.266 62.9424 165.011 62.577 164.892 62.118" fill="black"/>
<path d="M173.464 61.9596L174.751 62.1738C174.405 63.1368 173.697 63.6174 172.627 63.6174C171.863 63.6174 171.28 63.3924 170.873 62.9406C170.467 62.4906 170.265 61.8822 170.265 61.1172C170.265 60.3126 170.476 59.6826 170.898 59.2272C171.322 58.7718 171.856 58.5432 172.502 58.5432C173.223 58.5432 173.789 58.7754 174.2 59.2416C174.613 59.7078 174.818 60.399 174.818 61.317V61.4394H171.577C171.59 61.821 171.695 62.118 171.892 62.3304C172.089 62.5428 172.341 62.6508 172.643 62.6508C173.054 62.6508 173.328 62.4186 173.462 61.956M173.538 60.6582C173.525 60.2928 173.429 60.0138 173.246 59.8194C173.063 59.625 172.841 59.5296 172.576 59.5296C172.294 59.5296 172.062 59.6304 171.879 59.832C171.697 60.0336 171.606 60.2982 171.606 60.6276V60.66H173.536L173.538 60.6582Z" fill="black"/>
<path d="M179.132 63.504V62.7732C178.954 63.036 178.719 63.2412 178.427 63.3924C178.136 63.5436 177.832 63.6192 177.513 63.6192C177.195 63.6192 176.89 63.5472 176.63 63.4014C176.369 63.2574 176.181 63.054 176.065 62.7966C175.949 62.5374 175.891 62.181 175.891 61.7274V58.6476H177.182V60.8868C177.182 61.5654 177.205 61.983 177.252 62.1342C177.3 62.2872 177.386 62.4078 177.511 62.4996C177.636 62.5914 177.797 62.6364 177.989 62.6364C178.21 62.6364 178.407 62.577 178.583 62.4582C178.757 62.3394 178.876 62.19 178.94 62.0118C179.003 61.8336 179.034 61.3962 179.034 60.6978V58.6458H180.334V63.504H179.13H179.132Z" fill="black"/>
<path d="M181.625 58.6458H182.81V59.3082C183.236 58.7988 183.744 58.545 184.336 58.545C184.961 58.545 185.419 58.7988 185.71 59.3082C186.136 58.7988 186.632 58.545 187.195 58.545C187.526 58.545 187.812 58.6062 188.053 58.7304C188.294 58.8528 188.478 59.0346 188.607 59.2722C188.736 59.5098 188.801 59.8842 188.801 60.3972V63.504H187.508V60.7338C187.508 60.21 187.448 59.877 187.331 59.7366C187.213 59.5962 187.041 59.526 186.818 59.526C186.637 59.526 186.469 59.58 186.313 59.688C186.158 59.796 186.044 59.9562 185.971 60.1704C185.899 60.3846 185.863 60.7176 185.863 61.1712V63.5022H184.572V60.8418C184.572 60.3702 184.548 60.0642 184.501 59.9274C184.454 59.7906 184.383 59.6898 184.289 59.6232C184.195 59.5584 184.065 59.5242 183.896 59.5242C183.694 59.5242 183.515 59.5764 183.359 59.6826C183.203 59.787 183.089 59.94 183.02 60.1398C182.951 60.3396 182.917 60.6744 182.917 61.1424V63.5004H181.625V58.6422V58.6458Z" fill="black"/>
<path d="M189.675 62.1198L190.977 61.9236C191.091 62.4348 191.439 62.6922 192.02 62.6922C192.304 62.6922 192.53 62.6472 192.695 62.5554C192.86 62.4636 192.943 62.3322 192.943 62.1576C192.943 62.064 192.909 61.983 192.84 61.9182C192.771 61.8534 192.63 61.7994 192.414 61.7562C191.372 61.524 190.713 61.3152 190.437 61.1298C190.048 60.867 189.855 60.5016 189.855 60.0336C189.855 59.616 190.023 59.265 190.358 58.977C190.693 58.6908 191.214 58.5468 191.918 58.5468C192.583 58.5468 193.079 58.6548 193.405 58.869C193.73 59.0832 193.955 59.4036 194.073 59.8266L192.854 60.0498C192.751 59.6574 192.443 59.4594 191.935 59.4594C191.35 59.4594 191.057 59.5944 191.057 59.8608C191.057 59.9976 191.154 60.1038 191.35 60.1776C191.545 60.2532 191.893 60.345 192.389 60.4584C193.066 60.6132 193.544 60.8022 193.821 61.02C194.098 61.2396 194.237 61.5618 194.237 61.9848C194.237 62.4294 194.051 62.8128 193.68 63.135C193.307 63.4572 192.753 63.6174 192.018 63.6174C191.353 63.6174 190.827 63.4824 190.437 63.2124C190.048 62.9424 189.795 62.577 189.675 62.118" fill="black"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 27 KiB

View file

@ -0,0 +1,4 @@
<svg width="46" height="43" viewBox="0 0 46 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="44.5294" height="42" rx="21" stroke="black"/>
<path d="M28.0648 10.0752L22.7648 21.5252L28.0648 32.9252H26.4148L16.4648 21.5252L26.4148 10.0752H28.0648Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 301 B

24
assets/js/timeline.js Normal file
View file

@ -0,0 +1,24 @@
const YEAR_MIN_WIDTH_REM = 18;
const YEAR_GAP_THRESHOLD = 2;
const REM_PER_EXTRA_YEAR = 9;
document.addEventListener('DOMContentLoaded', () => {
const years = document.querySelectorAll('.timeline .year');
years.forEach((yearEl, index) => {
const year = parseInt(yearEl.querySelector('h4').textContent);
const nextYearEl = years[index + 1];
let minWidth = YEAR_MIN_WIDTH_REM;
if (nextYearEl) {
const nextYear = parseInt(nextYearEl.querySelector('h4').textContent);
const gap = nextYear - year;
if (gap > YEAR_GAP_THRESHOLD) {
minWidth =
YEAR_MIN_WIDTH_REM + (gap - YEAR_GAP_THRESHOLD) * REM_PER_EXTRA_YEAR;
}
}
yearEl.style.minWidth = `${minWidth}rem`;
});
});

Binary file not shown.

262
index.html Normal file
View file

@ -0,0 +1,262 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ICOM</title>
<link rel="stylesheet" href="assets/css/style.css" />
<script src="assets/js/timeline.js" defer></script>
</head>
<body>
<header>
<a href="/"><img class="logo" src="assets/images/logo.svg" alt="" /></a>
<h2>Museums in Motion: ICOM 80 Years</h2>
<button class="burger">
<span class="burger__line"></span>
</button>
</header>
<nav>
<!-- Navigation à venir -->
</nav>
<main>
<section class="hero">
<div class="text">
<p class="intro">80 years of evolution of</p>
<h1 class="title">A Global Museum Network</h1>
</div>
</section>
<!--
Cette section a différents champs optionnels (voire plus bas pour d'autre variante) :
- titre
- image
- référence (ex. auteur de la citation)
-->
<section class="featured-text">
<p class="main">
It highlights how changes in the museum field - ethics,
specialisations, global representation, were mirrored in the evolution
of ICOM's committees, working groups, and membership.
</p>
</section>
<section class="two-columns">
<div class="column left-column picture-column">
<figure>
<img src="assets/images/image-1.jpg" alt="" />
<figcaption>Légende</figcaption>
</figure>
</div>
<div class="column right-column text-column">
<h3>80 Years of Evolution of a Global Museum Network</h3>
<div class="text">
<p>
Today, ICOM unites more than 60,000 members across 128 National
Committees, 35 International Committees, 7 Regional Alliances, and
22 Affiliated Organisations, making it the largest organisation of
museums and museum professionals around the world. What began as a
small group of dedicated professionals in 1946 has evolved into a
vast global network.
</p>
<p>
From its post-war European and North American foundations, ICOM
progressively expanded into a genuinely global organisation,
shaped by shifting geopolitical contexts, decolonisation
processes, and the growing diversity of museum practices
worldwide. How did we get here? This opening chapter outlines
eight decades of collective endeavour, shaped by the enduring
ideal of fostering international cooperation among museums and
bringing professionals together across geographic and disciplinary
boundaries.
</p>
</div>
</div>
</section>
<section class="two-columns">
<div class="column right-column text-column">
<!-- Cette div.empty est nécessaire à la mise en page. S'il n'y a pas de titre il faut une div vide. -->
<div class="empty"></div>
<div class="text">
<p>
ICOM entered its first phase of expansion around 1948, growing
from 367 members at its 1st General Conference in France to 2,793
members by 1968, the year of its 8th General Conference in
Germany. The period 1968-1977 aligned with broader processes of
cultural opening and widening access to museum practices following
the events of 1968. The 1980s marked a phase of institutional
consolidation, notably with the adoption in 1986 of the first Code
of Ethics, now a key reference beyond the organisation itself and
continually updated.
</p>
<p>
ICOM's growth reflects both quantitative expansion and qualitative
change. Membership continued to rise during the era of digital
transformation and increasing global interconnectedness, from
14,521 members in 2000 to 27,604 in 2010, reaching 51,302 in 2022.
</p>
<p>
Drawing on archival materials-including congress documents,
photographs, founding texts, early committee reports, and historic
resolutions-this chapter traces key moments in ICOM's history and
highlights the actors who made them possible. Above all, it is a
story of people: committed members, volunteers, and professionals
dedicated to advancing global outreach, cross-border
collaboration, and the exchange of expertise in the museum sector.
</p>
<p>
Across the broader landscape of 20th and 21st centuries
international cultural dialogue, ICOM's history reflects both the
professionalization and democratization of the museum field. This
chapter therefore highlights the major shifts that have shaped its
global community.<br />
We invite you to explore this first chapter and discover how,
indeed, museums have no borders, they have a network.
</p>
</div>
</div>
<div class="column left-column picture-column">
<figure>
<img src="assets/images/image-2.jpg" alt="" />
<figcaption>Légende</figcaption>
</figure>
</div>
</section>
<!-- Version citation et colorée de la section.featured-text :
une citation entre guillemets et un nom d'auteur.
Le background et la color sont choisis en back-office, comme toutes les variables injectées en style inline.
-->
<section
class="featured-text blockquote colored"
style="
--background: linear-gradient(180deg, #1a4ad6 50.19%, #7029ff 89.58%);
--color: rgba(255, 194, 249, 1);
"
>
<figure>
<blockquote>
<p class="main">
“It highlights how changes in the museum field - ethics,
specialisations, global representation, were mirrored in the
evolution of ICOM's committees, working groups, and membership.”
</p>
</blockquote>
<figcaption>Quote from Julia Roberts</figcaption>
</figure>
</section>
<section class="video">
<div class="text-column">
<h3>Visual data & Graphic</h3>
<div class="body-caption">
<p>
Officially created in November 1946 in Paris, France, at the
initiative of Chauncey J. Hamlin (USA), the International Council
of Museums (ICOM) was settled between Europe and North America.
</p>
</div>
</div>
<figure>
<video
muted
autoplay
loop
src="assets/videos/WorldMap_V5.mp4"
></video>
</figure>
</section>
<!--
Version titrée du featured-text
-->
<section class="featured-text">
<h3>80 Years of Evolution of a Global Museum Network</h3>
<p class="main">
It highlights how changes in the museum field - ethics,
specialisations, global representation, were mirrored in the evolution
of ICOM's committees, working groups, and membership.
</p>
</section>
<section class="timeline">
<ul class="time">
<li class="year">
<h4>1946</h4>
<ul class="events">
<li class="event">
<h5>Nathist</h5>
<p>
International Committee for Museums and Collections of Natural
History
</p>
</li>
<li class="event">
<h5>Icom design</h5>
<p>International Committee for Decorative Arts and Design</p>
</li>
<li class="event">
<h5>ICME</h5>
<p>
International Committee for Museums and Collections of
Ethnography
</p>
</li>
<li class="event">
<h5>ICMAH</h5>
<p>
International Committee for Museums and Collections of
Archaeology and History
</p>
</li>
<li class="event">
<h5>cimuset</h5>
<p>
International Committee for Museums and Collections of Science
and Technology
</p>
</li>
</ul>
</li>
<li class="year">
<h4>1948</h4>
<ul class="events">
<li class="event">
<h5>ICOM ARCHI-TECHS</h5>
<p>
International Committee for Architecture and Museum Techniques
</p>
</li>
</ul>
</li>
<li class="year">
<h4>1950</h4>
<ul class="events">
<li>
<h5>ICOM DOCUMENTATION</h5>
<p>International Committee for Documentation</p>
</li>
</ul>
</li>
<li class="year">
<h4>1956</h4>
</li>
</ul>
<div class="controls">
<button><img src="assets/images/slider-button.svg" alt="" /></button>
<h3>Timeline</h3>
<button><img src="assets/images/slider-button.svg" alt="" /></button>
</div>
</section>
</main>
<footer>
<!-- Footer à venir -->
</footer>
</body>
</html>