/* ========================================================================================================== NOIR COUTURE (Oct 8, Mark: approved final look = redesign-noir/site-home-FINAL, font option B). Loaded AFTER css/styles.css: re-maps the design tokens and restyles every component. Montserrat for ALL text (self-hosted, OFL), near-black #0C0A06 with a navy tint, ivory text, champagne gold (#E09A3A -> #F0C060) only on primary buttons, verified ticks, prices and small labels, thin gold hairlines. Mobile (<=480px) uses the reduced FINAL text sizes. Same palette in the Mini App (memberprive-miniapp/css/noir.css). ========================================================================================================== */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/montserrat-300-700-normal.woff2) format('woff2')} :root{ --bg:#0C0A06; --bg2:#100D08; --surface:#1A140C; --surface2:#221A10; --surface3:#2A2014; --popover:#1A140C; --field:#1A140C; --line:rgba(224,154,58,.28); --line-soft:rgba(224,154,58,.12); --border:rgba(224,154,58,.28); --border-soft:rgba(224,154,58,.16); --text:#F8F0DC; --muted:#A89F90; --dim:#6E675C; --accent:#E09A3A; --accent2:#F0C060; --gold:#E09A3A; --gold2:#F0C060; --on-gold:#0C0A06; --radius:14px; --radius-lg:14px; --radius-modal:16px; --radius-sm:10px; --shadow:0 18px 50px rgba(0,0,0,.55); --grad:linear-gradient(135deg,#E8B04A,#C47A20); --grad-hover:linear-gradient(135deg,#F0C060,#D08A2A); --gold-grad:var(--grad); --gold-glow:0 0 18px rgba(224,154,58,.45); --image-fade:linear-gradient(to top, rgba(12,10,6,.95), rgba(12,10,6,.3), transparent); --font:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --hairline:linear-gradient(90deg,transparent,#E09A3A,transparent); } html,body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5} body,button,input,select,textarea{font-family:var(--font)} ::selection{background:rgba(224,154,58,.35);color:#fff} .container{max-width:1120px;padding:0 24px} h1,h2,h3,h4{font-family:var(--font);font-weight:600;letter-spacing:-.01em;line-height:1.2} h1{font-size:clamp(28px,4.4vw,52px)} h2{font-size:clamp(20px,2.6vw,30px)} h3{font-size:17px} .muted{color:var(--muted)} .dim{color:var(--dim)} .grad-text,.gold-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .gold-text{font-weight:inherit} .eyebrow{color:var(--gold);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase} .hairline{display:block;height:1px;border:0;background:var(--hairline);opacity:.55;max-width:1120px;margin:0 auto} a.grad-text:hover{opacity:.85} input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--text)} input::placeholder,textarea::placeholder{color:var(--dim)} input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,154,58,.12)} select option{background:var(--surface);color:var(--text)} code{font-size:.92em;color:var(--gold2)} /* test-mode strip: quiet hairline label instead of the amber stripes */ .proto-strip{background:var(--bg);color:var(--gold);border-bottom:1px solid var(--line-soft);font-size:9.5px;font-weight:500;letter-spacing:.18em;padding:5px 10px;text-transform:uppercase} /* header */ .header{background:rgba(12,10,6,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .header .container{height:64px} .logo{font-family:var(--font);font-weight:600;font-size:18px;gap:10px;letter-spacing:0} .logo-mark{width:28px;height:28px;background:var(--grad);box-shadow:0 0 18px rgba(224,154,58,.45);color:#0C0A06;font-size:13px;line-height:1;transform-origin:center center;animation:mp-star-spin 6s linear infinite} .logo-mark::before{content:'★';font-size:13px;color:#0C0A06;line-height:1} @keyframes mp-star-spin{to{transform:rotate(360deg)}} /* star spins even with reduced motion (Mark, Oct 8) */ .logo .lp2{font-size:14px} .nav a{color:var(--muted);font-weight:500;font-size:13px;border-radius:999px;padding:7px 12px} .nav a:hover{color:var(--text);background:transparent} .nav a.active{color:var(--gold2);background:rgba(224,154,58,.08)} .credit-pill{background:transparent;border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--gold2)} .btn-login,button.btn-login{border:1px solid var(--gold);color:var(--gold2);background:transparent;border-radius:999px;padding:8px 16px;font-weight:600;font-size:13px} .btn-login:hover{background:rgba(224,154,58,.1)} .auth-badge{border:1px solid var(--line);background:rgba(224,154,58,.05);font-weight:600} .auth-badge:hover{background:rgba(224,154,58,.1)} .auth-role{color:var(--gold);font-weight:600;letter-spacing:.14em} .auth-menu{background:var(--surface);border:1px solid var(--line);border-radius:14px} .auth-menu-head{border-bottom:1px solid var(--line-soft)} .auth-menu a:hover,.auth-menu button:hover{background:rgba(224,154,58,.08)} .auth-menu .auth-out{color:var(--gold2);font-weight:600;border-top:1px solid var(--line-soft)} .auth-roles{background:var(--bg);border:1px solid var(--line)} .auth-roles button{font-weight:600} .auth-roles button.on{background:var(--grad);color:#0C0A06} /* buttons */ .btn{border-radius:10px;font-weight:600;font-size:13px;padding:11px 20px;letter-spacing:.005em} .btn-primary,.btn-gold{background:var(--grad);color:#0C0A06;box-shadow:none;border:1px solid transparent} .btn-primary:hover,.btn-gold:hover{background:var(--grad-hover);transform:none} .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)} .btn-ghost:hover{border-color:rgba(224,154,58,.5);background:rgba(224,154,58,.06)} .btn-outline{background:var(--surface);border:1px solid var(--line);color:var(--text)} .btn-outline:hover{background:var(--surface2);border-color:rgba(224,154,58,.45)} .btn-danger{background:transparent;color:#E38A7E;border:1px solid rgba(227,138,126,.35)} .btn-sm{padding:8px 14px;font-size:12.5px} .btn-lg{padding:14px 26px;font-size:14px} .btn-pulse{animation:none} .icon-btn{border-radius:10px} .icon-btn.primary{background:var(--grad);color:#0C0A06} /* cards, tags, chips */ .card,.card.glass{background:var(--surface);border:1px solid var(--line);border-radius:14px;-webkit-backdrop-filter:none;backdrop-filter:none} .card-tight{padding:18px} .section{padding:52px 0} .tag{background:var(--surface2);color:var(--muted);font-weight:600;border:1px solid var(--line-soft)} .tag-accent,.tag-gold{background:rgba(224,154,58,.1);color:var(--gold2);border-color:rgba(224,154,58,.3)} .tag-green{background:rgba(122,196,150,.1);color:#9ED3B0;border-color:rgba(122,196,150,.25)} .chip{background:var(--surface);border:1px solid var(--line);color:var(--muted);font-weight:500;font-size:12.5px;border-radius:999px} .chip.on{border-color:var(--gold);color:var(--gold2);background:rgba(224,154,58,.1)} .vip-badge{background:var(--grad);color:#0C0A06} .member-badge{background:rgba(224,154,58,.12);color:var(--gold2);border:1px solid rgba(224,154,58,.3);font-weight:600;letter-spacing:.08em} .verified{color:var(--gold)} .verified svg,.verified .icon-sm{color:#0C0A06} .tick{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-left:4px} .toggle .sw{background:var(--surface2);border:1px solid var(--line)} .toggle.on .sw{background:var(--grad)} .search{background:var(--surface);border:1px solid var(--line);border-radius:12px} .search input{background:transparent;border:0;box-shadow:none} .filters select{background:var(--surface)} .tabs button.on{color:var(--gold2);border-color:var(--gold)} .notice,.note{background:rgba(224,154,58,.05);border:1px solid var(--line)} .notice .ic{background:rgba(224,154,58,.12);color:var(--gold)} .test-banner,.test-note{background:rgba(224,154,58,.05);border-color:var(--line);color:var(--muted)} .kv{border-bottom:1px solid var(--line-soft)} .kv span:first-child{color:var(--muted)} .list-item{border-bottom:1px solid var(--line-soft)} .stat{background:var(--surface);border:1px solid var(--line);border-radius:14px} .stat b{color:var(--gold2);font-weight:600} table th{color:var(--muted);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:11px} td,th{border-color:var(--line-soft)!important} .pos{color:#9ED3B0} .balance-card{background:linear-gradient(160deg,#151729,#1A140C);border:1px solid var(--line)} .balance-card .big{color:var(--gold2);font-weight:600} .pack{background:var(--surface);border:1px solid var(--line)} .pack.popular{border-color:rgba(224,154,58,.6)} .pack .amt,.price,.plan .price{color:var(--gold2);font-weight:600} .coin-lg{background:rgba(224,154,58,.1);color:var(--gold)} .billing-toggle{background:var(--surface);border:1px solid var(--line)} .billing-toggle button.on{background:var(--grad);color:#0C0A06} .billing-toggle .save{color:inherit;opacity:.75} /* plans (mockup: Basic / Advanced with gold "Popular" ribbon, ✦ bullets) */ .plan{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px} .plan.popular{border-color:rgba(224,154,58,.55);box-shadow:0 0 0 1px rgba(224,154,58,.15)} .plan h3{font-size:22px;font-weight:600} .plan .price{font-size:30px;font-weight:600} .plan ul{color:var(--muted);font-size:13px} .plan li svg{color:var(--gold)} .ribbon{background:var(--grad);color:#0C0A06;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:4px 10px} /* ---------- HOME (FINAL mockup) ---------- */ .nhero{padding:56px 0 28px;position:relative} .nhero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .nhero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;margin:14px 0 18px;font-weight:600} .nhero .lead{color:var(--muted);font-size:15px;line-height:1.55;max-width:460px} .nhero .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap} .spotlight{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line);background:var(--surface)} .spotlight img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block} .spotlight .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 22px 20px;background:linear-gradient(transparent,rgba(12,10,6,.92))} .spotlight .cap .eyebrow{margin-bottom:6px} .spotlight .cap h3{font-size:28px;line-height:1.05;font-weight:600} .spotlight .cap p{color:var(--muted);font-size:13px;margin-top:6px} .privacy-cards .card b{display:block;font-size:14px;font-weight:600} .privacy-cards .card b .icon-sm{display:none} .privacy-cards .card b::before{content:'✦ ';color:var(--gold)} #how-chat-works .section-head p{font-size:14px;line-height:1.55} /* creator cards = portrait cards (3:4 photo, thin inner gold frame, name + tick + subtitle) */ .portraits{gap:18px} .ccard{background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:border-color .2s} .ccard:hover{transform:none;border-color:rgba(224,154,58,.5);box-shadow:none} .ccard .cover{height:auto;aspect-ratio:3/4;background-color:var(--surface2);background-position:50% 18%;background-size:cover} .ccard .cover::after{content:'';position:absolute;inset:8px;border:1px solid rgba(230,207,155,.35);border-radius:8px;background:none;pointer-events:none;z-index:3} .ccard .cover.initials-cover{background:radial-gradient(circle at 40% 30%,#1a1d30,#0C0A06)} .ccard .cover .big-initials{font-family:var(--font);font-weight:500;font-size:42px;color:var(--gold2);opacity:1;letter-spacing:0} .ccard .body{padding:12px 14px 14px;gap:0;margin-top:0} .ccard .body .row>.avatar,.ccard .bio-ex,.ccard .view{display:none} .ccard .body b{font-size:15px;font-weight:600} .ccard .meta-line{font-size:12px;color:var(--muted);margin-top:2px} .ccard .verified{vertical-align:-2px} /* ---------- creator profile (site-profile mockup) ---------- */ .pcover{height:260px} .pcover::after{background:linear-gradient(transparent 35%,var(--bg))} .phead h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;line-height:1.05} .phead .psub{color:var(--muted);font-size:13px;margin-top:6px} .phead .avatar{border:3px solid transparent} .pop-av .avatar{box-shadow:0 0 0 3px rgba(224,154,58,.25),0 0 28px rgba(224,154,58,.35)} .phead .avatar,.pop-av .avatar{background-color:var(--bg)} .phead .avatar:not(.initials){background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box} .btn.phead-tip{background:var(--grad);color:#0C0A06} .live-banner{background:rgba(224,154,58,.06);border:1px solid var(--line);color:var(--text)} .paction .btn-outline{background:var(--surface);border-radius:12px;padding:12px;font-size:13.5px} .about-card .eyebrow{margin-bottom:10px} .about-card .bio{white-space:pre-line;color:var(--text);opacity:.9;font-size:14px;line-height:1.6} .about-card .stats-h{margin-top:18px} .about-card .kv{padding:8px 0;font-size:13px;border-bottom:1px solid rgba(224,154,58,.1)} .about-card .kv:last-child{border-bottom:0} .attr-pills .chip{font-size:12px} /* chat buttons: same behaviour (static plane + light streak), Noir gold */ .chat-cta{background:var(--grad);color:#0C0A06;border-radius:14px} .chat-cta.chat-cta-f{border:2px solid #F0C060;box-shadow:inset 0 0 0 1px rgba(110,72,0,.45),inset 0 0 18px 3px rgba(255,241,196,.55);justify-content:center;font-weight:700} .chat-cta .ic{background:rgba(12,10,6,.18)} .chat-cta .ic svg{color:#0C0A06} .chat-cta.chat-cta-f b{font-size:1.05rem;font-weight:700} .btn-tg-f{border-color:#F0C060} /* art tiles / locked content */ .art{border-radius:12px;border:1px solid var(--line-soft)} .art.locked .blurwrap{inset:-14px;border:0} /* stays inside the 16px mobile gutter (no horizontal overflow) */ .price-chip{background:rgba(12,10,6,.7);border-color:rgba(224,154,58,.35);color:var(--gold2)} /* avatars */ .avatar.ring::before{background:conic-gradient(#F0C060,#C47A20,#F0C060)} .avatar.photo img,.avatar img{object-fit:cover} .avatar.fanpic{background:var(--surface2)!important;overflow:hidden;text-shadow:none} .avatar.fanpic img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} /* initials avatars (creators without a photo, fans without a picture): noir disc, champagne initials */ .avatar.initials,.avatar:not(.photo):not(.initials):not(.fanpic){background:linear-gradient(135deg,#E8B04A,#C47A20)!important;color:#0C0A06;text-shadow:none;font-weight:600;box-shadow:inset 0 0 0 1px rgba(224,154,58,.28)} /* modals, sheets, toasts */ .modal-back{background:rgba(5,6,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6)} .modal h3{font-weight:600} .modal .x{color:var(--muted)} .amounts button{background:var(--surface2);border:1px solid var(--line);color:var(--text);font-weight:600} .amounts button.on{background:rgba(224,154,58,.12);border-color:var(--gold);color:var(--gold2)} .summary{background:var(--bg);border:1px solid var(--line-soft)} .summary .total{color:var(--gold2)} .toast{background:var(--surface2);border:1px solid var(--line);color:var(--text)} .field label{color:var(--muted);font-weight:500;font-size:12px;letter-spacing:.04em} .spinner{border-color:rgba(224,154,58,.25);border-top-color:var(--gold)} /* chat (website inbox / studio / admin) */ .chat-shell,.inbox,.convo,.side-panel{background:var(--surface);border-color:var(--line)!important} .inbox-head,.convo-head{border-color:var(--line-soft)!important} .inbox-item{border-color:var(--line-soft)} .inbox-item:hover{background:rgba(224,154,58,.04)} .inbox-item.on{background:rgba(224,154,58,.08)} .unread-dot{background:var(--gold)} .msg.them .bubble{background:var(--surface2);color:var(--text)} .msg.me .bubble{background:var(--grad);color:#0C0A06} .msg .meta{color:var(--dim)} .msg.me .bubble .meta{color:rgba(12,10,6,.6)} .tip-msg{background:rgba(224,154,58,.08);border:1px solid rgba(224,154,58,.3);color:var(--gold2)} .sys-msg{color:var(--muted)} .composer{border-color:var(--line-soft)!important} .composer input{background:var(--bg);border-radius:999px} .sender-label{color:var(--muted)} .fan-loc{color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap} .fan-loc::before{content:'📍';margin-right:2px;font-size:.92em} .fan-who{display:inline-flex;align-items:center;gap:6px;min-width:0} .chat-row{border-color:var(--line-soft)!important} .chat-row.on{background:rgba(224,154,58,.08)!important} .mode-select{background:var(--bg);border-color:var(--line)} .mode-select button.on{background:var(--grad)!important;color:#0C0A06!important} .admin-bar{background:var(--bg2);border-bottom:1px solid var(--line)} .admin-bar a.active,.admin-bar a:hover{color:var(--gold2);background:rgba(224,154,58,.08)} .flow-node{background:var(--surface);border-color:var(--line)} .flow-node .ic{background:rgba(224,154,58,.1)!important;color:var(--gold)!important} .flow-arrow{color:var(--dim)} .bars div{background:var(--grad)} .pu-preview{border-color:var(--line)} .code-box{background:var(--bg);border:1px solid var(--line);color:var(--gold2)} /* Telegram phone preview: keeps Telegram's own look inside; Noir frame + pinned card */ .phone{border-color:#05060a;box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.55)} .tg-pin .fan-me{display:inline-flex;align-items:center;gap:6px;vertical-align:middle} .tg-pin .fan-me .avatar{display:inline-grid} /* account: profile photo + location */ .acc-head{background:var(--surface);border:1px solid var(--line)} .profile-card .acc-head{background:none;border:0;padding:0} /* Oct 12 (Mark): no stray box around the name/badge block inside the merged profile card */ .acc-head .fan-loc{display:inline-block;margin-top:4px} .profile-card .pp-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .profile-card .pp-btns{display:flex;gap:8px;flex-wrap:wrap} .profile-card .pp-hint{font-size:11.5px;color:var(--dim);margin-top:6px} .profile-card .pp-err{color:#E38A7E;font-size:12px;min-height:1em;margin-top:6px} .profile-card .loc-edit{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap} .profile-card .loc-edit input{flex:1;min-width:180px} /* footer, legal, bottom tab bar */ .footer{background:var(--bg);border-top:1px solid var(--line);color:var(--muted)} .footer b{color:var(--text);font-weight:600} .footer-links a:hover{color:var(--gold2)} .footer-note{border-color:var(--line)!important;background:var(--surface)!important} .legal h2,.legal h3{font-weight:600} .agegate{background:rgba(12,10,6,.96)} .agegate .box{background:var(--surface);border:1px solid var(--line)} .bottom-nav a.active{color:var(--gold2)} /* desktop/tablet layout */ @media (max-width:820px){ .nhero-grid{grid-template-columns:1fr 1fr;gap:28px} .portraits.g4{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .bottom-nav{background:rgba(12,10,6,.94);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))} .bottom-nav a{color:var(--dim);font-weight:500;font-size:10px} .bottom-nav a.active{color:var(--gold2)} .phead-actions{width:100%} .phead{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:0} .phead>.grow{min-width:0;flex:1 1 150px} .phead-actions{flex:1 1 100%;margin-top:6px} } @media (max-width:440px){.header:has(.btn-login) .logo .lp2{display:inline}} /* logged out: full MemberPrive.com wordmark like the mockup */ /* MOBILE (<=480px): the FINAL mockup sizes (noir.css home override + font-B.css) */ @media (max-width:480px){ html,body{font-size:13.5px} .container{padding:0 16px} .proto-strip{font-size:8.5px;letter-spacing:.14em;padding:4px 8px} .header .container{height:54px;gap:10px} .logo{font-size:15px;gap:8px}.logo .lp2{font-size:11px} .logo-mark{width:24px;height:24px}.logo-mark::before{font-size:11px} .btn-login,button.btn-login{font-size:11px;padding:7px 12px} .credit-pill{font-size:11.5px;padding:5px 9px} .eyebrow{font-size:9.5px;letter-spacing:.2em} h1{font-size:24px} h2{font-size:19.5px} h3{font-size:15px} .btn{font-size:12px;padding:10px 16px} .btn-lg{padding:11px 16px;font-size:12px} .btn-sm{padding:7px 11px;font-size:11px} .section{padding:30px 0} .section-head{margin-bottom:16px} .section-head p,.section p{font-size:12px!important;line-height:1.5!important} .nhero{padding:28px 0 18px} .nhero-grid{grid-template-columns:1fr;gap:22px} .nhero h1{font-size:24px;line-height:1.2;margin:10px 0 12px} .nhero .lead{font-size:12px;line-height:1.5} .nhero .cta{margin-top:18px;gap:8px} .spotlight{aspect-ratio:4/5} .spotlight .cap h3{font-size:19px} .spotlight .cap p{font-size:12px} .section-head h2,.section h2{font-size:19.5px!important;line-height:1.25} .portraits,.grid.g4.portraits{gap:10px} .ccard .body{padding:10px 11px 12px} .ccard .body b{font-size:13px} .ccard .meta-line{font-size:10px} .privacy-cards{gap:10px!important} .privacy-cards .card{padding:14px} .privacy-cards .card b{font-size:12px} .privacy-cards .card p{font-size:12px} .plan{padding:18px} .plan h3{font-size:17px} .plan .price{font-size:20px} .plan p,.plan ul{font-size:12px} .card{padding:16px} .pcover{height:170px} .phead h2{font-size:22px} .phead .psub{font-size:12px} .chat-cta.chat-cta-f{min-height:58px} .chip{font-size:11.5px;padding:6px 11px} .chat-cta.chat-cta-f b{font-size:15px} .about-card .bio{font-size:13px} .about-card .kv{font-size:12px} .footer{font-size:11px} .tag{font-size:10.5px} .stat b{font-size:17px} .modal h3{font-size:16px} .plan li{font-size:12px;padding:3px 0} .plan .muted,.plan p.small{font-size:12px} .plan .btn{font-size:12px;padding:10px 14px} .billing-toggle button{font-size:12px} .footer p,.footer .small,.footer-links a,.footer-note{font-size:12px!important} .footer .xs,.footer-bottom{font-size:10.5px!important} .small{font-size:12px} .xs{font-size:10.5px} #pricing .small,#pricing .xs{font-size:11px} } /* My chats: single column (no phone column); Preview = overlay */ .chats-layout.chats-single{grid-template-columns:minmax(0,1fr)} .chat-preview{overflow-y:auto;place-items:start center;padding:18px 12px} .chat-preview-in{position:relative;width:100%;max-width:375px;margin:auto} .chat-preview .mock-caption{padding:0 40px} .chat-preview-x{position:absolute;right:0;top:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--text);background:var(--surface)} .chat-preview .phone{height:min(760px,calc(100dvh - 110px));margin:0 auto} /* VIP pill + gold nickname wherever the fan's nickname shows (header badge, menu, pinned card, open-chat modal) */ .auth-menu-head b span:not(.vip-badge){font-size:inherit;color:inherit} .auth-menu-head b span.gold-name{color:transparent} .auth-name .vip-badge,.auth-menu-head .vip-badge,.fan-me-nick .vip-badge{font-size:9px;padding:0 5px;gap:2px;margin-left:2px;line-height:1.5} .auth-name .vip-badge .icon-sm,.fan-me-nick .vip-badge .icon-sm{width:10px;height:10px} .gold-name{background:linear-gradient(135deg,#F0C060,#E09A3A 55%,#F0C060);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700} .auth-name{display:inline-flex;align-items:center;gap:2px;max-width:100%} .auth-name > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .auth-name .vip-badge{flex:none} @media (max-width:520px){.auth-badge{max-width:204px}.auth-badge .auth-name .vip-badge{padding:0 4px;font-size:8.5px}} .tg-pin .info span.vip-badge{color:#0C0A06;font-size:9px} .tg-pin .info span.gold-name{color:transparent;font-size:inherit} /* Pictures always visible (Oct 8, 17:50): portrait covers are empty background-image boxes sized only by aspect-ratio. Browsers/WebViews without aspect-ratio (iOS < 15 WKWebView, old Android WebViews) collapsed them to 0px = no picture. Fallback: intrinsic 3:4 box via padding. */ @supports not (aspect-ratio:3/4){ .ccard .cover{height:0!important;padding-top:133.333%} .ccard .cover > *{position:absolute;inset:0} .ccard .cover .big-initials{display:grid;place-items:center} } /* Oct 8 (Mark): creator video clips (js/avatar-video.js). Poster layer (.mp-still, lazy background) sits above the initials and below the clip + the thin gold frame; the clip fades in once it plays. */ .mp-still{position:absolute;inset:0;background:transparent 50% 18%/cover no-repeat;opacity:0;transition:opacity .25s;z-index:2;pointer-events:none;border-radius:inherit} .mp-still.ok{opacity:1} .ccard .cover .mp-avv{z-index:2} .ccard .cover.has-still .big-initials{visibility:hidden} .spotlight .mp-avv{z-index:0;object-position:50% 18%} /* Oct 8 (Mark): logo wave. Header wordmark letters rise ~3px, breathe to 1.12x and get a soft champagne glow, one after another, on first load and then every 7s (LW_PERIOD in js/app.js). Transform + text-shadow only: no layout shift. Letters are aria-hidden; .lw-sr carries the readable name. Reduced motion: static. */ .lw-word{display:inline} .lw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .lw{display:inline-block;transform-origin:50% 70%;animation:lw-wave 7s infinite both;animation-delay:calc(var(--lw-base,400ms) + var(--i,0) * 65ms);pointer-events:none} @keyframes lw-wave{ 0%{transform:none;text-shadow:0 0 0 rgba(224,154,58,0);animation-timing-function:cubic-bezier(.3,0,.3,1)} 4.5%{transform:translateY(-3px) scale(1.12);text-shadow:0 0 8px var(--lw-glow,rgba(224,154,58,.75));animation-timing-function:cubic-bezier(.4,0,.4,1)} 10%,100%{transform:none;text-shadow:0 0 0 rgba(224,154,58,0)} } @media (prefers-reduced-motion:reduce){.lw{animation:none!important;transform:none!important;text-shadow:none!important}} /* Oct 8 (Mark): remove square gold inner frame around creator clips; clip media to the card. */ .ccard .cover::after{content:none!important;border:0!important;display:none!important} .ccard{position:relative;overflow:hidden!important;border-radius:14px} .ccard .cover{overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)} /* Name / age / location: no black strip — text sits on the video with a light shadow. */ .ccard .body{position:absolute;left:0;right:0;bottom:0;z-index:4;margin:0;padding:26px 12px 12px;background:transparent!important;pointer-events:none} .ccard .body b{color:#F8F0DC;text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 14px rgba(0,0,0,.7)} .ccard .body .meta-line{color:rgba(243,237,226,.92);text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.65)} .ccard .verified{filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))} @media (max-width:480px){.ccard .body{padding:22px 10px 10px}} /* Featured spotlight: drop the black gradient bar under the name. */ .spotlight .cap{background:none!important;background-image:none!important} .spotlight .cap h3,.spotlight .cap p,.spotlight .cap .eyebrow{text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 16px rgba(0,0,0,.75)} .spotlight .cap p{color:rgba(243,237,226,.92)} /* Profile circle: iOS does not clip