/* ========================================================= zlenk Design System v1.0 Single source of truth: tokens, base, components, motion. Mode awareness: - default = LIGHT (white + turquoise) → list/profile/auth/landing - .dark on or → camera/viewer/clips/live (content-first) ========================================================= */ /* ---------- RESET ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%} img,svg,video{display:block;max-width:100%} button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:none} button{cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none} /* ---------- TOKENS — LIGHT (default) ---------- */ :root{ /* ——— brand */ --brand:#14B8A6; /* deeper turquoise = AA contrast on white */ --brand-soft:#40E0D0; /* electric turquoise = accents/gradients */ --brand-deep:#0F766E; /* press/dark accent */ --brand-glow:rgba(20,184,166,.30); --brand-tint:rgba(20,184,166,.08); --brand-tint-strong:rgba(20,184,166,.14); --brand-grad:linear-gradient(135deg,#40E0D0 0%,#14B8A6 100%); /* ——— surface (light) */ --bg:#FFFFFF; --bg-elev:#FAFAFB; --bg-card:#FFFFFF; --bg-overlay:rgba(255,255,255,.72); --bg-glass:rgba(255,255,255,.62); /* ——— ink (text on light) */ --ink:#0A0F1F; --ink-2:#1F2937; --ink-3:#475569; --ink-4:#94A3B8; --ink-5:#CBD5E1; --ink-on-brand:#FFFFFF; /* ——— border / divider */ --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.14); --line-strong:rgba(15,23,42,.22); /* ——— state */ --ok:#10B981; --warn:#F59E0B; --err:#EF4444; --info:#3B82F6; /* ——— shadow (light) */ --shadow-1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04); --shadow-2:0 4px 12px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04); --shadow-3:0 12px 32px rgba(15,23,42,.10),0 4px 8px rgba(15,23,42,.04); --shadow-4:0 24px 60px rgba(15,23,42,.14),0 8px 16px rgba(15,23,42,.06); --shadow-glow:0 8px 32px var(--brand-glow); --shadow-pressed:inset 0 1px 2px rgba(15,23,42,.08); /* ——— spacing — strict 4/8 grid */ --s-0:0; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; /* ——— radius */ --r-1:6px; --r-2:10px; --r-3:14px; --r-4:18px; --r-5:24px; --r-6:32px; --r-pill:999px; /* ——— typography */ --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif; --font-display:"SF Pro Display","Inter",-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace; --t-xs:11px; --t-sm:13px; --t-md:15px; --t-base:17px; --t-lg:20px; --t-xl:24px; --t-2xl:32px; --t-3xl:42px; --t-4xl:56px; --t-hero:clamp(40px,7.5vw,72px); --w-regular:400; --w-medium:500; --w-semi:600; --w-bold:700; --w-heavy:800; --w-black:900; --lh-tight:1.1; --lh-snug:1.25; --lh-base:1.5; --lh-loose:1.7; --tracking-tight:-0.025em; --tracking-snug:-0.015em; --tracking-normal:-0.005em; --tracking-wide:0.04em; /* ——— motion (iOS-grade) */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --t-fast:120ms; --t-base:200ms; --t-slow:320ms; --t-slower:500ms; /* ——— layout */ --nav-h:64px; --header-h:56px; --max-w:1180px; --max-w-narrow:680px; --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px); /* ——— blur */ --blur-sm:blur(8px) saturate(160%); --blur-md:blur(16px) saturate(180%); --blur-lg:blur(28px) saturate(200%); } /* ---------- TOKENS — DARK (camera, viewers, content-first) ---------- */ .dark, .dark :root, [data-theme="dark"]{ --bg:#000000; --bg-elev:#0A0A0B; --bg-card:#111114; --bg-overlay:rgba(0,0,0,.55); --bg-glass:rgba(20,20,24,.55); --ink:#FFFFFF; --ink-2:rgba(255,255,255,.86); --ink-3:rgba(255,255,255,.65); --ink-4:rgba(255,255,255,.45); --ink-5:rgba(255,255,255,.22); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.28); --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 6px 16px rgba(0,0,0,.45); --shadow-3:0 16px 40px rgba(0,0,0,.55); --shadow-4:0 32px 80px rgba(0,0,0,.6); } /* ---------- BASE ---------- */ html{ font-family:var(--font-sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%; letter-spacing:var(--tracking-normal); font-size:16px; } body{ background:var(--bg); color:var(--ink); line-height:var(--lh-base); } ::selection{background:var(--brand-tint-strong);color:var(--ink)} .dark ::selection{background:rgba(64,224,208,.35);color:#fff} /* ---------- TYPOGRAPHY ---------- */ .t-hero{font-family:var(--font-display);font-size:var(--t-hero);font-weight:var(--w-black);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight)} .t-display{font-size:var(--t-3xl);font-weight:var(--w-heavy);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight)} .t-h1{font-size:var(--t-2xl);font-weight:var(--w-heavy);line-height:var(--lh-tight);letter-spacing:var(--tracking-snug)} .t-h2{font-size:var(--t-xl);font-weight:var(--w-bold);line-height:var(--lh-snug);letter-spacing:var(--tracking-snug)} .t-h3{font-size:var(--t-lg);font-weight:var(--w-bold);line-height:var(--lh-snug)} .t-body{font-size:var(--t-base);font-weight:var(--w-regular);line-height:var(--lh-base)} .t-md{font-size:var(--t-md);line-height:var(--lh-base)} .t-sm{font-size:var(--t-sm);line-height:var(--lh-snug);color:var(--ink-3)} .t-xs{font-size:var(--t-xs);line-height:var(--lh-snug);color:var(--ink-4);letter-spacing:var(--tracking-wide);text-transform:uppercase;font-weight:var(--w-semi)} .t-mute{color:var(--ink-3)} .t-dim{color:var(--ink-4)} /* gradient text helper */ .grad-text{ background:var(--brand-grad); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- LAYOUT PRIMITIVES ---------- */ .container{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-5)} .container-narrow{max-width:var(--max-w-narrow);margin:0 auto;padding:0 var(--s-5)} .stack-1{display:flex;flex-direction:column;gap:var(--s-1)} .stack-2{display:flex;flex-direction:column;gap:var(--s-2)} .stack-3{display:flex;flex-direction:column;gap:var(--s-3)} .stack-4{display:flex;flex-direction:column;gap:var(--s-4)} .stack-6{display:flex;flex-direction:column;gap:var(--s-6)} .stack-8{display:flex;flex-direction:column;gap:var(--s-8)} .row{display:flex;align-items:center;gap:var(--s-3)} .row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)} .center{display:flex;align-items:center;justify-content:center} .grow{flex:1;min-width:0} .spacer{flex:1} /* safe-area helpers */ .safe-top{padding-top:calc(var(--safe-top) + var(--s-4))} .safe-bot{padding-bottom:calc(var(--safe-bot) + var(--s-4))} /* ---------- BUTTONS ---------- */ .btn{ --btn-h:48px; --btn-px:var(--s-5); --btn-fs:var(--t-md); display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); height:var(--btn-h);min-width:var(--btn-h); padding:0 var(--btn-px); font-family:inherit;font-size:var(--btn-fs);font-weight:var(--w-bold); letter-spacing:var(--tracking-snug); border-radius:var(--r-pill); background:var(--bg-elev);color:var(--ink); border:1px solid var(--line); transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); white-space:nowrap;user-select:none; -webkit-touch-callout:none; } .btn:active{transform:scale(.97)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .btn-sm{--btn-h:36px;--btn-px:var(--s-4);--btn-fs:var(--t-sm)} .btn-lg{--btn-h:56px;--btn-px:var(--s-6);--btn-fs:var(--t-base)} .btn-xl{--btn-h:64px;--btn-px:var(--s-8);--btn-fs:var(--t-lg)} .btn-block{width:100%} .btn-primary{ background:var(--brand);color:var(--ink-on-brand);border-color:transparent; box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.18); } .btn-primary:hover{background:var(--brand-deep);box-shadow:var(--shadow-3),inset 0 1px 0 rgba(255,255,255,.22)} .btn-primary:active{background:var(--brand-deep)} .btn-grad{ background:var(--brand-grad);color:var(--ink-on-brand);border-color:transparent; box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.25); } .btn-grad:hover{box-shadow:0 12px 36px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.25)} .btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)} .btn-ghost:hover{background:var(--bg-elev)} .btn-outline{background:transparent;border-color:var(--line-2);color:var(--ink)} .btn-outline:hover{border-color:var(--brand);color:var(--brand)} .btn-danger{background:var(--err);color:#fff;border-color:transparent} /* icon-only button */ .iconbtn{ width:44px;height:44px;border-radius:var(--r-pill); display:inline-flex;align-items:center;justify-content:center; background:var(--bg-elev);color:var(--ink-2); border:1px solid var(--line); transition:transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out); } .iconbtn:hover{background:var(--bg-card);color:var(--ink)} .iconbtn:active{transform:scale(.92)} .iconbtn svg{width:22px;height:22px} .iconbtn-sm{width:36px;height:36px} .iconbtn-sm svg{width:18px;height:18px} .iconbtn-glass{ background:var(--bg-glass);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md); border-color:var(--line-2); } /* ---------- INPUTS ---------- */ .field{display:flex;flex-direction:column;gap:var(--s-2)} .field-label{font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink-2);letter-spacing:var(--tracking-snug)} .field-hint{font-size:var(--t-xs);color:var(--ink-4);text-transform:none;letter-spacing:0;font-weight:var(--w-regular)} .field-error{color:var(--err);font-size:var(--t-sm);font-weight:var(--w-semi)} .input{ height:52px;width:100%; padding:0 var(--s-4); font-size:var(--t-base);font-weight:var(--w-medium); background:var(--bg-elev); color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-3); transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .input::placeholder{color:var(--ink-4);font-weight:var(--w-regular)} .input:hover{border-color:var(--line-2)} .input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint); background:var(--bg-card); } .input.is-error{border-color:var(--err);box-shadow:0 0 0 4px rgba(239,68,68,.12)} textarea.input{height:auto;min-height:96px;padding:var(--s-4);line-height:var(--lh-snug);resize:vertical} /* ---------- CARDS ---------- */ .card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-5); padding:var(--s-6); box-shadow:var(--shadow-1); } .card-elev{box-shadow:var(--shadow-3)} .card-glass{ background:var(--bg-glass); backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg); border:1px solid var(--line-2); box-shadow:var(--shadow-3); } .card-pad-sm{padding:var(--s-4)} .card-pad-lg{padding:var(--s-8)} /* list row (chats, friends, settings) */ .list-row{ display:flex;align-items:center;gap:var(--s-3); padding:var(--s-3) var(--s-4); border-radius:var(--r-3); transition:background var(--t-fast) var(--ease-out); } .list-row:hover{background:var(--bg-elev)} .list-row:active{background:var(--bg-elev);transform:scale(.995)} .list-row .grow{display:flex;flex-direction:column;gap:2px;min-width:0} .list-row .row-name{font-size:var(--t-base);font-weight:var(--w-bold);letter-spacing:var(--tracking-snug);color:var(--ink)} .list-row .row-sub{font-size:var(--t-sm);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- AVATAR ---------- */ .avatar{ width:44px;height:44px;border-radius:50%; background:var(--brand-grad);color:#fff; display:flex;align-items:center;justify-content:center; font-weight:var(--w-black);font-size:var(--t-md); text-transform:uppercase;letter-spacing:0; flex-shrink:0;overflow:hidden; box-shadow:0 2px 8px var(--brand-glow); } .avatar img{width:100%;height:100%;object-fit:cover} .avatar-xs{width:24px;height:24px;font-size:11px} .avatar-sm{width:32px;height:32px;font-size:13px} .avatar-md{width:44px;height:44px;font-size:15px} .avatar-lg{width:64px;height:64px;font-size:22px} .avatar-xl{width:96px;height:96px;font-size:34px} .avatar-2xl{width:128px;height:128px;font-size:46px} .avatar-ring{ position:relative; padding:3px;border-radius:50%; background:var(--brand-grad); } .avatar-ring .avatar{box-shadow:none} /* ---------- BADGE / CHIP ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px; height:24px;padding:0 10px; border-radius:var(--r-pill); font-size:var(--t-xs);font-weight:var(--w-bold); letter-spacing:var(--tracking-wide);text-transform:uppercase; background:var(--bg-elev);color:var(--ink-3); border:1px solid var(--line); } .badge-brand{background:var(--brand-tint);color:var(--brand-deep);border-color:transparent} .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)} .badge-dot.live{background:var(--err);box-shadow:0 0 10px var(--err);animation:pulse 1.6s infinite} .badge-ok{background:rgba(16,185,129,.12);color:var(--ok);border-color:transparent} /* ---------- DIVIDER ---------- */ .divider{height:1px;background:var(--line);width:100%;margin:var(--s-4) 0} .divider-text{display:flex;align-items:center;gap:var(--s-3);color:var(--ink-4);font-size:var(--t-sm)} .divider-text::before,.divider-text::after{content:"";flex:1;height:1px;background:var(--line)} /* ---------- BOTTOM NAV ---------- */ .bnav{ position:fixed;left:0;right:0;bottom:0;z-index:80; display:flex;align-items:stretch;justify-content:space-around; height:calc(var(--nav-h) + var(--safe-bot)); padding-bottom:var(--safe-bot); background:var(--bg-overlay); backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg); border-top:1px solid var(--line); } .bnav-btn{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; color:var(--ink-4); font-size:10px;font-weight:var(--w-bold);letter-spacing:.02em; background:transparent;border:0; transition:color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out); } .bnav-btn svg{width:26px;height:26px;stroke-width:1.8} .bnav-btn.active{color:var(--brand)} .bnav-btn:active{transform:scale(.92)} /* center capture button (camera) */ .bnav-capture{ margin-top:-22px; width:60px;height:60px;border-radius:50%; background:var(--brand-grad);color:#fff; display:flex;align-items:center;justify-content:center; border:4px solid var(--bg); box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.3); transition:transform var(--t-base) var(--ease-spring); } .bnav-capture:active{transform:scale(.92) rotate(-4deg)} .bnav-capture svg{width:28px;height:28px} /* ---------- TOP BAR ---------- */ .topbar{ position:sticky;top:0;z-index:60; display:flex;align-items:center;gap:var(--s-3); height:calc(var(--header-h) + var(--safe-top)); padding:var(--safe-top) var(--s-4) 0; background:var(--bg-overlay); backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg); border-bottom:1px solid var(--line); } .topbar h1{font-size:var(--t-lg);font-weight:var(--w-heavy);letter-spacing:var(--tracking-snug)} .topbar .grow{flex:1} /* ---------- MODAL / SHEET ---------- */ .scrim{ position:fixed;inset:0;z-index:90; background:rgba(15,23,42,.45); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;pointer-events:none; transition:opacity var(--t-base) var(--ease-out); } .scrim.open{opacity:1;pointer-events:auto} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:95; background:var(--bg); border-radius:var(--r-6) var(--r-6) 0 0; box-shadow:var(--shadow-4); padding:var(--s-5) var(--s-5) calc(var(--s-6) + var(--safe-bot)); transform:translateY(100%); transition:transform var(--t-slow) var(--ease-out); max-height:90dvh;overflow-y:auto; } .sheet.open{transform:translateY(0)} .sheet-handle{ width:36px;height:4px;border-radius:2px;background:var(--ink-5); margin:0 auto var(--s-4); } /* ---------- TOAST ---------- */ .toast{ position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-bot) + var(--s-4)); transform:translateX(-50%) translateY(20px); z-index:100; background:var(--ink);color:var(--bg); padding:var(--s-3) var(--s-5); border-radius:var(--r-pill); font-size:var(--t-sm);font-weight:var(--w-bold); box-shadow:var(--shadow-3); opacity:0;pointer-events:none; transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out); } .toast.open{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- SPINNER ---------- */ .spinner{ width:18px;height:18px;border-radius:50%; border:2px solid var(--line-2);border-top-color:var(--brand); animation:spin .7s linear infinite; } .spinner-lg{width:32px;height:32px;border-width:3px} /* ---------- ANIMATIONS ---------- */ @keyframes spin{to{transform:rotate(360deg)}} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.25)}} @keyframes fade-in{from{opacity:0}to{opacity:1}} @keyframes slide-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes slide-down{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}} @keyframes scale-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}} @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} .anim-fade{animation:fade-in var(--t-base) var(--ease-out) both} .anim-up{animation:slide-up var(--t-slow) var(--ease-out) both} .anim-down{animation:slide-down var(--t-slow) var(--ease-out) both} .anim-pop{animation:scale-in var(--t-base) var(--ease-spring) both} .anim-stagger > *{animation:slide-up var(--t-slow) var(--ease-out) both} .anim-stagger > *:nth-child(1){animation-delay:60ms} .anim-stagger > *:nth-child(2){animation-delay:120ms} .anim-stagger > *:nth-child(3){animation-delay:180ms} .anim-stagger > *:nth-child(4){animation-delay:240ms} .anim-stagger > *:nth-child(5){animation-delay:300ms} .anim-stagger > *:nth-child(6){animation-delay:360ms} /* skeleton */ .skel{ background:linear-gradient(90deg,var(--line) 0%,var(--line-2) 50%,var(--line) 100%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:var(--r-2); } /* reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } /* ---------- UTILITIES ---------- */ .hidden{display:none !important} .invisible{visibility:hidden} .relative{position:relative} .absolute{position:absolute} .fixed{position:fixed} .fill{position:absolute;inset:0} .round{border-radius:var(--r-pill)} .no-scroll{overflow:hidden} .cover{object-fit:cover;width:100%;height:100%} .text-brand{color:var(--brand)} .text-ink{color:var(--ink)} .text-mute{color:var(--ink-3)} .text-dim{color:var(--ink-4)} .text-center{text-align:center} .text-right{text-align:right} .bg-brand{background:var(--brand);color:var(--ink-on-brand)} .bg-grad{background:var(--brand-grad);color:var(--ink-on-brand)} .bg-elev{background:var(--bg-elev)} .bg-card{background:var(--bg-card)} /* ---------- SCROLLBAR ---------- */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:var(--ink-4)} /* ---------- LOGO MARK ---------- */ .brand-mark{ display:inline-flex;align-items:center;gap:var(--s-2); font-family:var(--font-display);font-weight:var(--w-black); font-size:var(--t-lg);letter-spacing:-.04em;color:var(--ink); } .brand-mark .dot{ width:28px;height:28px;border-radius:8px; background:var(--brand-grad);color:#fff; display:flex;align-items:center;justify-content:center; font-size:18px;font-weight:var(--w-black); box-shadow:0 4px 12px var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.3); } /* ---------- PWA SAFE-AREA on body ---------- */ @supports(padding:env(safe-area-inset-top)){ .has-safe{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)} } /* ---------- END ---------- */