body {
--header-height: 8rem;
--site-padding: var(--wp--preset--spacing--80);
}
@media screen and (max-width: 1400px) {
body {
--site-padding: var(--wp--preset--spacing--56);
--wp--style--global--content-size: 100vw;
--wp--style--global--wide-size: calc(100vw - var(--site-padding));
}
.wrapper {
padding: 0 var(--site-padding);
}
}
@media screen and (max-width: 781px) {
body {
--wp--style--global--wide-size: 100vw;
}
}  #header {
}
#header > .wrapper {
width: var(--wp--style--global--wide-size);
padding: 0;
@media screen and (max-width: 781px) {
padding: 0 var(--site-padding);
}
}
#header.scrolled { --header-height: 5rem;
} .header-logo {
margin-right: var(--wp--preset--spacing--64);
height: 68px;
}
.header-logo svg {
width: auto;
height: 100%;
}
@media screen and (max-width: 781px) {
.header-logo {
height: 56px;
}
} .menu li a {
font-weight: var(--wp--custom--font-weight--medium);
}
.menu-main li a {
padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
}
#extras {
margin-left: auto;
}
#extras > .wp-element-button {
padding: 10px var(--wp--preset--spacing--12);
border-radius: var(--wp--custom--radius--small);
width: fit-content !important;
@media screen and (max-width: 600px) {
display: none; 
}
}
#search-icon {
font-weight: var(--wp--custom--font-weight--medium);
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--12);
padding-right: var(--wp--preset--spacing--24);
border-right: 1px solid var(--wp--preset--color--grey);
@media screen and (max-width: 1024px) {
span { display: none; } 
}
}
ul.language-switcher {
list-style: none;
padding: 0;
font-weight: var(--wp--custom--font-weight--medium);
}
ul.language-switcher a {
color: inherit;
text-transform: uppercase;
} #header-menu .sub-menu {
background-color: var(--wp--preset--color--light-grey);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
width: 16rem;
padding: 0 var(--wp--preset--spacing--4);
}
.menu-main ul.sub-menu a {
white-space: normal;
border-radius: var(--wp--custom--radius--small);
margin: var(--wp--preset--spacing--4) 0;
}
.menu-main ul.sub-menu a:hover, 
.menu-main ul.sub-menu a:focus {
background-color: var(--wp--preset--color--beige);
} #hamburger {
background: var(--wp--preset--color--light-grey);
color: inherit;
width: 385px;
height: 100dvh;
padding: var(--wp--preset--spacing--32);
padding-top: calc(var(--wp--preset--spacing--40) + var(--wp-admin--admin-bar--height,0px));
align-items: flex-start;
flex-wrap: nowrap;
}
#header.scrolled #hamburger {
padding-top: calc(var(--wp--preset--spacing--12) + var(--wp-admin--admin-bar--height,0px));
}
.background-overlay {
background: rgba(0,0,0,0.60);
backdrop-filter: none;
}
#hamburger > .wp-element-button {
margin-top: auto;
width: 100%;
}
#hamburger.menu-main > ul {
padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--8);
}
#hamburger.menu-main > ul > li > a {
padding: var(--wp--preset--spacing--24) 0;
font-weight: var(--wp--custom--font-weight--bold);
font-size: var(--wp--preset--font-size--h-5);
}
#hamburger.menu-main ul.sub-menu a {
font-weight: var(--wp--custom--font-weight--default);
}
#hamburger.menu-main ul.sub-menu a:hover,
#hamburger.menu-main ul.sub-menu a:focus {
background-color: transparent;
} label#menutogglebutton {
display: none;
}
@media screen and (max-width: 1280px) {
#header-menu.menu-main {
display: none;
}
label#menutogglebutton {
display: flex;
}
}
.menu-toggle {
width: 1.5rem;
}
.menu-toggle span {
margin: 0.2rem 0;
}
input#menutoggle ~ label span:nth-child(3) {
display: none;
}
input#menutoggle:checked ~ label span {
background: var(--wp--preset--color--black);
}
input#menutoggle:checked ~ label span:nth-child(1) {
top: 4px;
}
input#menutoggle:checked ~ label span:nth-child(2) {
top: -2px;
}   .read-more-rollout-link {
color: inherit;
font-weight: var(--wp--custom--font-weight--medium);
text-decoration: underline;
display: none;
}
.read-more-rollout {
--max-height-of-rollout-text: 16em;
--truncated-number-of-lines: 12;
}
@media (max-width: 600px) {
.read-more-rollout {
--max-height-of-rollout-text: 9em;
--truncated-number-of-lines: 6;
}
.read-more-rollout-link {
display: inline;
}
} .is-404 {
padding-top: var(--wp--preset--spacing--32);
padding-bottom: var(--wp--preset--spacing--80);
}
.is-404 .wp-block-columns {
gap: 2em var(--wp--preset--spacing--72);
}
.is-404 h1 {
margin-bottom: var(--wp--preset--spacing--80);
}
.is-404 p {
max-width: 38ch;
}
.is-404 .wp-element-button {
margin: var(--wp--preset--spacing--40) 0 0;
width: fit-content;
}
@media (max-width: 1023px) {
.is-404 .wp-block-column:has(img) {
display: none;
}
} @media screen and (max-width: 781px) {
.legal-page-table.wp-block-table {
display: block;
width: 100%;
overflow-x: auto;
}
.legal-page-table.wp-block-table thead {
display: none;
}
.legal-page-table.wp-block-table tbody,
.legal-page-table.wp-block-table tr {
display: block;
width: 100%;
margin-bottom: 2rem;
border-bottom: 1px solid var(--wp--preset--color--light-gold);
padding-bottom: 1rem;
}
.legal-page-table.wp-block-table tbody tr:last-child {
border-bottom: none;
margin: unset;
padding: unset;
}
.legal-page-table.wp-block-table td {
display: block;
width: 100%;
text-align: left;
padding-left: 0;
padding-bottom: 0.5rem;
position: relative;
border-bottom: none; 
}
.legal-page-table.wp-block-table td:first-child {
width: 100%;
font-weight: bold;
padding: 0.5rem 0;
border-bottom: 1px solid var(--wp--preset--color--light-gold); 
}
.legal-page-table.wp-block-table td:first-child::before {
content: attr(data-label) ": ";
font-weight: bold;
display: block;
width: 100%; 
margin-bottom: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--wp--preset--color--light-gold);
}
.legal-page-table.wp-block-table td:nth-child(2),
.legal-page-table.wp-block-table td:nth-child(3) {
width: 50%;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.legal-page-table.wp-block-table td:not(:first-child)::before {
content: attr(data-label) ": ";
font-weight: bold;
display: block;
margin-bottom: 0.75rem;
}
}       #footer {
background: var(--wp--preset--color--night);
background-image: url(//supercomputers.sk/wp-content/themes/supercomputers/images/footer-background.webp?v=2);
background-size: auto;
background-position: bottom right;
background-repeat: no-repeat;
color: var(--wp--preset--color--white);
padding: var(--wp--preset--spacing--80) 0 0;
color: rgba(255,255,255,0.5);
}
#footer a, #footer li a {
color: var(--wp--preset--color--white);
font-weight: var(--wp--custom--font-weight--medium);
}
#footer a:hover, #footer li a:hover {
color: var(--wp--preset--color--sky-light);
}
.footer-cta::after {
content: '';
display: block;
height: 1px;
width: 100%;
background: var(--wp--preset--color--grey);
opacity: 0.12;
margin-top: var(--wp--preset--spacing--80);
}
.footer-grid {
display: grid;
padding: var(--wp--preset--spacing--80) 0 var(--wp--preset--spacing--56);
row-gap: var(--wp--preset--spacing--80);
}
.footer-brand-row {
display: grid;
grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 3.2fr);
align-items: center;
column-gap: var(--wp--preset--spacing--32);
}
.footer-main-grid {
display: grid;
grid-template-columns:
minmax(0, 0.75fr)
minmax(0, 1.1fr)
minmax(0, 1.15fr)
minmax(0, 1.25fr);
align-items: start;
column-gap: var(--wp--preset--spacing--32);
}
.footer-bottom-grid {
display: grid;
grid-template-columns: max-content minmax(10rem, 1fr) max-content max-content;
align-items: start;
column-gap: var(--wp--preset--spacing--32);
row-gap: var(--wp--preset--spacing--16);
padding-top: var(--wp--preset--spacing--32);
border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-bottom-grid > p {
margin: 0;
align-self: start;
}
.footer-logo a {
display: flex;
}
.footer-tagline {
max-width: 38ch;
margin: 0;
text-wrap: balance;
}
.footer-menu ul {
list-style: none;
padding: 0;
}
.footer-grid h4 {
font-weight: var(--wp--custom--font-weight--default);
font-size: var(--wp--preset--font-size--large);
margin: 0 0 var(--wp--preset--spacing--24);
}
#footer address {
font-style: normal;
}
.footer-company-data {
margin-top: var(--wp--preset--spacing--32);
padding-top: var(--wp--preset--spacing--24);
background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
background-position: left top;
background-repeat: no-repeat;
background-size: 4rem 1px;
}
.footer-company-data p {
margin: 0 0 var(--wp--preset--spacing--8);
}
.footer-company-data .footer-section-label {
margin-bottom: var(--wp--preset--spacing--16);
color: rgba(255,255,255,0.72);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--medium);
}
.footer-company-data .footer-registration {
margin-top: var(--wp--preset--spacing--12);
margin-bottom: 0;
font-size: 12px;
}
.footer-grid h4.footer-subsection-title {
margin-top: var(--wp--preset--spacing--32);
padding-top: var(--wp--preset--spacing--24);
background-image: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12));
background-position: left top;
background-repeat: no-repeat;
background-size: 4rem 1px;
}
.footer-by {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--8);
white-space: nowrap;
}
#back-to-top-button a:active {
background-color: var(--wp--preset--color--sky-medium);
}
@media screen and (max-width: 1024px) {
.footer-grid {
row-gap: var(--wp--preset--spacing--56);
}
.footer-main-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: var(--wp--preset--spacing--56);
}
.footer-bottom-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 781px) {
.footer-brand-row {
grid-template-columns: 1fr;
row-gap: var(--wp--preset--spacing--24);
}
.footer-tagline {
max-width: 38ch;
}
}
@media screen and (max-width: 520px) {
.footer-main-grid,
.footer-bottom-grid {
grid-template-columns: 1fr;
}
.footer-main-grid {
row-gap: var(--wp--preset--spacing--48);
}
.footer-bottom-grid {
row-gap: var(--wp--preset--spacing--16);
}
} figure.wp-block-gallery:not(.flickity-enabled) {
display: block !important;
overflow: hidden !important;
max-height: 600px !important;
}
figure.wp-block-gallery:not(.flickity-enabled) .wp-block-image {
display: none !important;
}
figure.wp-block-gallery:not(.flickity-enabled) .wp-block-image:first-child {
display: block !important;
width: 100% !important;
}
.wp-block-image img[src$=".svg"] {
min-width: 24px;
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) {
--timeline-columns:
minmax(12rem, 35fr)
minmax(0, 65fr);
--timeline-gap: clamp(3rem, 5vw, 5rem);
--timeline-step-gap: clamp(2rem, 4vw, 3rem);
--timeline-card-padding-x: clamp(1.1rem, 2vw, 1.6rem);
--timeline-card-padding-y: clamp(1rem, 2vw, 1.4rem);
--timeline-accent: #aeb4bf;
--timeline-line: #d7dbe2;
--timeline-card-background: #ffffff;
--timeline-card-border: #e3e6eb;
--timeline-node-background: #f5f5f5;
width: min(100%, 86rem);
margin-inline: auto;
} .process-timeline.company-history-timeline {
--timeline-columns: 7rem minmax(0, 1fr);
width: min(100%, 64rem);
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step {
position: relative;
display: grid;
grid-template-columns: var(--timeline-columns);
column-gap: var(--timeline-gap);
align-items: start;
margin: 0;
padding: 0 0 var(--timeline-step-gap);
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column {
min-width: 0;
margin: 0;
flex-basis: auto !important;
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step::before,
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step::after,
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:first-child::before,
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:first-child::after,
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child::after,
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child p::after {
content: none;
display: none;
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:first-child {
padding-top: 0.85rem;
text-align: right;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step h4 {
margin: 0;
font-size: clamp(1.35rem, 1.15rem + 0.45vw, 1.75rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.025em;
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child {
position: relative;
padding:
var(--timeline-card-padding-y)
var(--timeline-card-padding-x);
border: 1px solid var(--timeline-card-border);
border-radius: 0.75rem;
background: var(--timeline-card-background);
box-shadow: 0 0.5rem 1.75rem rgb(0 0 0 / 4%);
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child::before {
content: "";
position: absolute;
z-index: 0;
top: calc(var(--timeline-card-padding-y) + 0.75em); bottom: calc(
0px
- var(--timeline-step-gap)
- var(--timeline-card-padding-y)
- 0.75em
);
left: calc(0px - (var(--timeline-gap) / 2));
width: 1px;
background: var(--timeline-line);
transform: translateX(-50%);
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step:last-child > .wp-block-column:last-child::before {
bottom: calc(var(--timeline-card-padding-y) + 0.75em);
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child p {
position: relative;
margin: 0;
font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
font-weight: 500;
line-height: 1.55;
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child
> .wp-block-group {
gap: 1rem;
} .process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child p::before {
content: "";
position: absolute;
z-index: 2;
top: 0.75em;
left: calc(
0px
- var(--timeline-card-padding-x)
- (var(--timeline-gap) / 2)
);
width: 0.75rem;
height: 0.75rem;
border: 2px solid var(--timeline-accent);
border-radius: 50%;
background: var(--timeline-node-background);
background-image: none;
transform: translate(-50%, -50%);
} .process-timeline.company-history-timeline
> .process-step:last-child
> .wp-block-column:last-child p:last-child::before {
background: var(--timeline-accent);
} .process-timeline.projects-rd-timeline
> .process-step
> .wp-block-column:last-child a {
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
} .process-timeline.process-timeline--plain
> .process-step
> .wp-block-column:last-child {
border-color: transparent;
background: transparent;
box-shadow: none;
} @media (max-width: 781px) {
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) {
--timeline-columns: 1.75rem minmax(0, 1fr);
--timeline-gap: 0.75rem;
--timeline-step-gap: 1.75rem;
width: 100%;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step {
row-gap: 0.6rem;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:first-child,
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child {
grid-column: 2;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:first-child {
padding-top: 0;
text-align: left;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step h4 {
font-size: 1.5rem;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child {
padding: 1rem 1.1rem;
border-radius: 0.625rem;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child::before {
left: -1.75rem;
}
.process-timeline:is(
.company-history-timeline,
.projects-rd-timeline
) > .process-step > .wp-block-column:last-child p::before {
left: calc(0px - 1.1rem - 1.75rem);
}
} .history-intro {
width: min(100%, 67rem);
margin-inline: auto;
padding-top: clamp(3rem, 6vw, 5rem) !important;
padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}
.history-intro > .wp-block-columns {
display: grid;
grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.65fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: start;
width: 100%;
max-width: none;
margin: 0;
}
.history-intro > .wp-block-columns > .wp-block-column {
min-width: 0;
margin: 0;
} .history-intro > .wp-block-columns > .wp-block-column:last-child {
padding-left: 0 !important;
}
.history-intro h2 {
margin: 0;
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.04em;
} .history-intro p {
max-width: 42rem;
margin: 0;
font-size: clamp(1.5rem, 1.3rem + 0.45vw, 1.75rem);
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.015em;
} .history-intro p + p {
margin-top: 1.5rem;
font-size: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
}
@media (max-width: 781px) {
.history-intro {
padding-top: 3rem !important;
padding-bottom: 2.5rem !important;
}
.history-intro > .wp-block-columns {
grid-template-columns: minmax(0, 1fr);
gap: 1.75rem;
}
.history-intro h2 {
font-size: clamp(2.25rem, 10vw, 3rem);
}
.history-intro p {
font-size: 1.375rem;
}
.history-intro p + p {
margin-top: 1.25rem;
font-size: 1.125rem;
}
}
.project-jump-card {
position: relative;
isolation: isolate;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.project-card-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: block;
border-radius: inherit;
}
.project-jump-card:hover {
transform: translateY(-0.2rem);
box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 7%);
}
.project-card-overlay:focus-visible {
outline: 0.15rem solid currentColor;
outline-offset: 0.2rem;
}