/* ========================================================================== falgunbhaipatel.com — main.css Design language: "Contemporary Authority" Palette : deep graphite · cobalt-violet · cool mist grey · pale blue-grey · crisp white · restrained silver Type : Manrope (single sans system) + JetBrains Mono (meta / numerals) ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { /* Ground — graphite scale */ --g-900: #0E1116; --g-850: #12161D; --g-800: #171C25; --g-700: #202733; --g-600: #2C3542; --g-500: #3C4757; /* Light grounds */ --white: #FFFFFF; --pale: #F2F5FA; /* pale blue-grey sheet */ --pale-2: #E5EAF2; /* pale blue-grey, deeper */ --mist: #D3DAE5; /* cool mist grey */ --silver: #B8C1CF; /* restrained metallic */ /* Ink */ --ink: #101620; --ink-2: #303A48; --ink-muted: #5A6577; /* 5.4:1 on white */ --on-dark: #F3F6FB; --on-dark-2: #A9B3C3; /* 8.4:1 on --g-900 */ --on-dark-3: #8792A1; /* 5.8:1 on --g-850 */ /* Accent — cobalt-violet, used sparingly */ --volt: #6A5AF9; /* fills, rules, oversized type */ --volt-ink: #4B3BD6; /* accent text on light (7.4:1) */ --volt-glow: #A79BFF; /* accent text on dark (8.3:1) */ --volt-dim: rgba(106, 90, 249, 0.14); /* Rules */ --rule-dark: rgba(243, 246, 251, 0.13); --rule-dark-2: rgba(243, 246, 251, 0.26); --rule-light: rgba(16, 22, 32, 0.13); --rule-light-2:rgba(16, 22, 32, 0.26); /* Type families */ --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Type scale */ --fs-mega: clamp(2.9rem, 1.05rem + 7.4vw, 7.4rem); --fs-display: clamp(2.35rem, 1.2rem + 4.6vw, 5.15rem); --fs-h1: clamp(2.05rem, 1.32rem + 2.95vw, 4.05rem); --fs-h2: clamp(1.55rem, 1.16rem + 1.62vw, 2.62rem); --fs-h3: clamp(1.15rem, 1.02rem + 0.54vw, 1.5rem); --fs-lead: clamp(1.09rem, 0.99rem + 0.44vw, 1.35rem); --fs-body: clamp(1rem, 0.968rem + 0.14vw, 1.07rem); --fs-small: 0.905rem; --fs-meta: 0.7rem; /* Space & rhythm */ --gutter: clamp(1.25rem, 0.5rem + 3.1vw, 4.5rem); --shell: 1480px; --measure: 65ch; --section-y: clamp(4rem, 2rem + 7.4vw, 8.75rem); --nav-h: 76px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-2: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 170ms var(--ease); --t-mid: 340ms var(--ease); --t-slow: 700ms var(--ease); } /* ---------- 2. Reset ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); } body { margin: 0; background: var(--g-900); color: var(--on-dark); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.68; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `clip`, never `hidden`: `hidden` makes a scroll container and silently breaks position:sticky on the header. */ overflow-x: clip; } h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ::selection { background: var(--volt); color: #fff; } /* ---------- 3. Typography ------------------------------------------------ */ h1, h2, h3, h4 { font-weight: 800; line-height: 1.06; letter-spacing: -0.028em; text-wrap: balance; } h3, h4 { line-height: 1.2; letter-spacing: -0.018em; } .t-mega { font-size: var(--fs-mega); line-height: 0.92; letter-spacing: -0.045em; font-weight: 800; } .t-display { font-size: var(--fs-display); line-height: 1.0; letter-spacing: -0.038em; } .t-h1 { font-size: var(--fs-h1); } .t-h2 { font-size: var(--fs-h2); } .t-h3 { font-size: var(--fs-h3); } .lead { font-size: var(--fs-lead); line-height: 1.58; font-weight: 400; letter-spacing: -0.011em; } p + p { margin-top: 1.05em; } .prose p { max-width: var(--measure); } .prose p + p { margin-top: 1.15em; } .prose strong { font-weight: 700; } /* Meta / eyebrow label — the architectural counterpoint */ .eyebrow { font-family: var(--mono); max-width: 100%; font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--volt); flex: none; } .eyebrow--plain::before { display: none; } .num { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.18em; font-weight: 500; } .accent { color: var(--volt-glow); } .on-light .accent, .sheet .accent { color: var(--volt-ink); } /* ---------- 4. Grounds & shells ------------------------------------------ */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .shell--narrow { max-width: 1080px; } .band { padding-block: var(--section-y); position: relative; } .band--tight { padding-block: clamp(2.6rem, 1.4rem + 4.2vw, 5rem); } .band--dark { background: var(--g-900); color: var(--on-dark); } .band--dark-2 { background: var(--g-850); color: var(--on-dark); } .band--panel { background: var(--g-800); color: var(--on-dark); } /* Light "sheet" — long-form reading surface */ .sheet { background: var(--pale); color: var(--ink); } .sheet--white { background: var(--white); } .sheet .lead, .sheet p { color: var(--ink-2); } .sheet .muted { color: var(--ink-muted); } .muted { color: var(--on-dark-2); } /* Hairline separators */ .hr { border: 0; height: 1px; background: var(--rule-dark); margin-block: clamp(2rem, 1rem + 3vw, 3.6rem); } .sheet .hr { background: var(--rule-light); } /* Accent hairline used at the top of major bands */ .band--ruled::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--volt) 0, var(--volt) 96px, var(--rule-dark) 96px, var(--rule-dark) 100%); } .sheet.band--ruled::before { background: linear-gradient(90deg, var(--volt) 0, var(--volt) 96px, var(--rule-light) 96px, var(--rule-light) 100%); } /* ---------- 5. Section headers ------------------------------------------- */ .sec-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr); gap: clamp(1.4rem, 0.6rem + 2.4vw, 3.5rem); align-items: start; margin-bottom: clamp(2.1rem, 1.2rem + 3vw, 4rem); } .sec-head__aside { display: flex; flex-direction: column; gap: 1.1rem; } .sec-head__title { font-size: var(--fs-h2); } .sec-head__body { font-size: var(--fs-lead); line-height: 1.6; max-width: 56ch; } /* ---------- 6. Skip link ------------------------------------------------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 1200; background: var(--volt); color: #fff; padding: 0.85rem 1.3rem; font-weight: 700; font-size: var(--fs-small); } .skip:focus { left: 12px; top: 12px; } /* ---------- 7. Focus ----------------------------------------------------- */ :focus-visible { outline: 2px solid var(--volt-glow); outline-offset: 3px; border-radius: 2px; } .sheet :focus-visible { outline-color: var(--volt-ink); } /* ---------- 8. Header / navigation --------------------------------------- */ .site-head { position: sticky; top: 0; z-index: 960; background: rgba(14, 17, 22, 0.86); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--rule-dark); } @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { .site-head { background: #0E1116; } } .site-head__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Wordmark */ .mark { display: inline-flex; align-items: center; gap: 0.72rem; flex: none; } .mark__glyph { width: 30px; height: 30px; flex: none; border: 1px solid var(--rule-dark-2); display: grid; place-items: center; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--volt-glow); background: var(--volt-dim); transition: border-color var(--t-fast), background var(--t-fast); } .mark:hover .mark__glyph { border-color: var(--volt); background: rgba(106,90,249,.26); } .mark__text { display: flex; flex-direction: column; line-height: 1; } .mark__name { font-weight: 800; font-size: 0.975rem; letter-spacing: -0.012em; color: var(--on-dark); } .mark__sub { font-family: var(--mono); font-size: 0.575rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-3); margin-top: 4px; } /* Desktop nav */ .nav { display: flex; align-items: center; gap: clamp(0.15rem, -0.4rem + 1.5vw, 0.55rem); } .nav__link { position: relative; display: inline-block; padding: 0.55rem 0.7rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; color: var(--on-dark-2); transition: color var(--t-fast); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.24rem; height: 1.5px; background: var(--volt); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid); } .nav__link:hover { color: var(--on-dark); } .nav__link:hover::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: var(--on-dark); } .nav__link[aria-current="page"]::after { transform: scaleX(1); } /* Scroll progress hairline */ .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--volt); will-change: transform; } /* Mobile toggle */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--rule-dark-2); flex: none; } .nav-toggle__bars { display: block; width: 18px; height: 10px; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--on-dark); transition: transform var(--t-mid), top var(--t-mid), opacity var(--t-fast); } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { top: 8px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 4px; transform: rotate(-45deg); } /* Mobile drawer */ .nav-drawer { position: fixed; inset: 0; z-index: 950; background: var(--g-900); display: flex; flex-direction: column; padding: calc(var(--nav-h) + 1.4rem) var(--gutter) 2.2rem; transform: translateX(100%); transition: transform 380ms var(--ease-2), visibility 0s linear 380ms; overflow-y: auto; visibility: hidden; } .nav-drawer.is-open { transform: none; visibility: visible; transition: transform 380ms var(--ease-2), visibility 0s; } .nav-drawer__list { display: flex; flex-direction: column; } .nav-drawer__item { border-top: 1px solid var(--rule-dark); } .nav-drawer__item:last-child { border-bottom: 1px solid var(--rule-dark); } .nav-drawer__link { display: flex; align-items: baseline; gap: 1rem; padding: 1.05rem 0.1rem; font-size: 1.42rem; font-weight: 700; letter-spacing: -0.028em; color: var(--on-dark-2); } .nav-drawer__link[aria-current="page"] { color: var(--on-dark); } .nav-drawer__link[aria-current="page"] .num { color: var(--volt-glow); } .nav-drawer__link .num { color: var(--on-dark-3); flex: none; width: 2.4em; } .nav-drawer__foot { margin-top: auto; padding-top: 2.2rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--fs-small); color: var(--on-dark-2); } .nav-drawer__foot a { color: var(--on-dark); font-weight: 600; } body.nav-open { overflow: hidden; } /* ---------- 9. Buttons & inline links ------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.92rem 1.5rem; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.005em; border: 1px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .btn:active { transform: translateY(1px); } .btn__arrow { width: 15px; height: 15px; flex: none; transition: transform var(--t-mid); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn--solid { background: var(--volt); color: #fff; } .btn--solid:hover { background: #5847E8; } .btn--ghost { border-color: var(--rule-dark-2); color: var(--on-dark); } .btn--ghost:hover { border-color: var(--volt-glow); background: rgba(106,90,249,.14); } .sheet .btn--ghost { border-color: var(--rule-light-2); color: var(--ink); } .sheet .btn--ghost:hover { border-color: var(--volt-ink); background: rgba(106,90,249,.08); } /* Text link with an underline that draws in */ .link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; color: var(--volt-glow); padding-bottom: 3px; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--t-mid); } .link:hover { background-size: 100% 1px; } .sheet .link { color: var(--volt-ink); } .link__arrow { width: 14px; height: 14px; flex: none; } /* Inline prose link */ .prose a:not(.link):not(.btn) { color: var(--volt-glow); border-bottom: 1px solid rgba(167,155,255,.45); transition: border-color var(--t-fast); } .prose a:not(.link):not(.btn):hover { border-color: var(--volt-glow); } .sheet .prose a:not(.link):not(.btn) { color: var(--volt-ink); border-bottom-color: rgba(75,59,214,.4); } /* ---------- 10. Photographic plates ------------------------------------- Photographs are never cropped. Each sits inside a white "plate" with generous padding, scaled with object-fit: contain and capped so a low-resolution source is never upscaled into visible softness. ------------------------------------------------------------------------ */ .plate { background: var(--white); border: 1px solid var(--rule-light); padding: clamp(0.85rem, 0.5rem + 1.1vw, 1.5rem); position: relative; } .plate::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); pointer-events: none; } .plate__img { width: 100%; height: auto; object-fit: contain; object-position: center; margin-inline: auto; background: var(--white); } /* Per-image intrinsic caps — keeps every photograph at or near 1:1 pixels. */ .plate__img--portrait { max-width: 290px; } .plate__img--wide { max-width: 581px; } .plate__img--small { max-width: 200px; } .plate__img--tiny { max-width: 150px; } .plate__caption { margin-top: 0.95rem; padding-top: 0.85rem; border-top: 1px solid var(--rule-light); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.6; } /* Figure that carries its own accent corner */ .plate--marked { border-color: var(--rule-light-2); } .plate--marked::before { content: ""; position: absolute; top: -1px; left: -1px; width: 54px; height: 3px; background: var(--volt); z-index: 2; } /* Non-photographic page emblems (original SVG artwork) */ .emblem { border: 1px solid var(--rule-dark); background: var(--g-850); padding: clamp(1.2rem, 0.6rem + 2vw, 2.4rem); } .sheet .emblem { border-color: var(--rule-light-2); } .emblem .plate__caption { color: var(--on-dark-2); border-top-color: var(--rule-dark); } .emblem img { width: 100%; height: auto; } /* ---------- 11. Reveal animation ----------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow), transform var(--t-slow); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 90ms; } .reveal[data-delay="2"] { transition-delay: 180ms; } .reveal[data-delay="3"] { transition-delay: 270ms; } .no-js .reveal, .reveal.is-in { opacity: 1; } @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; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .nav-drawer { transition: none; } } /* ---------- 12. Footer --------------------------------------------------- */ .site-foot { background: var(--g-850); border-top: 1px solid var(--rule-dark); color: var(--on-dark); position: relative; } .site-foot::before { content: ""; position: absolute; top: -1px; left: 0; width: clamp(90px, 22vw, 260px); height: 2px; background: var(--volt); } .foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 0.8rem + 2.6vw, 3.4rem); padding-block: clamp(3rem, 1.8rem + 4vw, 5.2rem); } .foot-brand__word { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.042em; line-height: 0.98; } .foot-brand__line { margin-top: 1rem; max-width: 34ch; font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.62; } .foot-col__title { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 1.15rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule-dark); } .foot-list { display: flex; flex-direction: column; gap: 0.62rem; } .foot-list a, .foot-list span { font-size: var(--fs-small); color: var(--on-dark-2); transition: color var(--t-fast); line-height: 1.5; } .foot-list a:hover { color: var(--on-dark); } .foot-list .is-name { color: var(--on-dark); font-weight: 700; } /* Social icons */ .social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; } .social__link { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule-dark); color: var(--on-dark-2); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .social__link svg { width: 17px; height: 17px; fill: currentColor; } .social__link:hover { color: #fff; border-color: var(--volt); background: var(--volt); } .foot-bottom { border-top: 1px solid var(--rule-dark); padding-block: 1.5rem 1.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem 1.6rem; font-size: 0.815rem; color: var(--on-dark-3); } .foot-bottom a { color: var(--on-dark-2); transition: color var(--t-fast); } .foot-bottom a:hover { color: var(--volt-glow); } .foot-credit strong { font-weight: 700; color: var(--on-dark-2); } /* ---------- 13. Small shared pieces -------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid var(--rule-dark-2); padding: 0.42rem 0.85rem; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.17em; text-transform: uppercase; color: var(--on-dark-2); } .sheet .pill { border-color: var(--rule-light-2); color: var(--ink-muted); } .next-link { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2.2rem, 1.2rem + 3vw, 3.8rem); border-top: 1px solid var(--rule-dark); transition: padding-inline var(--t-mid); } .sheet .next-link { border-top-color: var(--rule-light); } .next-link__label { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-3); display: block; margin-bottom: 0.7rem; } .sheet .next-link__label { color: var(--ink-muted); } .next-link__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; } .next-link__arrow { width: clamp(38px, 6vw, 54px); height: clamp(38px, 6vw, 54px); flex: none; border: 1px solid var(--rule-dark-2); display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .sheet .next-link__arrow { border-color: var(--rule-light-2); } .next-link:hover .next-link__arrow { background: var(--volt); border-color: var(--volt); color: #fff; } .next-link__arrow svg { width: 18px; height: 18px; } /* ---------- 14. No-JavaScript notice ------------------------------------- */ .ns-note { margin: 0; padding: 1.4rem var(--gutter); background: var(--volt); color: #fff; font-weight: 700; font-size: 0.95rem; } /* Perspective rail: stacked on desktop, a single row once it unstacks. */ .perspective__rail > span { display: block; } @media (max-width: 860px) { .perspective__rail > span { display: inline; } }