/* ═══════════════════════════════════════════════════ AJ ARCHITECTS – Main Stylesheet Dark gallery aesthetic, image-first architecture ═══════════════════════════════════════════════════ */ /* ── CSS Custom Properties (Runtime Theming) ── */ :root, [data-theme="dark"] { --color-bg: #080808; --color-bg-elevated: #111111; --color-bg-surface: #1a1a1a; --color-bg-overlay: rgba(0, 0, 0, 0.72); --color-bg-glass: rgba(8, 8, 8, 0.85); --color-text: #f5f5f5; --color-text-body: #cccccc; --color-text-muted: #888888; --color-text-dim: #555555; --color-accent: #c9a96e; --color-accent-subtle: rgba(201, 169, 110, 0.15); --color-border: #1f1f1f; --color-border-hover: #333333; --team-card-panel-bg: var(--color-bg-surface); --team-card-panel-text: var(--color-text); --team-card-role-text: var(--color-text-body); --team-card-panel-border: 1px solid var(--color-border); --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif; --font-body: 'Inter', 'Helvetica Neue', sans-serif; --header-height: 72px; --container-max: 1440px; --container-padding: clamp(1.5rem, 4vw, 4rem); --grid-gap: clamp(1rem, 2vw, 2rem); --transition-fast: 200ms ease; --transition-base: 350ms ease; --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); } [data-theme="light"] { --color-bg: #f8f7f4; --color-bg-elevated: #ffffff; --color-bg-surface: #eeede9; --color-bg-overlay: rgba(255, 255, 255, 0.72); --color-bg-glass: rgba(248, 247, 244, 0.85); --color-text: #1a1a1a; --color-text-body: #444444; --color-text-muted: #777777; --color-text-dim: #999999; --color-accent: #a07d3f; --color-accent-subtle: rgba(160, 125, 63, 0.1); --color-border: #e0dfd8; --color-border-hover: #c8c7c0; --team-card-panel-bg: #eceae4; --team-card-panel-text: #232323; --team-card-role-text: #5e4a29; --team-card-panel-border: 1px solid var(--color-border); } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: auto; /* Lenis handles smooth scroll */ } body { font-family: var(--font-body); color: var(--color-text-body); background-color: var(--color-bg); line-height: 1.5; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } body.is-loading { overflow: hidden; } /* ── Architectural Blueprint Background Pattern ── Shows on every page EXCEPT the home/front page. Applied as a layered background on to avoid pseudo-elements that interfere with Lenis smooth scroll. Opacity is baked into the SVG files themselves. Slow diagonal drift animation for subtle motion. */ @keyframes blueprint-drift { from { background-position: 0 0; } to { background-position: 800px 800px; } } [data-theme="dark"] body:not(.home-fullscreen) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg opacity='0.10'%3E%3Cg stroke-width='2'%3E%3Cpolyline points='120,180 120,420 320,420 320,320 480,320 480,180 120,180'/%3E%3Cline x1='280' y1='180' x2='280' y2='320'/%3E%3Cline x1='120' y1='300' x2='280' y2='300'/%3E%3Cline x1='380' y1='180' x2='380' y2='320'/%3E%3C/g%3E%3Cg stroke-width='1'%3E%3Cpath d='M 200,180 A 30,30 0 0,1 200,210' /%3E%3Cline x1='200' y1='180' x2='200' y2='210'/%3E%3Cpath d='M 280,250 A 25,25 0 0,0 255,250' /%3E%3Cline x1='280' y1='250' x2='255' y2='250'/%3E%3Cpath d='M 380,240 A 28,28 0 0,1 380,268' /%3E%3Cline x1='380' y1='240' x2='380' y2='268'/%3E%3Cpath d='M 160,420 A 35,35 0 0,0 160,385' /%3E%3Cline x1='160' y1='420' x2='160' y2='385'/%3E%3C/g%3E%3Cg stroke-width='1.2'%3E%3Cline x1='150' y1='176' x2='180' y2='176'/%3E%3Cline x1='150' y1='184' x2='180' y2='184'/%3E%3Cline x1='310' y1='176' x2='350' y2='176'/%3E%3Cline x1='310' y1='184' x2='350' y2='184'/%3E%3Cline x1='420' y1='176' x2='460' y2='176'/%3E%3Cline x1='420' y1='184' x2='460' y2='184'/%3E%3Cline x1='116' y1='340' x2='116' y2='380'/%3E%3Cline x1='124' y1='340' x2='124' y2='380'/%3E%3C/g%3E%3Cg stroke-width='0.6' stroke-dasharray='none'%3E%3Cline x1='120' y1='150' x2='480' y2='150'/%3E%3Cline x1='120' y1='145' x2='120' y2='155'/%3E%3Cline x1='480' y1='145' x2='480' y2='155'/%3E%3Cline x1='120' y1='160' x2='120' y2='175'/%3E%3Cline x1='480' y1='160' x2='480' y2='175'/%3E%3Cline x1='90' y1='180' x2='90' y2='420'/%3E%3Cline x1='85' y1='180' x2='95' y2='180'/%3E%3Cline x1='85' y1='420' x2='95' y2='420'/%3E%3Cline x1='95' y1='180' x2='115' y2='180'/%3E%3Cline x1='95' y1='420' x2='115' y2='420'/%3E%3C/g%3E%3Cg stroke-width='0.5'%3E%3Cline x1='296' y1='147' x2='304' y2='153'/%3E%3Cline x1='304' y1='147' x2='296' y2='153'/%3E%3Cline x1='87' y1='297' x2='93' y2='303'/%3E%3Cline x1='93' y1='297' x2='87' y2='303'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Crect x='290' y='340' width='60' height='70' fill='none'/%3E%3Cline x1='290' y1='350' x2='350' y2='350'/%3E%3Cline x1='290' y1='360' x2='350' y2='360'/%3E%3Cline x1='290' y1='370' x2='350' y2='370'/%3E%3Cline x1='290' y1='380' x2='350' y2='380'/%3E%3Cline x1='290' y1='390' x2='350' y2='390'/%3E%3Cline x1='290' y1='400' x2='350' y2='400'/%3E%3Cline x1='320' y1='410' x2='320' y2='345'/%3E%3Cline x1='315' y1='352' x2='320' y2='345'/%3E%3Cline x1='325' y1='352' x2='320' y2='345'/%3E%3C/g%3E%3Cg stroke-width='1.5'%3E%3Crect x='560' y='80' width='180' height='140' fill='none'/%3E%3Cline x1='560' y1='140' x2='680' y2='140'/%3E%3Cline x1='680' y1='80' x2='680' y2='220'/%3E%3Cline x1='620' y1='140' x2='620' y2='220'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Cpath d='M 650,140 A 22,22 0 0,1 650,162' /%3E%3Cline x1='650' y1='140' x2='650' y2='162'/%3E%3Cline x1='580' y1='76' x2='640' y2='76'/%3E%3Cline x1='580' y1='84' x2='640' y2='84'/%3E%3Cline x1='700' y1='76' x2='730' y2='76'/%3E%3Cline x1='700' y1='84' x2='730' y2='84'/%3E%3C/g%3E%3Cg stroke-width='1'%3E%3Ccircle cx='520' cy='400' r='14' fill='none'/%3E%3Cline x1='506' y1='400' x2='534' y2='400'/%3E%3Cpolygon points='534,400 544,395 544,405' fill='none' stroke-width='0.8'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Ccircle cx='120' cy='460' r='12' fill='none'/%3E%3Ccircle cx='280' cy='460' r='12' fill='none'/%3E%3Ccircle cx='480' cy='460' r='12' fill='none'/%3E%3C/g%3E%3Cg stroke-width='1.2'%3E%3Cline x1='540' y1='600' x2='760' y2='600'/%3E%3Cpolyline points='570,600 570,500 610,500 610,480 690,480 690,500 730,500 730,600'/%3E%3Cpolyline points='560,500 650,440 740,500'/%3E%3Crect x='590' y='520' width='24' height='35' fill='none' stroke-width='0.8'/%3E%3Cline x1='602' y1='520' x2='602' y2='555' stroke-width='0.5'/%3E%3Crect x='630' y='520' width='24' height='35' fill='none' stroke-width='0.8'/%3E%3Cline x1='642' y1='520' x2='642' y2='555' stroke-width='0.5'/%3E%3Crect x='670' y='520' width='24' height='35' fill='none' stroke-width='0.8'/%3E%3Cline x1='682' y1='520' x2='682' y2='555' stroke-width='0.5'/%3E%3Crect x='640' y='560' width='30' height='40' fill='none' stroke-width='0.8'/%3E%3Ccircle cx='650' cy='465' r='10' fill='none' stroke-width='0.8'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Cline x1='60' y1='520' x2='60' y2='700'/%3E%3Cline x1='80' y1='520' x2='80' y2='700'/%3E%3Cline x1='62' y1='530' x2='78' y2='545'/%3E%3Cline x1='62' y1='545' x2='78' y2='560'/%3E%3Cline x1='62' y1='560' x2='78' y2='575'/%3E%3Cline x1='62' y1='575' x2='78' y2='590'/%3E%3Cline x1='62' y1='590' x2='78' y2='605'/%3E%3Cline x1='62' y1='605' x2='78' y2='620'/%3E%3Cline x1='62' y1='620' x2='78' y2='635'/%3E%3Cline x1='62' y1='635' x2='78' y2='650'/%3E%3Cline x1='78' y1='530' x2='62' y2='545'/%3E%3Cline x1='78' y1='545' x2='62' y2='560'/%3E%3Cline x1='78' y1='560' x2='62' y2='575'/%3E%3Cline x1='78' y1='575' x2='62' y2='590'/%3E%3Cline x1='78' y1='590' x2='62' y2='605'/%3E%3Cline x1='78' y1='605' x2='62' y2='620'/%3E%3Cline x1='78' y1='620' x2='62' y2='635'/%3E%3Cline x1='78' y1='635' x2='62' y2='650'/%3E%3Cline x1='40' y1='520' x2='40' y2='700'/%3E%3Cline x1='35' y1='520' x2='45' y2='520'/%3E%3Cline x1='35' y1='700' x2='45' y2='700'/%3E%3C/g%3E%3Cg stroke-width='0.8' transform='translate(680, 350)'%3E%3Ccircle cx='0' cy='0' r='20' fill='none'/%3E%3Cline x1='0' y1='-24' x2='0' y2='24'/%3E%3Cline x1='-24' y1='0' x2='24' y2='0'/%3E%3Cpolygon points='0,-28 -4,-20 4,-20' fill='none' stroke-width='1'/%3E%3C/g%3E%3Cg stroke-width='0.5' stroke-dasharray='4,4'%3E%3Cline x1='200' y1='140' x2='200' y2='460'/%3E%3Cline x1='380' y1='140' x2='380' y2='460'/%3E%3Cline x1='80' y1='300' x2='520' y2='300'/%3E%3C/g%3E%3Cg stroke-width='0.6'%3E%3Crect x='30' y='30' width='160' height='120' fill='none' stroke-dasharray='8,4'/%3E%3Crect x='60' y='50' width='80' height='60' fill='none' stroke-width='1.2'/%3E%3Cpolyline points='100,110 100,150 140,150' stroke-dasharray='none'/%3E%3Ccircle cx='155' cy='55' r='8' fill='none'/%3E%3Ccircle cx='50' cy='130' r='6' fill='none'/%3E%3Ccircle cx='170' cy='120' r='7' fill='none'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Cline x1='200' y1='720' x2='400' y2='720'/%3E%3Cline x1='200' y1='715' x2='200' y2='725'/%3E%3Cline x1='250' y1='717' x2='250' y2='723'/%3E%3Cline x1='300' y1='715' x2='300' y2='725'/%3E%3Cline x1='350' y1='717' x2='350' y2='723'/%3E%3Cline x1='400' y1='715' x2='400' y2='725'/%3E%3Crect x='200' y1='718' y='718' width='50' height='4' fill='none'/%3E%3Crect x='300' y='718' width='50' height='4' fill='none'/%3E%3C/g%3E%3Cg stroke-width='0.6'%3E%3Cline x1='400' y1='500' x2='520' y2='500'/%3E%3Cline x1='400' y1='500' x2='400' y2='620'/%3E%3Cline x1='400' y1='620' x2='520' y2='620'/%3E%3Cline x1='520' y1='500' x2='520' y2='620'/%3E%3Cline x1='400' y1='500' x2='520' y2='620'/%3E%3Cline x1='520' y1='500' x2='400' y2='620'/%3E%3Ccircle cx='460' cy='560' r='3' fill='none'/%3E%3C/g%3E%3Cg stroke-width='0.4'%3E%3Ccircle cx='200' cy='240' r='2' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='330' cy='250' r='2' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='430' cy='250' r='2' fill='%23ffffff' opacity='0.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 800px 800px; background-repeat: repeat; animation: blueprint-drift 120s linear infinite; } [data-theme="light"] body:not(.home-fullscreen) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg opacity='0.11'%3E%3Cg stroke-width='2'%3E%3Cpolyline points='120,180 120,420 320,420 320,320 480,320 480,180 120,180'/%3E%3Cline x1='280' y1='180' x2='280' y2='320'/%3E%3Cline x1='120' y1='300' x2='280' y2='300'/%3E%3Cline x1='380' y1='180' x2='380' y2='320'/%3E%3C/g%3E%3Cg stroke-width='1'%3E%3Cpath d='M 200,180 A 30,30 0 0,1 200,210' /%3E%3Cline x1='200' y1='180' x2='200' y2='210'/%3E%3Cpath d='M 280,250 A 25,25 0 0,0 255,250' /%3E%3Cline x1='280' y1='250' x2='255' y2='250'/%3E%3Cpath d='M 380,240 A 28,28 0 0,1 380,268' /%3E%3Cline x1='380' y1='240' x2='380' y2='268'/%3E%3Cpath d='M 160,420 A 35,35 0 0,0 160,385' /%3E%3Cline x1='160' y1='420' x2='160' y2='385'/%3E%3C/g%3E%3Cg stroke-width='1.2'%3E%3Cline x1='150' y1='176' x2='180' y2='176'/%3E%3Cline x1='150' y1='184' x2='180' y2='184'/%3E%3Cline x1='310' y1='176' x2='350' y2='176'/%3E%3Cline x1='310' y1='184' x2='350' y2='184'/%3E%3Cline x1='420' y1='176' x2='460' y2='176'/%3E%3Cline x1='420' y1='184' x2='460' y2='184'/%3E%3Cline x1='116' y1='340' x2='116' y2='380'/%3E%3Cline x1='124' y1='340' x2='124' y2='380'/%3E%3C/g%3E%3Cg stroke-width='0.6' stroke-dasharray='none'%3E%3Cline x1='120' y1='150' x2='480' y2='150'/%3E%3Cline x1='120' y1='145' x2='120' y2='155'/%3E%3Cline x1='480' y1='145' x2='480' y2='155'/%3E%3Cline x1='120' y1='160' x2='120' y2='175'/%3E%3Cline x1='480' y1='160' x2='480' y2='175'/%3E%3Cline x1='90' y1='180' x2='90' y2='420'/%3E%3Cline x1='85' y1='180' x2='95' y2='180'/%3E%3Cline x1='85' y1='420' x2='95' y2='420'/%3E%3Cline x1='95' y1='180' x2='115' y2='180'/%3E%3Cline x1='95' y1='420' x2='115' y2='420'/%3E%3C/g%3E%3Cg stroke-width='0.5'%3E%3Cline x1='296' y1='147' x2='304' y2='153'/%3E%3Cline x1='304' y1='147' x2='296' y2='153'/%3E%3Cline x1='87' y1='297' x2='93' y2='303'/%3E%3Cline x1='93' y1='297' x2='87' y2='303'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Crect x='290' y='340' width='60' height='70' fill='none'/%3E%3Cline x1='290' y1='350' x2='350' y2='350'/%3E%3Cline x1='290' y1='360' x2='350' y2='360'/%3E%3Cline x1='290' y1='370' x2='350' y2='370'/%3E%3Cline x1='290' y1='380' x2='350' y2='380'/%3E%3Cline x1='290' y1='390' x2='350' y2='390'/%3E%3Cline x1='290' y1='400' x2='350' y2='400'/%3E%3Cline x1='320' y1='410' x2='320' y2='345'/%3E%3Cline x1='315' y1='352' x2='320' y2='345'/%3E%3Cline x1='325' y1='352' x2='320' y2='345'/%3E%3C/g%3E%3Cg stroke-width='1.5'%3E%3Crect x='560' y='80' width='180' height='140' fill='none'/%3E%3Cline x1='560' y1='140' x2='680' y2='140'/%3E%3Cline x1='680' y1='80' x2='680' y2='220'/%3E%3Cline x1='620' y1='140' x2='620' y2='220'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Cpath d='M 650,140 A 22,22 0 0,1 650,162' /%3E%3Cline x1='650' y1='140' x2='650' y2='162'/%3E%3Cline x1='580' y1='76' x2='640' y2='76'/%3E%3Cline x1='580' y1='84' x2='640' y2='84'/%3E%3Cline x1='700' y1='76' x2='730' y2='76'/%3E%3Cline x1='700' y1='84' x2='730' y2='84'/%3E%3C/g%3E%3Cg stroke-width='1'%3E%3Ccircle cx='520' cy='400' r='14' fill='none'/%3E%3Cline x1='506' y1='400' x2='534' y2='400'/%3E%3Cpolygon points='534,400 544,395 544,405' fill='none' stroke-width='0.8'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Ccircle cx='120' cy='460' r='12' fill='none'/%3E%3Ccircle cx='280' cy='460' r='12' fill='none'/%3E%3Ccircle cx='480' cy='460' r='12' fill='none'/%3E%3C/g%3E%3Cg stroke-width='1.2'%3E%3Cline x1='540' y1='600' x2='760' y2='600'/%3E%3Cpolyline points='570,600 570,500 610,500 610,480 690,480 690,500 730,500 730,600'/%3E%3Cpolyline points='560,500 650,440 740,500'/%3E%3Crect x='590' y='520' width='24' height='35' fill='none' stroke-width='0.8'/%3E%3Cline x1='602' y1='520' x2='602' y2='555' stroke-width='0.5'/%3E%3Crect x='630' y='520' width='24' height='35' fill='none' stroke-width='0.8'/%3E%3Cline x1='642' y1='520' x2='642' y2='555' stroke-width='0.5'/%3E%3Crect x='670' y='520' width='24' height='35' fill='none' stroke-width='0.8'/%3E%3Cline x1='682' y1='520' x2='682' y2='555' stroke-width='0.5'/%3E%3Crect x='640' y='560' width='30' height='40' fill='none' stroke-width='0.8'/%3E%3Ccircle cx='650' cy='465' r='10' fill='none' stroke-width='0.8'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Cline x1='60' y1='520' x2='60' y2='700'/%3E%3Cline x1='80' y1='520' x2='80' y2='700'/%3E%3Cline x1='62' y1='530' x2='78' y2='545'/%3E%3Cline x1='62' y1='545' x2='78' y2='560'/%3E%3Cline x1='62' y1='560' x2='78' y2='575'/%3E%3Cline x1='62' y1='575' x2='78' y2='590'/%3E%3Cline x1='62' y1='590' x2='78' y2='605'/%3E%3Cline x1='62' y1='605' x2='78' y2='620'/%3E%3Cline x1='62' y1='620' x2='78' y2='635'/%3E%3Cline x1='62' y1='635' x2='78' y2='650'/%3E%3Cline x1='78' y1='530' x2='62' y2='545'/%3E%3Cline x1='78' y1='545' x2='62' y2='560'/%3E%3Cline x1='78' y1='560' x2='62' y2='575'/%3E%3Cline x1='78' y1='575' x2='62' y2='590'/%3E%3Cline x1='78' y1='590' x2='62' y2='605'/%3E%3Cline x1='78' y1='605' x2='62' y2='620'/%3E%3Cline x1='78' y1='620' x2='62' y2='635'/%3E%3Cline x1='78' y1='635' x2='62' y2='650'/%3E%3Cline x1='40' y1='520' x2='40' y2='700'/%3E%3Cline x1='35' y1='520' x2='45' y2='520'/%3E%3Cline x1='35' y1='700' x2='45' y2='700'/%3E%3C/g%3E%3Cg stroke-width='0.8' transform='translate(680, 350)'%3E%3Ccircle cx='0' cy='0' r='20' fill='none'/%3E%3Cline x1='0' y1='-24' x2='0' y2='24'/%3E%3Cline x1='-24' y1='0' x2='24' y2='0'/%3E%3Cpolygon points='0,-28 -4,-20 4,-20' fill='none' stroke-width='1'/%3E%3C/g%3E%3Cg stroke-width='0.5' stroke-dasharray='4,4'%3E%3Cline x1='200' y1='140' x2='200' y2='460'/%3E%3Cline x1='380' y1='140' x2='380' y2='460'/%3E%3Cline x1='80' y1='300' x2='520' y2='300'/%3E%3C/g%3E%3Cg stroke-width='0.6'%3E%3Crect x='30' y='30' width='160' height='120' fill='none' stroke-dasharray='8,4'/%3E%3Crect x='60' y='50' width='80' height='60' fill='none' stroke-width='1.2'/%3E%3Cpolyline points='100,110 100,150 140,150' stroke-dasharray='none'/%3E%3Ccircle cx='155' cy='55' r='8' fill='none'/%3E%3Ccircle cx='50' cy='130' r='6' fill='none'/%3E%3Ccircle cx='170' cy='120' r='7' fill='none'/%3E%3C/g%3E%3Cg stroke-width='0.8'%3E%3Cline x1='200' y1='720' x2='400' y2='720'/%3E%3Cline x1='200' y1='715' x2='200' y2='725'/%3E%3Cline x1='250' y1='717' x2='250' y2='723'/%3E%3Cline x1='300' y1='715' x2='300' y2='725'/%3E%3Cline x1='350' y1='717' x2='350' y2='723'/%3E%3Cline x1='400' y1='715' x2='400' y2='725'/%3E%3Crect x='200' y1='718' y='718' width='50' height='4' fill='none'/%3E%3Crect x='300' y='718' width='50' height='4' fill='none'/%3E%3C/g%3E%3Cg stroke-width='0.6'%3E%3Cline x1='400' y1='500' x2='520' y2='500'/%3E%3Cline x1='400' y1='500' x2='400' y2='620'/%3E%3Cline x1='400' y1='620' x2='520' y2='620'/%3E%3Cline x1='520' y1='500' x2='520' y2='620'/%3E%3Cline x1='400' y1='500' x2='520' y2='620'/%3E%3Cline x1='520' y1='500' x2='400' y2='620'/%3E%3Ccircle cx='460' cy='560' r='3' fill='none'/%3E%3C/g%3E%3Cg stroke-width='0.4'%3E%3Ccircle cx='200' cy='240' r='2' fill='%23000000' opacity='0.5'/%3E%3Ccircle cx='330' cy='250' r='2' fill='%23000000' opacity='0.5'/%3E%3Ccircle cx='430' cy='250' r='2' fill='%23000000' opacity='0.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 800px 800px; background-repeat: repeat; animation: blueprint-drift 120s linear infinite; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-text); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent); } button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; } /* ── Skip to Content Link (Accessibility) ── */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-accent); color: var(--color-bg); padding: 0.5rem 1rem; text-decoration: none; z-index: 200; } .skip-link:focus { top: 0; } .screen-reader-text, .sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-text); font-weight: 500; line-height: 1.2; } .aj-display { font-size: clamp(2.5rem, 5.5vw, 5rem); letter-spacing: -0.03em; line-height: 1.05; } h1, .aj-h1 { font-size: clamp(2.25rem, 4.5vw, 4rem); letter-spacing: -0.02em; } h2, .aj-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); } h3, .aj-h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); } .aj-overline { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-muted); } .aj-body-lg { font-size: 1.125rem; line-height: 1.7; } .aj-caption { font-size: 0.875rem; color: var(--color-text-muted); } /* ── Layout ── */ .aj-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .aj-section { padding: 0 0 clamp(3rem, 5vw, 5rem); } .aj-grid { display: grid; gap: var(--grid-gap); } .aj-grid > * { min-width: 0; } .aj-grid--2 { grid-template-columns: repeat(2, 1fr); } .aj-grid--3 { grid-template-columns: repeat(3, 1fr); } .aj-grid--4 { grid-template-columns: repeat(4, 1fr); } .aj-grid--6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1024px) { .aj-grid--6 { grid-template-columns: repeat(3, 1fr); } .aj-grid--4 { grid-template-columns: repeat(2, 1fr); } .aj-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .aj-grid--6 { grid-template-columns: repeat(2, 1fr); } .aj-grid--4, .aj-grid--3, .aj-grid--2 { grid-template-columns: 1fr; } } /* ── Header ── */ .aj-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--container-padding); background: var(--color-bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); transition: transform 0.4s var(--ease-out-expo), background-color 0.4s ease; } /* body.page-template-page-contact .aj-header { z-index: 300; } */ .aj-header.is-hidden { transform: translateY(-100%); } .aj-header__logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.05em; color: var(--color-text); } .aj-header__nav { display: flex; align-items: center; gap: 2rem; } .aj-header__link { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); position: relative; transition: color var(--transition-fast); } .aj-header__link:hover, .aj-header__link.is-active { color: var(--color-text); } .aj-header__actions { display: flex; align-items: center; gap: 1rem; } .aj-header__btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: color var(--transition-fast); } .aj-header__btn:hover { color: var(--color-text); } /* Mobile nav */ .aj-mobile-toggle { display: none; } @media (max-width: 768px) { .aj-header__nav .aj-header__link { font-size: 1.5rem; } .aj-mobile-toggle { display: flex; z-index: 201; } } /* ── Preloader ── */ .aj-preloader { position: fixed; inset: 0; z-index: 9999; background: var(--color-bg); display: flex; align-items: center; justify-content: center; } .aj-preloader__inner { text-align: center; } .aj-preloader .aj-logo-draw { width: 200px; height: auto; } .aj-preloader__bar { width: 120px; height: 1px; background: var(--color-accent); margin: 24px auto 0; transform-origin: left; transform: scaleX(0); } /* ── Homepage Carousel ── */ .aj-carousel { position: relative; height: 100vh; width: 100%; background: var(--color-bg); } .aj-carousel-main { height: 100%; width: 100%; } .aj-carousel-main .swiper-slide { position: relative; overflow: hidden; } .aj-carousel__image { position: absolute; inset: 0; width: 100%; height: 100%; } .aj-carousel__image img { width: 100%; height: 100%; object-fit: cover; } .aj-carousel__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.7) 100% ); pointer-events: none; } .aj-carousel__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 var(--container-padding) 120px; z-index: 10; } .aj-carousel__title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.5rem; } .aj-carousel__meta { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 1rem; } .aj-carousel__meta span { display: flex; align-items: center; gap: 0.25rem; } .aj-title-line { width: 60px; height: 1px; background: var(--color-accent); margin: 1rem 0; transform-origin: left; } /* Carousel navigation */ .aj-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); } .aj-carousel-nav:hover { color: #ffffff; transform: translateY(-50%) scale(1.1); } .aj-nav-prev { left: var(--container-padding); } .aj-nav-next { right: var(--container-padding); } /* Thumbnail strip */ .aj-carousel-thumbs-wrapper { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px var(--container-padding); background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); z-index: 15; } .aj-carousel-thumbs { max-width: 600px; } .aj-carousel-thumbs .swiper-slide { width: 80px; height: 60px; border-radius: 2px; overflow: hidden; opacity: 0.5; cursor: pointer; transition: opacity var(--transition-fast); } .aj-carousel-thumbs .swiper-slide-thumb-active { opacity: 1; outline: 1px solid var(--color-accent); outline-offset: 2px; } .aj-carousel-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } /* ── Footer Stats Bar ── */ .aj-stats-bar { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 1rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .aj-stat { text-align: center; } .aj-stat__number { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; color: var(--color-text); letter-spacing: -0.02em; } .aj-stat__label { font-size: 0.75rem; color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.25rem; } /* ── Project Cards (Portfolio Grid) ── */ .aj-project-card { position: relative; overflow: hidden; cursor: pointer; } .aj-project-card__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .aj-project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); } .aj-project-card:hover .aj-project-card__image img { transform: scale(1.05); } .aj-project-card__hover-overlay { position: absolute; inset: 0; background: var(--color-bg-overlay); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; opacity: 0; transition: opacity var(--transition-base); } .aj-project-card:hover .aj-project-card__hover-overlay { opacity: 1; } .aj-project-card__info { padding: 1rem 0; } .aj-project-card__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.25rem; } .aj-project-card__meta { font-size: 0.8125rem; color: var(--color-text-muted); display: flex; gap: 0.75rem; } /* ── Filter Bar ── */ .aj-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } .aj-filter-btn { padding: 0.5rem 1.25rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 2px; background: transparent; transition: all var(--transition-fast); } .aj-filter-btn:hover { color: var(--color-text); border-color: var(--color-border-hover); } .aj-filter-btn.active { color: var(--color-bg); background: var(--color-text); border-color: var(--color-text); } /* ── Lightbox ── */ .aj-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .aj-lightbox.is-open { opacity: 1; pointer-events: auto; } .aj-lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; color: rgba(255, 255, 255, 0.7); z-index: 10; transition: color var(--transition-fast); } .aj-lightbox__close:hover { color: #ffffff; } .aj-lightbox-swiper { width: 90vw; height: 85vh; } .aj-lightbox-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .aj-lightbox-swiper .swiper-slide img { max-width: 100%; max-height: 100%; object-fit: contain; } .aj-lightbox-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.1em; } /* ── Team Cards ── */ .aj-team-card { text-align: center; } .aj-team-card__image { aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 1rem; width: 100%; } .aj-team-card__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%); transition: filter 0.4s ease, transform 0.6s var(--ease-out-expo); } .aj-team-card:hover .aj-team-card__image img { filter: grayscale(0%); transform: scale(1.03); } .aj-team-card__name { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--color-text); } .aj-team-card__role { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.25rem; } /* ── Leadership Featured Cards ── */ .aj-leadership { padding-bottom: 0; } .aj-leadership-grid { max-width: 100%; } @media (min-width: 1025px) { .aj-leadership-grid { gap: calc(var(--grid-gap) + 1.75rem); } } .aj-team-card--featured .aj-team-card__image { aspect-ratio: 3 / 4; border: 2px solid var(--color-accent); border-radius: 6px; overflow: hidden; } .aj-team-card--featured .aj-team-card__image img { filter: grayscale(0%); } .aj-team-card--featured .aj-team-card__content { padding-top: 0.75rem; } .aj-team-card--featured .aj-h2 { font-size: 1.1rem; } /* ── Compact team cards for 6-col grid ── */ .aj-grid--6 .aj-team-card__image { margin-bottom: 0.6rem; } .aj-grid--6 .aj-team-card__content { padding-top: 0.5rem; } .aj-grid--6 .aj-h3 { font-size: 0.85rem; } .aj-grid--6 .aj-team-card__role { font-size: 0.65rem; } .aj-team-card__role--accent { color: var(--color-accent) !important; font-weight: 600; letter-spacing: 0.12em; } /* ── Contact Form ── */ .aj-form { display: grid; gap: 1.5rem; } .aj-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 768px) { .aj-form__row { grid-template-columns: 1fr; } } .aj-form__group { display: flex; flex-direction: column; gap: 0.5rem; } .aj-form__label { font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.05em; text-transform: uppercase; } .aj-form__input, .aj-form__select, .aj-form__textarea { padding: 0.875rem 1rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: 2px; transition: border-color var(--transition-fast); outline: none; } .aj-form__input:focus, .aj-form__select:focus, .aj-form__textarea:focus { border-color: var(--color-accent); } .aj-form__textarea { resize: vertical; min-height: 150px; } .aj-form__error { font-size: 0.8125rem; color: #e74c3c; } .aj-form__success { padding: 1rem; background: var(--color-accent-subtle); color: var(--color-accent); border-radius: 2px; font-size: 0.9375rem; } /* ── Buttons ── */ .aj-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 2rem; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); border: 1px solid var(--color-text); background: transparent; overflow: hidden; transition: color 0.3s ease; cursor: pointer; } .aj-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--color-text); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1); } .aj-btn:hover { color: var(--color-bg); } .aj-btn:hover::before { transform: scaleX(1); transform-origin: left; } .aj-btn span, .aj-btn svg { position: relative; z-index: 1; } .aj-btn--accent { color: var(--color-accent); border-color: var(--color-accent); } .aj-btn--accent::before { background: var(--color-accent); } /* ── Hover Effects ── */ .hover-line { position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--color-accent); transform: scaleX(0); } /* ── Image Reveal ── */ [data-reveal-image] { overflow: hidden; will-change: clip-path; } [data-reveal-image] img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; } /* ── Search Overlay (legacy block removed — see below for active styles) ── */ .aj-search-overlay__input { width: 60%; max-width: 800px; padding: 1.5rem 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); color: var(--color-text); background: transparent; border: none; border-bottom: 2px solid var(--color-border); outline: none; transition: border-color var(--transition-fast); } .aj-search-overlay__input:focus { border-bottom-color: var(--color-accent); } .aj-search-overlay__input::placeholder { color: var(--color-text-dim); } .aj-search-results { width: 60%; max-width: 800px; margin-top: 2rem; } /* ── Footer ── */ .aj-footer { border-top: 1px solid var(--color-border); padding: 3rem 0 1.5rem; background: var(--color-bg); } .aj-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 2rem; } @media (max-width: 768px) { .aj-footer__grid { grid-template-columns: 1fr; gap: 2rem; } } .aj-footer__brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--color-text); margin-bottom: 1rem; } .aj-footer__logo-link { display: inline-block; margin-bottom: 1rem; } .aj-footer__logo { height: 48px; width: auto; display: block; } /* Invert footer logo for dark theme (same as persistent header logo) */ [data-theme="dark"] .aj-footer__logo { filter: invert(1); } .aj-footer__text { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.7; } .aj-footer__heading { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text); margin-bottom: 1.25rem; } .aj-footer__link { display: block; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0.75rem; transition: color var(--transition-fast); } .aj-footer__link:hover { color: var(--color-text); } .aj-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text-dim); } .aj-footer__social { display: flex; gap: 1rem; } .aj-footer__social a { color: var(--color-text-muted); transition: color var(--transition-fast); } .aj-footer__social a:hover { color: var(--color-accent); } /* ── Footer premium (reference layout) ── */ .aj-footer--premium { overflow-x: clip; background: var(--color-bg); border-top: 1px solid var(--color-border); padding: 0 0 1.5rem; } .aj-footer--premium .aj-footer__main { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); } .aj-footer--premium .aj-footer__brand-col { padding-bottom: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); } .aj-footer--premium .aj-footer__brand-col .aj-footer__logo-link { margin-bottom: 0; } .aj-footer--premium .aj-footer__offices { display: flex; flex-direction: column; gap: 0; min-width: 0; } .aj-footer--premium .aj-footer__office { padding: clamp(1.25rem, 3vw, 1.75rem) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); min-width: 0; } .aj-footer--premium .aj-footer__office:last-child { border-bottom: none; padding-bottom: 0; } .aj-footer--premium .aj-footer__office-icon { margin-bottom: 0.5rem; } .aj-footer--premium .aj-footer__office-icon .aj-icon { color: var(--color-accent); } .aj-footer--premium .aj-footer__office-title { margin: 0 0 0.65rem; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .aj-footer--premium .aj-footer__office-lines { margin: 0 0 0.85rem; color: var(--color-text-muted); line-height: 1.65; } .aj-footer--premium .aj-footer__office-map-row { margin: 0 0 0.6rem; } .aj-footer--premium .aj-footer__office-map { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition-fast), opacity var(--transition-fast); } .aj-footer--premium .aj-footer__office-map:hover { color: var(--color-accent); opacity: 0.86; } .aj-footer--premium .aj-footer__office-map-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .aj-footer--premium .aj-footer__office-map-icon .aj-icon { color: currentColor; } .aj-icon--map-pin-image { width: 16px; height: 16px; display: inline-block; flex: 0 0 16px; background-color: currentColor; -webkit-mask-image: url("../images/map-svg.svg"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url("../images/map-svg.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .aj-footer--premium .aj-footer__office-map-icon--trailing { margin-left: 0.1rem; } .aj-footer--premium .aj-footer__office-contact { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 0.875rem; } .aj-footer--premium .aj-footer__office-contact:last-child { margin-bottom: 0; } .aj-footer--premium .aj-footer__office-contact-icon .aj-icon { flex-shrink: 0; color: var(--color-accent); } .aj-footer--premium .aj-footer__office-link { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); } .aj-footer--premium .aj-footer__office-link:hover { color: var(--color-accent); } .aj-footer--premium .aj-footer__social-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.75rem, 2vw, 1.25rem); margin-top: 0; padding-block: clamp(1.35rem, 2.75vw, 1.9rem); border-top: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); } .aj-footer--premium .aj-footer__social-deco { display: flex; align-items: center; gap: 0.35rem; flex: 1 1 3rem; min-width: 1.5rem; max-width: 8rem; } .aj-footer--premium .aj-footer__social-deco--left { justify-content: flex-end; } .aj-footer--premium .aj-footer__social-deco--right { justify-content: flex-start; } .aj-footer--premium .aj-footer__social-deco-line { flex: 1 1 auto; height: 1px; background: var(--color-accent); opacity: 0.65; min-width: 1rem; } .aj-footer--premium .aj-footer__social-deco-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; } .aj-footer--premium .aj-footer__social--premium { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem; } .aj-footer--premium .aj-footer__social-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-accent); background: transparent; color: var(--color-text); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .aj-footer--premium .aj-footer__social-btn:hover { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); } .aj-footer--premium .aj-footer__social-btn .aj-icon { color: currentColor; } .aj-footer--premium .aj-stats-bar { border-top-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); border-bottom-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); } /* Footer stat row: center label to number block (avoid baseline alignment of mixed sizes). */ .aj-footer--premium .aj-stats-bar .aj-stat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .aj-footer--premium .aj-stats-bar .aj-stat__label { margin-top: 0; } /* * Footer stats: on narrow screens flex items default to min-width:auto and stay * content-wide; with gap:2rem and overflow-x:clip on .aj-footer--premium the row * clips. Allow proportional shrink + tighter gap; keep one horizontal row. */ @media (max-width: 767px) { .aj-footer--premium .aj-stats-bar { gap: clamp(0.375rem, 1.75vw, 2rem); } .aj-footer--premium .aj-stats-bar .aj-stat { flex: 1 1 0; min-width: 0; } /* Mobile-only footer stats type scale; avoids clamp-min (24px) overflow in one row. */ .aj-footer--premium .aj-stats-bar .aj-stat__number { font-size: 15px; line-height: 1; } .aj-footer--premium .aj-stats-bar .aj-stat__suffix { font-size: 13px; line-height: 1; } .aj-footer--premium .aj-stats-bar .aj-stat__label { min-width: 0; font-size: 8px; line-height: 1.25; overflow-wrap: normal; word-break: normal; hyphens: none; } } .aj-footer--premium .aj-footer__bottom { border-top-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-border)); } @media (min-width: 640px) and (max-width: 1023px) { .aj-footer--premium .aj-footer__offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; column-gap: clamp(1rem, 3vw, 2rem); } .aj-footer--premium .aj-footer__office { border-bottom: none; padding-left: clamp(0.5rem, 2vw, 1rem); padding-right: clamp(0.5rem, 2vw, 1rem); } .aj-footer--premium .aj-footer__office:nth-child(1), .aj-footer--premium .aj-footer__office:nth-child(2) { border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); padding-bottom: clamp(1.25rem, 3vw, 1.75rem); } .aj-footer--premium .aj-footer__office:nth-child(2) { border-left: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); } .aj-footer--premium .aj-footer__office:nth-child(3) { grid-column: 1 / -1; max-width: 28rem; margin: 0 auto; width: 100%; text-align: center; border-top: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); padding-top: clamp(1.25rem, 3vw, 1.75rem); } .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-title, .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-lines { text-align: center; } .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-icon { display: flex; justify-content: center; } .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-contact { justify-content: center; } .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-map { justify-content: center; } } @media (min-width: 769px) { .aj-footer--premium .aj-footer__main { flex-direction: row; align-items: stretch; padding-top: clamp(2.25rem, 4vw, 3.75rem); gap: 0; } .aj-footer--premium .aj-footer__brand-col { flex: 0 1 22%; margin: auto; max-width: 17rem; padding-right: clamp(1.25rem, 2.5vw, 2rem); padding-bottom: 0; border-bottom: none; border-right: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); display: flex; align-items: center; } .aj-footer--premium .aj-footer__offices { flex: 1 1 0; flex-direction: row; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; padding-left: clamp(0.5rem, 1.5vw, 1.25rem); } .aj-footer--premium .aj-footer__office { padding: 0 clamp(0.75rem, 1.5vw, 1.25rem); border-bottom: none; border-left: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); } .aj-footer--premium .aj-footer__office:first-child { border-left: none; padding-left: clamp(1rem, 2vw, 1.5rem); } } @media (max-width: 520px) { .aj-footer--premium .aj-footer__social-deco { display: none; } .aj-footer--premium .aj-footer__social-row { gap: 0.5rem; } } /* ── Page Hero (non-homepage) ── */ .aj-page-hero { position: relative; min-height: 25vh; display: flex; align-items: flex-end; padding: var(--header-height) var(--container-padding) 4rem; } .aj-page-hero--full { min-height: 70vh; } .aj-page-hero__bg { position: absolute; inset: 0; overflow: hidden; } .aj-page-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .aj-page-hero__content { position: relative; z-index: 10; max-width: var(--container-max); width: 100%; margin: 0 auto; } .aj-page-hero__content .aj-display { font-size: clamp(2.5rem, 5.5vw, 5rem); } .aj-page-hero__content .aj-body-lg { margin-top: 1.25rem; max-width: 640px; } /* ── About Sidebar (Core Purpose & Values) ── */ .aj-about-sidebar { display: flex; flex-direction: column; gap: 2rem; } .aj-about-sidebar__block { position: relative; padding-bottom: 1.5rem; } /* Decorative divider between blocks */ .aj-about-sidebar__block:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 2px; background: var(--color-accent, #c8a96e); border-radius: 1px; } .aj-about-sidebar__block:last-child { padding-bottom: 0; } .aj-about-sidebar__block .aj-h3 { margin-bottom: 0.75rem; } .aj-about-sidebar__block .aj-body { color: var(--color-text-muted); line-height: 1.7; } @media (max-width: 768px) { .aj-about-sidebar { gap: 2rem; } .aj-about-sidebar__block { padding-bottom: 2rem; } .aj-about-sidebar__block:not(:last-child)::after { width: 48px; } } /* ── Utility classes ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .aj-divider { width: 100%; height: 1px; background: var(--color-border); } .aj-spacer--sm { height: 2rem; } .aj-spacer--md { height: 4rem; } .aj-spacer--lg { height: 8rem; } /* ── Barba transition wrapper ── */ .barba-leave-active, .barba-enter-active { transition: opacity 0.4s ease; } /* ==================================================================== ADDITIONAL COMPONENT STYLES Missing class definitions for template elements ==================================================================== */ /* ── Header Extended ── */ .aj-header__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 2rem; width: 100%; } .aj-header__logo-spacer { flex: 0 0 220px; min-width: 220px; } .aj-header__logo a { text-decoration: none; color: var(--color-text); } .aj-header__nav { display: none; } @media (min-width: 1024px) { .aj-header__nav { display: flex; align-items: center; margin-left: auto; } } .aj-header__menu { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; } .aj-header__menu li a { color: var(--color-text-muted); text-decoration: none; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.3s; position: relative; } .aj-header__menu li a:hover, .aj-header__menu li.current-menu-item a { color: var(--color-text); } .aj-header__menu li a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--color-accent); transition: width 0.3s; } .aj-header__menu li a:hover::after, .aj-header__menu li.current-menu-item a::after { width: 100%; } .aj-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; margin-left: auto; } .aj-header__action-btn { background: none; border: none; color: var(--color-text-muted); cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color 0.3s, background 0.3s; } .aj-header__action-btn:hover { color: var(--color-text); background: rgba(255,255,255,0.05); } .aj-header__mobile-toggle { display: flex; } @media (max-width: 1023px) { .aj-header__mobile-toggle { position: relative; z-index: 210; } } @media (min-width: 1024px) { .aj-header__action-btn.aj-header__mobile-toggle { display: none; } } @media (max-width: 1023px) { .aj-header__inner { gap: 1rem; } .aj-header__logo-spacer { flex-basis: 170px; min-width: 170px; } } .aj-hamburger { display: flex; flex-direction: column; gap: 5px; width: 20px; } .aj-hamburger__line { display: block; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.3s, opacity 0.3s; } .aj-header__mobile-toggle.is-active .aj-hamburger__line:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); } .aj-header__mobile-toggle.is-active .aj-hamburger__line:nth-child(2) { opacity: 0; } .aj-header__mobile-toggle.is-active .aj-hamburger__line:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); } /* Mobile Nav Overlay */ .aj-header__nav.is-active { display: flex; position: fixed; top: var(--header-height); right: 0; bottom: 0; left: 0; width: 100%; height: calc(100vh - var(--header-height)); background: var(--color-bg); flex-direction: column; align-items: center; justify-content: center; z-index: 99; pointer-events: none; } .aj-header__nav.is-active .aj-header__menu { flex-direction: column; align-items: center; gap: 2.5rem; pointer-events: auto; } .aj-header__nav.is-active .aj-header__menu li a { font-size: 1.5rem; } .aj-header__mobile-close { display: none; } /* ── Carousel Extended ── */ .aj-hero-carousel { position: relative; height: 100vh; overflow: hidden; } .aj-carousel-main { height: 100%; width: 100%; } .aj-carousel-main .swiper-slide { position: relative; overflow: hidden; } .aj-carousel-nav { position: absolute; top: 50%; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; padding: 0 2rem; transform: translateY(-50%); pointer-events: none; } .aj-carousel-nav__prev, .aj-carousel-nav__next { pointer-events: auto; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s, border-color 0.3s; } .aj-carousel-nav__prev:hover, .aj-carousel-nav__next:hover { background: rgba(0,0,0,0.6); border-color: var(--color-accent); } /* Override Swiper default nav styling */ .aj-carousel-nav__prev.swiper-button-prev::after, .aj-carousel-nav__next.swiper-button-next::after { display: none; } .aj-carousel-pagination { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(255,255,255,0.7); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.1em; } .aj-carousel-slide__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%); z-index: 2; } .aj-carousel-slide__content { position: absolute; bottom: 6rem; left: 2rem; right: 2rem; z-index: 3; color: #fff; } @media (min-width: 768px) { .aj-carousel-slide__content { left: 4rem; right: 4rem; bottom: 8rem; } } .aj-carousel-slide__category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: 0.75rem; } .aj-carousel-slide__text { max-width: 600px; } .aj-carousel-slide__image { position: absolute; inset: 0; } .aj-carousel-slide__img { width: 100%; height: 100%; object-fit: cover; } .aj-carousel-slide__location, .aj-carousel-slide__year { font-size: 0.875rem; color: rgba(255,255,255,0.6); } .aj-carousel-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .aj-carousel-meta { display: flex; gap: 1.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.6); } .aj-carousel-underline { width: 60px; height: 2px; background: var(--color-accent); margin-top: 1rem; } /* Thumbs Strip */ .aj-carousel-thumbs { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 10; width: 70px; height: 300px; } @media (max-width: 768px) { .aj-carousel-thumbs { display: none; } } .aj-carousel-thumbs__slide { width: 70px; height: 50px; border-radius: 4px; overflow: hidden; opacity: 0.5; transition: opacity 0.3s; cursor: pointer; } .aj-carousel-thumbs__slide.swiper-slide-thumb-active { opacity: 1; outline: 2px solid var(--color-accent); outline-offset: 2px; } .aj-carousel-thumbs__image { width: 100%; height: 100%; object-fit: cover; } .aj-hero-carousel__empty { height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-text-muted); } /* ── Project Card Extended ── */ .aj-project-card__inner { display: block; position: relative; overflow: hidden; border-radius: 10px; } .aj-project-card__link { display: block; text-decoration: none; color: inherit; } .aj-project-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .aj-project-card:hover .aj-project-card__img { transform: scale(1.05); } .aj-project-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s; } .aj-project-card:hover .aj-project-card__overlay { opacity: 1; } .aj-project-card__overlay-content { display: none; position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; color: #fff; transform: translateY(10px); opacity: 0; transition: transform 0.4s, opacity 0.4s; } .aj-project-card:hover .aj-project-card__overlay-content { transform: translateY(0); opacity: 1; } .aj-project-card__category { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: 0.25rem; } /* ══════════════════════════════════════════════════ Project Detail — 15 / 85 Split Layout ══════════════════════════════════════════════════ */ .aj-project-split { padding: 0; margin: 0; min-height: calc(100vh - var(--header-height)); } .aj-project-split__grid { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; margin: 0; } .aj-project-split__grid > * { min-width: 0; } @media (min-width: 900px) { .aj-project-split__grid { grid-template-columns: 25% 75%; gap: 0; align-items: center; } } /* ── Sidebar (Column 1) ── */ .aj-project-split__sidebar { position: relative; width: 100%; padding: 20px; margin: 0; } @media (min-width: 900px) { .aj-project-split__sidebar { position: sticky; top: calc(var(--header-height, 72px) + 1.5rem); max-height: calc(100vh - var(--header-height, 72px) - 3rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } } .aj-project-split__sidebar-inner { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; } /* Back link */ .aj-project-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); margin-bottom: 1rem; } .aj-project-back:hover { color: var(--color-accent); } /* Category line */ .aj-project-split__categories { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin: 0.5rem 0; line-height: 1.4; } /* Title */ .aj-project-split__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.15; color: var(--color-text); margin: 0 0 0.25rem; } /* Location */ .aj-project-split__location { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--color-text-muted); margin: 0; } /* Divider */ .aj-project-split__divider { width: 100%; height: 1px; background: var(--color-border); margin: 0.75rem 0; } /* Meta details */ .aj-project-split__meta { display: flex; flex-direction: column; gap: 0; margin: 0; } .aj-project-split__meta-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); } .aj-project-split__meta-row:last-child { border-bottom: none; } .aj-project-split__meta-row dt { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); } .aj-project-split__meta-row dd { font-size: 0.875rem; font-weight: 500; color: var(--color-text); margin: 0; } /* Status badge */ .aj-project-split__status { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; } .aj-project-split__status--built { background: rgba(74, 222, 128, 0.15); color: #4ade80; } .aj-project-split__status--in-progress { background: rgba(250, 204, 21, 0.15); color: #facc15; } .aj-project-split__status--concept { background: rgba(147, 197, 253, 0.15); color: #93c5fd; } /* Narrative */ .aj-project-split__narrative { font-size: 0.875rem; line-height: 1.5; color: var(--color-text-body); } /* Body content */ .aj-project-split__body { font-size: 0.875rem; line-height: 1.5; color: var(--color-text-body); } .aj-project-split__body p { margin-bottom: 0.75rem; } /* Credits */ .aj-project-split__credits h3 { margin-bottom: 0.75rem; color: var(--color-text-muted); } .aj-project-split__credit-item { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.8125rem; } .aj-project-split__credit-role { color: var(--color-text-muted); } .aj-project-split__credit-name { color: var(--color-text); font-weight: 500; } /* ── Carousel (Column 2) ── */ .aj-project-split__carousel { position: relative; width: 100%; max-width: 100%; margin-top: 75px; padding: 0; } .aj-project-carousel { position: relative; width: 100%; max-width: 100%; /* height: 90vh; */ } /* Main carousel */ .aj-project-carousel__main { overflow: hidden; background: var(--color-bg-surface); width: 100%; max-width: 100%; height: 90vh; } .aj-project-carousel__main .swiper-wrapper { box-sizing: border-box; height: 100%; } .aj-project-carousel__main .swiper-slide { box-sizing: border-box; height: 100%; } .aj-carousel-slide { position: relative; cursor: zoom-in; max-width: 100%; height: 100%; } .aj-carousel-slide__img { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; background: var(--color-bg-surface); } .aj-carousel-slide__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); color: #fff; font-size: 0.75rem; letter-spacing: 0.03em; } /* Single-image project: no prev/next — avoids stray circular controls */ .aj-project-carousel--single .aj-carousel-nav { display: none !important; } /* Navigation arrows */ .aj-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), background var(--transition-fast); } .aj-project-carousel__main .aj-carousel-nav { display: flex; opacity: 1; padding: 0; pointer-events: auto; justify-content: center; } .aj-carousel-nav:hover { background: rgba(0, 0, 0, 0.75); } .aj-carousel-nav--prev { left: 1rem; right: auto; } .aj-carousel-nav--next { left: auto; right: 1rem; } .aj-carousel-nav.swiper-button-disabled { opacity: 0 !important; pointer-events: none; } /* Swiper 11 bundle sets non-square .swiper-button-prev/next (27×44px) + ::after font icon — ellipses + duplicate glyph */ .aj-project-carousel__main .aj-carousel-nav.swiper-button-prev, .aj-project-carousel__main .aj-carousel-nav.swiper-button-next { width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; margin-top: 0 !important; aspect-ratio: 1 / 1; } .aj-project-carousel__main .aj-carousel-nav::before, .aj-project-carousel__main .aj-carousel-nav::after, .aj-project-carousel__main .swiper-button-prev::before, .aj-project-carousel__main .swiper-button-prev::after, .aj-project-carousel__main .swiper-button-next::before, .aj-project-carousel__main .swiper-button-next::after { display: none !important; content: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 0 !important; line-height: 0 !important; pointer-events: none !important; } /* Progress bar (autoplay) */ .aj-carousel-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.15); z-index: 10; } .aj-carousel-progress__bar { height: 100%; width: 0%; background: var(--color-accent); transition: width 0.1s linear; } /* Slide counter */ .aj-carousel-counter { position: absolute; bottom: 0.75rem; left: 0.75rem; z-index: 10; display: flex; align-items: baseline; gap: 0.15rem; font-size: 0.75rem; font-weight: 500; font-family: var(--font-body); color: rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); padding: 0.3rem 0.6rem; border-radius: 4px; } .aj-carousel-counter__sep { opacity: 0.5; } /* Overlay pagination — thin white line + dots + active thumbnail */ .aj-carousel-dots { position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); z-index: 11; display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem, 3vw, 2rem); } .aj-carousel-dots::before { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; top: 50%; transform: translateY(-50%); height: 1px; background: rgba(255, 255, 255, 0.92); z-index: 0; pointer-events: none; } .aj-project-carousel__main.swiper-horizontal > .swiper-pagination-bullets, .aj-project-carousel__main .swiper-pagination-bullets.swiper-pagination-horizontal, .aj-project-carousel__main .swiper-pagination-custom, .aj-project-carousel__main .swiper-pagination-fraction { left: 50%; right: auto; width: auto; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; } .aj-carousel-dots .swiper-pagination-bullet { position: relative; z-index: 1; width: 8px; height: 8px; margin: 0 !important; opacity: 1; border-radius: 999px; background: #fff; border: none; box-sizing: border-box; flex-shrink: 0; transition: width 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), height 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); } .aj-carousel-dots .aj-carousel-dot-thumb { display: none; } .aj-carousel-dots .swiper-pagination-bullet-active { width: 52px; height: 52px; background: transparent; border: none; overflow: visible; transform: scale(1); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(201, 169, 110, 0.95), 0 0 18px 6px rgba(231, 196, 120, 0.65), 0 0 36px 10px rgba(231, 196, 120, 0.28); } .aj-carousel-dots .swiper-pagination-bullet-active .aj-carousel-dot-thumb { display: block; width: 100%; height: 100%; border-radius: 999px; border: 2px solid #fff; box-sizing: border-box; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Fullscreen button */ .aj-carousel-fullscreen { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 10; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgba(255, 255, 255, 0.8); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), background var(--transition-fast); } .aj-project-carousel__main:hover .aj-carousel-fullscreen { opacity: 1; } .aj-carousel-fullscreen:hover { background: rgba(0, 0, 0, 0.7); color: #fff; } /* Thumbnail strip */ .aj-project-carousel__thumbs { display: none; } .aj-project-carousel__thumbs .swiper-slide { width: 72px; opacity: 0.45; cursor: pointer; border-radius: 4px; overflow: hidden; border: 2px solid transparent; transition: opacity var(--transition-fast), border-color var(--transition-fast); } .aj-project-carousel__thumbs .swiper-slide:hover { opacity: 0.75; } .aj-project-carousel__thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--color-accent); } .aj-carousel-thumb__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } /* ── Mobile adjustments ── */ @media (max-width: 899px) { .aj-project-split { padding: 0; margin: 0; } .aj-project-split__grid { grid-template-columns: 1fr; gap: 0; padding: 0; margin: 0; } /* On mobile, show carousel first */ .aj-project-split__carousel { order: -1; margin: 0; padding: 0; } .aj-project-split__sidebar { padding: 20px; margin: 0; } .aj-project-carousel, .aj-project-carousel__main { height: 70vh; } .aj-project-carousel__main .swiper-slide, .aj-carousel-slide, .aj-carousel-slide__img { height: 100%; } .aj-carousel-nav { opacity: 1; width: 34px; height: 34px; } .aj-carousel-dots { bottom: 0.7rem; gap: 1rem; } .aj-carousel-dots .swiper-pagination-bullet { width: 7px; height: 7px; } .aj-carousel-dots .swiper-pagination-bullet-active { width: 40px; height: 40px; } .aj-carousel-fullscreen { opacity: 1; } } /* Project detail only: key off Barba container so body classes do not stick after transitions */ body:has(#main[data-barba-namespace="project"]) .aj-section.aj-related-projects, body:has(#main[data-barba-namespace="project"]) .aj-footer { display: none !important; } /* Single project: hide browser scrollbar only (scroll still works; internal overflow unchanged) */ html:has(#main[data-barba-namespace="project"]), body:has(#main[data-barba-namespace="project"]) { scrollbar-width: none; -ms-overflow-style: none; } html:has(#main[data-barba-namespace="project"])::-webkit-scrollbar, body:has(#main[data-barba-namespace="project"])::-webkit-scrollbar { width: 0; height: 0; background: transparent; } /* ══════════════════════════════════════════════════ Project Detail — Legacy (kept for backward compat) ══════════════════════════════════════════════════ */ /* ── Project Detail ── */ .aj-project-hero { position: relative; width: 100%; max-height: 80vh; overflow: hidden; } .aj-project-hero__image { width: 100%; margin: 0; } .aj-project-hero__image img { width: 100%; height: auto; max-height: 80vh; object-fit: cover; display: block; } .aj-project-header { padding-top: 3rem; } .aj-project-header__category { color: var(--color-accent); margin-bottom: 1rem; display: block; } .aj-project-header__location { color: var(--color-text-muted); margin-top: 0.5rem; } .aj-project-meta { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .aj-project-meta { flex-direction: row; flex-wrap: wrap; gap: 2rem; } } .aj-project-meta__item { min-width: 120px; } .aj-project-meta__item .aj-overline { color: var(--color-text-muted); margin-bottom: 0.25rem; display: block; } .aj-project-narrative { border-top: 1px solid var(--color-border); } .aj-project-narrative__content { max-width: 650px; } .aj-project-body__content { max-width: 800px; margin: 0 auto; } .aj-project-body__content img { width: 100%; height: auto; border-radius: 4px; margin: 2rem 0; } .aj-project-credits { border-top: 1px solid var(--color-border); } .aj-credits-grid { margin-top: 2rem; } .aj-credit-item .aj-overline { color: var(--color-text-muted); margin-bottom: 0.25rem; } .aj-related-projects { border-top: 1px solid var(--color-border); } .aj-related-grid { margin-top: 2rem; } /* ── Gallery Extended ── */ .aj-gallery { position: relative; } .aj-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .aj-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } .aj-gallery-item { position: relative; overflow: hidden; border-radius: 4px; cursor: pointer; margin: 0; } .aj-gallery-item__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .aj-gallery-item:hover .aj-gallery-item__img { transform: scale(1.05); } .aj-gallery-item__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem 1rem; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: #fff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .aj-gallery-tabs { margin-bottom: 2rem; } .aj-gallery-tabs__nav { display: flex; gap: 1rem; flex-wrap: wrap; } .aj-gallery-tabs__btn { background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); padding: 0.5rem 1.25rem; border-radius: 100px; cursor: pointer; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s; } .aj-gallery-tabs__btn:hover, .aj-gallery-tabs__btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* Lightbox */ .aj-gallery-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; } .aj-gallery-lightbox.is-active { display: flex; } .aj-lightbox-swiper { width: 90%; height: 90%; } .aj-lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 10; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .aj-lightbox-backdrop { position: absolute; inset: 0; z-index: -1; } .aj-lightbox-pagination { text-align: center; color: rgba(255,255,255,0.6); font-size: 0.875rem; margin-top: 1rem; } .aj-lightbox-next, .aj-lightbox-prev { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; } .aj-lightbox-prev { left: 1rem; } .aj-lightbox-next { right: 1rem; } /* ── Team Extended ── */ /* .aj-team-grid is a wrapper; the inner .aj-grid--4 handles the grid layout */ .aj-team-grid { width: 100%; } .aj-team-main-section { /* padding-top: clamp(1rem, 2vw, 2rem); */ padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem); } .aj-team-main { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); max-width: 980px; margin: 5rem auto 0; } .aj-team-main__media { width: 100%; } .aj-team-main__image { position: relative; width: 100%; height: 400px; overflow: hidden; } .aj-team-main__img { width: 100%; height: 100%; object-fit: cover; } .aj-team-main__image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: transparent; } .aj-team-main__image .aj-team-main__img { filter: grayscale(100%); transition: filter 0.4s ease, transform 0.6s var(--ease-out-expo); } .aj-team-main__image::after { background: var(--color-bg-overlay); opacity: 0.2; } .aj-team-main__name { margin: 0; } .aj-team-main__role { margin-top: 0.4rem; } .aj-team-main__description { margin-top: 1rem; color: var(--color-text-body); line-height: 1.7; max-width: 58ch; } .aj-team-main__description p + p { margin-top: 0.75rem; } .aj-team-grid--people { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.6vw, 2.4rem); } .aj-team-primary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; gap: clamp(0.8rem, 2vw, 1.5rem); } .aj-team-primary-grid .aj-team-card__content { width: min(100%, 10rem); } .aj-team-remaining-grid { margin-top: 0; } .aj-team-card__inner { display: block; } .aj-team-card__link { display: block; text-decoration: none; color: inherit; } .aj-team-card__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; } .aj-team-card__content { padding-top: 1rem; } /* ── Team/Leadership grids: circular portrait + overlapping info panel ── */ :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card { text-align: left; overflow: visible; } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__inner { position: relative; z-index: 1; width: 100%; margin-inline: auto; overflow: visible; } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__image { aspect-ratio: 1; width: 100%; max-width: 100%; margin-bottom: 0; border-radius: 50%; border: none; overflow: hidden; } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__image picture { display: block; width: 100%; height: 100%; } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__image img, :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; filter: grayscale(100%); transition: filter 0.4s ease, transform 0.6s var(--ease-out-expo); } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card:hover .aj-team-card__image img, :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card:hover .aj-team-card__img { filter: grayscale(100%); transform: scale(1.04); } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content { position: absolute; left: clamp(-0.5rem, -6%, -0.125rem); bottom: clamp(0.25rem, 5vw, 0.75rem); right: auto; max-width: calc(100% - 0.25rem); padding: clamp(0.4rem, 2.2vw, 0.65rem) clamp(0.45rem, 2vw, 0.7rem); padding-top: clamp(0.38rem, 2vw, 0.55rem); background: var(--team-card-panel-bg); color: var(--team-card-panel-text); text-align: left; z-index: 3; border-radius: 0; border: var(--team-card-panel-border); box-shadow: none; } .aj-team-grid .aj-team-card__content { width: min(100%, 11.25rem); } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content .aj-h3, :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content .aj-h2 { margin: 0; font-family: var(--font-body); font-size: clamp(0.7rem, 2.1vw, 0.875rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--team-card-panel-text); } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content .aj-link { position: relative; z-index: 4; color: var(--team-card-panel-text); text-decoration: none; } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content .aj-link:hover { color: var(--color-accent); opacity: 1; } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__role { margin-top: clamp(0.1rem, 0.8vw, 0.2rem); font-size: clamp(0.58rem, 1.65vw, 0.7rem); font-weight: 400; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--team-card-role-text); } @media (max-width: 768px) { .aj-team-main { grid-template-columns: 1fr; gap: 1rem; max-width: 520px; margin: 4.25rem auto 0; } .aj-team-main__media { max-width: min(100%, 320px); margin: 0 auto; } .aj-team-main__image { height: clamp(240px, 65vw, 360px); } .aj-team-main__content { text-align: left; } .aj-team-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content { left: clamp(-0.35rem, -4vw, -0.1rem); bottom: clamp(0.2rem, 4vw, 0.5rem); } .aj-team-grid .aj-team-card__content, .aj-leadership-grid .aj-team-card__content { width: min(100%, 10rem); } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content .aj-h3, :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__content .aj-h2 { font-size: clamp(0.68rem, 3.2vw, 0.8rem); } :is(.aj-team-grid, .aj-leadership-grid) .aj-team-card__role { font-size: clamp(0.55rem, 2.8vw, 0.65rem); } } @media (max-width: 480px) { .aj-team-main { margin: 3.5rem auto 0; } } @media (max-width: 380px) { .aj-team-main__image { height: clamp(220px, 72vw, 300px); } .aj-team-primary-grid { grid-template-columns: 1fr; max-width: 320px; } .aj-team-grid .aj-team-card__content, .aj-leadership-grid .aj-team-card__content { width: min(100%, 9rem); padding: 0.35rem 0.4rem; } } @media (min-width: 769px) and (max-width: 1024px) { .aj-leadership-grid .aj-team-card__content { width: min(100%, 11.25rem); min-height: unset; } .aj-team-main { margin: 5.5rem auto 0; } .aj-project-grid-container { margin-top: 5.5rem; } .aj-contact-main-grid { margin-top: 5.5rem; } } @media (min-width: 1025px) and (max-width: 1199px) { .aj-team-main { margin: 6.25rem auto 0; } .aj-project-grid-container { margin-top: 6.25rem; } .aj-contact-main-grid { margin-top: 6.25rem; } } /* ── Leadership only (4-up grid / ≥1025px): larger panel, portrait offset ── */ @media (min-width: 1025px) { .aj-leadership-grid .aj-team-card__content { width: min(100%, calc(11.25rem + 30px)); min-height: calc(4rem + 10px); padding: 20px; box-sizing: border-box; } .aj-leadership-grid .aj-team-card__content .aj-h3, .aj-leadership-grid .aj-team-card__content .aj-h2 { font-size: clamp(0.78rem, 2.35vw, 1rem); } .aj-leadership-grid .aj-team-card__image { width: calc(100% + 40px); max-width: calc(100% + 40px); margin-left: -20px; } } /* ── Form Extended ── */ .aj-form__group { margin-bottom: 1.5rem; } .aj-form__label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.5rem; } .aj-form__input, .aj-form__select, .aj-form__textarea { width: 100%; padding: 0.75rem 1rem; background: transparent; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.3s; } .aj-form__input:focus, .aj-form__select:focus, .aj-form__textarea:focus { outline: none; border-color: var(--color-accent); } .aj-form__textarea { min-height: 150px; resize: vertical; } .aj-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .aj-form__error { color: #e74c3c; font-size: 0.75rem; margin-top: 0.25rem; } .aj-form__success { background: rgba(39, 174, 96, 0.1); border: 1px solid rgba(39, 174, 96, 0.3); color: #27ae60; padding: 1.5rem; border-radius: 4px; text-align: center; } /* ── News Section ── */ .aj-news-section .aj-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .aj-news-card { overflow: hidden; } .aj-news-card__image { overflow: hidden; border-radius: 4px; margin-bottom: 1rem; } .aj-news-card__image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.6s; } .aj-news-card:hover .aj-news-card__image img { transform: scale(1.05); } .aj-news-card__content .aj-caption { color: var(--color-text-muted); margin-bottom: 0.5rem; } .aj-news-card__content .aj-h3 a { text-decoration: none; color: var(--color-text); transition: color 0.3s; } .aj-news-card__content .aj-h3 a:hover { color: var(--color-accent); } /* ── Stats Extended ── */ .aj-stats-section { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .aj-stats-bar--large { display: flex; justify-content: center; gap: 4rem; text-align: center; } .aj-stat--large .aj-stat__number { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; line-height: 1; color: var(--color-text); } .aj-stat--large .aj-stat__label { display: block; margin-top: 0.5rem; color: var(--color-text-muted); } /* ── Footer Extended ── */ .aj-footer__grid { padding: 3rem 0; } .aj-footer__desc { color: var(--color-text-muted); margin-top: 1rem; max-width: 300px; } .aj-footer__menu { list-style: none; margin: 0; padding: 0; } .aj-footer__menu li { margin-bottom: 0.75rem; } .aj-footer__menu li a { color: var(--color-text-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.3s; } .aj-footer__menu li a:hover { color: var(--color-text); } .aj-footer__contact-list { list-style: none; padding: 0; margin: 0; } .aj-footer__contact-list li { margin-bottom: 0.75rem; } .aj-footer__social { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; } .aj-footer__social a { color: var(--color-text-muted); transition: color 0.3s; } .aj-footer__social a:hover { color: var(--color-accent); } .aj-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--color-border); } /* ── Search Overlay Extended ── */ .aj-search-loading { text-align: center; color: var(--color-text-muted); padding: 2rem; } .aj-search-error { text-align: center; color: #e74c3c; padding: 2rem; } .aj-search-no-results { text-align: center; color: var(--color-text-muted); padding: 2rem; } .aj-search-section { margin-bottom: 2rem; } .aj-search-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: 1rem; } .aj-search-list { list-style: none; padding: 0; margin: 0; } .aj-search-item { border-bottom: 1px solid rgba(255,255,255,0.05); } .aj-search-link { display: block; padding: 1rem 0; text-decoration: none; color: var(--color-text); transition: color 0.3s; } .aj-search-link:hover { color: var(--color-accent); } .aj-search-item-title { font-weight: 600; margin-bottom: 0.25rem; } .aj-search-item-excerpt, .aj-search-item-role { font-size: 0.875rem; color: var(--color-text-muted); } /* ── Filter Bar Extended ── */ .aj-filter-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* ── Divider ── */ .aj-divider { width: 100%; height: 1px; background: var(--color-border); margin: 2rem 0; } /* ── Overline Typography ── */ .aj-overline { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500; } /* ── Button Variants ── */ .aj-btn--outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); padding: 0.75rem 2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .aj-btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ── Link Styles ── */ .aj-link { color: var(--color-text-muted); text-decoration: none; transition: color 0.3s; } .aj-link:hover { color: var(--color-accent); } .aj-link--social { display: flex; align-items: center; } /* ── Page Hero (for archive/inner pages) ── */ .aj-page-hero__title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .aj-page-hero__subtitle { font-size: 1.125rem; color: var(--color-text-muted); margin-top: 1rem; max-width: 600px; } /* ── Portfolio Grid ── */ .aj-portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } @media (min-width: 688px) { .aj-portfolio-grid { grid-template-columns: repeat(3, 1fr); } } .aj-project-grid-container { margin-top: 7rem; } @media (max-width: 768px) { .aj-project-grid-container { margin-top: 4.25rem; } } @media (max-width: 480px) { .aj-project-grid-container { margin-top: 0.5rem; } } @media (min-width: 768px) { .aj-portfolio-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 899px) { .aj-portfolio-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .aj-portfolio-grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1920px) { .aj-portfolio-grid { grid-template-columns: repeat(6, 1fr); } .aj-project-grid-container { margin-top: 7.75rem; } .aj-contact-main-grid { margin-top: 7.75rem; } .aj-team-main { margin: 7.75rem auto 0; } } @media (min-width: 2560px) { .aj-portfolio-grid { grid-template-columns: repeat(7, 1fr); } .aj-project-grid-container { margin-top: 8.25rem; } .aj-contact-main-grid { margin-top: 8.25rem; } .aj-team-main { margin: 8.25rem auto 0; } } @media (min-width: 1200px) { .aj-project-card__overlay-content .aj-h3 { font-size: 1rem; } } /* ── Filter Controls (flex row for buttons + search) ── */ .aj-filter__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: center; } /* ── Portfolio Search ── */ .aj-filter__search { position: relative; flex-shrink: 0; margin-left: auto; } .aj-filter__search-input { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); padding: 0.5rem 2.25rem 0.5rem 1rem; font-size: 0.8125rem; font-family: var(--font-body); border-radius: 2px; width: 200px; transition: border-color var(--transition-fast), width var(--transition-base); } .aj-filter__search-input:focus { outline: none; border-color: var(--color-accent); width: 260px; } .aj-filter__search-input::placeholder { color: var(--color-text-muted); } .aj-filter__search-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; width: 14px; height: 14px; } /* ── Segmented Control Filter ── */ .aj-filter-bar[data-sticky-filter] { position: sticky; top: var(--header-height, 72px); z-index: 90; background: var(--color-bg); transition: transform 0.4s var(--ease-out-expo), box-shadow var(--transition-fast), background var(--transition-fast); padding: 1rem 0; } .aj-filter-bar[data-sticky-filter].is-past-grid { transform: translateY(-100%); pointer-events: none; } .aj-filter-bar[data-sticky-filter].is-stuck { background: var(--color-bg-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--color-border); } /* Hide mobile filter on desktop */ .aj-filter-bar--mobile { display: none; } .aj-segmented { display: flex; align-items: center; position: relative; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 3px; gap: 2px; } .aj-segmented__track { position: absolute; inset: 3px; pointer-events: none; z-index: 0; } .aj-segmented__indicator { position: absolute; height: calc(100% - 0px); background: var(--color-accent); border-radius: 8px; transition: left 0.35s var(--ease-out-expo), width 0.35s var(--ease-out-expo); top: 0; left: 0; width: 0; opacity: 0; } .aj-segmented__indicator.is-ready { opacity: 1; } .aj-segmented__btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; font-family: var(--font-body); letter-spacing: 0.02em; color: var(--color-text-muted); background: transparent; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast); } .aj-segmented__btn:hover { color: var(--color-text); } .aj-segmented__btn--active { color: var(--color-bg); } .aj-segmented__btn--active .aj-segmented__count { background: rgba(0, 0, 0, 0.2); color: var(--color-bg); } .aj-segmented__label { pointer-events: none; } .aj-segmented__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; font-size: 0.65rem; font-weight: 600; line-height: 1; color: var(--color-text-muted); background: var(--color-bg-elevated); border-radius: 999px; transition: background var(--transition-fast), color var(--transition-fast); } /* ── More Dropdown ── */ .aj-segmented__more { position: relative; z-index: 1; } .aj-segmented__btn--more { border-radius: 8px; } .aj-segmented__btn--more[aria-expanded="true"] { color: var(--color-text); background: var(--color-bg-elevated); } .aj-segmented__chevron { transition: transform var(--transition-fast); flex-shrink: 0; } .aj-segmented__btn--more[aria-expanded="true"] .aj-segmented__chevron { transform: rotate(180deg); } .aj-segmented__dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px; padding: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); } .aj-segmented__dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .aj-segmented__dropdown-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.55rem 0.85rem; font-size: 0.8125rem; font-weight: 500; font-family: var(--font-body); color: var(--color-text-muted); background: transparent; border: none; border-radius: 7px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); text-align: left; } .aj-segmented__dropdown-item:hover { background: var(--color-bg-surface); color: var(--color-text); } .aj-segmented__dropdown-item.is-active { background: var(--color-accent); color: var(--color-bg); } .aj-segmented__dropdown-item.is-active .aj-segmented__count { background: rgba(0, 0, 0, 0.2); color: var(--color-bg); } /* ── Mobile Collapsible Dropdown Filter ── */ .aj-mobile-filter { position: relative; width: 100%; } .aj-mobile-filter__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; transition: border-color var(--transition-fast); } .aj-mobile-filter__trigger:hover { border-color: var(--color-border-hover); } .aj-mobile-filter__trigger[aria-expanded="true"] { border-color: var(--color-accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .aj-mobile-filter__chevron { transition: transform var(--transition-fast); flex-shrink: 0; } .aj-mobile-filter__trigger[aria-expanded="true"] .aj-mobile-filter__chevron { transform: rotate(180deg); } .aj-mobile-filter__panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-elevated); border: 1px solid var(--color-accent); border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 4px; max-height: 0; overflow: hidden; opacity: 0; z-index: 100; transition: max-height 0.35s var(--ease-out-expo), opacity var(--transition-fast); } .aj-mobile-filter__panel.is-open { max-height: 400px; overflow-y: auto; opacity: 1; } .aj-mobile-filter__option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.65rem 0.85rem; font-size: 0.8125rem; font-weight: 500; font-family: var(--font-body); color: var(--color-text-muted); background: transparent; border: none; border-radius: 7px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); text-align: left; } .aj-mobile-filter__option:hover { background: var(--color-bg-surface); color: var(--color-text); } .aj-mobile-filter__option--active { background: var(--color-accent); color: var(--color-bg); } .aj-mobile-filter__option--active .aj-segmented__count { background: rgba(0, 0, 0, 0.2); color: var(--color-bg); } /* ── Responsive: show mobile, hide desktop ── */ @media (max-width: 767px) { .aj-filter-bar[data-sticky-filter] { display: none; } .aj-filter-bar--mobile { display: block; position: sticky; top: var(--header-height, 72px); z-index: 90; background: var(--color-bg); padding: 0.75rem 0; transition: transform 0.4s var(--ease-out-expo); } .aj-filter-bar--mobile.is-past-grid { transform: translateY(-100%); pointer-events: none; } .aj-filter-bar--mobile .aj-filter__controls { flex-direction: column; gap: 0.75rem; } .aj-filter-bar--mobile .aj-filter__search { margin-left: 0; width: 100%; } .aj-filter-bar--mobile .aj-filter__search-input { width: 100%; } } /* ── Card Thumbnail Cycling ── */ .aj-project-card__thumbs { position: absolute; inset: 0; z-index: 1; } .aj-project-card__thumb { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } .aj-project-card__thumb.is-active { opacity: 1; } .aj-project-card__thumb img { width: 100%; height: 100%; object-fit: cover; } /* Thumbnail dots indicator */ .aj-project-card__dots { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.35rem; z-index: 4; opacity: 0; transition: opacity var(--transition-fast); } .aj-project-card:hover .aj-project-card__dots { opacity: 1; } .aj-project-card__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: background var(--transition-fast); } .aj-project-card__dot.is-active { background: #fff; } /* ── No Results ── */ .aj-no-results { text-align: center; padding: 4rem 2rem; color: var(--color-text-muted); } /* ═══════════════════════════════════════════════════ HOMEPAGE – Full-Screen Image Gallery Ken Burns animations, auto-advancing slides ═══════════════════════════════════════════════════ */ /* Fullscreen body for homepage */ body.home-fullscreen { overflow: hidden; } /* Hide footer on fullscreen homepage */ body.home-fullscreen .aj-footer { display: none; } /* Homepage is light-only — hide all theme toggles */ body.home-fullscreen .aj-theme-toggle { display: none !important; } /* Transparent header on homepage */ .aj-header--transparent { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } .aj-header--transparent .aj-header__menu li a { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .aj-header--transparent .aj-header__menu li a:hover, .aj-header--transparent .aj-header__menu li.current-menu-item a { color: #fff; } .aj-header--transparent .aj-header__action-btn, .aj-header--transparent .aj-hamburger__line { color: #fff !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); } .aj-header--transparent .aj-header__action-btn svg { stroke: #fff; } .aj-header--transparent .aj-header__action-btn:hover { color: #fff !important; background: rgba(255,255,255,0.15); } /* ── Header hiding on homepage (desktop/tablet) ── */ @media (min-width: 769px) { .aj-header--home-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } } @media (max-width: 768px) { .aj-header--home-hidden { transform: none; opacity: 1; pointer-events: auto; } } /* ── Hide traditional header on inner pages (desktop) ── */ @media (min-width: 769px) { .aj-header--inner { display: none; } } @media (max-width: 768px) { .aj-header--inner { display: flex; } } /* ── Header container-fluid (full-width inner area; horizontal inset comes from .aj-header padding) ── */ .aj-header__container-fluid { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* ── Desktop Header Redesign (inner pages) — 12-col row: 3 + 5 + 2 + 2 ── */ @media (min-width: 1024px) { .aj-header--inner { display: block; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent); transition: transform 0.4s var(--ease-out-expo), background-color var(--transition-base), backdrop-filter var(--transition-base), border-color var(--transition-fast); } .aj-header--inner.has-shadow { background: var(--color-bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--color-border); } .aj-header--inner .aj-header__nav, .aj-header--inner .aj-theme-toggle, .aj-header--inner .aj-search-toggle, .aj-header--inner .aj-scatter-trigger, .aj-header--inner .aj-header__mobile-toggle { display: none; } .aj-header--inner .aj-header__actions { display: none; } .aj-header--inner .aj-header__inner { height: var(--header-height); gap: 0; } .aj-header__row { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: clamp(0.75rem, 1.5vw, 1.5rem); } .aj-header__col--3 { grid-column: span 3; min-height: 1px; } .aj-header__col--5 { grid-column: span 5; } .aj-header__col--2 { grid-column: span 2; } .aj-header__col--meta { min-width: 0; justify-self: stretch; } .aj-header__col--categories { min-width: 0; justify-self: end; } .aj-header__col--menu { min-width: 0; display: flex; justify-content: flex-end; align-items: center; } .aj-header__desktop-meta-grid { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; column-gap: 1rem; min-width: 0; width: 100%; justify-items: start; text-align: left; } .aj-header__desktop-title-wrap { min-width: 0; } .aj-header__desktop-title { display: inline-block; margin-left: -115px; color: var(--color-text); font-size: 2rem; line-height: 1; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; } .aj-header__desktop-desc-wrap { min-width: 0; display: grid; grid-template-columns: 1px minmax(0, 1fr); align-items: center; column-gap: 1rem; width: 100%; } .aj-header__desktop-divider { display: block; width: 1px; height: 2rem; background: var(--color-border); } .aj-header__desktop-desc { margin: 0; color: var(--color-text-body); font-size: 0.9rem; line-height: 1.35; max-width: 48ch; } .aj-header-categories { position: relative; width: 100%; max-width: 170px; } .aj-header-categories__trigger { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.85rem; color: var(--color-text); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: 2px; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .aj-header-categories__trigger:hover, .aj-header-categories:focus-within .aj-header-categories__trigger { border-color: var(--color-border-hover); } .aj-header-categories__trigger .aj-icon { width: 14px; height: 14px; flex-shrink: 0; } .aj-header-categories__panel { position: absolute; top: calc(100% + 6px); right: 0; width: min(280px, 80vw); max-height: 320px; overflow: auto; display: grid; gap: 2px; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-elevated); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 120; } .aj-header-categories:hover .aj-header-categories__panel, .aj-header-categories:focus-within .aj-header-categories__panel, .aj-header-categories.is-open .aj-header-categories__panel { opacity: 1; visibility: visible; transform: translateY(0); } .aj-header-categories:hover .aj-header-categories__trigger .aj-icon, .aj-header-categories:focus-within .aj-header-categories__trigger .aj-icon, .aj-header-categories.is-open .aj-header-categories__trigger .aj-icon { transform: rotate(180deg); } .aj-header-categories__option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem; border: none; border-radius: 2px; text-align: left; background: transparent; color: var(--color-text-muted); font-size: 0.8125rem; font-family: var(--font-body); cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); } .aj-header-categories__option:hover, .aj-header-categories__option--active { color: var(--color-text); background: var(--color-bg-surface); } .aj-header-categories__count { font-size: 0.7rem; color: inherit; opacity: 0.85; } } @media (max-width: 768px) { .aj-header__row { display: none; } } /* ── Legacy gallery wrapper (kept for backwards compat) ── */ .aj-home-gallery { position: fixed; inset: 0; width: 100%; height: 100vh; overflow: hidden; background: #000; } /* ── 2D Directional Image Grid ── */ .aj-home-grid { position: fixed; inset: 0; overflow: hidden; background: var(--color-bg); } /* ── Header-aligned page cleanup ── */ [data-barba-namespace="projects"] .aj-page-hero, [data-barba-namespace="projects"] .aj-filter-bar { display: none !important; } /* Offset below fixed header (replaces removed projects search strip). */ [data-barba-namespace="projects"] .aj-main > .aj-section:first-of-type { padding-top: calc(var(--header-height) + 1rem); } @media (max-width: 767px) { [data-barba-namespace="projects"] .aj-main > .aj-section:first-of-type { padding-top: calc(var(--header-height) + 0.75rem); } } [data-barba-namespace="people"] .aj-page-hero { display: none !important; min-height: 0; padding: 0; } [data-barba-namespace="contact"] .aj-contact-info__header { display: none !important; } [data-barba-namespace="contact"] .aj-contact-form-wrapper { margin-top: 0; } .aj-home-grid__slides { position: relative; width: 100%; height: 100%; } .aj-home-grid__slide { position: absolute; inset: 0; opacity: 0; z-index: 1; will-change: transform, opacity; pointer-events: none; } .aj-home-grid__slide--active { opacity: 1; z-index: 2; } .aj-home-grid__image { position: absolute; inset: 0; width: 100%; height: 100%; } .aj-home-grid__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; } /* Light overlay gradient for homepage (subtle, not heavy dark) */ .aj-home-grid__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.12) 80%, rgba(0,0,0,0.30) 100% ); z-index: 3; pointer-events: none; } .aj-home-grid__empty { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-text-muted); } .aj-home-gallery__slides { position: relative; width: 100%; height: 100%; } /* Slide image */ .aj-home-slide__image { position: absolute; inset: -10%; width: 120%; height: 120%; } .aj-home-slide__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; } /* Dark overlay gradient — softened for immersive image visibility */ .aj-home-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.30) 75%, rgba(0,0,0,0.55) 100% ); z-index: 3; pointer-events: none; } /* Slide text overlay */ .aj-home-slide__info { position: absolute; bottom: 100px; left: var(--container-padding); z-index: 5; text-decoration: none; color: #fff; opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; } .aj-home-slide--active .aj-home-slide__info { opacity: 1; transform: translateY(0); } .aj-home-slide__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500; color: #fff; letter-spacing: -0.01em; line-height: 1.2; } .aj-home-slide__location { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; text-transform: uppercase; } /* Slide counter */ .aj-home-gallery__counter { position: fixed; bottom: 40px; right: var(--container-padding); z-index: 20; font-family: var(--font-display); font-size: 0.875rem; color: rgba(255,255,255,0.7); letter-spacing: 0.15em; display: flex; align-items: center; gap: 0.35rem; } .aj-home-gallery__current { color: #fff; font-weight: 500; } /* Progress bar */ .aj-home-gallery__progress { position: fixed; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.1); z-index: 20; } .aj-home-gallery__progress-bar { height: 100%; width: 0%; background: var(--color-accent); transition: none; } .aj-home-gallery__progress-bar.is-animating { transition: width linear; } /* Empty state */ .aj-home-gallery__empty { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-text-muted); } /* Copyright bar */ .aj-home-copyright { position: fixed; bottom: 14px; left: var(--container-padding); z-index: 20; display: flex; align-items: center; gap: 1.5rem; font-size: 0.6875rem; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; transition: opacity 0.4s ease; } .aj-home-copyright__dev { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; } .aj-home-copyright__dev:hover { color: var(--color-accent); } /* Hide copyright when content is hidden */ .aj-home--content-hidden .aj-home-copyright { opacity: 0; pointer-events: none; } /* ── Ken Burns Keyframe Animations ── */ .aj-home-slide--active .aj-home-slide__image { animation-duration: 12s; animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); animation-fill-mode: forwards; } .aj-home-slide--active[data-animation="zoom-in"] .aj-home-slide__image { animation-name: kenburns-zoom-in; } .aj-home-slide--active[data-animation="zoom-out"] .aj-home-slide__image { animation-name: kenburns-zoom-out; } .aj-home-slide--active[data-animation="pan-left"] .aj-home-slide__image { animation-name: kenburns-pan-left; } .aj-home-slide--active[data-animation="pan-right"] .aj-home-slide__image { animation-name: kenburns-pan-right; } .aj-home-slide--active[data-animation="pan-up"] .aj-home-slide__image { animation-name: kenburns-pan-up; } .aj-home-slide--active[data-animation="pan-down"] .aj-home-slide__image { animation-name: kenburns-pan-down; } @keyframes kenburns-zoom-in { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.08) translate(-0.5%, -0.5%); } } @keyframes kenburns-zoom-out { 0% { transform: scale(1.08) translate(-0.5%, -0.5%); } 100% { transform: scale(1) translate(0, 0); } } @keyframes kenburns-pan-left { 0% { transform: scale(1.03) translate(2%, 0); } 100% { transform: scale(1.05) translate(-2%, 0); } } @keyframes kenburns-pan-right { 0% { transform: scale(1.05) translate(-2%, 0); } 100% { transform: scale(1.03) translate(2%, 0); } } @keyframes kenburns-pan-up { 0% { transform: scale(1.03) translate(0, 2%); } 100% { transform: scale(1.05) translate(0, -2%); } } @keyframes kenburns-pan-down { 0% { transform: scale(1.05) translate(0, -2%); } 100% { transform: scale(1.03) translate(0, 2%); } } /* ── 4-Directional Arrow Navigation ── */ .aj-home-nav { position: fixed; inset: 0; z-index: 150; pointer-events: none; } .aj-home-nav__btn { pointer-events: auto; position: absolute; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; color: rgba(255,255,255,0.75); cursor: pointer; transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 1; } .aj-home-nav__btn:hover { background: none; border-color: transparent; color: #fff; opacity: 1; } .aj-home-nav__btn:active { opacity: 0.8; } .aj-home-nav__btn svg { width: 48px; height: 48px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); } /* Arrow positions */ .aj-home-nav__btn--up { top: 1.5rem; left: 50%; transform: translateX(-50%); } .aj-home-nav__btn--up:hover { transform: translateX(-50%) translateY(-8px) scale(1.1); } .aj-home-nav__btn--down { bottom: 1.5rem; left: 50%; transform: translateX(-50%); } .aj-home-nav__btn--down:hover { transform: translateX(-50%) translateY(8px) scale(1.1); } .aj-home-nav__btn--left { left: 1rem; top: 50%; transform: translateY(-50%); } .aj-home-nav__btn--left:hover { transform: translateY(-50%) translateX(-8px) scale(1.1); } .aj-home-nav__btn--right { right: 1rem; top: 50%; transform: translateY(-50%); } .aj-home-nav__btn--right:hover { transform: translateY(-50%) translateX(8px) scale(1.1); } /* Mobile: scale back arrow buttons */ @media (max-width: 768px) { .aj-home-nav__btn { width: 56px; height: 56px; } .aj-home-nav__btn svg { width: 36px; height: 36px; } } /* ── Cinematic Crossfade + Scale Transitions ── */ .aj-home-slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transform: scale(1.04); transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .aj-home-slide--active { opacity: 1; z-index: 2; transform: scale(1); } /* Exit: scale down + fade out */ .aj-home-slide--exit-left, .aj-home-slide--exit-right, .aj-home-slide--exit-up, .aj-home-slide--exit-down { opacity: 0; z-index: 3; transform: scale(0.97); } /* Enter-from: pre-scaled, will animate to scale(1) */ .aj-home-slide--enter-from-left, .aj-home-slide--enter-from-right, .aj-home-slide--enter-from-up, .aj-home-slide--enter-from-down { transform: scale(1.04); opacity: 0; } /* Mobile adjustments for homepage */ @media (max-width: 768px) { .aj-home-slide__info { bottom: 80px; left: 1.5rem; right: 1.5rem; } .aj-home-gallery__counter { right: 1.5rem; bottom: 30px; } .aj-home-copyright { left: 1.5rem; flex-direction: column; align-items: flex-start; gap: 0.25rem; bottom: 10px; font-size: 0.625rem; } .aj-home-nav__btn { width: 44px; height: 44px; } .aj-home-nav__btn svg { width: 28px; height: 28px; } .aj-home-nav__btn--left { left: 1rem; } .aj-home-nav__btn--right { right: 1rem; } .aj-home-nav__btn--up { top: calc(var(--header-height) + 16px); } .aj-home-nav__btn--down { bottom: 48px; } } /* ═══════════════════════════════════════════════════ PHASE 1 & 2 COMPLETION – Additional Page Styles About, Contact, Privacy, 404, Team Detail, Forms ═══════════════════════════════════════════════════ */ /* ── Scroll Text Fill ── */ .aj-word-fill { color: var(--color-text-muted); opacity: 0.25; transition: opacity 0.35s ease, color 0.35s ease; display: inline; } .aj-word-fill.is-filled { color: inherit; opacity: 1; } /* ── About Page ── */ .aj-page-hero--about .aj-body-lg { text-align: justify; line-height: 1.5; } [data-barba-namespace="about"] { --aj-about-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; } /* .aj-about-content { padding-top: 2rem; } */ /* ── About Page: editorial hero + story (scoped; other About sections unchanged) ── */ .aj-page-hero--about-editorial { align-items: center; justify-content: center; /* padding-top: calc(var(--header-height) + clamp(1.75rem, 5vh, 3.5rem)); padding-bottom: clamp(2.5rem, 6vh, 5rem); */ text-align: center; overflow: hidden; padding-bottom: 35px ; } .aj-page-hero--about-editorial .aj-page-hero__content { margin-inline: auto; } .aj-about-editorial__hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.26; background-image: radial-gradient( circle at 0 0, color-mix(in srgb, var(--color-text) 22%, transparent) 0 1px, transparent 2px 100% ), repeating-linear-gradient( 90deg, transparent 0, transparent 71px, color-mix(in srgb, var(--color-text) 10%, transparent) 71px, color-mix(in srgb, var(--color-text) 10%, transparent) 72px ), repeating-linear-gradient( 0deg, transparent 0, transparent 71px, color-mix(in srgb, var(--color-text) 10%, transparent) 71px, color-mix(in srgb, var(--color-text) 10%, transparent) 72px ); background-size: 72px 72px, auto, auto; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, #000 20%, transparent 72%); } .aj-about-editorial__kicker { margin: 0 0 1rem; font-family: var(--font-body); font-size: clamp(0.625rem, 1vw, 0.75rem); font-weight: 500; letter-spacing: 0.38em; text-transform: uppercase; color: var(--color-text-muted); } .aj-about-editorial__rule { display: block; width: clamp(2.5rem, 8vw, 4.5rem); height: 1px; margin-inline: auto; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); background: color-mix(in srgb, var(--color-accent) 72%, transparent); } .aj-about-editorial__headline + .aj-about-editorial__rule { margin-top: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 0; } .aj-about-editorial__headline { margin: 0 auto; max-width: none; display: inline-block; max-width: 100%; font-family: var(--font-display); font-size: clamp(0.95rem, 4.5vw, 3.85rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.015em; color: var(--color-text); text-align: center; white-space: nowrap; text-wrap: nowrap; /* padding-top: 20px; */ } .aj-about-editorial__headline-line { display: block; } .aj-about-editorial__headline-line + .aj-about-editorial__headline-line { margin-top: 0.08em; } .aj-about-editorial-section { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); overflow-x: clip; } .aj-about-editorial__section-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.18; background-image: radial-gradient( circle at 0 0, color-mix(in srgb, var(--color-text) 18%, transparent) 0 1px, transparent 2px 100% ), repeating-linear-gradient( 90deg, transparent 0, transparent 95px, color-mix(in srgb, var(--color-text) 8%, transparent) 95px, color-mix(in srgb, var(--color-text) 8%, transparent) 96px ), repeating-linear-gradient( 0deg, transparent 0, transparent 95px, color-mix(in srgb, var(--color-text) 8%, transparent) 95px, color-mix(in srgb, var(--color-text) 8%, transparent) 96px ); background-size: 96px 96px, auto, auto; } .aj-about-editorial__container { position: relative; z-index: 1; } .aj-about-editorial__focus { max-width: 72rem; margin-inline: auto; } .aj-about-editorial__story { margin-bottom: 0; } .aj-about-editorial__quad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4.75rem); align-items: start; text-align: left; max-width: 72rem; margin-inline: auto; } .aj-about-editorial__quad-cell { min-width: 0; } .aj-about-editorial__quad-text { margin: 0; line-height: 1.72; color: var(--color-text-body); overflow-wrap: break-word; } .aj-about-editorial__split-shell { max-width: 72rem; margin-inline: auto; margin-top: 35px; } @media (max-width: 768px) { .aj-about-editorial__split-shell { margin-top: 30px; } } @media (max-width: 480px) { .aj-about-editorial__split-shell { margin-top: 26px; } } @media (min-width: 1024px) and (max-width: 1439px) { .aj-about-editorial__split-shell { margin-top: 38px; } } @media (min-width: 1440px) { .aj-about-editorial__split-shell { margin-top: 44px; } } @media (min-width: 1920px) { .aj-about-editorial__split-shell { margin-top: 48px; } } @media (min-width: 2560px) { .aj-about-editorial__split-shell { margin-top: 52px; } } .aj-about-editorial__split-rail { display: flex; align-items: center; width: 100%; margin-bottom: clamp(1.35rem, 2.8vw, 2rem); } .aj-about-editorial__rail-plus { flex: 0 0 auto; font-family: var(--font-body); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.06em; color: color-mix(in srgb, var(--color-accent) 88%, var(--color-text-muted)); line-height: 1; } .aj-about-editorial__rail-track { flex: 1 1 auto; height: 1px; margin-inline: 0.2rem; background: color-mix(in srgb, var(--color-accent) 55%, transparent); min-width: 0.75rem; } .aj-about-editorial__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; /* padding-top: clamp(1.75rem, 3.5vw, 2.75rem); */ border-top: none; text-align: center; } .aj-about-editorial__split-cell { padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 3vw, 2.75rem); } .aj-about-editorial__split-cell:first-child { border-right: 1px solid color-mix(in srgb, var(--color-accent) 42%, transparent); } .aj-about-editorial__split-heading { margin: 0 0 1rem; padding-top: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); } /* .aj-about-editorial__split-heading::before { content: ''; display: block; width: clamp(2.25rem, 6vw, 3.25rem); height: 1px; margin: 0 auto clamp(0.85rem, 1.5vw, 1.1rem); background: color-mix(in srgb, var(--color-accent) 72%, transparent); } */ .aj-about-editorial__split-text { margin: 0 auto; max-width: min(36ch, 100%); font-size: 1rem; line-height: 1.5; color: var(--color-text-muted); text-align: center; } .aj-values-list--editorial { max-width: 28rem; margin-inline: auto; text-align: left; } .aj-values-list--editorial .aj-values-list__item { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.65rem; padding: clamp(0.85rem, 1.5vw, 1.1rem) 0; border-bottom: none; } .aj-values-list--editorial .aj-values-list__item:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 0; width: min(72%, 16rem); height: 1px; background: color-mix(in srgb, var(--color-accent) 32%, var(--color-border)); } .aj-values-list--editorial .aj-values-list__item:first-child { padding-top: 0; } .aj-values-list--editorial .aj-values-list__number { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; color: var(--color-accent); } .aj-values-list--editorial .aj-values-list__text { font-size: 0.85rem; line-height: 1.5; text-align: left; color: var(--color-text-muted); } .aj-values-list__sep { margin-right: 0.2rem; color: color-mix(in srgb, var(--color-accent) 65%, var(--color-text-muted)); font-weight: 400; } @media (max-width: 767px) { .aj-page-hero--about-editorial .aj-about-editorial__headline { display: block; width: min(100%, 22ch); margin-inline: auto; font-size: 2.1rem; /* 20px mobile target */ line-height: 1.3; letter-spacing: -0.01em; white-space: normal; text-wrap: balance; } .aj-about-editorial__quad-grid:not(.aj-about-editorial__quad-grid--cms) { grid-template-columns: 1fr; gap: clamp(1.35rem, 4vw, 2rem); } .aj-about-editorial__split { grid-template-columns: 1fr; } .aj-about-editorial__split-cell:first-child { border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 42%, transparent); padding-bottom: clamp(1.75rem, 4vw, 2.25rem); } .aj-about-editorial__split-cell:last-child { padding-top: clamp(1.75rem, 4vw, 2.25rem); } .aj-page-hero--about-editorial .aj-about-editorial__headline { max-width: none; } } @media (min-width: 768px) and (max-width: 820px) { .aj-grid.aj-grid--6.aj-team-remaining-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aj-footer--premium .aj-footer__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; } .aj-footer--premium .aj-footer__office { border-bottom: none; border-left: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); padding: clamp(1.25rem, 3vw, 1.75rem) clamp(0.5rem, 2vw, 1rem); margin: 0; max-width: none; width: auto; text-align: left; } .aj-footer--premium .aj-footer__office:first-child { border-left: none; } .aj-footer--premium .aj-footer__office:nth-child(1), .aj-footer--premium .aj-footer__office:nth-child(2), .aj-footer--premium .aj-footer__office:nth-child(3) { border-top: none; border-bottom: none; padding-top: clamp(1.25rem, 3vw, 1.75rem); padding-bottom: clamp(1.25rem, 3vw, 1.75rem); grid-column: auto; } .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-title, .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-lines { text-align: left; } .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-icon, .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-contact { justify-content: flex-start; } .aj-footer--premium .aj-footer__office:nth-child(3) .aj-footer__office-map { justify-content: flex-start; } } @media (min-width: 1440px) { .aj-about-editorial__headline { font-size: clamp(3.25rem, 3.2vw, 3.85rem); } } @media (min-width: 1920px) { .aj-about-editorial__focus { max-width: 76rem; } } .aj-about-text { max-width: 650px; } .aj-about-text p { margin-bottom: 1rem; text-align: justify; line-height: 1.5; } .aj-about-image { position: relative; overflow: hidden; border-radius: 4px; margin: 0; } .aj-about-image__img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; } .aj-philosophy { background: var(--color-bg-elevated); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .aj-philosophy__content { max-width: 800px; margin: 0 auto; text-align: center; } .aj-philosophy__content .aj-h2 { margin-bottom: 1.5rem; } .aj-philosophy__content .aj-body-lg { color: var(--color-text-muted); line-height: 1.8; } .aj-culture-grid { margin-top: 2rem; } .aj-culture-item { overflow: hidden; border-radius: 4px; margin: 0; } .aj-culture-item__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); } .aj-culture-item:hover .aj-culture-item__img { transform: scale(1.05); } .aj-stats-section { background: var(--color-bg-surface); border-top: 1px solid var(--color-border); } .aj-stats-bar--large { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; } .aj-stat--large { text-align: center; } .aj-stat--large .aj-stat__number { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--color-accent); display: block; } .aj-stat--large .aj-stat__label { color: var(--color-text-muted); margin-top: 0.5rem; } /* ── About Page: Scroll-Down Indicator ── */ .aj-scroll-down { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-family: var(--font-body); transition: color var(--transition-fast), opacity 0.5s var(--ease-out-expo), visibility 0.5s var(--ease-out-expo); } .aj-scroll-down:hover { color: var(--color-accent); } .aj-scroll-down__text { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; } .aj-scroll-down__icon { animation: aj-bounce-down 2s var(--ease-in-out-quart) infinite; } .aj-scroll-down.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes aj-bounce-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ── Scroll-to-Top Button ── */ .aj-scroll-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 100; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-accent); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.4s var(--ease-out-expo), visibility 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo), background var(--transition-fast), border-color var(--transition-fast); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } .aj-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .aj-scroll-top:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); } @media (max-width: 768px) { .aj-scroll-top { bottom: 1.25rem; right: 1.25rem; width: 40px; height: 40px; } } /* ── Team Hero (Single Team Member) ── */ .aj-team-hero { padding-top: calc(var(--header-height) + 2rem); } .aj-team-hero__image { overflow: hidden; border-radius: 4px; } .aj-team-hero__img { width: 100%; max-height: 80vh; object-fit: cover; border-radius: 4px; } .aj-team-hero__content { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem; } .aj-team-hero__title { color: var(--color-accent); font-weight: 400; } .aj-team-hero__bio { color: var(--color-text-body); line-height: 1.5; } .aj-team-hero__bio p { margin-bottom: 1rem; } .aj-team-hero__education { padding-top: 1rem; border-top: 1px solid var(--color-border); } .aj-team-hero__social { padding-top: 1rem; border-top: 1px solid var(--color-border); } .aj-team-social { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 0; margin-top: 0.75rem; } .aj-team-social li a { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-muted); transition: color var(--transition-fast); } .aj-team-social li a:hover { color: var(--color-accent); } .aj-team-card { position: relative; } .aj-team-card__link { position: absolute; inset: 0; z-index: 2; } .aj-team-card__role { color: var(--color-text-muted); margin-top: 0.25rem; } /* ── Contact Page ── */ .aj-contact-main { padding-top: 0; } /* [data-barba-namespace="contact"] .aj-contact-main { padding-top: calc(var(--header-height) + clamp(3.5rem, 7vw, 5rem)); } */ .aj-contact-main-grid { align-items: stretch; gap: clamp(1.5rem, 3.5vw, 3rem); margin-top: 5rem; } .aj-contact-info { display: flex; flex-direction: column; gap: 1.75rem; height: 100%; } .aj-contact-info__header .aj-display { margin-bottom: 0.75rem; } .aj-contact-info__header { padding-top: clamp(0.5rem, 1.5vw, 1rem); } .aj-contact-info__header .aj-body-lg { color: var(--color-text-muted); max-width: 34ch; } .aj-contact-info__item h3 { margin-bottom: 0.75rem; } .aj-contact-info__item address { font-style: normal; color: var(--color-text-body); line-height: 1.7; } .aj-contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .aj-contact-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem; } .aj-contact-office-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; padding: 1.25rem 0 0 0 ; /* border-top: 1px solid var(--color-border); */ align-items: start; } .aj-contact-office-row__left .aj-h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; } .aj-contact-office-row__right { display: flex; flex-direction: column; gap: 0; min-width: 0; } .aj-contact-office-row__right .aj-link { display: inline-flex; align-items: center; gap: 0.5rem; white-space: normal; overflow-wrap: anywhere; } .aj-contact-office-row__right .aj-link .aj-icon { color: var(--color-accent); } .aj-contact-office-row__left address { margin: 0; line-height: 1.55; } .aj-contact-office-row__right .aj-body { margin: 0; line-height: 1.45; } .aj-contact-office-row__right .aj-body + .aj-body { margin-top: 0.55rem; } .aj-contact-hours-row { padding: 1.25rem 0; border-top: 1px solid var(--color-border); } .aj-contact-hours-row .aj-h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.65rem; } .aj-contact-social-row { padding-top: 1.25rem; border-top: 1px solid var(--color-border); margin-top: auto; } .aj-map-container { width: 100%; height: 350px; overflow: hidden; border-radius: 4px; border: 1px solid var(--color-border); } .aj-contact-map__canvas { width: 100%; height: 100%; min-height: 100%; } .aj-contact-map__canvas .leaflet-container { width: 100%; height: 100%; } .aj-map-container iframe { width: 100%; height: 100%; border: 0; } /* ── Contact Form Field Styles ── */ /* Matches template class names: aj-form-input, aj-form-textarea, aj-form-select */ .aj-form-group { margin-bottom: 1.35rem; } .aj-form-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.5rem; font-family: var(--font-display); } .aj-required { color: var(--color-accent); } .aj-form-input, .aj-form-select, .aj-form-textarea { width: 100%; padding: 0.875rem 1rem; background: transparent; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .aj-form-input:focus, .aj-form-select:focus, .aj-form-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); } .aj-form-textarea { min-height: 150px; resize: vertical; } .aj-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* Form validation states */ .aj-form-input--error, .aj-form-input--error:focus { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15); } .aj-form-error { color: #e74c3c; font-size: 0.75rem; margin-top: 0.25rem; display: block; } .aj-form-feedback { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 4px; font-size: 0.875rem; } .aj-form-feedback--success { background: rgba(39, 174, 96, 0.1); border: 1px solid rgba(39, 174, 96, 0.3); color: #27ae60; } .aj-form-feedback--error { background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3); color: #e74c3c; } /* Button loading state */ .aj-btn--loading { position: relative; pointer-events: none; opacity: 0.7; } .aj-btn--loading::after { content: ''; position: absolute; right: 1rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: aj-spinner 0.6s linear infinite; } @keyframes aj-spinner { to { transform: rotate(360deg); } } /* ── Privacy Policy Page ── */ .aj-privacy-section .aj-grid--3 { grid-template-columns: 280px 1fr; } .aj-privacy-toc { position: sticky; top: calc(var(--header-height) + 2rem); align-self: start; } .aj-privacy-toc .aj-h3 { margin-bottom: 1rem; } .aj-privacy-toc__nav { display: flex; flex-direction: column; gap: 0.5rem; } .aj-privacy-toc__nav a { font-size: 0.875rem; color: var(--color-text-muted); padding: 0.35rem 0; transition: color var(--transition-fast); display: block; } .aj-privacy-toc__nav a:hover, .aj-privacy-toc__nav a.is-active { color: var(--color-accent); } .aj-privacy-content { max-width: 750px; } .aj-privacy-content h2 { font-family: var(--font-display); font-size: 1.5rem; margin-top: 3rem; margin-bottom: 1rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .aj-privacy-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; } .aj-privacy-content p { margin-bottom: 1rem; line-height: 1.8; color: var(--color-text-body); } .aj-privacy-content ul, .aj-privacy-content ol { padding-left: 1.5rem; margin-bottom: 1rem; } .aj-privacy-content li { margin-bottom: 0.5rem; line-height: 1.7; color: var(--color-text-body); } .aj-privacy-footer { border-top: 1px solid var(--color-border); } .aj-privacy-footer__box { background: var(--color-bg-elevated); padding: 3rem; border-radius: 8px; text-align: center; } .aj-privacy-footer__box .aj-h3 { margin-bottom: 1rem; } .aj-privacy-footer__box .aj-body-lg { color: var(--color-text-muted); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } /* ── 404 Page ── */ .aj-section--404 { min-height: 60vh; display: flex; align-items: center; justify-content: center; } .aj-404-content { text-align: center; max-width: 600px; margin: 0 auto; } .aj-404-code { font-size: clamp(6rem, 15vw, 12rem); font-weight: 700; color: var(--color-accent); line-height: 1; margin-bottom: 1rem; opacity: 0.3; } .aj-404-content .aj-h2 { margin-bottom: 1rem; } .aj-404-content .aj-body-lg { color: var(--color-text-muted); margin-bottom: 2rem; } .aj-404-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── Lightbox Controls Extended ── */ .aj-lightbox-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .aj-lightbox-controls { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.5rem; z-index: 10; } .aj-lightbox-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: rgba(255,255,255,0.8); font-size: 0.8125rem; text-align: center; } .aj-lightbox-next:hover, .aj-lightbox-prev:hover { background: rgba(255,255,255,0.2); } /* ── Project Card Overlay Enhancements ── */ .aj-project-card__overlay-content .aj-h3 { color: #fff; font-size: 1.125rem; margin-bottom: 0.25rem; } .aj-project-card__overlay-content .aj-caption { color: rgba(255,255,255,0.7); } .aj-project-card__link { position: absolute; inset: 0; z-index: 3; } .aj-project-card__info { padding-top: 0.75rem; } .aj-project-card__category { color: var(--color-accent); display: block; } /* ── Multi-Category on Cards ── */ .aj-project-card__categories { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.25rem; } .aj-project-card__category-more { position: relative; font-size: 0.65rem; font-weight: 600; color: var(--color-text-muted); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.1rem 0.35rem; cursor: default; line-height: 1.2; } .aj-project-card__category-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.35rem 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), visibility var(--transition-fast); z-index: 10; pointer-events: none; } .aj-project-card__category-more:hover .aj-project-card__category-tooltip { opacity: 1; visibility: visible; } .aj-project-card__category-tooltip-item { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); } .aj-project-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); } .aj-project-card__inner:hover .aj-project-card__img { transform: scale(1.05); } /* ── Related Project Card ── */ .aj-related-project-card { position: relative; } .aj-related-project-card__image { overflow: hidden; border-radius: 4px; margin: 0; } .aj-related-project-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); } .aj-related-project-card:hover .aj-related-project-card__img { transform: scale(1.05); } .aj-related-project-card__content { padding-top: 0.75rem; } .aj-related-project-card__category { color: var(--color-accent); display: block; margin-bottom: 0.25rem; } .aj-related-project-card__link { position: absolute; inset: 0; z-index: 2; } /* ── Mini Project Card (Team Member page) ── */ .aj-project-mini-card { position: relative; } .aj-project-mini-card__image { overflow: hidden; border-radius: 4px; margin: 0; } .aj-project-mini-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .aj-project-mini-card .aj-h3 { margin-top: 0.75rem; } /* ── Barba.js Page Transitions ── */ .aj-barba-wrapper { position: relative; } /* GSAP handles all Barba transition animations (opacity/transform) via fromTo() */ /* Do NOT set opacity on containers here — it conflicts with GSAP transitions */ /* Slide transition alternative */ .aj-transition-overlay { position: fixed; inset: 0; background: var(--color-bg); z-index: 999; transform: scaleY(0); transform-origin: bottom; } /* ── Link Styles Extended ── */ .aj-link--social { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-muted); transition: color var(--transition-fast); } .aj-link--social:hover { color: var(--color-accent); } .aj-link--social .aj-icon { width: 18px; height: 18px; } /* ═══════════════════════════════════════════════════ RESPONSIVE – Mobile & Tablet Adjustments ═══════════════════════════════════════════════════ */ /* ── Tablet (max-width: 1024px) ── */ @media (max-width: 1024px) { .aj-grid--2 { grid-template-columns: 1fr; gap: 2rem; } .aj-grid--3 { grid-template-columns: repeat(2, 1fr); } .aj-grid--4 { grid-template-columns: repeat(2, 1fr); } .aj-privacy-section .aj-grid--3 { grid-template-columns: 1fr; } .aj-privacy-toc { position: relative; top: 0; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); } .aj-privacy-toc__nav { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; } .aj-footer__grid { grid-template-columns: repeat(2, 1fr); } } /* ── Mobile (max-width: 768px) ── */ @media (max-width: 768px) { :root { --header-height: 60px; } .aj-section { padding: 1.5rem 0; } .aj-page-hero { min-height: 16vh; padding-top: calc(var(--header-height) + 0.5rem); padding-bottom: 0 !important; } .aj-display { font-size: clamp(2rem, 8vw, 3rem); } .aj-grid--3 { grid-template-columns: 1fr; } .aj-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .aj-gallery-grid { grid-template-columns: 1fr; } .aj-filter__controls { flex-wrap: wrap; gap: 0.5rem; } .aj-filter__btn { font-size: 0.75rem; padding: 0.5rem 0.75rem; } .aj-stats-bar--large { gap: 2rem; } .aj-stat--large .aj-stat__number { font-size: 2rem; } .aj-map-container { height: 300px; } .aj-project-hero { max-height: 50vh; } .aj-project-meta { flex-direction: column; gap: 1rem; } .aj-team-hero { padding-top: calc(var(--header-height) + 1rem); } .aj-team-hero__img { aspect-ratio: 1/1; } .aj-404-code { font-size: 5rem; } .aj-footer__grid { grid-template-columns: 1fr; gap: 2rem; } .aj-footer__bottom { flex-direction: column; gap: 0.5rem; } /* Mobile nav overlay */ .aj-header__nav.is-active { position: fixed; top: var(--header-height); right: 0; bottom: 0; left: 0; height: calc(100vh - var(--header-height)); background: var(--color-bg); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; pointer-events: none; } .aj-header__nav.is-active .aj-header__menu { flex-direction: column; gap: 2rem; text-align: center; pointer-events: auto; } .aj-header__nav.is-active .aj-header__menu li a { font-size: 1.5rem; } .aj-header__nav.is-active .aj-header__mobile-close { display: inline-flex; position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--color-accent-subtle); color: var(--color-text); pointer-events: auto; z-index: 2; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .aj-header__mobile-close:hover { background: rgba(255, 255, 255, 0.12); } .aj-lightbox-swiper { width: 100%; height: 80%; } .aj-lightbox-next { right: 0.5rem; } .aj-lightbox-prev { left: 0.5rem; } .aj-lightbox-controls { bottom: 1rem; gap: 1rem; } .aj-gallery-lightbox .aj-lightbox-controls { gap: clamp(0.75rem, 4vw, 2rem); max-width: calc(100vw - 1rem); padding-inline: 0.25rem; } /* Search overlay mobile */ .aj-search-container { padding-top: calc(var(--header-height) + 1rem); } .aj-search-input { font-size: 1.25rem; } } /* ── Small Mobile (max-width: 480px) ── */ @media (max-width: 480px) { .aj-grid--4 { grid-template-columns: 1fr; } .aj-contact-form-wrapper { padding: 0; } [data-barba-namespace="contact"] .aj-contact-form-wrapper { padding: 1.25rem; } .aj-privacy-footer__box { padding: 2rem 1.5rem; } .aj-404-actions { flex-direction: column; align-items: center; } .aj-stats-bar--large { flex-direction: column; gap: 1.5rem; } .aj-gallery-lightbox .aj-lightbox-controls { gap: 0.5rem; bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); } } /* ── Theme Toggle ── */ .aj-header__action-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: color var(--transition-fast); border-radius: 50%; } .aj-header__action-btn:hover { color: var(--color-text); background: var(--color-accent-subtle); } .aj-theme-toggle { position: relative; overflow: hidden; } .aj-theme-toggle__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease; } /* Dark mode: show moon (current), hide sun */ [data-theme="dark"] .aj-theme-toggle__icon--dark { transform: translateY(0); opacity: 1; } [data-theme="dark"] .aj-theme-toggle__icon--light { transform: translateY(100%); opacity: 0; } /* Light mode: show sun, hide moon */ [data-theme="light"] .aj-theme-toggle__icon--dark { transform: translateY(-100%); opacity: 0; } [data-theme="light"] .aj-theme-toggle__icon--light { transform: translateY(0); opacity: 1; } .aj-search-toggle .aj-icon { width: 20px; height: 20px; } /* ── Search Overlay ── */ .aj-search-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding-top: 20vh; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; } .aj-search-overlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .aj-search-backdrop { position: absolute; inset: 0; background: var(--color-bg-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .aj-search-container { position: relative; z-index: 1; width: 100%; max-width: 640px; } .aj-search-header { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; } .aj-search-input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 2rem); color: var(--color-text); caret-color: var(--color-accent); } .aj-search-input::placeholder { color: var(--color-text-dim); } .aj-search-close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: color var(--transition-fast); } .aj-search-close:hover { color: var(--color-accent); } .aj-search-results { margin-top: 2rem; max-height: 40vh; overflow-y: auto; } .aj-search-results a { display: block; padding: 1rem; border-bottom: 1px solid var(--color-border); transition: background var(--transition-fast); } .aj-search-results a:hover { background: var(--color-accent-subtle); } .aj-search-results__title { font-family: var(--font-display); font-weight: 500; color: var(--color-text); margin-bottom: 0.25rem; } .aj-search-results__type { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ── Gallery Lightbox Polish ── */ .aj-gallery-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.95); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; overflow-x: hidden; } .aj-gallery-lightbox.is-active { opacity: 1; visibility: visible; } .aj-lightbox-backdrop { position: absolute; inset: 0; } .aj-lightbox-container { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .aj-lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); z-index: 10; transition: color 0.2s ease, transform 0.2s ease; } .aj-lightbox-close:hover { color: #fff; transform: rotate(90deg); } .aj-lightbox-swiper { width: 100%; height: 80vh; } .aj-lightbox-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .aj-lightbox-swiper .swiper-slide img { max-width: 90%; max-height: 80vh; object-fit: contain; } .aj-lightbox-controls { display: flex; align-items: center; gap: 2rem; margin-top: 1.5rem; } .aj-lightbox-prev, .aj-lightbox-next { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; transition: all 0.2s ease; } .aj-lightbox-prev:hover, .aj-lightbox-next:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); } .aj-lightbox-pagination { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; font-family: var(--font-body); } /* Project single: gallery lightbox — row controls (overrides legacy side-anchored nav + RTL flex flip) */ .aj-gallery-lightbox .aj-lightbox-controls { direction: ltr; unicode-bidi: isolate; gap: 75px; justify-content: center; align-items: center; flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 1.5rem); box-sizing: border-box; padding-inline: 0.5rem; left: 50%; right: auto; transform: translate3d(-50%, 0, 0); } .aj-gallery-lightbox .aj-lightbox-prev, .aj-gallery-lightbox .aj-lightbox-next, .aj-gallery-lightbox .aj-lightbox-prev.swiper-button-prev, .aj-gallery-lightbox .aj-lightbox-next.swiper-button-next { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; appearance: none; -webkit-appearance: none; padding: 0; line-height: 0; font-size: 0; box-sizing: border-box; flex: 0 0 48px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; } .aj-gallery-lightbox .aj-lightbox-prev::after, .aj-gallery-lightbox .aj-lightbox-next::after, .aj-gallery-lightbox .aj-lightbox-prev.swiper-button-prev::after, .aj-gallery-lightbox .aj-lightbox-next.swiper-button-next::after { display: none !important; content: '' !important; } .aj-gallery-lightbox .aj-lightbox-prev .aj-icon, .aj-gallery-lightbox .aj-lightbox-next .aj-icon { display: block; width: 22px; height: 22px; flex-shrink: 0; } .aj-gallery-lightbox .aj-lightbox-pagination { flex: 0 0 auto; min-width: 3.5rem; margin-top: 0; text-align: center; } /* ── Animation Utilities ── */ /* GSAP handles [data-reveal] initial state (opacity/transform) via gsap.from() */ /* Do NOT set opacity:0 here — it conflicts with GSAP's "from" animation */ [data-reveal-image] { overflow: hidden; } /* ── Preloader Polish ── */ .aj-preloader { position: fixed; inset: 0; z-index: 9999; background: var(--color-bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease; } .aj-preloader__logo { color: var(--color-accent); animation: aj-preloader-pulse 1.5s ease-in-out infinite; } @keyframes aj-preloader-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); } } .aj-logo-path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: aj-preloader-draw 2s ease-out forwards; } @keyframes aj-preloader-draw { to { stroke-dashoffset: 0; } } body.loaded .aj-preloader { opacity: 0; pointer-events: none; } /* ── Page Transition Overlay ── */ .is-transitioning .aj-main { pointer-events: none; } /* ── Values List ── */ .aj-values-list { list-style: none; padding: 0; margin: 0; font-size: 1rem; } .aj-values-list__item { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--color-border); } .aj-values-list__item:first-child { padding-top: 0; } .aj-values-list__number { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--color-accent); min-width: 2rem; } .aj-values-list__text { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--color-text); } .aj-values-list--detailed .aj-values-list__item { align-items: flex-start; padding: 1.5rem 0; } .aj-values-list__content { flex: 1; } .aj-values-list__desc { margin: 0.5rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--color-text-muted); } /* ── Services Section ── */ .aj-section-header { margin-bottom: 1.5rem; } .aj-section-header .aj-overline { margin-bottom: 0.75rem; } .aj-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; } .aj-service-item { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-border); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease; will-change: transform, opacity; } /* Alternate columns get left padding for visual separation */ .aj-service-item:nth-child(even) { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--color-border); } .aj-service-item:hover { transform: scale(1.03); } /* Spotlight: item closest to viewport center gets a subtle scale bump */ .aj-service-item.is-spotlight { transform: scale(1.02); } .aj-service-item.is-spotlight:hover { transform: scale(1.05); } /* Spotlight: initial invisible state for all spotlight items (opacity managed by JS) */ [data-spotlight-item] { transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, opacity; } /* Spotlight scale for about content blocks */ .aj-about-text.is-spotlight, .aj-about-sidebar__block.is-spotlight, .aj-about-editorial__quad-cell.is-spotlight, .aj-about-editorial__split-cell.is-spotlight { transform: scale(1.01); } /* Spotlight scale for process steps */ .aj-process__step.is-spotlight { transform: scale(1.02); } .aj-service-item__number { flex-shrink: 0; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; color: var(--color-accent); letter-spacing: 0.1em; } .aj-service-item__title { flex-shrink: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; } .aj-service-item__sep { flex-shrink: 0; color: var(--color-text-muted); opacity: 0.4; } .aj-service-item__desc { color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.5; margin: 0; } /* ── Process / Design Journey ── */ .aj-process__track { display: flex; position: relative; gap: 0; padding-top: 2.5rem; } /* Background line (muted) */ .aj-process__line { position: absolute; top: calc(2.5rem + 10px); left: 0; right: 0; height: 3px; background: var(--color-border); border-radius: 2px; z-index: 0; } /* Accent fill line — width animated by JS */ .aj-process__fill { height: 100%; width: 0%; background: var(--color-accent); border-radius: 2px; transition: width 0.1s linear; } .aj-process__step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 0 1.25rem; position: relative; } /* Dot — bigger, starts muted, activates on scroll */ .aj-process__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--color-bg-surface); border: 3px solid var(--color-border); margin-bottom: 1.25rem; position: relative; z-index: 2; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; } /* Active dot — accent fill + glow pulse */ .aj-process__step.is-active .aj-process__dot { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb, 183, 151, 90), 0.25); transform: scale(1.2); } /* Active step text */ .aj-process__step.is-active .aj-process__number, .aj-process__step.is-active .aj-process__title { color: var(--color-accent); } .aj-process__number { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.1em; margin-bottom: 0.5rem; transition: color 0.4s ease; } .aj-process__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 0.5rem; transition: color 0.4s ease; } .aj-process__desc { font-size: 0.875rem; line-height: 1.65; color: var(--color-text-muted); } /* Step content fades in */ .aj-process__step .aj-process__number, .aj-process__step .aj-process__title, .aj-process__step .aj-process__desc { opacity: 0.4; transition: opacity 0.4s ease, color 0.4s ease; } .aj-process__step.is-active .aj-process__number, .aj-process__step.is-active .aj-process__title, .aj-process__step.is-active .aj-process__desc { opacity: 1; } /* ── Stats Section Polish ── */ .aj-stats-section { background: var(--color-bg-surface); padding: clamp(3rem, 6vw, 6rem) 0; } .aj-stats-bar--large { display: flex; justify-content: center; gap: clamp(2rem, 6vw, 6rem); flex-wrap: wrap; } .aj-stat--large { text-align: center; } .aj-stat--large .aj-stat__number { display: inline; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--color-accent); line-height: 1; } .aj-stat__suffix { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; color: var(--color-accent); } .aj-stat--large .aj-stat__label { display: block; margin-top: 0.75rem; color: var(--color-text-muted); } /* ── CTA Section ── */ .aj-cta-section { text-align: center; /* padding: clamp(3rem, 4vw, 4rem) 0; */ padding: 20px 0; } @media (max-width: 768px) { .aj-cta-section { padding: 1rem 0; } } @media (max-width: 480px) { .aj-cta-section { padding: 0.875rem 0; } } @media (min-width: 1920px) { .aj-cta-section { padding: 1.5rem 0; } } @media (min-width: 2560px) { .aj-cta-section { padding: 1.75rem 0; } } .aj-cta-content { max-width: 640px; margin: 0 auto; } .aj-cta-content .aj-h2 { margin-bottom: 1rem; } .aj-cta-content .aj-body-lg { margin-bottom: 2rem; color: var(--color-text-muted); } /* ── Contact Info Polish ── */ .aj-contact-info { display: flex; flex-direction: column; gap: 1.75rem; } .aj-contact-info__item .aj-h3 { margin-bottom: 0.75rem; color: var(--color-text); } .aj-contact-info__item address, .aj-contact-info__item .aj-body { color: var(--color-text-muted); font-style: normal; line-height: 1.7; } .aj-contact-info__item .aj-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-body); transition: color var(--transition-fast); } .aj-contact-info__item .aj-link:hover { color: var(--color-accent); } .aj-contact-social { justify-content: center; } .aj-contact-social-row .aj-footer__social-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-accent); background: transparent; color: var(--color-text); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .aj-contact-social-row .aj-footer__social-btn:hover { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); } .aj-contact-social-row .aj-footer__social-icon { font-size: 1rem; line-height: 1; color: currentColor; } .aj-contact-office-row__left .aj-h3, .aj-contact-hours-row .aj-h3 { color: var(--color-accent); } .aj-contact-social .aj-link--social { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-body); font-size: 0.9375rem; } .aj-contact-social .aj-link--social:hover { color: var(--color-accent); } /* ── Form Row (2-column) ── */ .aj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 0; } .aj-form-group { margin-bottom: 1.5rem; } .aj-form-group--full { grid-column: 1 / -1; margin-bottom: 1.5rem; } .aj-form-label { display: block; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.5rem; letter-spacing: 0.02em; } .aj-required { color: var(--color-accent); } .aj-form-input, .aj-form-select, .aj-form-textarea { width: 100%; padding: 0.875rem 1rem; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); font-family: var(--font-body); font-size: 0.9375rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -webkit-appearance: none; appearance: none; } .aj-form-input:focus, .aj-form-select:focus, .aj-form-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); } .aj-form-input::placeholder, .aj-form-textarea::placeholder { color: var(--color-text-dim); } .aj-form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .aj-form-textarea { resize: vertical; min-height: 120px; } /* ── Button Polish ── */ .aj-btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: none; border-radius: 4px; cursor: pointer; transition: all var(--transition-base); } .aj-btn--accent { background: var(--color-accent); color: #fff; } .aj-btn--accent:hover { background: #b8963d; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3); } .aj-btn .aj-icon { width: 18px; height: 18px; transition: transform var(--transition-fast); } .aj-btn:hover .aj-icon { transform: translateX(4px); } /* ── Overline Text ── */ .aj-overline { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); } /* ── Map Section ── */ .aj-contact-map { padding: 0; } .aj-map-container { width: 100%; height: 350px; background: var(--color-bg-surface); } .aj-contact-map__canvas { width: 100%; height: 100%; min-height: 100%; } .aj-contact-map__canvas .leaflet-container { width: 100%; height: 100%; } .aj-map-container iframe { width: 100%; height: 100%; display: block; } /* ── About Page: Scroll-Snap Sections ── */ html:has([data-barba-namespace="about"]) { scroll-snap-type: y proximity; overflow-y: auto !important; overflow-x: hidden !important; } .aj-snap-section { scroll-snap-align: start; min-height: auto; padding-bottom: 30px !important; } .aj-about-editorial-section { padding-bottom: 23px !important; } @media (max-width: 768px) { .aj-snap-section { min-height: auto; scroll-snap-align: start; padding-bottom: 24px !important; } .aj-about-editorial-section { padding-bottom: 18px !important; } } @media (max-width: 480px) { .aj-snap-section { padding-bottom: 20px !important; } .aj-about-editorial-section { padding-bottom: 15px !important; } } @media (min-width: 1024px) and (max-width: 1439px) { .aj-snap-section { padding-bottom: 32px !important; } .aj-about-editorial-section { padding-bottom: 25px !important; } } @media (min-width: 1440px) { .aj-snap-section { padding-bottom: 38px !important; } .aj-about-editorial-section { padding-bottom: 29px !important; } } @media (min-width: 1920px) { .aj-snap-section { padding-bottom: 42px !important; } .aj-about-editorial-section { padding-bottom: 32px !important; } } @media (min-width: 2560px) { .aj-snap-section { padding-bottom: 46px !important; } .aj-about-editorial-section { padding-bottom: 35px !important; } } /* ── About Page Grid Fix ── */ .aj-about-content .aj-grid--2 { gap: clamp(2rem, 4vw, 4rem); align-items: start; } .aj-about-text .aj-h2 { margin-bottom: 1.5rem; } .aj-about-text .aj-body-lg { margin-bottom: 1rem; color: var(--color-text-body); line-height: 1.5; } .aj-about-text .aj-body { margin-bottom: 1rem; color: var(--color-text-muted); line-height: 1.5; } /* ── Philosophy Section ── */ .aj-philosophy { background: var(--color-bg-elevated); padding: clamp(3rem, 6vw, 6rem) 0; } .aj-philosophy .aj-grid--2 { gap: clamp(2rem, 6vw, 6rem); align-items: start; } .aj-philosophy__content .aj-h2 { margin-bottom: 1.5rem; } .aj-philosophy__content .aj-body-lg { color: var(--color-text-muted); line-height: 1.8; } .aj-philosophy__values .aj-h2 { margin-bottom: 1.5rem; } /* ── Contact Form Wrapper ── */ .aj-contact-form-wrapper { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 8px; padding: clamp(2rem, 3vw, 3rem); height: auto; align-self: start; display: flex; margin-top: clamp(6.5rem, 8vw, 8.5rem); } .aj-contact-form { width: 100%; display: flex; flex-direction: column; } .aj-contact-form .aj-form-label { margin-bottom: 0.45rem; } .aj-contact-form .aj-btn { align-self: flex-start; } /* ── Responsive: Form & Services ── */ @media (max-width: 768px) { [data-barba-namespace="contact"] .aj-contact-main { padding-top: calc(var(--header-height) + 2.5rem); } .aj-contact-main-grid { gap: 1.5rem; margin-top: 3.75rem; } .aj-contact-form-wrapper { margin-top: 0; } .aj-contact-office-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 0.85rem 1rem; } .aj-contact-office-row__left address { line-height: 1.5; } .aj-form-row { grid-template-columns: 1fr; gap: 0; } .aj-services-grid { grid-template-columns: 1fr; } .aj-service-item:nth-child(even) { padding-left: 0; border-left: none; } .aj-service-item { flex-wrap: wrap; padding: 1rem 0; } .aj-service-item__desc { width: 100%; padding-left: 2rem; } /* Process: vertical timeline on mobile */ .aj-process__track { flex-direction: column; padding-top: 0; padding-left: 2rem; } .aj-process__line { top: 0; bottom: 0; left: 9px; right: auto; width: 3px; height: 100%; } .aj-process__fill { width: 100%; height: 0%; } .aj-process__step { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0 1rem; padding: 1.5rem 0 1.5rem 1rem; } .aj-process__dot { position: absolute; left: -2rem; top: 1.5rem; margin-bottom: 0; } .aj-process__number { width: 100%; } .aj-process__title { width: 100%; } .aj-process__desc { width: 100%; } .aj-stats-bar--large { flex-direction: column; gap: 2rem; } .aj-contact-form-wrapper { padding: 1.5rem; } .aj-contact-social { flex-direction: row; flex-wrap: wrap; gap: 0.65rem; } } @media (max-width: 480px) { .aj-grid--4 { grid-template-columns: 1fr; } .aj-contact-main-grid { margin-top: 0; } [data-barba-namespace="contact"] .aj-contact-main { padding-top: calc(var(--header-height) + 2.25rem); } .aj-contact-office-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; } .aj-contact-office-row__left .aj-h3, .aj-contact-office-row__right .aj-body { font-size: 0.95rem; } .aj-contact-office-row__right .aj-link { gap: 0.4rem; } } /* ── Print Styles ── */ @media print { .aj-header, .aj-preloader, .aj-home-nav, .aj-home-gallery__progress, .aj-home-gallery__counter, .aj-home-copyright, .aj-search-overlay, .aj-gallery-lightbox { display: none !important; } body { background: #fff; color: #000; } .aj-section { page-break-inside: avoid; } } /* ───────────────────────────────────────────────────── COOKIE CONSENT BANNER (F046) ───────────────────────────────────────────────────── */ .aj-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border); backdrop-filter: blur(10px); padding: 1.5rem; } .aj-cookie-banner__content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .aj-cookie-banner__message { margin: 0; flex: 1; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-secondary); } .aj-cookie-banner__actions { display: flex; gap: 1rem; white-space: nowrap; } .aj-cookie-banner__btn { padding: 0.5rem 1.5rem; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border-radius: 2px; } .aj-cookie-banner__btn:hover { border-color: var(--color-text); background: var(--color-bg); } .aj-cookie-banner__btn--accept { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } .aj-cookie-banner__btn--accept:hover { background: var(--color-text-secondary); border-color: var(--color-text-secondary); } /* Mobile responsive */ @media (max-width: 768px) { .aj-cookie-banner__content { flex-direction: column; gap: 1rem; } .aj-cookie-banner__message { font-size: 0.8125rem; } .aj-cookie-banner__actions { width: 100%; justify-content: flex-end; } .aj-cookie-banner__btn { padding: 0.5rem 1rem; font-size: 0.8125rem; } } /* ==================================================================== SCATTER NAVIGATION (AJARC-1) ==================================================================== */ /* ── Persistent Logo ── */ .aj-persistent-logo { position: fixed; top: 1rem; /* left: var(--container-padding); */ left: 1rem; z-index: 200; display: flex; align-items: center; text-decoration: none; transition: opacity 0.3s ease; } .aj-persistent-logo img { height: 42px; width: auto; } @media (max-width: 1023px) { .aj-persistent-logo { top: 1rem; } .aj-persistent-logo img { height: 36px; } } @media (max-width: 768px) { .aj-header__inner { height: var(--header-height); gap: 0.75rem; } .aj-header__logo-spacer { flex-basis: 145px; min-width: 145px; } .aj-header__actions { gap: 0.15rem; } .aj-header__action-btn { width: 36px; height: 36px; } .aj-persistent-logo { top: 0.8rem; } .aj-persistent-logo img { height: 30px; } } @media (max-width: 480px) { .aj-header__logo-spacer { flex-basis: 120px; min-width: 120px; } .aj-persistent-logo { top: 1rem; } .aj-persistent-logo img { height: 26px; } } @media (max-width: 1023px) { body.aj-mobile-menu-open .aj-persistent-logo { opacity: 0 !important; pointer-events: none; } } /* Final header layout guard to avoid cascade regressions */ .aj-header .aj-header__inner { justify-content: space-between !important; } @media (max-width: 1023px) { body:has(.aj-header__nav.is-active) .aj-persistent-logo { opacity: 0 !important; pointer-events: none; } } /* PNG logo is black by default — invert for dark theme */ [data-theme="dark"] .aj-persistent-logo img { filter: invert(1); } /* Homepage: dark full-screen imagery — invert logo to white */ body.home-fullscreen .aj-persistent-logo img { filter: invert(1); } /* ── Scatter Trigger Button ── */ .aj-scatter-trigger { display: none; } @media (min-width: 1024px) { .aj-scatter-trigger { display: flex; } } /* ── Scatter Bar (ZHA-inspired floating bar) ── */ .aj-scatter-bar { display: none; position: fixed; z-index: 150; height: 40px; width: 280px; border-radius: 4px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, 0.1); padding: 0 1rem; align-items: center; gap: 0.75rem; cursor: grab; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); user-select: none; transition: opacity 0.3s ease; } .aj-scatter-bar.is-active { display: flex; } .aj-scatter-bar:active { cursor: grabbing; } .aj-scatter-bar.is-dragging { opacity: 0.7; transition: none; } /* "Enter" label */ .aj-scatter-bar__label { font-size: 0.875rem; font-weight: 400; color: #333; letter-spacing: 0.02em; flex-shrink: 0; pointer-events: none; margin-right: auto; } /* ── Theme toggle in bar ── */ .aj-scatter-bar__theme-toggle { background: none; border: none; color: #555; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; } .aj-scatter-bar__theme-toggle:hover { color: #000; } /* ── Discatter/expand button ── */ .aj-scatter-bar__discatter { background: none; border: none; color: #555; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .aj-scatter-bar__discatter:hover { color: #000; } /* ── Scatter Dropdown (hover-reveal, drops below bar) ── */ .aj-scatter-dropdown { position: absolute; top: 100%; left: 0; width: 280px; padding-top: 0; background: transparent; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.25s ease; } .aj-scatter-dropdown__inner { background: var(--color-bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem; } .aj-scatter-bar:hover .aj-scatter-dropdown, .aj-scatter-dropdown:hover, .aj-scatter-dropdown.is-focused { opacity: 1; pointer-events: auto; transform: translateY(0); } .aj-scatter-dropdown__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .aj-scatter-dropdown__menu li a { display: block; padding: 0.5rem 0.75rem; color: var(--color-text-muted); text-decoration: none; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 6px; transition: color 0.2s, background 0.2s; } .aj-scatter-dropdown__menu li a:hover, .aj-scatter-dropdown__menu li a.is-kb-focused, .aj-scatter-dropdown__menu li.current-menu-item a { color: var(--color-text); background: rgba(255,255,255,0.05); } .aj-scatter-dropdown__menu li a.is-kb-focused { outline: 2px solid var(--color-accent, #c8a96e); outline-offset: -2px; } /* ── Header in scattered state ── */ .aj-header.is-scattered { transform: translateY(-100%); pointer-events: none; } .aj-header.is-scattered .aj-scatter-bar { pointer-events: auto; } .aj-header.is-scattered .aj-header__nav, .aj-header.is-scattered .aj-header__actions { pointer-events: none; visibility: hidden; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .aj-scatter-bar::before { animation: none; } .aj-scatter-bar, .aj-scatter-dropdown { transition: none; } } /* ════════════════════════════════════════════════════════════ FLOATING PANELS & CONTROL BAR (Homepage desktop only) ═══════════════��═════════════════════════��══════════════════ */ /* ── Control Bar ── */ .aj-control-bar { position: fixed; z-index: 120; display: flex; align-items: center; height: 44px; border-radius: 6px; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 16px rgba(0,0,0,0.08); cursor: grab; user-select: none; touch-action: none; overflow: hidden; opacity: 0; transition: opacity 0.4s ease; } .aj-control-bar:active { cursor: grabbing; } .aj-control-bar.is-dragging { opacity: 0.7; transition: none; } .aj-control-bar__enter { flex: 4; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 1.25rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1a1a; text-decoration: none; transition: color 0.2s; white-space: nowrap; } .aj-control-bar__enter:hover { color: var(--color-accent); } .aj-control-bar__scatter, .aj-control-bar__hide { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; background: none; border: none; border-left: 1px solid rgba(0,0,0,0.08); color: #555; cursor: pointer; padding: 0 0.75rem; transition: color 0.2s, background 0.2s; } .aj-control-bar__scatter:hover, .aj-control-bar__hide:hover { color: #1a1a1a; background: rgba(0,0,0,0.04); } /* Control bar in hidden-content mode */ .aj-home--content-hidden .aj-control-bar { opacity: 0.40 !important; } .aj-home--content-hidden .aj-control-bar:hover { opacity: 1; } /* ── Floating Content Panels ── */ .aj-float-panel { position: fixed; z-index: 110; border-radius: 8px; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 16px rgba(0,0,0,0.08); color: #1a1a1a; cursor: grab; user-select: none; overflow: hidden; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; } .aj-float-panel:active { cursor: grabbing; } .aj-float-panel.is-dragging { opacity: 0.7; transition: none; z-index: 130; } .aj-float-panel--about { width: 280px; } .aj-float-panel--contact { width: 260px; } .aj-float-panel--projects { width: 300px; } .aj-float-panel--nav { width: 200px; } .aj-float-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.875rem; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: grab; touch-action: none; } .aj-float-panel__title { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #777; } .aj-float-panel__body { padding: 0.75rem 0.875rem; cursor: default; } .aj-float-panel__desc { font-size: 0.8125rem; line-height: 1.5; color: #444; margin-bottom: 0.75rem; } .aj-float-panel__stat { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; } .aj-float-panel__stat-num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--color-accent); } .aj-float-panel__stat-label { font-size: 0.75rem; color: #777; text-transform: uppercase; letter-spacing: 0.08em; } .aj-float-panel__link { display: inline-block; font-size: 0.75rem; color: var(--color-accent); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; } .aj-float-panel__link:hover { color: #1a1a1a; } .aj-float-panel__address { font-size: 0.8125rem; line-height: 1.5; color: #444; margin-bottom: 0.5rem; } .aj-float-panel__contact-link { display: block; font-size: 0.8125rem; color: #444; text-decoration: none; margin-bottom: 0.25rem; transition: color 0.2s; } .aj-float-panel__contact-link:hover { color: #1a1a1a; } .aj-float-panel__social { display: flex; gap: 0.75rem; margin: 0.75rem 0; } .aj-float-panel__social a { color: #777; transition: color 0.2s; } .aj-float-panel__social a:hover { color: #1a1a1a; } /* Swiper inside projects panel */ .aj-float-panel__swiper { overflow: hidden; border-radius: 4px; margin-bottom: 0.5rem; } .aj-float-panel__project-link { display: block; text-decoration: none; color: #1a1a1a; } .aj-float-panel__project-img { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; display: block; } .aj-float-panel__project-title { display: block; font-size: 0.6875rem; color: #777; margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nav panel menu */ .aj-float-panel__menu { list-style: none; margin: 0; padding: 0; } .aj-float-panel__menu li a { display: block; padding: 0.5rem 0; color: #444; text-decoration: none; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s, padding-left 0.2s; } .aj-float-panel__menu li a:hover, .aj-float-panel__menu li.current-menu-item a { color: #1a1a1a; padding-left: 0.5rem; } /* Hide panels when content-hidden mode */ .aj-home--content-hidden .aj-float-panel { opacity: 0; pointer-events: none; transform: scale(0.95); } /* ═══════════════════════════════════════════════════════════ INNER PAGE FLOATING NAV PANEL ═══════════════════════════════════════════════════════════ */ .aj-inner-nav { position: fixed; top: 1.25rem; right: var(--container-padding); z-index: 150; width: 165px; max-width: calc(100vw - (var(--container-padding) * 2)); border-radius: 12px; background: var(--color-bg-glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--color-border); box-shadow: 0 4px 24px rgba(0,0,0,0.08); transition: opacity 0.3s ease, transform 0.3s ease; } .aj-inner-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .aj-inner-nav.is-closed { opacity: 0; transform: translateY(-12px); pointer-events: none; } /* Hidden on homepage */ body.home-fullscreen .aj-inner-nav { display: none !important; } /* Hide redundant header hamburger on home — Menu floating panel exposes nav */ body.home-fullscreen .aj-header__mobile-toggle { display: none !important; } .aj-inner-nav__header { padding: 0.5rem 0.625rem 0.5rem; } .aj-inner-nav__header-actions { display: flex; align-items: stretch; gap: 0.375rem; flex-direction: column; } .aj-inner-nav__header-btn { flex: 1; min-width: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; --aj-inner-nav-header-btn-gap: 0.28rem; gap: var(--aj-inner-nav-header-btn-gap); padding: 0.35rem 0.4rem; border: 1px solid var(--color-border); border-radius: 8px; background: transparent; color: var(--color-text-muted); cursor: pointer; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s, background 0.2s, border-color 0.2s; } .aj-inner-nav__header-btn:hover { color: var(--color-text); background: transparent; border-color: var(--color-border); } .aj-inner-nav__theme-btn.aj-inner-nav__header-btn.aj-theme-toggle, .aj-inner-nav__menu-toggle.aj-inner-nav__header-btn.is-panel-open { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); transition: color 0.2s, padding-left 0.2s, background 0.2s; } .aj-inner-nav__theme-btn.aj-inner-nav__header-btn.aj-theme-toggle:hover, .aj-inner-nav__menu-toggle.aj-inner-nav__header-btn.is-panel-open:hover { color: var(--color-text); } /* Theme row: icon + label (moon/sun animation scoped to icon wrap) */ .aj-inner-nav__theme-btn.aj-theme-toggle { position: relative; overflow: visible; } .aj-inner-nav__theme-icon-wrap { position: relative; flex-shrink: 0; width: 14px; height: 14px; overflow: hidden; } .aj-inner-nav__theme-btn .aj-theme-toggle__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease; } .aj-inner-nav__btn-label { text-align: center; hyphens: auto; overflow-wrap: anywhere; } .aj-inner-nav__header-btn .aj-inner-nav__btn-label { flex: 1; min-width: 0; text-align: left; } /* Menu toggle: label left, close icon right (reopen: header .aj-inner-nav-trigger) */ .aj-inner-nav__menu-toggle { flex-direction: row; } .aj-inner-nav__menu-toggle .aj-inner-nav__btn-label { flex: 1; min-width: 0; text-align: left; } .aj-inner-nav__menu-toggle:not(.is-panel-open) { justify-content: center; } .aj-inner-nav__menu-toggle:not(.is-panel-open) .aj-inner-nav__btn-label:empty { display: none; } .aj-inner-nav__menu-toggle.is-panel-open { justify-content: flex-start; } .aj-inner-nav__theme-btn.aj-inner-nav__header-btn.aj-theme-toggle { flex-direction: row-reverse; gap: var(--aj-inner-nav-header-btn-gap); } .aj-inner-nav__toggle-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: currentColor; } .aj-inner-nav__toggle-icon--close { display: none; } .aj-inner-nav__toggle-icon--close .aj-icon { width: 14px; height: 14px; } .aj-inner-nav__menu-toggle.is-panel-open .aj-inner-nav__toggle-icon--close { display: flex; } .aj-inner-nav__divider { height: 0; margin: 0; border: 0; border-top: 1px solid var(--color-border); } .aj-inner-nav__shortcuts { padding: 0.45rem 0.75rem 0.5rem; font-size: 7px; } .aj-inner-nav__shortcut-line { margin: 0; font-size: inherit; line-height: 1.45; letter-spacing: 0.02em; color: var(--color-text-dim); } .aj-inner-nav__shortcut-line + .aj-inner-nav__shortcut-line { margin-top: 0.125rem; } .aj-inner-nav__menu { padding: 0.5rem 0; } .aj-inner-nav__list { list-style: none; margin: 0; padding: 0; } .aj-inner-nav__list li a { display: block; padding: 0.5rem 0.875rem; color: var(--color-text-muted); text-decoration: none; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s, padding-left 0.2s, background 0.2s; } .aj-inner-nav__list li a:hover, .aj-inner-nav__list li a.is-kb-focused, .aj-inner-nav__list li.current-menu-item a { color: var(--color-text); padding-left: 1.25rem; } .aj-inner-nav__list li a.is-kb-focused { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 4px; } /* ── Inner Nav Reopen Trigger ── */ .aj-inner-nav-trigger { position: fixed; top: 1.25rem; right: var(--container-padding); z-index: 145; width: 44px; height: 44px; border-radius: 10px; background: var(--color-bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; display: none; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; } .aj-inner-nav-trigger.is-visible { display: flex; } .aj-inner-nav-trigger:hover { color: var(--color-text); background: var(--color-bg-surface); } /* Hidden on homepage */ body.home-fullscreen .aj-inner-nav-trigger { display: none !important; } /* ════════��═══════════════════════════════════════════════════ MOBILE GUARDS — Restore header, hide new desktop features ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Editorial scatter — smaller, denser panels that may overlap. */ .aj-float-panel--about, .aj-float-panel--contact, .aj-float-panel--projects, .aj-float-panel--nav { width: clamp(135px, 40vw, 170px); max-width: 40vw; } .aj-float-panel { background: rgba(255,255,255,0.88); box-shadow: 0 1px 12px rgba(0,0,0,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .aj-float-panel__header { padding: 0.55rem 0.625rem; min-height: 44px; /* drag target */ border-bottom: 0.5px solid rgba(0,0,0,0.05); } .aj-float-panel__body { padding: 0.45rem 0.55rem; } .aj-float-panel__desc, .aj-float-panel__address, .aj-float-panel__contact-link { font-size: 0.625rem; line-height: 1.35; } .aj-float-panel__title { font-size: 0.5625rem; letter-spacing: 0.14em; } .aj-float-panel__stat-num { font-size: 1.4rem; } .aj-float-panel__link { font-size: 0.625rem; } .aj-float-panel__social { gap: 0.3rem; } .aj-float-panel__social a { width: 24px; height: 24px; } .aj-float-panel__project-img { height: 72px; } .aj-float-panel__menu li a { padding: 0.3rem 0; font-size: 0.6875rem; } /* Slim top-left control bar */ .aj-control-bar { width: min(200px, 60vw); height: 34px; max-width: 60vw; border-radius: 2px; } .aj-control-bar__enter { padding: 0 0.625rem; font-size: 0.625rem; letter-spacing: 0.1em; } .aj-control-bar__scatter, .aj-control-bar__hide { padding: 0 0.5rem; } /* Grid-nav arrows: keep visible, dim, smaller */ body.home-fullscreen .aj-home-nav__btn { width: 28px; height: 28px; opacity: 0.7; } body.home-fullscreen .aj-home-nav__btn svg { width: 14px; height: 14px; } .aj-inner-nav, .aj-inner-nav-trigger { display: none !important; } .aj-header--home-hidden { transform: none; opacity: 1; pointer-events: auto; } .aj-header--inner { display: flex; } } /* ── Mobile page label (About Us / Projects / People / Contact Us) ── */ .aj-page-label { display: flex; justify-content: center; align-items: center; padding: 0.625rem 1rem; margin-top: var(--header-height); background: var(--color-bg); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent); position: relative; z-index: 90; } .aj-page-label[hidden] { display: none !important; } .aj-page-label__text { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-variant: small-caps; color: var(--color-text); padding-bottom: 4px; border-bottom: 1px solid var(--color-border); } @media (min-width: 480px) { .aj-page-label__text { font-size: 0.8125rem; } } @media (min-width: 1024px) { .aj-page-label { display: none; } } /* On mobile/tablet the page label already provides spacing below the fixed header, so the page hero / first section shouldn't repeat the header-height offset. Scoped to the four pages that render the label. */ /* ── Mobile sticky search + category bar (Projects archive only, ≤1023px) ── */ .aj-mobile-filter-bar { display: none; } @media (max-width: 1023px) { .aj-mobile-filter-bar { display: flex; gap: 0.5rem; align-items: stretch; position: sticky; top: var(--header-height); z-index: 85; padding: 0.5rem 0.75rem; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); } .aj-mobile-filter-bar__search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .aj-mobile-filter-bar__search-icon { position: absolute; left: 0.625rem; width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none; } .aj-mobile-filter-bar__search-input { width: 100%; height: 40px; padding: 0 0.75rem 0 2.125rem; border: 1px solid var(--color-border); border-radius: 2px; background: var(--color-bg-surface); color: var(--color-text); font-family: var(--font-body); font-size: 0.8125rem; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .aj-mobile-filter-bar__search-input::placeholder { color: var(--color-text-muted); letter-spacing: 0.02em; } .aj-mobile-filter-bar__search-input:focus { outline: none; border-color: var(--color-text); } .aj-mobile-filter-bar__categories { position: relative; flex: 0 0 auto; } .aj-mobile-filter-bar__trigger { height: 40px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--color-border); border-radius: 2px; background: var(--color-bg-surface); color: var(--color-text); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-variant: small-caps; cursor: pointer; max-width: 45vw; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .aj-mobile-filter-bar__trigger:hover, .aj-mobile-filter-bar__trigger[aria-expanded="true"] { border-color: var(--color-text); } .aj-mobile-filter-bar__trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36vw; } .aj-mobile-filter-bar__caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--transition-fast); } .aj-mobile-filter-bar__trigger[aria-expanded="true"] .aj-mobile-filter-bar__caret { transform: rotate(180deg); } .aj-mobile-filter-bar__panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; max-width: 80vw; max-height: 60vh; overflow-y: auto; display: grid; gap: 2px; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg-elevated); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); z-index: 100; opacity: 0; transform: translateY(-6px); transition: opacity var(--transition-fast), transform var(--transition-fast); } .aj-mobile-filter-bar__panel:not([hidden]) { opacity: 1; transform: translateY(0); } .aj-mobile-filter-bar__option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.6rem 0.75rem; border: none; border-radius: 2px; text-align: left; background: transparent; color: var(--color-text-muted); font-family: var(--font-body); font-size: 0.8125rem; cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); } .aj-mobile-filter-bar__option:hover, .aj-mobile-filter-bar__option.is-active, .aj-mobile-filter-bar__option[aria-selected="true"] { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .aj-mobile-filter-bar__count { font-size: 0.75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } } @media (max-width: 1023px) { .aj-main[data-barba-namespace="about"] .aj-page-hero, .aj-main[data-barba-namespace="contact"] .aj-page-hero, .aj-main[data-barba-namespace="people"] .aj-page-hero { padding-top: 0 !important; padding-bottom: 0.5rem !important; min-height: 0; } /* Strip the redundant header-height offset on the first section of these pages — the page label already provides separation from the fixed header. */ .aj-main[data-barba-namespace="projects"] > .aj-section:first-of-type, .aj-main[data-barba-namespace="contact"] > .aj-section:first-of-type, .aj-main[data-barba-namespace="people"] > .aj-section:first-of-type, .aj-main[data-barba-namespace="about"] > .aj-section:first-of-type { padding-top: 0 !important; } /* Pull tighter the inner figure / first heading after the label */ .aj-main[data-barba-namespace="people"] .aj-team-main-section .aj-team-main { margin-top: 0; } .aj-main[data-barba-namespace="people"] .aj-team-main-section figure, .aj-main[data-barba-namespace="people"] .aj-team-main-section img { margin-top: 0; } }