/* ilyasizov.me — static version of the Readymag site. Every page has two layers of absolutely positioned widgets, same as Readymag: .layout-d desktop canvas, 1707px wide, scaled by --sd = min(viewport, 1920) / 1707 .layout-m phone canvas, 320px wide, scaled by --sm = viewport / 320 Widget coordinates in the HTML are canvas pixels; `zoom` does the scaling. --sd / --sm are set by the inline script in and by assets/js/site.js. */ /* ---------- fonts ---------- The site is set in Graphik (Commercial Type). Readymag licenses it for sites hosted there, so it is not bundled. If you have a web licence, drop the files into assets/fonts/ and uncomment the url() parts below. Until then the text uses Inter, tuned so that line breaks and baselines match Graphik almost exactly. */ @font-face { font-family: "Graphik"; src: local("Graphik Regular"), local("Graphik-Regular") /*, url(../fonts/Graphik-Regular-Web.woff2) format("woff2") */; font-weight: 400; font-display: swap; } @font-face { font-family: "Graphik"; src: local("Graphik Medium"), local("Graphik-Medium") /*, url(../fonts/Graphik-Medium-Web.woff2) format("woff2") */; font-weight: 500; font-display: swap; } @font-face { font-family: "Graphik Fallback"; src: url(../fonts/inter-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; ascent-override: 82%; descent-override: 18%; line-gap-override: 0%; size-adjust: 100.2%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Graphik Fallback"; src: url(../fonts/inter-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; ascent-override: 82%; descent-override: 18%; line-gap-override: 0%; size-adjust: 100.2%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- base ---------- */ :root { --sd: 1; --sm: 1; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Graphik", "Graphik Fallback", system-ui, sans-serif; font-feature-settings: "liga" 0, "rlig" 0, "dlig" 0, "hlig" 0, "smcp" 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } a { color: inherit; } /* ---------- layout layers ---------- */ .layout { position: relative; width: 100%; overflow-x: clip; } .canvas { position: relative; } .layout-d .canvas { width: 1707px; margin: 0 auto; zoom: var(--sd); } .layout-m .canvas { width: 320px; zoom: var(--sm); } .layout-d .fx { zoom: var(--sd); } .layout-m .fx { zoom: var(--sm); } .layout-m { display: none; } @media (max-width: 599.98px) { .layout-d { display: none; } .layout-m { display: block; } } /* ---------- widgets ---------- */ .w { position: absolute; display: block; margin: 0; } .fx { position: fixed; } .tx p { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; } .pic { overflow: hidden; } .pic img { display: block; width: 100%; height: 100%; } .pic img.crop { position: absolute; max-width: none; } .shp svg { display: block; overflow: visible; } .vid { overflow: hidden; } .vid video { display: block; width: 100%; height: 100%; object-fit: cover; } /* hover animation: opacity target and duration come from the widget's inline --ho / --hd */ .hov { transition: opacity var(--hd, .2s) cubic-bezier(.42, 0, .58, 1); } .hov:hover { opacity: var(--ho) !important; } /* click animations (menu, showreel): visibility is toggled by site.js */ .is-trigger { cursor: pointer; } .is-off { pointer-events: none; } /* ---------- links ---------- */ .lk { text-decoration: none; padding-bottom: 1px; background: linear-gradient(currentColor, currentColor) 0 100% / 1px 1px repeat-x; } .lk span { color: inherit !important; } .lk:hover, .lk.current { background: none; } .lk-dark { color: #14101d; } .lk-light { color: #d8dbe3; } /* ---------- lightbox ---------- */ [data-lightbox] { cursor: zoom-in; } .lb { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; cursor: zoom-out; } .lb.open { opacity: 1; } .lb img { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); object-fit: contain; user-select: none; } .lb button { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #14101d; font: 22px/1 system-ui, sans-serif; cursor: pointer; } .lb .lb-prev { left: 16px; } .lb .lb-next { right: 16px; } .lb .lb-close { top: 16px; right: 16px; margin: 0; width: 44px; height: 44px; } @media (prefers-reduced-motion: reduce) { .hov, .lb { transition: none; } }