/* Critical CSS — extracted 1:1 from of _webflow-source/index.html (NEW). Loaded first to prevent FOUC and CLS on slow connections. */ /* === Self-hosted Atyp display font — 3 weights actually used === Audit of theme.css design tokens showed Atyp only ever resolves to: --primary-regular: 400 → Regular --primary-medium: 500 → Medium --primary-bold: 600 → Semibold (Webflow's token name is "bold" but the value is 600, not 700) We dropped Thin/Light/Bold (the only `font-weight: 700` rule was on an unused `.title-small` class). 132 KB total instead of 263 KB. font-display: swap on every weight → no FOIT. */ @font-face { font-family: 'atyp-bl-variable'; src: url('../fonts/atyp-display-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'atyp-bl-variable'; src: url('../fonts/atyp-display-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'atyp-bl-variable'; src: url('../fonts/atyp-display-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* === Font family overrides (self-hosted via next/font + local Atyp) === - `--font-space-grotesk` is injected on by spaceGrotesk.variable in src/lib/fonts.ts (next/font/google, self-hosted at build). - `atyp-bl-variable` resolves to the local @font-face above. We override both Webflow-exported design tokens here so theme.css continues to work — with a system-font cascade in case next/font or Atyp fail to load. */ :root { --_typography---font--primary-family: 'atyp-bl-variable', "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --_typography---font--secondary-family: var(--font-space-grotesk), "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Core Performance */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Lazy Loading pentru imagini */ img[loading="lazy"] { transition: opacity 0.3s ease; } img[loading="lazy"]:not(.loaded) { opacity: 0.8; } img[loading="lazy"].loaded { opacity: 1; } /* Layout Shift Prevention */ img, video, iframe, canvas { max-width: 100%; height: auto; } /* Mobile Touch Targets */ @media (hover: none) and (pointer: coarse) { button, a, [role="button"] { min-height: 44px; min-width: 44px; } } /* Device Classes pentru targeting */ .is-mobile body { touch-action: manipulation; } /* === Lenis smooth scroll required CSS === Lenis tags with `.lenis` on init and `.lenis-smooth` while smooth-scroll is active. Without these overrides, two things break: 1. webflow.css ships `html { height: 100% }` which caps the document to viewport height — Lenis thinks max scroll is just the viewport and refuses to scroll past it (the "can't reach footer" bug). 2. Native `scroll-behavior: smooth` would fight Lenis's RAF-driven scroll and create jitter at anchor links. Reference: https://github.com/darkroomengineering/lenis */ html.lenis, html.lenis body { height: auto !important; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* === Reveal primitive — hide children until they enter the viewport === The Reveal Client Component watches each target with IntersectionObserver and flips `data-reveal-item` from "pending" to "in" on intersect. The pending state is hidden + translated; the "in" state fades + slides to the resting position. The transition runs entirely in CSS so even if JS fails to mount, the SSR-rendered markup eventually becomes visible via the `[data-reveal-fallback]` rule below. */ [data-reveal-item="pending"] { opacity: 0; transform: translate3d(0, 24px, 0); } [data-reveal-item="in"] { opacity: 1; transform: translate3d(0, 0, 0); } [data-reveal-item] { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } /* Fallback: if the Reveal component never hydrates (JS error, slow client), show children after 1.5s rather than leaving the page blank. */ @media (prefers-reduced-motion: reduce) { [data-reveal-item], [data-reveal-item="pending"], [data-reveal-item="in"] { opacity: 1 !important; transform: none !important; transition: none !important; } }