/* ============================================================================ LinkNest — editorial dark design system (design.md) Palette: ink #1A1714 · surface #211D19 · surface2 #2A2521 text #F3EBDF · muted #B9AD9C · faint #7D7367 · divider #4A4239 accent #6FD7E0 (used sparingly: italics, thin rules, small details) Type: Newsreader (display) · Inter Tight (UI) · JetBrains Mono (labels) ============================================================================ */ :root { --ink:#1A1714; --surface:#211D19; --surface2:#2A2521; --paper:#F3EBDF; --muted:#B9AD9C; --faint:#7D7367; --divider:#4A4239; --accent:#6FD7E0; } ::selection { background:var(--accent); color:var(--ink); } /* Reset — the public profile page does NOT load Tailwind (no Preflight), so the browser's default margin would let the white html background show as a border around the page. Zero it out everywhere. Also restore border-box: without Preflight, .lt-btn's width:100% added its 18px side padding on top of the column width and overflowed the viewport, clipping the buttons on mobile. */ .lt-page, .lt-page *, .lt-page *::before, .lt-page *::after { box-sizing:border-box; } html, body { margin:0; padding:0; } html { -webkit-text-size-adjust:100%; background:#1A1714; } body { letter-spacing:-0.005em; } a { color:inherit; } /* Thin, restrained scrollbar */ *::-webkit-scrollbar { width:10px; height:10px; } *::-webkit-scrollbar-thumb { background:var(--divider); border:3px solid var(--ink); border-radius:0; } *::-webkit-scrollbar-track { background:transparent; } /* ---------------- Editorial primitives ---------------- */ .eyebrow { font-family:'JetBrains Mono', ui-monospace, monospace; text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; font-weight:500; color:var(--faint); } .eyebrow--accent { color:var(--accent); } .display { font-family:'Newsreader', Georgia, serif; line-height:1.04; font-weight:500; } .display em, .accent-i { font-style:italic; color:var(--accent); font-weight:500; } .rule { height:1px; background:var(--divider); border:0; } .rule--accent { height:1px; background:var(--accent); border:0; } /* Numbered editorial index marker */ .idx { font-family:'JetBrains Mono', monospace; color:var(--faint); font-size:.7rem; letter-spacing:.05em; } /* ---------------- Buttons ---------------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:'Inter Tight', system-ui, sans-serif; font-weight:600; font-size:.875rem; line-height:1; padding:.7rem 1.1rem; border:1px solid transparent; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; border-radius:0; text-decoration:none; white-space:nowrap; } .btn:active { transform:translateY(1px); } .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .btn--primary { background:var(--paper); color:var(--ink); } .btn--primary:hover { background:#fff; } .btn--ghost { background:transparent; color:var(--paper); border-color:var(--divider); } .btn--ghost:hover { background:var(--surface2); border-color:var(--faint); } .btn--accent { background:transparent; color:var(--accent); border-color:var(--accent); } .btn--accent:hover { background:var(--accent); color:var(--ink); } .btn--danger { background:transparent; color:#E5894F; border-color:#5a3f30; } .btn--danger:hover { background:#E5894F; color:var(--ink); } .btn--block { width:100%; } .btn--lg { padding:.95rem 1.4rem; font-size:.95rem; } .btn--sm { padding:.45rem .7rem; font-size:.78rem; } /* Icon-only quiet button */ .iconbtn { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; color:var(--faint); background:transparent; border:0; cursor:pointer; transition:color .15s ease, background .15s ease; border-radius:0; } .iconbtn:hover { color:var(--paper); background:var(--surface2); } .iconbtn--danger:hover { color:#E5894F; background:transparent; } /* ---------------- Form fields (underline editorial style) ---------------- */ .field-label { display:block; font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; color:var(--faint); margin-bottom:.5rem; } .field { width:100%; background:transparent; color:var(--paper); border:0; border-bottom:1px solid var(--divider); padding:.55rem .1rem; font-size:.95rem; font-family:'Inter Tight', sans-serif; outline:none; transition:border-color .18s ease; } .field::placeholder { color:var(--faint); } .field:focus { border-bottom-color:var(--accent); } textarea.field { resize:vertical; min-height:4.5rem; line-height:1.5; } select.field { -webkit-appearance:none; appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:1.6rem; } .field--boxed { border:1px solid var(--divider); padding:.6rem .7rem; } .field--boxed:focus { border-color:var(--accent); } /* Box that holds content without card-style elevation: hairline framed, square */ .panel { background:var(--surface); border:1px solid var(--divider); } .panel--plain { background:var(--surface); } /* ---------------- Toggle switch (accent) ---------------- */ .switch { position:relative; display:inline-block; width:38px; height:22px; flex:0 0 auto; } .switch input { opacity:0; width:0; height:0; } .switch .track { position:absolute; inset:0; background:var(--surface2); border:1px solid var(--divider); transition:.2s; border-radius:999px; } .switch .track:before { content:""; position:absolute; height:14px; width:14px; left:3px; top:3px; background:var(--faint); transition:.2s; border-radius:999px; } .switch input:checked + .track { background:rgba(111,215,224,.18); border-color:var(--accent); } .switch input:checked + .track:before { transform:translateX(16px); background:var(--accent); } .switch input:focus-visible + .track { outline:2px solid var(--accent); outline-offset:2px; } /* ---------------- Sidebar nav ---------------- */ .nav-item { display:flex; align-items:center; gap:.7rem; padding:.5rem .8rem; font-size:.875rem; font-weight:500; color:var(--muted); border-left:2px solid transparent; transition:color .15s ease, background .15s ease, border-color .15s ease; text-decoration:none; } .nav-item .ph, .nav-item i { font-size:1.15rem; color:var(--faint); transition:color .15s ease; } .nav-item:hover { color:var(--paper); background:var(--surface); } .nav-item:hover .ph, .nav-item:hover i { color:var(--muted); } .nav-item.is-active { color:var(--paper); background:var(--surface); border-left-color:var(--accent); } .nav-item.is-active .ph, .nav-item.is-active i { color:var(--accent); } /* segmented radio pill (peer pattern) */ .pill-opt { display:inline-block; font-size:.8rem; color:var(--muted); cursor:pointer; border:1px solid var(--divider); padding:.4rem .8rem; transition:border-color .15s, background .15s, color .15s; } .pill-opt:hover { border-color:var(--faint); color:var(--paper); } .peer:checked + .pill-opt { background:var(--accent); color:var(--ink); border-color:var(--accent); } input[type=color] { -webkit-appearance:none; appearance:none; width:34px; height:24px; padding:0; border:1px solid var(--divider); background:transparent; cursor:pointer; vertical-align:middle; } input[type=color]::-webkit-color-swatch-wrapper { padding:2px; } input[type=color]::-webkit-color-swatch { border:0; } /* small badges / chips */ .chip { display:inline-flex; align-items:center; gap:.35rem; font-family:'JetBrains Mono', monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--divider); padding:.18rem .45rem; } .chip--accent { color:var(--accent); border-color:var(--accent); } /* ---------------- Dashboard helpers ---------------- */ .saved { color:var(--accent); font-size:.72rem; font-weight:600; font-family:'JetBrains Mono',monospace; letter-spacing:.08em; } .lt-edit-input { width:100%; padding:.5rem .1rem; border:0; border-bottom:1px solid var(--divider); background:transparent; color:var(--paper); font-size:.875rem; outline:none; margin-bottom:2px; } .lt-edit-input:focus { border-bottom-color:var(--accent); } .flash { animation:fadein .25s ease; } @keyframes fadein { from { opacity:0; transform:translateY(-4px);} to{opacity:1;} } .drag-handle { cursor:grab; touch-action:none; color:var(--faint); } .drag-handle:hover { color:var(--muted); } .drag-handle:active { cursor:grabbing; } .sortable-ghost { opacity:.35; } .brand-svg { display:inline-block; vertical-align:middle; } input[type=checkbox], input[type=radio] { accent-color:var(--accent); width:15px; height:15px; } input[type=file] { color:var(--muted); font-size:.8rem; } input[type=file]::file-selector-button { background:transparent; color:var(--paper); border:1px solid var(--divider); padding:.35rem .7rem; margin-right:.6rem; cursor:pointer; font-family:'Inter Tight',sans-serif; font-size:.78rem; transition:border-color .15s; } input[type=file]::file-selector-button:hover { border-color:var(--accent); } input[type=datetime-local], input[type=date] { color-scheme:dark; } /* ---------------- Motion: reveal on load + scroll ---------------- */ [data-reveal] { opacity:0; transform:translateY(14px); } .reveal-ready [data-reveal] { transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } [data-reveal].is-in { opacity:1; transform:none; } @keyframes rise { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none; } } .rise { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; } /* underline grow link */ .ulink { position:relative; text-decoration:none; color:var(--paper); } .ulink::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); } .ulink:hover::after { transform:scaleX(1); } /* htmx swap fade */ .htmx-swapping { opacity:0; transition:opacity .12s ease; } .htmx-added { opacity:0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } [data-reveal] { opacity:1 !important; transform:none !important; } } /* ---------------------------------------------------------------------------- Public page utility shim. The public profile does NOT load Tailwind (only this stylesheet), so the commerce/capture blocks — which use utility class names — need real definitions. Scoped to .lt-page so the dashboard (where Tailwind is loaded) is never affected. ---------------------------------------------------------------------------- */ .lt-page .flex{display:flex} .lt-page .inline-block{display:inline-block} .lt-page .block{display:block} .lt-page .flex-wrap{flex-wrap:wrap} .lt-page .items-center{align-items:center} .lt-page .justify-between{justify-content:space-between} .lt-page .justify-center{justify-content:center} .lt-page .w-full{width:100%} .lt-page .text-center{text-align:center} .lt-page .whitespace-nowrap{white-space:nowrap} .lt-page .object-cover{object-fit:cover} .lt-page .font-medium{font-weight:500} .lt-page .font-semibold{font-weight:600} .lt-page .font-bold{font-weight:700} .lt-page .text-xs{font-size:.72rem} .lt-page .text-sm{font-size:.875rem} .lt-page .opacity-60{opacity:.6} .lt-page .opacity-70{opacity:.7} .lt-page .opacity-80{opacity:.8} .lt-page .opacity-90{opacity:.9} .lt-page .gap-1{gap:.25rem} .lt-page .gap-1\.5{gap:.375rem} .lt-page .gap-2{gap:.5rem} .lt-page .gap-3{gap:.75rem} .lt-page .space-y-2 > * + *{margin-top:.5rem} .lt-page .mb-1{margin-bottom:.25rem} .lt-page .mb-2{margin-bottom:.5rem} .lt-page .mt-1{margin-top:.25rem} .lt-page .px-3{padding-left:.75rem;padding-right:.75rem} .lt-page .px-4{padding-left:1rem;padding-right:1rem} .lt-page .py-1{padding-top:.25rem;padding-bottom:.25rem} .lt-page .py-2{padding-top:.5rem;padding-bottom:.5rem} .lt-page .py-3{padding-top:.75rem;padding-bottom:.75rem} .lt-page .rounded-lg{border-radius:0} .lt-page .bg-white{background:#fff} .lt-page .text-slate-900{color:#15110e} .lt-page .text-red-300{color:#f0a3a3} .lt-page .border-b{border-bottom:1px solid rgba(255,255,255,.14)} .lt-page .border-white\/10{border-color:rgba(255,255,255,.1)} .lt-page .last\:border-0:last-child{border:0} .lt-page .\!mb-0{margin-bottom:0 !important} /* commerce/capture action buttons inside cards get real padding + square edges */ .lt-page .lt-card button:not(.lt-btn), .lt-page .lt-card a[class*="px-"], .lt-page .lt-card button[class*="px-"]{ border-radius:0; cursor:pointer; line-height:1.1; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:0; } .lt-page .lt-card a{ text-decoration:none; } /* ============================================================================ Public page renderer (.lt-*) — colors come from per-user customization via inline styles on .lt-page. These are structural defaults only. ============================================================================ */ .lt-page { min-height:100dvh; display:flex; flex-direction:column; align-items:center; padding:56px 18px 72px; background-size:cover; background-position:center; position:relative; } .lt-page__bgvideo { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .lt-inner { width:100%; max-width:520px; position:relative; z-index:1; } .lt-avatar { width:92px; height:92px; border-radius:50%; object-fit:cover; margin:0 auto 16px; display:block; border:1px solid rgba(127,127,127,.25); } .lt-avatar--placeholder { display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:600; font-family:'Newsreader',serif; background:rgba(255,255,255,.14); } .lt-name { text-align:center; font-weight:600; font-size:1.45rem; font-family:'Newsreader',Georgia,serif; display:flex; gap:8px; align-items:center; justify-content:center; line-height:1.1; } .lt-bio { text-align:center; opacity:.86; margin:10px auto 22px; font-size:.95rem; max-width:30rem; line-height:1.55; } .lt-verified { width:18px; height:18px; } .lt-socials { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; } .lt-socials a { opacity:.85; transition:transform .15s ease, opacity .15s ease; display:inline-flex; } .lt-socials a:hover { transform:translateY(-2px); opacity:1; } .lt-socials svg, .lt-socials img { width:22px; height:22px; } .lt-blocks { display:flex; flex-direction:column; gap:13px; } .lt-header-block { text-align:center; font-weight:600; margin:18px 0 4px; opacity:.95; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; } .lt-btn { display:flex; align-items:center; gap:12px; width:100%; padding:15px 18px; text-decoration:none; font-weight:600; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; position:relative; word-break:break-word; border:0; cursor:pointer; font:inherit; text-align:left; } .lt-btn:disabled { cursor:default; } .lt-btn:hover { transform:translateY(-1px); filter:brightness(1.06); } .lt-btn__thumb { width:42px; height:42px; border-radius:6px; object-fit:cover; flex:0 0 auto; } .lt-btn__label { flex:1; text-align:center; min-width:0; } .lt-btn__sub { display:block; font-size:.8rem; font-weight:500; opacity:.72; margin-top:3px; } .lt-btn__badge { font-size:.6rem; padding:2px 7px; border-radius:0; background:rgba(0,0,0,.22); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-family:'JetBrains Mono',monospace; } .rad-sharp { border-radius:0; } .rad-rounded { border-radius:12px; } .rad-pill { border-radius:999px; } .bs-filled {} .bs-outline { background:transparent !important; border:2px solid currentColor; } .bs-soft { box-shadow:0 6px 14px rgba(0,0,0,.18); } .bs-hard { box-shadow:5px 5px 0 rgba(0,0,0,.55); } @keyframes lt-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.035);} } @keyframes lt-shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} } @keyframes lt-bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} } @keyframes lt-wiggle { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-2deg);} 75%{transform:rotate(2deg);} } .anim-pulse { animation:lt-pulse 1.8s ease-in-out infinite; } .anim-shake { animation:lt-shake 2.4s ease-in-out infinite; } .anim-bounce { animation:lt-bounce 2s ease-in-out infinite; } .anim-wiggle { animation:lt-wiggle 2s ease-in-out infinite; } .lt-embed { width:100%; border-radius:0; overflow:hidden; background:rgba(0,0,0,.2); } .lt-embed iframe { width:100%; border:0; display:block; } .lt-card { background:rgba(127,127,127,.07); border:1px solid rgba(127,127,127,.24); border-radius:0; padding:16px; } .lt-input { width:100%; padding:11px 13px; border-radius:0; margin-bottom:8px; background:rgba(127,127,127,.1); border:1px solid rgba(127,127,127,.3); color:inherit; } .lt-input::placeholder { color:inherit; opacity:.5; } .lt-foot { text-align:center; margin-top:34px; font-size:.72rem; opacity:.7; font-family:'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; } .lt-foot a { text-decoration:underline; } .lt-overlay { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; padding:20px; } .lt-overlay__card { background:var(--surface); color:var(--paper); border:1px solid var(--divider); border-radius:0; padding:26px; max-width:380px; width:100%; text-align:center; } .lt-progress { height:6px; border-radius:0; background:rgba(255,255,255,.2); overflow:hidden; margin:8px 0; } .lt-progress > div { height:100%; background:currentColor; }