html, body { /* background: rgba(82,73,73,1); */ /* background: url("/Media/Images/waves1.gif") center center / cover no-repeat fixed; */ background: var(--bg) center center / cover no-repeat fixed; padding: 0; margin: 0; width: 100%; min-height: 100%; } /* Default (no JS) fallback */ :root { --bg: url("/Media/Images/waves1.gif"); } /* Time-based variants (JS will toggle these classes on ) */ body.bg-wave-1 { --bg: url("/Media/Images/waves1.gif"); } /* daytime */ body.bg-wave-2 { --bg: url("/Media/Images/waves2.gif"); } /* night */ body.bg-wave-3 { --bg: url("/Media/Images/waves3.gif"); } /* morning/afternoon */ /* Accessibility: if user prefers reduced motion, use a still image for background*/ @media (prefers-reduced-motion: reduce) { :root { --bg: url("/Media/Images/img_1599.jpg"); } } .content-wrapper { margin: 0 auto; /* background:url(/Media/Images/img_1599.jpg) no-repeat center center fixed; */ background-size: cover; position: relative; width: 100%; /* Adjust width as required */ height: 100svh; /* height: 100%; */ min-height: 80vh !important; /* Make sure it takes up the full height of the viewport */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* This adds a shadow around the div */ /* border-radius: 15px; This makes the corners of the div slightly rounded */ overflow: hidden; } .content-wrapper:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; /* background: radial-gradient(circle at center, transparent 10%, black 100%); */ /* background:url(/Media/Images/img_1599.jpg) no-repeat center center fixed; */ /* inset: 0; */ opacity: 0.5; z-index: 0; } .container { margin: 0 auto; } .header { background-color: #333; } .title-container { background-color: rgba(0, 0, 0, 0.6); /* black with 60% opacity */ /* background: rgba(82, 73, 73, 0.45); */ backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-radius: 28px; /* squircle-ish */ padding: 10px 15px 15px 15px; /* some space between the text and the borders */ margin-bottom: 150px; color: rgb(208, 186, 186); /* white text for contrast */ } @media (max-width: 858px) { .title-container { display: none; } } .left-side, .right-side { position: absolute; /* Absolute positioning for the sides */ top: 0; bottom: 0; width: 50%; /* Split the width evenly between the two sides */ } .left-side { left: 130px; background: transparent !important; /* Transparent background to show the body's background image */ display: flex; justify-content: center; /* aligns items horizontally to the center */ align-items: center; /* aligns items vertically to the center */ height: 80vh; /* takes up full viewport height */ flex-direction: column; z-index: 1; } .right-side { display: block; right: 0; opacity: 0.75; /* background: rgba(82,73,73,1) 90%; Different background color for the clipped section. Replace with your desired color */ background: transparent; clip-path: polygon( 50% 0, 100% 0, 100% 100%, 0 100% ); /* Adjust the clip-path as needed */ z-index: 1; } .right-side::before { content: ""; /* position: absolute; */ position: fixed; inset: 0; background: linear-gradient( 360deg, rgba(82, 73, 73, 0.65) 0%, rgba(199, 187, 187, 0.45) 60%, rgba(255, 254, 255, 0.35) 100% ); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); z-index: 0; } .right-side > * { position: relative; z-index: 1; } /* Hide .right-side for smaller screens */ /* @media (max-width: 844px) { .right-side { display: none; } } */ @media (max-width: 844px) { .recent-tweets { display: none; } .recent-works ul li { margin-top: 18px; font-size: 1.05rem; margin-bottom: 18px; } /* Reset progressive indent on mobile */ .recent-works ul li:nth-child(2), .recent-works ul li:nth-child(3) { margin-left: 0; } /* Hide the RECENT text but keep the heading's height/spacing */ .recent-works h2 { color: transparent; /* text invisible */ text-shadow: none; /* remove glow */ /* Keep font-size and padding so the list doesn't shift upward */ } } img { border-radius: 50%; align-content: center; } body:after { line-height: 100px; /* height of footer */ white-space: pre; content: "\A"; } .main h1 { color: #fff; font-weight: 300; margin-top: 80px; margin-bottom: 40px; } .main h2 { border: bold; color: grey; font-weight: 30; } footer#footer { position: fixed; bottom: 0; width: 100%; height: 20%; /* Footer takes up 20% of the height of the page */ /* background-color: #6f4e4e; Change this as needed */ /* background: linear-gradient(360deg, rgba(82,73,73,1) 0%, rgb(199, 187, 187) 52%, rgba(255,254,255,1) 100%); */ background: transparent; text-align: center; z-index: 1; } footer#footer::before { content: ""; position: absolute; inset: 0; /* same palette as your nav, but with alpha */ background: linear-gradient( /* 360deg, rgba(82, 73, 73, 0.75) 0%, rgba(199, 187, 187, 0.55) 52%, rgba(255, 254, 255, 0.35) 100% */ 0deg, rgba(82, 73, 73, 0.75) 0%, rgba(199, 187, 187, 0.55) 30%, rgba(255, 254, 255, 0.25) 70%, transparent 100% ); /* blur whatever is behind the footer */ backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); /* Safari */ /* border-top: 1px solid rgba(255, 255, 255, 0.25); */ pointer-events: none; /* let clicks pass through to links/buttons */ z-index: 0; } .text-slider-container { /* This centers the text-slider vertically in the footer */ position: relative; top: 50%; transform: translateY(-50%); } .copyright { position: absolute; bottom: 10px; left: 10px; font-size: 10px; color: #111827; } .recent-works { /* position: absolute; */ position: sticky; right: 0; width: 65%; /* Adjust as needed */ padding: 20px; color: white; /* Change color as needed */ } .recent-works { top: 13%; /* Adjust as needed */ left: 40%; margin-bottom: 100px; } .recent-tweets { /* top: 58%; Adjust as needed */ /* left: 25%; */ bottom: 18%; left: 8%; /* position: absolute; */ position: relative; /* right: 0; */ /* width: 55%; */ margin-top: auto; padding: 10px; color: white; } .recent-works ul li { font-size: 1.5rem; /* Change this to adjust the size of the text */ font-weight: 500; /* Adjust this for the desired font weight */ color: rgba(0, 0, 0, 0.6); font-style: oblique 8deg; } /* Progressive indent LEFT for polygon alignment */ .recent-works ul li:nth-child(1) { margin-left: -5px; } .recent-works ul li:nth-child(2) { margin-left: -40px; } .recent-works ul li:nth-child(3) { margin-left: -60px; } .recent-works ul li a { /* /* color: inherit; This will make the link color same as text color */ color: rgba(0, 0, 0, 0.6); text-decoration: none; /* This removes the underline */ } h1 { text-align: center; color: "#4F4D53"; font-family: "Roboto"; font-weight: 900; font-size: 100px; } h2 { text-align: center; color: "#E8BE02"; font-family: "Roboto"; font-size: 64px; } h3 { text-align: bottom top; color: "#E8BE02"; font-family: "Roboto"; font-size: 20px; } h4 { text-align: bottom right; color: "#FFFFFF"; font-family: "Roboto"; font-size: 14px; } p { text-align: center; color: "#4F4D53"; font-family: "Roboto"; font-size: 20px; } footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; /* position: fixed; */ } @media (max-width: 952px) { h1 { text-align: center; color: "#4F4D53"; font-family: "Roboto"; font-weight: 900; font-size: 35px; } h2 { text-align: center; color: "#E8BE02"; font-family: "Roboto"; font-size: 30px; } .recent-works ul li { font-size: 1.35rem; } } @media (max-width: 858px) { h1 { text-align: center; color: "#4F4D53"; font-family: "Roboto"; font-weight: 900; font-size: 35px; } h2 { text-align: center; color: "#E8BE02"; font-family: "Roboto"; font-size: 30px; } .arrow { bottom: calc(120px + 12px) !important; top: auto; z-index: 20009; } /* just above bottom-docked nav */ .text-slider-container h3.text-slider { font-size: 0.95rem; } /* .arrow { left: 40%; } */ /* move footer to top on mobile */ footer#footer { position: fixed; top: 0; bottom: auto; } /* flip its divider to the bottom edge now */ footer#footer::before { /* border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); */ background: linear-gradient( 180deg, rgba(82, 73, 73, 0.75) 0%, rgba(199, 187, 187, 0.55) 30%, rgba(255, 254, 255, 0.25) 70%, transparent 100% ); } /* move copyright to top-right on mobile */ footer#footer .copyright { top: 10px; right: 10px; bottom: auto; left: auto; text-align: right; z-index: 1; /* above the frosted ::before */ } /* create safe space so content isn’t hidden under the fixed footer/nav */ html, body { /* padding-top: 20vh; matches footer height */ /* padding-bottom: 80px; matches nav height (line-height ~80px) */ height: 100%; overflow: hidden; /* no page scroll */ overscroll-behavior: contain; } } /* class .footer { background-color: #333; color: #fff; padding: 30px 0; } .footer p { font-family: 'Raleway', sans-serif; text-transform: uppercase; font-size: 11px; } */ @keyframes transition { } .arrow { /* top: 76.5vh; display: flex; left: 48%; margin-left: -55px; width: 100px; z-index: 1; */ display: flex; left: 50%; transform: translateX(-50%); margin-left: 0; /* width: 100px; */ z-index: 1; /* z-index: 10002; above nav (10000) & panes */ bottom: 20vh; /* sits just above 20% footer on large screens */ transition: all 0.5s ease; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; text-align: -webkit-right; position: fixed; } .arrow .btn { color: #fff; font-size: 35px; padding: 0; width: 100%; } /* .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-chevron-down:before { content: "\F078"; } */ *, :after, :before { box-sizing: border-box; } .arrow, .overlay { /* position: absolute; */ box-sizing: border-box; } .bounceInDown { animation-name: bounceInDown; animation-delay: 35s; } .animated { animation-duration: 0.6s; animation-fill-mode: both; } /* QUOTE STYLING */ #quoteForm { width: 300px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 10px; } #quoteForm label, #quoteForm input, #quoteForm textarea { display: block; width: 100%; margin-bottom: 10px; } .quote { width: 100%; margin: auto; padding-left: 4px; }