/* ═══════════════════════════════════════════════════════════════ NOWON — nowon.wtf Tokens, layout primitives, then section by section. ═══════════════════════════════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#050505; --bg-2:#0a0a0c; --ink:#ffffff; --ink-dim:rgba(255,255,255,.56); --ink-faint:rgba(255,255,255,.32); --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06); --red:#ff0000; --red-soft:#ff2d3d; --gutter:clamp(20px,5vw,88px); --maxw:1560px; --nav-h:64px; --sans:'League Spartan',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --e-expo:cubic-bezier(.16,1,.3,1); --e-quart:cubic-bezier(.25,1,.5,1); --e-inout:cubic-bezier(.65,0,.35,1); } html{ scroll-behavior:smooth; /* full-height sections centre their own content, so they snap flush to the top and the translucent navbar simply floats over them */ scroll-padding-top:0; -webkit-text-size-adjust:100%; } /* Snapping only where it can't fight the reader: - a mouse/trackpad only (touch momentum plus snap is what felt broken), - proximity, never mandatory, - and only on sections that FIT the viewport. app.js adds .snap to those; a section taller than the screen has no snap point, so it scrolls freely. */ @media (pointer:fine){ html{scroll-snap-type:y proximity} } [data-snap]{scroll-margin-top:0} [data-snap].snap{scroll-snap-align:start} @media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.locked{overflow:hidden;height:100vh} ::selection{background:var(--red);color:#fff} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} img,svg{display:block;max-width:100%} /* ── layout ─────────────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .section{position:relative;padding-block:clamp(96px,13vh,180px)} .section--tight{padding-block:clamp(72px,9vh,120px)} /* Sections that carry a snap point fill the screen and centre their content, so snapping reads as paging instead of a nudge. A section whose content outgrows the viewport simply gets taller and app.js drops its snap point. */ .section[data-snap]{min-height:100svh;display:flex;flex-direction:column;justify-content:center} .section[data-snap] > .wrap{width:100%} /* section label: 01 / About ─────────────────────────────────── */ .slabel{display:flex;align-items:center;gap:14px;margin-bottom:clamp(32px,5vh,64px);flex-wrap:wrap} .slabel__num{ font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.14em;color:var(--red); } .slabel__text{ font-size:clamp(13px,1.1vw,15px);font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim); } .slabel__rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} /* interstitial screens get the same label, marked with a dot instead of a number */ .slabel__dot{width:6px;height:6px;border-radius:999px;background:var(--red);flex:none} .slabel__aside{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint);flex:none; } /* ── background layers ───────────────────────────────────────── */ #bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block} #grain{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:170px; } #vignette{ position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.78) 100%); } #page{position:relative;z-index:2} /* ── custom cursor ───────────────────────────────────────────── */ #cursor,#cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:999px; transform:translate(-50%,-50%);will-change:transform} #cursor{width:6px;height:6px;background:var(--red);transition:width .28s var(--e-expo),height .28s var(--e-expo),opacity .3s} #cursor-ring{ width:34px;height:34px;border:1px solid rgba(255,255,255,.28); transition:width .35s var(--e-expo),height .35s var(--e-expo),border-color .3s,background .3s,opacity .3s; display:grid;place-items:center; } #cursor-ring .cl{ font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; opacity:0;transition:opacity .2s;white-space:nowrap;color:#000;font-weight:500; } body.cur-link #cursor{opacity:0} body.cur-link #cursor-ring{width:66px;height:66px;background:var(--red);border-color:var(--red)} body.cur-link #cursor-ring .cl{opacity:1} body.cur-hover #cursor{width:3px;height:3px} body.cur-hover #cursor-ring{width:52px;height:52px;border-color:rgba(255,255,255,.55)} @media (pointer:fine){ body.has-cursor,body.has-cursor *{cursor:none !important} } @media (pointer:coarse){#cursor,#cursor-ring{display:none}} /* ── char roll (hover) ───────────────────────────────────────── */ .roll{display:inline-flex;overflow:hidden;vertical-align:bottom} .roll .rw{position:relative;display:inline-block;overflow:hidden} .roll .rt,.roll .rb{display:block;transition:transform .55s cubic-bezier(.87,0,.13,1);transition-delay:calc(var(--i) * 24ms)} .roll .rb{position:absolute;top:100%;left:0;color:var(--red)} a:hover .roll .rt,a:hover .roll .rb, button:hover .roll .rt,button:hover .roll .rb, .roll:hover .rt,.roll:hover .rb{transform:translateY(-100%)} /* ── reveal on scroll ────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e-expo),transform .9s var(--e-expo)} .rv.in{opacity:1;transform:none} .rv[data-d="1"]{transition-delay:.08s} .rv[data-d="2"]{transition-delay:.16s} .rv[data-d="3"]{transition-delay:.24s} .rv[data-d="4"]{transition-delay:.32s} /* ═══ SPLASH ═════════════════════════════════════════════════ */ #splash{ position:fixed;inset:0;z-index:9000;background:var(--bg); display:grid;place-items:center;overflow:hidden; } #splash.out{animation:splashOut .8s var(--e-expo) forwards} @keyframes splashOut{to{clip-path:inset(0 0 100% 0);opacity:1}} #splash-mark{width:min(52vw,560px);position:relative} #splash-mark svg{width:100%;height:auto} #splash-clip{clip-path:inset(0 100% 0 0);animation:splashWipe 1s var(--e-expo) .15s forwards} @keyframes splashWipe{to{clip-path:inset(0 0 0 0)}} #splash-bar{ position:absolute;top:-6%;bottom:-6%;width:2px;background:var(--red); left:0;box-shadow:0 0 24px 2px rgba(255,0,0,.65); animation:barSweep 1s var(--e-expo) .15s forwards; } @keyframes barSweep{0%{left:0;opacity:1}85%{opacity:1}100%{left:100%;opacity:0}} #splash-meta{ position:absolute;left:0;right:0;bottom:14%;text-align:center; font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase; color:var(--ink-faint);opacity:0;animation:fadeIn .6s ease .9s forwards; } @keyframes fadeIn{to{opacity:1}} /* ═══ NAVBAR ═════════════════════════════════════════════════ */ #nav{ position:fixed;top:0;left:0;width:100%;height:var(--nav-h);z-index:400; display:flex;align-items:center; background:rgba(5,5,5,.62); backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5); border-bottom:1px solid var(--line-soft); transform:translateY(-100%);opacity:0; transition:transform .55s var(--e-expo),opacity .4s ease; } #nav.show{transform:none;opacity:1} #nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px} #nav-mark{width:26px;flex:none} #nav-mark svg{width:100%;height:auto;transition:transform .35s var(--e-expo)} #nav-mark:hover svg{transform:rotate(-8deg) scale(1.12)} #nav-links{display:flex;gap:clamp(14px,2.2vw,34px)} #nav-links a{ font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-dim);transition:color .25s; } #nav-links a:hover,#nav-links a.active{color:var(--ink)} #nav-links a.active{position:relative} #nav-links a.active::after{ content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--red) } #nav-right{display:flex;align-items:center;gap:18px} /* one segment per section, filling in order — the old single bar and the side dots said the same thing twice */ #progress{position:absolute;left:0;right:0;bottom:0;height:2px;display:flex;gap:2px; padding-inline:var(--gutter)} #progress i{flex:1;position:relative;background:rgba(255,255,255,.08);overflow:hidden} #progress b{position:absolute;inset:0;transform-origin:left;transform:scaleX(0); background:var(--red);box-shadow:0 0 10px rgba(255,0,0,.55); transition:transform .18s linear} @media (max-width:820px){#nav-links{display:none}} /* language button (shared) */ .lang{display:inline-flex;align-items:center;gap:6px} .lang svg{width:18px;height:18px;flex:none} .lang svg path{stroke:var(--red)} .lang .code{ font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--red); } .lang:hover{opacity:.7} /* ═══ HERO ═══════════════════════════════════════════════════ */ #hero{ min-height:100svh;position:relative; display:flex;flex-direction:column;justify-content:center; padding-block:96px 0; } #hero-top{ position:absolute;top:0;left:0;right:0; padding:26px var(--gutter); display:flex;align-items:center;justify-content:space-between; font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint); } #hero-top .dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--red); margin-right:8px;animation:blink 2.4s ease-in-out infinite;vertical-align:middle} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} #hero-word{ width:min(60vw,820px);margin:0 auto; transform:translateY(28px) scale(.97);opacity:0; transition:opacity 1s var(--e-expo),transform 1.1s var(--e-expo); will-change:transform; } #hero-word.in{opacity:1;transform:none} #hero-word svg{width:100%;height:auto;overflow:visible} #hero-word svg path{transition:fill .4s ease} #hero-sub{ margin:clamp(30px,5vh,58px) auto 0;width:100%;max-width:var(--maxw);padding-inline:var(--gutter); display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap; opacity:0;transform:translateY(18px); transition:opacity .9s var(--e-expo) .35s,transform .9s var(--e-expo) .35s; } #hero-sub.in{opacity:1;transform:none} #hero-role{ font-size:clamp(15px,1.7vw,26px);font-weight:600;letter-spacing:.01em;line-height:1.45; } /* The WHOLE line rolls, not just one word: sizing a box to a single changing word either clipped it or left a gap, and Turkish puts the verb last anyway. 1.45 leaves room for the diacritics (Ü, İ, Ş) a tighter box clips. */ #hero-role .rot{ position:relative;display:block;height:1.45em;line-height:1.45;white-space:nowrap; } #hero-role .rot span{ position:absolute;left:0;top:0;display:block;line-height:1.45; opacity:0;transform:translateY(9px); transition:opacity .55s var(--e-quart),transform .8s var(--e-expo); } #hero-role .rot span.on{opacity:1;transform:none} #hero-role .rot span.out{opacity:0;transform:translateY(-9px)} #hero-role .rot em{font-style:normal;color:var(--red)} #hero-meta{ font-family:var(--mono);font-size:clamp(10px,.85vw,12px);letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint);text-align:right;line-height:1.9; } #hero-bottom{ position:absolute;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom)); padding-inline:var(--gutter); display:flex;align-items:flex-end;justify-content:flex-end;gap:20px; opacity:0;transition:opacity .9s ease .8s; } #hero-bottom.in{opacity:1} #clock{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase} /* ═══ MANIFESTO ══════════════════════════════════════════════ */ #manifesto h2{ font-size:clamp(30px,5.9vw,96px);font-weight:700;line-height:1.04;letter-spacing:-.025em; } /* each sentence is its own line, so a break never lands in the middle of one */ #manifesto h2 .ml{display:block} #manifesto h2 .ml.red{color:var(--red)} #manifesto h2 .w{display:inline-block;opacity:.13;transition:opacity .45s ease} #manifesto h2 .w.lit{opacity:1} #manifesto p{ margin-top:clamp(30px,4.4vh,56px);max-width:52ch; padding-top:clamp(20px,2.6vh,30px);border-top:1px solid var(--line-soft); font-size:clamp(15px,1.35vw,20px);line-height:1.75;color:var(--ink-dim); } #manifesto p .red{color:var(--red);font-weight:600} /* ═══ ABOUT ══════════════════════════════════════════════════ */ #about .cols{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start} /* stacked, the identity card must not blow up to full width */ @media (max-width:760px){#about .cols{grid-template-columns:1fr;gap:34px} .me{max-width:340px}} .me__photo{position:relative;overflow:hidden;background:#0a0a0c;aspect-ratio:1/1;margin-bottom:20px} .me__photo img{width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(1) contrast(1.06);transition:filter .6s var(--e-expo),transform .8s var(--e-expo)} .me:hover .me__photo img{filter:none;transform:scale(1.03)} .me__photo::after{content:'';position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 0 1px var(--line-soft)} .me__name{font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.01em;line-height:1.2} .me__role{margin-top:4px;margin-bottom:20px;font-family:var(--mono);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--red)} .me__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .pill{ display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border:1px solid var(--line); border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-dim);transition:border-color .35s,color .35s,background .35s; } .pill:hover{border-color:var(--red);color:#fff;background:rgba(255,0,0,.12)} /* Turkish uppercasing turns hi@ into Hİ@ and LinkedIn into LİNKEDIN */ .pill[href^="mailto"]{text-transform:none;letter-spacing:.04em;font-size:11px} [href*="linkedin"]{text-transform:none !important;letter-spacing:.05em} .facts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)} .fact{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft)} .fact dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)} .fact dd{font-size:14px;font-weight:600;text-align:right} #about .body p{font-size:clamp(15px,1.25vw,19px);line-height:1.8;color:var(--ink-dim)} #about .copy p + p{margin-top:1.15em} #about .tagline{ margin-top:clamp(26px,3.6vh,44px);padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--line); font-size:clamp(17px,1.7vw,26px);line-height:1.55;font-weight:600;color:var(--ink); } #about .tagline .red-word{color:var(--red)} /* ═══ MARQUEE ════════════════════════════════════════════════ */ .marquee{ margin-top:clamp(40px,6vh,80px); position:relative;overflow:hidden;border-block:1px solid var(--line-soft); padding-block:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{display:flex;width:max-content;animation:marq 38s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes marq{to{transform:translateX(-50%)}} .marquee__track span{ display:inline-flex;align-items:center;gap:22px;padding-inline:22px;white-space:nowrap; font-size:clamp(13px,1.15vw,17px);font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-faint); } .marquee__track span::after{content:'';width:5px;height:5px;border-radius:999px;background:var(--red);opacity:.7} /* ═══ CAPABILITIES ═══════════════════════════════════════════ */ .caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft); border:1px solid var(--line-soft)} @media (max-width:1100px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.caps{grid-template-columns:1fr}} .cap{ position:relative;background:var(--bg);padding:clamp(22px,2.4vw,34px); min-height:clamp(220px,24vw,290px);display:flex;flex-direction:column;justify-content:space-between; overflow:hidden;transition:background .5s var(--e-expo); } .cap::before{ content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e-expo); background:radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%); } .cap:hover::before{opacity:1} .cap::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent); transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-expo); } .cap:hover::after{transform:scaleX(1)} .cap__top{display:flex;align-items:flex-start;justify-content:space-between;position:relative} .cap__num{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-faint)} .cap__icon{width:clamp(62px,6.2vw,88px);height:auto;position:relative; transition:transform .5s var(--e-expo)} .cap:hover .cap__icon{transform:translateY(-4px) scale(1.05)} .cap__icon svg{width:100%;height:auto} .cap__icon svg path{fill:var(--ink);transition:fill .45s var(--e-expo)} .cap:hover .cap__icon svg path{fill:var(--accent)} .cap__body{position:relative} .cap h3{font-size:clamp(16px,1.4vw,21px);font-weight:700;line-height:1.2;margin-bottom:10px} /* pin the description to three lines so every title in a row shares a baseline */ .cap p{font-size:clamp(12.5px,.95vw,14.5px);line-height:1.6;color:var(--ink-faint); transition:color .45s;min-height:4.8em} .cap:hover p{color:var(--ink-dim)} /* ═══ WORK LIST ══════════════════════════════════════════════ */ .worklist{border-top:1px solid var(--line)} .work{position:relative;border-bottom:1px solid var(--line-soft)} .work__head{ width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.15fr) 44px; align-items:center;gap:clamp(12px,2vw,28px); padding-block:clamp(16px,2.1vw,27px);text-align:left;position:relative; } @media (max-width:760px){ .work__head{grid-template-columns:40px minmax(0,1fr) 34px} .work__desc{display:none} } .work__head::before{ content:'';position:absolute;left:-2vw;right:-2vw;top:0;bottom:0;z-index:-1; background:linear-gradient(90deg,rgba(255,0,0,.09),transparent 70%); opacity:0;transition:opacity .45s var(--e-expo); } .work:hover .work__head::before{opacity:1} .work__num{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.1em} .work__name{ font-size:clamp(24px,3.6vw,54px);font-weight:700;letter-spacing:-.02em;line-height:1; transition:transform .5s var(--e-expo),color .4s; } .work:hover .work__name{transform:translateX(10px)} .work__desc{font-size:clamp(12.5px,1vw,15px);line-height:1.55;color:var(--ink-faint)} .work__act{ width:38px;height:38px;border:1px solid var(--line);border-radius:999px; display:grid;place-items:center;justify-self:end;flex:none; transition:background .4s var(--e-expo),border-color .4s,transform .5s var(--e-expo); } .work__act svg{width:13px;height:13px;stroke:var(--ink);transition:stroke .4s,transform .45s var(--e-expo)} .work:hover .work__act{background:var(--red);border-color:var(--red);transform:rotate(45deg)} .work:hover .work__act svg{stroke:#fff} .work.open .work__act{transform:rotate(135deg)} .work__panel{overflow:hidden;height:0;transition:height .6s var(--e-expo)} .work__inner{ display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(12px,2vw,28px); padding-bottom:clamp(24px,3vw,44px); } @media (max-width:760px){.work__inner{grid-template-columns:40px minmax(0,1fr)}} .work__logo{max-width:210px;margin-bottom:22px;opacity:.9} .work__logo svg{width:100%;height:auto} .work__logo svg path{fill:var(--ink)} .work__role{font-size:clamp(13.5px,1.05vw,16px);line-height:1.75;color:var(--ink-dim);max-width:74ch} .work__link{ display:inline-flex;align-items:center;gap:9px;margin-top:20px; font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red); border-bottom:1px solid rgba(255,0,0,.35);padding-bottom:3px; } .work__link:hover{border-color:var(--red)} /* ═══ CONTACT ════════════════════════════════════════════════ */ #contact h2{ font-size:clamp(34px,7vw,110px);font-weight:700;line-height:1.02;letter-spacing:-.025em; } #contact h2 .red{color:var(--red)} #contact .actions{ margin-top:clamp(34px,5vh,64px);display:flex;flex-wrap:wrap;align-items:center; gap:clamp(14px,2vw,26px); } .btn{ display:inline-flex;align-items:center;gap:12px; padding:15px 26px;border:1px solid var(--line);border-radius:999px; font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; transition:background .4s var(--e-expo),border-color .4s,color .4s; } .btn:hover{background:var(--ink);border-color:var(--ink);color:#000} .btn--red{background:var(--red);border-color:var(--red);color:#fff} .btn--red:hover{background:#fff;border-color:#fff;color:#000} #copied{ font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red); opacity:0;transition:opacity .3s } #copied.show{opacity:1} /* The footer lives inside the contact screen. Left below it, it added ~65px of scroll past the last snap point: the page would not travel there, so the last progress segment never filled. Now nothing follows the final screen. auto margins centre the contact block in whatever room the footer leaves. */ #contact{justify-content:flex-start;padding-bottom:0} /* auto margins on the contact block alone absorb the free space above and below it, which centres it and leaves the footer sitting on the bottom edge. Giving the footer its own margin-top:auto too would split the space three ways instead. */ /* div.wrap, not .wrap:first-of-type — the footer is also a .wrap and, being the first