/* ========================================================= Gyahul, design system One typeface, generous whitespace, restrained colour. Every colour and size below is a variable: change these and the whole site follows. ========================================================= */ /* ── Typeface ─────────────────────────────────────────────── Inter is served from this domain, not from Google, so a visit to gyahul.com contacts no third party at all. One variable file per subset covers every weight we use. Licence: SIL Open Font License 1.1, see assets/fonts/OFL.txt ────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Accents */ --accent: #2e7bff; --accent-2: #22d3ee; --accent-3: #a78bfa; --accent-4: #34d399; /* Dark theme values. Light is the site default and is applied by the data-theme="light" attribute on ; these take over when the visitor switches, or when their system prefers dark. */ --bg: #000000; --bg-soft: #08080b; --surface: #101014; --surface-2: #17171d; --text: #f5f5f7; --muted: #8a8a94; --hairline: rgba(255, 255, 255, 0.10); --hairline-2: rgba(255, 255, 255, 0.20); --sheen: rgba(255, 255, 255, 0.045); /* Type */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Layout */ --shell: 1120px; --shell-narrow: 760px; --nav-h: 56px; --r-sm: 12px; --r: 20px; --r-lg: 28px; /* Motion */ --ease: cubic-bezier(0.22, 0.75, 0.28, 1); } [data-theme="light"] { --bg: #ffffff; --bg-soft: #f5f5f7; --surface: #ffffff; --surface-2: #f5f5f7; --text: #1d1d1f; --muted: #6e6e73; --hairline: rgba(0, 0, 0, 0.10); --hairline-2: rgba(0, 0, 0, 0.22); --sheen: rgba(0, 0, 0, 0.025); } /* ── Base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); } h1, h2, h3, h4 { margin: 0 0 .55em; font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; } p { margin: 0 0 1.15em; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } ul, ol { margin: 0; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; } .shell { width: min(100% - 2.75rem, var(--shell)); margin-inline: auto; } .shell-narrow { width: min(100% - 2.75rem, var(--shell-narrow)); margin-inline: auto; } .center { text-align: center; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--accent); color: #fff; padding: .7rem 1.15rem; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } /* ── Type scale ─────────────────────────────────────────── */ .display { font-size: clamp(2.7rem, 7.4vw, 5.4rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.03; } /* Second line of a hero heading: smaller than the line above it. */ .display .display-sub { display: block; margin-top: .3em; font-size: .55em; font-weight: 600; letter-spacing: -.03em; } .h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 650; letter-spacing: -0.04em; } .h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); } .lede { font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.5; color: var(--muted); letter-spacing: -0.018em; } .eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 1.1rem; } .grad { background: linear-gradient(102deg, var(--accent) 0%, var(--accent-2) 48%, var(--accent-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; /* The gradient only paints inside the element's box, and our tight line-height leaves descenders (g, y, p) hanging outside it, where the transparent letters have nothing behind them. Bottom padding extends the paintable area under the baseline so tails stay visible. */ padding-bottom: .15em; margin-bottom: -.15em; } .muted { color: var(--muted); } /* ── Navigation ─────────────────────────────────────────── */ .nav-wrap { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--bg) 68%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); } .nav-wrap.scrolled { border-bottom-color: var(--hairline); } .nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .logo { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.06rem; font-weight: 650; letter-spacing: -0.03em; } .logo svg { width: 25px; height: 25px; flex: none; } .nav-links { display: flex; align-items: center; gap: 2.1rem; } .nav-links a { position: relative; font-size: .875rem; font-weight: 450; color: var(--muted); transition: color .22s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a[aria-current="page"] { color: var(--text); } .nav-links a[aria-current="page"]::after { transform: scaleX(1); color: var(--accent); } .nav-tools { display: flex; align-items: center; gap: .6rem; } .icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--hairline); background: transparent; color: var(--text); cursor: pointer; transition: border-color .22s var(--ease), background-color .22s var(--ease); } .icon-btn:hover { border-color: var(--hairline-2); background: var(--sheen); } .icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .menu-btn { display: none; } [data-theme="dark"] .i-sun { display: block; } [data-theme="dark"] .i-moon { display: none; } [data-theme="light"] .i-sun { display: none; } [data-theme="light"] .i-moon { display: block; } /* ── Buttons ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .82rem 1.6rem; border: 1px solid transparent; border-radius: 999px; font: 500 .95rem/1 var(--font); letter-spacing: -0.01em; cursor: pointer; transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease); } .btn-sm { padding: .52rem 1.05rem; font-size: .84rem; } .btn-block { width: 100%; padding-block: .95rem; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--accent) 90%, transparent); } .btn-primary:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 88%, #fff); box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--accent) 95%, transparent); } .btn-quiet { border-color: var(--hairline-2); color: var(--text); } .btn-quiet:hover { border-color: var(--text); transform: translateY(-1px); } /* Apple-style inline text link with chevron */ .link { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-size: .96rem; font-weight: 450; } .link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); } .link:hover svg { transform: translateX(3px); } /* ── Section rhythm ─────────────────────────────────────── */ .section { padding: clamp(5rem, 11vw, 9.5rem) 0; } .section-tight { padding: clamp(3.5rem, 7vw, 6rem) 0; } .section-soft { background: var(--bg-soft); } .hairline-top { border-top: 1px solid var(--hairline); } .section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section-head.center { margin-inline: auto; } .section-head p:last-child { margin-bottom: 0; } /* ── Hero ───────────────────────────────────────────────── */ .hero { position: relative; padding: clamp(5rem, 13vw, 10rem) 0 clamp(4rem, 9vw, 7rem); overflow: hidden; isolation: isolate; } .hero-page { padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem); } .aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .aurora .mesh { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .38; animation: float 26s ease-in-out infinite alternate; } [data-theme="light"] .aurora .mesh { opacity: .26; } .mesh-1 { width: 640px; height: 640px; top: -260px; left: -140px; background: var(--accent); } .mesh-2 { width: 520px; height: 520px; top: -140px; right: -120px; background: var(--accent-3); animation-delay: -9s; } .mesh-3 { width: 480px; height: 480px; bottom: -300px; left: 38%; background: var(--accent-2); animation-delay: -17s; } @keyframes float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(48px, 40px, 0) scale(1.15); } } .badge { display: inline-flex; align-items: center; gap: .55rem; padding: .34rem .95rem .34rem .7rem; border: 1px solid var(--hairline); border-radius: 999px; background: var(--sheen); font-size: .82rem; color: var(--muted); margin-bottom: 1.8rem; } .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-4); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-4) 70%, transparent); animation: pip 2.6s ease-out infinite; } @keyframes pip { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.4rem; } .center .hero-actions { justify-content: center; } /* ── Capability strip ───────────────────────────────────── */ .strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; } .strip li { padding: .42rem .95rem; border: 1px solid var(--hairline); border-radius: 999px; font-size: .82rem; color: var(--muted); transition: color .22s var(--ease), border-color .22s var(--ease); } .strip li:hover { color: var(--text); border-color: var(--hairline-2); } /* ── Service cards ──────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.15rem; } /* Exactly two columns, auto-fit would give three at desktop widths */ .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { position: relative; display: flex; flex-direction: column; padding: 2.1rem 1.9rem; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone, var(--accent)) 16%, transparent), transparent 62%); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: var(--hairline-2); } .card:hover::before { opacity: 1; } .card-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; margin-bottom: 1.35rem; border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 30%, var(--hairline)); background: color-mix(in srgb, var(--tone, var(--accent)) 12%, var(--surface-2)); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tone, var(--accent)) 45%, transparent); } .card-icon svg { width: 27px; height: 27px; fill: none; stroke: var(--tone, var(--accent)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .card h3 { font-size: 1.18rem; letter-spacing: -0.028em; } .card p { color: var(--muted); font-size: .95rem; margin-bottom: 1.25rem; } .card .link { margin-top: auto; } /* Tones, set per card with style="--tone: …" */ .t-blue { --tone: #2e7bff; } .t-cyan { --tone: #22d3ee; } .t-violet { --tone: #a78bfa; } .t-green { --tone: #34d399; } .t-amber { --tone: #fbbf24; } .t-rose { --tone: #fb7185; } .t-indigo { --tone: #818cf8; } .t-sky { --tone: #38bdf8; } .t-teal { --tone: #2dd4bf; } .t-orange { --tone: #fb923c; } /* ── Alternating feature rows ───────────────────────────── */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; padding: clamp(3.5rem, 7vw, 6rem) 0; } .feature + .feature { border-top: 1px solid var(--hairline); } .feature:nth-child(even) .feature-copy { order: 2; } .feature h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); } .feature-copy > p { color: var(--muted); font-size: 1.04rem; } .ticks { list-style: none; display: grid; gap: .55rem; margin-top: 1.6rem; } .ticks li { position: relative; padding-left: 1.65rem; font-size: .95rem; color: var(--muted); } .ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 3px; background: var(--tone, var(--accent)); } /* Abstract visual panel, replaces stock photography */ .visual { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 20% 12%, color-mix(in srgb, var(--tone, var(--accent)) 26%, transparent), transparent 62%), radial-gradient(100% 80% at 88% 92%, color-mix(in srgb, var(--accent-3) 20%, transparent), transparent 60%), var(--surface); display: grid; place-items: center; overflow: hidden; isolation: isolate; } .visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--hairline) 1px, transparent 1px), linear-gradient(to bottom, var(--hairline) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(closest-side, #000, transparent); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); opacity: .8; } .visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--sheen), transparent 45%); } .visual svg { position: relative; z-index: 1; width: 55%; height: auto; filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--tone, var(--accent)) 28%, transparent)); } /* Theme-aware details inside the illustrations. Gradient fills are hard-coded per illustration; anything that must flip with the theme uses these classes instead. */ .visual .ink { fill: var(--text); } .visual .ink-s { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ── Numbered process ───────────────────────────────────── */ .process { list-style: none; display: grid; gap: 0; } .process li { display: grid; grid-template-columns: 92px 1fr; gap: clamp(1rem, 4vw, 3rem); padding: 2.4rem 0; border-top: 1px solid var(--hairline); } .process li:last-child { border-bottom: 1px solid var(--hairline); } .process .num { font-size: 1rem; font-weight: 600; letter-spacing: .1em; color: var(--muted); padding-top: .35rem; } .process h3 { font-size: 1.4rem; } .process p { color: var(--muted); margin: 0; max-width: 62ch; } /* ── Principles ─────────────────────────────────────────── */ .principles { list-style: none; display: grid; gap: 1.15rem; } .principles li { padding: 1.6rem 1.7rem; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); transition: border-color .3s var(--ease), transform .3s var(--ease); } .principles li:hover { border-color: var(--hairline-2); transform: translateY(-3px); } .principles h4 { font-size: 1.05rem; margin-bottom: .35rem; letter-spacing: -0.025em; } .principles p { color: var(--muted); font-size: .95rem; margin: 0; } /* ── Call to action band ────────────────────────────────── */ .cta { position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; overflow: hidden; isolation: isolate; text-align: center; } .cta .aurora .mesh { opacity: .3; } /* ── Coming-soon notice ─────────────────────────────────── */ .notice { position: relative; padding: clamp(2.2rem, 5vw, 3.6rem); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); text-align: center; overflow: hidden; } .notice::before { content: ""; position: absolute; inset: 0; background: radial-gradient(94% 74% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); pointer-events: none; } .notice > * { position: relative; } .notice h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); } .notice p { color: var(--muted); max-width: 56ch; margin-inline: auto; } .notice .badge { margin-bottom: 1.5rem; } .notice .hero-actions { justify-content: center; margin-top: 2.2rem; } .notice-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem 0 0; } .notice-list li { padding: .42rem .95rem; border: 1px solid var(--hairline); border-radius: 999px; font-size: .82rem; color: var(--muted); } /* ── Long-form prose (privacy, terms) ───────────────────── */ .prose { font-size: 1rem; } .prose h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin: 3rem 0 .8rem; padding-top: 2.2rem; border-top: 1px solid var(--hairline); } .prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .prose p, .prose li { color: var(--muted); } .prose ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .45rem; margin: 0 0 1.15em; } .prose strong { color: var(--text); font-weight: 550; } .prose .updated { font-size: .85rem; padding: .55rem 1rem; border: 1px solid var(--hairline); border-radius: 999px; display: inline-block; margin-bottom: 2.5rem; } /* ── Footer ─────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--hairline); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; background: var(--bg); font-size: .875rem; } .footer-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.25rem 1.5rem; padding-bottom: 2.5rem; } .footer-grid h5 { margin: 0 0 .9rem; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .footer-grid ul { list-style: none; display: grid; gap: .6rem; } .footer-grid a { color: var(--muted); transition: color .2s var(--ease); } .footer-grid a:hover { color: var(--text); } /* Bottom bar: copyright left, logo centered, legal links right. */ .footer-base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline); color: var(--muted); } .footer-base > p { justify-self: start; } .footer-mark { display: inline-flex; justify-self: center; } .footer-mark svg { width: 44px; height: 44px; } .footer-legal { justify-self: end; } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; } .footer-legal a { color: var(--muted); transition: color .2s var(--ease); } .footer-legal a:hover { color: var(--text); } .footer-legal .sep { color: var(--hairline-2); user-select: none; } /* ── Scroll reveal ────────────────────────────────────────── Gated on the .js class that theme.js adds to , so if JavaScript is unavailable the content simply shows. ───── */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 860px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1040px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 940px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature-copy { order: 0; } } @media (max-width: 620px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { body { font-size: 16.5px; } .menu-btn { display: inline-grid; } .nav-links { position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.4rem 1.6rem; background: var(--bg); border-bottom: 1px solid var(--hairline); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .nav-links.open { opacity: 1; transform: none; pointer-events: auto; } .nav-links a { padding: .95rem .1rem; font-size: 1rem; border-bottom: 1px solid var(--hairline); } .nav-links a::after { display: none; } .process li { grid-template-columns: 1fr; gap: .5rem; } .footer-base { grid-template-columns: 1fr; justify-items: center; text-align: center; } .footer-base > p, .footer-legal { justify-self: center; } } /* ── Reduced motion ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } }