/* ============================================================ actionvadim-hub — lean design system. Same bones as marlino.online: Inter + JetBrains Mono, a monochrome ink/paper palette driven by two RGB triples, one oklch accent. Flip the theme by swapping --ink-rgb / --bg-rgb (data-theme on ); everything else derives. ============================================================ */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/inter-var-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/jbmono-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/jbmono-var-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} :root, :root[data-theme="light"]{ --ink-rgb:10,10,10; --bg-rgb:255,255,255; --accent:oklch(0.45 0.20 262); --accent-d:oklch(0.39 0.19 262); --accent-ink:#fff; } :root[data-theme="dark"]{ --ink-rgb:240,240,243; --bg-rgb:13,13,16; --accent:oklch(0.70 0.16 264); --accent-d:oklch(0.62 0.17 264); --accent-ink:#0b0b10; } :root{ --bg:rgb(var(--bg-rgb)); --ink:rgb(var(--ink-rgb)); --body:rgba(var(--ink-rgb),.80); --muted:rgba(var(--ink-rgb),.60); --dim:rgba(var(--ink-rgb),.44); --panel:rgba(var(--ink-rgb),.035); --card:rgba(var(--ink-rgb),.055); --line:rgba(var(--ink-rgb),.12); --line2:rgba(var(--ink-rgb),.20); --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --sans:'Inter',system-ui,-apple-system,Arial,sans-serif; --r:14px; --ease:cubic-bezier(.2,.8,.2,1); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ background:var(--bg);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; min-height:100dvh; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit;cursor:pointer} ::selection{background:var(--ink);color:var(--bg)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* The marlin as living brand texture behind everything. Source is a black fish on white paper: at low opacity on light the white blends into the white page and only the dark fish shows; on dark we invert so the paper goes black and the fish glows. Lightly blurred (so it reads as a fish) + the #swim displacement filter, whose amplitude breathes, makes it ripple/swim. A slow drift adds the sense of travel. inset hides the blur/displacement bleed past the viewport edges. */ .filterdefs{position:absolute;width:0;height:0;pointer-events:none} .bgfish{ position:fixed;inset:-48px;z-index:0;pointer-events:none; background:url('/img/bg-marlin.png') center/cover no-repeat; filter:url(#swim) blur(15px);opacity:.14; animation:swim-drift 24s ease-in-out infinite; } :root[data-theme="dark"] .bgfish{filter:url(#swim) blur(15px) invert(1);opacity:.22} @keyframes swim-drift{ 0%,100%{transform:translate3d(-1%,-.4%,0) scale(1.03)} 50%{transform:translate3d(1%,.5%,0) scale(1.05)} } @media (prefers-reduced-motion:reduce){ .bgfish{animation:none;filter:blur(15px)} :root[data-theme="dark"] .bgfish{filter:blur(15px) invert(1)} } /* ---------- shell ---------- */ .wrap{ position:relative;z-index:1;width:100%;max-width:520px;margin:0 auto; padding:56px 22px 40px;display:flex;flex-direction:column;align-items:center; } @media (max-width:480px){ .wrap{padding:40px 18px 32px} } /* ---------- profile ---------- */ .avatar{ width:112px;height:112px;border-radius:50%;object-fit:cover; background:var(--card);border:1px solid var(--line); box-shadow:0 1px 0 rgba(var(--bg-rgb),.6), 0 14px 40px -18px rgba(var(--ink-rgb),.45); } .name{ margin-top:20px;font-weight:900;font-size:clamp(26px,7vw,34px);letter-spacing:-.03em; color:var(--ink);line-height:1.05;text-align:center; } .name .verified{color:var(--accent);width:.62em;height:.62em;display:inline-block;vertical-align:.02em;margin-left:.14em} .handle{margin-top:6px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted)} .handle:empty{display:none} .tagline{margin-top:12px;font-size:16px;color:var(--body);text-align:center;max-width:34ch} .loc{ margin-top:12px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:7px; } .loc:empty{display:none} .loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto} /* ---------- primary + contact stack ---------- */ .stack{width:100%;margin-top:30px;display:flex;flex-direction:column;gap:12px} .cta{ --pad:16px;display:flex;align-items:center;gap:14px;width:100%;text-align:left; padding:var(--pad) 18px;border-radius:var(--r);border:1px solid transparent; background:var(--accent);color:var(--accent-ink); transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .15s; box-shadow:0 10px 30px -14px color-mix(in oklab,var(--accent) 80%,transparent); } .cta:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:0 16px 34px -14px color-mix(in oklab,var(--accent) 75%,transparent)} .cta:active{transform:translateY(0)} .cta .ic{width:22px;height:22px;flex:0 0 auto;opacity:.95} .cta .ic svg{width:100%;height:100%} .cta .tx{flex:1 1 auto;min-width:0} .cta .tx b{display:block;font-weight:800;font-size:16px;letter-spacing:-.01em;line-height:1.15} .cta .tx small{display:block;font-size:12.5px;opacity:.78;font-weight:500;margin-top:1px} .cta .arw{flex:0 0 auto;transition:transform .18s var(--ease)} .cta:hover .arw{transform:translateX(3px)} .cta.ghost{ background:var(--panel);color:var(--ink);border-color:var(--line2);box-shadow:none; } .cta.ghost:hover{background:var(--card);border-color:var(--ink);transform:translateY(-2px)} .cta.ghost .ic{color:var(--accent)} /* ---------- section label ---------- */ .lbl{ align-self:flex-start;margin:34px 0 14px;font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px; } .lbl::after{content:"";height:1px;flex:1;background:var(--line);min-width:24px} /* ---------- projects grid ---------- */ .grid{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .card{ position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line); background:var(--card);aspect-ratio:1/1;cursor:pointer;text-align:left; transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease); will-change:transform; } .card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 20px 40px -22px rgba(var(--ink-rgb),.5)} .card:active{transform:translateY(-1px)} .card .thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat} .card .ph{position:absolute;inset:0;display:grid;place-items:center; background:linear-gradient(140deg,color-mix(in oklab,var(--accent) 30%,var(--bg)),var(--card)); font-weight:900;font-size:34px;color:color-mix(in oklab,var(--accent) 70%,var(--ink));letter-spacing:-.04em} .card .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 45%,transparent 70%)} .card .meta{position:absolute;left:0;right:0;bottom:0;padding:12px 13px;color:#fff;z-index:2} .card .meta b{display:block;font-weight:800;font-size:14.5px;line-height:1.2;letter-spacing:-.01em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card .meta .go{margin-top:5px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;opacity:.85;display:flex;align-items:center;gap:5px} .card .meta .go svg{width:12px;height:12px} .empty{grid-column:1/-1;width:100%;padding:26px;border:1px dashed var(--line2);border-radius:var(--r); text-align:center;color:var(--dim);font-size:14px} /* ---------- socials ---------- */ .socials{width:100%;margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .soc{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; padding:16px 8px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line); color:var(--ink);transition:transform .18s var(--ease),border-color .18s,background .18s,color .18s; } .soc:hover{transform:translateY(-3px);border-color:var(--ink);background:var(--card)} .soc svg{width:24px;height:24px} .soc span{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em} .soc:hover span{color:var(--ink)} @media (max-width:360px){ .socials{grid-template-columns:repeat(2,1fr)} } /* ---------- footer ---------- */ .foot{margin-top:40px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.8} .foot a{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:1px} .foot a:hover{color:var(--ink)} /* theme toggle */ .themebtn{position:fixed;top:16px;right:16px;z-index:5;width:40px;height:40px;border-radius:11px; display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--muted); transition:color .15s,border-color .15s,transform .15s} .themebtn:hover{color:var(--ink);border-color:var(--line2);transform:rotate(-12deg)} .themebtn svg{width:19px;height:19px} /* ---------- modal ---------- */ .modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:20px} .modal.open{display:grid} .modal .backdrop{position:absolute;inset:0;background:rgba(var(--ink-rgb),.55);backdrop-filter:blur(6px); opacity:0;transition:opacity .22s ease} .modal.open .backdrop{opacity:1} .modal .sheet{ position:relative;z-index:2;width:100%;max-width:440px;max-height:88dvh;overflow:auto; background:var(--bg);border:1px solid var(--line2);border-radius:20px; box-shadow:0 40px 90px -30px rgba(var(--ink-rgb),.7); transform:translateY(14px) scale(.96);opacity:0;transition:transform .26s var(--ease),opacity .2s ease; } .modal.open .sheet{transform:none;opacity:1} .modal .cover{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--card); border-bottom:1px solid var(--line)} .modal .cover.ph{display:grid;place-items:center;font-weight:900;font-size:56px;letter-spacing:-.04em; color:color-mix(in oklab,var(--accent) 70%,var(--ink)); background:linear-gradient(140deg,color-mix(in oklab,var(--accent) 32%,var(--bg)),var(--card))} .modal .body{padding:22px 22px 24px} .modal .body h2{font-weight:900;font-size:22px;letter-spacing:-.02em;color:var(--ink);line-height:1.15} .modal .body p{margin-top:12px;color:var(--body);font-size:15px;line-height:1.65;white-space:pre-wrap} .modal .body .follow{margin-top:20px;width:100%;justify-content:center} .modal .x{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:10px; display:grid;place-items:center;background:var(--bg-a,rgba(var(--bg-rgb),.7));border:1px solid var(--line); color:var(--ink);backdrop-filter:blur(6px);font-size:20px;line-height:1} .modal .x:hover{background:var(--card)} /* skeleton while projects load */ .sk{background:linear-gradient(100deg,var(--card) 30%,var(--panel) 50%,var(--card) 70%); background-size:200% 100%;animation:sk 1.2s linear infinite} @keyframes sk{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} .cta:hover,.card:hover,.soc:hover{transform:none} } /* the hidden attribute must always win (some components set their own display) */ [hidden]{display:none!important} /* ---------- cookie consent ---------- */ .consent{ position:fixed;left:16px;right:16px;bottom:16px;z-index:60;margin:0 auto;max-width:520px; background:var(--bg);border:1px solid var(--line2);border-radius:14px; box-shadow:0 24px 60px -22px rgba(var(--ink-rgb),.7); padding:16px 18px;display:flex;flex-direction:column;gap:12px; animation:consent-in .3s var(--ease); } @keyframes consent-in{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}} .consent-txt{font-size:12.5px;color:var(--body);line-height:1.5;margin:0} .consent-btns{display:flex;gap:10px;justify-content:flex-end} .consent button{padding:9px 18px;border-radius:9px;font-weight:700;font-size:13.5px;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s} .consent-no{background:transparent;color:var(--muted);border-color:var(--line2)} .consent-no:hover{color:var(--ink);border-color:var(--ink)} .consent-yes{background:var(--accent);color:var(--accent-ink)} .consent-yes:hover{background:var(--accent-d)} @media (max-width:480px){ .consent-btns{justify-content:stretch} .consent button{flex:1} }