/* ============================================================ IGM — India Gold Metaverse · Objectives page (standalone) Self-contained stylesheet for objectives.html: fonts, tokens, base, navbar + footer partials, and the reused About-page components (hero band, numbered .approach-step cards, rotating tagline, dark FAQ) plus the Objectives-only intro and card tweaks. Extracted verbatim from /assets/css/styles.css so it renders the page on its own — no dependency on /assets/css/styles.css. Fonts: Satoshi + Clash Display (self-hosted) · Instrument Serif (Google Fonts, linked in the page ). ============================================================ */ /* ---------- fonts · tokens · base · shared .pill ---------- */ @font-face { font-family: 'Satoshi'; src: url('/assets/img/fonts/satoshi-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/assets/img/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/assets/img/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/assets/img/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Clash Display'; src: url('/assets/img/fonts/clashdisplay-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } :root { --neutral-50: #ffffff; --neutral-300: #c8c8d2; --neutral-500: #77777f; --neutral-600: #606070; --neutral-800: #232330; --neutral-900: #0d0f1a; --gold-100: #f0e6d1; /* faint gold for oversized display numerals */ --gold-300: #d6ba81; --gold-warm: #cfb38d; /* warm serif accent used across the About redesign */ --gold-500: #b9903f; --gold-grad: linear-gradient(100deg, #b9903f 0%, #e8cf8f 45%, #b9903f 100%); --cream: #fbf7ef; --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --serif: "Instrument Serif", Georgia, serif; --maxw: 1200px; /* Figma's spring (mass 1, stiffness 100, damping 15) solved and sampled as an easing curve: damping ratio .75, so it overshoots ~2.8% and settles in .82s. A cubic-bezier can't overshoot, hence linear(). */ --spring: linear( 0 0%, 0.0424 3.8%, 0.1441 7.7%, 0.2747 11.5%, 0.4131 15.4%, 0.5455 19.2%, 0.6637 23.1%, 0.7637 26.9%, 0.8447 30.8%, 0.9073 34.6%, 0.9536 38.5%, 0.9861 42.3%, 1.0075 46.2%, 1.0202 50%, 1.0265 53.8%, 1.0284 57.7%, 1.0273 61.5%, 1.0245 65.4%, 1.0208 69.2%, 1.0169 73.1%, 1.0131 76.9%, 1.0097 80.8%, 1.0069 84.6%, 1.0045 88.5%, 1.0027 92.3%, 1.0014 96.2%, 1 100% ); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--sans); color: var(--neutral-900); background: #fff; line-height: 1.45; /* backstop for the full-bleed decorative curves. `hidden` on body alone relies on overflow propagating to the viewport, which some browsers don't honour — `clip` on both html and body kills the sideways scroll without making a scroll container */ overflow-x: hidden; overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0%;font-size: 22px; line-height: 28px; } em-btn { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0%;font-size: 14px; line-height: 28px; } /* ---------- shared ---------- */ .pill { display: inline-block; padding: 4px 14px; border-radius: 999px; background: #eeeef1; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-900); } .nav-logo-header-footer{ height: 90px; width: auto; padding-bottom: 10px; } .pill.small { font-size: 11px; padding: 3px 10px; background: #f2f2f2; } .pill.dark-pill { background: #1c1c26; color: #fff; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 4px; font-size: 14px; font-weight: 500; letter-spacing: .02em; /* 0.28px @ 14px, per Figma buttons */ text-transform: uppercase; transition: opacity .2s, transform .2s; } .btn:hover { opacity: .85; transform: translateY(-1px); } .btn-light { background: #fff; color: var(--neutral-900); } .btn-dark { background: #000; color: #fff; } /* Neutral-950, per Figma "Dark Solid" */ .btn-dark.big { margin: 40px auto 0; display: flex; width: max-content; } .btn-outline { background: rgba(255,255,255,.11); border: .8px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fafafa; height: 40px; padding: 0 12px; font-family: "Clash Display", var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; border-radius: 4px; } /* .btn was only ever used on until the enquire modal's triggers needed real