html{
scroll-behavior: smooth;
/*Stop the horizontal elastic overscroll: on iOS Safari the page can be dragged
sideways and rubber-bands back even with nothing overflowing. This locks the
horizontal axis at its boundary while leaving vertical scrolling untouched.*/
overscroll-behavior-x: none;
}
:root{
/*Accent: near-white core; only the faint tier keeps the magenta cast
from the project artwork (used in glows/shadows)*/
--accent: rgb(248, 248, 248);
--accent-soft: rgba(71, 71, 71, 0.45);
--accent-faint: rgba(244, 123, 255, 0.12);
/*Surface + text tiers: every grey on the site comes from these*/
--surface: #1B1B1B;
--text-hi: #f0f0f0;
--text-mid: #d9d9d9;
--text-dim: #b9b9b9;
--text-faint: #8f8f8f;
color-scheme: dark;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
color: #fff;
scrollbar-width: thin;
}
/*Self-hosted variable font, preloaded from each page's .
font-display: block = never paint a fallback font that would visibly swap;
with the preload the block period is imperceptible.*/
@font-face {
font-family: "Montserrat";
src: url("../Fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
font-weight: 100 900;
font-display: block;
}
header{
background-image: linear-gradient(#000000c4, #00000047 50%, #00000000);
position: fixed;
width: 100%;
z-index: 100;
top: 0;
transition: top 0.2s ease-in-out;
}
li{
list-style: none;
}
a{
color: white;
text-decoration: none;
}
a:focus-visible,
.hamburger:focus-visible{
outline: 2px solid #fff;
outline-offset: 4px;
border-radius: 2px;
}
/*No-JS fallback: reveal hero content that JS would otherwise animate in*/
.no-js .c-p-heropage,
.no-js .c-p-welcometext,
.no-js .c-heropage-icons{
opacity: 1;
}
.no-js .c-underline{
width: 30%;
}
.no-js .c-heropage-typingAnim-firstRow::before{
content: "Hi, I'm";
}
.no-js .c-heropage-typingAnim-secondRow::before{
content: "Vikke Kainulainen";
}
/*Nav Bar*/
.navbar{
background-color: rgba(0, 0, 0, 0);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin: 0 auto;
width: 90%;
max-width: 1280px;
min-height: 70px;
}
.nav-menu{
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.nav-branding{
font-size: 2rem;
font-weight: 600;
}
/*The "VK" monogram replaces the full wordmark at the hamburger breakpoint*/
.nav-branding-short{
display: none;
font-weight: 700;
letter-spacing: 0.02em;
}
.nav-link{
padding: 1rem;
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
}
.nav-item:hover{
cursor: pointer;
}
.nav-item a:after{
content: '';
display: block;
border-bottom: 2px solid white;
width: 0;
transition: width 0.3s ease-out;
}
.nav-item:hover a:after{
width: 100%;
}
.c-current-page a:after{
width: 100%;
}
.hamburger{
display: none;
cursor: pointer;
}
.bar{
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
background-color: white;
}
/*Hero (Home) page*/
.c-heropage-background{
background: linear-gradient(to right, #000000 0%, #1a1a1a 50%, #161616 100%);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: block;
background-position: center top;
z-index: -1;
}
.c-heropage-gradient{
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(0,0,0,.65);
background-image: linear-gradient(to right,rgb(0 0 0 / 65%) 0,rgb(59 59 59 / 37%) 45%,#8282820a 80%);
}
.c-heropage-content{
width: 100%;
min-height: 100svh;
display: flex;
align-items: center;
}
.c-heropage-inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(2rem, 6vw, 5rem);
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 8rem clamp(1.5rem, 6vw, 5rem) 4rem;
}
.c-heropage-info{
position: relative;
display: block;
flex: 1 1 55%;
min-width: 0;
}
.c-heropage-avatar{
position: relative;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.c-heropage-avatar-img{
width: clamp(180px, 24vw, 380px);
height: auto;
aspect-ratio: 1 / 1;
image-rendering: pixelated;
}
.c-heropage-icons{
transition: opacity 0.4s ease-in-out;
opacity: 0;
margin-top: 30px;
display: flex;
align-items: center;
gap: 12px;
}
.c-heropage-icon{
width: 30px;
height: 30px;
display: block;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.c-heropage-icons a:hover .c-heropage-icon,
.c-heropage-icons a:focus-visible .c-heropage-icon{
transform: translateY(-2px);
opacity: 0.8;
}
.c-description-text{
padding-top: 20px;
font-weight: 400;
}
.c-underline{
content: "";
display: block;
border-bottom: 2px solid rgb(255, 255, 255);
width: 0;
position: absolute;
transition: width 0.5s ease-in-out;
}
.c-underline.active{
width: 30%;
}
.c-heropage-icons.active{
opacity: 1;
}
/*Fonts*/
.c-h1-heropage, .c-p-heropage{
font-family: 'Montserrat', sans-serif;
color: #fff;
}
.c-h1-heropage{
font-size: clamp(2.25rem, 4.4vw, 4.4rem);
font-weight: 600;
}
@media(min-width:769px){
.c-h1-heropage{
white-space: nowrap;
}
}
.c-p-heropage{
font-size: 1.7em;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.c-p-welcometext{
font-size: 1.2em;
opacity: 0;
padding-top: 30px;
max-width: 46ch;
transition: opacity 0.4s ease-in-out;
}
.c-p-heropage.active{
opacity: 1;
}
.c-p-welcometext.active{
opacity: 1;
}
.highlight{
font-weight: bold;
}
h1 span::before{
content: "";
}
/*About page*/
.c-aboutpage-section{
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
display: flex;
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
justify-content: center;
/* align-items: center; */
}
.techIcons{
width: 100%;
padding-top: 2rem;
}
.tagContainer{
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-top: 1rem;
}
.tagText{
padding: 0.4rem 1rem;
}
.tagBlock{
background-color: var(--surface);
border-radius: 7px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: fit-content;
width: fit-content;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.pbl-12{
/*Top clears the fixed header; both ends scale down on small screens*/
padding-block: clamp(7rem, 14vw, 10rem) clamp(3rem, 7vw, 5rem);
}
.pb-2{
padding-bottom: 2rem;
}
.pb-10{
padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.c-aboutpage-intro-wrapper{
position: relative;
display: flex;
justify-content: center;
max-width: 1280px;
width: 100%;
}
.c-content-wrapper-vertical{
flex-direction: column;
align-items: flex-start;
}
.c-aboutpage-container{
width: 100%;
max-width: 1280px;
}
.c-experience-container{
padding-top: 2rem;
}
/*Fonts*/
.c-p-about{
padding-top: 1.25rem;
width: 100%;
max-width: 68ch;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
font-weight: 400;
line-height: 1.7;
color: var(--text-mid);
}
.c-h2-aboutpage{
font-size: clamp(1.9rem, 4.5vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.02em;
position: relative;
padding-bottom: 0.7rem;
}
.text-xl{
font-size: 1.45rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.text-l{
font-size: 1.15rem;
font-weight: 600;
}
.text-base{
width: 100%;
max-width: 68ch;
margin-top: 14px;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-weight: 300;
line-height: 1.7;
color: var(--text-mid);
}
.text-s{
margin-top: 3px;
color: var(--text-dim);
}
/*Project page*/
.c-projectPage-Container{
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.c-backgroundImg{
background-image: url('../Images/SpellBook_23.webp');
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-fadeIn{
animation: fade 0.7s ease-out both;
}
.c-fadeIn-delayed{
animation-delay: 0.15s;
}
@keyframes fade {
0% {opacity: 0; transform: translateY(14px);}
100% {opacity: 1; transform: translateY(0);}
}
.c-projectPage-heroSection{
text-align: center;
min-height: 72svh;
padding: 8rem 1.5rem 6rem;
display: flex;
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
justify-content: center;
align-items: center;
flex-direction: column;
}
.c-overlayGrad{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(to bottom, rgb(0 0 0 / 91%) 5%, rgb(0 0 0 / 33%) 30%, rgb(0 0 0 / 64%) 50%,
rgb(0 0 0 / 45%) 70%, rgb(0 0 0 / 26%) 90%, #060606d1 100%)
}
/*Clearer variant: image stays visible in the middle; dark only at the top
(nav/breadcrumb legibility) and at the bottom (title legibility + fade
into the page background)*/
.c-overlayGrad-clear{
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.2) 26%,
rgba(0, 0, 0, 0.12) 50%,
rgba(8, 8, 8, 0.55) 74%,
rgba(10, 10, 10, 0.88) 90%,
rgba(12, 12, 12, 0.98) 100%);
}
/*Hero variant: title block anchored bottom-left on the content column
instead of floating in the middle of the image*/
.c-projectHero-editorial{
text-align: left;
justify-content: flex-end;
/*Enough bottom clearance for the scroll arrow to sit under the title block*/
padding: 8rem 0 5.5rem;
}
.c-projectHero-inner{
position: relative;
z-index: 3;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.c-projectPage-ArrowDiv{
position: absolute;
bottom: 4%;
display: flex;
justify-content: center;
width: fit-content;
}
.c-projectPage-ArrowImg{
width: 42px;
height: 42px;
color: #fff;
z-index: 3;
animation: arrowFloat 2.2s ease-in-out infinite;
transition: color 0.2s ease-in-out;
}
.c-imageLink:hover .c-projectPage-ArrowImg,
.c-imageLink:focus-visible .c-projectPage-ArrowImg{
color: var(--accent);
}
@keyframes arrowFloat{
0%, 100% {transform: translateY(0);}
50% {transform: translateY(9px);}
}
@media (prefers-reduced-motion: reduce){
.c-projectPage-ArrowImg{
animation: none;
}
.c-fadeIn{
animation-duration: 0.01ms;
}
}
.c-imageLink{
z-index: 3;
display: contents;
}
.c-projectHeadline{
padding-top: 5rem;
display: flex;
position: relative;
width: 100%;
height: auto;
overflow: hidden;
justify-content: flex-start;
align-items: center;
}
.featuredProjectsGrid{
background-color: rgba(20, 20, 20, 0);
max-width: 1280px;
margin: 0 auto;
padding: 3rem 0 5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
width: 100%;
}
.featuredProjectsCard{
--radius: 12px;
background-color: var(--surface);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
0 8px 24px rgba(0, 0, 0, 0.35);
width: 100%;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover){
.featuredProjectsCard:hover{
cursor: pointer;
transform: translateY(-6px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
0 16px 40px rgba(0, 0, 0, 0.5),
0 12px 48px var(--accent-faint);
}
}
.featuredProjectsImage{
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}
.c-projectCard-info{
padding: 20px;
}
.c-projectCard-h1{
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: .3rem;
}
.c-projectCard-p{
margin-bottom: 1rem;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
.c-projectCard-desc{
line-height: 1.6;
color: var(--text-mid);
}
.c-allProjects{
padding-bottom: 4rem;
}
.c-allProjects-header{
display: inline-block;
}
.c-allProjects-header h2{
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-hi);
position: relative;
padding-bottom: 0.7rem;
}
.c-allProjects-Section{
background-color: rgba(20, 20, 20, 0);
max-width: 1280px;
margin: 0 auto;
padding: 2.5rem 0 3rem;
display: flex;
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
justify-content: space-between;
align-items: center;
gap: 3rem;
}
.c-allProjects-Card{
position: relative;
overflow: hidden;
background-color: black;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
display: flex;
height: 13em;
width: 69%;
justify-content: center;
align-items: center;
border-radius: 15px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
0 8px 24px rgba(0, 0, 0, 0.35);
}
/*Cover-fit image layer: inherits the background-image set by the variant classes below*/
.c-allProjects-Card::before{
content: "";
position: absolute;
inset: 0;
background-image: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.4s ease-in-out;
}
/*Legibility overlay between the image layer and the label*/
.c-allProjects-Card::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.05));
}
.c-allProjects-Card:hover{
cursor: pointer;
}
.c-allProjects-Card:hover::before{
transform: scale(1.08);
}
.c-allProjectsCard-Container h3{
font-size: 1.7rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.c-allProjectsCard-Container{
position: relative;
z-index: 2;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.c-allProjects-Card-Games{
background-image: url(../Images/ProjectPage/GamesBanner.webp);
}
.c-allProjects-Card-Models{
background-image: url(../Images/ProjectPage/3DProjects_Icon.webp);
}
.c-allProjects-Card-Others{
background-image: url(../Images/ProjectPage/OthersBg.webp);
}
/*Contact page*/
.c-contactpage-section{
max-width: 1280px;
margin: 0 auto;
padding: clamp(7rem, 14vw, 8rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 3rem);
/*Full viewport height + centered content = the content sits in the
vertical middle of the screen, with the footer just below the fold*/
min-height: 100svh;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.c-h1-contactpage{
font-size: clamp(2.1rem, 5vw, 3.2rem);
font-weight: 700;
letter-spacing: -0.02em;
position: relative;
padding-bottom: 0.8rem;
}
.c-contact-grid{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(1.25rem, 3vw, 2rem);
padding-top: clamp(2.5rem, 6vw, 3.5rem);
}
.c-contact-card{
background-color: var(--surface);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
0 8px 24px rgba(0, 0, 0, 0.35);
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover){
a.c-contact-card:hover{
transform: translateY(-5px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
0 16px 40px rgba(0, 0, 0, 0.5);
}
}
a.c-contact-card:active{
transform: translateY(-1px);
}
.c-contact-card-icon{
width: 44px;
height: 44px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.1rem;
color: var(--text-hi);
}
.c-contact-card-icon svg{
width: 22px;
height: 22px;
}
.c-contact-card-label{
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 0.35rem;
}
.c-contact-card-value{
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
font-weight: 600;
overflow-wrap: anywhere;
}
.c-contact-card-sub{
margin-top: 0.45rem;
font-size: 0.95rem;
font-weight: 400;
color: var(--text-dim);
}
.c-contact-socials-block{
padding-top: clamp(2.5rem, 6vw, 3.5rem);
}
.c-social-links{
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-top: 0.9rem;
}
.c-social-pill{
display: inline-flex;
align-items: center;
gap: 0.6rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50px;
padding: 0.65rem 1.5rem;
font-weight: 500;
background-color: rgba(255, 255, 255, 0);
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-social-pill img{
width: 20px;
height: 20px;
display: block;
}
.c-social-pill:hover,
.c-social-pill:focus-visible{
background-color: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
.c-social-pill:active{
transform: translateY(0);
}
/*Fonts*/
.c-h1-heroFont{
font-size: clamp(3.2rem, 8vw, 5.5rem);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 1rem;
color: #ffffff;
z-index: 3;
text-shadow: 0 0 24px var(--accent-soft),
0 0 80px var(--accent-faint),
0 2px 8px rgba(0, 0, 0, 0.8);
}
.c-h2-heroFont{
z-index: 3;
font-size: 1.15rem;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--text-dim);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.c-h1-project{
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-hi);
position: relative;
padding-bottom: 0.7rem;
}
/*Shared section-heading underline (also used by .c-allProjects-header h2, about-page h2s and the contact-page h1)*/
.c-h1-project::after,
.c-allProjects-header h2::after,
.c-h2-aboutpage::after,
.c-h1-contactpage::after{
background: var(--accent);
bottom: 0;
content: "";
height: 3px;
width: 56px;
left: 0;
position: absolute;
border-radius: 2px;
}
.c-h1-individualproject{
font-size: clamp(2.75rem, 6vw, 4.5rem);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
color: var(--text-hi);
z-index: 3;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7),
0 1px 4px rgba(0, 0, 0, 0.9);
}
.c-h2-individualproject{
font-size: clamp(1rem, 1.6vw, 1.2rem);
font-weight: 400;
letter-spacing: 0.02em;
margin-bottom: 1rem;
color: var(--text-mid);
z-index: 3;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.c-p-project{
margin-bottom: 1.5rem;
line-height: 1.6;
color: var(--text-hi);
}
/*Body copy on individual project pages stays at a readable measure*/
.c-project-copy{
max-width: 68ch;
}
/*Breadcrumbs (project pages)*/
.c-breadcrumbs{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-faint);
}
.c-breadcrumbs li{
display: flex;
align-items: center;
gap: 0.6rem;
}
/*Separator between crumbs*/
.c-breadcrumbs li + li::before{
content: "\203A";
color: #6f6f6f;
}
.c-breadcrumbs a{
color: var(--text-dim);
transition: color 0.2s ease-in-out;
}
.c-breadcrumbs a:hover,
.c-breadcrumbs a:focus-visible{
color: #fff;
}
.c-breadcrumbs-current{
color: var(--text-hi);
}
/*Placement: at the top of a listing page, clearing the fixed header*/
.c-breadcrumbs-top{
padding-top: 8.5rem;
}
/*Placement: overlaid on a project hero, in place of a back link.
Mirrors .c-projectPage-Container's width and padding so the crumbs
line up with the content below the hero.*/
.c-breadcrumbs-overlay{
position: absolute;
top: 7.5rem;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1280px;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
z-index: 10;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
/*Brighter crumbs when overlaid on imagery*/
.c-breadcrumbs-overlay .c-breadcrumbs a{
color: #e2e2e2;
}
.c-breadcrumbs-overlay .c-breadcrumbs,
.c-breadcrumbs-overlay .c-breadcrumbs-current{
color: #fff;
}
/*Interactive 3D model viewer (see Javascript/modelviewer.js)*/
.c-modelviewer{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
min-height: 320px;
margin-top: 1rem;
background-color: var(--surface);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
0 8px 24px rgba(0, 0, 0, 0.35);
overflow: hidden;
cursor: grab;
}
.c-modelviewer:active{
cursor: grabbing;
}
/*Bare variant: strips the card (surface, corners, shadow) so the model
floats directly on the page background*/
.c-modelviewer-bare{
background-color: transparent;
border-radius: 0;
box-shadow: none;
}
/*Failure state (set by partials/modelviewer.php when no canvas appears):
collapse the 16:9 box to a slim notice instead of an empty hole*/
.c-modelviewer-failed{
aspect-ratio: auto;
min-height: 0;
padding: 1rem 1.25rem;
cursor: default;
}
.c-modelviewer-failed .c-modelviewer-hint{
position: static;
transform: none;
text-transform: none;
letter-spacing: normal;
font-size: 0.85rem;
line-height: 1.6;
max-width: 44ch;
margin: 0 auto;
text-wrap: balance;
}
.c-modelviewer canvas{
display: block;
width: 100%;
height: 100%;
}
.c-modelviewer-hint{
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
pointer-events: none;
width: max-content;
max-width: 90%;
text-align: center;
}
.c-gallery-grid{
position: relative;
--gap: 16px;
--num-cols: 4;
box-sizing: border-box;
padding-top: 5rem;
padding-bottom: 5rem;
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
gap: var(--gap);
}
.c-gallery-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grid-item{
border-radius: 10px;
/*Cells without an image read as intentional empty slots, not broken tiles*/
background-color: var(--surface);
background-position: center;
background-size: cover;
display: block;
overflow: hidden;
position: relative;
padding-top: 100%;
aspect-ratio: 1/1;
transition: scale .3s cubic-bezier(0.21, -0.5, 0.41, 2.05),
box-shadow .3s cubic-bezier(0.21, -0.5, 0.41, 2.05);
}
.grid-item:hover{
scale: 1.05;
cursor: pointer;
box-shadow:inset 0px 0px 0px 3px rgb(242, 242, 242);
}
.grid-item > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*------ 3D MODELS GRID ------*/
.grid-bg1{
background-image: url(../Images/Projects/3D-models/Commercial_New.webp);
}
.grid-bg2{
background-image: url(../Images/Projects/3D-models/GummyBear_Red.webp);
}
/* INDIVIDUAL PROJECTS */
.c-menutools{
left: 1%;
bottom: 2%;
display: flex;
justify-content: flex-start;
width: fit-content;
flex-direction: row;
z-index: 10;
}
.c-project-toolholder{
position: relative;
flex-direction: row;
gap: 1rem;
display: flex;
justify-content: flex-start;
width: fit-content
}
.c-project-toolbox{
height: 2rem;
width: 2rem;
background: #f7f7f7; z-index: 1;
border-radius: 10px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.c-project-toolbox:hover{
cursor: pointer;
}
/*Responsivity*/
@media(max-width:768px){
.hamburger{
display: block;
}
.nav-branding-full{
display: none;
}
.nav-branding-short{
display: inline;
}
.hamburger.active .bar:nth-child(2){
opacity: 0;
}
.hamburger.active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu{
position: fixed;
left: -100%;
top: 70px;
gap: 0;
z-index: -1;
flex-direction: column;
background-color: rgb(11, 11, 11);
width: 100%;
text-align: center;
transition: left 0.4s;
}
.nav-item{
margin: 16px 0;
}
.nav-menu.active{
left: 0;
}
.c-heropage-inner{
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 7rem 1.5rem 3rem;
gap: 0;
}
/*Flatten the info wrapper so the avatar can slot between the texts and the icons*/
.c-heropage-info{
display: contents;
}
.c-heropage-avatar{
margin-top: 2rem;
}
.c-heropage-icons{
justify-content: center;
order: 1;
}
.c-p-welcometext{
max-width: 100%;
}
.c-underline{
position: static;
margin: 0 auto;
}
.c-heropage-avatar-img{
width: clamp(140px, 40vw, 220px);
}
.featuredProjectsGrid{
padding: 2rem 0 3rem;
gap: 1.5rem;
}
.c-allProjects-Section{
flex-direction: column;
padding: 2rem 0;
gap: 1.5rem;
}
.c-allProjects-Card{
width: 100%;
}
.c-projectHeadline{
padding-top: 3.5rem;
}
.c-gallery-grid{
--num-cols: 2;
}
}
/*Taller nav bar on large screens*/
@media only screen and (min-width: 1700px) {
.navbar{
width: 100%;
min-height: 100px;
}
}
/*Footer*/
.site-footer {
position: relative;
width: 100%;
color: #ccc;
padding: 50px 10%;
font-family: sans-serif;
}
.footer-container {
border-top: 1px solid #222;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
}
.footer-links,
.footer-social {
margin-top: 20px;
display: flex;
flex-direction: row;
gap: 0.8rem;
}
.footer-links a,
.footer-social a {
color: #aaa;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.2s;
}
.footer-links a:hover,
.footer-social a:hover {
color: white;
}
.footer-bottom {
margin-top: 20px;
text-align: center;
font-size: 0.875rem;
}
.copyright{
color: #555555;
}
/*Footer must be overridden after its base styles above*/
@media(max-width:768px){
.site-footer{
padding: 40px 1.5rem 24px;
}
.footer-container{
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
padding-top: 20px;
}
.footer-social{
order: 1;
margin-top: 0;
}
.footer-links{
order: 2;
margin-top: 0;
}
.footer-bottom{
order: 3;
margin-top: 0;
}
}
/* ----- Like button (project pages) ----- */
/* display:flex below would defeat the hidden attribute (author CSS beats the
UA stylesheet), so hidden must win explicitly — the button may only appear
once likes.js gets an answer from the API */
.c-like[hidden]{
display: none;
}
.c-like{
--like-accent: rgb(244, 123, 255);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
padding: 3rem 0 1rem;
}
.c-like-prompt{
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
.c-like-btn{
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background-color: var(--surface);
color: var(--text-mid);
font: inherit;
font-weight: 600;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
0 8px 24px rgba(0, 0, 0, 0.35);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover){
.c-like-btn:hover{
transform: translateY(-3px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
0 16px 40px rgba(0, 0, 0, 0.5),
0 12px 48px var(--accent-faint);
}
.c-like-btn.is-liked:hover{
transform: none;
}
}
.c-like-btn:focus-visible{
outline: 2px solid var(--text-hi);
outline-offset: 3px;
}
.c-like-btn:active{
transform: translateY(0) scale(0.97);
}
.c-like-btn.is-liked{
color: var(--text-hi);
cursor: default;
}
.c-like-btn.is-liked:active{
transform: none;
}
.c-like-heart{
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
transition: fill 0.3s cubic-bezier(0.22, 1, 0.36, 1),
stroke 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-like-btn.is-liked .c-like-heart{
fill: var(--like-accent);
stroke: var(--like-accent);
filter: drop-shadow(0 0 6px rgba(244, 123, 255, 0.45));
}
.c-like-btn.is-pop .c-like-heart{
animation: c-like-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes c-like-pop{
0%{ transform: scale(1); }
40%{ transform: scale(1.45); }
100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
.c-like-btn,
.c-like-heart{
transition: none;
}
.c-like-btn.is-pop .c-like-heart{
animation: none;
}
}