/* LINCEO release fixes. Loaded after home-release.css. Scoped to html.linceo-release (home hero + header only). */ /* ---------- Header: the containers are white at the top of the page, not only after scrolling ---------- */ html.linceo-release [data-nc-header] .nc-header:not(.is-solid):not(.is-open):not(.mobile-is-open) .nc-header-left { background: #fffffff2; border: 1px solid #ffffffcc; box-shadow: 0 6px 24px #272A300B; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* The bar itself never gets a tint, so scrolling only moves the white containers. */ html.linceo-release [data-nc-header] .nc-header .nc-header-bar, html.linceo-release [data-nc-header] .nc-header.is-solid .nc-header-bar, html.linceo-release [data-nc-header] .nc-header.mobile-is-open .nc-header-bar { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ---------- Hero on phones and tablets: one full screen, large centred portrait, desktop colours ---------- */ @media (max-width: 980px) { html.linceo-release { --hm-portrait-h: clamp(400px, 68svh, 660px); /* height of the 16:9 portrait box at the first view */ --hm-portrait-w: calc(var(--hm-portrait-h) * 1.7778); --hm-face: .609; /* head centre inside the video frame (0-1) */ --hm-top: 60px; /* iPhone Safari: the toolbar collapses on the first scroll and the visible screen grows from the small to the large viewport height. The frame is as tall as the large one so the page never shows through below it, and the copy is anchored to the frame's bottom so it follows the screen edge instead of leaving an empty band. */ --hm-lvh: 100vh; --hm-sky: radial-gradient(78% 42% at 62% 26%, #f6dfb8 0%, #eab08a 34%, rgba(234,176,138,0) 72%), radial-gradient(92% 44% at 110% 10%, #62d0cf 0%, rgba(98,208,207,.9) 38%, rgba(98,208,207,0) 80%), radial-gradient(96% 58% at 114% 40%, #4cc7c9 0%, rgba(76,199,201,.82) 42%, rgba(76,199,201,0) 82%), radial-gradient(60% 30% at -8% 34%, #cf6a2c 0%, rgba(207,106,44,0) 76%), linear-gradient(180deg, #c05a1c 0%, #bb5a20 30%, #ad4a14 62%, #a1410d 100%); --hm-start-scale: .74; /* portrait size at the first view */ --hm-end-scale: .62; /* portrait size once the copy is fully in place */ --hm-copy-drop: 7svh; /* where the copy waits while the animation plays (below its final place) */ --hm-copy-rest: 0svh; /* where the copy settles once the animation has finished */ } /* Scroll progress (0 = first view, 1 = copy in place) is written by home-release-mobile.js. Without it the hero simply shows its final, fully readable layout. */ html.linceo-release #hero #hero-frame { --hm-t: 1; --hm-a: 1; --hm-c: 1; --hm-copy-y: 0px; } /* With scripting: the portrait keeps its first-view size for the whole animation (--hm-t stays 0, no zoom-out), the copy waits where it is while the twin plays (--hm-a = animation progress) and only moves up once the animation has finished (--hm-c). */ html.linceo-release.hm-parallax #hero #hero-frame { --hm-t: 0; --hm-a: 0; --hm-c: 0; --hm-copy-y: calc(var(--hm-copy-drop) - var(--hm-c) * (var(--hm-copy-drop) - var(--hm-copy-rest))); } /* The frame is pinned while the twin plays, so it must be exactly one screen tall. */ @supports (height: 100lvh) { html.linceo-release { --hm-lvh: 100lvh; } } html.linceo-release #hero #hero-frame { height: var(--hm-lvh); min-height: 560px; } /* Portrait, poster and twin share one box so they stay registered. The box is wider than the screen: the visitor sees the face large and centred, not the whole landscape frame letterboxed. */ html.linceo-release #hero #hero-frame :is(.studio-human, .studio-poster), html.linceo-release #hero .studio-twin-slot { top: var(--hm-top); bottom: auto; right: auto; left: calc(46vw - var(--hm-portrait-w) * var(--hm-face)); width: var(--hm-portrait-w); max-width: none; height: var(--hm-portrait-h); object-fit: contain; object-position: center bottom; mask-image: linear-gradient(#000 82%, transparent); -webkit-mask-image: linear-gradient(#000 82%, transparent); /* Parallax: the portrait pulls back around the head and eases left, making room for the twin on the right. */ transform-origin: calc(var(--hm-portrait-w) * var(--hm-face)) calc(var(--hm-portrait-h) * .04); transform: translate3d(calc(var(--hm-t) * -5vw), 0, 0) scale(calc(var(--hm-start-scale) - var(--hm-t) * (var(--hm-start-scale) - var(--hm-end-scale)))); will-change: transform; } /* The same three lights as the desktop (orange, cream-yellow, teal), arranged for a portrait screen. */ html.linceo-release #hero .studio-background { /* The light drifts more slowly than the portrait and the copy. */ transform: translate3d(0, calc(var(--hm-a) * -3.5svh), 0) scale(1.1); will-change: transform; background: var(--hm-sky); } html.linceo-release #hero .studio-background::before { background: radial-gradient(90% 44% at 70% 28%, #fbe7c2 0%, rgba(251,231,194,0) 70%), radial-gradient(76% 36% at 102% 16%, #92d9d3 0%, rgba(146,217,211,0) 74%), radial-gradient(66% 42% at 106% 46%, #7fd6d2 0%, rgba(127,214,210,0) 76%); } html.linceo-release #hero .studio-background::after { background: radial-gradient(80% 40% at 78% 22%, #ecdcb9 0%, rgba(236,220,185,0) 70%), radial-gradient(84% 40% at 98% 10%, #55c4c9 0%, rgba(85,196,201,0) 76%), radial-gradient(70% 44% at 104% 44%, #4fc1c6 0%, rgba(79,193,198,0) 78%); } /* Keeps the copy readable with a warm scrim, not the grey-brown overlay. */ html.linceo-release #hero .studio-readability { opacity: calc(.82 + var(--hm-a) * .18); background: linear-gradient(180deg, transparent 40%, rgba(160,62,14,.30) 54%, rgba(132,46,10,.58) 70%, rgba(112,38,8,.68) 100%); } /* Copy sits at the foot of the screen, under the portrait. Sizes are unchanged. */ html.linceo-release #hero #hero-frame .hero-copy { top: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); left: 24px; right: 24px; width: auto; max-width: 560px; /* The copy starts partly in view and rises into place with its own, faster parallax. */ transform: translate3d(0, var(--hm-copy-y), 0); will-change: transform; } /* Header: on small screens the logo container is a circle like the language button. */ /* The logo container is a pill sized to the NutriCheck logo with its wordmark, like the rest of the header. */ html.linceo-release [data-nc-header] .nc-header .nc-header-left { padding-inline: 14px; } html.linceo-release #hero #hero-frame .hero-scroll-cue { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); opacity: var(--hm-cue, 1); } /* The hero already scrolls itself, and the hint would sit on the awards once the copy has moved up. */ html.linceo-release.hm-parallax #hero #hero-frame .hero-scroll-cue { display: none; } } /* With scripting the scroll hint is hidden, so the copy can sit close to the bottom edge. */ @media (max-width: 980px) { html.linceo-release.hm-parallax #hero #hero-frame .hero-copy { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } } /* ---------- First paint: the hero looks right before any script has run (slow networks) ---------- */ /* The frame paints the same light the scripts add later, so the white copy is never on a blank cream page. */ html.linceo-release #hero #hero-frame { background: linear-gradient(102deg, #b64e13 0%, #b95720 30%, #d88668 51%, #f0d7b0 67%, #d0e7d9 81%, #73cccc 100%); } @media (max-width: 980px) { html.linceo-release #hero #hero-frame { background: var(--hm-sky); } /* Warm scrim for the copy until the script-built one exists (browsers without :has skip this, harmlessly). */ html.linceo-release #hero #hero-frame:not(:has(.studio-background))::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, rgba(160,62,14,.30) 54%, rgba(132,46,10,.58) 70%, rgba(112,38,8,.68) 100%); } /* The portrait is placed from the first paint: the