You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1564 lines
25 KiB
1564 lines
25 KiB
// Smooth Scrolling
|
|
html {
|
|
scroll-behavior: smooth;
|
|
height: 100%;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
& #fader {
|
|
background: $gray-900;
|
|
}
|
|
|
|
& * {
|
|
background: $gray-900 !important;
|
|
color: hsla(0, 0%, 100%, 0.87) !important;
|
|
}
|
|
|
|
& a:not(.nav-link, .see-more):hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
& .nav-link.active.language {
|
|
color: $gray-900 !important;
|
|
background-color: $contrast !important;
|
|
}
|
|
|
|
& .nav-link.language {
|
|
color: $contrast !important;
|
|
}
|
|
|
|
& .schedule a.design {
|
|
border: 2px solid currentColor;
|
|
}
|
|
|
|
& .screen-reader-text:focus {
|
|
background-color: $contrast;
|
|
}
|
|
|
|
& .cta-card {
|
|
background-color: $gray-800 !important;
|
|
& * {
|
|
background-color: $gray-800 !important;
|
|
}
|
|
}
|
|
|
|
& article.first {
|
|
background-color: $gray-800 !important;
|
|
|
|
& * {
|
|
background-color: $gray-800 !important;
|
|
}
|
|
}
|
|
|
|
& article.card {
|
|
background-color: $gray-800 !important;
|
|
|
|
& * {
|
|
background-color: $gray-800 !important;
|
|
}
|
|
}
|
|
|
|
& .logo {
|
|
fill: $contrast !important;
|
|
}
|
|
|
|
& .vr {
|
|
background-color: $contrast !important;
|
|
}
|
|
|
|
& a {
|
|
color: $contrast !important;
|
|
border-color: $contrast;
|
|
}
|
|
|
|
& .inline-svg svg path {
|
|
color: $contrast !important;
|
|
}
|
|
|
|
& #otfura path {
|
|
fill: $white !important;
|
|
}
|
|
|
|
& .acctoggle {
|
|
color: $contrast;
|
|
border: 2px solid $contrast;
|
|
}
|
|
|
|
& .tooltip {
|
|
background: transparent !important;
|
|
}
|
|
|
|
& .tablinkservice:hover {
|
|
color: $contrast !important;
|
|
border-left-color: $contrast;
|
|
}
|
|
|
|
& .tablinkservice:focus-visible {
|
|
border-left: 0.2rem solid $contrast !important;
|
|
}
|
|
|
|
& .active {
|
|
color: $contrast !important;
|
|
border-left-color: $contrast;
|
|
}
|
|
|
|
& .carousel-dark .carousel-indicators [data-bs-target] {
|
|
border-color: $contrast;
|
|
|
|
&:hover {
|
|
background-color: $contrast !important;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $contrast !important;
|
|
}
|
|
}
|
|
|
|
& .button-filter {
|
|
color: $contrast !important;
|
|
|
|
&:after {
|
|
background: $contrast !important;
|
|
}
|
|
}
|
|
|
|
& .carousel-control-next path {
|
|
fill: $contrast !important;
|
|
}
|
|
|
|
& .home a {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
// Body
|
|
body {
|
|
line-height: 1.6;
|
|
font-family: "Inter", sans-serif;
|
|
font-feature-settings: "calt" 1, "frac" 1, "case" 1, "ccmp" 1, "ss01" 1,
|
|
"ss02" 1, "ss03" 1, "zero" 1;
|
|
overflow-y: scroll;
|
|
color: $gray-800;
|
|
}
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
body {
|
|
font-family: "Inter var", sans-serif;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Accessibility
|
|
.acctoggle {
|
|
background: $white;
|
|
color: $blue-600;
|
|
outline: none;
|
|
border: 2px solid $blue-600;
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 1.25rem;
|
|
position: fixed;
|
|
bottom: auto;
|
|
top: 80vh;
|
|
left: 0;
|
|
right: auto;
|
|
z-index: 10;
|
|
transition: 0.2s;
|
|
will-change: border;
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
color: $blue-800;
|
|
border: 2px solid $blue-800;
|
|
}
|
|
}
|
|
|
|
.tooltip {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
// Backgrounds
|
|
.background-white {
|
|
background-color: $white;
|
|
}
|
|
|
|
.background-black {
|
|
background-color: $black;
|
|
}
|
|
|
|
.txt-dark {
|
|
color: #212529;
|
|
}
|
|
|
|
.txt-white {
|
|
color: $white !important;
|
|
}
|
|
|
|
// Headings
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-feature-settings: "ss01" 1, "ss03" 1, "zero" 1, "cv02" 1, "cv11" 1;
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
// SVG
|
|
.inline-svg {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
height: 1em;
|
|
width: 1em;
|
|
top: 0.1em;
|
|
position: relative;
|
|
}
|
|
|
|
// Navbar
|
|
nav {
|
|
z-index: 2;
|
|
}
|
|
|
|
nav .nav-link {
|
|
color: $blue-500;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
position: relative;
|
|
font-feature-settings: "cv11" 1;
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
height: 0.25rem;
|
|
background: transparent;
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:active,
|
|
&.active {
|
|
color: $blue-800;
|
|
|
|
&:after {
|
|
width: 100%;
|
|
background: currentColor;
|
|
}
|
|
}
|
|
|
|
&.language {
|
|
padding-block: 0.25rem;
|
|
}
|
|
|
|
&.active.language {
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:active,
|
|
&.active {
|
|
&:after {
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-toggler {
|
|
font-size: 1.5rem;
|
|
border: none;
|
|
}
|
|
|
|
.navbar-toggler:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.vr {
|
|
display: inline-block;
|
|
align-self: stretch;
|
|
width: 3px;
|
|
height: 2em;
|
|
background-color: currentColor;
|
|
opacity: 0.8;
|
|
position: absolute;
|
|
top: 26%;
|
|
}
|
|
|
|
.overlay {
|
|
height: 0;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: $blue-500;
|
|
overflow-x: hidden;
|
|
transition: 0.3s;
|
|
overflow: auto;
|
|
overscroll-behavior-y: contain;
|
|
|
|
& .container {
|
|
padding-top: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.overlay a:not(.brand) {
|
|
text-decoration: none;
|
|
font-size: 2.5rem;
|
|
color: $white;
|
|
display: block;
|
|
transition: 0.3s;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.overlay a:hover,
|
|
.overlay a:focus {
|
|
color: $gray-100;
|
|
}
|
|
|
|
.overlay .closebtn {
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
color: $white;
|
|
font-size: 1.5rem;
|
|
padding: 0.25rem 0.75rem;
|
|
}
|
|
|
|
#navbar-mobile .language {
|
|
text-decoration: none;
|
|
font-size: 2.5rem;
|
|
color: #fff;
|
|
display: inline-block;
|
|
transition: 0.3s;
|
|
font-weight: 500;
|
|
|
|
&.active {
|
|
padding-inline: 0.25rem;
|
|
}
|
|
}
|
|
|
|
#navbar-mobile hr {
|
|
width: 35%;
|
|
height: 2px;
|
|
opacity: 1;
|
|
}
|
|
|
|
// Home
|
|
.home {
|
|
& h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 300;
|
|
line-height: 100%;
|
|
}
|
|
& p {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
margin-bottom: 2rem;
|
|
}
|
|
a {
|
|
color: $white;
|
|
border: 2px solid $white;
|
|
padding: 0.85rem 1.5rem;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
transition: 0.25s ease-in-out;
|
|
|
|
& span {
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
color: $blue-500;
|
|
background-color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-text {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.15em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.dim {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.no-js {
|
|
display: none !important;
|
|
}
|
|
|
|
// Footer
|
|
|
|
footer {
|
|
background-color: $gray-100;
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.25rem;
|
|
color: $gray-700;
|
|
}
|
|
|
|
.cta .inline-svg {
|
|
color: $blue-600;
|
|
font-size: 2rem;
|
|
margin-right: 0.25rem;
|
|
|
|
&:hover {
|
|
color: $blue-700;
|
|
}
|
|
}
|
|
|
|
.svg-bg {
|
|
display: inline-block;
|
|
color: $white;
|
|
background-color: $blue-500;
|
|
font-size: 1.5rem;
|
|
padding: 0.7rem 1rem 0.5rem 1rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.otfhelp:not(:last-of-type) {
|
|
border-bottom: 1px solid $gray-300;
|
|
}
|
|
|
|
#footerNav .nav-link {
|
|
padding-inline: 0;
|
|
margin-right: 1.75rem;
|
|
color: $gray-800;
|
|
}
|
|
|
|
#footerIcons .inline-svg {
|
|
color: $blue-500;
|
|
font-size: 1.75rem;
|
|
margin-left: 0.75rem;
|
|
}
|
|
|
|
#footerLinks .nav-link {
|
|
font-size: 0.875rem;
|
|
padding-inline: 0;
|
|
margin-right: 1.5rem;
|
|
color: $blue-600;
|
|
}
|
|
|
|
.copyright {
|
|
font-size: 0.875rem;
|
|
color: $gray-600;
|
|
|
|
& a {
|
|
color: $blue-600;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Posts
|
|
|
|
.posts h1 {
|
|
font-size: 3.5rem;
|
|
color: $blue-500;
|
|
}
|
|
|
|
.post .header {
|
|
margin-top: -5rem;
|
|
min-height: 26rem;
|
|
background: $blue-500;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
& .white-block {
|
|
position: absolute;
|
|
background-color: $white;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 77%;
|
|
height: 40%;
|
|
}
|
|
}
|
|
|
|
.post .post-cover {
|
|
width: 100%;
|
|
max-height: 28rem;
|
|
object-fit: cover;
|
|
//margin-top: -5rem;
|
|
opacity: 0.4;
|
|
mix-blend-mode: multiply;
|
|
}
|
|
|
|
.post a {
|
|
color: $blue-600;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus-visible {
|
|
color: $blue-700;
|
|
}
|
|
}
|
|
|
|
.post-content {
|
|
& h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
& .anchor-tag {
|
|
margin-left: 0.5rem;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:active {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
& figure {
|
|
text-align: center;
|
|
padding-block: 1.5rem;
|
|
|
|
&.wide {
|
|
left: 50%;
|
|
margin-left: -32.5vw;
|
|
margin-right: -32.5vw;
|
|
max-width: 65vw;
|
|
position: relative;
|
|
right: 50%;
|
|
}
|
|
}
|
|
|
|
& img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
#reading-date,
|
|
#reading-time {
|
|
color: $gray-600;
|
|
}
|
|
|
|
.post .move-up {
|
|
margin-top: -10rem;
|
|
}
|
|
|
|
.post .cutoff {
|
|
z-index: 3;
|
|
}
|
|
|
|
.post .post-title {
|
|
font-size: 3rem;
|
|
font-weight: 500;
|
|
color: $gray-950;
|
|
}
|
|
|
|
.post .post-category {
|
|
font-weight: 700;
|
|
color: $blue-600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.paginate {
|
|
position: relative;
|
|
|
|
& p.text-uppercase {
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
& a {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
background-color: $blue-50;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination__buttons {
|
|
//display: flex;
|
|
//align-items: center;
|
|
//justify-content: space-between;
|
|
}
|
|
|
|
.button {
|
|
&.previous p, &.next p {
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
article.card {
|
|
padding: 1.5rem;
|
|
background-color: $blue-50;
|
|
border: none;
|
|
border-radius: 0;
|
|
height: 100%;
|
|
|
|
&:hover .grayscale {
|
|
filter: none;
|
|
}
|
|
|
|
& .grayscale {
|
|
filter: grayscale(1);
|
|
transition: 0.3s ease-in-out;
|
|
max-height: 20rem;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
& .info {
|
|
font-size: 0.875rem;
|
|
color: $blue-600;
|
|
}
|
|
|
|
& .title {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: $blue-700;
|
|
text-decoration: none;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
& .description {
|
|
color: $blue-800;
|
|
}
|
|
}
|
|
|
|
article .inline-svg {
|
|
color: $gray-600;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
article.first {
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
&:hover .grayscale {
|
|
filter: none;
|
|
}
|
|
|
|
& .grayscale {
|
|
filter: grayscale(1);
|
|
transition: 0.3s ease-in-out;
|
|
|
|
&:hover {
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
& img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
height: 100%;
|
|
}
|
|
|
|
& .data {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 60%;
|
|
padding: 2.25rem;
|
|
background-color: $blue-500;
|
|
color: $white;
|
|
}
|
|
|
|
& .title {
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
font-weight: 800;
|
|
color: $white;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
#supportNeeded {
|
|
display: none;
|
|
|
|
&.shown {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.schedule {
|
|
background-color: $blue-100;
|
|
color: $blue-800;
|
|
padding: 4rem 5rem;
|
|
|
|
& a {
|
|
color: $blue-800;
|
|
}
|
|
|
|
& a.design {
|
|
background-color: $blue-500;
|
|
color: $white;
|
|
padding: 1rem 3rem;
|
|
border-radius: 0;
|
|
text-decoration: none;
|
|
transition: 0.25s ease-in-out;
|
|
|
|
&:hover {
|
|
background-color: $blue-600;
|
|
}
|
|
|
|
& span {
|
|
margin-left: 0.5rem;
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
& span {
|
|
margin-left: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
address {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Work
|
|
.project {
|
|
a {
|
|
color: inherit;
|
|
}
|
|
&-title {
|
|
font-size: 3.5rem;
|
|
font-weight: 500;
|
|
margin-bottom: 2rem;
|
|
}
|
|
&-summary {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
margin-bottom: 1rem;
|
|
}
|
|
& .category {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
& .list {
|
|
font-size: 0.9rem;
|
|
opacity: 0.85;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
& a.links {
|
|
display: inline-flex;
|
|
text-transform: capitalize;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
font-weight: 600;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
& .sticky-xl-top {
|
|
font-feature-settings: "cv08" 0, "cv05" 1;
|
|
}
|
|
& p img {
|
|
max-width: 100%;
|
|
margin-block: 2rem;
|
|
}
|
|
& figure {
|
|
text-align: center;
|
|
padding-block: 1.5rem;
|
|
|
|
&.wide {
|
|
left: 50%;
|
|
margin-left: -32.5vw;
|
|
margin-right: -32.5vw;
|
|
max-width: 65vw;
|
|
position: relative;
|
|
right: 50%;
|
|
}
|
|
}
|
|
& figure img {
|
|
max-width: 100%;
|
|
}
|
|
& h2 {
|
|
margin-top: 3rem;
|
|
}
|
|
& .colored-card {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
padding: 1rem 1rem 4rem 1rem;
|
|
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08),
|
|
0px 3px 5px rgba(0, 0, 0, 0.04), 0px 2.5px 2px rgba(0, 0, 0, 0.02);
|
|
}
|
|
}
|
|
|
|
// About
|
|
.about {
|
|
& h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 3rem;
|
|
line-height: 1.1;
|
|
}
|
|
& p {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.zoom-wrapper {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
& img {
|
|
transition: transform 0.2s ease-in-out;
|
|
|
|
&:hover {
|
|
transform: scale(1.075);
|
|
}
|
|
}
|
|
}
|
|
|
|
.see-more {
|
|
color: $blue-500;
|
|
border: 2px solid $blue-500;
|
|
padding: 0.5rem 1.5rem;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
transition: 0.25s ease-in-out;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
& span {
|
|
margin-left: 0.5rem;
|
|
|
|
&.inline-svg {
|
|
height: 1.2em;
|
|
width: 1.2em;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
color: $white !important;
|
|
background-color: $blue-500;
|
|
}
|
|
}
|
|
|
|
.otfhelp .arrow-link {
|
|
color: $blue-600;
|
|
text-decoration: none;
|
|
|
|
& span {
|
|
margin-left: 0.5rem;
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
|
|
& span {
|
|
margin-left: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
& span {
|
|
margin-left: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cta .arrow-link {
|
|
font-size: 2.25rem;
|
|
font-weight: 600;
|
|
color: $blue-600;
|
|
text-decoration: none;
|
|
|
|
& span {
|
|
margin-left: 0.5rem;
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
|
|
& span {
|
|
margin-left: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
& span {
|
|
margin-left: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.link-arrow {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: $blue-600;
|
|
text-decoration: none;
|
|
|
|
& span {
|
|
top: 0.15em;
|
|
margin-left: 0.35rem;
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
|
|
& span {
|
|
margin-left: 0.55rem;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
& span {
|
|
margin-left: 0.55rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
details summary {
|
|
position: relative;
|
|
list-style: none;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
color: $blue-500;
|
|
cursor: pointer;
|
|
margin-block: 1.25rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
& .inline-svg {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
details:not(:last-of-type) {
|
|
border-bottom: 1px solid $gray-300;
|
|
}
|
|
|
|
details[open] summary svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.circle-icons span {
|
|
color: $blue-500;
|
|
font-size: 1.25rem;
|
|
margin-right: 0.35rem;
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
color: $blue-700;
|
|
}
|
|
}
|
|
|
|
.testimonial {
|
|
animation: fadeInAnimation 0.25s;
|
|
|
|
&-name {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&-link {
|
|
color: $blue-600;
|
|
|
|
&:hover,
|
|
:active,
|
|
:focus-visible {
|
|
color: $blue-700;
|
|
}
|
|
}
|
|
|
|
& blockquote {
|
|
color: $gray-700;
|
|
font-size: 2.25rem;
|
|
font-weight: 300;
|
|
margin-bottom: 1.5rem;
|
|
|
|
& p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#testimonials {
|
|
min-height: 22rem;
|
|
}
|
|
|
|
#testimonials-nojs {
|
|
padding-top: 2rem;
|
|
display: none;
|
|
|
|
& article {
|
|
padding-bottom: 2rem;
|
|
|
|
& blockquote {
|
|
margin-bottom: 0.5rem;
|
|
color: $gray-700;
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
|
|
& p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.carousel-indicators {
|
|
justify-content: start;
|
|
margin-bottom: 0.5rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.carousel-control-next {
|
|
top: unset;
|
|
opacity: 1;
|
|
justify-content: start;
|
|
width: 5%;
|
|
transition: background-image 0.25s ease-in-out;
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid $blue-500;
|
|
}
|
|
}
|
|
|
|
svg,
|
|
svg path {
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
.carousel-control-next, .olderposts {
|
|
&:hover,
|
|
&:focus-visible {
|
|
& path {
|
|
d: path(
|
|
"M0 14.018h45.021L34.899 3.758 38.298.405l15.784 16-15.784 16-3.399-3.353 10.121-10.26H0v-4.775z"
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.newerposts {
|
|
&:hover,
|
|
&:focus-visible {
|
|
& path {
|
|
d: path(
|
|
"M55 18.6658L9.91329 18.6658L20.0344 28.9255L16.6355 32.2785L0.851634 16.2786L16.6355 0.278808L20.0344 3.63184L9.91333 13.8914L55 13.8913L55 18.6658Z"
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.carousel-control-next {
|
|
left: 12.5%;
|
|
z-index: 3;
|
|
}
|
|
|
|
.carousel-dark .carousel-indicators [data-bs-target] {
|
|
box-sizing: content-box;
|
|
flex: 0 1 auto;
|
|
width: 12px;
|
|
height: 12px;
|
|
padding: 0;
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
text-indent: -999px;
|
|
cursor: pointer;
|
|
background-color: $gray-50;
|
|
background-clip: inherit;
|
|
border-radius: 50%;
|
|
border: 2px solid $blue-500;
|
|
opacity: 1;
|
|
transition: background-color 0.25s ease-in-out;
|
|
|
|
&.active,
|
|
&:hover {
|
|
background-color: $blue-500;
|
|
}
|
|
}
|
|
|
|
// Work
|
|
|
|
.work {
|
|
& a.title {
|
|
font-weight: 400;
|
|
font-size: 1.5rem;
|
|
line-height: 120%;
|
|
color: $gray-900;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
& a.category {
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
color: $blue-500;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.categories a.title {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
color: #18181b;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.back-overview {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: $blue-500;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $blue-600;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
& span {
|
|
margin-right: 0.35rem;
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&.selected {
|
|
& span {
|
|
margin-right: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.services {
|
|
background: linear-gradient(90deg, $gray-50 25%, $white 25%);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
// Tabs
|
|
.tab {
|
|
overflow: hidden;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.tablinkservice {
|
|
background-color: transparent;
|
|
width: 100%;
|
|
color: $blue-600;
|
|
display: block;
|
|
text-align: left;
|
|
text-decoration: none !important;
|
|
font-size: 1.2rem;
|
|
box-sizing: border-box;
|
|
border: 0;
|
|
cursor: pointer;
|
|
padding-block: 10px;
|
|
padding-left: 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
border-left: 0.25rem solid transparent;
|
|
outline: none !important;
|
|
transition: all 0.25s ease-in-out;
|
|
|
|
&:hover {
|
|
color: $blue-800;
|
|
background-color: $gray-100;
|
|
}
|
|
|
|
&:focus-visible {
|
|
color: $blue-800;
|
|
background-color: $gray-100;
|
|
border-left: 0.2rem solid $blue-900;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $gray-100;
|
|
color: $blue-800;
|
|
border-left: 0.25rem solid $blue-900;
|
|
}
|
|
}
|
|
|
|
.tabcontentservice {
|
|
animation: fadeInAnimation 1s;
|
|
margin-top: 5rem;
|
|
display: none;
|
|
}
|
|
|
|
.tabcontent {
|
|
display: none;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.work {
|
|
&.visible {
|
|
animation: fadeInAnimation 1s;
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
.button-filter {
|
|
border: none;
|
|
background: transparent;
|
|
outline: none !important;
|
|
padding: 0;
|
|
margin-right: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
color: $blue-500;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
height: 0.25rem;
|
|
background: transparent;
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
transition: 0.25s ease-in-out;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&.selected {
|
|
color: $blue-800;
|
|
|
|
&:after {
|
|
width: 100%;
|
|
background: currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Contact
|
|
|
|
.social-links {
|
|
margin-bottom: 5rem;
|
|
|
|
& p {
|
|
margin-bottom: 0;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
& a {
|
|
color: $blue-500;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact {
|
|
font-size: 1.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.cta-card {
|
|
background-color: $blue-500;
|
|
color: $white;
|
|
padding: 3rem 5rem;
|
|
|
|
& h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
& .arrow-link {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: $white;
|
|
text-decoration: none;
|
|
|
|
& span {
|
|
margin-left: 0.45rem;
|
|
transition: 0.25s ease-in-out;
|
|
top: 0.2em;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible,
|
|
&:focus {
|
|
& span {
|
|
margin-left: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(lg) {
|
|
.services {
|
|
background: transparent;
|
|
}
|
|
|
|
.carousel-indicators {
|
|
right: unset;
|
|
justify-content: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.carousel-control-next {
|
|
right: unset;
|
|
left: 35%;
|
|
top: unset;
|
|
opacity: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.carousel-dark .carousel-indicators [data-bs-target] {
|
|
box-sizing: content-box;
|
|
flex: 0 1 auto;
|
|
width: 14px;
|
|
height: 14px;
|
|
padding: 0;
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
text-indent: -999px;
|
|
cursor: pointer;
|
|
background-color: $white;
|
|
background-clip: inherit;
|
|
border-radius: 50%;
|
|
border: 2px solid $blue-500;
|
|
opacity: 1;
|
|
|
|
&.active {
|
|
background-color: $blue-500;
|
|
}
|
|
}
|
|
|
|
article.card .grayscale {
|
|
max-height: 12rem;
|
|
}
|
|
|
|
.button-filter {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.post .header {
|
|
margin-top: -5rem;
|
|
min-height: 5rem;
|
|
}
|
|
|
|
.post .header .white-block {
|
|
display: none;
|
|
}
|
|
|
|
.post .move-up {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.carousel-control-next {
|
|
width: unset;
|
|
}
|
|
|
|
.testimonial {
|
|
&-name {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
& blockquote {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.social-links {
|
|
& div {
|
|
position: relative;
|
|
|
|
&:not(:last-of-type):after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0.75rem;
|
|
bottom: -1.5rem;
|
|
height: 1px;
|
|
width: 20%;
|
|
border-bottom: 1px solid $gray-400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
.copyright {
|
|
font-size: 0.75rem;
|
|
}
|
|
.schedule {
|
|
padding: 2rem;
|
|
}
|
|
article.first {
|
|
position: relative;
|
|
|
|
& img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
& .data {
|
|
position: initial;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.cta-card {
|
|
padding: 1.5rem;
|
|
}
|
|
.tabcontentservice {
|
|
margin-top: 0;
|
|
}
|
|
.home {
|
|
& h1 {
|
|
font-size: 3rem;
|
|
}
|
|
& h2 {
|
|
font-size: 1.25rem;
|
|
}
|
|
a:after {
|
|
content: none;
|
|
}
|
|
}
|
|
#testimonials {
|
|
min-height: 25rem;
|
|
}
|
|
.acctoggle {
|
|
position: fixed;
|
|
border-radius: 6px 0 0 6px;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 1.25rem;
|
|
top: auto;
|
|
bottom: 5vh;
|
|
right: 0;
|
|
left: auto;
|
|
z-index: 10;
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
|
|
// Clients
|
|
.client {
|
|
&-title {
|
|
font-size: 1.5rem;
|
|
line-height: 120%;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
&-description {
|
|
font-size: 1.125rem;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Accessibility
|
|
.screen-reader-text {
|
|
border: 0;
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute !important;
|
|
width: 1px;
|
|
word-wrap: normal !important;
|
|
}
|
|
|
|
.screen-reader-text:focus {
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 0 0.125rem 0.125rem rgba(0, 0, 0, 0.6);
|
|
clip-path: none;
|
|
color: $black;
|
|
background-color: $white;
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: bold;
|
|
height: auto;
|
|
width: auto;
|
|
top: 0.25rem;
|
|
left: 0.25rem;
|
|
line-height: normal;
|
|
padding: 1rem;
|
|
text-decoration: none;
|
|
z-index: 25;
|
|
}
|