/* ========================================================================== StreamlineGT — public site Dark, cinematic, photography-forward. The space theme is the frame; the content (photos, writing, posts) is the subject. ========================================================================== */ :root { /* Brand */ --space: #050B12; --navy: #071725; --deep: #0B2235; --horizon: #169BDB; --glow: #53BDF5; --white: #E9EDF0; --gray: #A9B5BF; /* Derived */ --line: rgba(83, 189, 245, .14); --line-strong: rgba(83, 189, 245, .34); --panel: rgba(11, 34, 53, .42); --panel-solid: #08192A; --halo: 0 0 0 1px rgba(83, 189, 245, .28), 0 18px 48px -18px rgba(22, 155, 219, .55); /* Type */ --f-display: 'Orbitron', 'Space Grotesk', system-ui, sans-serif; --f-head: 'Space Grotesk', 'Inter', system-ui, sans-serif; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Metrics */ --shell: 1240px; --header: 84px; --ease: cubic-bezier(.22, .61, .36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--space); color: var(--white); font-family: var(--f-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Horizontal clipping belongs on , not : on it turns the element into its own scroll container and window scrolling stops working, and `clip` on propagates to the y axis and kills scrolling outright. */ html { overflow-x: hidden; } /* The whole site sits on a faint starfield, so scrolling past a section never lands on flat black. */ body::before { content: ''; position: fixed; inset: 0; background: url('/images/stars-tile.svg') repeat; background-size: 900px 675px; opacity: .18; pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* height:auto matters — width/height attributes map to CSS as presentational hints, so a width override alone leaves the pixel height stuck. */ img { max-width: 100%; height: auto; display: block; } /* display:grid/flex on .lightbox and .mobile-nav would otherwise beat the hidden attribute the markup ships with. */ [hidden] { display: none !important; } a { color: var(--glow); text-decoration: none; } h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.2; margin: 0; font-weight: 600; } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; } .skip { position: absolute; left: -9999px; top: 12px; z-index: 999; background: var(--horizon); color: #fff; padding: 10px 18px; border-radius: 8px; } .skip:focus { left: 24px; } .ico { flex: none; } /* ── Header ─────────────────────────────────────────────────────────── */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; background: rgba(5, 11, 18, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .35s var(--ease), border-color .35s var(--ease); } .site-header.is-stuck { background: rgba(5, 11, 18, .92); border-bottom-color: var(--line); } .header-inner { height: var(--header); display: flex; align-items: center; gap: 26px; } .header-logo { display: block; flex: none; } .main-nav { margin-left: auto; display: flex; align-items: center; gap: 34px; } .main-nav a { font-family: var(--f-display); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); padding: 10px 0; position: relative; transition: color .25s var(--ease); } .main-nav a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--horizon); box-shadow: 0 0 12px var(--horizon); opacity: 0; transition: left .3s var(--ease), right .3s var(--ease), opacity .3s var(--ease); } .main-nav a:hover { color: var(--white); } .main-nav a:hover::after { left: 0; right: 0; opacity: .55; } .main-nav a.is-active { color: var(--white); } .main-nav a.is-active::after { left: 0; right: 0; opacity: 1; } .header-tools { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--glow); font-size: 17px; cursor: pointer; transition: background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); } .icon-btn:hover { background: rgba(22, 155, 219, .14); box-shadow: 0 0 18px -4px var(--horizon); color: var(--white); } .burger { display: none; } /* Slide-down search */ .header-search { max-height: 0; overflow: hidden; border-top: 1px solid transparent; background: rgba(5, 11, 18, .96); transition: max-height .35s var(--ease), border-color .35s var(--ease); } .header-search.is-open { max-height: 90px; border-top-color: var(--line); } .header-search .shell { display: flex; align-items: center; gap: 14px; height: 72px; } .header-search .ico { font-size: 19px; color: var(--horizon); } .header-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--white); font: 400 17px/1.4 var(--f-body); } .header-search input::placeholder { color: var(--gray); } .header-search button { font-family: var(--f-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; background: none; border: 1px solid var(--line-strong); color: var(--glow); padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background .25s var(--ease); } .header-search button:hover { background: rgba(22, 155, 219, .16); } /* Mobile nav */ .mobile-nav { position: fixed; inset: var(--header) 0 0 0; z-index: 55; background: rgba(3, 8, 14, .98); backdrop-filter: blur(10px); padding: 34px 28px; display: flex; flex-direction: column; gap: 30px; animation: fadeIn .3s var(--ease); } .mobile-nav nav { display: flex; flex-direction: column; } .mobile-nav nav a { font-family: var(--f-display); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); padding: 18px 0; border-bottom: 1px solid var(--line); } .mobile-nav nav a.is-active { color: var(--glow); } .mobile-search { display: flex; gap: 10px; } .mobile-search input { flex: 1; background: var(--navy); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; color: var(--white); font: inherit; } .mobile-search button { width: 48px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(22, 155, 219, .14); color: var(--glow); font-size: 18px; cursor: pointer; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Logo lockup ────────────────────────────────────────────────────── */ /* One transparent PNG carrying the arc, star, wordmark and tagline. Sized by width only — the intrinsic ratio keeps the height honest. */ .logo { width: auto; height: auto; } .logo-bar { width: 208px; } .logo-md { width: 214px; } .logo-lg { width: min(620px, 80vw); } /* ── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-display); font-size: 12px; font-weight: 500; letter-spacing: .20em; text-transform: uppercase; padding: 15px 34px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--white); background: rgba(11, 34, 53, .35); cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .btn .ico { font-size: 15px; } .btn:hover { transform: translateY(-2px); background: rgba(22, 155, 219, .20); border-color: var(--horizon); box-shadow: var(--halo); } .btn-primary { background: linear-gradient(135deg, var(--horizon), #0C6FA5); border-color: transparent; box-shadow: 0 0 34px -8px var(--horizon); } .btn-primary:hover { background: linear-gradient(135deg, var(--glow), var(--horizon)); } .link-cta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--glow); } .link-cta .ico { font-size: 14px; transition: transform .3s var(--ease); } .link-cta:hover .ico { transform: translateX(5px); } /* ── Hero ───────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: clamp(560px, 86vh, 820px); display: grid; place-items: center; text-align: center; padding: calc(var(--header) + 70px) 24px 190px; overflow: hidden; } .hero-bg { position: absolute; inset: -6% -2% -12%; background: url('/images/hero-space.jpg') center 62% / cover no-repeat; will-change: transform; z-index: 0; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(72% 54% at 50% 44%, rgba(3, 8, 14, .64), rgba(3, 8, 14, .22) 62%, transparent 80%), linear-gradient(180deg, rgba(3, 8, 14, .45) 0%, transparent 30%); } /* Fade the artwork into the page so the cards below have somewhere to land. */ .hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 300px; background: linear-gradient(180deg, transparent, var(--space) 88%); z-index: 1; } .hero-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 30px; } .hero-intro { max-width: 520px; font-size: clamp(16px, 2vw, 19px); color: #C7D4DE; margin: 6px 0 4px; } /* Inner pages get a compact banner instead of the full hero. */ .page-hero { position: relative; padding: calc(var(--header) + 78px) 0 54px; text-align: center; overflow: hidden; border-bottom: 1px solid var(--line); } .page-hero::before { content: ''; position: absolute; inset: 0; background: url('/images/hero-space.jpg') center 34% / cover no-repeat; opacity: .5; } .page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,11,18,.55), var(--space) 92%); } .page-hero .shell { position: relative; z-index: 2; } .page-hero h1 { font-family: var(--f-display); font-size: clamp(26px, 5vw, 42px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .page-hero p { max-width: 620px; margin: 16px auto 0; color: var(--gray); font-size: 16.5px; } .eyebrow { font-family: var(--f-display); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--horizon); margin-bottom: 14px; } /* ── Feature cards (overlap the hero) ───────────────────────────────── */ .features { position: relative; z-index: 3; margin-top: -128px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature { position: relative; min-height: 290px; padding: 30px 30px 28px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: var(--panel-solid); transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } .feature-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .92; transition: transform .8s var(--ease), opacity .45s var(--ease); } /* Dark scrim between the artwork and the copy, so the text stays legible whatever image a card carries. */ .feature::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, rgba(5,11,18,.28) 0%, rgba(5,11,18,.74) 52%, rgba(5,11,18,.95) 100%); } .feature > *:not(.feature-bg) { position: relative; z-index: 2; } .feature:hover { transform: translateY(-7px); border-color: var(--line-strong); box-shadow: var(--halo); } .feature:hover .feature-bg { transform: scale(1.07); opacity: .82; } .feature-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(5, 11, 18, .55); color: var(--glow); font-size: 23px; margin-bottom: 26px; transition: box-shadow .45s var(--ease), background .45s var(--ease); } .feature:hover .feature-icon { box-shadow: 0 0 26px -6px var(--horizon); background: rgba(22, 155, 219, .18); } .feature h3 { font-family: var(--f-display); font-size: 14px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 12px; } .feature p { color: var(--gray); font-size: 14.5px; margin: 0 0 22px; max-width: 30ch; } .feature .link-cta { margin-top: auto; } /* ── Section furniture ──────────────────────────────────────────────── */ .section { padding: 92px 0; } .section-sm { padding: 64px 0; } .section-head { display: flex; align-items: center; gap: 24px; margin-bottom: 38px; } .section-head h2 { font-family: var(--f-display); font-size: clamp(16px, 2.4vw, 21px); font-weight: 500; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; position: relative; padding-bottom: 12px; } .section-head h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 62px; height: 2px; background: var(--horizon); box-shadow: 0 0 12px var(--horizon); } .section-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } .section-head .link-cta { flex: none; } /* ── Post cards ─────────────────────────────────────────────────────── */ .post-grid { display: grid; gap: 22px; } .post-grid-4 { grid-template-columns: repeat(4, 1fr); } .post-grid-3 { grid-template-columns: repeat(3, 1fr); } .post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel-solid); color: inherit; transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } .post-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--halo); } .post-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--deep); } .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .post-card:hover .post-thumb img { transform: scale(1.06); } .post-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 11, 18, .72)); } .post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; } .post-meta { font-family: var(--f-display); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--horizon); display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; } .post-card h3 { font-size: 17px; margin-bottom: 8px; color: var(--white); } .post-card p { color: var(--gray); font-size: 13.5px; line-height: 1.6; margin: 0; } .post-card .link-cta { margin-top: 16px; } .empty { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 58px 30px; text-align: center; color: var(--gray); background: rgba(11, 34, 53, .22); } .empty h3 { font-family: var(--f-display); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; } .empty p { margin: 0 auto; max-width: 46ch; font-size: 14.5px; } /* ── Gallery ────────────────────────────────────────────────────────── */ .album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .album-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 15px; overflow: hidden; border: 1px solid var(--line); background: var(--deep); color: inherit; transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } .album-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .album-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,11,18,.05) 35%, rgba(5,11,18,.88)); } .album-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--halo); } .album-card:hover img { transform: scale(1.07); } .album-meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 22px 24px; } .album-meta h3 { font-size: 20px; margin-bottom: 6px; } .album-meta span { font-family: var(--f-display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--glow); } /* Masonry wall — columns keep the photographs at their own proportions. */ .masonry { columns: 4; column-gap: 16px; } .masonry figure { break-inside: avoid; margin: 0 0 16px; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; background: var(--deep); } .masonry img { width: 100%; height: auto; transition: transform .8s var(--ease), opacity .4s var(--ease); } .masonry figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 11, 18, .82)); opacity: 0; transition: opacity .4s var(--ease); } .masonry figcaption { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px 18px; font-size: 13.5px; color: var(--white); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .masonry figure:hover { border-color: var(--line-strong); } .masonry figure:hover img { transform: scale(1.05); } .masonry figure:hover::after, .masonry figure:hover figcaption { opacity: 1; transform: none; } /* ── Lightbox ───────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(2, 5, 9, .94); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 5vh 6vw; animation: fadeIn .25s var(--ease); } .lightbox figure { margin: 0; display: grid; justify-items: center; gap: 16px; max-height: 90vh; } .lightbox img { max-height: 78vh; max-width: 100%; width: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9), 0 0 0 1px var(--line); } .lightbox figcaption { color: var(--gray); font-size: 14.5px; text-align: center; max-width: 62ch; } .lightbox button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(5, 11, 18, .7); color: var(--white); font-size: 20px; cursor: pointer; transition: background .25s var(--ease), box-shadow .25s var(--ease); } .lightbox button:hover { background: rgba(22, 155, 219, .25); box-shadow: 0 0 20px -5px var(--horizon); } .lb-close { top: 24px; right: 24px; } .lb-prev { left: 24px; top: 50%; transform: translateY(-50%) rotate(180deg); } .lb-next { right: 24px; top: 50%; transform: translateY(-50%); } /* ── Article ────────────────────────────────────────────────────────── */ .article-hero { padding: calc(var(--header) + 62px) 0 0; border-bottom: 1px solid var(--line); } .article-hero .shell { max-width: 776px; } .article-hero h1 { font-size: clamp(28px, 4.6vw, 46px); margin: 16px 0 18px; letter-spacing: -.01em; } .article-lede { color: var(--gray); font-size: 18px; max-width: 62ch; margin: 0 0 30px; } .article-figure { max-width: 1000px; margin: 0 auto; padding: 0 28px; transform: translateY(46px); } .article-figure img { width: 100%; border-radius: 16px; border: 1px solid var(--line); } /* Readable column on a plain dark ground — never text over starfields. */ .article-body { max-width: 720px; margin: 0 auto; padding: 90px 28px 30px; font-size: 17.5px; line-height: 1.78; color: #D3DCE3; } .article-body > *:first-child { margin-top: 0; } .article-body p { margin: 0 0 1.35em; } .article-body h2, .article-body h3 { color: var(--white); margin: 2em 0 .6em; font-family: var(--f-head); } .article-body h2 { font-size: 25px; } .article-body h3 { font-size: 20px; } .article-body a { text-decoration: underline; text-underline-offset: 3px; } .article-body img { border-radius: 12px; margin: 2em 0; border: 1px solid var(--line); } .article-body blockquote { margin: 2em 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--horizon); color: var(--white); font-size: 19px; font-style: italic; } .article-body ul, .article-body ol { padding-left: 1.3em; margin: 0 0 1.35em; } .article-body li { margin-bottom: .5em; } .article-body code { background: var(--navy); border: 1px solid var(--line); padding: 2px 7px; border-radius: 6px; font-size: .88em; } .article-body pre { background: var(--navy); border: 1px solid var(--line); padding: 18px 20px; border-radius: 12px; overflow-x: auto; } .article-body pre code { background: none; border: 0; padding: 0; } .article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; } .article-foot { max-width: 720px; margin: 0 auto; padding: 26px 28px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; border-top: 1px solid var(--line); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-family: var(--f-display); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; } .share-row { margin-left: auto; display: flex; align-items: center; gap: 10px; } .share-row span { font-family: var(--f-display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); } .share-btn { width: 34px; height: 34px; font-size: 15px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--glow); background: none; cursor: pointer; transition: background .25s var(--ease), box-shadow .25s var(--ease); } .share-btn:hover { background: rgba(22, 155, 219, .16); box-shadow: 0 0 16px -4px var(--horizon); } /* ── Filter pills ───────────────────────────────────────────────────── */ .pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; } .pill { font-family: var(--f-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; background: rgba(11, 34, 53, .3); cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .pill:hover { color: var(--white); border-color: var(--line-strong); } .pill.is-active { color: var(--white); border-color: var(--horizon); background: rgba(22, 155, 219, .18); box-shadow: 0 0 18px -6px var(--horizon); } .pill em { font-style: normal; opacity: .55; margin-left: 6px; } /* ── Social feed ────────────────────────────────────────────────────── */ .feed { columns: 3; column-gap: 20px; } .feed-card { break-inside: avoid; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel-solid); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .feed-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--halo); } .feed-head { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--line); } .feed-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--deep); flex: none; } .feed-who { min-width: 0; } .feed-who strong { display: block; font-size: 13.5px; font-weight: 600; } .feed-who span { font-size: 11.5px; color: var(--gray); } .feed-badge { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; border: 1px solid var(--line); color: var(--glow); } .feed-media img { width: 100%; } .feed-text { padding: 15px 17px; font-size: 14px; color: #C7D4DE; } .feed-foot { padding: 12px 17px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--gray); } .feed-foot a { margin-left: auto; } .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .video-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel-solid); color: inherit; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .video-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--halo); } .video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--deep); } .video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .video-card:hover .video-thumb img { transform: scale(1.06); } .video-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 42px; color: #fff; background: rgba(5, 11, 18, .32); transition: background .35s var(--ease); } .video-card:hover .video-play { background: rgba(5, 11, 18, .12); } .video-body { padding: 16px 18px 20px; } .video-body h3 { font-size: 15.5px; margin-bottom: 6px; } .video-body p { font-size: 13px; color: var(--gray); margin: 0; } /* ── About ──────────────────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; } .about-portrait { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--deep); aspect-ratio: 4 / 5; position: relative; } .about-portrait img { width: 100%; height: 100%; object-fit: cover; } .about-portrait .placeholder-note { position: absolute; inset: auto 0 0 0; padding: 16px 18px; font-size: 12.5px; color: var(--gray); background: linear-gradient(180deg, transparent, rgba(5, 11, 18, .9)); } .about-copy p { color: #C7D4DE; font-size: 16.5px; margin: 0 0 1.2em; } .about-copy h2 { font-family: var(--f-display); font-size: 15px; letter-spacing: .17em; text-transform: uppercase; margin: 44px 0 18px; } .fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .fact { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: rgba(11, 34, 53, .28); transition: border-color .35s var(--ease), transform .35s var(--ease); } .fact:hover { border-color: var(--line-strong); transform: translateY(-3px); } .fact strong { display: block; font-family: var(--f-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--glow); margin-bottom: 7px; } .fact span { font-size: 14.5px; color: var(--gray); } /* ── Forms ──────────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; } .field { margin-bottom: 20px; } .field label { display: block; font-family: var(--f-display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); margin-bottom: 9px; } .field input, .field textarea, .field select { width: 100%; background: rgba(5, 11, 18, .6); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; color: var(--white); font: 400 15.5px/1.6 var(--f-body); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field textarea { resize: vertical; min-height: 168px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--horizon); box-shadow: 0 0 0 3px rgba(22, 155, 219, .18); } .field input::placeholder, .field textarea::placeholder { color: #6C7B88; } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .alert { border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font-size: 14.5px; border: 1px solid var(--line-strong); background: rgba(22, 155, 219, .12); color: var(--glow); } .alert.is-error { border-color: rgba(232, 90, 90, .4); background: rgba(232, 90, 90, .10); color: #FF9B9B; } .contact-aside { border: 1px solid var(--line); border-radius: 16px; padding: 30px; background: rgba(11, 34, 53, .3); } .contact-aside h2 { font-family: var(--f-display); font-size: 13px; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 14px; } .contact-aside p { color: var(--gray); font-size: 14.5px; margin: 0 0 22px; } /* ── Footer ─────────────────────────────────────────────────────────── */ .site-footer { margin-top: 40px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(7, 23, 37, .55), rgba(5, 11, 18, .9)); } .footer-grid { display: grid; grid-template-columns: 1.5fr .8fr 1fr 1.3fr; gap: 44px; padding-top: 62px; padding-bottom: 52px; } .footer-brand p { color: var(--gray); font-size: 14px; margin: 22px 0 0; max-width: 34ch; } .footer-col h3 { font-family: var(--f-display); font-size: 10.5px; letter-spacing: .20em; text-transform: uppercase; color: var(--white); margin-bottom: 18px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .footer-col a { color: var(--gray); font-size: 14.5px; transition: color .25s var(--ease); } .footer-col a:hover { color: var(--glow); } .footer-col > p { color: var(--gray); font-size: 14px; margin: 0 0 16px; } .social-row { display: flex; flex-wrap: wrap; gap: 10px; } .social-btn { width: 40px; height: 40px; font-size: 18px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); color: var(--gray); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .social-btn:hover { color: var(--white); border-color: var(--horizon); background: rgba(22, 155, 219, .16); box-shadow: 0 0 18px -5px var(--horizon); } .subscribe-form { display: flex; gap: 0; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); } .subscribe-form input[type=email] { flex: 1; min-width: 0; background: rgba(5, 11, 18, .6); border: 0; padding: 13px 15px; color: var(--white); font: 400 14.5px var(--f-body); } .subscribe-form input[type=email]:focus { outline: none; background: rgba(5, 11, 18, .85); } .subscribe-form input::placeholder { color: #6C7B88; } .subscribe-form button { font-family: var(--f-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 0 20px; border: 0; background: var(--horizon); color: #fff; cursor: pointer; transition: background .25s var(--ease); } .subscribe-form button:hover { background: var(--glow); } .subscribe-note { margin: 12px 0 0; font-size: 13px; color: var(--glow); } .subscribe-note.is-error { color: #FF9B9B; } .footer-bar { border-top: 1px solid var(--line); } .footer-bar .shell { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; font-size: 12.5px; color: var(--gray); } .footer-sig { display: inline-flex; align-items: center; gap: 8px; } .footer-sig strong { color: var(--white); font-weight: 500; } .sig-star { color: var(--horizon); font-size: 15px; } /* ── Reveal on scroll ───────────────────────────────────────────────── */ /* Scoped to .js so a failed or blocked script never leaves the page blank — without JS the content simply renders, unanimated. */ .js .reveal { opacity: 0; transform: translateY(22px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } /* ── Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .main-nav { gap: 24px; } .main-nav a { font-size: 10.5px; letter-spacing: .14em; } .masonry { columns: 3; } .feed { columns: 2; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 900px) { .main-nav { display: none; } .burger { display: grid; } .features { grid-template-columns: 1fr; margin-top: -96px; } .feature { min-height: 0; } .post-grid-4, .post-grid-3, .album-grid, .video-grid { grid-template-columns: repeat(2, 1fr); } .about-grid, .form-grid { grid-template-columns: 1fr; gap: 38px; } .about-portrait { max-width: 380px; } .section { padding: 68px 0; } } @media (max-width: 620px) { .shell { padding: 0 20px; } /* The wordmark is wide; at phone widths it has to shrink or it crowds the search / account / menu buttons off the right edge. */ .header-inner { gap: 12px; } .logo-bar { width: 168px; } .icon-btn { width: 34px; height: 34px; font-size: 15px; } .header-tools { gap: 7px; } .hero { padding-bottom: 150px; min-height: 74vh; } /* Photography gets the full width it deserves on a phone. */ @media (max-width: 520px) { .masonry { columns: 1; } .album-card { aspect-ratio: 3 / 2; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } .hero-bg { transform: none !important; } }