/* ===================================================================== mariia bogomolova — portfolio Palette: black / white / lime / blue · SPA · no-scroll desktop ===================================================================== */ :root{ --bg: #ebebeb; /* light-light-gray (per reference) */ --ink: #262626; /* dark-dark-gray (was near-black) */ --white: #ffffff; --lime: #c6ff1a; /* bright lime / салатовый */ --blue: #2233ff; /* electric blue (cards / good ideas) */ --sans: 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif; --grotesque: 'Space Grotesk', 'Inter', sans-serif; --serif: 'Playfair Display', Georgia, serif; --pixel: 'Press Start 2P', 'Courier New', monospace; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ background:var(--bg); } /* bg on only, so z-index:-1 decor stays visible */ html,body{ height:100%; width:100%; overflow:hidden; /* NO SCROLL (desktop) */ color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* body lets the cursor through to the z-index:-1 decor; every interactive element re-enables pointer-events explicitly (nav, cards, letters, floaties…) */ body{ background:transparent; pointer-events:none; } button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; } img{ display:block; max-width:100%; } a{ color:inherit; } .hidden{ display:none !important; } /* ============================================================ DECOR */ .bg-decor{ position:fixed; inset:0; z-index:-1; /* behind everything */ pointer-events:none; /* never blocks clicks */ overflow:hidden; } /* a clicked floaty is moved here so it sits ABOVE all page text/buttons (but below plaques) */ .decor-front{ position:fixed; inset:0; z-index:300; pointer-events:none; } .floaty{ position:absolute; color:var(--ink); /* all floating elements are dark-gray */ will-change:transform; pointer-events:auto; /* hoverable / clickable (page lets the cursor through) */ cursor:pointer; transition:color .15s ease; display:flex; align-items:center; justify-content:center; font-weight:700; } .floaty svg{ display:block; width:100%; height:100%; fill:currentColor; pointer-events:none; } .floaty:hover, body.dark-page .floaty:hover{ color:var(--lime); } /* stars & symbols glow lime on hover */ /* ============================================================ INTERACTIVE PLAQUES */ .plaque{ position:fixed; z-index:500; pointer-events:auto; max-width:264px; background:#f3f3f3; /* white / light-light-gray */ color:var(--ink); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:11px 13px; font-family:var(--sans); font-weight:500; font-size:13px; line-height:1.35; cursor:pointer; } .plaque--center{ left:50% !important; top:50% !important; transform:translate(-50%,-50%); text-align:center; max-width:300px; cursor:default; } .plaque--fixed{ width:210px; max-width:210px; } /* equal-size last-O plaques */ .plaque .plaque-ru{ display:block; margin-top:4px; opacity:.7; } .plaque-btn{ margin-top:11px; font-family:var(--grotesque); font-weight:700; font-size:13px; color:var(--white); background:var(--ink); border:2px solid var(--ink); padding:.45em .9em; cursor:pointer; } .plaque-btn:hover{ background:var(--lime); color:var(--ink); } @keyframes levitate{ 0% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-18px) rotate(180deg); } 100% { transform:translateY(0) rotate(360deg); } } @keyframes bob{ 0% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(14px) rotate(-12deg);} 100% { transform:translateY(0) rotate(0deg); } } /* ============================================================ NAV */ .nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:flex-start; padding:clamp(14px, 2.4vh, 26px) clamp(16px, 2.6vw, 40px); pointer-events:none; /* only the controls catch clicks */ } .nav-left, .nav-right{ display:flex; flex-direction:column; gap:6px; pointer-events:auto; } .nav-right{ align-items:flex-end; } /* strict, tiny, neat sans for ALL corner navigation */ .name, .come-back, .menu-toggle, .menu-item, .home-corner{ font-family:var(--sans); font-weight:500; letter-spacing:.02em; text-transform:lowercase; font-size:clamp(11px, 1.15vw, 14px); line-height:1.25; } .name{ font-weight:600; } .name:hover{ color:var(--blue); } .come-back{ color:var(--ink); opacity:.7; } .come-back:hover{ opacity:1; color:var(--blue); } .menu-toggle{ position:relative; padding-bottom:2px; border-bottom:2px solid var(--ink); } .menu-toggle:hover{ color:var(--blue); border-color:var(--blue); } .menu-dropdown{ margin-top:10px; display:flex; flex-direction:column; align-items:flex-end; gap:7px; text-align:right; background:var(--bg); padding:12px 14px; border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--ink); min-width:150px; } .menu-item{ text-align:right; } .menu-item:hover{ color:var(--blue); } .menu-head{ font-weight:600; margin-top:4px; } .menu-sub{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; } .menu-item.sub{ opacity:.62; font-size:clamp(10px, 1.05vw, 12.5px); } .menu-item.sub:hover{ opacity:1; color:var(--blue); } /* corner nav turns white over dark pages (e.g. contact) */ body.dark-page .name, body.dark-page .come-back, body.dark-page .menu-toggle{ color:var(--white); } body.dark-page .menu-toggle{ border-color:var(--white); } body.dark-page .come-back{ opacity:.9; } /* ============================================================ PAGE shell */ .page{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:clamp(58px, 9vh, 90px) clamp(18px, 4vw, 64px) clamp(26px, 5vh, 54px); pointer-events:none; /* empty areas let the cursor reach the decor behind */ } /* …but interactive things stay clickable */ .page .card, .page .project-btn, .page .contact-email a, .page .fest-btn, .page .video-wrap, .page .game-stage, .page .go-btn{ pointer-events:auto; } /* corner labels on home (echo of the reference top line) */ .home-corner{ position:absolute; top:clamp(16px, 2.6vh, 28px); opacity:.85; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(9px, 1vw, 12px); } .home-corner-l{ left:clamp(16px, 2.6vw, 40px); display:none; } /* hidden so it never clashes with the name */ .home-corner-r{ right:clamp(16px, 2.6vw, 40px); display:none; } /* ============================================================ HOME */ .page-home{ flex-direction:column; gap:0; } .creator-word{ display:flex; align-items:center; justify-content:center; gap:.02em; width:max-content; line-height:.8; user-select:none; font-size:min(17vw, 30vh); white-space:nowrap; transform-origin:center center; will-change:transform; } .creator-word .l{ display:inline-block; font-weight:700; pointer-events:auto; cursor:pointer; transition:color .12s ease, transform .15s ease; } .creator-word .l.c-lime { color:var(--lime); } .creator-word .l.c-blue { color:var(--blue); } .creator-word .l.c-dark { color:var(--ink); } .creator-word .l.c-orange { color:#c8551b; } /* deep ginger */ .creator-word .l.c-pink { color:#ff5fa6; } .creator-word .l.c-tiffany{ color:#0abab5; } /* Tiffany */ .creator-word .l.c-yellow { color:#ffcf2e; } /* coloured (non-gray) letters get a thin dark-dark-gray outline */ .creator-word .l.c-lime, .creator-word .l.c-blue, .creator-word .l.c-orange, .creator-word .l.c-pink, .creator-word .l.c-tiffany, .creator-word .l.c-yellow{ -webkit-text-stroke:1px var(--ink); } /* R, T, L get a twice-as-thick outline when coloured */ .creator-word .l.lt-thick.c-lime, .creator-word .l.lt-thick.c-blue, .creator-word .l.lt-thick.c-orange, .creator-word .l.lt-thick.c-pink, .creator-word .l.lt-thick.c-tiffany, .creator-word .l.lt-thick.c-yellow{ -webkit-text-stroke-width:2px; } .creator-word .l:not(.clicked):hover{ color:var(--lime); } /* lime glow only BEFORE the letter is clicked */ /* grow a little on hover (keep each letter's own base transform) */ .creator-word .l:hover { transform:scale(1.16); } .creator-word .l-pixel:hover { transform:translateY(-.05em) scale(1.16); } .creator-word .l-stretch:hover{ transform:scaleX(2.05) scale(1.16); } .l-pixel { font-family:var(--pixel); font-size:.62em; transform:translateY(-.05em); } .l-serif { font-family:var(--serif); font-style:italic; font-weight:900; } .l-grotesque{ font-family:var(--grotesque); font-weight:700; } .l-stretch { font-family:var(--grotesque); font-weight:700; transform:scaleX(2.05); margin:0 .22em; transform-origin:center; } .l-star{ display:inline-flex; align-items:center; margin-left:.04em; } .big-star{ width:.78em; height:.78em; color:var(--lime); } /* cards: chaotic, overlapping, tilted blue posters */ .cards{ position:relative; width:min(92vw, 760px); height:clamp(150px, 28vh, 280px); margin-top:clamp(-10px, -1vh, 0px); } .card{ position:absolute; width:clamp(116px, 15vw, 168px); height:clamp(138px, 22vh, 206px); background:var(--blue); color:var(--white); border:2px solid var(--ink); border-radius:clamp(16px, 2.2vw, 30px); /* rounded */ box-shadow:6px 7px 0 var(--ink); display:flex; align-items:center; justify-content:center; padding:clamp(12px, 1.8vw, 22px); text-align:center; transition:transform .18s ease, box-shadow .18s ease; } .card-label{ font-family:var(--grotesque); font-weight:700; font-size:clamp(15px, 1.9vw, 23px); line-height:1.1; } .card-1{ left:7%; top:11%; transform:rotate(-6deg); z-index:3; } .card-2{ left:33%; top:4%; transform:rotate(4deg); z-index:5; } .card-3{ left:60%; top:13%; transform:rotate(-5deg); z-index:4; } .card:hover{ transform:translateY(-8px) rotate(0deg) scale(1.04); box-shadow:9px 11px 0 var(--ink); z-index:9; background:var(--lime); color:var(--ink); } /* ============================================================ shared headings */ .page-eyebrow, .projects-title, .case-title, .game-title{ font-weight:700; } .page-eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:clamp(10px, 1.1vw, 13px); opacity:.65; margin-bottom:clamp(10px, 2vh, 22px); } /* ============================================================ CONTACT */ .contact-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px, 4vw, 64px); align-items:center; width:min(100%, 1080px); } .contact-lead{ font-family:var(--serif); font-weight:700; font-size:clamp(24px, 3.6vw, 52px); line-height:1.08; margin-bottom:clamp(14px, 2.6vh, 28px); } .contact-lead em{ font-family:var(--pixel); font-style:normal; font-size:.672em; letter-spacing:-.02em; color:var(--lime); } .contact-body{ font-family:var(--grotesque); font-size:clamp(14px, 1.5vw, 20px); line-height:1.4; max-width:30ch; margin-bottom:clamp(16px, 3vh, 34px); } .contact-email{ font-family:var(--sans); font-size:clamp(13px, 1.35vw, 18px); line-height:1.5; } /* all three lime buttons stay on a single row */ .contact-btns{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:6px; margin-top:8px; max-width:100%; } .contact-email a{ font-weight:600; color:var(--ink); text-decoration:none; background:var(--lime); padding:.35em .5em; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); white-space:nowrap; font-size:clamp(8px, 2.7vw, 14px); display:flex; align-items:center; } .contact-email a:hover{ background:var(--blue); color:var(--white); } .contact-extra{ font-family:var(--sans); font-size:clamp(11px, 1.15vw, 14px); line-height:1.7; margin-top:clamp(12px, 2.4vh, 22px); } .contact-extra a{ pointer-events:auto; color:var(--lime); font-weight:600; text-decoration:underline; text-underline-offset:2px; } .contact-extra a:hover{ color:var(--white); } .contact-photo{ position:relative; justify-self:center; align-self:center; pointer-events:auto; } .contact-photo img{ display:block; height:clamp(220px, 64vh, 560px); width:auto; max-width:100%; object-fit:cover; border:2px solid var(--ink); box-shadow:9px 10px 0 var(--ink); filter:grayscale(100%); } /* second photo fades in over the first on hover */ .contact-photo .photo-hover{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .25s ease; } .contact-photo:hover .photo-hover{ opacity:1; } /* "rent my brain" (contact) page is black with white text. The black is a backdrop BEHIND the decor (z-index:-2) so the floating elements still show on top — recoloured light on this dark page. */ .page-contact{ color:var(--white); } body.dark-page::before{ content:''; position:fixed; inset:0; background:var(--ink); z-index:-2; pointer-events:none; } body.dark-page .floaty{ color:#d8d8d8; } /* light-light-gray decor on the dark page */ .page-contact .page-eyebrow{ color:var(--white); opacity:.55; } .page-contact .contact-lead em{ color:var(--lime); } .page-contact .contact-photo img{ border-color:var(--white); box-shadow:9px 10px 0 rgba(255,255,255,.16); } /* ============================================================ PROJECTS */ .projects-inner{ width:min(100%, 980px); text-align:center; } .projects-title{ font-size:clamp(34px, 7vw, 92px); line-height:.95; margin-bottom:clamp(18px, 4vh, 46px); } .projects-title .l-serif{ font-style:italic; font-weight:900; } .projects-title .l-grotesque{ font-weight:700; } .projects-title .l-pixel{ font-family:var(--pixel); font-size:.62em; transform:translateY(-.04em); } .project-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:clamp(10px, 1.6vw, 20px); } .project-btn{ font-family:var(--grotesque); font-weight:700; font-size:clamp(15px, 1.7vw, 22px); padding:clamp(16px, 3.4vh, 34px) clamp(10px, 1.4vw, 18px); border:2px solid var(--ink); background:var(--white); box-shadow:5px 6px 0 var(--ink); transition:transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; } .project-btn span{ display:block; } .project-btn:nth-child(odd):hover{ background:var(--lime); } .project-btn:nth-child(even):hover{ background:var(--blue); color:var(--white); } .project-btn:hover{ transform:translate(-2px,-3px); box-shadow:8px 10px 0 var(--ink); } /* ============================================================ CASE pages */ .case-inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(20px, 4vw, 60px); align-items:center; width:min(100%, 1180px); } .case-title{ font-size:clamp(28px, 4.6vw, 64px); line-height:1; margin-bottom:clamp(12px, 2.4vh, 24px); } .case-title .l-serif{ font-style:italic; font-weight:900; } .case-title .l-pixel{ font-family:var(--pixel); font-size:.68em; transform:translateY(-.04em); } .brief{ font-family:var(--grotesque); font-size:clamp(13px, 1.45vw, 19px); line-height:1.42; max-width:46ch; margin-bottom:clamp(14px, 2.6vh, 26px); } .brief-label{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.7em; background:var(--lime); padding:.12em .4em; margin-right:.4em; } .awards{ margin-top:clamp(8px, 1.6vh, 16px); } .awards-title{ font-family:var(--grotesque); font-weight:700; font-size:clamp(20px, 2.6vw, 34px); /* bigger & bolder than the award names */ line-height:1; margin-bottom:clamp(8px, 1.4vh, 14px); } .award-row{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(8px, 1vw, 14px); margin-bottom:clamp(8px, 1.4vh, 14px); } .award-icon{ height:clamp(22px, 2.6vh, 34px); width:auto; } .award-name{ font-family:var(--grotesque); font-weight:500; font-size:clamp(13px, 1.4vw, 18px); } .fest-btn{ font-family:var(--sans); font-weight:600; font-size:clamp(11px, 1.15vw, 14px); text-decoration:none; color:var(--white); /* white text ... */ background:var(--ink); /* ... on black button */ padding:.5em .8em; border:2px solid var(--ink); transition:transform .15s ease, background .15s ease, color .15s ease; } .fest-btn:hover{ background:var(--lime); color:var(--ink); transform:translateY(-2px); } /* responsive video that keeps proportions & is never cropped */ .case-media{ display:flex; justify-content:center; align-items:center; } .video-wrap{ position:relative; width:100%; max-width:min(56vw, 760px); aspect-ratio:16 / 9; max-height:62vh; border:2px solid var(--ink); box-shadow:8px 9px 0 var(--ink); background:#000; } .video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* ============================================================ GAME */ .page-game{ flex-direction:column; gap:clamp(8px, 1.4vh, 16px); } .game-inner{ width:min(100%, 1100px); height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(8px, 1.4vh, 16px); } .game-title{ font-size:clamp(26px, 4.4vw, 56px); line-height:1; text-align:center; } .game-title .l-serif{ font-style:italic; font-weight:900; } .game-title .l-grotesque{ font-weight:700; } .game-title .l-pixel{ font-family:var(--pixel); font-size:.5em; transform:translateY(-.04em); } .game-help{ font-family:var(--pixel); font-size:clamp(7px, 0.78vw, 10px); line-height:1.7; color:var(--white); background:var(--ink); padding:.7em 1.1em; border-radius:18px; text-align:center; max-width:92%; } .game-help b{ color:var(--lime); } .game-stage{ position:relative; width:100%; flex:1 1 auto; min-height:0; /* allow flex child to shrink for no-scroll */ border:2px solid var(--ink); box-shadow:8px 9px 0 var(--ink); background:var(--white); overflow:hidden; } #gameCanvas{ display:block; width:100%; height:100%; } .game-over{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px, 1.8vh, 18px); background:rgba(235,235,235,.96); text-align:center; padding:16px; } .go-text{ font-family:var(--grotesque); font-weight:700; font-size:clamp(18px, 3vw, 36px); line-height:1.15; max-width:20ch; } .go-text .go-num{ color:var(--blue); font-family:var(--pixel); font-size:.8em; } .go-btn{ font-family:var(--grotesque); font-weight:700; font-size:clamp(14px, 1.6vw, 20px); padding:.55em 1.6em; border:2px solid var(--ink); box-shadow:5px 6px 0 var(--ink); transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; } .go-btn:hover{ transform:translate(-2px,-3px); box-shadow:7px 9px 0 var(--ink); } .go-btn.play-again{ background:var(--lime); color:var(--ink); } .go-btn.collect{ background:var(--blue); color:var(--white); } /* ============================================================ RESPONSIVE */ @media (max-width:860px){ .contact-inner{ grid-template-columns:1fr; gap:clamp(14px,3vh,26px); text-align:left; } .contact-photo{ order:-1; } .contact-photo img{ height:clamp(150px, 34vh, 300px); } .case-inner{ grid-template-columns:1fr; gap:clamp(12px,2.4vh,22px); align-content:start; } .video-wrap{ max-width:100%; max-height:42vh; } .creator-word{ font-size:min(20vw, 18vh); } .cards{ width:98vw; height:50vh; margin-top:1vh; } .card{ width:31vw; height:25vh; } .card-1{ left:1%; top:5%; } .card-2{ left:34%; top:27%; } .card-3{ left:67%; top:5%; } .card .card-label{ font-size:13px; } } /* On phones the briefs may be long — allow vertical scroll ONLY here, while the desktop stays strictly no-scroll. */ @media (max-width:860px){ .page-case, .page-contact{ overflow-y:auto; -webkit-overflow-scrolling:touch; align-items:flex-start; } } /* very short / landscape phones: keep the game comfortably inside the screen */ @media (max-height:520px){ .game-help{ padding:.4em .8em; } .creator-word{ font-size:min(15vw, 26vh); } }