/* ============================================================ golovitsyn.com — shared foundation (tokens, reset, header, footer, components, motion states). Brand tokens are set by . ============================================================ */ :root{ --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,0,.35,1); --dur: .9s; --gutter: clamp(20px, 4vw, 56px); --max: 1440px; --header-h: 72px; } /* ---------- brands ---------- */ html[data-brand="egor"]{ --bg:#F4F4F2; --bg-2:#FFFFFF; --ink:#0B0B0C; --ink-2:#2A2A2C; --mute:#6E6E70; --line:rgba(11,11,12,.12); --accent:#1C2ED6; --accent-deep:#0A1266; --on-accent:#F4F4F2; --font-display:'Inter Tight', system-ui, sans-serif; --font-body:'Inter Tight', system-ui, sans-serif; --font-serif:'Instrument Serif', Georgia, serif; --radius:4px; } html[data-brand="snappy"]{ --bg:#FFF6E8; --bg-2:#FFFFFF; --ink:#0E2A47; --ink-2:#23415F; --mute:#5C7089; --line:rgba(14,42,71,.14); --accent:#E3262B; --accent-deep:#B7161B; --on-accent:#FFF6E8; --yellow:#FFC93C; --teal-1:#0C6A90; --teal-2:#05AAB4; --teal-3:#58E3C4; --cream:#FFF6E8; --font-display:'Lilita One', 'Arial Black', sans-serif; --font-body:'Nunito', system-ui, sans-serif; --radius:22px; } html[data-brand="kmoi"]{ --bg:#EFEFEF; --bg-2:#FFFFFF; --ink:#000000; --ink-2:#1A1A1A; --mute:#6F6F6F; --line:rgba(0,0,0,.14); --accent:#DD4D2F; --accent-deep:#B93A21; --on-accent:#EFEFEF; --font-display:'Lekton', ui-monospace, monospace; --font-body:'Lekton', ui-monospace, monospace; --radius:0px; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:auto} body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden} img,video,svg,canvas{display:block; max-width:100%} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0; list-style:none} ::selection{background:var(--accent); color:var(--on-accent)} :focus-visible{outline:2px solid var(--accent); outline-offset:3px} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ---------- layout helpers ---------- */ .wrap{width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto} .section{padding-block:clamp(88px, 12vw, 180px)} .grid{display:grid; gap:var(--gutter)} .eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); font-weight:600} .num{font-variant-numeric:tabular-nums} .vtext{writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:.22em; text-transform:uppercase; font-size:11px; font-weight:600; color:var(--mute)} .line{height:1px; background:var(--line); border:0} /* ---------- global header ---------- */ .gh{position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h); display:flex; align-items:center; padding-inline:var(--gutter); gap:24px; transition:transform .5s var(--ease-out), background .4s, backdrop-filter .4s} .gh.is-hidden{transform:translateY(-100%)} .gh.is-scrolled{background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)} .gh__brand{display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; font-size:18px; white-space:nowrap} .gh__brand img{height:30px; width:auto} .gh__nav{display:none; gap:26px; margin-left:auto; font-size:14px; font-weight:600} .gh__nav a{position:relative; opacity:.72; transition:opacity .3s} .gh__nav a:hover{opacity:1} .gh__nav a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out)} .gh__nav a:hover::after{transform:scaleX(1)} .gh__switch{margin-left:auto; display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:color-mix(in srgb, var(--bg) 70%, transparent)} .gh__switch a{padding:8px 14px; border-radius:999px; opacity:.7; transition:opacity .3s, background .3s, color .3s} .gh__switch a:hover{opacity:1} .gh__switch a[aria-current]{opacity:1; background:var(--ink); color:var(--bg)} @media (min-width:900px){ .gh__nav{display:flex} .gh__switch{margin-left:0} } /* ---------- footer ---------- */ .gf{border-top:1px solid var(--line); padding-block:48px 40px; font-size:14px; color:var(--mute)} .gf__row{display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:center} .gf__links{display:flex; flex-wrap:wrap; gap:8px 22px} .gf a{color:var(--ink); opacity:.75; transition:opacity .3s} .gf a:hover{opacity:1} .gf__brands{display:flex; gap:22px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12px} /* ---------- buttons ---------- */ .btn{display:inline-flex; align-items:center; gap:12px; padding:16px 26px; border-radius:999px; font-weight:700; font-size:15px; background:var(--ink); color:var(--bg); transition:transform .5s var(--ease-out), background .3s, color .3s; will-change:transform} .btn:hover{background:var(--accent); color:var(--on-accent)} .btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)} .btn--ghost:hover{background:var(--ink); color:var(--bg)} .btn--accent{background:var(--accent); color:var(--on-accent)} .btn--accent:hover{background:var(--accent-deep)} .btn svg{width:18px; height:18px; flex:none} .btn .arrow{transition:transform .5s var(--ease-out)} .btn:hover .arrow{transform:translateX(4px)} /* store badges (shared by both apps) */ .stores{display:flex; flex-wrap:wrap; gap:12px} .store{display:inline-flex; align-items:center; gap:12px; padding:12px 20px 12px 16px; border-radius:14px; background:#0B0B0C; color:#fff; line-height:1.05; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)} .store:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.18)} .store svg{width:26px; height:26px; fill:#fff; flex:none} .store small{display:block; font-size:10.5px; opacity:.75; font-weight:500; letter-spacing:.02em} .store b{display:block; font-size:16px; font-weight:700} .store--light{background:#fff; color:#0B0B0C; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)} .store--light svg{fill:#0B0B0C} /* ---------- phone frame (iPhone-style, pure CSS) ---------- */ .phone{--w:300px; position:relative; width:var(--w); aspect-ratio:9/19.5; border-radius:calc(var(--w)*.165); padding:calc(var(--w)*.03); background:linear-gradient(160deg,#3b3b40,#0f0f12 45%,#2a2a2e); box-shadow:0 40px 80px -20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); flex:none} .phone::before{content:""; position:absolute; inset:calc(var(--w)*.012); border-radius:calc(var(--w)*.153); background:#0a0a0c; z-index:0} .phone__screen{position:relative; z-index:1; width:100%; height:100%; border-radius:calc(var(--w)*.135); overflow:hidden; background:#000} .phone__screen>img,.phone__screen>video{width:100%; height:100%; object-fit:cover} .phone::after{content:""; position:absolute; z-index:2; top:calc(var(--w)*.055); left:50%; transform:translateX(-50%); width:calc(var(--w)*.31); height:calc(var(--w)*.09); background:#000; border-radius:999px} /* ---------- motion states ---------- */ [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay:var(--d,0s); will-change:opacity,transform} [data-reveal].in{opacity:1; transform:none} [data-reveal="fade"]{transform:none} [data-reveal="left"]{transform:translateX(-32px)} [data-reveal="scale"]{transform:scale(.94)} .mask{overflow:hidden; display:block} .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em} .wi{display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease-out); transition-delay:var(--d,0s); will-change:transform} .in .wi{transform:none} .img-reveal{position:relative; overflow:hidden} .img-reveal>img,.img-reveal>picture{transform:scale(1.12); transition:transform 1.6s var(--ease-out)} .img-reveal::after{content:""; position:absolute; inset:0; background:var(--ink); transform:scaleY(1); transform-origin:top; transition:transform 1.1s var(--ease-io)} .img-reveal.in>img,.img-reveal.in>picture{transform:none} .img-reveal.in::after{transform:scaleY(0); transform-origin:bottom} /* marquee */ .marquee{overflow:hidden; white-space:nowrap; -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:inline-flex; gap:0; animation:marquee var(--speed,40s) linear infinite} .marquee__track>span{padding-inline:.6em} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} /* custom cursor (pointer:fine only) */ .cursor{position:fixed; z-index:9999; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--accent); pointer-events:none; transform:translate(-50%,-50%); transition:width .35s var(--ease-out), height .35s var(--ease-out), opacity .3s, background .3s; mix-blend-mode:normal; opacity:0} .cursor.is-on{opacity:1} .cursor.is-link{width:56px; height:56px; background:var(--accent); opacity:.35} .cursor.is-hidden{opacity:0} @media (pointer:coarse){ .cursor{display:none} } /* magnetic wrapper */ [data-magnet]{display:inline-block; will-change:transform} /* reduced motion */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important} [data-reveal],.wi,.img-reveal>img{opacity:1; transform:none} .img-reveal::after{display:none} } /* custom cursor active: hide the native one */ html.has-cursor, html.has-cursor *{cursor:none!important}