/* ============================================================ Raman Shah — portfolio styles Fonts are loaded in index.html (Fraunces + Hanken Grotesk) ============================================================ */ /* ============================ 1. DESIGN TOKENS One place to change colours, type sizes and spacing. ============================ */ :root { /* --- Colour (concrete charcoal / ivory / blueprint steel) --- */ --color-bg: #0C0D0E; --color-bg-raised: #16181A; --color-text: #F1F0EC; --color-text-muted: #8C8F90; --color-accent: #6E93A3; --color-accent-soft: #8FB0BC; --color-border: #232527; --color-border-soft: #2C2F31; /* --- Type families --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* --- Fluid type scale (min size .. max size) --- */ --step-sm: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem); --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.40rem); --step-2: clamp(1.55rem, 1.35rem + 1.00vw, 2.20rem); --step-3: clamp(2.00rem, 1.60rem + 2.00vw, 3.20rem); --step-4: clamp(2.60rem, 1.90rem + 3.40vw, 4.40rem); --step-hero: clamp(2.90rem, 1.40rem + 7.20vw, 7.00rem); /* --- Spacing scale --- */ --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* --- Layout --- */ --container: 1180px; --measure: 62ch; /* comfortable reading line-length */ /* --- Motion --- */ --ease-out: cubic-bezier(0.19, 1, 0.22, 1); } /* ============================ 2. RESET ============================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; font-variant-numeric: oldstyle-nums; text-rendering: optimizeLegibility; overflow-x: hidden; } /* --- Lenis smooth scroll --- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* --- Typographic finish --- */ h1, h2, h3, h4, .core-list, .about-text .lead, .av-close-lead, .footer-mark { text-wrap: balance; } p { text-wrap: pretty; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ============================ 3. TYPOGRAPHY Fraunces for headings, Hanken Grotesk for everything else. ============================ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; } h1 { font-weight: 300; font-size: var(--step-hero); letter-spacing: -0.03em; line-height: 1.02; font-variation-settings: "opsz" 144; } h2 { font-size: var(--step-4); font-variation-settings: "opsz" 96; } h3 { font-size: var(--step-2); font-variation-settings: "opsz" 48; } h4 { font-family: var(--font-sans); font-size: var(--step-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--color-accent); } p { max-width: var(--measure); } /* small kicker line used in hero + contact */ .eyebrow { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--color-accent); margin-bottom: var(--space-md); } /* intro paragraph that sits under a section heading */ .section-intro { color: var(--color-text-muted); font-size: var(--step-1); max-width: 46ch; margin-top: var(--space-md); margin-bottom: var(--space-xl); } /* ============================ 4. LAYOUT PRIMITIVES ============================ */ section { max-width: var(--container); margin-inline: auto; padding-block: var(--space-3xl); padding-inline: var(--space-md); scroll-margin-top: 90px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 500; background: var(--color-accent); color: var(--color-bg); padding: 12px 20px; font-size: var(--step-sm); } .skip-link:focus { left: var(--space-md); top: var(--space-md); } /* ============================ 5. NAVIGATION ============================ */ #navbar { position: fixed; inset: 0 0 auto 0; z-index: 100; background-color: transparent; border-bottom: 1px solid transparent; transition: background-color 0.4s ease, border-color 0.4s ease; } #navbar.scrolled { background-color: rgba(11, 12, 14, 0.85); backdrop-filter: blur(10px); border-bottom-color: var(--color-border); } .nav-inner { max-width: var(--container); margin-inline: auto; padding: 22px var(--space-md); display: flex; justify-content: space-between; align-items: center; } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em; } .nav-mark { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-accent); } .nav-links { display: flex; gap: 40px; } .nav-links a { position: relative; font-size: var(--step-sm); color: var(--color-text-muted); padding-bottom: 4px; background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: color 0.35s ease, background-size 0.45s var(--ease-out); } .nav-links a:hover, .nav-links a:focus-visible { color: var(--color-text); background-size: 100% 1px; } /* scroll-spy: current section */ .nav-links a.is-current { color: var(--color-text); background-size: 100% 1px; } /* ============================ 6. HERO Full-bleed video background with a dark gradient over it. ============================ */ #hero { position: relative; max-width: none; margin: 0; padding-block: 0; padding-inline: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(11, 12, 14, 0.45) 0%, rgba(11, 12, 14, 0.70) 55%, rgba(11, 12, 14, 0.96) 100% ); } .topo-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-accent); opacity: 0.14; z-index: 0; } .hero-content { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin-inline: auto; padding: 0 var(--space-md); } #hero h1 { max-width: 16ch; margin-bottom: var(--space-lg); } .hero-buttons { display: flex; gap: var(--space-lg); flex-wrap: wrap; } /* ============================ 7. HERO LINKS Same animated-underline device as .work-link / nav-links — the hero's calls to action read as text, not boxed buttons. ============================ */ .btn { --btn-shift: 0px; display: inline-block; padding-bottom: 7px; font-size: var(--step-1); font-weight: 500; letter-spacing: 0.01em; cursor: pointer; background-repeat: no-repeat; background-position: 0 100%; transition: transform 0.35s var(--ease-out), color 0.35s ease, background-size 0.45s var(--ease-out); transform: translate(var(--btn-shift), var(--btn-shift)); } .btn-primary { color: var(--color-text); background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-size: 100% 1px; } .btn-primary:hover { color: var(--color-accent-soft); } .btn-secondary { color: var(--color-text-muted); background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-size: 0% 1px; } .btn-secondary:hover { color: var(--color-text); background-size: 100% 1px; } /* ============================ 8. SECTION HEADINGS RHYTHM ============================ */ section > h2 { margin-bottom: 0; } /* ============================ 9. ABOUT ============================ */ .about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xl); align-items: start; } .about-text .lead { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.28; color: var(--color-text); max-width: 24ch; margin: var(--space-md) 0 var(--space-lg); } .about-text p + p { margin-top: var(--space-md); } .about-text p:not(.lead) { color: var(--color-text-muted); } .about-image { position: sticky; top: 110px; } .about-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; filter: grayscale(1) contrast(1.03) brightness(0.95); transition: filter 0.9s var(--ease-out); } .about-now { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .about-now h3 { font-size: var(--step-1); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-md); } .about-now ul { display: flex; flex-direction: column; gap: var(--space-xs); } .about-now li { position: relative; padding-left: 26px; color: var(--color-text-muted); max-width: var(--measure); } .about-now li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 14px; height: 1px; background-color: var(--color-accent); } .about-now p { color: var(--color-text-muted); } /* ============================ 10. AVIATION ============================ */ .av-lead { display: grid; gap: var(--space-md); margin-top: var(--space-md); max-width: 62ch; } .av-lead p { color: var(--color-text-muted); max-width: none; } .av-lead p:first-child { color: var(--color-text); font-size: var(--step-1); } .av-photo { margin-top: var(--space-2xl); } .av-photo img { width: 100%; aspect-ratio: 1600 / 2263; max-height: 60vh; object-fit: cover; border-radius: 4px; filter: grayscale(1) contrast(1.03) brightness(0.95); transition: filter 0.9s var(--ease-out); } .reveal.in-view .av-photo img { filter: none; } .av-block { margin-top: var(--space-2xl); } .av-block > h3 { font-family: var(--font-sans); font-size: var(--step-1); font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-lg); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); } /* --- Flight-path journey (the one signature animation) --- */ .journey-svg { width: 100%; height: auto; overflow: visible; display: block; margin-bottom: var(--space-md); } .journey-svg .j-base { stroke: var(--color-border-soft); stroke-width: 1; } .journey-svg .j-line { stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; } .journey-svg .j-dot { fill: var(--color-bg); stroke: var(--color-border-soft); stroke-width: 1.5; opacity: 0.4; } .journey-svg .j-plane { fill: var(--color-accent); transform-box: view-box; transform-origin: 0 0; transform: translateX(0); opacity: 0; } .journey.is-flying .j-line { animation: j-draw 3.2s linear forwards; } .journey.is-flying .j-dot { animation: j-pop 0.5s ease forwards; } .journey.is-flying .j-dot:nth-of-type(1) { animation-delay: 0.15s; } .journey.is-flying .j-dot:nth-of-type(2) { animation-delay: 0.72s; } .journey.is-flying .j-dot:nth-of-type(3) { animation-delay: 1.29s; } .journey.is-flying .j-dot:nth-of-type(4) { animation-delay: 1.86s; } .journey.is-flying .j-dot:nth-of-type(5) { animation-delay: 2.43s; } .journey.is-flying .j-dot:nth-of-type(6) { animation-delay: 3.0s; } .journey.is-flying .j-plane { animation: j-fly 3.2s linear forwards; } @keyframes j-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes j-pop { 0% { opacity: 0.4; } 60% { opacity: 1; r: 5; } 100% { opacity: 1; } } @keyframes j-fly { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(500px); opacity: 0; } } .journey-stops { display: grid; grid-template-columns: repeat(var(--stop-count, 6), 1fr); gap: var(--space-sm); } .journey-stop { text-align: center; opacity: 0.32; } .journey.is-flying .journey-stop { animation: j-light 0.5s ease forwards; animation-delay: calc(var(--i) * 0.57s); } @keyframes j-light { to { opacity: 1; } } .journey-code { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--color-text); line-height: 1.1; } .journey-name { display: block; margin-top: 4px; font-size: var(--step-sm); color: var(--color-text-muted); } /* --- Aircraft & simulator --- */ .aircraft-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-xl); } .aircraft-card img { width: 100%; aspect-ratio: 3 / 2; min-height: 160px; object-fit: cover; border-radius: 4px; background-color: var(--color-bg-raised); filter: grayscale(1) contrast(1.03) brightness(0.95); transition: filter 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .aircraft-card:hover img { filter: none; transform: scale(1.02); } .aircraft-card h4 { font-family: var(--font-display); font-size: var(--step-1); color: var(--color-text); margin: var(--space-sm) 0 4px; } .aircraft-card p { color: var(--color-text-muted); font-size: var(--step-sm); max-width: 42ch; } #journey.in-view .aircraft-card { animation: rise-in 0.7s var(--ease-out) backwards; } #journey.in-view .aircraft-card:nth-child(2) { animation-delay: 0.08s; } #journey.in-view .aircraft-card:nth-child(3) { animation-delay: 0.16s; } #journey.in-view .aircraft-card:nth-child(4) { animation-delay: 0.24s; } /* --- Skill lists (compact term + one line) --- */ .skill-list { border-top: 1px solid var(--color-border); } .skill-list > div { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: var(--space-md) var(--space-lg); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); } .skill-list dt { font-family: var(--font-display); font-size: var(--step-1); color: var(--color-text); } .skill-list dd { color: var(--color-text-muted); max-width: 52ch; } /* --- Closing statement --- */ .av-close { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); } .av-close-lead { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; color: var(--color-text); max-width: 32ch; } .av-close-sub { margin-top: var(--space-md); color: var(--color-text-muted); max-width: 48ch; } @media (max-width: 900px) { .aircraft-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .journey-svg { display: none; } .journey-stops { grid-template-columns: repeat(3, 1fr); gap: var(--space-md) var(--space-sm); } .skill-list > div { grid-template-columns: 1fr; gap: 4px; } .core-list { font-size: var(--step-0); line-height: 1.8; } .work-stats { gap: var(--space-md) var(--space-lg); } } @media (max-width: 430px) { .journey-stops { grid-template-columns: repeat(2, 1fr); } } /* ============================ 11. SELECTED WORK ============================ */ .work-item { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-border); } .work-item:first-of-type { border-top: 1px solid var(--color-border); } .work-item--reverse { grid-template-columns: 7fr 5fr; } .work-item--reverse .work-media { order: 2; } .work-media { position: sticky; top: 110px; align-self: start; } .work-media img { width: 100%; aspect-ratio: 1600 / 2263; object-fit: contain; border-radius: 4px; background-color: var(--color-bg-raised); padding: 44px; } .work-year { font-size: var(--step-sm); letter-spacing: 0.08em; color: var(--color-accent); } .work-body > h3 { font-size: var(--step-3); margin: var(--space-2xs) 0 2px; } .work-role { color: var(--color-text-muted); margin-bottom: var(--space-md); } .work-block { margin-top: var(--space-md); } .work-block h4 { margin-bottom: 4px; } .work-block p { color: var(--color-text-muted); } /* Section-level "at a glance" statement of core practice areas */ .work-core { position: relative; margin: var(--space-lg) 0; padding: var(--space-lg) 0; } .work-core::before, .work-core::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent ); } .work-core::before { top: 0; } .work-core::after { bottom: 0; } .work-core h3 { font-family: var(--font-sans); font-size: var(--step-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--color-accent); margin-bottom: var(--space-md); } .core-list { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.9; color: var(--color-text); max-width: 58ch; } .core-list span { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(0.45em); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out), color 0.3s ease; } .core-list span:not(:first-child)::before { content: "·"; margin-right: 0.5em; color: var(--color-accent); opacity: 0.75; } .work-core.is-lit .core-list span { opacity: 1; transform: none; transition-delay: calc(var(--i) * 55ms); } .core-list span:hover { color: var(--color-accent); } /* space out the multi-paragraph case-study copy */ .work-block p + p { margin-top: var(--space-sm); } /* drop cap on each case study's opening line */ .work-body > .work-block:first-of-type > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: 400; font-size: 3.1em; line-height: 0.86; margin: 0.02em 0.14em 0 0; color: var(--color-accent); } /* Outcome stat row */ .work-stats { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); margin-bottom: var(--space-lg); } .work-stats li { display: flex; flex-direction: column; gap: 2px; } .stat-num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; line-height: 1; color: var(--color-text); font-variant-numeric: oldstyle-nums; } .stat-label { font-size: var(--step-sm); color: var(--color-text-muted); } /* Per-project capability index — a ruled editorial list, not cards */ .work-caps { margin-top: var(--space-xl); } .work-caps h4 { font-family: var(--font-sans); font-size: var(--step-sm); font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-md); } .work-caps ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); border-top: 1px solid var(--color-border); } .work-caps li { position: relative; padding: 15px 0 15px 24px; border-bottom: 1px solid var(--color-border); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: var(--color-text-muted); transition: color 0.4s var(--ease-out), padding-left 0.4s var(--ease-out); } .work-caps li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 11px; height: 1px; background-color: var(--color-border-soft); transition: width 0.4s var(--ease-out), background-color 0.4s ease; } .work-caps li:hover { color: var(--color-text); padding-left: 34px; } .work-caps li:hover::before { width: 22px; background-color: var(--color-accent); } @media (max-width: 640px) { .work-caps ul { grid-template-columns: 1fr; } } /* animated-underline link, no arrow glyph */ .work-link { display: inline-block; color: var(--color-accent); font-size: var(--step-sm); letter-spacing: 0.02em; padding-bottom: 3px; background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size 0.45s var(--ease-out), color 0.35s ease; } .work-link:hover, .work-link:focus-visible { color: var(--color-accent-soft); background-size: 0% 1px; } /* ============================ 12. CONTACT ============================ */ #contact { text-align: center; } #contact .section-intro { margin-inline: auto; } .contact-email { display: inline-block; font-family: var(--font-display); font-size: clamp(1.1rem, 5.5vw, 2.6rem); margin: var(--space-md) 0 var(--space-lg); max-width: 100%; padding-bottom: 8px; background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: color 0.35s ease, background-size 0.5s var(--ease-out); } .contact-email:hover, .contact-email:focus-visible { color: var(--color-accent); background-size: 100% 1px; } .social-links { display: flex; justify-content: center; gap: var(--space-md); } .social-links a { color: var(--color-text-muted); font-size: var(--step-sm); letter-spacing: 0.02em; transition: color 0.35s ease; } .social-links a:hover, .social-links a:focus-visible { color: var(--color-accent); } /* ============================ 13. FOOTER ============================ */ footer { position: relative; max-width: var(--container); margin-inline: auto; text-align: center; padding: var(--space-2xl) var(--space-md) var(--space-xl); color: var(--color-text-muted); font-size: var(--step-sm); } footer::before { content: ""; position: absolute; top: 0; left: var(--space-md); right: var(--space-md); height: 1px; background: linear-gradient( 90deg, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent ); } .footer-mark { font-family: var(--font-display); font-style: italic; font-size: var(--step-3); font-weight: 300; line-height: 1.2; color: var(--color-text); max-width: none; margin-bottom: var(--space-lg); } .footer-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-lg); } .footer-meta a, .footer-time { position: relative; color: var(--color-text-muted); letter-spacing: 0.02em; padding-bottom: 3px; transition: color 0.35s ease; } .footer-meta a { background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: color 0.35s ease, background-size 0.45s var(--ease-out); } .footer-meta a:hover, .footer-meta a:focus-visible { color: var(--color-text); background-size: 100% 1px; } .footer-time::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background-color: var(--color-accent); vertical-align: middle; } .footer-legal { font-size: var(--step-sm); color: var(--color-text-muted); opacity: 0.7; } /* ============================ 13b. SERVICES & TESTIMONIALS (optional sections) Off by default — only appear when enabled in content.js. Reuse the same tokens/rhythm as the rest of the site. ============================ */ .services-grid, .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-md); } .service-card { padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .service-card h3 { font-size: var(--step-1); margin-bottom: var(--space-xs); } .service-card p { color: var(--color-text-muted); } .testimonial-card { padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .testimonial-card blockquote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; color: var(--color-text); } .testimonial-card figcaption { margin-top: var(--space-md); font-size: var(--step-sm); color: var(--color-text-muted); } @media (max-width: 900px) { .services-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .services-grid, .testimonial-grid { grid-template-columns: 1fr; } } /* ============================ 14. FOCUS VISIBILITY (keyboard users) ============================ */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 1px; } /* ============================ 15. SCROLL REVEAL + IMAGE DEVELOP One quiet fade — not a slide on every element. ============================ */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .reveal.in-view { opacity: 1; transform: none; } .reveal.in-view img { filter: grayscale(0) contrast(1) brightness(1); } .about-image:hover img { filter: grayscale(0) contrast(1) brightness(1); } /* ============================ 16. HERO LOAD SEQUENCE One orchestrated entrance on first paint. ============================ */ @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .hero-content > * { animation: rise-in 0.9s var(--ease-out) backwards; } .hero-content > .eyebrow { animation-delay: 0.15s; } .hero-content > h1 { animation-delay: 0.3s; } .hero-content > .hero-buttons { animation-delay: 0.5s; } /* ============================ 17. GRAIN TEXTURE ============================ */ .grain { position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================ 18. CUSTOM CURSOR (fine pointers only) ============================ */ .cursor-dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-accent); border: 1px solid transparent; pointer-events: none; z-index: 400; transform: translate(-50%, -50%); transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s ease, border-color 0.3s ease; mix-blend-mode: difference; } .cursor-dot.hovering { width: 34px; height: 34px; background-color: transparent; border-color: var(--color-text); } @media (max-width: 800px) { .cursor-dot { display: none; } } /* ============================ 19. MOBILE NAVIGATION ============================ */ #menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; z-index: 200; } #menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--color-text); transition: transform 0.3s ease, opacity 0.3s ease; } #menu-toggle.open span:first-child { transform: translateY(4px) rotate(45deg); } #menu-toggle.open span:last-child { transform: translateY(-4px) rotate(-45deg); } /* ============================ 20. RESPONSIVE ============================ */ @media (max-width: 900px) { :root { --space-3xl: 6rem; --space-2xl: 4.5rem; } .about-grid, .about-now, .work-item, .work-item--reverse { grid-template-columns: 1fr; gap: var(--space-lg); } .about-image, .work-media { position: static; } .about-image { order: -1; max-width: 420px; } .work-item--reverse .work-media { order: 0; } .work-media img { padding: 32px; max-width: 380px; } } @media (max-width: 800px) { #menu-toggle { display: flex; } .nav-links { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background-color: var(--color-bg); flex-direction: column; justify-content: center; align-items: center; gap: var(--space-lg); transform: translateY(-100%); transition: transform 0.45s var(--ease-out); z-index: 150; } .nav-links.open { transform: translateY(0); } .nav-links a { font-size: var(--step-2); color: var(--color-text); } } @media (max-width: 540px) { .hero-buttons { flex-direction: column; gap: var(--space-md); } } /* ============================ 21. REDUCED MOTION Honour the OS "reduce motion" setting. ============================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .hero-content > * { animation: none !important; } .reveal { opacity: 1 !important; transform: none !important; } /* Flight-path journey: show the finished state, no travel. */ .journey-svg .j-line { stroke-dashoffset: 0 !important; } .journey-svg .j-dot { opacity: 1 !important; } .journey-svg .j-plane { display: none !important; } .journey-stop { opacity: 1 !important; } #journey.in-view .aircraft-card { animation: none !important; } .core-list span { opacity: 1 !important; transform: none !important; } }