.sim-page .site-head { position: relative; isolation: isolate; overflow: hidden; } .sim-page .site-head::before { content: ""; position: absolute; z-index: 0; top: 84px; right: 0; bottom: 0; width: min(62vw, 900px); background: url("/assets/iol-dislocation-header.webp?v=20260806-1") 96% 4% / auto 165% no-repeat; opacity: .84; pointer-events: none; } .sim-page .site-head::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(6, 24, 47, 1) 0%, rgba(6, 24, 47, .98) 42%, rgba(6, 24, 47, .76) 64%, rgba(4, 18, 37, .28) 100%), linear-gradient(180deg, rgba(4, 18, 37, .12), rgba(4, 18, 37, .55)); pointer-events: none; } .sim-page .site-head > .container { position: relative; z-index: 1; } /* Repeating diagonal watermark — identical geometry to other clinical sections. */ .sim-page .iol-image-button { position: relative; overflow: hidden; } .sim-page .iol-image-button::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 48%, #fff 100%); pointer-events: none; } .sim-page .iol-image-button::after { content: ""; position: absolute; z-index: 3; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='270' height='150' viewBox='0 0 270 150'%3E%3Cg transform='rotate(-22 135 75)' fill='%233567ad' fill-opacity='.13' font-family='Arial,sans-serif' font-size='12' font-weight='700' letter-spacing='2'%3E%3Ctext x='23' y='79'%3EMATVEYSHEMYAKIN.RU%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 270px 150px; pointer-events: none; } .sim-page .iol-image-button img { position: relative; z-index: 1; } .sim-page .iol-zoom-hint { z-index: 4; } /* The dialog is mounted directly under , outside .sim-page. */ .iol-lightbox__frame { position: relative; overflow: hidden; } .iol-lightbox__frame::before { content: ""; position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; height: 12%; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 48%, #fff 100%); pointer-events: none; } .iol-lightbox__frame::after { content: ""; position: absolute; z-index: 3; inset: 12px; border-radius: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='210' viewBox='0 0 360 210'%3E%3Cg transform='rotate(-22 180 105)' fill='%233567ad' fill-opacity='.12' font-family='Arial,sans-serif' font-size='14' font-weight='700' letter-spacing='2'%3E%3Ctext x='50' y='110'%3EMATVEYSHEMYAKIN.RU%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 360px 210px; pointer-events: none; } .iol-lightbox__image { position: relative; z-index: 1; } .iol-lightbox__close { position: relative; z-index: 5; } @media (max-width: 1020px) { .sim-page .site-head::before { top: 72px; width: 68vw; opacity: .74; background-position: 95% 5%; background-size: auto 155%; } .sim-page .site-head::after { background: linear-gradient(90deg, rgba(6, 24, 47, 1) 0%, rgba(6, 24, 47, .97) 50%, rgba(4, 18, 37, .44) 100%), linear-gradient(180deg, rgba(4, 18, 37, .14), rgba(4, 18, 37, .58)); } } @media (max-width: 680px) { .sim-page .site-head::before { top: 72px; right: -3%; bottom: 0; width: 106%; opacity: .85; background-position: 76% 4%; background-size: auto 145%; } .sim-page .site-head::after { background: linear-gradient(180deg, rgba(4, 18, 37, .96) 0%, rgba(4, 18, 37, .86) 45%, rgba(4, 18, 37, .28) 72%, rgba(4, 18, 37, .60) 100%), linear-gradient(90deg, rgba(6, 24, 47, .97) 0%, rgba(6, 24, 47, .78) 50%, rgba(4, 18, 37, .10) 100%); } .sim-page .iol-image-button::before { height: 14%; } .sim-page .iol-image-button::after { background-size: 210px 117px; } .iol-lightbox__frame::before { left: 7px; right: 7px; bottom: 7px; height: 14%; border-radius: 0 0 9px 9px; } .iol-lightbox__frame::after { inset: 7px; border-radius: 9px; background-size: 270px 158px; } }