/* ==================== SHARED STYLES ====================
Base styles used across all pages
======================================================== */
/* Neue Haas Unica - Primary Typography
Font files located in Assets/Fonts/
Weights: Thin (100), Light (300), Regular (400), Black (900)
======================================================== */
/* Thin - font-weight: 100 */
@font-face {
font-family: 'Neue Haas Unica';
src: local('Neue Haas Unica Thin'),
local('NeueHaasUnica-Thin'),
url('../assets/Fonts/NHU-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
/* Light - font-weight: 300 */
@font-face {
font-family: 'Neue Haas Unica';
src: local('Neue Haas Unica Light'),
local('NeueHaasUnica-Light'),
url('../assets/Fonts/NHU-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* Regular - font-weight: 400 */
@font-face {
font-family: 'Neue Haas Unica';
src: local('Neue Haas Unica'),
local('NeueHaasUnica-Regular'),
url('../assets/Fonts/NHU-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Medium - font-weight: 500 */
@font-face {
font-family: 'Neue Haas Unica';
src: local('Neue Haas Unica Medium'),
local('NeueHaasUnica-Medium'),
url('../assets/Fonts/NHU-Med.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* Black - font-weight: 900 */
@font-face {
font-family: 'Neue Haas Unica';
src: local('Neue Haas Unica Black'),
local('NeueHaasUnica-Black'),
url('../assets/Fonts/NHU-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* Inp - Header Typography
Font file located in assets/Fonts/
======================================================== */
@font-face {
font-family: 'Inp';
src: url('../assets/Fonts/Inp.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Inp weight 300 - maps to same file for nav elements using font-weight: 300 */
@font-face {
font-family: 'Inp';
src: url('../assets/Fonts/Inp.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* ==================== PAGE LOAD ANIMATION ==================== */
/* Simple fade-in for standard page loads */
body {
animation: pageLoadFadeIn 0.4s ease-out;
}
@keyframes pageLoadFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Container styling */
#swup,
.transition-main {
width: 100%;
/* NOTE: transform: translateZ(0) REMOVED - it created a containing block
that broke position: fixed for Enhancement Framework sticky viewport.
This transform optimization is no longer needed. */
}
/* ==================== PAGE TRANSITION PROGRESS BAR ==================== */
/* Centered loading indicator for page transitions */
.page-progress {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 12px;
opacity: 0;
visibility: hidden;
z-index: 99999;
transition: opacity 0.3s ease, visibility 0.3s ease;
pointer-events: none;
}
.page-progress.active {
opacity: 1;
visibility: visible;
}
.page-progress-bar {
width: 120px;
height: 2px;
background: rgba(255, 255, 255, 0.12);
border-radius: 1px;
overflow: hidden;
position: relative;
}
.page-progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 1px;
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
transition: transform 0.2s ease-out;
}
/* Loading state: animate to 70% with slow easing */
.page-progress.loading .page-progress-bar::after {
transform: scaleX(0.7);
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Complete state: quickly fill to 100% */
.page-progress.complete .page-progress-bar::after {
transform: scaleX(1);
transition: transform 0.2s ease-out;
}
/* Percentage text */
.page-progress-percent {
font-family: 'Inp', 'Neue Haas Unica', monospace;
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
min-width: 28px;
text-align: right;
}
/* ==================== CSS VARIABLES ==================== */
:root {
/* Color Tokens - Light mode uses off-white for reduced harshness */
--primary-text: #1a1a1a;
--secondary-text: #4a4a4a;
--background: #f8f8f8;
--card-bg: #e8e8e8;
--icon-bg: #ffffff;
--icon-border: #c0c0c0;
/* Sharper grey for better visibility - form fields and gradients */
/* ==========================================================================
FLEXIBLE GRID SYSTEM - Inspired by Metalab
Fills window width with fluid padding, scales with viewport
========================================================================== */
/* Fluid Page Padding - matches header nav padding for alignment */
--page-padding: var(--nav-left);
/* Content Margin Left - same as nav-left for uniform alignment */
--content-margin-left: var(--nav-left);
/* Home/Contact page margins - matches header for consistency */
--home-margin-left: var(--nav-left);
--home-margin-right: var(--nav-right);
/* Grid Gutter - space between columns */
--grid-gutter: clamp(16px, 2vw, 32px);
/* Section Spacing - vertical rhythm between major sections */
--section-gap-sm: clamp(32px, 5vw, 48px);
--section-gap-md: clamp(48px, 8vw, 80px);
--section-gap-lg: clamp(64px, 10vw, 120px);
--section-gap-xl: clamp(80px, 12vw, 160px);
/* ==========================================================================
FLUID TYPOGRAPHY - Scales smoothly between breakpoints
Format: clamp(min, preferred, max)
========================================================================== */
/* Display / Hero Typography */
--font-display-xl: clamp(32px, 5vw, 56px);
--font-display-lg: clamp(28px, 4vw, 46px);
--font-display-md: clamp(24px, 3.5vw, 36px);
/* Home page hero typography (used by contact form title) */
--home-font-hero-lg: clamp(28px, 4vw, 46px);
--home-font-hero-md: clamp(20px, 3vw, 36px);
--home-font-body: clamp(13px, 1.2vw, 16px);
/* Headings */
--font-heading-xl: clamp(24px, 3vw, 36px);
--font-heading-lg: clamp(20px, 2.5vw, 28px);
--font-heading-md: clamp(18px, 2vw, 24px);
--font-heading-sm: clamp(16px, 1.5vw, 20px);
/* Body Text */
--font-body-lg: clamp(16px, 1.25vw, 20px);
--font-body-md: clamp(14px, 1.1vw, 18px);
--font-body-sm: clamp(13px, 1vw, 16px);
--font-body-xs: clamp(11px, 0.9vw, 14px);
/* Line Heights - proportional to font sizes */
--line-height-tight: 1.2;
--line-height-snug: 1.35;
--line-height-normal: 1.5;
--line-height-relaxed: 1.65;
/* Letter Spacing */
--letter-spacing-tight: -0.02em;
--letter-spacing-normal: -0.01em;
--letter-spacing-wide: 0.02em;
/* ==========================================================================
LEGACY LAYOUT VARIABLES (for backwards compatibility)
========================================================================== */
--content-left: calc(8.33% + 2px);
--nav-top: 10px;
--nav-left: 20px;
--nav-right: 20px;
--card-radius: 12px;
/* ==========================================================================
CARD HEIGHT VARIABLES - Used by scroll focus cards (interactions.js)
Reduced heights for compact layout
========================================================================== */
--focus-min-h: 220px;
/* Inactive card height (was 255px) */
--focus-max-h: 360px;
/* Active card height (was 425px) */
--focus-gap: 24px;
/* Gap between cards */
}
[data-theme="dark"] {
--primary-text: #f0f0f0;
--secondary-text: #999999;
--background: #020202;
--card-bg: #171717;
--icon-bg: #171717;
--icon-border: #555555;
/* Sharper grey for better visibility - form fields and gradients */
}
/* ==================== THEME TOGGLE BUTTON ==================== */
/* Matches nav-contact-btn aesthetics */
.nav-theme-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 8px;
border: 1px solid var(--hair);
background: rgba(0, 0, 0, 0.10);
color: var(--primary-text);
cursor: pointer;
overflow: hidden;
transition: background 0.2s ease, border-color 0.2s ease;
}
/* Light mode button styling */
html:not([data-theme="dark"]) .nav-theme-toggle {
border-color: var(--hair);
background: rgba(255, 255, 255, 0.40);
}
html:not([data-theme="dark"]) .nav-theme-toggle:hover {
background: rgba(126, 187, 28, 0.15);
border-color: #7EBB1C;
}
/* Theme icons */
.theme-icon {
width: 16px;
height: 16px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/* Default centered, JS overrides for animation */
z-index: 1;
flex-shrink: 0;
}
/* Icons track - contains both icons stacked vertically */
.theme-icons-track {
position: relative;
width: 16px;
height: 16px;
z-index: 1;
}
/* JS handles all icon positioning for drum roller animation */
/* Moon icon: visible in light mode (center) */
/* Sun icon: visible in dark mode (center) */
/* Light mode: moon is darker grey */
html:not([data-theme="dark"]) .theme-icon--moon {
color: #666666;
}
/* Light mode: fullscreen icon matches moon grey */
html:not([data-theme="dark"]) .fullscreen-icon {
color: #666666;
}
/* Dark mode: JS handles drum roller animation, no CSS transform needed */
/* Theme toggle beam SVG positioning */
.nav-theme-toggle .toggle-beam-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* Hide beam SVG in light mode */
html:not([data-theme="dark"]) .nav-theme-toggle .toggle-beam-svg {
display: none;
}
/* ==================== LIGHT MODE NAV OVERRIDES ==================== */
/* Use html:not([data-theme="dark"]) for proper specificity over base styles */
/* Nav CTA buttons: 40% opacity white bg with dark text for light mode */
html:not([data-theme="dark"]) .nav-contact-btn {
color: var(--primary-text) !important;
border: 1px solid var(--icon-border) !important;
background: rgba(255, 255, 255, 0.4) !important;
}
html:not([data-theme="dark"]) .nav-contact-btn:hover {
background: rgba(126, 187, 28, 0.15) !important;
border-color: #7EBB1C !important;
}
/* Theme toggle button: consistent styling across themes */
/* Light mode styling handled by html:not([data-theme="dark"]) rule above */
/* SVG beam borders: hide in light mode since CSS border handles it now */
html:not([data-theme="dark"]) .nav-contact-btn .beam-svg use,
html:not([data-theme="dark"]) .search-beam-svg use {
stroke: transparent !important;
stroke-opacity: 0 !important;
}
/* Clock: ensure dark text color for light mode */
html:not([data-theme="dark"]) .global-clock {
color: var(--primary-text);
}
/* Nav-clock wrapper: 40% opacity white bg with dark border for light mode */
html:not([data-theme="dark"]) .nav-clock {
background: rgba(255, 255, 255, 0.4) !important;
border-color: var(--icon-border) !important;
}
/* Theme toggle light mode border is handled by html:not([data-theme="dark"]) rule above */
/* Contact Send CTA: base black text for light mode */
html:not([data-theme="dark"]) .contact-submit-btn,
html:not([data-theme="dark"]) .contact-submit-btn>span {
color: var(--primary-text) !important;
}
/* ==================== BASE RESET ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
html,
body {
width: 100%;
min-height: 100%;
overflow-x: hidden;
/* Prevent horizontal scroll on mobile */
}
/* Desktop only: Reserve space for scrollbar to prevent layout shift during page transitions */
@media (min-width: 769px) {
html {
scrollbar-gutter: stable;
}
}
body {
font-family: 'Neue Haas Unica', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
background-color: var(--background, #f8f8f8);
color: var(--primary-text);
transition: background-color 0.5s ease, color 0.5s ease;
/* Prevent orphaned words (widows) at the end of paragraphs
Browser adjusts line breaks to avoid single words on last line */
text-wrap: pretty;
}
/* ==================== PAGE CONTAINER ==================== */
/* Fluid container - fills viewport width with responsive padding */
.page-container {
position: relative;
width: 100%;
min-height: 100vh;
max-width: none;
/* Remove max-width cap for full-width layout */
margin: 0;
padding-left: var(--page-padding);
padding-right: var(--page-padding);
/* No padding-bottom - footer handles bottom spacing */
background-color: var(--background);
/* Same as header for seamless look */
transition: background-color 0.5s ease;
/* Match header/body transition */
}
/* Centered container - for content that should have max-width */
.page-container--centered {
max-width: 1800px;
margin: 0 auto;
}
/* ==========================================================================
FLUID GRID UTILITIES
Use these classes to create flexible layouts
========================================================================== */
/* Full-bleed section - breaks out of padding */
.full-bleed {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* Content wrapper - applies consistent left margin for text content */
.content-wrapper {
margin-left: var(--content-margin-left);
margin-right: var(--page-padding);
}
/* Fluid grid container */
.fluid-grid {
display: grid;
gap: var(--grid-gutter);
width: 100%;
}
/* Common grid layouts */
.fluid-grid--2col {
grid-template-columns: repeat(2, 1fr);
}
.fluid-grid--3col {
grid-template-columns: repeat(3, 1fr);
}
.fluid-grid--4col {
grid-template-columns: repeat(4, 1fr);
}
/* Asymmetric layouts - common content patterns */
.fluid-grid--sidebar-left {
grid-template-columns: minmax(200px, 1fr) 2fr;
}
.fluid-grid--sidebar-right {
grid-template-columns: 2fr minmax(200px, 1fr);
}
.fluid-grid--40-60 {
grid-template-columns: 2fr 3fr;
}
.fluid-grid--60-40 {
grid-template-columns: 3fr 2fr;
}
/* Responsive grid breakdowns */
@media (max-width: 1024px) {
.fluid-grid--2col,
.fluid-grid--sidebar-left,
.fluid-grid--sidebar-right,
.fluid-grid--40-60,
.fluid-grid--60-40 {
grid-template-columns: 1fr;
}
.fluid-grid--3col {
grid-template-columns: repeat(2, 1fr);
}
.fluid-grid--4col {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.fluid-grid--3col,
.fluid-grid--4col {
grid-template-columns: 1fr;
}
.content-wrapper {
margin-left: 0;
margin-right: 0;
}
}
/* ==================== NAVIGATION COMPONENT ==================== */
/* Navigation container - injected by navigation.js */
.nav-component {
position: relative;
/* Relative so it participates in stacking but doesn't take space from fixed header */
z-index: 10000;
/* Always on top - higher than any content */
/* View transition name applied inline in HTML */
}
/* Main Header - New Design */
.main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--nav-top) var(--nav-right) var(--nav-top) var(--nav-left);
background-color: var(--background, #f8f8f8);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease,
background-color 0.3s ease,
backdrop-filter 0.3s ease;
border-bottom: none;
z-index: 10000;
}
/* Header scrolled state - elegant blur with subtle transparency */
.main-header.header-scrolled {
background-color: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
}
/* Feathered bottom edge - seamless blend with content */
.main-header.header-scrolled::after {
content: '';
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.65) 0%,
rgba(255, 255, 255, 0) 100%);
pointer-events: none;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
[data-theme="dark"] .main-header.header-scrolled {
background-color: rgba(26, 26, 26, 0.65);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
}
[data-theme="dark"] .main-header.header-scrolled::after {
background: linear-gradient(to bottom,
rgba(26, 26, 26, 0.65) 0%,
rgba(26, 26, 26, 0) 100%);
}
/* Contact page: Transparent header so animation fills entire height */
.main-header.header-contact {
background-color: transparent !important;
}
.main-header.header-contact.header-scrolled {
background-color: transparent !important;
}
/* Compact header state - no longer used, header stays compact */
.main-header.header-compact {
display: flex;
}
/* Header hidden state - slides up and fades on scroll down */
.main-header.header-hidden {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
/* Smooth hide animation - desktop default */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease-out;
}
/* ==================== NAV LEFT CONTAINER (Clock/Back Button) ==================== */
/* Container for clock/back button - left-aligned */
.nav-left-container {
position: relative;
display: flex;
align-items: center;
height: 100%;
/* Fill parent for proper centering */
overflow: visible;
}
/* Individual items in the container - fade in on page load */
.nav-left-item {
display: flex;
align-items: center;
gap: 20px;
height: 32px;
flex-shrink: 0;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 32px;
letter-spacing: -0.416px;
color: var(--primary-text);
}
/* Clock item styling */
.nav-left-item--clock {
gap: 20px;
}
/* ==================== HEADER TRANSITION ANIMATIONS ==================== */
/* Class-based fade-in for navigation elements - works with page transitions */
/* Elements start hidden and animate in when .nav-animate is added to header */
.main-header .nav-left-item--clock,
.main-header .nav-left-item--back,
.main-header .nav-fullscreen-btn,
.main-header .nav-contact-btn {
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* When nav-animate class is present, elements become visible */
.main-header.nav-animate .nav-left-item--clock,
.main-header.nav-animate .nav-left-item--back,
.main-header.nav-animate .nav-fullscreen-btn,
.main-header.nav-animate .nav-contact-btn {
opacity: 1;
transform: translateY(0);
}
/* Case study pages use .nav class - elements visible by default */
/* NOTE: Contact and Case Study pages excluded - use separate animation rules */
.nav:not(.nav--contact-page):not(.nav--case-study) .nav-contact-btn,
.nav:not(.nav--case-study) .nav-fullscreen-btn {
opacity: 1;
transform: translateY(0);
}
/* Stagger the animations with transition-delay for elegant timing */
.main-header.nav-animate .nav-left-item--clock,
.main-header.nav-animate .nav-left-item--back {
transition-delay: 0.15s;
}
.main-header.nav-animate .nav-contact-btn {
transition-delay: 0.25s;
/* Slight delay after left items */
}
.main-header.nav-animate .nav-fullscreen-btn {
transition-delay: 0.2s;
}
/* Back button item styling - Arrow only, left-aligned */
.nav-left-item--back {
gap: 0;
text-decoration: none;
transition: color 0.3s ease;
height: 32px;
/* Match height of other nav items to prevent header shift */
display: flex;
align-items: center;
justify-content: flex-start;
/* Left-aligned */
}
.nav-back-arrow {
width: 36px;
height: 24px;
stroke: currentColor;
stroke-width: 1.5;
overflow: visible;
transition: transform 0.2s ease-out;
}
/* On hover: just scale up the icon */
.nav-left-item--back:hover .nav-back-arrow {
transform: scale(1.15);
}
.nav-left-item--back:hover {
color: var(--secondary-text);
}
/* Hide the "Back" text - arrow only, but define typography for potential show states */
.nav-back-text {
display: none;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 32px;
letter-spacing: -0.416px;
color: var(--primary-text);
}
/* Legacy global-clock class for backwards compatibility */
.global-clock {
display: flex;
align-items: center;
gap: 20px;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 32px;
letter-spacing: -0.416px;
color: var(--primary-text);
}
.clock-location {
color: var(--primary-text);
}
.clock-time-wrapper {
display: inline-flex;
align-items: center;
gap: 6px;
/* 2px gap between time and AM/PM */
position: relative;
overflow: visible;
/* Allow Z's to sprinkle outside */
}
.clock-time {
color: var(--primary-text);
font-variant-numeric: tabular-nums;
position: relative;
cursor: default;
}
.clock-period {
color: var(--primary-text);
font-variant-numeric: tabular-nums;
position: relative;
cursor: default;
}
/* Sleepy Z's animation - sprinkle outward on hover */
.clock-z-sprinkle {
position: absolute;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 12px;
/* Bigger Z's for better visibility */
color: var(--secondary-text, #5a5a5a);
opacity: 0.4;
pointer-events: none;
z-index: 1000;
font-weight: 300;
animation: sprinkleOut 1.2s ease-out forwards;
}
@keyframes sprinkleOut {
0% {
opacity: 0.6;
transform: translate(0, 0) scale(0.8) rotate(0deg);
}
100% {
opacity: 0;
transform: translate(var(--sprinkle-x, 20px), var(--sprinkle-y, -15px)) scale(1.2) rotate(var(--sprinkle-rotate, 15deg));
}
}
/* ==================== PAGE TITLE ==================== */
.nav-page-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 32px;
letter-spacing: -0.416px;
color: var(--primary-text);
margin: 0;
/* No fade-in - controlled by .nav-page-title--hidden/--visible */
}
/* Page title - hidden by default, appears on scroll (home and case study pages) */
.nav-page-title--hidden {
opacity: 0 !important;
/* Override fadeIn animation */
animation: none !important;
/* Disable fadeIn animation */
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateX(-50%) translateY(-4px);
pointer-events: none;
}
.nav-page-title--hidden.nav-page-title--visible {
opacity: 1 !important;
/* Override the base opacity: 0 !important */
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* Contact page: name always visible and centered with fade-in animation */
.header-contact .nav-page-title {
opacity: 0;
/* Start hidden for animation */
transform: translateX(-50%) translateY(-8px);
pointer-events: auto;
animation: headerElementFadeIn 0.5s ease-out forwards;
animation-delay: 0.1s;
/* Staggered with other elements */
}
/* ==================== RIGHT GROUP (Collaborate + Toggle) ==================== */
.nav-right-group {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
/* Push to the right */
}
/* Contact Button */
/* Contact Button - Beam Animation */
.nav-contact-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 1px 10px 0;
/* 1px top padding shifts text down for visual balance */
border-radius: 8px;
border: none;
/* Border is provided by SVG stroke in dark mode, CSS border in light mode */
background: rgba(0, 0, 0, 0.10);
color: rgba(255, 255, 255, 0.92);
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: -0.416px;
line-height: 32px;
text-decoration: none;
/* Border is provided by SVG stroke */
user-select: none;
overflow: hidden;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav-contact-btn::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.nav-contact-btn .beam-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.beamMotion {
display: none;
}
}
/* Light mode: hide beam animation on nav CTAs */
html:not([data-theme="dark"]) .nav-contact-btn .beamMotion {
display: none;
}
/* Dark mode: hide beam animation, use green hover like light mode */
[data-theme="dark"] .nav-contact-btn .beamMotion,
[data-theme="dark"] .nav-contact-btn .beam-svg,
[data-theme="dark"] .nav-theme-toggle .toggle-beam-svg {
display: none;
}
/* Dark mode: default state with grey border and white text */
[data-theme="dark"] .nav-contact-btn {
color: #f0f0f0 !important;
border: 1px solid rgba(240, 240, 240, 0.3) !important;
background: transparent !important;
}
[data-theme="dark"] .nav-contact-btn:hover {
background: rgba(126, 187, 28, 0.15) !important;
border: 1px solid #7EBB1C !important;
}
[data-theme="dark"] .nav-theme-toggle {
border-color: rgba(240, 240, 240, 0.3);
}
[data-theme="dark"] .nav-theme-toggle:hover {
background: rgba(126, 187, 28, 0.15);
border-color: #7EBB1C;
}
/* Hover is handled by ::after pseudo-element above */
.nav-contact-btn:focus-visible {
outline: 2px solid var(--primary-text);
outline-offset: 2px;
}
/* Legacy wrapper styles removed - beam animation uses static text */
/* Legacy styles for backwards compatibility */
.nav-left {
position: absolute;
left: var(--nav-left);
top: var(--nav-top);
font-size: 16px;
font-weight: 300;
line-height: 32px;
letter-spacing: -0.416px;
color: var(--primary-text);
text-decoration: none;
transition: color 0.3s ease;
/* No fade-in - header should appear instantly */
}
.nav-left:hover {
color: var(--secondary-text);
}
.nav-back-link {
display: flex;
align-items: center;
gap: 4px;
text-decoration: none;
transition: color 0.3s ease;
/* No fade-in - header should appear instantly */
}
.nav-back-link:hover {
color: var(--secondary-text);
}
.nav-back-link:hover .nav-back-arrow {
stroke: var(--secondary-text);
}
/* Back arrow styles now defined in .nav-left-item--back section above */
/* .nav-back-text canonical at line ~597 */
.nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: var(--nav-top);
font-size: 16px;
font-weight: 300;
line-height: 32px;
letter-spacing: -0.416px;
color: var(--primary-text);
/* No fade-in - header should appear instantly */
}
/* ==================== FULLSCREEN BUTTON ==================== */
/* Styled to match nav-contact-btn for visual consistency */
/* Hidden by default - shown only on case study pages via .nav--case-study */
.nav-fullscreen-btn {
position: relative;
display: none;
/* Hidden by default - override in .nav--case-study */
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 8px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
user-select: none;
overflow: hidden;
}
.nav-fullscreen-btn::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(255, 255, 255, 0.06);
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
}
.nav-fullscreen-btn:hover::after {
opacity: 1;
}
/* Border SVG overlay to match nav-contact-btn beam style */
.nav-fullscreen-btn .beam-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.nav-fullscreen-btn:focus-visible {
outline: 2px solid var(--primary-text);
outline-offset: 2px;
}
/* Fullscreen icon styling */
.fullscreen-icon {
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.92);
flex-shrink: 0;
}
/* When in fullscreen, toggle icon visibility (handled by JS) */
/* .nav-fullscreen-btn display:none is canonical at line ~851 */
/* Show fullscreen button only on case study pages */
.nav--case-study .nav-fullscreen-btn {
display: flex;
}
/* Hide fullscreen button on tablet and mobile - desktop only */
@media (max-width: 1024px) {
.nav-fullscreen-btn {
display: none !important;
}
}
/* ==================== SHARED ANIMATIONS ==================== */
@keyframes fadeIn {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
/* Page exit animation - shift down and fade out */
@keyframes pageExit {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(20px);
}
}
/* Page exiting state - applied to main content */
.page-exiting .page-container {
animation: pageExit 0.3s ease-out forwards;
}
/* Fade out fixed-position elements like cuboid animation */
.page-exiting .contact-animation-canvas {
animation: pageExit 0.3s ease-out forwards;
}
/* Keep header static during exit */
.page-exiting .main-header {
/* Header stays in place - no animation */
animation: none;
}
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==================== RESPONSIVE - NAVIGATION ==================== */
@media (min-width: 1441px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* ==================== DESKTOP BREAKPOINT (wider margins) ==================== */
@media (min-width: 1025px) {
:root {
--nav-left: 32px;
--nav-right: 32px;
}
}
/* ==================== TABLET BREAKPOINT (follows mobile patterns) ==================== */
@media (max-width: 1024px) {
:root {
--nav-left: 32px;
--nav-right: 32px;
--nav-top: 12px;
/* Compact padding */
}
/* Tablet follows mobile design patterns for content layout - no footer padding needed */
/* Header adjustments for tablet - consistent compact sizing, no shifting */
.main-header {
padding: 12px var(--nav-right) 12px var(--nav-left);
/* Compact padding */
}
/* No size change on scroll */
.main-header.header-scrolled {
padding: 12px var(--nav-right) 12px var(--nav-left);
}
.nav-right-group {
gap: 12px;
}
}
/* ==================== SMALL TABLET / LARGE MOBILE ==================== */
@media (max-width: 767px) {
:root {
--nav-left: 21px;
/* 6.56% of 320px = ~21px */
--nav-right: 20px;
/* 6.25% of 320px = ~20px */
--nav-top: 21px;
/* Default state: 26.25% of 80px = ~21px */
}
/* Header adjustments for mobile - consistent compact sizing, no shifting */
.main-header {
height: 56px;
min-height: 56px;
padding: 12px var(--nav-right) 12px var(--nav-left);
/* Use nav-left for left padding to match title positioning */
border-bottom: none;
display: flex;
align-items: center;
}
/* No size change on scroll - stays compact */
.main-header.header-scrolled {
height: 56px;
min-height: 56px;
padding-top: 12px;
padding-bottom: 12px;
}
/* Mobile: Fast header fade-out when scrolling down */
.main-header.header-hidden {
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease-out;
/* No delay - fades out immediately */
}
/* When showing (removing hidden class), slightly slower for elegance */
.main-header:not(.header-hidden) {
transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
opacity 0.25s ease-in;
}
.global-clock {
display: none;
/* Hide clock completely on mobile */
}
.clock-location {
display: block;
/* Show location on mobile per Figma */
color: var(--primary-text);
font-size: 14px;
line-height: 20px;
}
.clock-time {
color: var(--primary-text);
font-size: 14px;
line-height: 20px;
font-variant-numeric: tabular-nums;
}
.clock-time-wrapper {
display: inline-flex;
align-items: center;
gap: 2px;
/* 2px gap between time and AM/PM */
}
.clock-period {
display: inline;
/* Show period inline with time */
}
.nav-page-title {
font-size: 14px;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
line-height: 20px;
letter-spacing: -0.416px;
position: absolute;
left: var(--nav-left);
right: auto;
/* Vertical centering */
top: 50% !important;
transform: translateY(-50%) !important;
max-width: calc(100% - var(--nav-left) - var(--nav-right) - 100px);
/* Leave space for toggle + contact */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide page title on mobile for case study pages - back CTA is priority */
.header-case-study .nav-page-title {
display: none !important;
}
/* Home page title visibility controlled by opacity in mobile swap section */
/* .header-home .nav-page-title - display controlled via opacity, not display */
/* Contact page title visibility controlled by opacity in mobile swap section */
/* .header-contact .nav-page-title - display controlled via opacity, not display */
/* Contact page: Center nav title on mobile */
.header-contact .nav-page-title {
left: 50% !important;
transform: translate(-50%, -50%) !important;
text-align: center;
}
/* Override the visible state transform and opacity on mobile */
.nav-page-title--hidden.nav-page-title--visible {
opacity: 1 !important;
/* Ensure it's visible on mobile */
transform: translateY(-50%) !important;
/* Preserve vertical centering */
pointer-events: auto;
}
.nav-right-group {
gap: 8px;
height: 100%;
display: flex;
align-items: center;
}
.nav-contact-btn {
height: 32px;
padding: 0 8px;
font-size: 14px;
line-height: 30px;
/* Inherits beam styling from base styles */
}
.nav-left,
.nav-center,
.nav-back-text {
font-size: 14px;
}
.nav-center {
display: none;
}
/* Back arrow keeps consistent sizing on mobile */
/* Slide animation uses 32px height at this breakpoint */
@keyframes slideDown {
0% {
transform: translateY(-32px);
}
100% {
transform: translateY(0);
}
}
}
/* ==================== MOBILE BREAKPOINT ==================== */
@media (max-width: 480px) {
:root {
--nav-left: 21px;
/* Same as 767px breakpoint */
--nav-right: 20px;
--nav-top: 21px;
}
/* Header adjustments for small mobile - consistent compact sizing */
.main-header {
height: 56px;
min-height: 56px;
padding: 12px var(--nav-right) 12px var(--nav-left);
/* Use nav-left for left padding to match title positioning */
border-bottom: none;
display: flex;
align-items: center;
}
/* No size change on scroll - stays compact */
.main-header.header-scrolled {
height: 56px;
min-height: 56px;
padding-top: 12px;
padding-bottom: 12px;
}
/* Clock visibility is now controlled by opacity in the mobile swap section */
/* .global-clock - no longer hiding via display: none */
.nav-page-title {
font-size: 14px;
line-height: 20px;
left: var(--nav-left);
right: auto;
/* Consistent vertical centering across all mobile breakpoints */
top: 50% !important;
transform: translateY(-50%) !important;
max-width: calc(100% - var(--nav-left) - var(--nav-right) - 100px);
/* Leave space for toggle + contact */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide page title on mobile for case study pages - back CTA is priority */
.header-case-study .nav-page-title {
display: none !important;
}
/* Home page title visibility controlled by opacity in mobile swap section */
/* .header-home .nav-page-title - no longer hiding via display: none */
/* Contact page title visibility controlled by opacity in mobile swap section */
/* .header-contact .nav-page-title - no longer hiding via display: none */
/* Contact page: Center nav title on small mobile */
.header-contact .nav-page-title {
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
text-align: center;
}
/* Override the visible state transform and opacity on mobile */
.nav-page-title--hidden.nav-page-title--visible {
opacity: 1 !important;
/* Ensure it's visible on mobile */
transform: translateY(-50%) !important;
/* Preserve vertical centering */
pointer-events: auto;
}
.nav-contact-btn {
height: 32px;
padding: 0 8px;
font-size: 14px;
line-height: 30px;
/* Inherits beam styling from base styles */
}
.nav-left {
font-size: 14px;
}
}
/* ==========================================================================
RESPONSIVE BREAKPOINT STRATEGY (Design System)
==========================================================================
Desktop: > 1024px - Full layout with side-by-side columns, large margins
Tablet: <= 1024px - Follows MOBILE patterns (stacked layouts, vertical flow)
Small Tab: <= 768px - Reduced margins, smaller typography
Mobile: <= 480px - Minimum margins (20px), mobile-optimized sizes
KEY PRINCIPLE: Tablet (1024px) follows mobile design patterns for layout.
This means vertical/stacked layouts, not horizontal/side-by-side.
Only desktop gets the full wide layout.
========================================================================== */
/* ==================== CONTACT FORM STYLES ==================== */
/* Contact form is on dedicated contact.html page */
/* Contact form header - title and close button */
.contact-form-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
margin: 0;
/* Remove stacked spacing system */
flex-shrink: 0;
/* Don't shrink header */
/* Prevent letter cutoff - allow content to be fully visible */
overflow: visible;
min-width: 0;
/* Allow flex children to shrink if needed */
}
/* Contact form title - matches hero-line-2 size and styling */
/* Animates line by line using clip-path to reveal first row, then second row */
.contact-form-title {
font-family: 'Neue Haas Unica W1G', sans-serif;
font-size: var(--home-font-hero-md);
/* Changed from hero-lg to hero-md for tablet/desktop */
font-weight: 300;
/* Same as hero-line-2 */
line-height: 1.2;
/* Reduced further to save space for message field */
letter-spacing: -0.026em;
color: var(--primary-text);
margin: 0;
text-align: left;
/* Stay in flex layout - fill available width elegantly */
flex: 1;
min-width: 0;
/* Allow text to wrap */
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
padding-right: 20px;
/* Space from close button */
/* CSS variable system handles animation - no clip-path needed */
overflow: visible !important;
/* Allow text to display normally */
clip-path: none !important;
/* CRITICAL: Remove clip-path - CSS variable system handles visibility */
-webkit-clip-path: none !important;
animation: none !important;
/* CRITICAL: Remove any old animations */
visibility: visible !important;
/* CRITICAL: Ensure title is always visible when form is active */
}
/* CSS variable system handles title animation - no separate animation needed */
/* Title uses hero-line-2 size (smaller), no need to scale down further */
/* Reduce gap between Company and Email fields to 12px for viewports < 1440px */
@media (max-width: 1440px) {
.contact-field-row {
gap: 20px;
}
}
/* Word wrapper - no animation, title container handles line-by-line reveal */
.contact-form-title .title-word-wrapper {
position: relative;
display: inline-block;
/* Changed to inline-block for better positioning control */
vertical-align: baseline;
/* Align with text baseline */
/* No individual animation - container handles reveal */
}
/* Shadow word - hidden, no longer used for animation */
/* Actual word - visible by default, title container handles animation */
.contact-form-title .title-word {
position: relative;
display: inline-block;
/* Changed to inline-block to match shadow */
opacity: 1;
/* Always visible - title container handles animation */
z-index: 1;
/* On top of shadow */
/* Normal sentence spacing - no gap */
margin: 0;
padding: 0;
/* Use same text rendering properties for perfect alignment */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Ensure same vertical alignment */
vertical-align: baseline;
/* Match font properties exactly - inherit from parent */
font-family: 'Neue Haas Unica W1G', sans-serif;
font-size: var(--home-font-hero-md);
/* Inherit from parent (.contact-form-title) */
font-weight: 300;
line-height: 1.05;
/* Match contact-form-title line-height */
letter-spacing: -0.026em;
}
/* Title animates line by line - handled by word-wrappers above */
/* CSS Variables for form heights */
:root {
--input-h: clamp(40px, 5vh, 52px);
--cta-h: clamp(52px, 6vh, 60px);
}
.contact-form {
display: grid;
grid-template-rows: auto auto auto auto auto;
grid-template-columns: 1fr;
/* STRETCH CONTRACT: ensure children fill width */
gap: 32px;
/* Consistent gap between ALL fields - even spacing */
width: 100%;
justify-items: stretch;
/* STRETCH CONTRACT: ensure grid children stretch */
margin-top: 0;
/* Contact page handles its own spacing via .contact-page-section */
padding: 0;
/* No extra padding needed */
opacity: 1;
/* Minimal fade - background canvas handles the reveal */
/* Fields appear 0.04s after title finishes (last word: 0.38s + 0.23s = 0.61s) - strict sequential */
transition: opacity 0.15s ease 0.65s !important;
/* Minimal fade - background canvas is main animation */
/* NO scrollbars on form */
overflow: visible;
min-height: 0;
/* Allow grid to shrink */
flex: 0 0 auto;
/* Don't expand - content height only */
}
/* Contact form is now only on contact.html page */
/* Single column layout - all fields stacked (rows removed, kept for backwards compatibility) */
.contact-form-row {
display: flex;
flex-direction: column;
/* Always single column */
gap: clamp(28px, 4vh, 40px);
/* Responsive gap */
width: 100%;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Row for Company and Email - side by side */
/* CSS variable system handles animations - no transition/opacity/transform rules needed here */
.contact-field-row {
display: flex;
flex-direction: row;
gap: 20px;
/* Gap between Company and Email fields inside the row */
width: 100%;
margin: 0;
/* No margin - gap handles spacing */
padding: 0;
/* No padding */
flex: 0 0 auto;
/* Don't grow or shrink - natural size */
overflow: visible;
/* Allow content to be visible - prevent cut-off */
will-change: transform, opacity;
/* GPU acceleration - prevents lag */
backface-visibility: hidden;
/* Smooth rendering - prevents flicker */
-webkit-backface-visibility: hidden;
/* Safari support */
}
.contact-field-row .contact-field {
flex: 1 1 0;
/* Equal width, can shrink */
min-width: 0;
/* Allow flex items to shrink below content size */
max-width: 100%;
/* Prevent overflow */
}
/* Field base styles - layout, positioning, flex behavior */
.contact-field {
position: relative;
/* For error icon positioning */
display: flex;
flex-direction: column;
flex: 0 1 auto;
/* Can shrink but don't grow unnecessarily */
min-width: 0;
/* Allow shrinking below content size */
width: 100%;
margin: 0 !important;
/* CRITICAL: No margin - gap from parent handles ALL spacing */
padding: 0 !important;
/* CRITICAL: No padding that could interfere */
overflow: hidden;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Message field - fills remaining grid space */
.contact-field:has(.contact-textarea) {
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Field spacing - gap between fields - CRITICAL: Remove ALL margins and padding from ALL direct children */
.contact-form>* {
margin: 0 !important;
/* CRITICAL: No margin on ANY direct child - gap handles ALL spacing */
padding: 0 !important;
/* CRITICAL: No padding that could interfere with gap */
}
/* Submit button should not grow or shrink - always visible at bottom */
.contact-submit-btn {
flex: 0 0 auto;
flex-shrink: 0;
/* Never shrink */
margin-top: 0;
/* Gap from parent handles spacing - no extra margin */
/* Margin on submit button itself handles border spacing (see .contact-submit-btn base styles) */
}
/* CSS variable system handles all animations - no separate opacity rules needed */
/* Match Figma label styling - filled background, hugging content */
.contact-label {
display: inline-block;
/* Hug content - not full width */
width: auto;
/* Explicitly set to auto to hug content */
max-width: fit-content;
/* Hug content */
background-color: #484953;
/* Light mode: white (match fields) */
border: 1px solid var(--icon-border);
/* Match toggle and close button border */
border-bottom: none;
border-radius: 4px 4px 0 0;
padding: 2px 10px;
/* Figma: py-[2px] px-[10px] */
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 12px;
/* Figma: 14px */
font-weight: 300;
/* Figma: Regular */
line-height: 20px;
/* Figma: 20px */
color: #d9d9d9;
/* White text */
text-align: left;
box-sizing: border-box;
transition: border-color 0.5s ease,
color 0.5s ease,
background-color 0.5s ease;
/* Smooth color transitions on theme change */
}
/* Dark mode: fields and labels use card-bg */
[data-theme="dark"] .contact-input,
[data-theme="dark"] .contact-textarea {
background-color: var(--background);
/* Dark mode: match card-bg */
}
[data-theme="dark"] .contact-label {
background-color: var(--background);
/* Dark mode: match field background */
}
/* Match Figma input styling - filled background */
.contact-input {
width: 100%;
/* Fill container width */
box-sizing: border-box;
/* Include padding/border in width */
background-color: var(--background);
/* Match section background */
border: 1px solid var(--icon-border);
/* Match toggle and close button border */
border-radius: 0 4px 4px 4px;
/* Top-left connects to label */
padding: 8px;
/* Figma: 8px padding */
font-family: 'Neue Haas Unica W1G', sans-serif;
font-size: 16px;
/* Figma: 16px */
font-weight: 400;
/* Figma: Regular */
line-height: 20px;
/* Figma: 20px */
color: var(--primary-text);
/* White text */
outline: none;
width: 100%;
box-sizing: border-box;
height: var(--input-h);
/* Use CSS variable for consistent height */
transition: border-color 0.15s ease,
color 0.5s ease,
background-color 0.5s ease,
height 0.18s cubic-bezier(0.1, 0, 0.3, 1),
min-height 0.18s cubic-bezier(0.1, 0, 0.3, 1);
/* Smooth color transitions + height animation */
}
/* Input styles for contact page */
/* ==================== FORM VALIDATION ERROR STATES ==================== */
/* Error state for input fields - red border and error icon */
.contact-input.has-error,
.contact-textarea.has-error {
border-color: #ff4d4f !important;
/* Red error border */
}
/* .contact-field position:relative is canonical at line ~1487 */
/* Error icon - appears on the right side of the input */
.contact-error-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* Position adjustment for inputs with labels above */
.contact-field .contact-error-icon {
top: calc(50% + 12px);
/* Account for label height + 2px lower */
}
/* For textarea, position at top-right since it's taller */
.contact-field:has(.contact-textarea) .contact-error-icon {
top: 42px;
/* Below label, near top of textarea */
transform: none;
}
/* Show error icon when field has error */
.contact-field.has-error .contact-error-icon {
opacity: 1;
visibility: visible;
}
/* Error icon SVG styling */
.contact-error-icon svg {
width: 100%;
height: 100%;
color: #ff4d4f;
}
/* Light mode: darker red for better contrast */
html:not([data-theme="dark"]) .contact-error-icon svg {
color: #cc3333;
}
html:not([data-theme="dark"]) .contact-input.has-error,
html:not([data-theme="dark"]) .contact-textarea.has-error {
border-color: #cc3333 !important;
}
/* Light mode: white background for labels */
html:not([data-theme="dark"]) .contact-label {
background-color: #ffffff;
color: #1a1a1a;
}
/* Light mode: white background for input fields */
html:not([data-theme="dark"]) .contact-input,
html:not([data-theme="dark"]) .contact-textarea {
background-color: #ffffff;
}
/* Textarea - fills remaining grid space */
.contact-textarea {
width: 100%;
/* Fill container width */
box-sizing: border-box;
/* Include padding/border in width */
background-color: var(--background);
/* Match section background */
border: 1px solid var(--icon-border);
/* Match toggle and close button border */
border-radius: 0 4px 4px 4px;
/* Top-left connects to label */
padding: 8px;
/* Figma: 8px padding */
font-family: 'Neue Haas Unica W1G', sans-serif;
font-size: 16px;
/* Figma: 16px */
font-weight: 400;
/* Figma: Regular */
line-height: 18px;
/* Reduced line height to save space */
color: var(--primary-text);
/* White text */
outline: none;
width: 100%;
box-sizing: border-box;
height: 100%;
/* Fill parent grid cell */
min-height: calc(var(--input-h) * 1.0);
/* Reduced to 1.0× input height to give more room for submit button */
resize: none;
/* Disable manual resize */
transition: border-color 0.15s ease,
color 0.5s ease,
background-color 0.5s ease,
height 0.18s cubic-bezier(0.1, 0, 0.3, 1),
min-height 0.18s cubic-bezier(0.1, 0, 0.3, 1);
/* Smooth color transitions + height animation */
}
/* Textarea styles for contact page */
.contact-input {
height: 50px;
/* Figma: 50px height */
}
/* Standard fields - auto height based on label + input */
.contact-field:not(:has(.contact-textarea)):not(:has(.contact-location-select)) {
height: auto;
/* Auto height: label + input */
}
.contact-input::placeholder,
.contact-textarea::placeholder {
color: var(--secondary-text, #6e6e6e);
/* Figma: #6e6e6e placeholder */
opacity: 0.5;
/* Lighter hint text - less contrast with label */
}
.contact-input:hover,
.contact-textarea:hover {
border-color: var(--secondary-text);
/* Design system hover state */
}
.contact-input:focus,
.contact-textarea:focus {
border-color: #7EBB1C;
}
/* Error state styling */
.contact-input:invalid:not(:focus):not(:placeholder-shown),
.contact-textarea:invalid:not(:focus):not(:placeholder-shown) {
border-color: var(--secondary-text);
/* Design system invalid state */
}
/* Inline error messages - subtle grey */
.contact-error {
display: flex;
align-items: center;
/* Middle align icon and text */
justify-content: flex-start;
/* Force left alignment - override parent flex-end */
gap: 6px;
margin-top: 0;
margin-left: 0;
/* Ensure no left margin */
margin-right: auto;
/* Push to left */
font-family: 'Neue Haas Unica W1G', sans-serif;
/* Match input font */
font-size: 11px;
font-weight: 400;
line-height: 14px;
color: #FF8C42;
/* Complementary orange - visible and complements green */
max-height: 0;
opacity: 0;
overflow: hidden;
width: 100%;
/* Full width to allow left alignment */
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-error.show {
max-height: 50px;
/* Enough space for error text */
opacity: 1;
margin-top: 4px;
}
/* Submit error - closer to button and left-aligned */
#contactSubmitError {
margin-top: 0;
/* Start with no margin */
justify-content: flex-start;
/* Left-align like other errors */
}
#contactSubmitError.show {
margin-top: 2px;
/* Reduced spacing to bring closer to button */
}
/* Simple line and dot icon in outlined circle */
.contact-error::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
min-width: 14px;
border-radius: 50%;
border: 1px solid #FF8C42;
/* Complementary orange - outlined circle */
background: transparent;
/* No fill */
flex-shrink: 0;
margin-top: 0;
position: relative;
/* SVG icon: vertical line at top, orange dot at bottom - complementary orange color */
background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='7' y1='4' x2='7' y2='8' stroke='%23FF8C42' stroke-width='0.8'/%3E%3Ccircle cx='7' cy='10' r='1' fill='%23FF8C42'/%3E%3C/svg%3E");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
.contact-textarea {
/* Textarea fills grid space - height controlled by grid row */
height: 100%;
/* Fill parent grid cell */
min-height: calc(var(--input-h) * 1.0);
/* Reduced to 1.0× input height to give more room for submit button */
resize: none;
/* Disable manual resize */
}
.contact-textarea::placeholder {
color: var(--secondary-text);
/* Design system secondary text color */
opacity: 0.5;
/* Lighter hint text - less contrast with label */
}
.contact-textarea::-webkit-scrollbar {
width: 4px;
/* Thin scrollbar */
}
.contact-textarea::-webkit-scrollbar-track {
background: transparent;
/* Transparent track */
}
.contact-textarea::-webkit-scrollbar-thumb {
background: #3a3a3a;
/* QA playground scrollbar color */
border-radius: 2px;
}
.contact-textarea::-webkit-scrollbar-thumb:hover {
background: #4a4a4a;
/* QA playground hover color */
}
/* Location field - auto height */
.contact-field:has(.contact-location-select) {
height: auto;
/* Auto height: label + select */
}
/* Location Segmented Control - Flexible responsive layout */
.contact-location-select {
position: relative;
width: 100%;
height: 50px;
/* Figma: h-[50px] - will be scaled responsively */
box-sizing: border-box;
display: flex;
/* Use flexbox for flexible resizing */
flex-direction: row;
gap: 0;
/* No gap between buttons */
border: 1px solid var(--icon-border);
/* Grey border matching input fields */
border-radius: 0 0 0 4px;
/* Rounded corners on outer container */
overflow: visible;
/* Allow dividers to be visible */
transition: height 0.25s cubic-bezier(0.1, 0, 0.3, 1),
border-width 0.25s cubic-bezier(0.1, 0, 0.3, 1);
/* Height and border animation */
}
/* Location select for contact page */
/* Location options - Flexible flexbox layout */
.contact-location-option {
position: relative;
/* Changed from absolute to relative for flexbox */
flex: 1 1 33.33%;
/* Equal width, maintain minimum 33.33% each */
min-width: 0;
/* Allow shrinking but maintain proportions */
padding: 4px;
/* Figma: p-[4px] */
border: none;
/* No individual borders - outer container has border */
background-color: var(--background);
/* Black fill matching input fields */
font-family: 'Neue Haas Unica W1G', sans-serif;
font-size: 16px;
/* Figma: text-[20px] - scaled to match current field size */
font-weight: 400;
/* Figma: Regular */
line-height: 20px;
/* Figma: leading-[20px] */
color: #d1d1d1;
/* Figma: text-white - dark mode */
cursor: pointer;
transition: all 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
white-space: nowrap;
/* Prevent text wrapping */
overflow: visible;
/* Allow dividers to be visible - don't clip */
text-overflow: ellipsis;
/* Show ellipsis if text is too long */
}
/* Divider lines between options - always visible */
.contact-location-option--canada::after,
.contact-location-option--usa::after {
content: '';
position: absolute;
right: -0.5px;
/* Center the divider on the edge (half of 1px width) */
top: 0;
bottom: 0;
width: 1px;
background: var(--icon-border);
/* Grey divider line matching input border */
z-index: 10;
/* High z-index to ensure visibility above backgrounds */
pointer-events: none;
/* Don't interfere with clicks */
display: block !important;
/* Ensure divider is always displayed */
opacity: 1 !important;
/* Ensure full opacity */
}
/* Ensure dividers stay visible in active states */
.contact-location-option--canada.active::after,
.contact-location-option--usa.active::after,
.contact-location-option--canada:hover::after,
.contact-location-option--usa:hover::after {
background: var(--icon-border) !important;
/* Grey divider matching input border */
z-index: 10 !important;
/* Keep high z-index */
display: block !important;
/* Ensure divider is always displayed */
opacity: 1 !important;
/* Ensure full opacity */
right: -0.5px !important;
/* Maintain positioning */
}
/* Canada (left option) - Flexbox layout */
.contact-location-option--canada {
border-radius: 0;
/* No individual rounded corners */
}
/* United States (middle option) - Flexbox layout */
.contact-location-option--usa {
border-radius: 0;
/* No rounded corners */
}
/* Global (right option) - Flexbox layout */
.contact-location-option--global {
border-radius: 0;
/* No individual rounded corners */
}
/* Hover state - thin transparent overlay */
.contact-location-option:hover:not(.active) {
background-color: rgba(255, 255, 255, 0.025) !important;
/* Thin transparent hover */
}
/* Selected/active state - green transparent fill matching send CTA */
.contact-location-option.active {
background-color: rgba(126, 187, 28, 0.15) !important;
/* Green transparent fill - matches send CTA */
}
/* Light mode: white background for location options */
html:not([data-theme="dark"]) .contact-location-option {
background-color: #ffffff;
}
html:not([data-theme="dark"]) .contact-location-option:hover:not(.active) {
background-color: #f5f5f5 !important;
}
/* Light mode: solid faint green for active state (rgba(126,187,28,0.15) over white = #e5f2d1) */
html:not([data-theme="dark"]) .contact-location-option.active {
background-color: #e5f2d1 !important;
}
/* Location text variants - desktop vs mobile */
.contact-location-text-mobile {
display: none;
}
.contact-location-text-desktop {
display: inline;
}
/* Send Button - Green/Purple Gradient CTA - maintain scale for salience */
/* CRITICAL: Button has inset: -1.5px for border, needs 2px+ margin on all sides to prevent cut-off */
/* Send CTA button - matches contact CTA styling */
.contact-submit-btn {
position: relative;
width: 100%;
/* Full width */
height: clamp(48px, 6vh, 60px);
/* Clean height */
border-radius: 4px;
padding: 0 clamp(12px, 1.5vh, 16px);
margin: 0;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: clamp(16px, 2vh, 20px);
font-weight: 400;
line-height: clamp(36px, 4.5vh, 48px);
color: #fff;
/* White text */
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.2s ease, border-color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
-webkit-tap-highlight-color: transparent;
/* Match contact CTA styling */
background-color: rgba(126, 187, 28, 0.15);
/* Green transparent fill */
border: 1px solid #7EBB1C;
/* Solid green border */
}
.contact-submit-btn>span {
position: relative;
font-weight: 500;
letter-spacing: 0.02em;
color: #fff;
transition: opacity 300ms ease;
padding-top: 1px;
/* Visual balance - shift text 1px down */
}
/* Success checkmark icon - hidden by default, shares circle with spinner */
.contact-submit-btn .submit-success-icon {
position: absolute;
width: 32px;
height: 32px;
color: #ffffff;
z-index: 3;
}
/* Circle border is always visible in both icons */
.contact-submit-btn .submit-success-icon circle {
opacity: 0;
transition: opacity 300ms ease;
}
/* Checkmark path hidden by default */
.contact-submit-btn .submit-success-icon path {
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
}
/* Loading spinner - hidden by default */
.contact-submit-btn .submit-spinner {
position: absolute;
width: 32px;
height: 32px;
color: #ffffff;
z-index: 3;
opacity: 0;
transition: opacity 200ms ease;
}
/* Static track circle (always visible when spinner shows) */
.contact-submit-btn .submit-spinner circle {
transition: opacity 300ms ease;
}
/* Spinning arc */
.contact-submit-btn .submit-spinner path {
transform-origin: center;
transition: opacity 200ms ease;
}
/* Spinner rotation animation - only for the arc path */
@keyframes submitSpinnerRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Loading state */
.contact-submit-btn.is-loading {
pointer-events: none;
background-color: rgba(126, 187, 28, 0.12);
}
.contact-submit-btn.is-loading>span {
opacity: 0 !important;
visibility: hidden;
}
.contact-submit-btn.is-loading .submit-spinner {
opacity: 1;
}
.contact-submit-btn.is-loading .submit-spinner path {
animation: submitSpinnerRotate 0.8s linear infinite;
}
/* Hover: slightly more opaque green fill */
.contact-submit-btn:hover {
background-color: rgba(126, 187, 28, 0.25);
}
/* Active: press effect */
.contact-submit-btn:active {
background-color: rgba(126, 187, 28, 0.12);
transform: scale(0.98);
}
/* Submitted state */
.contact-submit-btn.is-submitted {
background-color: rgba(126, 187, 28, 0.08);
pointer-events: none;
}
.contact-submit-btn.is-submitted>span {
opacity: 0 !important;
visibility: hidden;
}
/* Hide spinner arc when submitted, keep track for transition */
.contact-submit-btn.is-submitted .submit-spinner {
opacity: 0;
}
.contact-submit-btn.is-submitted .submit-spinner path {
animation: none;
opacity: 0;
}
/* Show checkmark circle and path on success */
.contact-submit-btn.is-submitted .submit-success-icon circle {
opacity: 1;
}
.contact-submit-btn.is-submitted .submit-success-icon path {
stroke-dashoffset: 0;
}
/* Light mode: use base black for contact form elements */
html:not([data-theme="dark"]) .contact-location-option {
color: #1a1a1a;
}
html:not([data-theme="dark"]) .contact-submit-btn .submit-spinner {
color: #1a1a1a;
}
/* Light mode: solid green background for Send CTA */
html:not([data-theme="dark"]) .contact-submit-btn {
background-color: #e5f2d1;
color: #1a1a1a;
}
html:not([data-theme="dark"]) .contact-submit-btn:hover {
background-color: #d4e8b8;
}
html:not([data-theme="dark"]) .contact-submit-btn:active {
background-color: #c9e1a5;
}
html:not([data-theme="dark"]) .contact-submit-btn.is-loading {
background-color: #e8f4d9;
}
html:not([data-theme="dark"]) .contact-submit-btn.is-submitted {
background-color: #ecf6df;
}
html:not([data-theme="dark"]) .contact-submit-btn .submit-success-icon {
color: #1a1a1a;
}
@media (max-width: 1024px) {
:root {
/* Adjust hero positioning for tablet */
--hero-top: 160px;
--caption-top: 340px;
--cards-top: 390px;
/* Card height and gap already fluid via clamp() */
}
.search-container {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.search-default {
width: 100%;
}
.search-container.expanded .search-field-wrapper {
width: 100%;
}
.search-icon-btn {
min-width: 0 !important;
/* No min-width constraint when collapsed */
/* Tablet collapse transition - longer duration for wider page (0.4s) */
transition: width 0.4s cubic-bezier(0.2, 0, 0, 1),
min-width 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.search-container.expanded .search-icon-btn {
width: 100% !important;
/* Full width on tablet */
min-width: 0 !important;
/* No min-width during transition - prevents jump */
/* Tablet expand (0.5s) - longer for wider page */
transition: width 0.5s cubic-bezier(0.2, 0, 0, 1),
min-width 0.5s cubic-bezier(0.2, 0, 0, 1);
}
/* Override badge width on tablet - use full width */
.search-container.expanded .search-icon-btn.has-badge {
width: 100% !important;
/* Full width even with badge on tablet */
}
.search-container.expanded .search-input {
width: 100%;
flex: 1;
/* Ensure input transitions smoothly */
transition: width 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
margin-left 0.35s cubic-bezier(0.2, 0, 0, 1) 0.02s,
opacity 0.2s ease-in 0.35s !important;
}
.filter-pills-row {
width: 100%;
}
.filter-pills-wrapper {
width: 100%;
max-width: 100%;
overflow-x: scroll !important;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.filter-pills {
display: flex !important;
flex-wrap: nowrap !important;
width: max-content !important;
padding-right: 20px;
}
.filter-pill {
flex-shrink: 0 !important;
}
.search-container.expanded .filter-pills-row {
transform: translateY(0);
}
.content-cards.search-active {
transform: translateY(50px);
}
.card {
width: 100%;
max-width: none;
}
.card-details {
top: clamp(16px, 2vw, 24px);
left: clamp(16px, 2vw, 24px);
right: auto;
bottom: auto;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.card-info {
width: auto;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.card-title {
align-items: flex-start;
}
.card-title-line {
text-align: left;
}
.card-year {
height: 32px;
font-size: 12px;
}
/* Hide pills entirely on tablet */
.card-tags {
display: none !important;
}
}
/* Tablet (max-width: 1024px): Full width, flush with edges - same as mobile */
@media (max-width: 1024px) {
:root {
--contact-card-inset: 0px;
/* Full screen, no inset */
}
/* Tablet: Make title two lines - increased font size with tighter leading */
.contact-form-title {
font-size: clamp(23px, 3.8vw, 32px) !important;
/* 30-40% larger font size on tablet */
white-space: normal !important;
/* Allow wrapping to two lines */
overflow: visible !important;
/* Prevent letter cutoff */
text-overflow: clip !important;
/* Don't use ellipsis - show full text */
letter-spacing: -0.03em !important;
/* Slightly tighter letter spacing */
padding-right: 12px !important;
/* Reduce padding to give more space */
line-height: 1.2 !important;
/* Very tight line height to bring two rows closer */
/* Ensure title doesn't get cut off - allow it to use available space */
flex: 1 1 auto !important;
min-width: 0 !important;
/* Allow flex item to shrink */
}
/* Show the
tag on tablet to allow two-line title */
.contact-form-title br {
display: block !important;
}
/* Grid layout - message field fills remaining space */
.contact-form {
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
gap: clamp(24px, 3vh, 32px);
/* Responsive gap */
margin-top: 0;
/* Contact page handles spacing via .contact-page-section */
overflow: visible;
/* NO scrollbars on form */
min-height: 0;
/* Allow grid to shrink */
}
/* Use CSS variables for heights */
.contact-input {
height: var(--input-h);
}
.contact-location-select {
height: var(--input-h);
border: 1px solid var(--icon-border) !important;
/* Grey border matching input fields */
overflow: visible;
/* Allow dividers to be visible */
}
.contact-textarea {
height: 100%;
/* Fill parent grid cell */
min-height: calc(var(--input-h) * 1.0);
/* Reduced to 1.0× input height to give more room for submit button */
resize: none;
/* Disable manual resize */
}
.contact-submit-btn {
height: var(--cta-h);
/* Slightly taller than input */
margin: 0;
/* Gap handled by parent form gap */
}
/* Field group gap - spacing between field groups */
.contact-form>.contact-field {
margin-bottom: 0;
/* Gap handled by parent */
}
/* Keep Company and Email in row (side by side) */
.contact-field-row {
flex-direction: row;
/* Keep side by side */
gap: 20px;
/* Gap between fields */
}
}
@media (min-width: 1280px) {
:root {
--contact-card-inset: 40px;
/* Keep original desktop spacing */
}
/* Desktop: Grid layout - message field fills remaining space */
.contact-form {
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
gap: 24px;
/* Consistent gap */
margin-top: 0;
/* Contact page handles spacing via .contact-page-section */
padding: 0 !important;
/* No extra padding needed */
overflow: visible;
/* NO scrollbars on form */
min-height: 0;
/* Allow grid to shrink */
}
.contact-input {
height: var(--input-h);
}
.contact-location-select {
height: var(--input-h);
border: 1px solid var(--icon-border) !important;
/* Grey border matching input fields */
overflow: visible;
/* Allow dividers to be visible */
}
.contact-textarea {
height: 100%;
/* Fill parent grid cell */
min-height: calc(var(--input-h) * 1.0);
/* Reduced to 1.0× input height to give more room for submit button */
resize: none;
/* Disable manual resize */
}
.contact-submit-btn {
height: var(--cta-h);
/* Slightly taller than input */
margin: 0;
/* Gap handled by parent form gap */
}
}
@media (max-width: 767px) {
:root {
/* Adjust hero positioning for small tablet/mobile */
--hero-top: 100px;
--caption-top: 300px;
--cards-top: 340px;
}
/* Contact form mobile styles - keep connected to header */
:root {
--contact-card-inset: 0px;
/* Mobile: full screen, no inset */
}
/* Mobile: Grid layout - message field fills remaining space */
.contact-form {
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
gap: clamp(24px, 3vh, 32px);
/* Responsive gap - scaled larger */
margin-top: 0;
/* Contact page handles spacing via .contact-page-section */
padding: 0 !important;
/* No extra padding needed */
overflow: visible;
/* NO scrollbars on form */
min-height: 0;
/* Allow grid to shrink */
}
/* Mobile: Use CSS variables for heights */
.contact-input {
height: var(--input-h);
}
.contact-location-select {
height: var(--input-h);
border: 1px solid var(--icon-border) !important;
/* Grey border matching input fields */
overflow: visible;
/* Allow dividers to be visible */
}
.contact-textarea {
height: 100%;
/* Fill parent grid cell */
min-height: calc(var(--input-h) * 1.0);
/* Reduced to 1.0× input height to give more room for submit button */
resize: none;
/* Disable manual resize */
}
.contact-submit-btn {
height: var(--cta-h);
/* Slightly taller than input */
margin: 0;
/* Gap handled by parent form gap */
}
/* Mobile field group gap - spacing between field groups */
.contact-form>.contact-field {
margin-bottom: 0;
/* Gap handled by parent */
}
/* Mobile: Keep Company and Email in row (side by side) */
.contact-field-row {
flex-direction: row;
/* Keep side by side on mobile */
gap: 20px;
/* Smaller gap on mobile */
}
/* Mobile: Make title two lines - even bigger font size with tighter leading */
.contact-form-title {
font-size: clamp(20px, 5vw, 28px);
/* Smaller font to fit on one line */
white-space: nowrap;
/* Keep on one line */
overflow: visible !important;
/* CRITICAL: Prevent letter cutoff */
text-overflow: clip;
/* Don't use ellipsis - show full text */
letter-spacing: -0.03em;
/* Slightly tighter letter spacing */
padding-right: 12px;
/* Reduce padding to give more space */
line-height: 1.1;
/* Tighter leading for mobile */
/* Ensure title doesn't get cut off - allow it to use available space */
flex: 1 1 auto;
min-width: 0;
/* Allow flex item to shrink */
/* visibility/opacity handled by .contact-page-section scoped rules */
}
/* Show the
tag on mobile to allow two-line title (contact page only) */
.contact-form-title br {
display: block;
}
/* Mobile: Title word wrapper */
.contact-form-title .title-word-wrapper {
position: relative;
display: inline-block;
vertical-align: baseline;
margin: 0;
padding: 0;
line-height: 1.2;
}
.contact-form-title .title-word {
position: relative;
display: inline-block !important;
/* opacity/visibility handled by .contact-page-section scoped rules */
z-index: 1;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: baseline;
font-family: 'Neue Haas Unica W1G', sans-serif;
font-size: inherit;
font-weight: 300;
line-height: 1.35;
letter-spacing: -0.026em;
transform: none !important;
/* Override any base state transforms */
}
/* Mobile: Title animation handled by contact page section */
/* Mobile: Textarea fills grid space */
.contact-textarea {
height: 100%;
/* Fill parent grid cell */
min-height: calc(var(--input-h) * 1.2);
/* Reduced to 1.2× input height to give more room for submit button */
resize: none;
/* Disable manual resize */
}
/* Mobile location selector - match input field height */
.contact-location-select {
height: 50px;
/* Match mobile input field height */
border: 1px solid var(--icon-border) !important;
/* Grey border matching input fields */
overflow: visible;
/* Allow dividers to be visible */
}
.contact-location-option {
font-size: clamp(12px, 1.5vh, 16px);
/* Mobile: scaled from Figma */
line-height: clamp(16px, 2vh, 20px);
/* Mobile: scaled from Figma */
padding: clamp(2px, 0.3vh, 4px);
/* Mobile: scaled from Figma */
}
/* Show mobile text, hide desktop text for location buttons */
.contact-location-text-desktop {
display: none;
}
.contact-location-text-mobile {
display: inline;
}
}
/* =========================
CONTACT PAGE STYLES
========================= */
/* Contact Page Styles */
.contact-page-surface {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--background);
z-index: -1;
pointer-events: none;
}
/* Reset page-container padding for contact page so form aligns with nav */
.page-container:has(.contact-page-section) {
padding-left: 0;
padding-right: 0;
}
.contact-page-section {
width: 100%;
/* Min height fills viewport, but allows content to extend if needed */
min-height: 100vh;
min-height: 100dvh;
height: auto;
overflow-y: auto;
overflow-x: hidden;
display: flex !important;
flex-direction: row;
align-items: flex-start;
/* Prevent children from stretching to fill height */
/* UNIFIED SPACING: consistent across all viewports using viewport units */
/* Top padding clears nav header + provides breathing room */
padding-top: clamp(72px, 10vh, 100px);
padding-bottom: clamp(40px, 6vh, 70px);
padding-left: var(--nav-left);
padding-right: var(--nav-right);
position: relative;
box-sizing: border-box;
z-index: 1;
}
.contact-page-form-wrapper {
width: 50%;
max-width: 600px;
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 0;
position: relative;
z-index: 2;
overflow: visible;
/* Auto height allows content to flow - wrapper only as tall as content */
height: auto;
/* Center horizontally on desktop and tablet */
margin: 0 auto;
}
/* Glass material background - desktop and tablet only */
@media (min-width: 768px) {
.contact-page-form-wrapper {
background: rgba(255, 252, 248, 0.12);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 40px 40px 40px 40px;
box-sizing: border-box;
}
/* Dark mode glass */
[data-theme="dark"] .contact-page-form-wrapper {
background: rgba(20, 20, 20, 0.1);
border-color: rgba(255, 255, 255, 0.08);
}
}
/* Animation canvas - full-width background layer (desktop only) */
.contact-animation-canvas {
position: fixed;
top: 0;
right: 0;
/* Position from right side */
bottom: 0;
/* Let width be determined by height and aspect ratio */
width: auto;
height: 100vh;
/* Wider aspect ratio (1.65:1) for proportional scaling */
aspect-ratio: 1.65 / 1;
z-index: 1;
/* Above footer (z-index: 0), behind form content */
pointer-events: none;
/* Allow clicks to pass through to content */
overflow: hidden;
/* Shift left as needed to prevent overflow */
left: auto;
}
/* SVG maintains aspect ratio - animation content scales proportionally */
.contact-animation-canvas svg {
width: 100%;
height: 100%;
display: block;
touch-action: none;
cursor: grab;
pointer-events: auto;
/* Re-enable pointer events for SVG */
/* Preserve aspect ratio and cover the container */
object-fit: contain;
}
.contact-animation-canvas svg:active {
cursor: grabbing;
}
/* Hide animation canvas on tablet only (mobile gets a small version) */
@media (max-width: 1024px) and (min-width: 768px) {
.contact-animation-canvas {
display: none !important;
}
}
/* Mobile: Small animation in top-right corner near title */
@media (max-width: 767px) {
.contact-animation-canvas {
display: block !important;
position: absolute;
top: -10px;
/* Extends into header area */
right: calc(var(--nav-right) + 50px);
/* Shifted more to the left */
left: auto;
bottom: auto;
width: 180px;
height: 180px;
z-index: 10;
/* In front of content for hover */
pointer-events: none;
/* Container doesn't block clicks */
opacity: 0.85;
/* More prominent */
overflow: visible;
/* Prevent clipping */
}
.contact-animation-canvas svg {
width: 100%;
height: 100%;
pointer-events: auto;
/* SVG captures hover events */
overflow: visible;
/* Prevent SVG clipping */
cursor: pointer;
/* Show interactive cursor */
}
/* Ensure paths and polygons are hoverable */
.contact-animation-canvas svg path,
.contact-animation-canvas svg polygon {
pointer-events: auto;
}
}
/* Contact page form - content height only, no expansion */
.contact-page-section .contact-form {
display: flex;
flex-direction: column;
flex: 0 0 auto;
gap: clamp(8px, 1.5vh, 12px);
/* Responsive gap - shrinks on smaller viewports */
min-height: 0;
overflow: visible;
/* Prevent clipping */
}
/* Message field container - content height only */
.contact-page-section .contact-form>.contact-field:nth-child(4) {
flex: 0 0 auto;
/* Don't expand */
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
/* Contain the textarea */
}
/* Message textarea - fixed 200px height for all viewports */
.contact-page-section .contact-textarea {
flex: 0 0 200px;
/* Fixed 200px height, no grow/shrink */
min-height: 200px;
height: 200px;
resize: none;
}
/* Send button - NEVER shrinks, always visible */
.contact-page-section .contact-submit-btn {
flex-shrink: 0;
}
/* ==================== CONTACT PAGE ANIMATION SYSTEM ==================== */
/* Staggered fade-in animations for contact page elements */
/* ANTI-FLICKER: Elements start invisible, animations paused until .animate class is added */
/* Animation timing variables */
.contact-page-section {
--cp-duration: 600ms;
--cp-easing: cubic-bezier(0.22, 1, 0.36, 1);
--cp-stagger: 120ms;
--cp-translate: 20px;
/* Downward translation distance */
}
/* Keyframe for fade-in and slide down */
@keyframes contactPageFadeIn {
0% {
opacity: 0;
transform: translateY(calc(var(--cp-translate) * -1));
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Contact page title - base styling */
.contact-page-section .contact-form-title {
/* Contact page title styling */
flex: none;
display: block;
width: 100%;
/* Smaller font to fit on one line */
font-size: clamp(24px, 4vw, 32px) !important;
font-family: 'Neue Haas Unica W1G', sans-serif;
font-weight: 300;
line-height: 1.2;
letter-spacing: -0.03em;
color: var(--primary-text);
margin: 0;
padding: 0;
text-align: left;
/* Keep title on one line for desktop/tablet */
white-space: nowrap;
}
/* ANTI-FLICKER: All animated elements start fully hidden until .animate class triggers */
.contact-page-section .contact-form-title .title-word-wrapper,
.contact-page-section .contact-form>.contact-field,
.contact-page-section .contact-form>.contact-field-row,
.contact-page-section .contact-submit-btn {
opacity: 0;
transform: translateY(calc(var(--cp-translate) * -1));
will-change: opacity, transform;
}
/* Title row animation - first row (Let's build something) */
.contact-page-section.animate .contact-form-title .title-word-wrapper:nth-child(-n+3) {
animation: contactPageFadeIn var(--cp-duration) var(--cp-easing) both;
animation-delay: 100ms;
/* Small initial delay to ensure page is ready */
}
/* Title row animation - second row (meaningful together) */
.contact-page-section.animate .contact-form-title .title-word-wrapper:nth-child(n+4) {
animation: contactPageFadeIn var(--cp-duration) var(--cp-easing) both;
animation-delay: calc(100ms + var(--cp-stagger) * 2);
}
/* Title word styling */
.contact-page-section .contact-form-title .title-word {
opacity: 1;
visibility: visible;
}
.contact-page-section .contact-form-header {
display: block;
/* Not flex - no close button on contact page */
width: 100%;
margin-top: 0;
/* UNIFIED SPACING: margin-bottom separates title from form */
margin-bottom: clamp(24px, 4vh, 48px);
flex-shrink: 0;
/* Don't shrink header */
}
/* Contact page form - content height only, no expansion */
.contact-page-section .contact-form {
width: 100%;
margin-top: 0;
/* Header handles spacing */
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 0;
/* UNIFIED GAP: consistent spacing between form fields - larger on desktop */
gap: clamp(12px, 2vh, 24px);
}
/* Name field - index 0 (after title rows) */
.contact-page-section.animate .contact-form>.contact-field:nth-child(1) {
animation: contactPageFadeIn var(--cp-duration) var(--cp-easing) both;
animation-delay: calc(100ms + var(--cp-stagger) * 4);
}
/* Company/Email row - index 1 */
.contact-page-section.animate .contact-form>.contact-field-row {
animation: contactPageFadeIn var(--cp-duration) var(--cp-easing) both;
animation-delay: calc(100ms + var(--cp-stagger) * 5);
}
/* Location field - index 2 */
.contact-page-section.animate .contact-form>.contact-field:nth-child(3) {
animation: contactPageFadeIn var(--cp-duration) var(--cp-easing) both;
animation-delay: calc(100ms + var(--cp-stagger) * 6);
}
/* Message field - index 3 */
.contact-page-section.animate .contact-form>.contact-field:nth-child(4) {
animation: contactPageFadeIn var(--cp-duration) var(--cp-easing) both;
animation-delay: calc(100ms + var(--cp-stagger) * 7);
}
/* Submit button - index 4 (last) */
.contact-page-section.animate .contact-submit-btn {
animation: contactPageFadeIn var(--cp-duration) var(--cp-easing) both;
animation-delay: calc(100ms + var(--cp-stagger) * 8);
}
/* Tablet/Mobile: Stack layout and full width form */
@media (max-width: 1024px) {
/* Reset page-container padding for contact page */
.page-container:has(.contact-page-section) {
padding-left: 0;
padding-right: 0;
}
/* Stack layout on smaller screens */
.contact-page-section {
flex-direction: column;
}
/* Full width form wrapper */
.contact-page-form-wrapper {
width: 100%;
max-width: 600px;
}
/* Form fills remaining space */
.contact-page-section .contact-form {
flex: 1 1 0;
min-height: 0;
}
/* Message field fills remaining space */
.contact-page-section .contact-field:has(.contact-textarea) {
flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
}
.contact-page-section .contact-textarea {
flex: 1 1 0;
min-height: 160px;
}
/* Remove margin-top from header on desktop */
.contact-page-section .contact-form-header {
margin-top: 0;
}
}
/* Mobile: Full width - match hero/cards padding */
@media (max-width: 767px) {
/* ALLOW natural scrolling on mobile contact page */
html:has(.contact-page-section),
html:has(.contact-page-section) body {
overflow-y: auto;
overflow-x: hidden;
position: relative;
width: 100%;
height: auto;
min-height: 100%;
}
.contact-page-section {
display: flex !important;
flex-direction: column;
/* Min height fills viewport, but can grow with content */
min-height: 100vh;
min-height: 100dvh;
height: auto;
/* Viewport-relative padding for header - MUST clear the fixed header (~70px) */
padding-top: clamp(80px, 12vh, 100px);
padding-bottom: 80px;
/* Room for footer */
/* Match nav button visual inset (~22px from edge) */
margin-left: 10px;
margin-right: 10px;
padding-left: 12px;
padding-right: 12px;
/* Adjust width to account for margins */
width: calc(100% - 20px);
box-sizing: border-box;
overflow: visible;
}
/* Reduce gap between title and form fields on mobile */
.contact-page-section .contact-form {
margin-top: 8px;
flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
gap: clamp(8px, 2vh, 16px);
}
/* Prevent field containers from collapsing - enables scroll on short viewports */
.contact-page-section .contact-field,
.contact-page-section .contact-field-row {
flex-shrink: 0 !important;
}
/* Message field - maintains minimum height, enables scroll on short viewports */
.contact-page-section .contact-field:has(.contact-textarea) {
flex-grow: 1;
flex-shrink: 0 !important;
flex-basis: auto !important;
display: flex;
flex-direction: column;
min-height: 100px !important;
/* Critical for triggering scrollbar */
overflow: hidden;
}
.contact-page-section .contact-textarea {
flex: 1 1 auto;
min-height: 100px;
/* Ensure usable message area */
height: auto;
flex-shrink: 0;
/* Prevent crushing on short viewports */
}
/* Send button NEVER shrinks - always visible */
.contact-page-section .contact-submit-btn {
flex-shrink: 0;
margin-top: 4px;
}
/* Reduce input heights on mobile */
.contact-page-section .contact-input {
height: 36px;
padding: 6px 10px;
flex-shrink: 0;
/* Prevent input from collapsing on short viewports */
}
/* Reduce label sizes */
.contact-page-section .contact-label {
font-size: 11px;
margin-bottom: 0;
}
/* Hide location field on mobile to maximize space for message field */
.contact-page-section .contact-field:has(.contact-location-select) {
display: none !important;
}
.contact-page-form-wrapper {
width: 100%;
max-width: none;
grid-column: auto !important;
/* Reset grid column for flex layout */
flex: 1 1 auto;
display: flex;
flex-direction: column;
/* No internal scrolling - page scrolls now */
overflow: visible;
}
/* Webkit scrollbar styling for form wrapper - ultra minimal */
.contact-page-form-wrapper::-webkit-scrollbar {
width: 2px;
}
.contact-page-form-wrapper::-webkit-scrollbar-track {
background: transparent;
/* Hide track completely - no top/bottom indicators */
}
.contact-page-form-wrapper::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 1px;
}
.contact-page-form-wrapper::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Hide scrollbar button arrows at top/bottom */
.contact-page-form-wrapper::-webkit-scrollbar-button {
display: none;
}
/* Header never shrinks */
.contact-page-section .contact-form-header {
flex-shrink: 0;
margin-top: clamp(16px, 3vh, 32px);
}
/* Mobile: Make title smaller to fit content */
.contact-page-section .contact-form-title {
font-size: clamp(20px, 5vw, 28px);
white-space: normal;
overflow: visible;
letter-spacing: -0.02em;
line-height: 1.05;
margin-bottom: 0;
}
.contact-page-section .contact-form-title br {
display: block;
}
/* Mobile: Center nav title on contact page */
.main-header.header-contact .nav-page-title {
position: absolute !important;
left: 50% !important;
right: auto !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
text-align: center;
width: auto;
max-width: none;
}
/* Mobile: Allow hovering on animation behind the contact form header */
.contact-page-section .contact-form-header {
pointer-events: none;
/* Allow clicks to pass through to animation */
}
/* But keep the title text selectable */
.contact-page-section .contact-form-title {
pointer-events: auto;
}
}
/* Extra small screens: Stack Company/Email fields to prevent cutoff */
@media (max-width: 400px) {
/* Contact page: Stack fields vertically */
.contact-page-section .contact-field-row {
flex-direction: column !important;
gap: 16px !important;
}
.contact-page-section .contact-field-row .contact-field {
width: 100%;
flex: none;
}
/* Contact page: Stack fields vertically on very small screens */
/* Reduce form gap on very small screens */
.contact-page-section .contact-form {
gap: 16px;
}
/* Ensure inputs don't overflow */
.contact-input,
.contact-textarea {
max-width: 100%;
box-sizing: border-box;
}
/* Location buttons - wrap if needed */
.contact-location-select {
flex-wrap: wrap;
}
.contact-location-option {
flex: 1 1 auto;
min-width: 0;
}
}
/* ==================== MOBILE HEADER SWAP ==================== */
@media (max-width: 768px) {
/* ===== CLOCK ELEMENT ===== */
/* Opacity controlled by JavaScript for smooth crossfade */
.nav-left-item--clock {
animation: headerElementFadeIn 0.5s ease-out 0.05s forwards;
transition: opacity 0.15s ease-out;
will-change: opacity;
}
/* Contact CTA should also fade with same timing when header-hidden */
.main-header .nav-contact-btn {
transition: opacity 0.25s ease-out;
}
/* ===== NAME ELEMENT ===== */
/* Lock position LEFT. Opacity controlled by JS for smooth crossfade */
.nav-page-title {
animation: none !important;
/* Fixed Left Positioning */
left: var(--nav-left) !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
/* Appearance */
text-align: left !important;
width: auto !important;
display: block !important;
white-space: nowrap !important;
z-index: 20 !important;
color: var(--primary-text) !important;
/* Default hidden - JS controls opacity for crossfade (no !important) */
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease-out;
}
/* ===== CONTACT PAGE: Name always visible and centered ===== */
.header-contact .nav-page-title {
opacity: 1 !important;
pointer-events: auto !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
animation: headerElementFadeIn 0.5s ease-out forwards !important;
}
}
/* ==================== SITE FOOTER (GLOBAL) ==================== */
/* Used on all pages */
.site-footer {
width: 100vw;
position: relative;
/* Center full-viewport-width footer regardless of parent constraints */
left: 50%;
transform: translateX(-50%);
margin-left: 0;
margin-right: 0;
padding: 34px var(--nav-right) 28px var(--nav-left);
background-color: var(--background);
transition: background-color 0.5s ease;
}
.footer-text {
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: var(--secondary-text);
margin: 0;
text-align: center;
}
.footer-heart {
position: relative;
cursor: default;
display: inline-block;
}
.footer-heart-float {
position: absolute;
font-size: 10px;
color: var(--secondary-text, #5a5a5a);
opacity: 0.5;
pointer-events: none;
z-index: 1000;
animation: heartFloatUp 1.4s ease-out forwards;
}
@keyframes heartFloatUp {
0% {
opacity: 0.6;
transform: translate(0, 0) scale(0.7);
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
transform: translate(var(--heart-x, 0px), var(--heart-y, -30px)) scale(1.1);
}
}
@media (max-width: 768px) {
.site-footer {
padding: 20px var(--nav-right) 20px var(--nav-left);
}
.footer-text {
text-align: center;
}
}
/* ==================== CONTACT PAGE FOOTER ==================== */
/* Footer positioned at bottom of contact page - behind the form */
/* CRITICAL: Form wrapper has z-index: 10, footer needs z-index: 1 */
.contact-page-form-wrapper {
position: relative;
z-index: 10;
}
.site-footer--contact {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
/* Reset the centering transform from base .site-footer */
transform: none;
margin: 0;
padding: 24px var(--nav-right) 28px var(--nav-left);
border-top: none;
z-index: 0;
/* Behind form wrapper (z-index: 10) */
}
.site-footer--contact .footer-text {
text-align: center;
}
@media (max-width: 768px) {
.site-footer--contact {
/* Mobile: footer flows with content, NOT fixed at bottom */
position: relative;
bottom: auto;
left: auto;
right: auto;
padding: 24px var(--nav-right) 28px var(--nav-left);
}
.site-footer--contact .footer-text {
text-align: center;
}
}
/* ==================== PROJECT CARD REVEAL ANIMATION ==================== */
/* Animation variables - matched to Card 1 (TD Carousel) timing */
:root {
--reveal-clip-dur: 1200ms;
--reveal-scale-dur: 1100ms;
--reveal-ease: cubic-bezier(0.25, 0.9, 0.3, 1);
--reveal-scale-delay: 100ms;
}
/* Reveal container - applied to .card-wrapper */
/* NOTE: Do NOT use transform here - JS uses transform for card stacking/positioning */
.cs-reveal {
border-radius: 8px;
overflow: hidden;
background: transparent !important;
/* Card container is visible - the reveal happens on the image inside via clip-path */
opacity: 1 !important;
animation: none !important;
}
/* .cs-reveal.in-view - no additional styles needed, container stays visible */
/* Image reveal (clip-path + scale + opacity) - Video is always visible */
.cs-reveal img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.35) !important;
/* Reveal from TOP (100% from bottom = hidden) for descending effect */
clip-path: inset(0 0 100% 0) !important;
/* No opacity fade - reveal is via clip-path only (matches Card 1) */
opacity: 1;
/* Prevent flickering on mobile - backface-visibility helps with 3D rendering */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Videos are always fully visible - no clip-path reveal */
.cs-reveal video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Videos visible by default - no hidden state */
clip-path: none !important;
transform: none !important;
}
/* Only use will-change on desktop - causes flickering on mobile */
@media (min-width: 769px) {
.cs-reveal img {
will-change: clip-path, transform;
}
}
.cs-reveal.in-view img {
clip-path: inset(0 0 0 0) !important;
transform: scale(1) !important;
/* No opacity transition - clip-path only (matches Card 1) */
transition-property: clip-path, transform;
transition-duration: var(--reveal-clip-dur), var(--reveal-scale-dur);
transition-timing-function: var(--reveal-ease), var(--reveal-ease);
transition-delay: 0ms, var(--reveal-scale-delay);
}
/* ==================== CARD WRAPPER ANIMATION ==================== */
/* Smooth height/transform transitions for scroll focus cards */
.card-wrapper {
transition:
height 350ms cubic-bezier(0.22, 1, 0.36, 1),
transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
/* will-change removed - causes flickering on mobile due to compositor layer promotion */
/* Stability fixes for mobile/iOS */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Only enable will-change on desktop where it benefits performance */
@media (min-width: 769px) {
.card-wrapper {
will-change: height, transform;
}
}
/* ==================== CARD BACKGROUND IMAGES ==================== */
/* Make cards transparent to show the background image */
.card {
background: transparent !important;
position: relative;
overflow: hidden;
}
/* Background image styling - with reveal animation */
.card-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
/* Initial state: clipped from top, slightly scaled, faded out */
transform: scale(1.15);
/* Reveal from TOP for descending effect */
clip-path: inset(0 0 100% 0);
/* Fade in with mask reveal */
opacity: 0;
/* Transition on base state so animation works when class is removed AND re-added */
/* NOTE: Opacity uses faster 800ms to sync with SVG overlay (which fades in 0.8s with 0.5s delay) */
transition-property: clip-path, transform, opacity;
transition-duration: var(--reveal-clip-dur), var(--reveal-scale-dur), 800ms;
transition-timing-function: var(--reveal-ease), var(--reveal-ease), cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: 0ms, var(--reveal-scale-delay), 500ms;
/* Prevent flickering on mobile */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Only use will-change on desktop - causes flickering on mobile */
@media (min-width: 769px) {
.card-bg-image {
will-change: clip-path, transform;
}
}
/* Revealed state - triggered when parent .card-wrapper has .in-view */
.card-wrapper.in-view .card-bg-image,
.cs-reveal.in-view .card-bg-image {
clip-path: inset(0 0 0 0);
transform: scale(1);
opacity: 1;
/* After reveal: Snappy 350ms for hover, opacity uses synced 800ms timing for reveal */
transition-property: clip-path, transform, opacity;
transition-duration: var(--reveal-clip-dur), 350ms, 800ms;
transition-timing-function: var(--reveal-ease), cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: 0ms, 0ms, 500ms;
}
/* Ensure card details are above the image */
.card-details {
position: relative;
z-index: 1;
}
/* ==================== GLASS NAVIGATION COMPONENT ====================
Centered glass-morphism navigation with expandable width
================================================================= */
/* ===== Glass Nav Variables ===== */
/* LIGHT MODE FIRST: Base values are for light mode */
:root {
/* Glass morphism - light mode uses white at low opacity for frosted effect */
--glass: rgba(255, 255, 255, 0.45);
--blur: 24px;
/* Nav borders - light mode */
--hair-shell-visible: transparent;
--hair-shell-hidden: transparent;
--hair: #c0c0c0;
/* Nav layout */
--nav-top-pad: 14px;
--nav-row-h: 46px;
--nav-w-collapsed: min(520px, calc(100% - 0px));
--nav-w-expanded: 100%;
--shell-margin-x: 0;
/* Radii */
--r-shell: 8px;
--r-btn: 8px;
/* Motion - slowed and more exaggerated for noticeable expand/contract */
--ease-width: cubic-bezier(0.16, 1, 0.3, 1);
/* Exaggerated ease-out with slight overshoot feel */
--ease-panel: cubic-bezier(0.16, 1, 0.3, 1);
--dur-width: 450ms;
/* Increased from 260ms for more noticeable movement */
--dur-panel: 320ms;
--dur-border: 120ms;
--dur-fade: 180ms;
}
/* ===== Dark Mode Glass Nav Overrides ===== */
html[data-theme="dark"] {
/* Glass morphism - dark at 32% opacity */
--glass: rgba(13, 13, 13, .32);
/* Dark mode borders */
--hair: rgba(255, 255, 255, .10);
}
/* ===== Fixed nav wrapper ===== */
.nav-wrap {
position: fixed;
inset: 0 0 auto 0;
z-index: 9999;
display: flex;
justify-content: center;
pointer-events: none;
padding-top: var(--nav-top-pad);
padding-left: var(--nav-left);
padding-right: var(--nav-right);
}
/* Backdrop blur overlay when About panel is open */
.nav-wrap::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
background: transparent;
pointer-events: none;
opacity: 0;
transition: backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, opacity 0.3s ease;
}
/* Activate blur when About panel is open */
.nav-wrap:has(.is-panel-open)::after {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 1;
}
.nav {
pointer-events: auto;
width: var(--nav-w-collapsed);
/* Default: collapse immediately when scrolling down */
transition: width var(--dur-width) var(--ease-width);
will-change: width;
}
.nav.is-expanded {
width: var(--nav-w-expanded);
/* When expanding: delay so border fades out first (100ms fadeout + buffer) */
transition: width var(--dur-width) var(--ease-width) 180ms;
}
/* HARD RULE: when locked-collapsed, NEVER expand width */
.nav.is-locked-collapsed {
width: var(--nav-w-collapsed) !important;
}
.nav.is-locked-collapsed.is-expanded {
width: var(--nav-w-collapsed) !important;
}
/* Navigation transition: immediate expand without delay (for page transitions) */
.nav.is-nav-transition.is-expanded {
transition: width var(--dur-width) var(--ease-width) 0ms;
}
/* ===== Glass background container ===== */
.nav-shell {
margin: 0;
border-radius: var(--r-shell);
border: 1px solid var(--hair-shell-hidden);
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: hidden;
box-shadow: none;
/* When NOT scrolled: fade out quickly so it completes before width expansion starts */
transition:
border-color 100ms ease-out,
box-shadow 100ms ease-out,
background 100ms ease-out,
backdrop-filter 100ms ease-out;
}
/* Border + subtle glass highlight appear ONLY after scrolling */
.nav.is-scrolled .nav-shell {
border-color: var(--hair-shell-visible);
background: var(--glass);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
transition:
border-color var(--dur-border) var(--ease-width) 200ms,
box-shadow var(--dur-border) var(--ease-width) 200ms,
background 150ms ease-out,
backdrop-filter 150ms ease-out;
}
/* When About panel is open, make shell match panel styling - same blur and opacity */
html:not([data-theme="dark"]) .nav.is-panel-open .nav-shell {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(40px) saturate(1.2);
-webkit-backdrop-filter: blur(40px) saturate(1.2);
}
/* ===== Grid rows ===== */
.nav-grid {
display: grid;
grid-template-rows: var(--nav-row-h) 0fr;
transition: grid-template-rows var(--dur-panel) var(--ease-panel);
}
.nav.is-panel-open .nav-grid {
grid-template-rows: var(--nav-row-h) 1fr;
}
/* ===== Left Slot Container for Crossfade ===== */
.nav-left-slot {
position: relative;
display: flex;
align-items: center;
height: 32px;
min-width: 50px;
/* Prevents layout shift */
}
/* Children overlap via absolute positioning - BOTH use same positioning */
.nav-left-slot #navBackCta,
.nav-left-slot .nav-clock {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.2s ease-out;
}
/* Hidden state - fade to transparent, disable interaction */
.nav-left-slot .is-hidden {
opacity: 0 !important;
pointer-events: none !important;
}
/* ===== Top row layout ===== */
.nav-toprow {
height: var(--nav-row-h);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 0;
gap: 10px;
transition: padding 0.3s ease-out;
}
/* Add padding when nav is scrolled/collapsed to squeeze content */
.nav.is-scrolled .nav-toprow {
padding: 0 10px;
}
/* ===== Clock ===== */
.nav-clock {
height: 32px;
padding: 0 10px;
margin-left: 0;
/* Align with back CTA */
border-radius: 8px;
border: 1px solid var(--hair);
background: rgba(0, 0, 0, 0.10);
display: flex;
align-items: center;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 13px;
/* Slightly smaller - numerals appear larger in this font */
font-weight: 300;
letter-spacing: -0.416px;
line-height: 32px;
white-space: nowrap;
color: var(--primary-text);
}
.nav-clock-text {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
display: inline-flex;
align-items: center;
gap: 6px;
padding-top: 1px;
/* Visual balance adjustment */
}
.nav-clock-time {
min-width: 8ch;
text-align: center;
}
.nav-clock-period {
opacity: 0.7;
}
/* ===== Name (hidden at top, shows on scroll) ===== */
.nav-name {
justify-self: center;
margin-left: 70px;
/* Shift right for visual balance */
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 14px;
font-weight: 300;
letter-spacing: -0.416px;
white-space: nowrap;
line-height: 1;
padding-top: 1px;
color: var(--primary-text);
opacity: 0;
transform: translateY(-2px) scale(0.92);
transition: opacity var(--dur-fade) var(--ease-panel), transform var(--dur-fade) var(--ease-panel);
pointer-events: none;
will-change: opacity, transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.nav.is-scrolled .nav-name {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ===== Actions group ===== */
.nav-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* Note: Removed opacity/visibility !important overrides to allow nav intro animation */
/* ===== Mobile Navigation ===== */
@media (max-width: 768px) {
/* Hide clock and nav-left-slot on mobile (no crossfade needed) */
.nav-clock,
.nav-left-slot {
display: none;
}
/* Simplify grid to just name and actions */
.nav-toprow {
grid-template-columns: 1fr auto;
padding: 0;
/* Keep padding transition for smooth contraction, disable grid transitions to prevent bounce */
transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Mobile: Add padding when scrolled or About panel open */
.nav.is-scrolled .nav-toprow,
.nav.is-panel-open .nav-toprow {
padding: 0 10px;
}
/* CONTACT PAGE: Allow standard padding behavior when scrolled/panel open */
.nav--contact-page .nav-toprow {
padding: 0;
}
/* Use linear transition on mobile to avoid elastic bounce but keep smooth movement */
.nav {
transition: width 0.3s ease-out;
}
/* Re-enable grid row transition on mobile for smooth panel collapse animation */
/* Uses linear easing to prevent elastic bouncing while keeping smooth animation */
.nav-grid {
transition: grid-template-rows 0.35s ease-out;
}
/* Disable shell transitions on mobile to prevent flicker */
.nav-shell {
transition: none;
}
/* Name always visible and left-aligned on mobile */
.nav-name {
opacity: 1;
transform: none;
pointer-events: auto;
justify-self: start;
margin-left: 0;
transition: opacity 0.2s ease-out;
}
/* Home page: hide name by default on mobile, show on scroll (collapsed nav) */
.nav:not(.nav--case-study):not(.nav--contact-page) .nav-name {
opacity: 0;
pointer-events: none;
}
.nav:not(.nav--case-study):not(.nav--contact-page).is-scrolled .nav-name {
opacity: 1;
pointer-events: auto;
}
/* Fade out nav-name during page transitions for smooth handoff */
.nav-name.is-transitioning {
opacity: 0 !important;
pointer-events: none;
}
/* Right-align the actions */
.nav-actions {
justify-self: end;
}
/* Force nav-actions buttons to be stable position but allow smooth opacity */
/* Note: Back CTA in nav-left-slot needs its translateY(-50%) for centering */
/* The nav width transition creates the sliding effect, buttons stay in place */
/* EXCLUDED: Contact and Case Study pages use separate animation rules */
.nav:not(.nav--contact-page):not(.nav--case-study) .nav-actions .nav-contact-btn {
opacity: 1;
transform: none;
transition: opacity 0.2s ease-out;
}
/* Contact/Case Study pages: Show nav-left-slot for back CTA */
.nav--contact-page .nav-left-slot,
.nav--case-study .nav-left-slot {
display: flex;
min-width: auto;
}
/* Contact page: 3-column grid for back, name, actions */
.nav--contact-page .nav-toprow {
grid-template-columns: auto 1fr auto;
gap: 0 !important;
}
.nav--contact-page #navBackCta {
width: fit-content;
justify-self: start;
}
/* Case study page: Hide name on mobile, show back + actions */
.nav--case-study .nav-toprow {
grid-template-columns: auto 1fr auto;
}
.nav--case-study .nav-name {
display: none;
}
/* Force actions to span the third column so it gets proper width */
.nav--case-study .nav-actions {
grid-column: 3;
}
/* Case study: Constrain nav-left-slot to prevent overflow */
.nav--case-study .nav-left-slot {
min-width: auto;
flex-shrink: 0;
}
/* Ensure nav and shell fill the padded container */
.nav,
.nav-shell {
max-width: 100%;
}
/* Mobile: Nav elements still animate in, but use simpler transitions after */
.nav--contact-page #navAboutCta,
.nav--contact-page #navContactCta {
transition: opacity 0.2s ease-out;
}
/* Contact page nav-name: centered in grid cell (between Back and Actions) */
/* Initial animation from navElementFadeIn will run, then these properties apply after */
.nav--contact-page .nav-name,
.nav--contact-page .nav-name--visible,
.nav--contact-page.is-scrolled .nav-name,
.nav--contact-page.is-panel-open .nav-name {
position: static !important;
justify-self: center !important;
align-self: center !important;
margin: 0 !important;
margin-left: 60px !important;
transition: none !important;
}
/* Allow nav-name to fade out during transition even with nav-name--visible */
.nav-name--visible.is-transitioning,
.nav-name.nav-name--visible.is-transitioning {
opacity: 0 !important;
}
}
/* ===== Contact Page: Name always visible with fade-in ===== */
.nav-name--visible {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
animation: navElementFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Keyframes for nav header elements fade-in animation */
@keyframes navElementFadeIn {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Contact page: All nav elements animate in together (matches index page) */
.nav--contact-page .nav-left-slot #navBackCta,
.nav--contact-page .nav-name--visible,
.nav--contact-page #navAboutCta,
.nav--contact-page .nav-theme-toggle {
opacity: 0;
transform: translateY(-20px);
animation: navElementFadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
/* Back button positioning - keeps it in correct location */
.nav--contact-page .nav-left-slot #navBackCta {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
}
/* ===== Dropdown panel ===== */
.nav-panel {
overflow: hidden;
border-top: 1px solid transparent;
background: rgba(0, 0, 0, .10);
opacity: 0;
max-height: 0;
/* CLOSING: content fades first (150ms via panel-inner), then height shrinks after 200ms delay */
transition:
max-height 300ms cubic-bezier(0.4, 0, 0.6, 1) 200ms,
opacity 150ms ease-out 180ms,
border-top-color 100ms ease 0ms,
background-color 0.3s ease,
backdrop-filter 0.3s ease;
}
.nav.is-panel-open .nav-panel {
border-top-color: rgba(255, 255, 255, .10);
opacity: 1;
max-height: 800px;
/* OPENING: height expands first, then content fades in */
transition:
max-height 400ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 300ms ease-out,
border-top-color 150ms ease 50ms;
}
.panel-inner {
padding: 14px;
opacity: 0;
transform: translateY(-8px);
/* CLOSING: fade and slide out quickly before panel shrinks */
transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.nav.is-panel-open .panel-inner {
opacity: 1;
transform: translateY(0);
/* OPENING: fade in after panel starts expanding */
transition: opacity 250ms ease-out 80ms, transform 250ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}
/* ===== About Content ===== */
.about-content {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.about-profile-pic {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 8px;
object-fit: cover;
object-position: center 15%;
border: 1px solid rgba(255, 255, 255, 0.12);
opacity: 0;
transition: opacity 400ms ease-out;
}
.nav.is-panel-open .about-profile-pic {
opacity: 1;
transition: opacity 400ms ease-out 200ms;
}
.about-bio {
display: flex;
flex-direction: column;
gap: 14px;
}
.about-bio-text {
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 1.55;
letter-spacing: -0.2px;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
.about-resume-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 40px;
font-family: 'Inp', 'Neue Haas Unica', sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: -0.2px;
color: #ffffff;
background: rgba(126, 187, 28, 0.15);
border: 1px solid #7EBB1C;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease;
}
.about-resume-cta:hover {
background: rgba(126, 187, 28, 0.25);
}
.about-resume-cta:hover svg {
opacity: 1;
}
.about-resume-cta svg {
opacity: 0.7;
transition: opacity 150ms ease;
}
/* Dark mode: Hide divider line when About panel is open */
html[data-theme="dark"] .nav.is-panel-open .nav-panel {
border-top-color: transparent;
}
/* Light mode: Nav panel should always have transparent background to prevent dark remnants during close */
html:not([data-theme="dark"]) .nav-panel {
background: transparent;
border-top-color: transparent;
}
/* Light mode: About panel styling when open - transparent so nav-shell provides unified background */
html:not([data-theme="dark"]) .nav.is-panel-open .nav-panel {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-top-color: transparent;
}
html:not([data-theme="dark"]) .about-bio-text {
color: #1a1a1a;
}
html:not([data-theme="dark"]) .about-resume-cta {
color: #1a1a1a;
background: rgba(126, 187, 28, 0.15);
border-color: #7EBB1C;
}
html:not([data-theme="dark"]) .about-resume-cta:hover {
background: rgba(126, 187, 28, 0.25);
}
html:not([data-theme="dark"]) .about-profile-pic {
border-color: rgba(26, 26, 26, 0.12);
}
/* ===== Page offset spacer ===== */
.page-offset {
height: calc(var(--nav-top-pad) + var(--nav-row-h) + 18px);
pointer-events: none;
/* Prevent sub-pixel jitter when nav transitions occur */
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Hide page-offset on contact page - section already accounts for nav height */
.page-container:has(.contact-page-section)~.page-offset,
body:has(.contact-page-section) .page-offset {
display: none;
}
/* ===== Responsive ===== */
@media (max-width: 520px) {
.nav-clock {
display: none;
}
:root {
--nav-w-collapsed: calc(100vw - 20px);
--shell-margin-x: 10px;
}
}
/* ===== Contact Page Variant ===== */
.nav--contact-page .nav-shell {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid transparent !important;
box-shadow: none !important;
}
/* Override transparent background when About panel is open on contact page */
.nav--contact-page.is-panel-open .nav-shell {
border: 1px solid var(--hair-shell-visible) !important;
background: var(--glass) !important;
backdrop-filter: blur(var(--blur)) !important;
-webkit-backdrop-filter: blur(var(--blur)) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.nav--contact-page {
min-height: 49px;
/* Keep nav full width on contact page - never collapse */
width: 100% !important;
max-width: 100% !important;
}
.nav--contact-page #navBackCta {
visibility: visible !important;
margin-left: 1px;
position: relative;
}
.nav--contact-page .nav-actions .nav-contact-btn {
visibility: visible !important;
}
.nav--contact-page .nav-name {
/* Centered in full-width nav - no fixed positioning needed */
position: static;
justify-self: center;
margin-left: 60px !important;
margin-right: 0 !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto;
transition: none !important;
}
/* Ensure name stays visually stable when scrolled or About panel is open */
.nav--contact-page.is-scrolled .nav-name,
.nav--contact-page.is-panel-open .nav-name {
position: static;
justify-self: center;
margin-left: 60px !important;
margin-right: 0 !important;
transform: none !important;
transition: none !important;
}
/* Contact page: Delay panel grid so name moves 50ms earlier */
.nav--contact-page.is-panel-open .nav-grid {
transition-delay: 50ms;
}
/* ===== Case Study Page Variant ===== */
/* Case study nav uses same glass behavior as home page:
- Transparent background and no border when at top
- Glass effect with border appears only when scrolled */
.nav--case-study .nav-name {
opacity: 0;
margin-left: 0;
transform: translateY(-2px) translateZ(0);
transition: opacity var(--dur-fade) var(--ease-panel), transform var(--dur-fade) var(--ease-panel);
pointer-events: none;
}
.nav--case-study.is-scrolled .nav-name {
opacity: 1;
transform: translateY(0) translateZ(0);
pointer-events: auto;
}
/* Case study page: All nav elements animate in together (matches index/contact page) */
.nav--case-study #navBackCta,
.nav--case-study #navAboutCta,
.nav--case-study #navContactCta,
.nav--case-study .nav-fullscreen-btn,
.nav--case-study .nav-theme-toggle {
opacity: 0;
transform: translateY(-20px);
animation: navElementFadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
/* Case study back button positioning - keeps it in correct location */
.nav--case-study .nav-left-slot #navBackCta {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
}
/* Easy Apply nav title variant - 1px increased leading to fix shift */
.nav-name--easy-apply {
line-height: 15px;
}
/* ==================== PERFORMANCE OPTIMIZATIONS ====================
Disabled expensive effects on low-performance devices
Triggered by .perf-low class added by performance-detect.js
================================================================= */
/* Disable backdrop-filter on low-performance devices */
.perf-low .nav-shell,
.perf-low .nav.is-scrolled .nav-shell,
.perf-low .nav--contact-page.is-panel-open .nav-shell {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* Use solid background fallback instead */
background: rgba(13, 13, 13, 0.92) !important;
}
/* Disable will-change on low-performance devices to reduce GPU memory usage */
.perf-low .nav,
.perf-low .card-wrapper,
.perf-low .card-bg-image,
.perf-low .cs-reveal img,
.perf-low .nav-name {
will-change: auto !important;
}
/* Reduce transition complexity on low-performance devices */
.perf-low .nav-shell {
transition:
border-color 100ms ease-out,
box-shadow 100ms ease-out,
background 100ms ease-out !important;
}
/* Simplify card transitions on low-performance devices */
.perf-low .card-wrapper {
transition:
height 250ms ease-out,
transform 250ms ease-out !important;
}
/* Simplify reveal animations on low-performance devices */
.perf-low .cs-reveal img,
.perf-low .card-bg-image {
transition-duration: 1200ms, 1400ms, 1200ms !important;
}