/* ===================================================================== Gratia Corp — landing page Type, colour and proportion follow the Figma frame "Gratia Website - Landing Page" (node 204:22). The page runs full width; --pad (side padding) and --page-max come from the CMS under Settings -> Layout & spacing and are injected in the document head. ===================================================================== */ /* ---------------------------------------------------------------- * Fonts — Space Grotesk, self-hosted, matching the Figma type styles * ---------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/space-grotesk-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: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/space-grotesk-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; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/space-grotesk-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* ---------------------------------------------------------------- * Design tokens * ---------------------------------------------------------------- */ :root { --accent: #f25930; --accent-dark: #d9451f; --dark: #262626; --light: #f2f2f2; --line: #3b3b3b; --line-soft: rgba(59, 59, 59, 0.4); --ink: rgba(0, 0, 0, 0.8); --ink-muted: rgba(0, 0, 0, 0.4); --paper: #ffffff; --paper-60: rgba(255, 255, 255, 0.6); --paper-50: rgba(255, 255, 255, 0.5); --paper-40: rgba(255, 255, 255, 0.4); --font: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Overridden by the CMS layout tokens injected in */ --pad: 100px; --page-max: none; --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------------------------------------------------------------- * Reset * ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; } body { margin: 0; font-family: var(--font); font-weight: 500; background: var(--dark); color: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video, iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 999; background: var(--accent); color: #fff; padding: 10px 18px; font-size: 12px; letter-spacing: .04em; transition: top .18s var(--ease); } .skip-link:focus { top: 8px; } .page { width: 100%; max-width: var(--page-max); margin-inline: auto; position: relative; overflow-x: clip; } /* Below-the-fold sections skip rendering work until they are near the viewport. The size hints keep the scrollbar honest while they are skipped. */ .services, .why, .cta-banner, .contact, .site-footer { content-visibility: auto; } .services { contain-intrinsic-size: auto 1000px; } .why { contain-intrinsic-size: auto 843px; } .cta-banner { contain-intrinsic-size: auto 507px; } .contact { contain-intrinsic-size: auto 726px; } .site-footer { contain-intrinsic-size: auto 485px; } /* ---------------------------------------------------------------- * Scroll reveal Elements start hidden only once JS has confirmed it can reveal them, so the page is fully readable without JavaScript. * ---------------------------------------------------------------- */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; } .js-reveal [data-reveal='fade'] { transform: none; } .js-reveal [data-reveal='left'] { transform: translateX(-28px); } .js-reveal [data-reveal='right'] { transform: translateX(28px); } .js-reveal [data-reveal='scale'] { transform: scale(.96); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- * Shared components * ---------------------------------------------------------------- */ /* Orange action button — 48px tall, 16px padding, 12px label (Figma) */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 41px; height: 48px; padding: 0 16px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; line-height: normal; text-align: center; overflow: hidden; transition: background-color .25s var(--ease), transform .25s var(--ease); } /* A sheen that sweeps across on hover */ .btn::before { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); transition: left .55s var(--ease); pointer-events: none; } .btn:hover::before { left: 120%; } .btn:hover { background: var(--accent-dark); } .btn:active { transform: translateY(1px); } .btn__arrow { flex: 0 0 auto; transition: transform .3s var(--ease); } .btn:hover .btn__arrow { transform: translateX(5px); } .btn--gap-15 { gap: 15px; } .btn--gap-10 { gap: 10px; } .btn--outline { background: transparent; border: 1px solid #fff; } .btn--outline:hover { background: rgba(255, 255, 255, .12); } .btn--block { width: 100%; } /* Eyebrow label with its hairline tick (circle + diagonal + rule) */ .eyebrow { position: relative; display: block; min-height: 29.5px; padding-left: 31px; color: var(--accent); font-size: 17px; font-weight: 500; letter-spacing: -0.51px; line-height: normal; white-space: nowrap; } .eyebrow__tick { position: absolute; left: 0; top: 5px; height: 24.5px; max-width: none; pointer-events: none; } /* Section heading — 42/45, tracking -1.26 at the design size */ .section-title { font-size: clamp(28px, 2.917vw, 42px); font-weight: 500; line-height: 1.0715; /* 45 / 42 */ letter-spacing: -0.03em; /* -1.26 / 42 */ } .section-intro { font-weight: 400; font-size: clamp(16px, 1.32vw, 19px); line-height: 1.474; /* 28 / 19 */ letter-spacing: -0.03em; } /* Two-column section header: title left, intro right */ .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; } .section-head__title { max-width: 407px; } .section-head__intro { max-width: 537px; } /* Section wrapper — full width with the CMS side padding */ .section { padding-inline: var(--pad); } /* ---------------------------------------------------------------- * Header / navigation * ---------------------------------------------------------------- */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 40; height: 220px; pointer-events: none; } .site-header__scrim { position: absolute; inset: 0; width: 100%; height: 220px; object-fit: fill; /* a pure vertical gradient — stretching keeps the fade */ pointer-events: none; } .site-header__inner { position: relative; height: 120px; padding-inline: var(--pad); display: flex; align-items: center; gap: 40px; pointer-events: auto; } .site-header__logo { flex: 0 0 auto; width: 205px; height: 60px; } .site-header__logo img { width: 205px; height: 60px; object-fit: contain; } .site-nav { margin-inline: auto; display: flex; align-items: center; gap: 70px; font-size: 12px; font-weight: 500; line-height: normal; white-space: nowrap; } .site-nav a { position: relative; padding-bottom: 4px; } .site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.is-current::after { transform: scaleX(1); } .site-header__cta { flex: 0 0 auto; width: 282px; } /* The nav's own button only exists for the mobile drawer */ .site-nav__cta { display: none; } /* Header condenses once the page is scrolled */ .site-header.is-stuck { position: fixed; height: 84px; background: rgba(28, 28, 28, .93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); animation: header-drop .45s var(--ease); } .site-header.is-stuck .site-header__scrim { opacity: 0; } .site-header.is-stuck .site-header__inner { height: 84px; } .site-header.is-stuck .site-header__logo, .site-header.is-stuck .site-header__logo img { width: 158px; height: 46px; } .site-header.is-stuck .site-header__cta { height: 42px; } .site-header.is-stuck .btn { height: 42px; } @keyframes header-drop { from { transform: translateY(-100%); } to { transform: none; } } /* Mobile menu toggle */ .nav-toggle { display: none; position: relative; flex: 0 0 auto; margin-left: auto; width: 48px; height: 48px; align-items: center; justify-content: center; background: var(--accent); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 2px; background: #fff; transition: transform .22s var(--ease), opacity .22s var(--ease); } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; } .nav-toggle span::before { transform: translateY(-6px); } .nav-toggle span::after { transform: translateY(6px); } .nav-toggle[aria-expanded='true'] span { background: transparent; } .nav-toggle[aria-expanded='true'] span::before { transform: rotate(45deg); } .nav-toggle[aria-expanded='true'] span::after { transform: rotate(-45deg); } /* ---------------------------------------------------------------- * Hero — 900px tall at the design size * ---------------------------------------------------------------- */ .hero { position: relative; height: 900px; overflow: hidden; background: var(--dark); } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hero-zoom 18s var(--ease) forwards; } @keyframes hero-zoom { from { transform: scale(1.07); } to { transform: scale(1); } } .hero__scrim { position: absolute; left: 0; bottom: 0; width: 100%; height: 507px; transform: scaleY(-1); opacity: .63; object-fit: fill; pointer-events: none; } .hero__play { /* A