/* ========================================================= Dharmesh Software Consultancy — base styles A clean, deliberately restrained starting point. Palette: deep slate ink, warm-neutral paper, teal accent, amber used sparingly as a signal colour for the C|C|C triad. ========================================================= */ :root { --ink: #11202e; /* primary text / dark sections */ --ink-soft: #41505d; /* secondary text */ --paper: #f4f4f1; /* page background */ --surface: #ffffff; /* cards */ --line: #e2e2dc; /* hairline borders */ --accent: #0e7c86; /* teal — primary accent */ --accent-dk: #0a5a62; /* teal hover */ --signal: #d98a26; /* amber — used sparingly */ --display: "Space Grotesk", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace; --maxw: 1080px; --radius: 14px; --space: clamp(4rem, 9vw, 7.5rem); /* vertical section rhythm */ } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0; } a { color: inherit; } p { margin: 0 0 1rem; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } .container.narrow { max-width: 760px; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; /* Background/border fade in as the brand docks into the titlebar (--hp: 0->1, set on by the morph script via the same scroll progress). */ background: color-mix(in srgb, var(--paper) calc(92% * var(--hp, 0)), transparent); backdrop-filter: blur(calc(10px * var(--hp, 0))); border-bottom: 1px solid color-mix(in srgb, var(--line) calc(100% * var(--hp, 0)), transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--line) calc(100% * var(--hp, 0)), transparent); } /* While the mobile menu is open, lift the header (and its dropdown panel) above the floating morph-brand logo (z-index 60), and give the bar a solid backdrop so the panel reads as one surface with the titlebar. */ body.nav-open .site-header { z-index: 70; background: var(--paper); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h, 68px); } /* Invisible placeholder the morphing brand parks into on the left of the bar. Sized to match the small (docked) brand so the nav lays out around it. */ .brand-slot { display: block; width: 38px; height: 38px; flex-shrink: 0; } .nav { display: flex; align-items: center; gap: 1.5rem; } .nav a { text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); transition: color 0.15s; } .nav a:hover { color: var(--ink); } /* ---------- Mobile menu toggle (hamburger) ---------- */ /* Hidden on desktop; revealed in the small-screen media query. The three bars are one (middle bar) plus its ::before/::after (top/bottom bars); they fold into an X when the button's aria-expanded becomes true. */ .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before { position: absolute; left: 0; top: -7px; } .nav-toggle-bars::after { position: absolute; left: 0; top: 7px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); } /* ---------- Buttons ---------- */ .btn { display: inline-block; text-decoration: none; font-weight: 600; padding: 0.85rem 1.6rem; border-radius: 999px; font-size: 0.98rem; transition: transform 0.12s, background 0.15s, color 0.15s; border: 1.5px solid transparent; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dk); } .btn-ghost { border-color: var(--ink); color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: #fff; } /* ---------- Hero ---------- */ /* The hero fills the whole viewport at every screen size, so "About Us" (and everything after it) sits just below the fold and only appears once the user scrolls. Hero content is vertically centred, leaving room for the fixed titlebar at the top. 100svh keeps it within the visible area regardless of a mobile browser's address bar; 100vh is the fallback for older browsers. */ .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: var(--header-h) 0 2.5rem; } /* Placeholder that reserves the large hero-brand footprint. The real brand (.morph-brand) is fixed-position and floats over this slot at the top of the page, then shrinks up into the titlebar as you scroll. --logo-lg / --logo-sm are the two logo sizes the morph interpolates between. */ :root { --logo-lg: clamp(72px, 10vw, 100px); --logo-sm: 38px; --header-h: 68px; } .hero-brand-anchor { height: var(--logo-lg); margin-bottom: 2.5rem; } /* ---------- Morphing brand (hero <-> titlebar) ---------- */ .morph-brand { position: fixed; top: var(--brand-top, 0); left: var(--brand-left, 1.5rem); z-index: 60; display: flex; align-items: center; /* gap shrinks alongside the logo as it docks */ gap: calc(1.25rem - 0.6rem * var(--p, 0)); text-decoration: none; color: var(--ink); transform-origin: left center; will-change: top, left; } .morph-brand img { /* size interpolates between the large hero logo and the small titlebar logo */ height: calc(var(--logo-lg) - (var(--logo-lg) - var(--logo-sm)) * var(--p, 0)); width: auto; display: block; flex-shrink: 0; } .morph-brand-name { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); white-space: nowrap; /* font-size eases from hero scale down to titlebar scale */ font-size: calc(clamp(1.5rem, 3.5vw, 2.4rem) - (clamp(1.5rem, 3.5vw, 2.4rem) - 1.05rem) * var(--p, 0)); /* the second line collapses and the whole name fades as it docks, leaving just the icon in the titlebar */ opacity: calc(1 - var(--p, 0)); } /* When fully docked, drop the (now invisible) name out of the layout/flow and pointer path so it can't intercept clicks over the nav. */ .morph-brand.is-docked .morph-brand-name { display: none; } /* Optional break inside the wordmark. Hidden on desktop so the name reads "Dharmesh / Software Consultancy" (two lines); on phones it becomes a line break so the name splits into three short lines that never overflow. */ .wm-break { display: none; } .eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin-bottom: 1.25rem; } .hero-title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.025em; max-width: 16ch; margin-bottom: 1.75rem; } .tagline { list-style: none; display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 0 0 2rem; font-family: var(--display); font-weight: 600; } .tagline li { font-size: clamp(1.1rem, 2.4vw, 1.5rem); padding: 0 1.1rem; border-left: 2px solid var(--signal); } .tagline li:first-child { padding-left: 0; border-left: none; } .hero-sub { font-size: 1.18rem; color: var(--ink-soft); max-width: 56ch; margin-bottom: 2.25rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } /* ---------- Section scaffolding ---------- */ section { padding: var(--space) 0; } .section-title { padding-top: 10px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1.5rem; } .lead { font-size: 1.15rem; color: var(--ink-soft); } .lead.center { text-align: center; max-width: 60ch; margin: 0 auto 3rem; } /* ---------- About sub-headings ---------- */ .about-heading { font-size: 1.1rem; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; margin: 2rem 0 0.6rem; } .about-heading:first-of-type { margin-top: 0; } /* ---------- Services cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 2rem; transition: transform 0.18s, box-shadow 0.18s; } .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -22px rgba(17, 32, 46, 0.35); } .card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.85rem; } .card p { color: var(--ink-soft); margin: 0; } /* ---------- Spotlight (legacy iOS) ---------- */ /* Styled like the other light sections (paper background, ink/ink-soft text) rather than a dark band, so it reads consistently with the rest of the page. Title and lead inherit the default section styles; only the checklist and the closing note need their own rules. */ .checklist { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; gap: 1rem; } .checklist li { padding-left: 1.75rem; position: relative; color: var(--ink-soft); } .checklist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; background: var(--signal); border-radius: 2px; } .checklist strong { color: var(--ink); } .spotlight .note { color: var(--ink-soft); font-style: italic; margin: 0; } /* ---------- Why us ---------- */ .why-grid { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 2.5rem; } .why-grid li { color: var(--ink-soft); padding-top: 1rem; border-top: 2px solid var(--accent); } .why-grid strong { display: block; color: var(--ink); font-family: var(--display); margin-bottom: 0.3rem; } /* ---------- Founder ---------- */ .founder-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; } .founder-name span { color: var(--accent); font-weight: 500; } .stack-list { padding-left: 1.2rem; margin: 1rem 0 1.5rem; color: var(--ink-soft); } .stack-list li { margin-bottom: 0.6rem; } .stack-list strong { color: var(--ink); } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .member { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.75rem; } .member h3 { font-size: 1.2rem; font-weight: 600; } .member .role { color: var(--accent); font-weight: 600; font-size: 0.92rem; margin: 0.25rem 0 0.75rem; } .member .desc { color: var(--ink-soft); margin: 0; font-size: 0.95rem; } /* ---------- Contact ---------- */ .contact { background: var(--ink); color: var(--paper); text-align: center; } .contact .section-title { color: #fff; } .contact .lead { color: #c3ccd4; max-width: 52ch; margin: 0 auto 2rem; } .contact-list { list-style: none; padding: 0; margin: 0 auto 2.5rem; display: inline-grid; gap: 0.75rem; text-align: left; } .contact-list li { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: baseline; } .contact-list span:first-child { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); } .contact-list a { color: #fff; text-decoration: none; } .contact-list a:hover { text-decoration: underline; } /* ---------- Footer ---------- */ .site-footer { padding: 2.5rem 10; border-top: 1px solid var(--line); } .site-footer p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); text-align: center; } /* ---------- Accessibility ---------- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ---------- Small screens ---------- */ @media (max-width: 640px) { /* Reveal the hamburger; the inline nav becomes a dropdown panel it controls. */ .nav-toggle { display: inline-flex; } /* The nav drops out of the bar into a full-width panel beneath the header. Hidden (and removed from the tab order) until .is-open is toggled on. */ .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 1.5rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 28px -22px rgba(17, 32, 46, 0.45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav a { display: block; padding: 0.9rem 0; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); } .nav a:hover { color: var(--accent); } .nav a:last-child { border-bottom: 0; } /* On phones the wordmark splits into three short lines (Dharmesh / Software / Consultancy) beside a large logo. Because each line is narrow, the logo and name can stay big without "Software Consultancy" running off the right edge. Both still ease to the docked scale and fade out via the existing * var(--p) terms; docked stays icon-only. */ :root { --logo-lg: clamp(90px, 25vw, 115px); } /* Turn the optional wordmark break on, giving the third line. */ .wm-break { display: inline; } .morph-brand-name { font-size: calc(clamp(1.4rem, 6.2vw, 1.85rem) - (clamp(1.4rem, 6.2vw, 1.85rem) - 0.95rem) * var(--p, 0)); } /* Sized so the headline reliably wraps to three balanced lines on phones (matching desktop), rather than flooring at a size that breaks to four. */ .hero-title { font-size: clamp(1.9rem, 8.8vw, 2.25rem); } }