/* AMME — common: fonts, tokens, base, buttons (loaded on every page) */ /* ------------------------------------------------------------------ FONTS (all files self-hosted in /fonts) Helvetica Now Display FIRST choice for all text (licensed, fonts/HelveticaNowDisplay/). Inter takes over only if a Helvetica file can't load. Inter fallback for all text (Google Font, licence: fonts/OFL-Inter.txt) variable weight 100–900 + italic Glitch Demo the glitch word on the homepage only (licensed, fonts/GlitchDemo-Regular.woff2) Inter: only the Latin + Latin-extended files are included. Helvetica Now Display has the ₹ sign itself. -------------------------------------------------------------------*/ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../fonts/inter-latin-ext-wght-normal.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; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../fonts/inter-latin-wght-normal.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: italic; font-weight: 100 900; font-display: swap; src: url("../../fonts/inter-latin-ext-wght-italic.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; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../../fonts/inter-latin-wght-italic.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; } /* Helvetica Now Display (licensed): files in fonts/HelveticaNowDisplay/. Weights the site uses, 300–800 + italics; a browser only downloads the styles a page actually uses. The family also has Thin, Hairline, ExtLt, Black, ExtBlk. */ @font-face { font-family: "Helvetica Now Display"; font-weight: 300; font-style: normal; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Light.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Light.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Regular.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Regular.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Medium.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Medium.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Bold.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-Bold.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtraBold.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtraBold.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 300; font-style: italic; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-LightIta.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-LightIta.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 400; font-style: italic; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-RegIta.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-RegIta.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 500; font-style: italic; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-MedIta.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-MedIta.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 700; font-style: italic; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-BoldIta.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-BoldIta.woff") format("woff"); } @font-face { font-family: "Helvetica Now Display"; font-weight: 800; font-style: italic; font-display: swap; src: url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBdIta.woff2") format("woff2"), url("../../fonts/HelveticaNowDisplay/HelveticaNowDisplay-ExtBdIta.woff") format("woff"); } /* Glitch Demo (licensed): the glitch word on the homepage, no fallback font */ @font-face { font-family: "Glitch Demo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../fonts/GlitchDemo-Regular.woff2") format("woff2"); } /* ------------------------------------------------------------------ TOKENS (from the Figma file) -------------------------------------------------------------------*/ :root { --purple: #86579d; /* brand tints (80 / 60 / 40%) */ --amber-80: #fcc066; --amber-60: #fdd08c; --amber-40: #fddfb3; --teal-80: #65c9c7; --teal-60: #8bd6d5; --teal-40: #b2e4e3; --purple-80: #9e79b1; --purple-60: #b69ac4; --purple-40: #cfbcd8; --ink-80: #5b575d; --ink-60: #848186; --ink-40: #adabae; --purple-deep: #7e1bae; --teal: #3ebbb9; --amber: #fbb040; --ink: #322d35; --cream: #fff3e0; --black: #000; --white: #fff; --line: rgba(var(--black-rgb), 0.2); /* Colour palette: every colour on the site is one of these. Brand colours and tints are above. */ --sunset: #c1836f; /* middle stop of the purple → amber brand gradient */ --amber-20: #ffeacc; --lilac: #ebc4fe; --mist: #e5e8eb; /* neutral greys, light → dark */ --grey-50: #f5f6f8; --grey-100: #f3f3f3; --grey-150: #f1f1f1; --grey-175: #e8e8e8; --grey-200: #e3e3e3; --grey-250: #dedede; --grey-300: #d9d9d9; --grey-350: #d0d0d0; --grey-400: #c0bdbd; --grey-500: #a4a4a4; --grey-550: #8b8b8b; --grey-600: #707070; --grey-650: #666666; --grey-700: #4a4a4a; --grey-850: #2a2a2a; --grey-900: #1f1f1f; --grey-950: #121212; /* plum-tinted darks (dark sections and cards) */ --plum-600: #534956; --plum-650: #4a4048; --plum-700: #3a323e; --plum-800: #2c2530; --plum-900: #1e1a1f; /* form states */ --danger: #d0463b; --danger-text: #c0392b; --danger-deep: #a52a1f; --danger-bg: #fdecea; /* the same colours as r, g, b channels, for see-through versions: rgba(var(--black-rgb), .2) */ --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; --teal-rgb: 62, 187, 185; --purple-rgb: 134, 87, 157; --cream-rgb: 255, 243, 224; --danger-rgb: 208, 70, 59; --grey-175-rgb: 232, 232, 232; --grey-300-rgb: 217, 217, 217; --grey-350-rgb: 208, 208, 208; --font: "Helvetica Now Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Helvetica Now Display first, then Inter */ --font-book: var(--font); /* paragraph text: same family today, split out so it can change on its own */ --font-glitch: "Glitch Demo", sans-serif; /* Glitch Demo only */ /* Design canvas is 1920 wide with a 1500 content column. */ --container: min(1500px, 88vw); /* Type scale: the only font sizes on the site (px values at the 1920 design width). Small UI text stays fixed; headings scale down fluidly on smaller screens. */ --fs-2xs: 0.75rem; /* 12 badges, tags, tiny labels */ --fs-xs: 0.875rem; /* 14 captions, notes, chips */ --fs-sm: 1rem; /* 16 buttons, nav, small body */ --fs-body: 1.125rem; /* 18 body copy */ --fs-md: 1.25rem; /* 20 large body, card text */ --fs-lead: clamp(1.125rem, 1.25vw, 1.5rem); /* 24 intros, card titles */ --fs-xl: clamp(1.5rem, 1.667vw, 2rem); /* 32 sub-headings */ --fs-h3: clamp(1.625rem, 1.875vw, 2.25rem); /* 36 card / block headings */ --fs-quote: clamp(1.75rem, 2.3vw, 2.75rem); /* 44 quotes, large callouts */ --fs-statement: clamp(1.75rem, 2.97vw, 3.5625rem); /* 57 statements */ --fs-display: clamp(2.25rem, 3.854vw, 4.625rem); /* 74 section titles */ --fs-big: clamp(3rem, 4.5vw, 6rem); /* 86 big numbers, statement lines */ --fs-hero: clamp(3rem, 5.625vw, 6.75rem); /* 108 page hero titles */ /* Art-directed text sized to fit artwork (map mask, MarkSharp word, homepage marquee) keeps its own size on purpose. */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--white); color: var(--black); font-family: var(--font); font-weight: 400; line-height: 1.25; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } p, h1, h2, h3 { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .container { width: var(--container); margin-inline: auto; } .grad-text { background: linear-gradient(to right, var(--black), var(--grey-650)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: 0.14em; /* keeps descenders inside the clipped gradient */ } .grad-text--light { background-image: linear-gradient(to right, var(--white), var(--grey-300)); } .btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 10px 30px; border-radius: 10px; font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; transition: transform .2s ease, background-color .2s ease, color .2s ease; } .btn:hover { transform: translateY(-2px); } .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .btn--dark { background: var(--black); color: var(--white); } .btn--dark:hover { background: var(--purple); } .btn--light { background: var(--white); color: var(--black); } .btn--light:hover { background: var(--ink); color: var(--white); } .btn--outline { background: var(--grey-900); color: var(--white); border: 1px solid var(--grey-500); height: auto; padding: 15px 30px; } .btn--outline:hover { background: var(--purple); } @media (max-width: 900px) { :root { --container: calc(100% - 40px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } } /* ---------- smooth scroll (Lenis) ---------- */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* ---------- site loader + page transition ---------- White screen with the emblem. The screen is 5 columns; each column is a white layer over amber, teal and purple layers. Leaving the loader: the columns slide up one after another and the brand colours trail behind the white. Going to another page: the colours sweep up first and the white lands on top. */ .pt { position: fixed; inset: 0; z-index: 9999; color: var(--ink); display: grid; place-items: center; pointer-events: all; animation: pt-failsafe 0s 8s forwards; /* never leaves the page covered if the script fails */ } .pt__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; } .pt__col { position: relative; margin-right: -1px; } /* overlap by 1px: no hairline gaps */ .pt__layer { position: absolute; inset: 0; will-change: transform; } .pt__layer--purple { background: var(--purple); } .pt__layer--teal { background: var(--teal); } .pt__layer--amber { background: var(--amber); } .pt__layer--white { background: var(--white); } .pt__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); transition: transform .5s cubic-bezier(.76,0,.24,1), opacity .35s ease; } .pt__emblem { width: clamp(60px, 6vw, 96px); height: auto; overflow: visible; } .pt__word { margin: 0; font-family: var(--font); font-weight: 700; font-size: var(--fs-lead); line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .pt__word span { display: block; overflow: hidden; padding-bottom: .08em; } .pt__word i { display: block; font-style: normal; transform: translateY(110%); animation: pt-up .7s cubic-bezier(.2,.8,.2,1) forwards; } .pt__word span:nth-child(1) i { animation-delay: 1.2s; } .pt__word span:nth-child(2) i { animation-delay: 1.3s; } .pt__word span:nth-child(3) i { animation-delay: 1.4s; } /* emblem: teal bars rise, amber arcs draw, the purple half-disc grows and its rings draw outwards */ .pt-disc { transform-box: fill-box; transform-origin: 0% 50%; transform: scaleX(0); animation: pt-grow-x .5s cubic-bezier(.34,1.56,.64,1) forwards; } .pt-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: pt-grow .55s cubic-bezier(.34,1.56,.64,1) forwards; } .pt-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pt-draw .6s cubic-bezier(.65,0,.35,1) forwards; } .pt__emblem { animation: pt-settle .5s cubic-bezier(.34,1.56,.64,1) 1.5s both; } /* later pages in the same visit: emblem already drawn, just a soft pulse */ .pt.is-quick .pt-bar, .pt.is-quick .pt-line, .pt.is-quick .pt-disc, .pt.is-quick .pt__word i { animation: none; transform: none; stroke-dashoffset: 0; } .pt.is-quick .pt__emblem { animation: pt-pulse 1.2s ease-in-out infinite; } /* leaving the loader: logo fades, columns slide up left to right, white first with the colours trailing */ /* progress bar under the emblem: fills as the page loads */ .pt__bar { position: absolute; z-index: 2; left: 50%; bottom: clamp(48px, 12vh, 120px); width: clamp(140px, 14vw, 220px); height: 3px; margin-left: calc(clamp(140px, 14vw, 220px) / -2); border-radius: 999px; background: var(--grey-200); overflow: hidden; transition: opacity .35s ease; } .pt__bar i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; border-radius: inherit; background: linear-gradient(to right, var(--amber), var(--teal), var(--purple)); transition: transform .45s cubic-bezier(.2,.8,.2,1); } .pt.is-out .pt__bar, .pt.is-cover .pt__bar, .pt.is-cover-start .pt__bar { opacity: 0; } .pt.is-js { animation: none; } /* with JS on, the loader waits for the page (common.js); the 8 s failsafe above is for no-JS only */ .pt.is-out { pointer-events: none; } .pt.is-out .pt__inner { opacity: 0; transform: translateY(-24px) scale(.96); } .pt.is-out .pt__layer { transform: translateY(-100%); transition: transform .75s cubic-bezier(.76,0,.24,1); transition-delay: calc(var(--c) * 70ms + var(--l) * 55ms + 120ms); } .pt.is-done { visibility: hidden; } .pt.is-done .pt__layer { transform: translateY(-100%); } /* going to another page: purple, teal, amber sweep up and the white lands on top, column by column */ .pt.is-cover-start { animation: none; visibility: visible; } .pt.is-cover-start .pt__layer { transform: translateY(100%); transition: none; } .pt.is-cover-start .pt__inner { opacity: 0; transition: none; } .pt.is-cover { animation: none; visibility: visible; } .pt.is-cover .pt__layer { transform: translateY(0); transition: transform .55s cubic-bezier(.76,0,.24,1); transition-delay: calc(var(--c) * 40ms + (3 - var(--l)) * 45ms); } .pt.is-cover .pt__inner { opacity: 1; transform: none; transition: opacity .3s ease .55s; } html.is-loading, html.is-loading body { overflow: hidden; } @keyframes pt-grow { to { transform: scaleY(1); } } @keyframes pt-grow-x { to { transform: scaleX(1); } } @keyframes pt-draw { to { stroke-dashoffset: 0; } } @keyframes pt-up { to { transform: translateY(0); } } @keyframes pt-settle { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes pt-pulse { 50% { transform: scale(1.06); } } @keyframes pt-failsafe { to { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .pt-bar, .pt-line, .pt-disc, .pt__word i, .pt__emblem { animation: none !important; transform: none !important; stroke-dashoffset: 0 !important; } .pt__layer--purple, .pt__layer--teal, .pt__layer--amber { display: none; } .pt.is-out .pt__layer, .pt.is-cover .pt__layer { transform: none; transition: none; } .pt.is-out { opacity: 0; transition: opacity .3s ease; } } /* ---------- buttons: cube flip on hover (every a.btn on the site; built by assets/js/common.js) ---------- front face = the button as designed, back face = the brand colour it flips to */ a.btn.is-cube { padding: 0 !important; height: auto !important; min-height: 0; background: none !important; border: 0 !important; border-radius: 0; perspective: 700px; overflow: visible; isolation: isolate; -webkit-tap-highlight-color: transparent; } a.btn.is-cube .in { display: grid; width: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.7,0,.2,1); } a.btn.is-cube .f, a.btn.is-cube .k { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--bh, 50px); padding: var(--bp, 10px 30px); border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; white-space: nowrap; } a.btn.is-cube .f { transform: translateZ(var(--bd, 25px)); } a.btn.is-cube .k { transform: rotateX(-90deg) translateZ(var(--bd, 25px)); } a.btn.is-cube .k::after { content: "\2192"; font-weight: 400; margin-left: 2px; } a.btn.is-cube:hover .in, a.btn.is-cube:focus-visible .in { transform: rotateX(90deg); } a.btn.is-cube:hover { transform: none; } /* the cube turns instead of the button lifting */ /* colours: front / back */ a.btn.is-cube .f { background: var(--black); color: var(--white); } a.btn.is-cube .k { background: var(--purple); color: var(--white); } a.btn--outline.is-cube .f { background: var(--grey-900); box-shadow: inset 0 0 0 1px var(--grey-500); } a.btn--light.is-cube .f { background: var(--white); color: var(--black); } a.btn--light.is-cube .k { background: var(--ink); color: var(--white); } .batches__card a.btn--light.is-cube .f { box-shadow: inset 0 0 0 1px var(--white); } .compare__highlight a.btn.is-cube .k { background: var(--amber); color: var(--ink); } .contact-card a.btn.is-cube .f { background: var(--purple); color: var(--white); } .contact-card a.btn.is-cube .k { background: var(--ink); color: var(--white); } @media (prefers-reduced-motion: reduce) { a.btn.is-cube .in { transition: none; } a.btn.is-cube:hover .in, a.btn.is-cube:focus-visible .in { transform: none; } a.btn.is-cube .k { display: none; } a.btn.is-cube:hover .f { background: var(--purple); color: var(--white); } } /* ---------- cursor: dot + amber snap brackets (mouse only, built by assets/js/common.js) ---------- */ html.has-snap-cursor, html.has-snap-cursor * { cursor: none !important; } .snap { position: fixed; left: 0; top: 0; width: 30px; height: 30px; z-index: 9000; pointer-events: none; color: var(--amber); opacity: 0; transition: opacity .2s ease; will-change: transform, width, height; } .snap.is-on { opacity: 1; } .snap i { position: absolute; width: 9px; height: 9px; border: 0 solid currentColor; transition: width .25s ease, height .25s ease; } .snap.is-locked i { width: 12px; height: 12px; } .snap i:nth-child(1) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 2px; } .snap i:nth-child(2) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 2px; } .snap i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 2px; } .snap i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 2px; } .snap-dot { position: fixed; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; z-index: 9001; pointer-events: none; background: var(--ink); box-shadow: 0 0 0 2px var(--white); opacity: 0; transition: opacity .2s ease, background-color .2s ease, width .2s ease, height .2s ease, left .2s ease, top .2s ease; } .snap-dot.is-on { opacity: 1; } .snap-dot.is-locked { width: 4px; height: 4px; left: -2px; top: -2px; box-shadow: 0 0 0 1.5px var(--white); } /* smaller while locked, so it doesn't cover the label */