/* ========================================================= Medicalware — site.css Self-hosted fonts, scroll behaviour, reveal animations and the hero wordmark watermark. ========================================================= */ /* ---- Fonts (self-hosted, latin subset, font-display:swap) ---- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); } /* ---- Base typography ---- Body inherits Inter. Headings get Space Grotesk via low-specificity selector so Tailwind utilities can still override per-element if needed. */ html { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif; scroll-behavior: smooth; scroll-padding-top: 5rem; /* offset for sticky header on anchor jumps */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(h1, h2, h3, h4, .font-display) { font-family: 'Space Grotesk', system-ui, sans-serif; font-feature-settings: 'ss01' on, 'ss02' on; } .font-mono, :where(.font-mono) { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---- Hero background ---- Architectural B/W photograph behind the hero text, with a subtle vertical parallax driven by the `--scroll-y` CSS variable set in main.js. The bg layer is 120% tall (top:-10% + bottom:-10%) so there's room to translate without exposing the edge. Reduced-motion users see a static image. */ .hero-watermark { position: relative; overflow: hidden; isolation: isolate; } .hero-watermark::after { content: ''; position: absolute; left: 0; right: 0; top: -10%; height: 120%; /* JPEG fallback first, then image-set with AVIF/WebP for capable browsers */ background-image: url('/assets/img/hero-bg.jpg'); background-image: image-set( url('/assets/img/hero-bg.avif') type('image/avif'), url('/assets/img/hero-bg.webp') type('image/webp'), url('/assets/img/hero-bg.jpg') type('image/jpeg') ); background-size: cover; background-position: center 35%; background-repeat: no-repeat; opacity: 0.22; z-index: -1; pointer-events: none; transform: translate3d(0, calc(var(--scroll-y, 0px) * 0.22), 0); will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero-watermark::after { transform: none; } } .hero-watermark > * { position: relative; } /* ---- Reveal-on-scroll (wired up in Phase 3 by main.js) ---- The `.js-ready` gate on means: if JS never runs, elements stay visible (no FOUC, no permanently hidden content). When main.js boots, it adds `.js-ready` to , which then hides `[data-reveal]` until the IntersectionObserver adds `.is-visible`. Children of `data-stagger` get progressive delay via the `--i` custom property assigned by JS. */ .js-ready [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 100ms); will-change: opacity, transform; } .js-ready [data-reveal].is-visible { opacity: 1; transform: none; } /* ---- Accessibility: respect prefers-reduced-motion ---- Disable all motion and reveal animations at the OS level. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ---- Focus visible: keyboard navigation must always be obvious ---- */ :focus-visible { outline: 2px solid #39e0c4; outline-offset: 3px; border-radius: 2px; } /* ---- Selection: brand-coloured ---- */ ::selection { background: #39e0c4; color: #0A0A0A; } /* ---- Card background image (B&W photo as ambient texture) ---- The image sits behind the content at low alpha. On hover (card flips to ink bg) opacity bumps slightly so the image keeps presence on dark. Per-card image is set via modifier classes below, which provide an AVIF/WebP/JPEG fallback chain via image-set. Old inline custom property `--card-bg-image` is still honored as a fallback. */ .card-bg { position: relative; isolation: isolate; overflow: hidden; } .card-bg::before { content: ''; position: absolute; inset: 0; background-image: var(--card-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--card-bg-opacity, 0.18); z-index: -1; transition: opacity 0.3s ease; pointer-events: none; } .card-bg:hover::before { opacity: var(--card-bg-opacity-hover, 0.28); } /* Modifier: card permanently in dark state — image stays at the hover-level alpha. */ .card-bg--dark::before { opacity: var(--card-bg-opacity, 0.28); } /* Per-card image modifiers with AVIF/WebP/JPEG fallback. */ .card-bg--team::before { background-image: url('/assets/img/team.jpg'); background-image: image-set( url('/assets/img/team.avif') type('image/avif'), url('/assets/img/team.webp') type('image/webp'), url('/assets/img/team.jpg') type('image/jpeg') ); } .card-bg--research::before { background-image: url('/assets/img/cuttingadge.jpg'); background-image: image-set( url('/assets/img/cuttingadge.avif') type('image/avif'), url('/assets/img/cuttingadge.webp') type('image/webp'), url('/assets/img/cuttingadge.jpg') type('image/jpeg') ); } .card-bg--products::before { background-image: url('/assets/img/bridge.jpg'); background-image: image-set( url('/assets/img/bridge.avif') type('image/avif'), url('/assets/img/bridge.webp') type('image/webp'), url('/assets/img/bridge.jpg') type('image/jpeg') ); } /* ---- Small refinement: the "01 / Chi siamo" section markers ---- */ .section-marker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6B6B; } .section-marker .num { color: #0A0A0A; font-weight: 500; } .section-marker .slash { display: inline-block; margin: 0 0.35em; color: #39e0c4; transform: translateY(-0.05em); } /* On dark sections the marker swaps to light colours via the parent. */ .section--dark .section-marker { color: rgba(229, 229, 229, 0.7); } .section--dark .section-marker .num { color: #FFFFFF; } /* ---- Section video background ---- Plays a muted, looping video behind a dark section. The section's own dark background colour stays as the base; the video is layered on top at low opacity so the effect is subtle. A small dark veil keeps text contrast safe regardless of the frame currently shown. */ .section-video-bg { position: relative; overflow: hidden; isolation: isolate; } .section-video-bg__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; z-index: -2; pointer-events: none; } .section-video-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.18) 100%); z-index: -1; pointer-events: none; } .section-video-bg--heavy .section-video-bg__media { opacity: 0.45; } .section-video-bg--heavy::before { background: linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.12) 25%, rgba(10,10,10,0.28) 50%, rgba(10,10,10,0.12) 75%, rgba(10,10,10,0) 100%); } @media (prefers-reduced-motion: reduce) { .section-video-bg__media { display: none; } } /* ---- Glass card ---- Frosted-glass effect over a video/dark background. The backdrop-filter blurs whatever is painted under the card; saturate() amplifies the visual cue so the blur is noticeable even on low-contrast video frames. -webkit- prefix kept for Safari support. */ .glass-card { background-color: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }