/* ═══════════════════════════════════════════════════════════════ GLOBAL ARCHITECTS — style.css Complete Design System Dehradun, India | Est. 2017 ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── TABLE OF CONTENTS 1. CSS Custom Properties (Design Tokens) 2. Time-Aware Color Palettes 3. Reset & Normalize 4. Base Typography 5. Utility Classes 6. Blueprint Overlay 7. Custom Cursor 8. Navigation 9. Mobile Menu 10. Hero Section 11. Philosophy Section 12. Projects Preview 13. Stats Section 14. About Teaser 15. Process Section 16. CTA Section 17. Footer 18. Buttons 19. Section Labels 20. Print Styles ───────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ 1. CSS CUSTOM PROPERTIES — Design Tokens ═══════════════════════════════════════════════════════════════ */ :root { /* ── Typography ── */ --font-display: 'Playfair Display', serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace; /* Fluid type scale using clamp(min, preferred, max) */ --text-hero: clamp(3.5rem, 9vw, 9.5rem); --text-h1: clamp(2.5rem, 5.5vw, 5.5rem); --text-h2: clamp(1.875rem, 3.5vw, 3rem); --text-h3: clamp(1.25rem, 2vw, 1.75rem); --text-body: clamp(1rem, 1.15vw, 1.125rem); --text-sm: clamp(0.875rem, 1vw, 0.9375rem); --text-caption: clamp(0.75rem, 0.85vw, 0.8125rem); --text-label: clamp(0.6875rem, 0.8vw, 0.75rem); /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.6; --lh-relaxed: 1.75; --lh-loose: 1.9; /* Letter spacing */ --ls-tightest: -0.04em; --ls-tight: -0.02em; --ls-normal: 0em; --ls-wide: 0.06em; --ls-wider: 0.1em; --ls-widest: 0.18em; /* ── Spacing Scale ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* ── Layout ── */ --container-max: 1320px; --container-pad: clamp(1.25rem, 5vw, 4rem); --section-pad: clamp(4rem, 8vw, 9rem); /* ── Borders ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* ── Transitions ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-palette: 3000ms; /* ── Z-index Scale ── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 30; --z-overlay: 40; --z-modal: 50; --z-cursor: 300; --z-blueprint: 200; /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); --shadow-lg: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08); --shadow-xl: 0 24px 64px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10); } /* ═══════════════════════════════════════════════════════════════ 2. TIME-AWARE COLOR PALETTES Applied via [data-theme] on JS in theme.js sets the correct theme on load + toggles ═══════════════════════════════════════════════════════════════ */ /* ── DAWN (5am–8am) — Golden hour construction site ── */ [data-theme="dawn"] { --bg-primary: #FAF6ED; --bg-secondary: #F2EBD9; --bg-elevated: #EDE3CC; --bg-inverse: #2C1F0E; --text-primary: #1E140A; --text-secondary: #5C4530; --text-muted: #967A5E; --text-inverse: #FAF6ED; --accent-primary: #B8752A; --accent-hover: #9E5F18; --accent-subtle: #F0D9B5; --border-primary: #D4C4A8; --border-secondary:#E8DECA; --nav-bg: rgba(250, 246, 237, 0.92); --hero-overlay: rgba(30, 20, 10, 0.38); --blueprint-bg: #1A1208; --blueprint-line: #B8752A; } /* ── MORNING (8am–12pm) — Architect's bright studio ── */ [data-theme="morning"] { --bg-primary: #F8F5F0; --bg-secondary: #EEE9E1; --bg-elevated: #E6DFD4; --bg-inverse: #1C1A16; --text-primary: #1C1A16; --text-secondary: #5A5650; --text-muted: #928C84; --text-inverse: #F8F5F0; --accent-primary: #8B6914; --accent-hover: #6E5210; --accent-subtle: #EDE0C4; --border-primary: #C8C0B4; --border-secondary:#DDD5CA; --nav-bg: rgba(248, 245, 240, 0.94); --hero-overlay: rgba(28, 26, 22, 0.42); --blueprint-bg: #0E0D0A; --blueprint-line: #C4A882; } /* ── AFTERNOON (12pm–5pm) — Site visit hour ── */ [data-theme="afternoon"] { --bg-primary: #F5F0E8; --bg-secondary: #EAE3D8; --bg-elevated: #E0D7C8; --bg-inverse: #231F18; --text-primary: #231F18; --text-secondary: #6B6058; --text-muted: #9C9088; --text-inverse: #F5F0E8; --accent-primary: #A0522D; --accent-hover: #843F1E; --accent-subtle: #EDD5BC; --border-primary: #C8BEB2; --border-secondary:#DCD4C8; --nav-bg: rgba(245, 240, 232, 0.94); --hero-overlay: rgba(35, 31, 24, 0.44); --blueprint-bg: #120F0A; --blueprint-line: #C8A882; } /* ── EVENING (5pm–8pm) — Dusk rendering session ── */ [data-theme="evening"] { --bg-primary: #1A1E2E; --bg-secondary: #222636; --bg-elevated: #2A2F42; --bg-inverse: #F0EDE6; --text-primary: #EDE8DF; --text-secondary: #9A9590; --text-muted: #5E5C58; --text-inverse: #1A1E2E; --accent-primary: #C4A060; --accent-hover: #D4B478; --accent-subtle: #2E2818; --border-primary: #323648; --border-secondary:#282C3E; --nav-bg: rgba(26, 30, 46, 0.94); --hero-overlay: rgba(10, 12, 20, 0.55); --blueprint-bg: #0C0E18; --blueprint-line: #C4A060; } /* ── NIGHT (8pm–5am) — Late night studio mode ── */ [data-theme="night"] { --bg-primary: #0A0A08; --bg-secondary: #111110; --bg-elevated: #1A1A18; --bg-inverse: #F5F4F0; --text-primary: #F5F4F0; --text-secondary: #9A9890; --text-muted: #5A5856; --text-inverse: #0A0A08; --accent-primary: #C8A882; --accent-hover: #D4B896; --accent-subtle: #1E1A14; --border-primary: #2A2A28; --border-secondary:#1E1E1C; --nav-bg: rgba(10, 10, 8, 0.96); --hero-overlay: rgba(0, 0, 0, 0.58); --blueprint-bg: #050505; --blueprint-line: #C8A882; } /* ── Smooth palette transition ── */ html { transition: background-color var(--duration-palette) var(--ease-in-out), color var(--duration-palette) var(--ease-in-out); } /* ═══════════════════════════════════════════════════════════════ 3. RESET & NORMALIZE ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--bg-primary); color: var(--text-primary); } body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-normal); color: var(--text-primary); background-color: var(--bg-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--duration-palette) var(--ease-in-out), color var(--duration-palette) var(--ease-in-out); } /* Hide default cursor only when custom cursor is active */ @media (hover: hover) and (pointer: fine) { html.cursor-active *, html.cursor-active *::before, html.cursor-active *::after { cursor: none !important; } } .cursor { display: none !important; } img, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } address { font-style: normal; } /* Loading state — hide content until JS initializes */ body.js-loading .hero__content, body.js-loading .nav { opacity: 0; } /* ═══════════════════════════════════════════════════════════════ 4. BASE TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-primary); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } p { font-size: var(--text-body); line-height: var(--lh-normal); color: var(--text-secondary); } strong { font-weight: 600; color: var(--text-primary); } em { font-style: italic; } small { font-size: var(--text-caption); color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════ 5. UTILITY CLASSES ═══════════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .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; } .visually-hidden { @extend .sr-only; } /* ═══════════════════════════════════════════════════════════════ 6. BLUEPRINT ENTRY OVERLAY ═══════════════════════════════════════════════════════════════ */ .blueprint-overlay { position: fixed; inset: 0; z-index: var(--z-blueprint); background-color: var(--blueprint-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .blueprint-overlay.is-hidden { pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease-in); } /* SVG canvas */ .blueprint-svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* Grid lines */ .bp-line { stroke: var(--blueprint-line); stroke-width: 0.5; opacity: 0.2; stroke-dasharray: 1440; stroke-dashoffset: 1440; } .bp-line--v { stroke-dasharray: 900; stroke-dashoffset: 900; } .bp-line--ground { stroke-width: 1; opacity: 0.5; stroke-dasharray: 1040; stroke-dashoffset: 1040; } .bp-line--dim { stroke-width: 0.5; opacity: 0.4; stroke-dasharray: 600; stroke-dashoffset: 600; } /* Building outline rects */ .bp-rect { fill: none; stroke: var(--blueprint-line); stroke-width: 1; opacity: 0.7; stroke-dasharray: 2200; stroke-dashoffset: 2200; } .bp-rect--detail { stroke-width: 0.75; opacity: 0.5; stroke-dasharray: 360; stroke-dashoffset: 360; } /* Text labels */ .bp-text { fill: var(--blueprint-line); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-anchor: middle; opacity: 0; } .bp-text--label { font-size: 14px; font-weight: 500; letter-spacing: 0.2em; } .bp-text--sublabel { font-size: 8px; opacity: 0.5; } .bp-text--compass { font-size: 9px; font-weight: 500; } /* Compass circle */ .bp-compass circle { fill: none; stroke: var(--blueprint-line); stroke-width: 0.75; opacity: 0.4; } .bp-compass line { stroke: var(--blueprint-line); stroke-width: 0.75; opacity: 0.4; } /* Skip button */ .blueprint-skip { position: absolute; top: var(--space-8); right: var(--space-8); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--ls-wider); color: var(--blueprint-line); opacity: 0.6; padding: var(--space-2) var(--space-4); border: 1px solid currentColor; border-radius: var(--radius-sm); transition: opacity var(--duration-base) var(--ease-out); text-transform: uppercase; } .blueprint-skip:hover { opacity: 1; } /* Firm label */ .blueprint-label { position: absolute; bottom: var(--space-12); left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; display: flex; flex-direction: column; gap: var(--space-1); } .blueprint-label__firm { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 500; color: var(--blueprint-line); letter-spacing: var(--ls-wide); } .blueprint-label__location { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--ls-widest); color: var(--blueprint-line); opacity: 0.6; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════════════ 7. CUSTOM CURSOR ═══════════════════════════════════════════════════════════════ */ @media (hover: hover) and (pointer: fine) { .cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; mix-blend-mode: normal; } /* Crosshair — default state */ .cursor__crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .cursor__h, .cursor__v { position: absolute; background-color: var(--accent-primary); border-radius: var(--radius-full); } .cursor__h { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); } .cursor__v { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } /* View circle — hover over project images */ .cursor__circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 80px; height: 80px; border-radius: var(--radius-full); border: 1px solid var(--accent-primary); display: flex; align-items: center; justify-content: center; opacity: 0; transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration-slow) var(--ease-out); } .cursor__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-wider); color: var(--accent-primary); text-transform: uppercase; opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); } /* Dot — hover over links/buttons */ .cursor__dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 6px; height: 6px; border-radius: var(--radius-full); background-color: var(--accent-primary); opacity: 0; transition: transform var(--duration-base) var(--ease-spring), opacity var(--duration-base) var(--ease-out); } /* State: hovering project image */ .cursor--view .cursor__crosshair { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } .cursor--view .cursor__circle { transform: translate(-50%, -50%) scale(1); opacity: 1; } .cursor--view .cursor__label { opacity: 1; } /* State: hovering link/button */ .cursor--link .cursor__crosshair { transform: translate(-50%, -50%) scale(0.6); opacity: 0.4; } .cursor--link .cursor__dot { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* State: hovering text */ .cursor--text .cursor__crosshair { transform: translate(-50%, -50%) scaleX(0.1) scaleY(1.5); } } /* ═══════════════════════════════════════════════════════════════ 8. NAVIGATION ═══════════════════════════════════════════════════════════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); padding: var(--space-5) 0; background-color: transparent; opacity: 0; transform: translateY(-8px); transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out), background-color var(--duration-slow) var(--ease-out), padding var(--duration-slow) var(--ease-out); pointer-events: none; } .nav.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; } .nav.is-scrolled { background-color: var(--nav-bg); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); padding: var(--space-4) 0; box-shadow: 0 1px 0 var(--border-secondary); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Logo */ .nav__logo { flex-shrink: 0; color: var(--text-primary); transition: opacity var(--duration-base) var(--ease-out); } .nav__logo:hover { opacity: 0.7; } .nav__logo-svg { width: 130px; height: auto; } /* Desktop links */ .nav__links { display: flex; align-items: center; gap: var(--space-10); } .nav__link { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--ls-wide); color: var(--text-secondary); position: relative; padding-bottom: 2px; transition: color var(--duration-base) var(--ease-out); } .nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: var(--accent-primary); transition: width var(--duration-slow) var(--ease-out); } .nav__link:hover { color: var(--text-primary); } .nav__link:hover::after, .nav__item--active .nav__link::after { width: 100%; } .nav__item--active .nav__link { color: var(--text-primary); } /* Nav actions */ .nav__actions { display: flex; align-items: center; gap: var(--space-5); flex-shrink: 0; } /* Theme toggle */ .nav__theme-toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border-radius: var(--radius-full); transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } .nav__theme-toggle svg { width: 18px; height: 18px; } .nav__theme-toggle:hover { color: var(--text-primary); background-color: var(--bg-secondary); } /* CTA button in nav */ .nav__cta { font-family: var(--font-body); font-size: var(--text-caption); font-weight: 500; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bg-primary); background-color: var(--text-primary); padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .nav__cta:hover { background-color: var(--accent-primary); color: var(--bg-primary); transform: translateY(-1px); } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; padding: var(--space-2); } .nav__hamburger-line { display: block; width: 22px; height: 1.5px; background-color: var(--text-primary); transform-origin: center; transition: transform var(--duration-slow) var(--ease-in-out), opacity var(--duration-base) var(--ease-out); } .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ═══════════════════════════════════════════════════════════════ 9. MOBILE MENU ═══════════════════════════════════════════════════════════════ */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-modal); background-color: var(--bg-inverse); display: flex; flex-direction: column; justify-content: center; padding: var(--container-pad); overflow: hidden; /* JS toggles hidden attribute */ } .mobile-menu[hidden] { display: none; } /* Animated bg lines */ .mobile-menu__lines { position: absolute; inset: 0; pointer-events: none; } .mobile-menu__line { position: absolute; left: 0; right: 0; height: 1px; background-color: var(--text-inverse); opacity: 0.05; transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease-out); } .mobile-menu__line:nth-child(1) { top: 33.33%; } .mobile-menu__line:nth-child(2) { top: 50%; transition-delay: 0.05s; } .mobile-menu__line:nth-child(3) { top: 66.66%; transition-delay: 0.1s; } .mobile-menu.is-open .mobile-menu__line { transform: scaleX(1); } /* Close button */ .mobile-menu__close { position: absolute; top: var(--space-8); right: var(--space-8); font-size: 1.25rem; color: var(--text-inverse); opacity: 0.6; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: opacity var(--duration-base) var(--ease-out); } .mobile-menu__close:hover { opacity: 1; } /* Nav links */ .mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-6); } .mobile-menu__item { overflow: hidden; } .mobile-menu__link { display: flex; align-items: baseline; gap: var(--space-6); font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 500; color: var(--text-inverse); line-height: 1; letter-spacing: var(--ls-tight); transform: translateY(100%); display: block; transition: transform var(--duration-slower) var(--ease-out), color var(--duration-base) var(--ease-out); } .mobile-menu.is-open .mobile-menu__link { transform: translateY(0); } .mobile-menu__item:nth-child(1) .mobile-menu__link { transition-delay: 0.05s; } .mobile-menu__item:nth-child(2) .mobile-menu__link { transition-delay: 0.10s; } .mobile-menu__item:nth-child(3) .mobile-menu__link { transition-delay: 0.15s; } .mobile-menu__item:nth-child(4) .mobile-menu__link { transition-delay: 0.20s; } .mobile-menu__link:hover { color: var(--accent-primary); } .mobile-menu__num { font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 300; letter-spacing: var(--ls-wider); color: var(--accent-primary); opacity: 0.8; display: inline-block; vertical-align: middle; } /* Footer info */ .mobile-menu__footer { position: absolute; bottom: var(--space-10); left: var(--container-pad); display: flex; flex-direction: column; gap: var(--space-1); } .mobile-menu__location { font-size: var(--text-caption); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-inverse); opacity: 0.4; } .mobile-menu__email { font-size: var(--text-sm); color: var(--accent-primary); transition: opacity var(--duration-base) var(--ease-out); } .mobile-menu__email:hover { opacity: 0.7; } /* ═══════════════════════════════════════════════════════════════ 10. HERO SECTION ═══════════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; } /* Background video */ .hero__media { position: absolute; inset: 0; z-index: var(--z-base); background-color: #1C1A16; } .hero__video { width: 100%; height: 100%; object-fit: contain; object-position: center center; opacity: 0; transition: opacity 0.8s var(--ease-out); } .hero.is-loaded .hero__video { opacity: 1; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.06) 70%, transparent 100% ); } /* Scroll hint */ .hero__scroll-hint { position: absolute; bottom: var(--space-12); right: var(--space-10); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); z-index: var(--z-raised); } .hero__scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4)); animation: scrollLineAnim 2s var(--ease-in-out) infinite; } .hero__scroll-text { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: rgba(255,255,255,0.5); writing-mode: vertical-rl; } @keyframes scrollLineAnim { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Content */ .hero__content { position: relative; z-index: var(--z-raised); padding: var(--space-40) var(--container-pad) var(--space-20); max-width: var(--container-max); width: 100%; margin-inline: auto; } /* Eyebrow */ .hero__eyebrow { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-widest); text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: var(--space-6); opacity: 0; } .hero__eyebrow-line { display: block; width: 32px; height: 1px; background-color: var(--accent-primary); opacity: 0.8; } /* Heading — kinetic */ .hero__heading { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); color: #ffffff; margin-bottom: var(--space-6); overflow: hidden; } .hero__heading-line { display: block; } .hero__heading-line--accent { color: var(--accent-primary); } /* Tagline */ .hero__tagline { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 300; letter-spacing: var(--ls-wider); color: rgba(255,255,255,0.75); text-transform: uppercase; margin-bottom: var(--space-6); opacity: 0; } /* Description */ .hero__desc { font-size: var(--text-body); line-height: var(--lh-relaxed); color: rgba(255,255,255,0.65); max-width: 540px; margin-bottom: var(--space-10); opacity: 0; } /* CTAs */ .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); opacity: 0; } /* Badge */ .hero__badge { position: absolute; right: var(--container-pad); bottom: var(--space-20); display: flex; flex-direction: column; align-items: flex-end; opacity: 0; } .hero__badge-num { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 800; color: var(--accent-primary); line-height: 1; letter-spacing: var(--ls-tight); } .hero__badge-text { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-widest); text-transform: uppercase; color: rgba(255,255,255,0.5); text-align: right; line-height: 1.4; } /* ═══════════════════════════════════════════════════════════════ 11. PHILOSOPHY SECTION ═══════════════════════════════════════════════════════════════ */ .philosophy { padding: var(--section-pad) 0; background-color: var(--bg-secondary); } .philosophy__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Quote */ .philosophy__quote { max-width: 820px; margin: var(--space-10) 0 var(--space-16); } .philosophy__quote-text { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; font-style: italic; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-primary); } .philosophy__quote-footer { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border-secondary); } .philosophy__cite { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-body); font-size: var(--text-sm); font-style: normal; color: var(--text-muted); letter-spacing: var(--ls-wide); } .philosophy__cite-role { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--accent-primary); } /* Pillars */ .philosophy__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--border-secondary); } .philosophy__pillar { display: flex; flex-direction: column; gap: var(--space-4); } .philosophy__pillar-num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-widest); color: var(--accent-primary); text-transform: uppercase; } .philosophy__pillar-title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; color: var(--text-primary); letter-spacing: var(--ls-tight); } .philosophy__pillar-desc { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════════ 12. PROJECTS PREVIEW ═══════════════════════════════════════════════════════════════ */ .projects-preview { padding: var(--section-pad) 0; background-color: var(--bg-primary); } .projects-preview__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Header */ .projects-preview__header { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-12); align-items: end; } .projects-preview__heading { grid-column: 2; grid-row: 1 / 3; font-size: var(--text-h2); text-align: right; } .projects-preview__view-all { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--accent-primary); grid-column: 2; grid-row: 3; text-align: right; padding-bottom: var(--space-1); border-bottom: 1px solid var(--accent-primary); transition: color var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .projects-preview__view-all:hover { opacity: 0.7; } /* Projects grid — asymmetric layout */ .projects-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: var(--space-4); } /* Large card spans full height on left */ .project-card--large { grid-row: 1 / 3; } /* Project card */ .project-card { position: relative; overflow: hidden; border-radius: var(--radius-md); background-color: var(--bg-secondary); } .project-card__link { display: block; height: 100%; position: relative; } /* Media */ .project-card__media { position: relative; overflow: hidden; aspect-ratio: 3/2; background-color: var(--bg-elevated); } .project-card--large .project-card__media { aspect-ratio: unset; height: 680px; } .project-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); } .project-card:hover .project-card__img { transform: scale(1.04); } /* Material texture overlay */ .project-card__texture { position: absolute; inset: 0; opacity: 0; mix-blend-mode: overlay; transition: opacity 0.4s var(--ease-out); background-size: cover; background-position: center; } [data-material="concrete"] .project-card__texture { background-image: url('../assets/textures/concrete.webp'); } [data-material="glass"] .project-card__texture { background-image: url('../assets/textures/glass.webp'); } [data-material="stone"] .project-card__texture { background-image: url('../assets/textures/stone.webp'); } [data-material="wood"] .project-card__texture { background-image: url('../assets/textures/wood.webp'); } .project-card:hover .project-card__texture { opacity: 0.2; } .project-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 45%, transparent 70% ); opacity: 0.7; transition: opacity 0.4s var(--ease-out); } .project-card:hover .project-card__overlay { opacity: 1; } /* Info */ .project-card__info { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6); z-index: var(--z-raised); } .project-card__meta { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: var(--space-2); } .project-card__separator { opacity: 0.4; } .project-card__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; color: #ffffff; letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin-bottom: var(--space-2); transition: transform var(--duration-slow) var(--ease-out); } .project-card:hover .project-card__title { transform: translateY(-4px); } .project-card__material { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); color: var(--accent-primary); opacity: 0; transform: translateY(8px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .project-card:hover .project-card__material { opacity: 1; transform: translateY(0); } .project-card__arrow { position: absolute; top: var(--space-6); right: var(--space-6); font-size: 1.25rem; color: rgba(255,255,255,0.5); transform: translate(-4px, 4px); opacity: 0; transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .project-card:hover .project-card__arrow { opacity: 1; transform: translate(0, 0); } /* ═══════════════════════════════════════════════════════════════ 13. STATS SECTION ═══════════════════════════════════════════════════════════════ */ .stats { padding: var(--section-pad) 0 0; background-color: var(--bg-primary); overflow: hidden; } .stats__container { max-width: var(--container-max); margin-inline: auto; } .stats__inner { padding-inline: var(--container-pad); } .stats__grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 0; padding: var(--space-16) 0; border-top: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); } .stats__item { text-align: center; padding: var(--space-4) var(--space-6); } .stats__divider { width: 1px; height: 64px; background-color: var(--border-secondary); flex-shrink: 0; } .stats__label { display: block; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); } .stats__value { display: flex; align-items: baseline; justify-content: center; gap: var(--space-1); } .stats__num { font-family: var(--font-display); font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 700; color: var(--text-primary); line-height: 1; letter-spacing: var(--ls-tight); } .stats__unit { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 400; color: var(--accent-primary); } /* Marquee */ .stats__marquee { overflow: hidden; background-color: var(--accent-primary); padding: var(--space-4) 0; margin-top: var(--space-16); white-space: nowrap; } .stats__marquee-track { display: inline-flex; align-items: center; gap: var(--space-8); animation: marquee 28s linear infinite; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bg-primary); } .stats__marquee-dot { opacity: 0.5; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════════════════ 14. ABOUT TEASER ═══════════════════════════════════════════════════════════════ */ .about-teaser { padding: var(--section-pad) 0; background-color: var(--bg-secondary); } .about-teaser__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(3rem, 6vw, 8rem); align-items: center; } /* Image side */ .about-teaser__media { position: relative; } .about-teaser__img-wrap { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4/5; background-color: var(--bg-elevated); } .about-teaser__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); } .about-teaser__img-wrap:hover .about-teaser__img { transform: scale(1.03); } /* Floating credential card */ .about-teaser__card { position: absolute; bottom: calc(-1 * var(--space-8)); right: calc(-1 * var(--space-8)); background-color: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-1); box-shadow: var(--shadow-lg); } .about-teaser__card-name { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; color: var(--text-primary); } .about-teaser__card-title { font-size: var(--text-sm); color: var(--text-secondary); } .about-teaser__card-year { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--accent-primary); margin-top: var(--space-2); } /* Text side */ .about-teaser__content { display: flex; flex-direction: column; gap: var(--space-6); } .about-teaser__heading { font-size: var(--text-h2); line-height: var(--lh-tight); } .about-teaser__text { font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--text-secondary); } /* Skills */ .about-teaser__skills { display: flex; flex-wrap: wrap; gap: var(--space-2); } .about-teaser__skill { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-primary); border-radius: var(--radius-full); transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } .about-teaser__skill:hover { color: var(--accent-primary); border-color: var(--accent-primary); background-color: var(--accent-subtle); } /* ═══════════════════════════════════════════════════════════════ 15. PROCESS SECTION ═══════════════════════════════════════════════════════════════ */ .process { padding: var(--section-pad) 0; background-color: var(--bg-primary); } .process__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .process__header { margin-bottom: var(--space-16); max-width: 640px; } .process__heading { font-size: var(--text-h2); margin-top: var(--space-6); } .process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .process__step { padding-right: var(--space-10); } .process__step:not(:last-child) { border-right: 1px solid var(--border-secondary); margin-right: 0; } .process__step:not(:first-child) { padding-left: var(--space-10); padding-right: 0; } .process__step:nth-child(2) { padding-right: var(--space-10); } .process__step-inner { display: flex; flex-direction: column; gap: var(--space-6); height: 100%; position: relative; } .process__step-num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); color: var(--accent-primary); display: block; } .process__step-title { font-family: var(--font-display); font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 600; color: var(--text-primary); letter-spacing: var(--ls-tight); } .process__step-desc { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════════ 16. CTA SECTION ═══════════════════════════════════════════════════════════════ */ .cta-section { padding: var(--section-pad) 0; background-color: var(--bg-secondary); position: relative; overflow: hidden; text-align: center; } .cta-section__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); position: relative; z-index: var(--z-raised); } .cta-section__bg-lines { position: absolute; inset: 0; color: var(--text-primary); pointer-events: none; } .cta-section__bg-lines svg { width: 100%; height: 100%; } .cta-section__question { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--accent-primary); margin-bottom: var(--space-6); } .cta-section__heading { font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: var(--space-6); } .cta-section__sub { font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--text-secondary); margin-bottom: var(--space-10); } .cta-section__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-8); } .cta-section__email { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--ls-wide); color: var(--text-secondary); border-bottom: 1px solid var(--border-primary); padding-bottom: 2px; transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .cta-section__email:hover { color: var(--accent-primary); border-color: var(--accent-primary); } /* ═══════════════════════════════════════════════════════════════ 17. FOOTER ═══════════════════════════════════════════════════════════════ */ .footer { background-color: var(--bg-inverse); color: var(--text-inverse); padding: var(--space-16) 0 var(--space-10); } .footer__container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-10); } .footer__logo { color: var(--text-inverse); transition: opacity var(--duration-base) var(--ease-out); } .footer__logo:hover { opacity: 0.7; } .footer__logo-svg { width: 140px; height: auto; } .footer__philosophy { font-family: var(--font-display); font-size: var(--text-sm); font-style: italic; color: var(--text-inverse); opacity: 0.6; max-width: 280px; line-height: var(--lh-relaxed); } .footer__social { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; } .footer__social-link { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-inverse); opacity: 0.5; transition: opacity var(--duration-base) var(--ease-out); } .footer__social-link:hover { opacity: 1; } .footer__divider { width: 100%; height: 1px; background-color: var(--text-inverse); opacity: 0.1; margin-bottom: var(--space-8); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .footer__address { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-caption); color: var(--text-inverse); opacity: 0.5; } .footer__firm { font-weight: 500; opacity: 1; } .footer__sep { opacity: 0.3; } .footer__email { transition: opacity var(--duration-base) var(--ease-out); } .footer__email:hover { opacity: 1; } .footer__copy { font-size: var(--text-label); color: var(--text-inverse); opacity: 0.3; } /* ═══════════════════════════════════════════════════════════════ 18. BUTTONS ═══════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm); border: 1.5px solid transparent; min-height: 50px; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: none; } /* Primary — solid accent */ .btn--primary { background-color: var(--accent-primary); color: var(--bg-primary); border-color: var(--accent-primary); } .btn--primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); } /* Ghost — transparent with white border (for hero) */ .btn--ghost { background-color: transparent; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.4); } .btn--ghost:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); color: #ffffff; } /* Outline — transparent with text-color border */ .btn--outline { background-color: transparent; color: var(--text-primary); border-color: var(--border-primary); } .btn--outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); } /* Large */ .btn--large { padding: var(--space-5) var(--space-10); font-size: var(--text-body); min-height: 58px; } /* ═══════════════════════════════════════════════════════════════ 19. SECTION LABELS ═══════════════════════════════════════════════════════════════ */ .section-label { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--accent-primary); } .section-label__line { display: block; width: 28px; height: 1px; background-color: currentColor; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ 20. PRINT STYLES ═══════════════════════════════════════════════════════════════ */ @media print { .blueprint-overlay, .cursor, .nav, .hero__scroll-hint, .stats__marquee, .mobile-menu { display: none !important; } body { color: #000; background: #fff; font-size: 12pt; } .hero { min-height: auto; padding: 2rem 0; } .hero__media { display: none; } a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; color: #666; } h1, h2, h3 { page-break-after: avoid; } .projects-grid, .philosophy__pillars, .process__steps { grid-template-columns: 1fr; } }