/* ------------------------------------------------------------------ * Theme & spacing ----------------------------------------------------- */ :root{ --section-padding-vertical:2px; /* height of nav borders */ --section-padding-horizontal:0; --blog-margin-left: .5vw; --blog-margin-right: 0vw; --post-background:#FEFEFE; --section-background:#FEFEFE; --contact-background:#E2E7ED; --active-post-background:rgba(0, 63, 26, .0); --active-post-tint: 0, 63, 26; --non-static-post-bg-opacity: 0.12; /* Navigation bar */ --nav-height: 12vh; --sliding-panel-border-radius: calc(var(--nav-height)); --sliding-panel-brightnesss:1.02; --background-color:#033561; --navtext-color: #FFC42E; /*180, 172, 88*/ --nav-bg-opacity: .1; --slider-tint:rgb(255, 255, 255); --slider-bg-opacity: .9; --blur-strength: 6px; --hover-blur-strength: 0px; --hover-hue-change: -75deg; --nav-tint: 0,0,0; --hover-tint: 255, 255, 255; --slider-outline: 0, 0, 0; --active-blog-hue-change:75deg; /* Background Base colours */ --bg-base: #001f3f; /* deep navy 0, 31, 63*/ --yellow: #FFC42E; /* dark gold/yellow 255, 196, 46*/ } /* ------------------------------------------------------------------ * Sections ------------------------------------------------------------- */ main section{ min-height: calc(100vh - var(--nav-height)); width:100%; background:var(--section-background); padding:0 var(--section-padding-horizontal); border-top: 1px 0 0 solid rgba(28, 67, 100,1); display:none; } *, *::before, *::after {box-sizing:border-box;} main section.active{display:block;opacity:1;} /* ------------------------------------------------------------------ * Normalisation -------------------------------------------------------- */ body{ font-family:'Arial',sans-serif; background-color: var(--background-color); max-width:100vw; margin:0; } body > *:not(.glass-nav){ margin-top: calc(var(--nav-height) + var(--section-padding-vertical)); } /* 1️⃣ Make sure can host a positioned pseudo‑element */ body{ position:relative; /* allows ::after to be anchored inside it */ } /* 2️⃣ Bottom‑half overlay using the same CSS variable */ body::after{ content:""; position:fixed; /* stays on screen even when scrolling */ left:0; bottom:0; width:100%; height:50vh; /* exactly half of the viewport height */ background-color:var(--section-background); pointer-events:none; /* lets clicks pass through to underlying content */ z-index:-1; /* sits behind everything else */ } /* ------------------------------------------------------------------ * 3️⃣ Navigation bar -------------------------------------------------- */ .glass-nav{ position:fixed; top:0; left:0; right:0; height:var(--nav-height); display:flex; align-items:center; justify-content:space-between; padding:0 0vw; /* outer border of words */ background:rgba(var(--nav-tint),var(--nav-bg-opacity)); border-radius:1.8rem; border-bottom:1px solid rgba(28,67,100,.3); border-top:1px solid rgba(0,0,0,.1); z-index:1; overflow:hidden; pointer-events:auto; } /* Links – relative so we can position the pane absolutely inside each one */ .glass-nav a{ position:relative; width:100%; text-align:center; color:var(--navtext-color); text-decoration:none; font-weight:650; padding-left:0; padding-right:0; z-index:-1; font-size: clamp(1.2rem, 4vw, 1.6rem); /* responsive */ text-shadow: 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000; } .glass-nav a::before{ content:""; position:absolute; inset:-6vh -6vw; /* top/bottom left/right */ background:transparent; pointer-events:auto; z-index:1; } /* The sliding glass panel */ .glass-nav .panel{ backdrop-filter:hue-rotate(var(--hover-hue-change)) brightness(var(--sliding-panel-brightnesss)); -webkit-backdrop-filter:hue-rotate(var(--hover-hue-change)) brightness(var(--sliding-panel-brightnesss)); position:absolute; top:0px; left:0; bottom:0px; width:calc(var(--nav-height) + 0px); min-width:23vw; height:calc(var(--nav-height)+ 1px); background:rgba(var(--slider-tint),var(--slider-bg-opacity)); pointer-events:none; border-radius:var(--sliding-panel-border-radius); border:1.5px solid rgba(var(--slider-outline), .35); z-index:2; } /* ------------------------------------------------------------------ * Blog & preview ---------------------------------------------------- */ img{max-width:100%;height:auto;margin:20px auto;display:block;} .blog-container{display:flex;} .preview-list{ width:calc(18vw + 3rem);flex-shrink:0;padding-right:0; height:calc(100vh - 2px - var(--nav-height)); } .post-detail{flex-grow:1;background:var(--post-background); border-radius:8px;margin-left:var(--blog-margin-left); margin-right:var(--blog-margin-right);font-size:1.05rem;} .preview-list .post .full-body{display:none;} .meta{font-size:1rem;color:#555;margin-top:0;margin-bottom:1rem;} /* ------------------------------------------------------------------ * Static post (contact card) -------------------------------------- */ .post.static{ cursor:default; background:var(--contact-background); border-top-right-radius:8px;border-bottom-right-radius:8px; border-top-left-radius:0;border-bottom-left-radius:0; padding-top:.75rem;padding-bottom:1rem;padding-left:2.5rem; } /* ------------------------------------------------------------------ * Non‑static posts – glass panel look ----------------------------- */ .post:not(.static){ background:rgba(var(--nav-tint),var(--non-static-post-bg-opacity)); border-radius:1.5rem; border-top:1.5px solid rgba(0,0,0,.2); border-bottom:1.5px solid rgba(0,0,0,.2); margin-top:.4vh;margin-left:.1vw;box-sizing:border-box; cursor:pointer; padding-left:2rem;padding-right:2rem;padding-bottom:1rem;padding-top:0; } .post:not(.static):hover{ backdrop-filter:hue-rotate(var(--active-blog-hue-change)); -webkit-backdrop-filter:hue-rotate(var(--active-blog-hue-change)); transform:none;transition:none;background:transparent; } .post.active:not(.static), .post.current:not(.static){ border-top:1.5px solid rgba(0,0,0,.0); border-bottom:1.5px solid rgba(0,0,0,.0); border-radius:0; background:var(--active-post-background); transform:none;transition:none; } /* ------------------------------------------------------------------ * Responsive tweaks ------------------------------------------------- */ @media (max-width:900px){ .post h3{margin:0 0 .25rem 0;} .meta{margin-top:.25rem;margin-bottom:.25rem;} .post.static p{margin-top:.5em;margin-bottom:0;} .post.static p + p{margin-top:.25em;} .post h3{font-size:1.1rem;} /* post preview font size */ .post:not(.static){ padding-left:1rem;padding-right:1rem; padding-bottom:1rem;padding-top:1rem; } .post.static{ padding-left:.75rem;padding-right:.75rem; } } .post-detail article > h3[data-no-title]{display:none;} /* ------------------------------------------------------------------ * CV styling ------------------------------------------------------- */ .cv-header-wrapper{display:flex;align-items:center;margin-bottom:0;margin-top:1px;} .cv-header-wrapper a.download-btn{ padding:.6rem 1.2rem;background:#2c3e50;color:#fff; text-decoration:none;border-radius:4px;font-size:1.1rem; } .cv-header-wrapper a.download-btn:hover{background:#d4af35;color:#222;} .cv-header-wrapper h2{flex:1;text-align:center;} .cv-container{ overflow:auto;border:3px solid #eaeaea;border-radius:8px;margin-top:0; } .cv-container iframe{ width:100%;aspect-ratio:8.5/11;border:none; } /* ------------------------------------------------------------------ * Image row -------------------------------------------------------- */ .image-row{display:flex;flex-wrap:wrap;} /* ---------------------------------------------------------- * Gallery container – CSS Grid layout * ---------------------------------------------------------- */ .gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 0%; padding: 0; } /* ---------------------------------------------------------- * Gallery item – glass‑panel look * ---------------------------------------------------------- */ .gallery-item { border-radius: 1.5rem; box-shadow: 0px -4px 8px rgba(0,0,0,.2); overflow: hidden; /* clip rounded corners */ position: relative; border-top: 1.5px solid rgba(0,0,0,.2); border-bottom:1.5px solid rgba(0,0,0,.2); border-left: 1.5px solid rgba(0,0,0,.2); border-right: 1.5px solid rgba(0,0,0,.2); margin-left: .5%; margin-right: 1%; margin-top: 1%; margin-bottom: 0; aspect-ratio: 4/3; width:99%; } /* ---------------------------------------------------------- * Image inside the panel * ---------------------------------------------------------- */ .gallery-item img{ width:100%; height:100%; object-fit:cover; object-position:center center; transform: translateY(-1.3em);/* centre‑focus – no top bleed */ display:block; box-shadow:none; } /* ---------------------------------------------------------- * Caption overlay * ---------------------------------------------------------- */ .gallery-item .description{ position:absolute; left:0; right:0; bottom:0; padding:.5rem 1rem; background:#ffffff7f; /* semi‑transparent white */ backdrop-filter:blur(4px); color:#444; text-align:center; font-size: clamp(.6rem, 2vw + .4rem, 1.1rem); max-height:50%; overflow:hidden; /* hide any overflow text */ } /* ---------------------------------------------------------- * Modal for gallery preview * ---------------------------------------------------------- */ .modal{ position:fixed;top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,.8);display:flex; flex-direction:column;align-items:center;justify-content:flex-start; visibility:hidden;opacity:0;transition:.3s ease;z-index:0; } .modal-caption{color:#fff;font-size:1rem;padding:0 12px;text-align:center;} .modal.show{visibility:visible;opacity:1;display:flex;} .modal img{ max-width:90vw;max-height:75vh;border-radius:4px;margin-bottom:8px; } .modal-zoom{ max-width:90vw;max-height:90vh;text-align:center;overflow:hidden; transform:scale(.6);opacity:0; transition: transform .5s ease-out, opacity .3s ease-in; } #imageModal.modal.show .modal-zoom{transform:scale(1);opacity:1;} /* ---------------------------------------------------------- * Responsive breakpoints – shrink to 2 columns on narrow screens * ---------------------------------------------------------- */ @media (max-width:600px){ .gallery{ grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------ * Coin flip demo ----------------------------------------------------- */ #coin-demo{ display:flex;flex-direction:column;align-items:center; justify-content:center;width:100%;margin:0 auto; } #coin-demo #controls{position:relative;top:20vh;margin-top:1vh;} #coin-demo button,#coin-demo select{ padding:.75rem 1.25rem;font-size:1.125rem;margin-right:.5rem; border:none;background:#444;color:white;cursor:pointer;border-radius:6px; margin-top:.5rem; } #coin-demo button:hover{background:#555;} #coin-demo .coin-btn.selected{background-color:#777;color:white;} #coin-demo .coins-wrapper{ display:flex;justify-content:center;align-items:flex-end; position:relative;height:270px;transform:translateX(50px); } #coin-demo .coin-flip{ width:30vw;max-width:142px;height:30vw;max-height:142px;transform-style:preserve-3d; position:absolute;top:calc(100% - 0px); } #coin-demo .coin-heads, #coin-demo .coin-tails{position:absolute;top:0;left:0;clip-path:circle(42%);} #coin-demo .coin-heads{animation:flip-head 1.5s ease-out forwards;} #coin-demo .coin-tails{animation:flip-tail 1.5s ease-out forwards;} #coin-demo .coin-flip.result-h .coin-heads{transform:rotateX(0deg);} #coin-demo .coin-flip.result-h .coin-tails{display:none;} #coin-demo .coin-flip.result-t .coin-tails{transform:rotateX(0deg);} #coin-demo .coin-flip.result-t .coin-heads{display:none;} @keyframes fly { from{top:100%;} to{top:23%;}} @keyframes flip-head{ 0%,100%{transform:rotateX(0deg);} 50%{transform:rotateX(180deg);} } @keyframes flip-tail{ 0%,100%{transform:rotateX(0deg);} 50%{transform:rotateX(180deg);} } @media (max-height:600px){ #coin-demo .coins-wrapper{height:27vh} #coin-demo #controls { margin-top:3.5rem;} } /* Hide the message by default */ #tetris-message { display: none; } @media (max-width: 875px) { /* … hide the Tetris iframe … */ #tetris-iframe { display: none; } /* … and show the friendly notice. Adjust styling as you like. */ #tetris-message { display: block; text-align: center; color: #fff; /* or any colour that matches your theme */ font-size: 1.2rem; margin-top: 20px; padding: 10px; background: rgba(0, 0, 0, 0.4); /* optional backdrop */ } }