/* ELVARIS SOFTWARE LTD — loader.css Loader animation layer + full-bleed page hero system. The loader's *structural* styles (background, positioning, hidden shell, scroll lock) are inlined as critical CSS in every page , so the loader paints on the first frame without waiting for this file. What lives here is only the animation polish, which may safely arrive a moment later. */ /* ======================================================================= LOADER ANIMATION — full mode (direct entry) and compact mode (transition) ======================================================================= */ /* Symbol strokes draw themselves in */ .site-loader__mark path { stroke-dasharray: var(--l, 40); stroke-dashoffset: var(--l, 40); animation: sl-draw 620ms cubic-bezier(0.16,1,0.3,1) forwards; } .site-loader__mark path:nth-of-type(1) { animation-delay: 40ms; } .site-loader__mark path:nth-of-type(2) { animation-delay: 130ms; } .site-loader__mark path:nth-of-type(3) { animation-delay: 220ms; } .site-loader__mark path:nth-of-type(4) { animation-delay: 310ms; } .site-loader__mark circle { opacity: 0; transform-origin: center; animation: sl-pop 380ms cubic-bezier(0.16,1,0.3,1) 500ms forwards; } @keyframes sl-draw { to { stroke-dashoffset: 0; } } @keyframes sl-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } } /* Wordmark rises through a mask */ .site-loader__word { overflow: hidden; position: relative; animation: sl-word 560ms cubic-bezier(0.16,1,0.3,1) 380ms both; } @keyframes sl-word { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Progress line — full mode fills over ~1.05s */ .site-loader__bar { animation: sl-fill 1050ms cubic-bezier(0.5,0.05,0.2,1) 120ms forwards; } @keyframes sl-fill { to { right: 0; } } /* Compact mode: same identity, markedly quicker, no re-draw of the symbol */ html.is-compact .site-loader__mark path { animation-duration: 300ms; animation-delay: 0ms; } html.is-compact .site-loader__mark circle { animation-delay: 180ms; animation-duration: 220ms; } html.is-compact .site-loader__word { animation-duration: 260ms; animation-delay: 60ms; } html.is-compact .site-loader__bar { animation-duration: 420ms; animation-delay: 0ms; } html.is-compact .site-loader__inner { gap: 1.1rem; } /* Outgoing side of a transition: loader comes back over the leaving page */ html.is-exiting .site-loader { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Reduced motion: keep the brand, drop the movement */ @media (prefers-reduced-motion: reduce) { .site-loader__mark path { stroke-dashoffset: 0; animation: none; } .site-loader__mark circle { opacity: 1; animation: none; } .site-loader__word { animation: none; opacity: 1; transform: none; } .site-loader__bar { right: 0; animation: none; } .site-loader { transition: opacity .15s ease, visibility 0s linear .15s; } } /* ======================================================================= FULL-BLEED PAGE HERO The photograph fills the ENTIRE hero. All darkening is done with layered gradients on top of it, so there is never a hard black side column or any letterboxing — it reads as one continuous cinematic image. ======================================================================= */ .page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--ivory); } .page-hero__media { position: absolute; inset: 0; /* fills the whole hero — no gaps, no columns */ z-index: 0; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; /* never contain — no letterboxing */ object-position: var(--pos, 58% center); /* per-page override */ /* Per-page exposure. Measured mean luminance across these six photographs ranges from 27 to 108, so a single treatment cannot serve them all — each page sets --img-filter to land in a comparable exposure band. */ filter: var(--img-filter, brightness(1.3) contrast(1.03) saturate(1.05)); transform: scale(1.03); animation: ph-settle 1600ms cubic-bezier(0.16,1,0.3,1) 80ms forwards; } @keyframes ph-settle { to { transform: scale(1); } } /* Layer 1: horizontal scrim protecting the text column at ANY height. Layer 2: vertical seat + lower vignette. Layer 3: soft brand colour wash. All soft-edged — no visible boundary. */ .page-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,16,22,0.94) 0%, rgba(14,16,22,0.88) 30%, rgba(14,16,22,0.66) 46%, rgba(14,16,22,0.32) 62%, rgba(14,16,22,0.10) 80%, rgba(14,16,22,0.04) 100%), linear-gradient(180deg, rgba(14,16,22,0.52) 0%, rgba(14,16,22,0.12) 34%, rgba(14,16,22,0.30) 78%, rgba(14,16,22,0.72) 100%), var(--wash, linear-gradient(150deg, rgba(47,85,240,0.20) 0%, rgba(14,16,22,0) 52%, rgba(47,85,240,0.16) 100%)); } .page-hero__grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } .page-hero__inner { position: relative; z-index: 3; /* Full-width rail matching the site gutter. Previously this element also carried .container (max-width 1340 + margin-inline auto) while setting max-width 60ch, so the narrow text block was CENTRED in the viewport and started ~690px in on 1920. It is now a full-width flex rail. */ width: min(calc(100% - 48px), 1560px); margin-inline: auto; min-height: inherit; display: flex; align-items: center; padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); max-width: none; } .page-hero__content { width: min(680px, 100%); margin: 0; min-width: 0; } /* Extra guaranteed scrim behind the copy itself */ .page-hero__inner::before { content: ""; position: absolute; z-index: -1; inset-block: -1rem; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: radial-gradient(120% 92% at 20% 50%, rgba(14,16,22,0.86) 0%, rgba(14,16,22,0.66) 44%, rgba(14,16,22,0.22) 70%, rgba(14,16,22,0) 86%); } .page-hero h1 { color: var(--white); font-size: clamp(2.05rem, 4.3vw, 3.45rem); letter-spacing: -0.026em; max-width: 20ch; margin-bottom: 0.45em; } .page-hero__lead { color: rgba(246,243,236,0.84); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.62; max-width: 56ch; } .page-hero .breadcrumbs, .page-hero .breadcrumbs a { color: rgba(246,243,236,0.62); } .page-hero .breadcrumbs a:hover { color: var(--white); } .page-hero .section-kicker { color: var(--luminous); } .page-hero .activity-code-badge { background: rgba(246,243,236,0.13); color: var(--white); border: 1px solid rgba(246,243,236,0.3); backdrop-filter: blur(6px); } /* Category / stage indicator chips */ .page-hero__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.85rem; } .page-hero__chips span, .page-hero__chips a { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(246,243,236,0.88); border: 1px solid rgba(246,243,236,0.24); background: rgba(246,243,236,0.07); backdrop-filter: blur(6px); padding: 0.42em 0.85em; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); animation: chip-in 520ms var(--ease-out) both; } .page-hero__chips > *:nth-child(1) { animation-delay: 240ms; } .page-hero__chips > *:nth-child(2) { animation-delay: 320ms; } .page-hero__chips > *:nth-child(3) { animation-delay: 400ms; } .page-hero__chips > *:nth-child(4) { animation-delay: 480ms; } .page-hero__chips > *:nth-child(5) { animation-delay: 560ms; } .page-hero__chips > *:nth-child(6) { animation-delay: 640ms; } .page-hero__chips > *:nth-child(7) { animation-delay: 720ms; } @keyframes chip-in { from { transform: translateY(10px); } to { transform: none; } } .page-hero__chips a:hover { background: rgba(246,243,236,0.16); border-color: rgba(246,243,236,0.46); transform: translateY(-2px); } .page-hero__chips span::before, .page-hero__chips a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cc, var(--cobalt-bright)); flex-shrink: 0; } /* Bottom route line */ .page-hero__route { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, var(--accent, #2F55F0), rgba(122,99,234,0.5) 55%, transparent 85%); transform-origin: left; animation: ph-route 1500ms var(--ease-out) 300ms both; } @keyframes ph-route { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .page-hero__media img { animation: none; transform: none; } .page-hero__route { animation: none; transform: scaleX(1); } .page-hero__chips span, .page-hero__chips a { animation: none; } } /* ======================================================================= DIAGRAM FIGURE — contain, never stretched, never letterboxed in a frame ======================================================================= */ .diagram-figure { margin: 0; position: relative; border-radius: var(--radius-l); overflow: hidden; background: rgba(246,243,236,0.04); border: 1px solid rgba(246,243,236,0.14); padding: clamp(0.85rem, 1.8vw, 1.5rem); transition: border-color var(--dur-mid), transform var(--dur-mid) var(--ease-out); } .diagram-figure:hover { border-color: rgba(143,176,255,0.4); } .diagram-figure img { width: 100%; height: auto; display: block; object-fit: contain; /* diagrams must never be cropped */ border-radius: var(--radius-m); } .diagram-figure figcaption { margin-top: 0.9rem; font-size: 0.8rem; color: rgba(246,243,236,0.6); line-height: 1.5; } .on-light .diagram-figure { background: var(--white); border-color: rgba(14,16,22,0.1); } .on-light .diagram-figure figcaption { color: var(--slate); } /* luminous edge */ .diagram-figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(143,176,255,0.10); transition: box-shadow var(--dur-mid); } .diagram-figure:hover::after { box-shadow: inset 0 0 0 1px rgba(143,176,255,0.3); } /* Expandable diagram trigger */ .diagram-expand { position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: rgba(14,16,22,0.78); border: 1px solid rgba(246,243,236,0.28); backdrop-filter: blur(6px); border-radius: 999px; padding: 0.5em 0.95em; cursor: pointer; min-height: 40px; } .diagram-expand:hover { background: var(--cobalt); border-color: var(--cobalt); } /* Lightbox */ .diagram-modal { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(14,16,22,0.92); backdrop-filter: blur(8px); } .diagram-modal.is-open { display: flex; } .diagram-modal img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-m); } .diagram-modal__close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 48px; height: 48px; border-radius: 999px; background: var(--white); color: var(--ink); border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; } /* ======================================================================= RESPONSIVE HERO POSITIONING Each page sets its own --pos; mobile gets tighter crops so the subject is never badly cut. Never one universal object-position. ======================================================================= */ @media (max-width: 900px) { .page-hero__inner { max-width: none; } .page-hero__veil { background: linear-gradient(180deg, rgba(14,16,22,0.80) 0%, rgba(14,16,22,0.62) 38%, rgba(14,16,22,0.72) 70%, rgba(14,16,22,0.90) 100%), var(--wash, linear-gradient(150deg, rgba(47,85,240,0.18), rgba(14,16,22,0) 60%)); } .page-hero__inner::before { background: radial-gradient(140% 100% at 50% 50%, rgba(14,16,22,0.72) 0%, rgba(14,16,22,0.40) 58%, rgba(14,16,22,0) 88%); } .page-hero__media img { object-position: var(--pos-mobile, var(--pos, center)); } } /* On small screens a wide diagram renders short, so the floating pill becomes a poor target. Put the expand control in-flow, full width, clearly tappable. */ @media (max-width: 700px) { .diagram-expand { position: static; display: flex; width: 100%; justify-content: center; margin-top: 0.85rem; min-height: 46px; } .diagram-figure figcaption { margin-top: 0.75rem; } }