@import url("https://fonts.googleapis.com/css2?family=Boldonse&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@1,400;1,500&family=Space+Grotesk:wght@400;500;600;700&display=swap");
/* Preloader Styles */
.loader{
height: 10px;
background-color: #fff;
position: absolute;
z-index: 9999;
}
.content{
display: none;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9998;
pointer-events: none;
opacity: 1;
transition: opacity 0.5s ease;
}
body.loaded::before {
opacity: 0;
}
/* Original Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
/* background-color: #ff0000; /* REMOVED red */
color: #1a1a1a;
line-height: 2;
background-color: #fff; /* Changed to white for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
background-size: 250px 250px; /* Increased size */
animation: noise-animation 0.2s steps(4) infinite; /* Keep animation */
overflow-x: hidden; /* Added for horizontal scroll compatibility */
}
.container {
max-width: 14400px;
margin: 0 auto;
padding: 1rem 1rem;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1rem;
}
.header {
font-size: 2rem 3rem!important;
font-weight: 500;
display: flex;
align-items: center;
}
.headerLeft {
position: relative;
text-align: left;
font-size: 1rem!important;
}
.headerLeft::after {
content: "®";
font-size: .8rem;
position: absolute;
top: -5px;
right: -12px;
}
.headerRight{
text-align: right;
color: #1a1a1a;
margin-left: 52.5rem;
}
.hero {
padding: 1rem 2rem;
position: relative;
}
.nav {
position: absolute;
padding: 1rem .5rem;
top: 2rem;
right: 1rem;
z-index: 10;
}
nav ul {
list-style: none;
flex-direction: column;
font-size: 1.5rem;
color: #666;
}
nav ul li {
line-height: 7rem;
text-align: right;
}
nav ul li a {
color: #666;
text-decoration: none;
margin-bottom: 1rem;
font-weight: 500;
font-size: 3rem;
}
.name {
font-size: 8rem;
font-weight: 900;
line-height: 1;
letter-spacing: -2px;
margin-bottom: 3rem;
position: relative;
}
.name::after {
content: "©";
font-size: 3rem;
position: absolute;
right: 886px;
top: 261px;
}
/* This is the new span next to REYES. Hide it by default (for desktop). */
.hero .name .reyes .mobile-reyes-copyright {
display: none;
}
.content-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.content-left {
max-width: 40%;
}
.content-right {
max-width: 40%;
}
.arrow {
position: relative;
display: inline-block;
font-size: 1.5rem;
top: -4rem;
margin-right: 0.5rem;
}
.tagline {
font-size: 1.3rem;
font-weight: 400;
margin-left: 1rem;
margin-bottom: 1rem;
margin-top: -4rem;
display: flex;
align-items: flex-start;
}
.cta-button {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #333;
color: white;
padding: 1rem 1.5rem;
border-radius: 2rem;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
margin-top: 1rem;
margin-left: 0rem;
width: 100%;
}
.cta-button:hover {
background-color: #222;
}
.profile-image {
width: 100%;
max-width: 360px;
border-radius: 5px;
margin-top: 2rem;
}
.availability {
text-align: right;
padding: 1rem 2rem;
margin-top: 5rem;
}
.availability-text {
font-size: 0.9rem;
color: #666;
}
.availability-date {
font-size: 5rem;
font-weight: 700;
line-height: 1;
}
.arrow-icon {
font-size: 1.5rem;
margin-left: 0.3rem;
display: inline-block;
transform: translateY(-2px)!important;
position: relative;
top: 2px!important;
}
.site-footer {
background-color: #090909; /* Lighter dark for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
animation: noise-animation 0.2s steps(4) infinite;
color: #f0f0f0; /* Light grey text for contrast */
padding: 0rem 5rem 0rem; /* Adjusted padding: Top, Left/Right, Bottom */
font-family: 'Inter', sans-serif; /* Consistent font */
position: relative; /* For positioning the back-to-top button */
}
.footer-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
gap: 10rem; /* Reduced gap for tighter main columns */
max-width: 1600px; /* Max width for content */
margin: 0 auto 2rem auto; /* Increased bottom margin */
}
.footer-column {
flex: 1; /* Allow columns to grow */
min-width: 200px!important; /* Adjusted min-width */
padding-right: 2rem; /* Add some padding to the right of each column for spacing before next column starts */
}
.footer-column.footer-menu {
flex-grow: 5!important; /* Give menu slightly more space if needed */
}
.footer-column.footer-socials,
.footer-column.footer-resources {
flex-grow: 1;
}
.footer-column h4 {
font-size: 1.1rem; /* Adjusted size */
font-weight: 600;
margin-bottom: 2rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #f3f4f6; /* Services title color - GOOD contrast on dark background */
padding-bottom: 0.75rem; /* Space for the border */
border-bottom: 1px solid #444; /* Separator line under headings */
display: inline-block; /* To make border only span the text width + padding */
width: calc(100% - 2rem); /* Span width of column minus its own padding-right */
}
.footer-column ul {
list-style: none;
padding: 0;
margin-top: 1rem; /* Add margin above the list */
}
.footer-column ul li {
margin-bottom: .8rem;
font-size: 1rem;
line-height: 1.5;
}
.footer-column ul li a {
color: #a0a0a0; /* Medium grey for links - keeping links a bit lighter for readability */
text-decoration: none;
font-size: 1rem; /* Slightly smaller than image */
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #ffffff; /* White on hover */
}
.footer-bottom {
display: flex;
justify-content: space-between; /* This will push copyright left, button right, and center time */
align-items: flex-end; /* Align items to the bottom */
padding-top: 3rem; /* Added padding top for separation */
/* border-top: 1px solid #444; */ /* User removed this */
max-width: 1600px; /* Max width for content */
margin: 0 auto; /* Center container */
}
.footer-copyright {
font-size: 2rem; /* Adjusted copyright text size */
font-weight: 500;
line-height: 1.2;
color: #f3f4f6; /* Services title color - GOOD contrast on dark background */
flex-basis: auto; /* Adjust basis */
text-align: left;
margin-left: -80rem!important;
}
.footer-copyright p {
margin-left: -80rem!important;
}
.footer-local-time {
text-align: center; /* Center the local time block */
/* flex-grow: 1; */ /* Removed to allow space-between to work for 3 items */
/* margin-left: -10rem; */ /* Removed */
/* margin-bottom: -5rem; */ /* Removed */
}
.footer-local-time p {
margin-right: -5rem!important;
font-size: 1rem; /* Adjusted size */
color: #f3f4f6; /* Services title color - GOOD contrast on dark background */
}
.footer-local-time p:first-child {
font-weight: 600;
bottom: 10rem!important;
text-transform: uppercase;
color: #f3f4f6; /* Services title color - GOOD contrast on dark background */
}
.back-to-top-button {
background-color: #f3f4f6; /* Light background - GOOD contrast for dark icon */
color: #090909; /* Icon color for contrast with new background */
width: 105px;
margin-left: 70rem!important;
height: 105px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
flex-shrink: 0; /* Prevent button from shrinking */
}
.back-to-top-button svg {
width: 55px; /* Adjust size of arrow */
height: 55px;
fill: #090909; /* Icon color for contrast - GOOD */
}
.back-to-top-button:hover {
background-color: #d1d5db; /* Slightly darker shade of #f3f4f6 for hover */
transform: translateY(-3px);
}
/* Removing .footer-right-utils as it's no longer used */
/*
.footer-right-utils {
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-basis: auto;
padding-left: 3rem;
}
*/
/* Ensure noise animation is defined if not already */
@keyframes noise-animation {
0% { background-position: 0 0; }
10% { background-position: -5% -5%; }
20% { background-position: -10% 5%; }
30% { background-position: 5% -10%; }
40% { background-position: -5% 15%; }
50% { background-position: -10% -5%; }
60% { background-position: 15% 5%; }
70% { background-position: -5% -10%; }
80% { background-position: 10% 5%; }
90% { background-position: 5% -5%; }
100% { background-position: 0 0; }
}
/* Responsive adjustments for footer */
@media (max-width: 1024px) { /* Adjust breakpoint for better column layout */
.footer-container {
gap: 2rem; /* Increase gap when columns might start to stack */
}
.footer-column h4 {
width: auto; /* Allow h4 to not span full width on smaller screens */
}
.footer-right-utils {
padding-left: 1rem;
}
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column; /* Stack columns */
align-items: center; /* Center items when stacked */
text-align: center;
}
.footer-column {
min-width: 100%; /* Full width for stacked columns */
margin-bottom: 2rem;
}
.footer-column h4 {
text-align: center;
}
.footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-copyright {
margin-bottom: 1.5rem;
font-size: 2rem;
}
.footer-local-time {
text-align: center;
margin-bottom: 1.5rem;
}
.footer-right-utils {
justify-content: center; /* Center the back-to-top button */
width: 100%;
margin-top: 1rem;
}
}
.highlight1{
color: #1a1a1a
}
.highlight2{
color: #1a1a1a
}
.highlight3{
color: #1a1a1a
}
.reyes{
letter-spacing:.535rem;
}
.content-center{
margin-top: -13rem;
}
/* Page Section Styles */
.page-section {
padding: 4rem 0; /* Add some vertical padding */
min-height: 10vh; /* Make sections take up a good portion of the viewport height */
border-bottom: 2px solid #ddd; /* Optional: separator between sections */
}
.page-section:last-of-type {
border-bottom: none;
}
.page-section h2 {
letter-spacing: .1rem;
font-size: 6.5rem!important;
font-weight: 700;
margin-top: 1.5rem;
margin-bottom: 1.5rem; /* Keep some space above the sticky container */
text-align: center;
}
/* Ensure #services section can grow and has dark theme */
#services.page-section.services-section-dark-bg {
min-height: auto;
color: #f3f4f6;
padding-top: 5rem;
padding-bottom: 6rem;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
background-color: #090909; /* Lighter dark for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
background-size: 250px 250px; /* Increased size */
animation: noise-animation 0.1s steps(1) infinite; /* Keep animation */
}
#services.page-section.services-section-dark-bg h2 {
font-size: 2.5rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(191, 191, 177);
}
/* Services Section - Stacked Cards NEW STRUCTURE */
:root {
--sticky-main-title-header-height: 120px;
--sticky-service-header-height: 85px;
}
.services-sticky-container {
position: relative;
padding: 0rem 3rem;
margin-top: -4.99rem;
margin-bottom: 0rem;
}
.sticky-header {
position: -webkit-sticky;
position: sticky;
color: #f3f4f6;
padding: 0 5rem;
border: none;
border-top: 1px solid #f3f4f6;
height: var(--sticky-service-header-height);
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
background-color: #090909; /* Lighter dark for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
background-size: 250px 250px; /* Increased size */
animation: noise-animation 0.1s steps(1) infinite; /* Keep animation */
}
.sticky-header.main-title-sticky-header {
margin-right: 40rem!important;
}
/* First header specific styles (Main Title) */
.services-sticky-container > .sticky-header:nth-child(1) {
height: var(--sticky-main-title-header-height);
margin-right: 60rem!important;
top: 0;
z-index: 4; /* Highest */
}
/* Shared styles for subsequent service item headers, h3, and numbers */
.sticky-header.service-item-sticky-header h3 {
border-top: 1px solid #f3f4f6; /* Restored border */
font-size: 2.5rem;
font-weight: 600;
margin-left: 40rem!important; /* Restored manual offset */
--tw-text-opacity: 1;
color: rgb(191, 191, 177);
}
.service-number {
margin-left: -40rem!important; /* Restored manual offset */
font-size: 4rem;
font-weight: 500;
color: #a0a0a0;
--tw-text-opacity: 1;
color: rgb(209 209 199 / var(--tw-text-opacity));
}
.service-number::after {
content: " ";
display: inline-block;
width: 3rem; /* or em/rem based on your scale */;
}
.service-title {
position: relative;
}
/* Stacking logic for subsequent headers using precise nth-child */
.services-sticky-container > .sticky-header:nth-child(3) { /* Header for Service 1 (Web Dev) */
top: var(--sticky-main-title-header-height);
margin-right: 40rem!important;
z-index: 3;
}
.services-sticky-container > .sticky-header:nth-child(5) { /* Header for Service 2 (Web Design) */
margin-right: 40rem!important;
top: calc(var(--sticky-main-title-header-height) + var(--sticky-service-header-height));
z-index: 2;
}
.services-sticky-container > .sticky-header:nth-child(7) { /* Header for Service 3 (SEO) */
margin-right: 40rem!important;
top: calc(var(--sticky-main-title-header-height) + var(--sticky-service-header-height) * 2);
z-index: 1;
}
.sticky-content-block {
color: #d1d5db;
padding: 3rem 2rem;
min-height: 70vh; /* CRUCIAL for scroll depth before the next sticky header */
--tw-text-opacity: 1;
color: rgb(162 158 154 / var(--tw-text-opacity));
background-color: #090909; /* Lighter dark for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
background-size: 250px 250px; /* Increased size */
animation: noise-animation 0.1s steps(1) infinite; /* Keep animation */
}
.services-sticky-container > .sticky-content-block:nth-of-type(4) { /* Last content block (for SEO) */
min-height: auto;
min-width: 100%!important;
padding-bottom: 6rem;
}
.main-title-sticky-content .services-subtitle {
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
margin-left: 42rem!important;
--tw-text-opacity: 1;
color: rgb(209 209 199 / var(--tw-text-opacity));
}
.main-title-sticky-content .services-intro-paragraph {
font-size: 1.7rem;
line-height: 2;
color: #d1d5db;
margin-bottom: 1rem;
text-align:justify;
margin-left: 40rem;
}
.service-item-sticky-content p {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 1rem;
margin-left: 40rem !important;
margin-top: 2rem; /* Added margin-top to push paragraph down */
font-family: 'Apollo 3', Courier, monospace;
font-weight: 300;
}
.service-subitems {
list-style: none;
padding-left: 0; /* Remove default padding */
margin-top: 2.5rem;
margin-left: 40rem !important; /* Restored manual offset */
}
.service-subitems li {
font-size: 1.5rem; /* Larger subitem text */
font-weight: 700;
padding: 0.8rem 0;
border-bottom: 1px solid #f3f4f6; /* Added border */
display: flex; /* Re-add display flex for number alignment if needed */
align-items: baseline; /* Re-add for number alignment if needed */
--tw-text-opacity: 1;
color: rgb(191 191 177 / var(--tw-text-opacity));
font-family: 'Apple SD Gothic Neo', Courier, monospace;
}
.subitem-number {
font-size: 0.9rem;
font-weight: 400;
margin-right: 1rem;
min-width: 25px; /* Ensure alignment */
--tw-text-opacity: 1;
color: rgb(126 118 108 / var(--tw-text-opacity));
}
/* Added styles for the animated project list */
.projects-container {
width: 200%;
max-width: 1000px;
margin-left: 25rem; /* Align with services-subtitle */
}
.projects-header,
.project-item {
display: flex;
gap: 10em;
padding: .5em;
opacity: 0;
transition: opacity 0.5s ease;
}
.projects-header {
margin-bottom: 0.5em;
padding-bottom: 1em;
}
.project-name,
.project-director {
flex: 2;
text-transform: uppercase;
font-family: monospace;
font-size: 0.9rem;
position: relative;
}
.project-name.is-typing::after,
.project-director.is-typing::after {
content: '|';
position: absolute;
right: -4px;
top: 0;
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.project-item {
color: #4f4f4f;
opacity: 1; /* Make items visible by default */
}
/* Noise Animation Keyframes - Ensure this exists */
@keyframes noise-animation {
0% { background-position: 0 0; }
10% { background-position: -5% -5%; }
20% { background-position: -10% 5%; }
30% { background-position: 5% -10%; }
40% { background-position: -5% 15%; }
50% { background-position: -10% -5%; }
60% { background-position: 15% 5%; }
70% { background-position: -5% -10%; }
80% { background-position: 10% 5%; }
90% { background-position: 5% -5%; }
100% { background-position: 0 0; }
}
/* Mobile Styles */
@media (max-width: 768px) {
/* .panel-split { // Keeping this structure, in case it's used elsewhere, but commenting out works-specifics
flex-direction: column;
} */
/* .panel-left, // Keeping this structure
.panel-right {
width: 100%;
height: 50%;
padding: var(--space-6);
} */
/* .panel-content { // Keeping this structure
width: 95%;
padding: var(--space-6);
} */
/* .title { // Potentially generic, but likely works-specific due to clamp values
font-size: clamp(2rem, 5vw, 2.5rem);
} */
/* .text { // Potentially generic
font-size: var(--text-base);
} */
}
/* NEW STYLES FOR #works section */
#works {
/* CSS Variables previously in :root */
--color-primary: #0a0a0a;
--color-secondary: #161616;
--color-accent: #ff2c2c;
--color-text: #f5f5f5;
--color-text-muted: rgba(245, 245, 245, 0.7);
--color-border: rgba(255, 255, 255, 0.05);
--color-overlay: rgba(0, 0, 0, 0.5);
--font-primary: "Inter", sans-serif;
--font-display: "Boldonse", serif;
--font-serif: "EB Garamond", serif;
--text-xs: 0.7rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.2rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--text-3xl: 3rem;
--text-mega: clamp(7rem, 15vw, 12rem);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-8: 3rem;
--space-10: 4rem;
--space-12: 6rem;
--menu-width: 250px;
--menu-collapsed-width: 60px;
--panel-padding: 5%;
--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;
--transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--word-stagger-delay: 0.02s;
/* Styles previously on body, now on #works */
font-family: var(--font-primary);
font-weight: 400;
overflow: hidden; /* Crucial for containing horizontal scroll */
height: 100vh; /* Give the section a defined viewport height */
background-color: var(--color-primary);
color: var(--color-text);
position: relative; /* For positioning of .page-container */
}
#works * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Left menu styles with enhanced animations */
#works .left-menu {
position: fixed; /* This will be fixed relative to viewport, but only visible if #works is scrolled to. Consider absolute? */
/* If #works is 100vh and overflow:hidden, fixed might be okay as it will appear part of #works. */
/* Let's try fixed for now as per original codepen. */
left: 0;
top: 0; /* This needs to be relative to #works's top, not viewport top if #works is not at viewport top. */
/* This implies #works needs to behave like a "modal" or full-screen section when active. */
/* For now, if #works is a normal section, this left-menu will be at the very top-left of the page, not section. */
/* Alternative: position: absolute, and ensure #works has position:relative. If left-menu is *inside* #works, then this is fine. */
/* The HTML places left-menu *inside* <section id="works">, so absolute is better. */
position: absolute;
height: 100%; /* Relative to #works height */
width: var(--menu-collapsed-width);
background-color: #090909; /* Match #services */
background-image: url("http://assets.iceable.com/img/noise-transparent.png"); /* Match #services */
background-size: 250px 250px; /* Match #services */
animation: noise-animation 0.1s steps(1) infinite; /* Match #services */
z-index: 100; /* Z-index within #works */
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid var(--color-border);
transition: width var(--transition-slow);
overflow: hidden;
}
#works .left-menu.expanded {
width: var(--menu-width);
box-shadow: 0 0 25px rgba(255, 0, 0, 0.626);
}
/* Push menu implementation */
/* body.menu-expanded .page-container becomes: */
#works.works-menu-expanded .page-container {
left: var(--menu-width);
}
#works .page-container {
/* position: fixed; */ /* Original */
position: absolute; /* Changed for scoping */
top: 0;
/* left: var(--menu-collapsed-width); */ /* This is initial state, handled by JS/CSS toggle */
right: 0;
bottom: 0;
height: 100%; /* Ensure it fills #works */
left: var(--menu-collapsed-width); /* Initial position */
/* width is implicitly window.innerWidth - left offset if right=0 */
/* We need to ensure its width is calculated correctly by JS panelWidth = pageContainer.offsetWidth */
overflow: hidden; /* This container should hide its own scrollbars for horizontal content */
transition: left var(--transition-slow);
}
#works .left-menu-top {
position: absolute;
top: var(--space-5);
left: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 101; /* within .left-menu */
}
#works .left-menu-middle {
position: absolute;
top: 50%;
left: 0;
width: 100%;
display: flex;
justify-content: center;
transform: translateY(-50%);
}
#works .logo {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 2px;
font-size: var(--text-lg);
color: var(--color-text);
white-space: nowrap;
transform: rotate(-90deg);
transition: transform var(--transition-slow), opacity var(--transition-medium);
}
#works .left-menu.expanded .logo {
opacity: 0;
transform: rotate(-90deg) translateY(20px);
}
#works .menu-btn {
width: 24px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 200; /* within .left-menu */
background: transparent;
border: none;
padding: 0;
}
#works .menu-btn span {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-text);
transition: transform var(--transition-medium),
opacity var(--transition-medium);
}
#works .left-menu.expanded .menu-btn span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
#works .left-menu.expanded .menu-btn span:nth-child(2) {
opacity: 0;
}
#works .left-menu.expanded .menu-btn span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
#works .section-nav {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-medium),
visibility var(--transition-medium);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding-left: var(--menu-collapsed-width);
padding-right: var(--space-5);
background-color: #090909; /* Match #services */
background-image: url("http://assets.iceable.com/img/noise-transparent.png"); /* Match #services */
animation: noise-animation 0.1s steps(1) infinite; /* Match #services */
}
#works .left-menu.expanded .section-nav {
opacity: 1;
visibility: visible;
/* background-color: #111; */ /* Ensure this also matches if it was different */
/* It will inherit from .left-menu if not specified, which is now correct */
}
#works .section-nav-item {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-text);
text-decoration: none;
margin: var(--space-3) 0;
font-size: var(--text-sm);
opacity: 0;
transition: opacity var(--transition-slow), transform var(--transition-slow),
color var(--transition-fast);
cursor: pointer;
transform: translateX(-20px);
display: flex;
align-items: center;
width: 100%;
}
#works .section-nav-item.animate-in {
opacity: 0.7;
transform: translateX(0);
transition-timing-function: var(--ease-out-back);
}
#works .section-nav-item:hover {
opacity: 1;
color: var(--color-accent);
}
#works .section-nav-item.active {
opacity: 1;
color: var(--color-accent);
}
#works .section-nav-item-number {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-xs);
opacity: 0.6;
margin-right: var(--space-3);
min-width: 20px;
transform: translateX(-10px);
transition: transform var(--transition-medium),
opacity var(--transition-medium);
}
#works .section-nav-item.animate-in .section-nav-item-number,
#works .section-nav-item:hover .section-nav-item-number {
transform: translateX(0);
opacity: 0.8;
}
#works .left-menu.expanded .section-nav-item:nth-child(1) {
transition-delay: 0.05s;
}
#works .left-menu.expanded .section-nav-item:nth-child(2) {
transition-delay: 0.08s;
}
#works .left-menu.expanded .section-nav-item:nth-child(3) {
transition-delay: 0.11s;
}
#works .left-menu.expanded .section-nav-item:nth-child(4) {
transition-delay: 0.14s;
}
#works .left-menu.expanded .section-nav-item:nth-child(5) {
transition-delay: 0.17s;
}
#works .left-menu.expanded .section-nav-item:nth-child(6) {
transition-delay: 0.2s;
}
#works .left-menu.expanded .section-nav-item:nth-child(7) {
transition-delay: 0.23s;
}
#works .left-menu.expanded .section-nav-item:nth-child(8) {
transition-delay: 0.26s;
}
#works .left-menu.expanded .section-nav-item:nth-child(9) {
transition-delay: 0.29s;
}
#works .horizontal-container {
position: absolute; /* Relative to .page-container */
top: 0;
left: 0;
width: 100%;
height: 100%;
/* overflow: hidden; /* JS handles scrolling content within panels-container */
}
#works .panels-container {
position: absolute; /* Relative to .horizontal-container */
top: 0;
left: 0;
height: 100%;
display: flex;
will-change: transform;
}
#works .panels-container.transitioning {
transition: transform var(--transition-slow);
}
#works .panel {
position: relative; /* Panels are direct children of panels-container */
height: 100%; /* Corrected to be 100% of its parent. */
overflow: hidden;
width: 100vw; /* Each panel is full viewport width for ScrollMagic */
/* Ensure other panel styles don't override this width unintentionally */
}
#works .panel-split {
display: flex;
}
#works .panel-left,
#works .panel-right {
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--panel-padding);
}
#works .panel-left {
background-color: #0000009a;
color: var(--color-text);
}
#works .panel-right {
background-color: #0000009a;
color: var(--color-text);
}
#works .image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#works .panel-full {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#works .panel-full-background {
position: absolute;
width: 110%; /* For parallax effect */
height: 110%; /* For parallax effect */
object-fit: cover;
z-index: 1;
will-change: transform;
filter: brightness(0.7);
}
#works .panel-full-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-overlay);
z-index: 2;
}
#works .panel-full-content {
position: relative;
z-index: 3;
width: 80%;
max-width: 800px;
color: var(--color-text);
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
}
#works .panel-video {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#works .video-background {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: 1;
object-fit: cover;
}
#works .panel-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 2;
}
#works .panel-video-content {
position: relative;
z-index: 3;
width: 80%;
max-width: 800px;
color: var(--color-text);
text-align: center;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
}
#works .panel-contact {
position: relative;
background-color: #0000009a;
display: flex;
align-items: center;
justify-content: center;
}
#works .contact-container {
width: 80%;
max-width: 800px;
text-align: center;
}
#works .contact-content {
position: relative;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
}
#works .contact-name {
font-size: clamp(6rem, 15vw, 10rem);
color: var(--color-text) !important; /* Important from original */
margin-bottom: var(--space-12);
line-height: 1;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.03em;
}
#works .email-wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-3);
background-color: rgba(255, 255, 255, 0.05);
padding: var(--space-4) var(--space-6);
border-radius: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: transform var(--transition-medium),
background-color var(--transition-medium);
}
#works .email-wrapper:hover {
background-color: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
#works .email {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-text);
text-decoration: none;
transition: color var(--transition-fast);
}
#works .email:hover {
color: var(--color-accent);
}
#works .copy-email {
background: none;
border: none;
cursor: pointer;
color: var(--color-text);
opacity: 0.7;
padding: var(--space-2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: opacity var(--transition-fast),
background-color var(--transition-fast), transform var(--transition-fast);
}
#works .copy-email:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
}
#works .copy-email:active {
transform: scale(0.95);
}
#works .copy-tooltip {
position: absolute;
bottom: -30px; /* Relative to .email-wrapper */
left: 50%;
transform: translateX(-50%);
background-color: var(--color-accent);
color: white;
padding: var(--space-1) var(--space-3);
border-radius: 4px;
font-size: var(--text-xs);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-medium),
visibility var(--transition-medium);
}
#works .copy-tooltip.active {
opacity: 1;
visibility: visible;
}
#works .panel-content { /* This is a general class for content within panels */
width: 120%; /* Original */
/* max-width might be defined by specific panel types like .panel-full-content */
opacity: 0;
transform: translateY(-30%);
transition: opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
overflow: visible; /* Original */
margin-left: 4rem!important;
}
#works .panel.active .panel-content,
#works .panel.active .panel-full-content,
#works .panel.active .panel-video-content,
#works .panel.active .contact-content {
opacity: 1;
transform: translateY(0);
}
#works .panel.visited .panel-content,
#works .panel.visited .panel-full-content,
#works .panel.visited .panel-video-content,
#works .panel.visited .contact-content {
opacity: 0.7;
transform: translateY(0);
}
#works .word {
display: inline-block;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s var(--ease-out-expo),
transform 0.4s var(--ease-out-expo);
}
#works .panel.active .word {
opacity: 1;
transform: translateY(0);
}
#works .panel.visited .word {
opacity: 0.7;
transform: translateY(0);
}
#works .chapter {
text-transform: uppercase;
margin-bottom: var(--space-6);
font-size: var(--text-sm);
letter-spacing: -0.03em;
color: var(--color-accent);
}
#works .chapter2 {
text-transform: uppercase;
margin-bottom: var(--space-6);
font-size: var(--text-sm);
letter-spacing: -0.03em;
color: var(--color-accent);
margin-left: -5rem;
}
#works .title-split-text2 {
font-size: 0px!important;
color: var(--color-text);
margin-left: -10rem!important;
margin-right: 10rem!important;
}
#works .title { /* This is a general title class from the new HTML */
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin-bottom: var(--space-6);
letter-spacing: -0.03em;
line-height: 1.3;
font-weight: 700;
color: var(--color-text);
width: 100%;
}
#works .subtitle {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: var(--space-8);
letter-spacing: -0.03em;
line-height: 1;
font-weight: 400;
color: var(--color-text);
}
#works .space-text { /* Used in panel-fixed and contact panel */
font-family: var(--font-display);
font-size: clamp(6rem, 15vw, 10rem);
line-height: 1;
font-weight: 900;
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: var(--space-6);
color: var(--color-accent); /* Original had this on .beyond-text, .contact-name had var(--color-text) */
}
#works .beyond-text { /* Used in panel-full COSMOS */
font-family: var(--font-display);
font-size: clamp(6rem, 15vw, 10rem);
line-height: 1;
font-weight: 900;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-6);
letter-spacing: -0.03em;
}
#works .mega-text { /* Used in INFINITE and VISION panels */
font-family: var(--font-display);
font-size: var(--text-mega);
line-height: 0.9;
font-weight: 900;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-6);
letter-spacing: -0.05em;
text-shadow: 0 0 20px rgba(255, 44, 44, 0.3);
}
#works .text { /* This is a general text class from the new HTML */
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
line-height: 1.4;
letter-spacing: normal;
color: var(--color-text); /* Original had var(--color-text-muted) for some .text elements from old CSS */
width: 100%;
}
#works .text p {
margin-bottom: var(--space-5);
}
#works .quote {
font-size: var(--text-lg);
margin-bottom: var(--space-5);
line-height: 1.4;
position: relative;
font-style: italic;
color: var(--color-text);
letter-spacing: -0.03em;
max-width: 100%;
}
#works .author {
font-size: var(--text-sm);
margin-bottom: var(--space-6);
color: var(--color-accent);
}
#works .image-container { /* Used in Sixth panel */
width: 100%;
max-width: 450px;
height: 300px;
margin-bottom: var(--space-6);
position: relative;
overflow: hidden;
transform: translateZ(0); /* For stacking context / performance */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-radius: 4px;
}
#works .image-container .image-wrapper { /* Already scoped by #works .image-wrapper */
position: relative; /* Original was not, this makes more sense if it's direct child of .image-container */
width: 100%;
height: 100%;
overflow: hidden;
}
#works .image-container img { /* Already scoped by #works .image-wrapper img */
width: 110%;
height: 110%;
object-fit: cover;
will-change: transform;
}
#works .editorial-split {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
height: 100%;
}
#works .editorial-split2 {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
height: 100%;
padding-right: 10rem;
}
#works .editorial-content {
padding: var(--panel-padding);
display: flex;
width: 100%;
flex-direction: column;
align-items: left;
padding-right: 20rem!important;
background-color: var(--color-primary); /* Will be inherited from #works */
}
#works .editorial-image {
height: 100%;
position: relative;
overflow: hidden;
}
#works .editorial-image .image-wrapper { /* Already scoped */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#works .editorial-image .image-wrapper2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
margin-left: 0;
padding-left: 10rem;
padding-top: 0rem; /* Corrected typo, assuming 0rem or adjust as needed */
padding-bottom: 10rem;
box-sizing: border-box; /* Add box-sizing to include padding within width/height */
}
#works .parallax-video { /* Styling for the video element itself */
width: 100%;
height: 100%;
object-fit: contain; /* Changed from cover to contain */
position: absolute;
top: 0;
left: -8.7rem;
}
#works .editorial-image img { /* Already scoped */
width: 110%;
height: 110%;
object-fit: cover;
filter: brightness(0.9);
will-change: transform;
}
#works .panel-fixed {
position: relative; /* This is a panel type */
height: 100%; /* panel-fixed is a .panel, so already height:100% */
overflow: hidden;
}
#works .panel-fixed-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
will-change: transform;
}
#works .panel-fixed-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5); /* Original */
color: white; /* Original */
z-index: 2;
padding: 0; /* Original */
}
#works .parallax {
will-change: transform;
transition: opacity var(--transition-medium);
opacity: 0; /* Initial state for JS to fade in */
}
#works .parallax.loaded {
opacity: 1;
}
#works .navigation { /* This is the bottom scroll navigation */
/* position: fixed; */ /* Original - fixed to viewport bottom */
position: absolute; /* Changed - to be at bottom of #works */
bottom: var(--space-6);
/* left: 50%; transform: translateX(-50%); */ /* This centers it in viewport. For #works, it should be relative to .page-container or #works */
/* If .page-container is the scrolling view, nav should be relative to that. */
left: calc(var(--menu-collapsed-width) + (100% - var(--menu-collapsed-width)) / 2); /* Center in page-container area */
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--space-6);
z-index: 100; /* Within #works */
color: white;
mix-blend-mode: difference; /* This might look odd if #works is not full screen */
}
#works.works-menu-expanded .navigation {
left: calc(var(--menu-width) + (100% - var(--menu-width)) / 2); /* Adjust centering when menu is expanded */
}
#works .nav-progress {
width: 150px;
height: 2px;
background-color: rgba(100, 100, 100, 0.3);
position: relative;
overflow: hidden;
border-radius: 2px;
}
#works .nav-progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: white; /* Original */
transform-origin: left;
transform: scaleX(0);
will-change: transform;
}
#works .nav-text { /* Used in bottom scroll nav */
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
}
#works .direction-label { /* Matthew/Rick labels in panel-split */
text-transform: uppercase;
font-size: var(--text-xs);
letter-spacing: 1px;
margin-bottom: var(--space-2);
color: var(--color-accent);
}
/* Last section fixes - these are specific classes in the new HTML */
#works .conversation-section { /* This class isn't in the HTML provided by user. Assuming it's a typo or not needed */
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#works .quote-container {
position: relative;
margin-top: var(--space-4);
padding-left: var(--space-4);
border-left: 3px solid var(--color-accent);
width: 100%;
}
#works .full-quote {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--text-base);
line-height: 1.5;
margin-bottom: var(--space-5);
width: 100%;
}
#works .conclusion-text {
margin-top: var(--space-5);
padding: var(--space-5);
background-color: rgba(255, 44, 44, 0.08);
border-left: 3px solid var(--color-accent);
width: 100%;
border-radius: 0 4px 4px 0;
}
@media (max-width: 768px) {
#works .panel-split { /* Already scoped by #works from general .panel-split rule */
flex-direction: column;
}
#works .panel-left,
#works .panel-right {
width: 100%;
height: 50%; /* This might conflict with panel height being 100% of parent */
padding: var(--space-6);
}
#works .panel-content,
#works .panel-full-content {
width: 90%;
}
#works .title {
font-size: var(--text-2xl);
}
#works .subtitle {
font-size: var(--text-xl);
}
#works .image-container {
height: 180px;
}
#works .editorial-split {
grid-template-columns: 2fr;
grid-template-rows: 1fr 1fr; /* Or auto auto / 1fr 1fr depending on desired behavior */
}
#works .mega-text {
font-size: clamp(4rem, 15vw, 8rem);
}
#works .contact-name {
font-size: clamp(4rem, 12vw, 8rem);
margin-bottom: var(--space-8);
}
#works .email-wrapper {
flex-direction: column;
padding: var(--space-3);
}
#works .email {
font-size: var(--text-xl);
}
#works .copy-email {
margin-top: var(--space-2);
}
#works .navigation {
left: 50%; /* Simpler centering for mobile if menu is collapsed or handled differently */
transform: translateX(-50%);
/* Assuming menu might be overlay or fully collapsed on mobile, adjust as needed */
}
#works.works-menu-expanded .navigation {
/* Consider how expanded menu affects navigation centering on mobile */
left: 50%;
transform: translateX(-50%);
}
}
/* 1. Make "You decide" text red */
#works .panel[data-index="0"] .split-YouDecide {
color: var(--color-accent, #ffffff);
}
/* 2. Make text in second panel (data-index="1") white */
#works .panel[data-index="1"] .panel-full-content .title.split-text {
color: #ffffffe0 !important; /* Pure white, with !important to override other .title styles if necessary */
font-size: 6rem!important;
width: 100%!important;
align-items: left!important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
letter-spacing: -6.5px; /* Slightly tighter spacing */
line-height: 1.5; /* Reduced line height for more compact appearance */
font-weight: 900;
}
/* 3. Adjust text containers in panels 4, 6, and 8 (data-index 3, 5, 7) */
#works .panel-split[data-index="3"] .panel-right .panel-content,
#works .panel-split[data-index="5"] .panel-right .panel-content,
#works .panel-split[data-index="7"] .panel-right .panel-content {
padding-left: 15px; /* Slightly reduced left padding */
padding-right: 40px; /* Increased right padding for more space at the edge */
width: 100%; /* Ensure it tries to use full width of .panel-right */
box-sizing: border-box; /* Make sure padding is included in width calculation */
}
#works .panel-split[data-index="3"] .panel-right .panel-content .quote,
#works .panel-split[data-index="3"] .panel-right .panel-content .full-quote,
#works .panel-split[data-index="3"] .panel-right .panel-content .text p,
#works .panel-split[data-index="5"] .panel-right .panel-content .quote,
#works .panel-split[data-index="5"] .panel-right .panel-content .full-quote,
#works .panel-split[data-index="5"] .panel-right .panel-content .text p,
#works .panel-split[data-index="7"] .panel-right .panel-content .quote,
#works .panel-split[data-index="7"] .panel-right .panel-content .full-quote,
#works .panel-split[data-index="7"] .panel-right .panel-content .text p {
overflow-wrap: break-word; /* Helps prevent overflow by breaking long words */
word-wrap: break-word; /* Alias for overflow-wrap */
hyphens: auto; /* Allow hyphenation if lang attribute is set */
max-width: 100%; /* Ensure text elements don't try to be wider than their container */
}
/* Adjustments for LEFT side text in panels 4, 6, and 8 (data-index 3, 5, 7) */
#works .panel-split[data-index="3"] .panel-left .panel-content,
#works .panel-split[data-index="5"] .panel-left .panel-content,
#works .panel-split[data-index="7"] .panel-left .panel-content {
padding-left: 30px; /* Ensure some space on the left */
padding-right: 15px; /* Reduced right padding, as content is left-aligned */
width: 100%;
box-sizing: border-box;
}
#works .panel-split[data-index="3"] .panel-left .panel-content .quote,
#works .panel-split[data-index="3"] .panel-left .panel-content .conclusion-text p,
#works .panel-split[data-index="5"] .panel-left .panel-content .quote,
#works .panel-split[data-index="5"] .panel-left .panel-content .conclusion-text p,
#works .panel-split[data-index="7"] .panel-left .panel-content .quote,
#works .panel-split[data-index="7"] .panel-left .panel-content .conclusion-text p {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
/* Optional: If the text on the left also needs adjustment, uncomment this */
/*
#works .panel-split[data-index="3"] .panel-left .panel-content,
#works .panel-split[data-index="5"] .panel-left .panel-content,
#works .panel-split[data-index="7"] .panel-left .panel-content {
padding-right: 20px;
}
*/
/* NEW CSS FOR #about SECTION (Modern Blog Layout) */
#about {
background-color: #fff; /* Changed to white for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
animation: noise-animation 0.2s steps(4) infinite; /* Keep animation */
display: flex;
font-family: "Inter", sans-serif; /* $subtitle-font */
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
padding: 2rem 3.6rem;
font-weight: 400;
/* height: 100vh; /* Let's manage height via .blog or specific section needs */
box-sizing: border-box; /* Added for consistency */
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
#about * {
outline: none;
box-sizing: border-box;
}
/* Applied html smooth scrolling and box-sizing from SCSS to #about */
#about {
-webkit-font-smoothing: antialiased;
}
#about img {
max-width: 100%;
}
#about .blog {
background-color: #fff; /* Changed to white for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
animation: noise-animation 0.2s steps(4) infinite; /* Keep animation */
max-width:max-content;
display: grid;
max-height: 840px;
height: 110%;
overflow: hidden;
grid-template-columns: 15% 20% auto 30%; /* Adjusted for new middle wrapper taking 3rd slot */
grid-template-rows: 100%;
width: 105%;
padding: 50px 50px 0px 50px;
position: relative;
}
@media screen and (max-width: 1030px) {
#about .blog {
grid-template-columns: 20% auto 30%; /* Adjusted for new middle wrapper */
}
}
@media screen and (max-width: 768px) {
#about { /* Adjust padding for #about on smaller screens */
padding: 0;
}
#about .blog {
grid-template-columns: 25% auto; /* Adjusted, right sidebar is hidden */
width: 100%;
max-width: none;
}
#about .middle-content-wrapper {
border-right: none; /* No border when right sidebar is hidden */
}
}
@media screen and (max-width: 560px) {
#about .blog {
grid-template-columns: 100%;
}
}
#about .blog-part {
padding: 0 20px;
}
#about .blog-part:not(:last-child) {
border-right: 1px solid #94918f; /* $border-color */
}
#about .blog-menu {
font-size: 35px!important;
text-decoration: none;
color: #1d1d1d; /* $subtitle-color */
display: flex;
letter-spacing: -0.5px;
align-items: center;
}
#about .small-title1 {
font-size: 25px!important;
color: #121213; /* $subtitle-color */
font-weight: 450;
}
@media screen and (max-width: 1260px) {
#about .blog-menu {
font-size: 1.6vw;
}
}
#about .blog-menu svg {
width: 22px;
margin-left: 4px;
}
#about .blog-menu + .blog-menu {
margin-top: 24px;
}
#about .blog-menu.mention {
margin-top: auto;
font-size: 19px;
}
@media screen and (max-width: 1260px) {
#about .blog-menu.mention {
font-size: 1.4vw;
}
}
#about .blog-menu.subscribe {
margin-top: 8px;
font-size: 19px;
position: relative;
}
@media screen and (max-width: 1260px) {
#about .blog-menu.subscribe {
font-size: 1.4vw;
}
}
#about .blog-menu.subscribe:before {
content: "";
width: 16px;
height: 16px;
background-color: #161419; /* $subtitle-color */
left: 0;
border-radius: 1px;
margin-right: 14px;
}
#about .is-menu {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 1030px) {
#about .is-menu {
display: none;
}
}
#about .blog-big__title {
font-size: 132px;
font-family: "Space Grotesk", sans-serif; /* $title-font */
font-weight: 700;
letter-spacing: -5px;
line-height: 1;
margin-bottom: 6px;
color: #121418; /* $title-color, added for clarity */
}
@media screen and (max-width: 1400px) {
#about .blog-big__title {
font-size: 120px;
}
}
@media screen and (max-width: 1260px) {
#about .blog-big__title {
font-size: 9vw;
letter-spacing: -2px;
}
}
@media screen and (max-width: 560px) {
#about .blog-big__title {
font-size: 36px;
margin-bottom: 12px;
}
}
#about .blog-header {
display: flex;
flex-direction: column;
}
#about .blog-article {
padding: 0 20px;
}
#about .blog-article img {
height: 170px!important;
max-height: none;
width: 100%;
object-fit: cover;
filter: grayscale(1);
}
#about .page-number {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
font-size: 72px;
text-align: center;
letter-spacing: -3px;
font-weight: lighter;
font-family: "Space Grotesk", sans-serif; /* $title-font */
border-right: 1px solid #94918f; /* $border-color */
white-space: nowrap;
color: #121418; /* $title-color, added for clarity */
}
@media screen and (max-width: 1260px) {
#about .page-number {
font-size: 5vw;
}
}
#about .small-title {
border-bottom: 1px solid #94918f; /* $border-color */
margin-bottom: 20px;
padding-bottom: 20px;
color: #161419; /* $subtitle-color, added for clarity */
}
@media screen and (max-width: 560px) {
#about .small-title {
font-size: 14px;
position: absolute;
top: 10px;
right: 24px;
border-bottom: 0;
}
}
#about .date {
display: flex;
justify-content: flex-end;
color: #161419; /* $subtitle-color, added for clarity */
}
#about .blog-article h2 {
font-size: 26px;
font-weight: 500;
line-height: 1.2;
margin: 8px 0 8px;
color: #121418; /* $title-color, added for clarity */
}
#about .blog-article h2 span {
font-family: "Playfair Display", serif; /* $italic-font */
}
#about .blog-article p {
line-height: 1.5;
margin: 14px 0;
color: #161419; /* $subtitle-color, added for clarity */
font-size: 15.3px!important;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400!important;
letter-spacing: .4px!important;
}
#about .blog-article a {
color: #161419; /* $subtitle-color */
text-decoration: none;
font-size: 26px!important;
letter-spacing: -1px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: auto;
border-top: 1px solid #94918f; /* $border-color */
padding-top: 14px;
}
#about .blog-article a svg {
width: 28px;
margin-right: 10px;
}
#about .blog-detail {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #161419; /* $subtitle-color, added for clarity */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 400!important;
letter-spacing: 3px!important;
}
#about .blog-detail span {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 400!important;
}
#about .blog-header-container {
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
scroll-snap-type: y mandatory;
flex-grow: 1; /* Added to make it fill space in flex column */
min-height: 0; /* Added for proper flex scroll in some browsers */
}
@media screen and (max-width: 768px) {
#about .blog-header-container {
border-right: 0; /* This remains correct */
}
}
#about .blog-header-container > * {
flex-shrink: 0;
scroll-snap-align: start;
}
#about .blog-header-container .blog-article:not(.header-article) {
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* New styles for the middle column wrapper and static header */
#about .middle-content-wrapper {
display: flex;
flex-direction: column;
height: 100%; /* Fill the grid cell height */
overflow: hidden; /* Prevent its own scrollbars */
border-right: 1px solid #94918f; /* $border-color - moved from .blog-header-container */
}
#about .static-header {
flex-shrink: 0; /* Prevent this from shrinking */
/* Let its content define its height */
position: relative; /* For stacking context if needed */
z-index: 1; /* Ensure it's above scrolling content if overlap occurs */
/* New styles to make it fill and manage children */
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* Target the second .blog-article within .static-header (the one with image and Richard Carnation text) */
#about .middle-content-wrapper .static-header > .blog-article:last-of-type {
flex-grow: 1; /* This article block takes up remaining space in .static-header */
display: flex;
flex-direction: column;
overflow: hidden; /* Prevent its own content from overflowing if too large */
}
#about .middle-content-wrapper .static-header > .blog-article:last-of-type img {
aspect-ratio: 1 / 1; /* Make image square */
width: 100%;
height: auto; /* Height will be determined by width and aspect-ratio */
object-fit: cover;
flex-shrink: 0; /* Don't allow image to shrink */
max-height: 40%; /* Example: limit image height to allow text space, adjust as needed */
}
#about .middle-content-wrapper .static-header > .blog-article:last-of-type .blog-detail {
flex-shrink: 0; /* Don't allow details to shrink */
padding-top: 10px; /* Add some space above details */
}
#about .middle-content-wrapper .static-header > .blog-article:last-of-type p {
flex-grow: 1; /* Paragraph takes all remaining vertical space */
overflow-y: auto; /* Allow paragraph to scroll if content is too long */
margin-bottom: 0; /* Remove bottom margin to use full space */
padding-bottom: 10px; /* Add some space before the See More link */
}
#about .middle-content-wrapper .static-header > .blog-article:last-of-type a {
flex-shrink: 0; /* Don't allow "See More" link to shrink */
}
/* Explicitly hide the scrollable article container */
#about .middle-content-wrapper .blog-header-container {
display: none;
}
#about marquee {
font-size: 20px;
background-color: #121418; /* $body-bg */
color: #e9e6e4; /* $blog-bg */
padding: 6px 0;
width: calc(100% + 44px); /* Adjusted for #about context, assuming .blog-part padding is 20px */
margin-left: -22px; /* Half of the 44px to center if parent padding is an issue */
flex-shrink: 0;
}
#about marquee span:before {
display: inline-block;
content: "";
border-radius: 50%;
width: 10px;
height: 10px;
position: relative;
top: -1px;
vertical-align: baseline;
background-color: #e9e6e4; /* $blog-bg */
margin: 0 16px;
}
#about .blog-right {
overflow: auto;
height: calc(100% + 60px); /* This might need adjustment based on parent, could cause overflow */
}
#about .blog-right .rounded {
font-style: italic;
font-size: 18px;
color: #161419; /* $subtitle-color */
}
#about .blog-right .rounded:before {
content: "";
border-radius: 50%;
width: 9px;
height: 9px;
background-color: rgb(22 20 25); /* literal from SCSS */
margin-right: 6px;
}
#about .blog-right-title {
font-size: 25px;
font-family: "Playfair Display", serif; /* $italic-font */
color: #121418; /* $title-color */
}
#about .blog-right-title-container {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #94918f; /* $border-color */
margin-bottom: 20px;
padding-bottom: 20px;
margin-top:50px;
letter-spacing: -1px;
}
@media screen and (max-width: 1400px) {
#about .blog-right-title-container {
margin-top: 88px;
}
}
@media screen and (max-width: 1260px) {
#about .blog-right-title-container {
margin-top: 6vw;
}
}
@media screen and (max-width: 1030px) {
#about .blog-right-title-container {
margin-top: 5vw;
}
}
#about .blog-title-date {
display: flex;
align-items: baseline;
justify-content: space-between;
}
#about .blog-right-page {
font-size: 56px;
margin-bottom: 16px;
font-family: "Space Grotesk", sans-serif; /* $title-font */
color: #121418; /* $title-color */
}
#about .blog-right-page-title {
font-family: "Space Grotesk", sans-serif; /* $title-font */
font-size: 28px;
font-weight: 600;
max-width: 16ch;
letter-spacing: -2px;
color: #121418; /* $title-color */
}
#about .blog-right-page-subtitle {
max-width: 33ch;
font-size: 15px;
margin-top: 12px;
line-height: 1.4;
color: #161419; /* $subtitle-color */
}
#about .blog-right-container + .blog-right-container {
margin-top: 40px;
}
#about .right-blog {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 768px) {
#about .right-blog {
display: none;
}
}
@media screen and (max-width: 1030px) {
#about .right-blog .blog-menu { /* Scoped .blog-menu inside .right-blog */
display: none;
}
}
#about ::-webkit-scrollbar { /* Scoped to #about */
display: none;
}
#about .circle {
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: #121418; /* $body-bg */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: #e9e6e4; /* $blog-bg */
padding: 20px;
text-align: center;
margin-top: 35px;
}
#about .circle-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 12px;
font-family: "Space Grotesk", sans-serif; /* $title-font */
}
@media screen and (max-width: 1030px) {
#about .circle-title {
display: none;
}
}
#about .circle-subtitle {
max-width: 30ch;
font-size: 14px;
line-height: 1.3;
margin-bottom: 16px;
}
#about .circle-footer {
font-family: "Playfair Display", serif; /* $italic-font */
font-size: 30px;
}
#about .blog-is-sticky {
/* This class is on .blog-header. It has a media query in SCSS. */
}
@media screen and (max-width: 560px) {
#about .blog-is-sticky {
display: none;
}
}
/* END OF NEW CSS FOR #about SECTION */
/* Styles for #contact section, site-footer, etc. */
#contact{
background-color: #090909; /* Lighter dark for more contrast */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
animation: noise-animation 0.1s steps(1) infinite; /* Keep animation */
margin-top: 1rem;
margin-bottom: 2.5rem;
margin-left: -1rem;
margin-right: -1rem;
padding: 2rem 0; /* Add some padding to the section itself */
justify-content: center; /* Added to center the main box */
align-items: center; /* Added to center the main box */
position: relative; /* Needed for absolute positioning of children if any were outside the main box */; /* Ensure the section spans full viewport width */
}
.contact-main-box {
background-color: #ffffff; /* This is now the white box */
background-image: url("http://assets.iceable.com/img/noise-transparent.png");
animation: noise-animation 0.2s steps(4) infinite; /* Noise animation for the box */
border-radius: 10px;
max-width: 90%; /* Reverted to percentage-based max-width for fuller screen appearance */
margin: 0 auto; /* Center the box */
padding-top: 12rem;
padding-bottom: 12rem;
/* padding-left and padding-right should remain removed/commented for this effect */
font-family: 'Space Grotesk', sans-serif;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
position: relative; /* For positioning children absolutely within this box */
display: flex;
flex-direction: column;
align-items: center; /* Center align the pre-heading and h2 */
box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Optional: add some shadow to the box */
}
#contact h2{
color: #333333; /* Dark text for on white background */
font-size: 8rem!important;
font-weight: 700;
text-align: center;
/* Removed background, padding, border-radius, animation - moved to .contact-main-box */
/* max-width, margin-left, margin-top are no longer needed here */
font-family: 'Space Grotesk', sans-serif; /* Ensure font is still applied */
text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Adjusted shadow for dark text */
line-height: 1;
text-transform: uppercase;
margin-bottom: 5rem!important;
/* margin-bottom: 3rem; */ /* Removed, parent padding will handle this */
}
.contact-pre-heading {
text-align: center;
font-size: 1.2rem;
color: #555; /* Darker grey for pre-heading on white */
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.contact-bottom-left {
position: absolute;
bottom: 1.5rem; /* Adjusted for padding inside .contact-main-box */
left: 1.5rem; /* Adjusted for padding inside .contact-main-box */
}
.availability-box {
display: flex;
align-items: center;
border: 1px solid #ddd; /* Lighter border for on white */
padding: 0.5rem 0.75rem;
border-radius: 6px;
background-color: rgba(250, 250, 250, 0.8); /* Very light, slightly transparent background */
}
.icon-globe svg {
stroke: #555; /* Darker grey for the globe icon on white */
margin-right: 0.5rem;
width: 24px; /* Adjust size if needed */
height: 24px; /* Adjust size if needed */
}
.availability-text-container p {
margin: 0.1rem 0;
font-size: 0.8rem;
color: #444; /* Dark grey text on white */
line-height: 1.2;
}
.availability-text-container p:first-child {
font-weight: 600;
}
.contact-bottom-right {
position: absolute;
bottom: 1.5rem; /* Adjusted for padding inside .contact-main-box */
right: 1.5rem; /* Adjusted for padding inside .contact-main-box */
text-align: right;
}
.inquiries-text {
font-size: 0.8rem;
color: #777; /* Medium-dark grey on white */
margin-bottom: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.email-contact {
font-size: 1rem;
color: #333; /* Dark text for email */
font-family: 'Space Grotesk', sans-serif;
}
.arrow-contact {
color: #555; /* Darker grey arrow */
margin-right: 0.4rem;
font-weight: bold;
}
/* --- TEMPORARY DEBUGGING STYLES --- */
.sticky-content-block.main-title-sticky-content {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important; /* Reset from anything complex */
margin: 20px !important; /* Ensure it's on screen */
padding: 10px !important;
min-height: 100px !important; /* Ensure it has some height */
}
.sticky-content-block.main-title-sticky-content .services-subtitle {
position: static !important; /* Override any absolute/fixed positioning */
margin: 1rem 30rem!important;
}
.sticky-content-block.main-title-sticky-content .projects-container {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
margin: 1rem 15rem !important;
width: auto !important; /* Override any specific width */
}
.sticky-content-block.main-title-sticky-content .project-item {
opacity: 1 !important;
}
.sticky-content-block.main-title-sticky-content .project-name,
.sticky-content-block.main-title-sticky-content .project-director {
color: rgb(246, 246, 246) !important; /* Make sub-item text color obvious */
}
/* --- END TEMPORARY DEBUGGING STYLES --- */
/* New button styles for Cal.com integration */
/* Base style for new CTA buttons - similar to original .cta-button */
.cta-button-services-header,
.cta-button-blog-menu,
.cta-button-contact {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #333;
color: white !important; /* Ensure text is white */
padding: 0rem 0rem; /* Slightly smaller padding */
border-radius: 2rem;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
white-space: nowrap; /* Prevent text wrapping */
font-size: 1rem!important; /* Smaller base font size */
}
.cta-button-services-header .arrow-icon,
.cta-button-blog-menu .arrow-icon,
.cta-button-contact .arrow-icon {
margin-left: .5rem;
display: inline-block;
transform: translateY(-1px); /* Slight adjustment for arrow */
font-size: 1rem; /* Relative to button font size */
}
.cta-button-services-header:hover,
.cta-button-blog-menu:hover,
.cta-button-contact:hover {
background-color: #222;
}
/* Specifics for button next to "How I can help you /" */
.sticky-header.main-title-sticky-header h2 {
display: flex; /* Allows button to sit inline with text */
align-items: center; /* Vertically align text and button */
flex-wrap: nowrap; /* Prevent wrapping if space is tight, though button is small */
}
/* Ensure the span wrapping "How I can help you /" is styled appropriately */
.sticky-header.main-title-sticky-header h2 > span:first-of-type {
margin-right: -3rem; /* Space between "/" and button */
/* Inherits h2 font size, color, etc. */
}
.cta-button-services-header {
/* display: inline-flex; */ /* Already set in common style */
background-color: rgb(191, 191, 177);
margin-left: 5.8rem;
margin-top: 1rem;
padding: 1rem 1rem; /* Even smaller for inline use */
font-size: 1rem; /* Smaller to fit better */
/* vertical-align: middle; */ /* Might be needed if flex align-items on h2 isn't enough */
}
/* Specifics for button in .blog-menu */
.cta-button-blog-menu {
display: block; /* Make it a block element to take its own line */
width: 13rem; /* Adjust width to content */
height: 4rem;
margin-top: 23rem; /* Space above it */
margin-left: -4rem!important; /* Align with other menu items if they have no margin */
padding: .5rem 2rem 2rem 1rem;
font-size: 1.5rem!important;
background-color: rgb(22 20 25); /* literal from SCSS */
}
/* Specifics for button in #contact section */
.contact-main-box {
padding-bottom: 8rem; /* Adjusted to make space for button if needed */
}
#contact h2.contact-subheading {
margin-bottom: 2rem; /* Adjusted space to accommodate button below */
}
.cta-button-contact {
display: block;
margin: 0 auto; /* Center if it's a block element */
max-width: 220px; /* Limit width, a bit smaller */
width: auto;
font-size: 1.5rem!important;
padding: 0rem 2rem 0rem 1.5rem;
color: rgb(191, 191, 177);
}
/* Styling for .arrow-icon2 - separated from .contact-subheading */
.arrow-icon2 {
font-size: 1.5rem!important;
padding: .5rem 2rem 2rem 0rem;
}
/* Diagnostic and intended styles for .contact-subheading */
.contact-subheading {
font-size: 4rem!important;
display: block;
color: #333333;
line-height: 1.1;
padding: 0; /* Reset padding that might have come from the combined rule */
}
/* == MOBILE RESPONSIVE STYLES (START) == */
@media (max-width: 768px) {
html, body {
width: 100% !important;
max-width: 100vw !important; /* Use viewport width */
/* overflow-x: hidden !important; */ /* REMOVED to allow sticky for services */
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important; /* Ensure padding/border are included in width */
}
/* NEW: Apply overflow hidden and width to other major sections, EXCLUDING #services */
#works,
#about,
#contact,
.site-footer {
overflow-x: hidden !important;
width: 100% !important;
box-sizing: border-box !important; /* Good practice with 100% width */
}
/* Ensure header and hero take full width but do NOT hide overflow for nav */
header,
.hero {
width: 100% !important;
box-sizing: border-box !important;
}
/* Ensure #services itself takes full width but does NOT hide overflow for sticky children */
#services {
width: 100% !important;
box-sizing: border-box !important;
}
body {
/* DEBUG: Add red border to visualize viewport */
/* border: 2px solid red !important; */ /* Keep this commented out for now */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* margin: 0; */ /* Already set above */
padding-top: 4rem!important; /* Adjusted for potentially smaller fixed header */
/* Remove side padding on body for mobile */
}
/* Adjust the container of the main header if it has restrictive padding */
body > .container:first-of-type {
padding-left: 0 !important; /* Remove side padding */
padding-right: 0 !important; /* Remove side padding */
width: 100% !important; /* Ensure it uses full available width */
max-width: 100% !important; /* Ensure it doesn't exceed viewport */
margin-left: 0 !important;
margin-right: 0 !important;
}
header { /* The <header> element with name and title */
position:relative;
margin-top: -4rem!important;
left: 0;
width: 100%;
background-color: transparent; /* Made transparent */
z-index: 1000;
padding: 1rem 1rem 0.5rem 1rem; /* 1rem top & left, 0.5rem bottom, 1rem right */
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: baseline; /* Changed to baseline for nav/subtitle alignment */
/* border-bottom: 1px solid #eee; */ /* Removed border */
}
header .header { /* The div inside <header> containing .headerLeft and .headerRight */
display: flex;
flex-direction: column;
align-items: flex-start;
/* margin-right: auto; */ /* Let space-between handle it */
}
header .headerLeft { /* Site Title */
font-size: 1.2rem; /* Reduced font size */
font-weight: 600;
color: #000;
line-height: 1.1;
}
header .headerLeft::after {
content: "®";
font-size: 0.6rem; /* Reduced ® size */
vertical-align: super;
margin-left: 0.1em;
}
header .headerRight { /* Subtitle: (Web Developer...) */
font-size: 0.80rem; /* Reduced font size */
color: #555;
line-height: 1.8;
margin-left: 0rem !important;
margin-top: 0.5rem!important;
width: 70%;
text-align: left;
}
.hero .nav { /* Navigation links container */
position: absolute; /* Position it absolutely */
top: -7rem; /* 1rem from the top of viewport */
right: 1rem; /* CHANGED: Pull nav back into viewport */
z-index: 1001; /* Ensure it's above header content if overlap */
}
.hero .nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-end; /* Align text to the right */
}
.hero .nav ul li {
line-height: 2; /* Reduced line height */
margin: 0;
}
.hero .nav ul li a {
font-size: 1.2rem; /* Reduced font size */
font-weight: 400;
color: #333;
text-decoration: none;
padding: 0.1rem 0; /* Minimal vertical padding */
}
/* Hero section needs padding to clear the fixed header */
section.hero {
width: 100%; /* Ensure hero section takes full viewport width */
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center; /* Center hero content blocks horizontally */
padding-left: 1rem; /* Add some horizontal padding to the hero section */
padding-right: 1rem;
padding-bottom: 0rem; /* Space at the bottom */
min-height: auto; /* Reset desktop min-height */
}
.hero .name { /* Main name: HECTOR HERNANDEZ REYES */
font-size: 3.9rem; /* Significantly reduced from desktop */
font-weight: 700; /* Keep bold */
color: #000;
letter-spacing: -1px; /* Adjust spacing */
line-height: 1.1;
text-align: left;
margin: -1rem 0 1.5rem 0; /* Adjust margins */
width: 100%; /* Make name block take full width of its container */
padding: 0;
position: static; /* Ensure it's in normal flow */
}
.hero .name .reyes { /* "REYES" part if styled separately */
letter-spacing: 0.1em; /* Adjust to look good with smaller font */
}
/* Copyright symbol next to REYES - we need the HTML for this if it's separate for mobile */
/* Assuming .mobile-reyes-copyright is still in HTML next to REYES */
.hero .name .reyes .mobile-reyes-copyright {
display:flex; /* Show it */
font-size: 1.6rem; /* Smaller copyright symbol */
font-weight: normal;
font-weight: 600;
color: #000;
margin-left: 14rem;
margin-top: -4.2rem!important;
}
/* Hide the desktop ::after version if it exists and was shown by default */
.hero .name::after {
display: none !important;
}
.hero .content-wrapper { /* Wrapper for tagline, image, etc. */
display: flex;
flex-direction: column; /* Stack elements vertically */
align-items: center; /* Center items by default */
width: 100%;
margin-top: 5rem;
padding-bottom: 2rem!important;
}
.hero .content-left { /* Contains tagline and button */
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start; /* Align tagline and button to the left */
margin-bottom: 2rem;
margin-left: 15rem!important;
}
.hero .tagline {
font-size: 1.2rem; /* Reduced tagline font size */
font-weight: 400;
width: 95%;
line-height: 1.4;
text-align:left!important;
color: #a1a1a1;
margin-top: -3.5rem!important;
margin-left: -14rem!important;
}
.hero .arrow { display: none; } /* Hide desktop arrow */
.hero .cta-button {
font-size: 1rem;
font-weight: 500;
color: #fff;
background-color: #000;
padding: 0.8rem 1rem;
border-radius: 2rem;
text-decoration: none;
align-self: flex-start; /* Align to left */
margin: 0; /* Reset margin */
width: 200px; /* Fit content */
margin-left: -3.5rem!important;
margin-top: 2.5rem!important;
}
.hero .cta-button .arrow-icon {
font-size: 0.9rem;
margin-left: 0.5em;
}
/* Image and Availability */
.hero .image-availability-wrapper {
display: flex;
flex-direction: column; /* Stack image and availability text */
align-items: center; /* Center them */
width: 100%;
margin-top: 1rem;
}
.hero .content-center { /* Contains profile image */
width: auto;
max-width: 220px; /* Limit image size */
padding:0; /* Reset padding */
margin-top: -24.5rem!important;
margin-left: 9.5rem!important;
}
.hero .profile-image {
width: 100%;
height: auto;
border-radius: 3px;
}
.hero .content-right { /* Contains availability */
width:100%;
text-align: left;
padding: 0;
margin-top: .5rem;
margin-left: -13rem!important;
}
.hero .availability {
padding: 0;
margin:0;
}
.hero .availability-text {
font-size: 1rem;
color: #555;
line-height: 1.3;
text-align: left;
}
.hero .availability-date {
font-size: 1.5rem;
font-weight: 600;
color: #000;
line-height: 1.2;
text-align: left;
}
/* == SERVICES SECTION MOBILE STYLES START == */
#services.page-section.services-section-dark-bg {
padding-top: 5rem!important;
padding-bottom: 3rem;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
#services.page-section.services-section-dark-bg h2 { /* Main "Services" title */
font-size: 2rem !important; /* Reduced font size */
text-align: center;
margin-bottom: 1rem;
}
.services-sticky-container {
padding: 0rem 1rem; /* Reduced padding */
margin-top: -4.2rem!important; /* Reduced margin */
padding-bottom: -3rem!important;
padding-top: -1rem!important;
}
/* Adjust sticky header heights for mobile */
:root { /* Re-declare for mobile or ensure variables are mobile-friendly */
--sticky-main-title-header-height-mobile: 180px; /* Further reduced height */
--sticky-service-header-height-mobile: 80px; /* Further reduced height */
.sticky-header {
padding: 0 1rem; /* Reduced padding */
/* height: auto; */ /* Remove auto height, will be set by specific types */
border-top: 1px solid #444; /* Simplified border */
position: -webkit-sticky !important; /* Ensure stickiness */
position: sticky !important; /* Ensure stickiness */
background-color: #090909; /* Ensure background for sticky headers */
background-image: url("http://assets.iceable.com/img/noise-transparent.png"); /* Ensure noise */
animation: noise-animation 0.1s steps(1) infinite;
}
.sticky-header.main-title-sticky-header {
margin-right: 0 !important; /* Remove large margin */
height: var(--sticky-main-title-header-height-mobile) !important; /* Use mobile variable */
border-top: none!important; /* Keep user's change */
top: 0; /* Corrected: Sticky to top */
z-index: 4; /* Highest */
padding-right: .5rem!important;
padding-left: 1rem!important;
}
.sticky-header.main-title-sticky-header h2 { /* "How I can help you" */
font-size: 1rem !important; /* Further reduced font size */
text-align: center; /* Revert to center as per "centered" request */
justify-content: center; /* Center flex items */
margin-left: 0rem !important;
line-height: 1.2; /* Adjust line height */
width: 100%!important;
}
.cta-button-services-header {
margin-right: 1rem !important;
margin-top: 0 !important; /* Align with text */
margin-left: 3.5rem!important;
font-size: 0.8rem !important; /* Further reduce font size */
/* vertical-align: right; */ /* Corrected: Removed invalid property for flex item */
padding: 1rem 1rem !important; /* Keep user's padding change */
}
.services-sticky-container > .sticky-header:nth-child(1) {
/* Styles moved to .sticky-header.main-title-sticky-header for clarity */
/* height: var(--sticky-main-title-header-height-mobile) !important; */
/* margin-right: 0 !important; */
/* top: 0; */
/* z-index: 4; */
}
.sticky-header.service-item-sticky-header { /* Common style for service item headers */
height: var(--sticky-service-header-height-mobile) !important; /* Use mobile variable */
}
.sticky-header.service-item-sticky-header h3 {
font-size: 1rem !important; /* Reduced font size */
margin-left: 0 !important;
text-align: center;
border-top: none;
padding-top: 0.3rem; /* Adjust padding */
padding-bottom: 0.3rem; /* Adjust padding */
line-height: 1.2;
}
.service-number {
font-size: 1.2rem !important; /* Reduced font size */
margin-left: 0 !important;
text-align: center;
padding-bottom: 0.3rem; /* Adjust padding */
line-height: 1;
}
.service-number::after {
width: 0.5rem; /* Reduced space */
}
.services-sticky-container > .sticky-header:nth-child(3) { /* Service 1 Header */
top: var(--sticky-main-title-header-height-mobile) !important;
z-index: 3 !important;
/* position: sticky already from .sticky-header */
}
.services-sticky-container > .sticky-header:nth-child(5) { /* Service 2 Header */
top: calc(var(--sticky-main-title-header-height-mobile) + var(--sticky-service-header-height-mobile)) !important;
z-index: 2 !important;
}
.services-sticky-container > .sticky-header:nth-child(7) { /* Service 3 Header */
top: calc(var(--sticky-main-title-header-height-mobile) + (var(--sticky-service-header-height-mobile) * 2)) !important;
z-index: 1 !important;
}
.sticky-content-block {
padding: 1.5rem 1rem; /* Reduced padding */
min-height: auto; /* Let content define height */
}
.main-title-sticky-content .services-subtitle {
font-size: 2rem; /* Reduced font size */
margin-left: 4rem !important; /* Remove large offset */
margin-top: -3rem!important;
text-align: center; /* Center subtitle */
}
.main-title-sticky-content .services-intro-paragraph {
font-size: 0.9rem; /* Reduced font size */
margin-left: 0 !important; /* Remove large offset */
text-align: left; /* Or justify, depending on preference */
line-height: 1.6;
}
/* NEW STRUCTURE FOR PROJECT LISTS ON MOBILE */
/* Default mobile styles for any .projects-container and its children */
/* This will apply unless overridden by a more specific rule (like for .main-title-sticky-content) */
.projects-container {
width: 100%; /* Full width by default */
margin: 1rem 0 0 0; /* Default margins */
padding: 0;
}
.projects-container .projects-header { /* Default header style within any project container */
text-align: center;
margin-bottom: 0.5rem;
font-size: 0.9rem; /* Example size, adjust as needed */
font-weight: 600;
padding: 0.3em 0;
}
.projects-container .project-item { /* Default item style */
padding: 0.5em 0;
text-align: center; /* Default text alignment for items */
}
.projects-container .project-item .project-name,
.projects-container .project-item .project-director {
font-size: 0.8rem; /* Default font size */
line-height: 1.4;
color: #f0f0f0;
text-align: left!important;
align-items: left!important;
justify-content: left!important;
}
/* Specific styles for project list under the MAIN TITLE content block (How I can help you) */
/* Desktop styles */
.main-title-sticky-content .projects-container {
width: 200%;
max-width: 1000px;
margin-left: 25rem;
}
/* Mobile styles for projects container */
@media (max-width: 768px) {
.main-title-sticky-content .projects-container {
width: 90%;
max-width: 380px;
margin: 0 auto;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem 2rem;
}
.main-title-sticky-content .project-item {
display: block;
padding: 0.3rem 0;
margin: 0;
}
.main-title-sticky-content .project-item:nth-child(odd) {
text-align: left;
}
.main-title-sticky-content .project-item:nth-child(even) {
text-align: right;
}
.main-title-sticky-content .project-name {
font-size: 0.75rem;
line-height: 1.2;
color: #f0f0f0;
white-space: normal;
word-wrap: break-word;
}
}
/* Mobile styles for services section - more specific targeting */
@media (max-width: 768px) {
/* Only target the main services list, not individual service content */
.sticky-content-block.main-title-sticky-content .services-subtitle {
font-size: 2rem !important;
margin: 0 auto !important;
margin-top: .5rem !important;
text-align: center !important;
width: 100% !important;
color: #f0f0f0;
}
/* Only target the main services projects container */
.sticky-content-block.main-title-sticky-content .projects-container {
width: 85% !important;
max-width: 350px !important;
margin: 2rem auto !important;
padding: 1rem !important;
display: block !important;
column-count: 2 !important;
column-gap: 2rem !important;
column-fill: balance !important;
position: relative !important;
}
/* Only target project items within the main services list */
.sticky-content-block.main-title-sticky-content .project-item {
display: inline-block !important;
width: 100% !important;
margin: 0 0 0.8rem 0 !important;
padding: 0 !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
}
/* Only target project names within the main services list */
.sticky-content-block.main-title-sticky-content .project-name {
font-size: 0.75rem !important;
line-height: 1.3 !important;
color: #f0f0f0 !important;
white-space: normal !important;
word-wrap: break-word !important;
display: block !important;
text-align: left !important;
font-family: monospace !important;
text-transform: uppercase !important;
margin: 0 !important;
padding: 0 !important;
}
/* Only target project director within the main services list */
.sticky-content-block.main-title-sticky-content .project-director {
font-size: 0.7rem !important;
line-height: 1.2 !important;
color: #a0a0a0 !important;
white-space: normal !important;
word-wrap: break-word !important;
display: block !important;
text-align: left !important;
font-family: monospace !important;
margin-top: 0.2rem !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* Ensure individual service content blocks are still visible */
.sticky-content-block.service-item-sticky-content {
display: block !important;
padding: 1.5rem 1rem !important;
min-height: auto !important;
}
.sticky-content-block.service-item-sticky-content p {
font-size: 0.9rem !important;
margin-left: 0 !important;
margin-top: 1rem !important;
line-height: 1.6 !important;
text-align: left !important;
color: #d1d5db !important;
display: block !important;
}
.sticky-content-block.service-item-sticky-content .service-subitems {
margin-left: 0 !important;
margin-top: 1.5rem !important;
padding-left: 0 !important;
display: block !important;
}
.sticky-content-block.service-item-sticky-content .service-subitems li {
font-size: 1rem !important;
padding: 0.5rem 0 !important;
display: block !important;
text-align: left !important;
color: rgb(191, 191, 177) !important;
}
}
}
/* Mobile styles for About Me section */
@media (max-width: 768px) {
/* About section container */
#about {
padding: 1rem !important;
border-radius: 20px !important;
min-height: auto !important;
height: auto !important;
}
/* Main blog container - stack everything vertically */
#about .blog {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
padding: 1rem !important;
overflow: visible !important;
gap: 1.5rem;
}
/* Hide the left menu on mobile */
#about .is-menu {
display: none !important;
}
/* Make the main header section mobile-friendly */
#about .blog-header.blog-is-sticky {
display: flex !important;
flex-direction: column !important;
gap: 1rem;
order: 1;
}
#about .blog-header.blog-is-sticky .header-article {
text-align: center;
}
#about .blog-big__title {
font-size: 2.5rem !important;
letter-spacing: -1px !important;
margin-bottom: 0.5rem !important;
line-height: 1.1 !important;
}
#about .small-title1 {
font-size: 0.9rem !important;
margin: 0.2rem 0 !important;
}
#about .page-number {
font-size: 1.5rem !important;
text-align: center !important;
border-right: none !important;
border-bottom: 1px solid #94918f !important;
padding-bottom: 1rem !important;
height: auto !important;
justify-content: center !important;
}
/* Middle content - main content area */
#about .middle-content-wrapper {
order: 2;
border-right: none !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}
#about .static-header {
height: auto !important;
overflow: visible !important;
}
#about .static-header .header-article {
text-align: center;
margin-bottom: 1rem;
}
#about .static-header .blog-big__title {
font-size: 2.2rem !important;
margin-bottom: 0.5rem !important;
}
#about .static-header .date {
font-size: 1rem !important;
justify-content: center !important;
margin-bottom: 2.5rem !important;
margin-top: 1.5rem !important;
margin-right: 5rem !important;
}
/* Profile section */
#about .static-header .blog-article:last-of-type {
height: auto !important;
overflow: visible !important;
padding: 1rem !important;
border: 1px solid #94918f;
border-radius: 8px;
background-color: #f9f9f9;
}
#about .static-header .blog-article:last-of-type img {
width: 100% !important;
max-width: 450px !important;
height: 175px !important;
object-fit: cover !important;
border-radius: 8px !important;
margin: 0 auto 1rem auto !important;
display: block !important;
aspect-ratio: 1/1 !important;
max-height: none !important;
}
#about .static-header .blog-article:last-of-type p {
font-size: 0.9rem !important;
line-height: 1.5 !important;
margin: 1rem 0 !important;
text-align: left !important;
overflow: visible !important;
height: auto !important;
padding: 0 !important;
}
#about .static-header .blog-article:last-of-type .blog-detail {
font-size: 0.8rem !important;
margin: 1rem 0 !important;
padding: 0 !important;
}
#about .static-header .blog-article:last-of-type a {
font-size: 1rem !important;
margin-top: 1rem !important;
justify-content: center !important;
text-align: center !important;
}
/* Right sidebar - make it mobile friendly */
#about .right-blog {
display: flex !important;
flex-direction: column !important;
order: 3;
width: 100% !important;
gap: 1rem;
}
#about marquee {
font-size: 0.9rem !important;
width: 100% !important;
margin: 0 !important;
padding: 0.5rem 0 !important;
}
#about .blog-right-title-container {
margin-top: 1rem !important;
text-align: center;
}
#about .blog-right-title {
font-size: 1.5rem !important;
}
#about .blog-right-container {
text-align: center;
padding: 1rem;
border: 1px solid #94918f;
border-radius: 8px;
background-color: #f9f9f9;
}
#about .blog-right-page-title {
font-size: 1.2rem !important;
max-width: none !important;
margin: 0 auto !important;
}
#about .blog-right-page-subtitle {
font-size: 0.9rem !important;
max-width: none !important;
margin: 0.5rem auto !important;
line-height: 1.4 !important;
}
#about .circle {
margin-top: 1rem !important;
padding: 1.5rem !important;
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
#about .circle-title {
font-size: 1.1rem !important;
margin-bottom: 0.5rem !important;
}
#about .circle-subtitle {
font-size: 0.8rem !important;
margin-bottom: 0.5rem !important;
max-width: none !important;
}
#about .circle-footer {
font-size: 1.2rem !important;
}
/* Hide elements that are not essential on mobile */
#about .blog-header-container {
display: none !important;
}
/* Blog menu button adjustments */
.cta-button-blog-menu {
display: none !important;
}
}
/* Contact section mobile styles - Alternative horizontal layout */
@media (max-width: 768px) {
#contact {
padding: 1rem 1rem !important;
margin: 0.5rem -0.5rem !important;
margin-left: -1rem !important;
margin-right: -1rem !important;
}
.contact-main-box {
max-width: 1000px !important;
margin-left: 1rem !important;
margin-right: -1rem !important;
padding: 8.5rem 1rem 3rem 1rem !important;
border-radius: 25px !important;
display: grid !important;
grid-template-areas:
"preheading preheading"
"heading heading"
"cta cta"
"left right" !important;
grid-template-columns: 1fr 1fr !important;
grid-gap: 1.5rem 1rem !important;
min-height: auto !important;
}
.contact-pre-heading {
grid-area: preheading !important;
font-size: 1rem !important;
margin: 0 !important;
color: #777 !important;
text-align: center !important;
}
#contact h2 {
grid-area: heading !important;
font-size: 3.5rem !important;
line-height: 1.1 !important;
margin: 0 !important;
text-align: center !important;
letter-spacing: -1px !important;
}
.contact-subheading {
font-size: 3.5rem !important;
display: inline !important;
line-height: 1.5 !important;
}
.cta-button-contact {
grid-area: cta !important;
font-size: 1.1rem !important;
padding: 1rem 1.4rem !important;
margin: 0 auto !important;
max-width: 200px !important;
background-color: #333 !important;
color: white !important;
justify-self: center !important;
}
.arrow-icon2 {
font-size: 1rem !important;
padding: 0 !important;
margin-left: 0.4rem !important;
}
/* Horizontal layout for bottom elements */
.contact-bottom-left {
grid-area: left !important;
position: relative !important;
bottom: auto !important;
left: auto !important;
margin: 0 !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
padding-bottom: -3rem !important;
padding-top: 4rem !important;
}
.contact-bottom-right {
grid-area: right !important;
position: relative !important;
bottom: auto !important;
right: auto !important;
margin: 0 !important;
text-align: right !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-end !important;
padding-bottom: -3rem !important;
padding-top: 4rem !important;
}
.availability-box {
padding: 0.8rem 1rem !important;
border: 1px solid #ddd !important;
border-radius: 8px !important;
background-color: rgba(248, 248, 248, 0.8) !important;
display: flex !important;
align-items: center !important;
min-width: auto !important;
width: 100% !important;
max-width: 180px !important;
}
.icon-globe svg {
width: 18px !important;
height: 18px !important;
margin-right: 0.6rem !important;
stroke: #666 !important;
flex-shrink: 0 !important;
}
.availability-text-container p {
font-size: 0.75rem !important;
color: #555 !important;
margin: 0.1rem 0 !important;
line-height: 1.2 !important;
}
.availability-text-container p:first-child {
font-weight: 600 !important;
color: #333 !important;
}
.inquiries-text {
font-size: 0.7rem !important;
color: #888 !important;
margin-bottom: 0.5rem !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
.email-contact {
font-size: 0.85rem !important;
color: #333 !important;
line-height: 1.2 !important;
word-break: break-word !important;
text-align: right !important;
}
.arrow-contact {
color: #666 !important;
margin-right: 0.3rem !important;
font-size: 0.75rem !important;
}
}
@media (max-width: 768px) {
#footer {
padding: 1rem 1rem !important;
margin: 0.5rem 0 !important;
margin-left: -1rem !important;
margin-right: -1rem !important;
}
#footer .footer-content {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1.5rem !important;
width: 100% !important;
padding: 0 !important;
}
#footer .footer-content .footer-left,
#footer .footer-content .footer-right {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}
#footer .footer-content h4 {
font-size: 0.9rem !important;
margin-bottom: 1rem !important;
}
#footer .footer-content ul li a {
font-size: 0.85rem !important;
line-height: 2 !important;
}
}
@media (max-width: 768px) {
.site-footer {
padding: 1rem 1rem 1rem 1rem !important;
margin: 0.5rem -1rem -0.5rem -1rem !important;
width: 100% !important;
overflow: hidden !important;
position: relative !important;
}
.footer-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1rem !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.footer-column {
min-width: 0 !important;
padding-right: 0rem !important;
margin-bottom: 0 !important;
}
.footer-column h4 {
font-size: 0.8rem !important;
margin-bottom: 1rem !important;
width: auto !important;
text-align: left !important;
}
.footer-column ul {
margin-top: 0.5rem !important;
}
.footer-column ul li {
margin-bottom: 0.4rem !important;
}
.footer-column ul li a {
font-size: 0.75rem !important;
line-height: 1.4 !important;
}
.footer-bottom {
margin-top: 0rem !important;
padding-top: 1rem !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
padding-bottom: 0.5rem !important;
margin-bottom: -0.5rem !important;
overflow: hidden !important;
margin-left: 1.5rem!important;
}
.footer-copyright {
font-size: 0.8rem !important;
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
margin-top: -10rem!important;
line-height: 1 !important;
background-color: #090909 !important;
background-image: url("http://assets.iceable.com/img/noise-transparent.png") !important;
animation: noise-animation 0.1s steps(1) infinite !important;
}
.footer-local-time {
margin-right: 10rem !important;
margin-left: auto !important;
margin-top: 2rem !important;
text-align: right !important;
}
.footer-local-time p {
font-size: 1rem !important;
}
.back-to-top-button {
width: 80px !important;
height: 80px !important;
margin-right: auto !important;
margin-left: 2rem !important;
}
.back-to-top-button svg {
width: 30px !important;
height: 30px !important;
}
}
}
@media (max-width: 768px) {
.footer-bottom {
margin-top: 0rem !important;
padding-top: -3rem !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
}
.footer-local-time-button-wrapper {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
margin-bottom: 0.5rem !important;
}
.footer-copyright {
font-size: 1rem !important;
position: absolute !important;
bottom: -2rem !important;
left: 2.5% !important;
transform: translateX(-50%) !important;
width: 100% !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
line-height: 2 !important;
background-color: #090909 !important;
}
}
@media (max-width: 768px) {
.footer-copyright {
font-size: 1rem !important;
position: relative !important;
bottom: -1rem !important;
transform: none !important;
width: 100% !important;
text-align: center !important;
padding: -0rem 0 1rem 0 !important;
margin-top: 1rem !important;
line-height: 1.2 !important;
background-color: #090909 !important;
background-image: url("http://assets.iceable.com/img/noise-transparent.png") !important;
animation: noise-animation 0.1s steps(1) infinite !important;
}
}
@media (max-width: 768px) {
.footer-copyright {
font-size: 1rem !important;
position: relative !important;
bottom: 0 !important;
left: 0 !important;
transform: none !important;
width: 100% !important;
text-align: center !important;
padding: 2rem 0 !important;
margin: -1rem 0 0 0 !important;
line-height: 1.5 !important;
background-color: #090909 !important;
background-image: url("http://assets.iceable.com/img/noise-transparent.png") !important;
animation: noise-animation 0.1s steps(1) infinite !important;
}
.footer-copyright p {
margin: 0 !important;
padding: 0 1rem !important;
}
.footer-local-time-button-wrapper {
margin-bottom: 0 !important;
}
}