189 lines
14 KiB
CSS
189 lines
14 KiB
CSS
/* WhatIDo - report page layer on top of report.css (design system from the reference layout). */
|
|
|
|
@font-face{
|
|
font-family:"Inter";
|
|
font-style:normal;
|
|
font-weight:400;
|
|
font-display:swap;
|
|
src:url("/fonts/inter-400.woff2") format("woff2");
|
|
}
|
|
@font-face{
|
|
font-family:"Inter";
|
|
font-style:normal;
|
|
font-weight:500;
|
|
font-display:swap;
|
|
src:url("/fonts/inter-500-cyr.woff2") format("woff2");
|
|
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
|
|
}
|
|
@font-face{
|
|
font-family:"Inter";
|
|
font-style:normal;
|
|
font-weight:500;
|
|
font-display:swap;
|
|
src:url("/fonts/inter-500-lat.woff2") format("woff2");
|
|
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;
|
|
}
|
|
|
|
:root{
|
|
--rep-accent:rgb(118,132,255);
|
|
--rep-accent-hover:rgb(89,99,185);
|
|
--rep-bg:rgb(21,21,21);
|
|
--rep-line:rgba(255,255,255,.1);
|
|
--rep-line-soft:rgba(255,255,255,.16);
|
|
--rep-muted:rgba(174,176,176,1);
|
|
--sf-img-0:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjUnIGhlaWdodD0nMjUnIHZpZXdCb3g9JzAgMCAyNSAyNScgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTUuNSA2LjVMOS41IDEyLjVMMTUuNSAxOC41JyBzdHJva2U9JyM5QzlDOUMnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjwvc3ZnPgo=");
|
|
--sf-img-1:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjUnIGhlaWdodD0nMjUnIHZpZXdCb3g9JzAgMCAyNSAyNScgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNOS41IDE4LjVMMTUuNSAxMi41TDkuNSA2LjUnIHN0cm9rZT0nIzlDOUM5Qycgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PC9zdmc+Cg==");
|
|
--sf-img-7:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNS45OTg0IDUuMzkzNDFMMjUuMTkwNiAxNC41ODU2TDI1LjE5MDYgMTQuNTg1NkwyNi42MDQ4IDE1Ljk5OThMMjYuNjA0OCAxNS45OTk4TDI2LjYwNSAxNkwyNS4xOTA3IDE3LjQxNDJMMjUuMTkwNiAxNy40MTRMMTUuOTk4MiAyNi42MDY0TDE0LjU4NCAyNS4xOTIyTDIyLjc4NSAxNi45OTEyTDYuNDk1MjMgMTYuOTkxMkw2LjQ5NTIzIDE1LjAwODRMMjIuNzg0OSAxNS4wMDg0TDE0LjU4NDEgNi44MDc2MkwxNS45OTg0IDUuMzkzNDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
|
|
--sf-img-8:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi4wMDE2IDI2LjYwNjZMNi44MDk0NCAxNy40MTQ0TDYuODA5NDQgMTcuNDE0NEw1LjM5NTIyIDE2LjAwMDJMNS4zOTUyMyAxNi4wMDAyTDUuMzk1MDQgMTZMNi44MDkyNiAxNC41ODU4TDYuODA5NDQgMTQuNTg2TDE2LjAwMTggNS4zOTM1OUwxNy40MTYgNi44MDc4TDkuMjE0OTkgMTUuMDA4OUwyNS41MDQ4IDE1LjAwODhMMjUuNTA0OCAxNi45OTE2TDkuMjE1MDggMTYuOTkxNkwxNy40MTU5IDI1LjE5MjRMMTYuMDAxNiAyNi42MDY2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
|
|
--sf-img-9:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMiAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMTk5MjIgNC44NTYzNkw0Ljc5OTIyIDkuNzMyNTVMMTAuNzk5MiAxLjE5OTIyIiBzdHJva2U9IndoaXRlIi8+Cjwvc3ZnPgo=");
|
|
}
|
|
|
|
html{scroll-behavior:smooth}
|
|
html,body{background-color:var(--rep-bg)}
|
|
body{overflow-x:hidden}
|
|
::selection{background-color:var(--rep-accent);color:#fff}
|
|
.container--u-i80idakgi{opacity:1!important;transform:none!important}
|
|
.rep-hidden{display:none!important}
|
|
.rep-static{cursor:default;color:var(--rep-muted)}
|
|
[data-img]{cursor:zoom-in}
|
|
button,a{-webkit-tap-highlight-color:transparent}
|
|
|
|
.rep-logo-box{width:auto;min-width:44px;height:40px;align-items:center;justify-content:center;overflow:visible}
|
|
.rep-logo{font-size:20px;font-weight:500;letter-spacing:-.05em;line-height:1;color:rgb(21,21,21);white-space:nowrap}
|
|
.rep-brand-logo{height:40px;width:auto;max-width:min(30vw,200px);object-fit:contain;display:block}
|
|
.rep-brand-name{font-size:18px;font-weight:500;letter-spacing:-.05em;line-height:1;color:rgb(21,21,21);white-space:nowrap;max-width:min(26vw,180px);overflow:hidden;text-overflow:ellipsis}
|
|
.rep-nav .link-block--u-ij7yf5mm2{column-gap:12px}
|
|
.rep-logo-box--footer{height:20px;min-width:0}
|
|
.rep-logo--white{font-size:18px;color:#fff}
|
|
|
|
.rep-overlay{display:none}
|
|
.rep-overlay.is-open{display:block}
|
|
@media (min-width:992px){
|
|
.rep-burger,.rep-menu-close{display:none!important}
|
|
}
|
|
@media (max-width:991px){
|
|
.rep-menu-panel.is-open{display:flex!important;position:fixed;top:0;right:0;bottom:0;left:0;z-index:85;flex-direction:column;align-items:flex-start;background-color:rgb(255,255,255);padding:20px;overflow-y:auto}
|
|
.rep-menu-panel.is-open .menu__scroll-wrapper{display:block!important;width:100%;min-width:0;height:auto}
|
|
.rep-menu-panel.is-open .menu__wrapper-lvl1{display:block!important;position:static;background-image:none;background-color:transparent;padding:0}
|
|
.rep-menu-panel.is-open .menu__list-lvl1{display:flex!important;flex-direction:column;align-items:flex-start;row-gap:16px;padding:50px 10px 0}
|
|
.rep-menu-panel.is-open .menu__link-lvl1{font-size:26px;line-height:110%;padding:0}
|
|
.rep-menu-close.is-open{display:block!important;position:absolute;top:22px;right:22px}
|
|
.rep-burger{display:block}
|
|
}
|
|
|
|
.rep-hero-photo{position:relative;display:flex;align-items:center;justify-content:center}
|
|
.rep-monogram{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:clamp(56px,9vw,140px);font-weight:600;letter-spacing:-.06em;color:rgba(255,255,255,.06)}
|
|
.rep-hero-tag{color:rgba(255,255,255,.35)}
|
|
.rep-hero-lead{white-space:pre-line;word-break:break-word}
|
|
|
|
.rep-slider{width:100%;max-width:100%;min-width:0}
|
|
.rep-slider .blocklist__list{display:flex;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
|
|
.rep-slider .blocklist__list::-webkit-scrollbar{display:none;width:0;height:0}
|
|
.rep-slider .blocklist__item-wrapper{flex:0 0 100%;max-width:100%;scroll-snap-align:start}
|
|
@media (min-width:992px){
|
|
.rep-slider .blocklist__item-wrapper{flex:0 0 50%}
|
|
}
|
|
.rep-slider [data-slider-prev],.rep-slider [data-slider-next]{cursor:pointer}
|
|
.rep-slider .rep-arrow-off{opacity:.06!important;pointer-events:none}
|
|
|
|
.rep-work-photo{width:100%;max-width:280px;height:auto;aspect-ratio:1/1;border-radius:55px}
|
|
@media (max-width:991px){
|
|
.rep-work-photo{max-width:200px}
|
|
}
|
|
.rep-work-photo .image__img{width:100%;height:100%;object-fit:cover}
|
|
|
|
.rep-gallery-photo{width:180px;height:180px;max-width:180px;border-radius:50px}
|
|
@media (max-width:991px){
|
|
.rep-gallery-photo{width:140px;height:140px;max-width:140px;border-radius:40px}
|
|
}
|
|
.rep-gallery-photo .image__img{width:100%;height:100%;object-fit:cover}
|
|
.rep-gallery-caption{color:#fff}
|
|
.rep-gallery-date{color:rgba(56,56,56,1);margin-bottom:auto}
|
|
.rep-gallery-text{color:#fff}
|
|
|
|
.rep-stack{flex-direction:column;align-items:flex-start;row-gap:12px}
|
|
.rep-tl-desc{color:rgba(255,255,255,.7);max-width:350px;line-height:130%}
|
|
.rep-tl-aside{row-gap:12px}
|
|
.rep-tl-count{color:rgba(56,56,56,1)}
|
|
.rep-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;max-width:350px}
|
|
.rep-chip{display:inline-flex;align-items:center;gap:8px;max-width:280px;padding:9px 18px;border:1px solid var(--rep-line-soft);border-radius:100px;font-size:13px;font-weight:500;letter-spacing:-.05em;line-height:100%;color:rgba(255,255,255,.7);text-decoration:none;transition:border-color .1s linear,color .1s linear}
|
|
.rep-chip:hover{border-color:rgba(255,255,255,.65);color:#fff}
|
|
.rep-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.rep-chip--static{cursor:default}
|
|
.rep-chip--static:hover{border-color:var(--rep-line-soft);color:rgba(255,255,255,.7)}
|
|
.rep-empty{color:rgba(174,176,176,1);font-size:15px;font-weight:500;letter-spacing:-.05em;padding:20px 0}
|
|
|
|
.rep-file-item{text-decoration:none;color:inherit;cursor:pointer;transition:background-color .15s linear}
|
|
.rep-file-item:hover{background-color:rgb(255,255,255)}
|
|
.rep-file-icon{display:flex;align-items:center;justify-content:center;width:180px;height:180px;max-width:180px;border-radius:50px;background-color:rgb(255,255,255);border:1px solid rgba(0,0,0,.06);font-size:20px;font-weight:500;letter-spacing:-.05em;color:rgba(21,21,21,.5);text-transform:uppercase}
|
|
@media (max-width:991px){
|
|
.rep-file-icon{width:140px;height:140px;max-width:140px;border-radius:40px;font-size:16px}
|
|
}
|
|
.rep-file-title{color:rgb(21,21,21);overflow-wrap:anywhere}
|
|
.rep-file-meta{color:var(--rep-muted)}
|
|
.rep-file-cta{display:inline-flex;margin-top:12px;padding:9px 18px;border:1px solid rgba(187,189,190,1);border-radius:100px;font-size:13px;font-weight:500;letter-spacing:-.05em;color:rgba(21,21,21,.75);text-decoration:none}
|
|
.rep-file-item:hover .rep-file-cta{border-color:rgb(21,21,21);color:rgb(21,21,21)}
|
|
.rep-contact{width:auto;max-width:420px;align-items:flex-start;row-gap:16px}
|
|
.rep-contact-title{color:#fff;font-size:24px;font-weight:500;letter-spacing:-.05em;line-height:115%}
|
|
.rep-contact-note{color:var(--rep-muted);font-size:15px;font-weight:500;letter-spacing:-.05em;line-height:140%}
|
|
.rep-contact-btn{width:100%;height:60px;background-color:var(--rep-accent);border-radius:10px;color:#fff}
|
|
.rep-contact-btn:hover{background-color:var(--rep-accent-hover)}
|
|
.rep-footer-photo{width:180px;height:180px;max-width:180px;border-radius:55px}
|
|
@media (max-width:991px){
|
|
.rep-footer-photo{width:140px;height:140px;max-width:140px}
|
|
}
|
|
.rep-footer-photo .image__img{width:100%;height:100%;object-fit:cover}
|
|
|
|
.rep-countdown{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:12px 22px;border:1px solid var(--rep-line-soft);border-radius:100px;background-color:rgba(21,21,21,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:rgba(255,255,255,.8);font-size:14px;font-weight:500;letter-spacing:-.05em;line-height:120%;white-space:nowrap;overflow:hidden}
|
|
.rep-countdown strong{color:#fff;font-weight:500}
|
|
.rep-countdown.rep-warn{border-color:rgba(250,192,0,.45)}
|
|
.rep-countdown.rep-urgent{border-color:rgba(255,79,82,.55)}
|
|
|
|
.rep-error{display:flex;align-items:center;justify-content:center;min-height:70vh;padding:80px 30px}
|
|
.rep-error-inner{display:flex;flex-direction:column;align-items:center;row-gap:20px;max-width:540px;text-align:center}
|
|
.rep-error-title{color:#fff;font-size:clamp(32px,4vw,50px);font-weight:500;letter-spacing:-.05em;line-height:100%}
|
|
.rep-error-text{color:var(--rep-muted);font-size:15px;font-weight:500;letter-spacing:-.05em;line-height:140%}
|
|
.rep-error-btn{width:auto;height:60px;padding:0 30px;background-color:var(--rep-accent);border-radius:10px;color:#fff}
|
|
.rep-error-btn:hover{background-color:var(--rep-accent-hover)}
|
|
|
|
.rep-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:none;align-items:center;justify-content:center;padding:30px;background-color:rgba(0,0,0,.9);cursor:zoom-out}
|
|
.rep-lightbox.is-open{display:flex}
|
|
.rep-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
|
|
|
|
.rep-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px;background-color:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
|
|
.rep-modal.is-open{display:flex}
|
|
.rep-modal-box{display:flex;flex-direction:column;row-gap:16px;width:100%;max-width:420px;padding:35px;border:1px solid rgba(44,44,44,1);border-radius:20px;background-color:var(--rep-bg)}
|
|
.rep-modal-title{color:#fff;font-size:24px;font-weight:500;letter-spacing:-.05em;line-height:115%}
|
|
.rep-modal-text{color:var(--rep-muted);font-size:15px;font-weight:500;letter-spacing:-.05em;line-height:140%}
|
|
.rep-modal-input{width:100%;height:55px;padding:0 18px;border:1px solid var(--rep-line-soft);border-radius:10px;background-color:transparent;color:#fff;font-size:15px;font-weight:500;letter-spacing:-.05em;outline:none}
|
|
.rep-modal-input::placeholder{color:rgba(255,255,255,.35)}
|
|
.rep-modal-input:focus{border-color:rgba(255,255,255,.5)}
|
|
.rep-modal-btn{width:100%;height:55px;background-color:var(--rep-accent);border-radius:10px;color:#fff}
|
|
.rep-modal-btn:hover{background-color:var(--rep-accent-hover)}
|
|
.rep-modal-error{color:rgb(255,79,82);font-size:14px;font-weight:500;letter-spacing:-.05em}
|
|
|
|
@media (max-width:640px){
|
|
.rep-countdown{bottom:14px;padding:10px 16px;font-size:13px}
|
|
.rep-modal-box{padding:25px}
|
|
}
|
|
|
|
.rep-work-desc{color:rgba(255,255,255,.7);max-width:350px;line-height:130%}
|
|
.rep-stack>.text-block-wrap-div{flex-grow:0}
|
|
.rep-file-meta .text-block-wrap-div{flex-grow:0}
|
|
.rep-about-photo{display:block;width:100%;height:100%}
|
|
.rep-about-photo .image__img{width:100%;height:100%;object-fit:cover}
|
|
.rep-about-monogram{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:64px;font-weight:600;letter-spacing:-.06em;color:rgba(21,21,21,.12)}
|
|
|
|
#works.section--u-ibq7nxfzo{background-color:rgb(255,255,255)}
|
|
#works .text--u-ihb2xbsz6{color:rgba(21,21,21,1)}
|
|
#works .blocklist__item--u-iqn443glf{background-color:rgb(255,255,255)}
|
|
#works .div--u-ifxd1g9rk{border-top-color:rgba(228,231,232,1);border-right-color:rgba(228,231,232,1);border-bottom-color:rgba(228,231,232,1);border-left-color:rgba(228,231,232,1)}
|
|
#works .text--u-ib8dkw227{color:rgba(220,220,220,1)}
|
|
#works .text--u-i8ydj7eyx{color:rgba(21,21,21,1)}
|
|
#works .div--u-ipp2467j8{border-top-color:rgba(187,189,190,1);border-right-color:rgba(187,189,190,1);border-bottom-color:rgba(187,189,190,1);border-left-color:rgba(187,189,190,1)}
|
|
#works .text--u-iz3df5dls{color:rgba(21,21,21,1)}
|
|
#works .div--u-ibren39lw,#works .div--u-ixtm7p8ov,#works .div--u-iidtqgnjo,#works .div--u-iohjzr62g{background-color:rgb(21,21,21)}
|
|
#works .rep-work-desc{color:rgba(21,21,21,.7)}
|
|
#works .rep-chip{border-color:rgb(187,189,190);color:rgba(21,21,21,.75)}
|
|
#works .rep-chip:hover{border-color:rgb(21,21,21);color:rgb(21,21,21)}
|