/* ========================================================================== Trasa Ventures — "Cinematic" theme Palette and type lifted from sambhavriseofaura.com: Baskervville + Geist, deep warm brown ground, sand text, taupe accent. Shared stylesheet for the site. ========================================================================== */ :root { color-scheme: dark; /* Sambhav's own tokens, read off their rendered styles */ --brown: #4F3227; /* their dominant surface colour */ --brown-d:#2A1B15; /* deeper, for gradients and overlays */ --brown-m:#3C271F; /* Principles — a step down from --brown, toward the footer */ --panel-inset:#23160F; /* recessed cells inside --brown-m */ --ink: #1A100C; /* near-black ground */ --sand: #F7F5F2; /* their "Sand Background" — used as text here */ --taupe: #C4B5A1; /* warm accent */ --grey: #494840; --sand-dim: rgba(247, 245, 242, 0.66); --hairline: rgba(247, 245, 242, 0.18); --hairline-strong: rgba(247, 245, 242, 0.34); --font-display: "Baskervville", "Iowan Old Style", Palatino, Georgia, serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Wordmark. "Trajan Sans Pro" is Adobe-only — it renders just for viewers whose browser has it, or once an Adobe Fonts kit is added to index.html. Everyone else falls through to the next face. */ --font-mark: "Trajan Sans Pro", "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --shell: 1240px; --gutter: clamp(22px, 5vw, 72px); --space-section: clamp(84px, 10vw, 150px); /* Swap in real art: .hero { --hero-image: url("assets/hero.jpg"); } The fallback below is generated, so nothing here is anyone else's photo. */ --hero-fallback: radial-gradient(38% 46% at 26% 18%, rgba(224, 209, 186, 0.34), transparent 70%), radial-gradient(70% 55% at 72% 34%, rgba(150, 108, 78, 0.42), transparent 72%), radial-gradient(120% 100% at 50% 118%, rgba(10, 6, 4, 0.96), transparent 62%), conic-gradient(from 210deg at 34% 26%, rgba(196,181,161,0.16), transparent 30%, transparent 70%, rgba(196,181,161,0.10)), linear-gradient(152deg, #3D2820 0%, #593A2C 38%, #24160F 74%, #120B07 100%); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; background: var(--ink); } body { margin: 0; /* No overflow-x here. It isn't needed (nothing overflows — the hero's drift is clipped by .hero itself), and `overflow-x: hidden` on makes overflow-y compute to auto, which is a known position:sticky hazard in some browsers. If page-level clipping is ever required, use `overflow-x: clip` on — clip does not create a scroll container. */ background: var(--ink); color: var(--sand); font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, figure { margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--taupe); outline-offset: 4px; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 20px; z-index: 60; padding: 12px 18px; background: var(--sand); color: var(--ink); font-size: 0.82rem; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 14px; } /* --- Navbar: fixed, translucent, hairline base ---------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 74px; display: flex; align-items: center; background: rgba(26, 16, 12, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; } .nav__mark { font-family: var(--font-mark); font-weight: 600; /* Poppins SemiBold */ font-size: 1.56rem; /* 1.24rem + 50% */ line-height: 1.1; letter-spacing: 0.005em; /* Poppins is wide; caps need no extra tracking here */ text-decoration: none; white-space: nowrap; } .nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); } .nav__links a { font-size: 0.83rem; letter-spacing: 0.03em; text-decoration: none; color: var(--sand-dim); transition: color 0.25s ease; } .nav__links a:hover { color: var(--sand); } /* "You are here" — deliberately NOT the boxed treatment. The box on Connect is a call to action, not a position marker; moving it would make people read the current section as a button and would strip emphasis from the CTA just when it might be used. Current position gets its own quieter signal instead. */ .nav__links a:not(.btn) { position: relative; } .nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; /* offset, not padding, so nothing shifts */ height: 1px; background: var(--taupe); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease; } .nav__links a.is-current { color: var(--sand); } .nav__links a.is-current::after { transform: scaleX(1); } /* --- Ghost button: their signature control -------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border: 1px solid var(--hairline-strong); background: transparent; color: var(--sand); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease; } .btn:hover { background: rgba(247, 245, 242, 0.09); border-color: var(--sand); } .btn--solid { background: var(--sand); color: var(--ink); border-color: var(--sand); } .btn--solid:hover { background: var(--taupe); border-color: var(--taupe); } /* --- Hero: full-bleed media, dark overlay, centred lockup ----------------- */ /* Two rows: the copy centres inside the first, the foot sits at the bottom of the second. Done with grid rather than flex because an `auto` margin on the foot would eat all the free space and shove the copy to the top. */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; background-image: var(--hero-image, var(--hero-fallback)); background-size: cover; background-position: center; /* a slow drift so a still image still feels filmic */ animation: drift 42s ease-in-out infinite alternate; } @keyframes drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(0, -1.6%, 0); } } /* Grain — keeps a flat gradient from looking like a CSS gradient. */ .hero__media::after { content: ""; position: absolute; inset: 0; opacity: 0.26; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(78% 70% at 50% 44%, transparent 30%, rgba(18,11,7,0.55) 100%), linear-gradient(to bottom, rgba(26,16,12,0.70) 0%, rgba(26,16,12,0.26) 40%, rgba(18,11,7,0.88) 100%); } .hero__inner { align-self: center; /* vertically centred in the first row */ width: 100%; text-align: center; /* Top padding biased so the copy always clears the 74px fixed nav. */ padding-block: 88px 40px; } .hero__eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe); } /* The arc + wordmark lockup, echoing their "RISE OF AURA" treatment. */ .lockup { margin-top: 30px; display: grid; justify-items: center; gap: 6px; } .lockup__arc { width: min(560px, 74vw); height: auto; color: var(--sand); opacity: 0.9; } .hero__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: 1.12; letter-spacing: 0.005em; margin-top: 26px; } .hero__sub { max-width: 58ch; margin: 24px auto 0; color: var(--sand-dim); font-size: clamp(1rem, 1.15vw, 1.1rem); } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(34px, 4.5vw, 52px); } /* Bottom grid row rather than absolutely positioned, so a taller foot can never overlap the hero copy on a short viewport. */ .hero__foot { align-self: end; padding: 0 var(--gutter) 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-dim); } /* --- Hero proof row -------------------------------------------------------- Portfolio marks at the foot of the hero. Deliberately not a "trusted by" wall: with three logos that reads as padding. It is a labelled row, held quiet — small, dimmed, monochrome — so it supports the headline rather than competing with it. */ .hero__proof { align-self: end; width: 100%; padding: 0 var(--gutter) 34px; display: grid; justify-items: center; gap: 18px; } .hero__proof-label { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe); opacity: 0.85; } .hero__proof-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(30px, 4.5vw, 62px); } /* Dimmed by default so the row reads as supporting evidence, not a banner. */ .hero__proof-row .logo img { opacity: 0.7; transition: opacity 0.35s ease; } .hero__proof-row a:hover .logo img, .hero__proof-row .logo:hover img { opacity: 1; } /* Optically matched, one notch smaller than the ledger: a bold sans reads larger than a light serif at the same box height. */ .hero__proof-row .logo--driif img { height: clamp(17px, 1.5vw, 21px); } .hero__proof-row .logo--sambhav img { height: clamp(23px, 2vw, 28px); } .hero__proof-row .logo--cloudnine img { height: clamp(19px, 1.7vw, 23px); } /* Stacked variant here, not the wide wordmark: at this size the wide one comes out ~244px against the others' 88-100px and swamps a row meant to be taken in at a glance. */ .hero__proof-row .logo--shravanee img { height: clamp(23px, 2vw, 28px); } .hero__proof-rule { width: 1px; height: 26px; background: var(--hairline-strong); margin-inline: clamp(4px, 1vw, 16px); } @media (max-width: 560px) { .hero__proof { gap: 14px; padding-bottom: 26px; } .hero__proof-rule { display: none; } .hero__proof-row { gap: 26px; } } /* --- Section furniture ---------------------------------------------------- */ /* isolation makes this a stacking context so the grain pseudo-element can sit between the background and the content. Without it a z-index:-1 child paints behind the section's own background and is never seen. */ .section { position: relative; isolation: isolate; padding-block: var(--space-section); } .section--brown { background: var(--brown); } .section--deep { background: var(--brown-d); } /* --- Surface grain --------------------------------------------------------- The hero and all three video panels carry grain. Without it the flat sections are the only mathematically pure surfaces on the page, which next to grained neighbours reads as unfinished rather than as restraint. Same texture as the hero, at roughly half the strength. z-index:-1 inside the section's own stacking context, so it sits above the background colour but beneath the content — text is never overlaid. */ .section::before, .footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.13; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } .section--mid { background: var(--brown-m); } .eyebrow { font-size: 0.71rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--taupe); } .display { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.95rem, 4vw, 3.2rem); line-height: 1.14; margin-top: 22px; } .lede { max-width: 56ch; margin-top: 20px; color: var(--sand-dim); font-size: 1.04rem; } .rule-thin { height: 1px; border: 0; margin: 0; background: var(--hairline); } /* --- Focus domains --------------------------------------------------------- Used by the philosophy section. */ .domains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.6vw, 52px); margin-top: clamp(48px, 6vw, 80px); } .domain { padding-top: 20px; border-top: 1px solid rgba(196, 181, 161, 0.4); } .domain__name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.24; } .domain__copy { margin-top: 12px; color: var(--sand-dim); font-size: 0.97rem; } @media (max-width: 900px) { .domains { grid-template-columns: 1fr; gap: 0; } .domain { margin-top: 26px; } .domain:first-child { margin-top: 0; } } /* --- Logos ---------------------------------------------------------------- The extracted marks are single-colour; force them to sand on dark. */ .logo img { display: block; width: auto; filter: brightness(0) invert(1); opacity: 0.93; } /* --- Footer --------------------------------------------------------------- */ .footer { position: relative; isolation: isolate; background: var(--ink); padding-block: clamp(78px, 9vw, 128px) 40px; border-top: 1px solid var(--hairline); } .footer__heading { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; margin-top: 22px; } .footer__copy { max-width: 46ch; margin-top: 20px; color: var(--sand-dim); } .footer__email { display: inline-block; margin-top: clamp(30px, 4vw, 46px); padding-bottom: 7px; border-bottom: 1px solid var(--taupe); font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.8rem); text-decoration: none; transition: color 0.25s ease; } .footer__email:hover { color: var(--taupe); } .footer__base { margin-top: clamp(56px, 7vw, 96px); padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; color: var(--sand-dim); font-size: 0.78rem; } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 760px) { body { font-size: 16px; } .nav__links { gap: 16px; } .nav__links .nav__hide-sm { display: none; } .hero__foot { font-size: 0.64rem; letter-spacing: 0.1em; } } /* --- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .hero__media { animation: none; transform: scale(1.06); } }