/* ── ABSOLUTE OVERFLOW LOCK ══ */
html { overflow-x: hidden !important; overflow-y: auto; width: 100%; max-width: 100vw; }
body { overflow-x: hidden !important; width: 100%; max-width: 100vw; position: relative; }
* { max-width: 100%; }
img, video, iframe, embed { max-width: 100% !important; }
.page { overflow-x: hidden !important; width: 100%; }
/* Exception: photos strip must scroll horizontally */
.ds-photos-strip { overflow-x: auto !important; max-width: 100% !important; }
.ds-photos-strip .album-photo-wrap { max-width: none !important; }
.ds-photos-strip img,
.ds-photos-strip .album-photo { max-width: none !important; width: 100% !important; }
.feed { overflow-x: hidden !important; }
.post { overflow-x: hidden !important; word-break: break-word; }
.post-text { word-break: break-word; overflow-wrap: break-word; }
.cw, .cw.narrow { overflow-x: hidden !important; }
/* ═══════════════════════════════════════
DAMN GINA LOVE — COMPLETE STYLES
═══════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:#000;color:#fff;overflow-x:hidden;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:#111;}::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}
select option{background:#111;color:#fff;}
/* TICKER */
.ticker{background:#111;border-bottom:1px solid #1a1a1a;overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;right:0;z-index:1002;height:calc(28px + env(safe-area-inset-top, 0px));display:flex;align-items:flex-end;}
.ticker-track{display:inline-block;animation:tick 40s linear infinite;}
.ticker-track span{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:#444;margin:0 1.5rem;}
.t-red{color:#ff4444!important;font-weight:700;}
.t-sep{color:#222!important;}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* PUBLIC NAV */
#pubNav{position:fixed;top:calc(28px + env(safe-area-inset-top, 0px));left:0;right:0;z-index:1001;height:56px;background:rgba(0,0,0,0.97);backdrop-filter:blur(20px);border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 16px;}
.nav-logo{font-size:0.95rem;font-weight:900;color:#fff;cursor:pointer;letter-spacing:-0.02em;text-transform:uppercase;flex-shrink:0;}
.nav-links{display:flex;gap:0.2rem;list-style:none;}
.nav-links button{background:none;border:none;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#555;cursor:pointer;padding:0.5rem 0.8rem;border-radius:6px;transition:all 0.2s;}
.nav-links button:hover{color:#fff;background:#1a1a1a;}
.nav-right{display:flex;align-items:center;gap:0.8rem;}
.btn-login{background:none;border:1px solid #333;color:#777;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.45rem 1rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-login:hover{border-color:#fff;color:#fff;}
.btn-join{background:#fff;color:#000;border:none;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;padding:0.5rem 1.2rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-join:hover{background:#ddd;}
.burger{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;}
.mob-nav{display:none;flex-direction:column;position:fixed;top:88px;left:0;right:0;background:#0a0a0a;border-bottom:1px solid #1a1a1a;z-index:998;padding:1rem;gap:0.3rem;}
.mob-nav.open{display:flex;}
.mob-nav button{background:none;border:none;font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#555;cursor:pointer;padding:0.8rem 1rem;text-align:left;border-radius:6px;transition:all 0.2s;}
.mob-nav button:hover{color:#fff;background:#1a1a1a;}
/* MEMBER NAV */
#memNav{position:fixed;top:calc(28px + env(safe-area-inset-top, 0px));left:0;right:0;z-index:1001;height:56px;background:rgba(0,0,0,0.97);backdrop-filter:blur(20px);border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;transition:transform 0.3s ease,opacity 0.3s ease;}
.mem-nav-center{display:flex;align-items:center;gap:0.5rem;}
.mem-nav-right{display:flex;align-items:center;gap:0.8rem;}
.mem-nav-link{background:none;border:none;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#555;cursor:pointer;padding:0.5rem 0.8rem;border-radius:6px;transition:all 0.2s;}
.mem-nav-link:hover{color:#fff;background:#1a1a1a;}
.btn-admin{background:#cc2222;border:none;color:#fff;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;padding:0.45rem 1rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-admin:hover{background:#aa1111;}
.btn-logout{background:none;border:1px solid #333;color:#555;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.45rem 1rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-logout:hover{border-color:#fff;color:#fff;}
/* DROPDOWN */
.dropdown{position:relative;}
.dd-trigger{background:none;border:none;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#fff;cursor:pointer;padding:0.5rem 0.8rem;border-radius:6px;display:flex;align-items:center;gap:0.4rem;transition:all 0.2s;background:#1a1a1a;}
.dd-trigger:hover{background:#222;}
.dd-menu{display:none;position:absolute;top:100%;left:0;background:#111;border:1px solid #222;border-radius:10px;padding:0.4rem;min-width:140px;z-index:100;margin-top:0.4rem;}
.dd-menu.open{display:block;}
.dd-menu button{display:block;width:100%;background:none;border:none;font-family:'Inter',sans-serif;font-size:0.72rem;font-weight:600;color:#888;cursor:pointer;padding:0.6rem 1rem;border-radius:6px;text-align:left;transition:all 0.2s;}
.dd-menu button:hover{background:#1a1a1a;color:#fff;}
/* PAGES */
.page{display:none;min-height:100vh;padding-top:calc(56px + env(safe-area-inset-top, 0px));}
.page.active{display:block;}
/* BUTTONS */
.btn-primary{background:#fff;color:#000;border:none;font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;padding:0.9rem 2rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-primary:hover{background:#ddd;}
.btn-white{background:#fff;color:#000;border:2px solid transparent;font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;padding:0.85rem 1.8rem;border-radius:50px;cursor:pointer;transition:all 0.2s;min-height:48px;display:inline-flex;align-items:center;justify-content:center;}
.btn-white:hover{background:#ddd;}
.btn-white.w100{width:100%;padding:0.9rem;}
.btn-red{background:#cc2222;color:#fff;border:2px solid transparent;font-family:'Inter',sans-serif;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;padding:0.85rem 1.8rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-red:hover{background:#aa1111;}
.btn-red.w100{width:100%;padding:0.9rem;}
.btn-red.sm{padding:0.4rem 1rem;font-size:0.6rem;}
.btn-outline{background:transparent;color:#fff;border:2px solid #444;font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.85rem 1.8rem;border-radius:50px;cursor:pointer;transition:all 0.2s;min-height:48px;display:inline-flex;align-items:center;justify-content:center;}
.btn-outline:hover{border-color:#fff;}
.btn-outline.w100{width:100%;padding:0.9rem;}
.btn-outline-sm{background:transparent;color:#666;border:1px solid #333;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.5rem 1.2rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-outline-sm:hover{border-color:#fff;color:#fff;}
.btn-outline-sm.w100{width:100%;}
.back-btn{background:none;border:none;color:#555;font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;padding:0 0 1.5rem;display:block;transition:color 0.2s;}
.back-btn:hover{color:#fff;}
.w100{width:100%;}
.span2{grid-column:1/-1;}
/* FIELDS */
.field{width:100%;padding:0.85rem 1rem;background:#1a1a1a;border:1.5px solid #222;color:#fff;font-family:'Inter',sans-serif;font-size:0.88rem;border-radius:10px;outline:none;transition:border-color 0.2s;margin-bottom:0.8rem;display:block;}
.field::placeholder{color:#333;}
.field:focus{border-color:#555;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;}
.frow .field{margin-bottom:0;}
.fsec{font-size:0.62rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#cc2222;margin:1.2rem 0 0.6rem;}
.ferr{font-size:0.75rem;color:#ff4444;min-height:1.2rem;margin-bottom:0.5rem;}
.chk-label{display:flex;align-items:center;gap:0.6rem;font-size:0.78rem;color:#666;cursor:pointer;margin-bottom:0.6rem;}
.chk-label input{accent-color:#cc2222;}
/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:2000;align-items:center;justify-content:center;padding:1.5rem;}
.overlay.open{display:flex;}
.modal-box{background:#111;border:1px solid #222;border-radius:16px;padding:2.5rem;width:100%;max-width:440px;position:relative;}
.modal-wide{max-width:540px;}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#555;font-size:1.4rem;cursor:pointer;transition:color 0.2s;line-height:1;}
.modal-close:hover{color:#fff;}
.modal-tabs{display:flex;background:#1a1a1a;border-radius:8px;padding:4px;gap:4px;margin-bottom:1.5rem;}
.mtab{flex:1;padding:0.6rem;background:transparent;border:none;font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#555;cursor:pointer;border-radius:6px;transition:all 0.2s;}
.mtab.active{background:#fff;color:#000;}
.modal-h{font-size:1.3rem;font-weight:900;letter-spacing:-0.02em;text-transform:uppercase;margin-bottom:1.5rem;}
.modal-hint{font-size:0.75rem;color:#444;text-align:center;margin-top:0.5rem;}
.modal-hint span{color:#fff;cursor:pointer;font-weight:700;}
.modal-hint span:hover{text-decoration:underline;}
.edit-scroll{max-height:65vh;overflow-y:auto;padding-right:0.5rem;}
/* PHOTO UPLOAD */
.photo-upload{display:flex;align-items:center;gap:1rem;background:#1a1a1a;border:2px dashed #333;border-radius:10px;padding:1rem;cursor:pointer;margin-bottom:0.8rem;transition:border-color 0.2s;}
.photo-upload:hover{border-color:#555;}
.photo-circle{width:60px;height:60px;border-radius:50%;background:#111;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;color:#444;letter-spacing:0.06em;text-align:center;overflow:hidden;background-size:cover;background-position:center;}
.photo-hint{font-size:0.72rem;color:#444;line-height:1.6;}
.photo-hint span{color:#333;font-size:0.65rem;}
/* FOOTER */
.site-footer{background:#0a0a0a;border-top:1px solid #111;padding:2rem;}
.footer-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-logo{font-size:0.9rem;font-weight:900;text-transform:uppercase;}
.footer-links{display:flex;gap:2rem;list-style:none;}
.footer-links a{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:#333;text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:#fff;}
.footer-copy{width:100%;text-align:center;font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;color:#222;margin-top:0.8rem;}
/* HERO */
.hero{position:relative;min-height:calc(100vh - 88px);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0.35;}
.hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.5) 50%,#000 100%);}
.hero-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem;}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(204,34,34,0.12);border:1px solid rgba(204,34,34,0.35);border-radius:50px;padding:0.4rem 1rem;font-size:0.6rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#ff6666;margin-bottom:1.5rem;}
.ldot{width:7px;height:7px;border-radius:50%;background:#ff4444;animation:blink 1.4s ease infinite;flex-shrink:0;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.hero-cred{font-size:0.68rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:#777;margin-bottom:0.8rem;}
.hero-name{font-weight:900;font-size:clamp(3.5rem,10vw,7.5rem);line-height:0.95;letter-spacing:-0.03em;text-transform:uppercase;margin-bottom:0.8rem;}
.hero-tag{font-size:0.85rem;font-weight:400;color:#888;max-width:420px;line-height:1.65;margin-bottom:2.5rem;}
.hero-btns{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;width:100%;max-width:400px;margin-bottom:3rem;align-items:stretch;}
.hero-btns button,.hero-btns .btn-white,.hero-btns .btn-red,.hero-btns .btn-outline,.hero-btns .btn-hermatch-hero{width:100%;min-height:48px;margin:0;max-width:none;box-sizing:border-box;}
.ring-wrap{position:relative;display:inline-block;cursor:pointer;}
.ring{width:190px;height:190px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;}
.ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(red,orange,yellow,lime,cyan,blue,violet,red);animation:spin 3s linear infinite;z-index:0;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.ring-img{width:174px;height:174px;border-radius:50%;object-fit:cover;object-position:center top;border:4px solid #000;position:relative;z-index:1;display:block;}
.ring-label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);background:#cc2222;color:#fff;font-size:0.58rem;font-weight:900;letter-spacing:0.14em;text-transform:uppercase;padding:0.28rem 1rem;border-radius:50px;white-space:nowrap;z-index:2;}
/* HOME SECTIONS */
.home-section{padding:4rem 2rem;max-width:1100px;margin:0 auto;}
.home-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.home-section-title{font-size:1.1rem;font-weight:900;letter-spacing:-0.01em;text-transform:uppercase;}
.see-all{background:none;border:none;border-bottom:1px solid #333;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#555;cursor:pointer;padding-bottom:2px;transition:all 0.2s;}
.see-all:hover{color:#fff;border-color:#fff;}
.sprev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:#111;}
.sprev-card{background:#000;padding:1.2rem;cursor:pointer;transition:background 0.15s;border:none;text-align:left;width:100%;font-family:'Inter',sans-serif;}
.sprev-card:hover{background:#0d0d0d;}
.sprev-type{font-size:0.55rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#444;margin-bottom:0.4rem;}
.sprev-title{font-size:0.92rem;font-weight:800;color:#fff;margin-bottom:0.25rem;line-height:1.25;}
.sprev-price{font-size:0.8rem;font-weight:700;color:#777;}
/* VIDEO CARDS */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:#111;}
.vcard{background:#000;cursor:pointer;transition:background 0.15s;}
.vcard:hover{background:#0d0d0d;}
.vthumb{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;}
.vbg1{background:linear-gradient(135deg,#1a0808,#330e0e);}
.vbg2{background:linear-gradient(135deg,#08081a,#0e0e33);}
.vbg3{background:linear-gradient(135deg,#0a0e0a,#0e2010);}
.vbg4{background:linear-gradient(135deg,#1a1008,#33200e);}
.vbg5{background:linear-gradient(135deg,#0e0814,#1a0e28);}
.vbg6{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);}
.vlock{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4rem;}
.vlock-icon{font-size:1.5rem;}
.vlock-txt{font-size:0.58rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#aaa;}
.vlock-tier{font-size:0.55rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;background:#cc2222;color:#fff;padding:0.18rem 0.7rem;border-radius:50px;}
.vtag{position:absolute;top:0.6rem;left:0.6rem;font-size:0.55rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.18rem 0.6rem;border-radius:50px;}
.vtag-free{background:rgba(255,255,255,0.12);color:#fff;}
.vtag-mem{background:rgba(204,34,34,0.3);color:#ff9999;}
.vtag-align{background:#cc2222;color:#fff;}
.vdur{position:absolute;bottom:0.5rem;right:0.5rem;background:rgba(0,0,0,0.85);color:#fff;font-size:0.62rem;font-weight:600;padding:0.15rem 0.45rem;border-radius:4px;}
.vinfo{padding:1rem 1.2rem 0.8rem;}
.vtitle{font-size:0.9rem;font-weight:700;line-height:1.3;margin-bottom:0.4rem;}
.vmeta{font-size:0.62rem;color:#444;display:flex;gap:1rem;}
.vunlock{padding:0 1.2rem 1.2rem;}
.btn-unlock{width:100%;padding:0.6rem;background:#cc2222;color:#fff;border:none;font-family:'Inter',sans-serif;font-size:0.65rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:50px;transition:background 0.2s;}
.btn-unlock:hover{background:#aa1111;}
/* PLAYER */
.player-wrap{max-width:1000px;margin:0 auto;padding:2.5rem 2rem 5rem;}
.player-box{width:100%;aspect-ratio:16/9;background:#111;border-radius:8px;overflow:hidden;margin-bottom:1.5rem;}
.player-box iframe{width:100%;height:100%;}
.player-title{font-size:1.3rem;font-weight:900;letter-spacing:-0.02em;margin-bottom:0.5rem;}
.player-meta{font-size:0.72rem;color:#444;}
/* PAGE HEADERS */
.page-hd{padding:3rem 2rem 2rem;border-bottom:1px solid #111;max-width:1100px;margin:0 auto;}
.page-hd.center{text-align:center;}
.page-ey{font-size:0.6rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#444;margin-bottom:0.4rem;}
.page-ti{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-0.02em;text-transform:uppercase;}
.page-sub{font-size:0.78rem;color:#444;margin-top:0.5rem;}
/* CONTENT WRAPPER */
.cw{max-width:1100px;margin:0 auto;padding:2rem 2rem 5rem;}
.cw.narrow{max-width:760px;}
/* FILTER */
.filter-row{max-width:1100px;margin:0 auto;padding:1.2rem 2rem;display:flex;gap:0.5rem;flex-wrap:wrap;}
.fb{background:transparent;border:1px solid #222;color:#444;font-family:'Inter',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.4rem 1rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.fb:hover,.fb.active{background:#fff;color:#000;border-color:#fff;}
/* PODCAST */
.pod-intro{font-size:0.88rem;color:#555;line-height:1.75;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #111;}
.pod-card{background:#000;border-bottom:1px solid #111;padding:1.8rem;}
.pod-ep{font-size:0.6rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#444;margin-bottom:0.5rem;}
.pod-title{font-size:1.1rem;font-weight:900;letter-spacing:-0.01em;margin-bottom:0.5rem;}
.pod-desc{font-size:0.72rem;color:#444;line-height:1.6;margin-bottom:1.2rem;}
.pod-player{width:100%;margin-bottom:1rem;}
.pod-player audio{width:100%;height:44px;filter:invert(1);border-radius:4px;}
.pod-gate{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:8px;padding:1.2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.pod-gate-txt{font-size:0.78rem;color:#555;}
.pod-gate-txt strong{color:#fff;display:block;margin-bottom:0.2rem;}
/* PLANS */
.tiers-wrap{max-width:960px;margin:0 auto;padding:3rem 2rem 4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:#111;}
.tier{background:#000;padding:2.5rem;transition:background 0.15s;}
.tier:hover{background:#0a0a0a;}
.tier-featured{background:#0a0a0a;border-top:2px solid #fff;}
.tier-tag{font-size:0.58rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#444;margin-bottom:1.2rem;display:block;}
.tier-name{font-size:1.8rem;font-weight:900;letter-spacing:-0.02em;text-transform:uppercase;margin-bottom:0.5rem;}
.tier-price{font-size:3rem;font-weight:900;letter-spacing:-0.03em;line-height:1;margin-bottom:0.25rem;}
.tier-price span{font-size:0.82rem;font-weight:500;color:#444;letter-spacing:0;}
.tier-tagline{font-size:0.7rem;font-weight:500;color:#444;margin-bottom:0.4rem;font-style:italic;}
.tier-desc{font-size:0.75rem;color:#555;line-height:1.6;margin-bottom:1.5rem;font-style:italic;}
.tier-hr{border:none;border-top:1px solid #111;margin-bottom:1.5rem;}
.tier-perks{list-style:none;display:flex;flex-direction:column;gap:0.65rem;margin-bottom:2rem;}
.tier-perks li{font-size:0.78rem;font-weight:500;color:#888;padding-left:1rem;position:relative;}
.tier-perks li::before{content:'+';position:absolute;left:0;color:#fff;font-size:0.7rem;}
.faq-wrap{max-width:680px;margin:0 auto;padding:1rem 2rem 5rem;}
.faq-title{font-size:1.3rem;font-weight:900;text-transform:uppercase;letter-spacing:-0.02em;margin-bottom:2rem;}
.faq-item{border-bottom:1px solid #111;padding:1.2rem 0;}
.faq-q{font-size:0.8rem;font-weight:700;color:#fff;margin-bottom:0.5rem;}
.faq-a{font-size:0.75rem;font-weight:400;color:#444;line-height:1.7;}
/* SHOP */
.shop-note-bar{max-width:1100px;margin:1.5rem auto 0;padding:0 2rem;}
.shop-note-bar{background:#0d0d0d;border:1px solid #1a1a1a;border-radius:8px;padding:0.9rem 1.4rem;font-size:0.72rem;color:#444;}
.shop-note-bar span{color:#fff;cursor:pointer;font-weight:700;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:#111;}
.prod-card{background:#000;overflow:hidden;transition:background 0.15s;}
.prod-card:hover{background:#0a0a0a;}
.prod-thumb{height:200px;position:relative;display:flex;align-items:center;justify-content:center;}
.pt1{background:linear-gradient(135deg,#1a0808,#330e0e);}
.pt2{background:linear-gradient(135deg,#080e1a,#0e1a33);}
.pt3{background:linear-gradient(135deg,#0e1008,#1a2010);}
.pt4{background:linear-gradient(135deg,#1a0e08,#331a0e);}
.pt5{background:linear-gradient(135deg,#0e0814,#1a0e2a);}
.pt6{background:linear-gradient(135deg,#1a1a08,#2a2a0e);}
.prod-type-lbl{font-size:0.58rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#555;background:rgba(0,0,0,0.6);padding:0.2rem 0.7rem;border-radius:50px;}
.prod-mem-tag{position:absolute;top:0.8rem;right:0.8rem;background:#cc2222;color:#fff;font-size:0.55rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.2rem 0.65rem;border-radius:50px;}
.prod-overlay-tag{position:absolute;bottom:0.8rem;left:0.8rem;background:rgba(0,0,0,0.6);color:#fff;font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:0.2rem 0.65rem;border-radius:50px;}
.prod-body{padding:1.4rem;}
.prod-name{font-size:1.05rem;font-weight:900;letter-spacing:-0.01em;margin-bottom:0.3rem;}
.prod-desc{font-size:0.72rem;color:#444;line-height:1.6;margin-bottom:1.2rem;}
.prod-foot{display:flex;align-items:center;justify-content:space-between;}
.prod-price{font-size:1.2rem;font-weight:900;}
.btn-buy{background:#fff;color:#000;border:none;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;padding:0.5rem 1.2rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-buy:hover{background:#ddd;}
.prod-coming-soon{position:absolute;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:#555;}
/* LIVE */
.live-wrap{max-width:1100px;margin:0 auto;padding:4rem 2rem 5rem;}
.live-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:start;}
.live-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(204,34,34,0.12);border:1px solid rgba(204,34,34,0.3);border-radius:50px;padding:0.35rem 0.9rem;font-size:0.6rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#ff6666;margin-bottom:1.5rem;}
.live-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-0.02em;text-transform:uppercase;line-height:1;margin-bottom:1rem;}
.live-desc{font-size:0.8rem;color:#444;line-height:1.75;margin-bottom:2rem;}
.live-perks{list-style:none;display:flex;flex-direction:column;gap:0.65rem;margin-bottom:2.5rem;}
.live-perks li{font-size:0.75rem;color:#666;padding-left:1rem;position:relative;}
.live-perks li::before{content:'+';position:absolute;left:0;color:#fff;}
.live-sched{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:1.5rem;}
.sched-title{font-size:0.7rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#444;margin-bottom:1.2rem;}
.sched-item{padding:1rem 0;border-bottom:1px solid #111;}
.sched-item:last-child{border-bottom:none;}
.sched-date{font-size:0.58rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#444;margin-bottom:0.3rem;}
.sched-name{font-size:0.9rem;font-weight:800;margin-bottom:0.4rem;}
.sched-badge{display:inline-block;font-size:0.55rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.18rem 0.65rem;border-radius:50px;background:#1a1a1a;color:#666;}
.sched-badge.red{background:#cc2222;color:#fff;}
/* COMMUNITY */
.readonly-bar{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:8px;padding:1rem 1.2rem;font-size:0.78rem;color:#555;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;}
.gate-box{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:3rem;text-align:center;margin-bottom:1rem;}
.gate-h{font-size:1.2rem;font-weight:900;text-transform:uppercase;letter-spacing:-0.01em;margin-bottom:0.5rem;}
.gate-p{font-size:0.78rem;color:#444;line-height:1.65;margin-bottom:2rem;}
.gate-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.feed{display:flex;flex-direction:column;gap:1px;background:#111;margin-top:1rem;}
.post{background:#000;padding:1.8rem;transition:background 0.15s;}
.post:hover{background:#0a0a0a;}
.post-top{display:flex;align-items:center;gap:0.8rem;margin-bottom:1rem;}
.post-av{width:38px;height:38px;border-radius:50%;background:#1a1a1a;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:800;color:#fff;overflow:hidden;background-size:cover;background-position:center;}
.post-name{font-size:0.8rem;font-weight:700;}
.post-time{font-size:0.62rem;color:#333;}
.post-badge{margin-left:auto;font-size:0.55rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.18rem 0.65rem;border-radius:50px;}
.pb-admin{background:#cc2222;color:#fff;}
.pb-align{background:#1a1a1a;color:#777;}
.pb-slow{background:#111;color:#555;}
.pb-member{background:#0a0a0a;color:#444;}
.post-text{font-size:0.92rem;line-height:1.7;color:#ccc;margin-bottom:0.8rem;}
.post-img{max-width:100%;max-height:400px;width:100%;object-fit:cover;border-radius:8px;margin-bottom:0.8rem;display:block;}
.post-actions{display:flex;gap:1.5rem;}
.post-action{font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#333;cursor:pointer;transition:color 0.2s;background:none;border:none;font-family:'Inter',sans-serif;}
.post-action:hover{color:#fff;}
.post-action.del{color:#550000;}
.post-action.del:hover{color:#cc2222;}
/* Comments */
.comments-section{border-top:1px solid #0a0a0a;margin-top:0.5rem;}
.comment{background:#0a0a0a;padding:0.8rem 1.2rem;display:flex;gap:0.7rem;border-bottom:1px solid #111;}
.comment-av{width:28px;height:28px;border-radius:50%;background:#1a1a1a;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:800;color:#fff;}
.comment-body{flex:1;}
.comment-author{font-size:0.75rem;font-weight:700;color:#ccc;}
.comment-time{font-size:0.6rem;color:#B0B0B0;margin-left:0.5rem;}
.comment-text{font-size:14px;color:#E0E0E0;line-height:1.5;margin-top:0.2rem;}
.comment-reply-btn{font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#B0B0B0;background:none;border:none;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;margin-top:0.3rem;transition:color 0.2s;}
.comment-reply-btn:hover{color:#fff;}
.reply-box{display:flex;gap:0.5rem;margin-top:0.5rem;}
.reply{display:flex;gap:0.6rem;margin-top:0.5rem;padding-left:1rem;border-left:2px solid #1a1a1a;}
.comment-input-row{display:flex;gap:0.5rem;padding:0.8rem 1.2rem;background:#0a0a0a;}
.comment-field{flex:1;padding:0.5rem 0.8rem;background:#111;border:1px solid rgba(255,255,255,0.08);color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:15px;border-radius:50px;outline:none;}
.comment-field::placeholder{color:rgba(255,255,255,0.4);}
.btn-comment{background:#cc2222;color:#fff;border:none;padding:0.5rem 1rem;border-radius:50px;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;cursor:pointer;white-space:nowrap;}
/* COMPOSER */
.composer-card{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:1.2rem;margin-bottom:1rem;}
.composer-row{display:flex;gap:0.8rem;align-items:flex-start;}
.composer-av{width:36px;height:36px;border-radius:50%;background:#1a1a1a;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:800;color:#fff;overflow:hidden;background-size:cover;background-position:center;}
.composer-ta{flex:1;background:#111;border:1px solid #222;color:#fff;font-family:'Inter',sans-serif;font-size:0.88rem;padding:0.8rem 1rem;border-radius:8px;outline:none;resize:vertical;min-height:80px;}
.composer-ta::placeholder{color:#333;}
.composer-preview{margin-top:0.8rem;}
.composer-preview img{max-width:100%;max-height:200px;border-radius:8px;display:block;}
.composer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:0.8rem;gap:0.5rem;}
.composer-media{background:none;border:1px solid #333;color:#555;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.4rem 0.9rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.composer-media:hover{border-color:#fff;color:#fff;}
/* DASHBOARD */
.dash-layout{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem;display:grid;grid-template-columns:280px 1fr 240px;gap:1.5rem;align-items:start;}
.dash-card{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:16px;padding:1.8rem;text-align:center;position:sticky;top:100px;}
.dash-av{width:86px;height:86px;border-radius:50%;background:linear-gradient(135deg,#330e0e,#cc2222);margin:0 auto 0.5rem;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;color:#fff;cursor:pointer;overflow:hidden;background-size:cover;background-position:center;transition:opacity 0.2s;}
.dash-av:hover{opacity:0.8;}
.dash-photo-tip{font-size:0.58rem;color:#333;margin-bottom:0.8rem;letter-spacing:0.1em;text-transform:uppercase;}
.dash-name{font-size:1rem;font-weight:900;letter-spacing:-0.01em;margin-bottom:0.3rem;}
.dash-tier{display:inline-block;font-size:0.58rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.2rem 0.7rem;border-radius:50px;background:#cc2222;color:#fff;margin-bottom:0.8rem;}
.dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#111;border-radius:8px;overflow:hidden;margin-bottom:1rem;}
.dash-stat{background:#111;padding:0.8rem;text-align:center;}
.ds-num{font-size:1.2rem;font-weight:900;}
.ds-label{font-size:0.58rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#444;margin-top:0.2rem;}
.dash-dating{text-align:left;border-top:1px solid #111;padding-top:0.8rem;margin-top:0.5rem;margin-bottom:1rem;}
.dd-item{font-size:0.7rem;color:#555;padding:0.25rem 0;border-bottom:1px solid #0a0a0a;}
.dd-item span{color:#888;font-weight:600;}
.feed-tabs{display:flex;background:#111;border-radius:8px;padding:4px;gap:4px;margin-bottom:0.5rem;}
.ftab{flex:1;padding:0.55rem;background:transparent;border:none;font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#555;cursor:pointer;border-radius:6px;transition:all 0.2s;}
.ftab.active{background:#fff;color:#000;}
.gina-card{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:1.4rem;position:sticky;top:100px;}
.gina-card-title{font-size:0.65rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#444;margin-bottom:1rem;padding-bottom:0.8rem;border-bottom:1px solid #111;}
.gina-item{padding:0.8rem 0;border-bottom:1px solid #111;cursor:pointer;transition:opacity 0.2s;}
.gina-item:hover{opacity:0.8;}
.gina-item:last-of-type{border-bottom:none;}
.gi-label{font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#cc2222;margin-bottom:0.2rem;}
.gi-title{font-size:0.8rem;font-weight:600;color:#ccc;line-height:1.4;}
/* ACCOUNT */
.acc-card{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:2rem;display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;}
.acc-av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#330e0e,#cc2222);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:#fff;overflow:hidden;background-size:cover;background-position:center;}
.acc-name{font-size:1.1rem;font-weight:900;letter-spacing:-0.02em;margin-bottom:0.2rem;}
.acc-email{font-size:0.78rem;color:#555;margin-bottom:0.4rem;}
.acc-tier{display:inline-block;font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.22rem 0.7rem;border-radius:50px;background:#cc2222;color:#fff;}
.acc-sections{display:flex;flex-direction:column;gap:1px;background:#111;}
.acc-sec{background:#000;padding:1.5rem;}
.acc-sec-title{font-size:0.68rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#444;margin-bottom:0.8rem;}
.acc-sec-body{font-size:0.85rem;color:#777;line-height:1.6;}
.dating-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#111;margin-top:0.5rem;}
.dg-item{background:#0a0a0a;padding:0.7rem 0.9rem;}
.dg-label{font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#333;margin-bottom:0.2rem;}
.dg-val{font-size:0.8rem;font-weight:600;color:#aaa;}
/* ADMIN */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:#111;margin-bottom:2rem;}
.admin-stat{background:#0a0a0a;padding:1.5rem;text-align:center;}
.admin-stat-num{font-size:2.5rem;font-weight:900;color:#cc2222;letter-spacing:-0.03em;}
.admin-stat-lbl{font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#444;margin-top:0.3rem;}
.admin-sec-title{font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#444;margin-bottom:1rem;}
.member-list{display:flex;flex-direction:column;gap:1px;background:#111;}
.member-row{background:#000;padding:1rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;transition:background 0.15s;}
.member-row:hover{background:#0a0a0a;}
.member-av{width:36px;height:36px;border-radius:50%;background:#1a1a1a;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;color:#fff;flex-shrink:0;}
.member-info{flex:1;min-width:160px;}
.member-name{font-size:0.88rem;font-weight:700;}
.member-email{font-size:0.7rem;color:#444;}
.member-meta{font-size:0.65rem;color:#333;margin-top:0.2rem;}
.member-tier-badge{flex-shrink:0;}
.member-date{font-size:0.62rem;color:#333;flex-shrink:0;}
.member-actions{display:flex;gap:0.4rem;flex-wrap:wrap;}
.admin-btn{background:#111;border:1px solid #222;color:#555;font-family:'Inter',sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.3rem 0.7rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.admin-btn:hover{border-color:#fff;color:#fff;}
.admin-btn.del{border-color:#330000;color:#992222;}
.admin-btn.del:hover{background:#cc2222;color:#fff;border-color:#cc2222;}
.admin-empty{text-align:center;padding:4rem;color:#333;font-size:0.85rem;}
.loading-txt{color:#333;padding:3rem;text-align:center;font-size:0.85rem;}
/* DONATE */
.center-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 88px);padding:3rem 2rem;}
.donate-card{background:#111;border-radius:20px;padding:3rem 2.5rem;width:100%;max-width:520px;border:1px solid #1a1a1a;}
.donate-title{font-size:1.8rem;font-weight:900;letter-spacing:-0.02em;text-align:center;margin-bottom:0.6rem;}
.donate-sub{font-size:0.78rem;color:#555;text-align:center;line-height:1.65;margin-bottom:2rem;}
.d-toggle{display:grid;grid-template-columns:1fr 1fr;background:#1a1a1a;border-radius:10px;padding:4px;margin-bottom:1rem;gap:4px;}
.dtog{padding:0.6rem;border-radius:8px;font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border:none;transition:all 0.2s;color:#555;background:transparent;}
.dtog.active{background:#fff;color:#000;}
.amt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem;margin-bottom:0.6rem;}
.amt{padding:0.75rem;background:#1a1a1a;border:1.5px solid #222;color:#fff;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:700;border-radius:10px;cursor:pointer;transition:all 0.2s;}
.amt:hover,.amt.selected{background:#fff;color:#000;border-color:#fff;}
.full-amt{width:100%;padding:0.75rem;background:#1a1a1a;border:1.5px solid #222;color:#fff;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:700;border-radius:10px;cursor:pointer;transition:all 0.2s;margin-bottom:1rem;}
.full-amt:hover,.full-amt.selected{background:#fff;color:#000;border-color:#fff;}
.donate-note{font-size:0.65rem;color:#333;text-align:center;margin-top:1rem;}
/* SETUP */
.setup-card{background:#111;border:1px solid #1a1a1a;border-radius:16px;padding:3rem 2.5rem;width:100%;max-width:560px;}
.setup-title{font-size:1.4rem;font-weight:900;letter-spacing:-0.02em;text-transform:uppercase;margin-bottom:0.5rem;}
.setup-sub{font-size:0.82rem;color:#555;margin-bottom:1rem;line-height:1.6;}
/* RESPONSIVE */
@media(max-width:1000px){.dash-layout{grid-template-columns:240px 1fr;}.dash-right{display:none;}}
@media(max-width:900px){.live-grid{grid-template-columns:1fr;gap:2rem;}}
@media(max-width:768px){
#pubNav .nav-links{display:none;}
.burger{display:block;}
.hero-btns{max-width:320px;}
.home-section{padding:2.5rem 1.2rem;}
.donate-card{padding:2rem 1.5rem;}
.amt-grid{grid-template-columns:repeat(3,1fr);}
.footer-in{flex-direction:column;text-align:center;}
.acc-card{flex-direction:column;text-align:center;}
.dating-grid{grid-template-columns:1fr;}
.frow{grid-template-columns:1fr;}
.tiers-wrap{grid-template-columns:1fr;}
.dash-layout{grid-template-columns:1fr;}
.dash-card{position:static;}
.gina-card{position:static;}
}
@media(max-width:480px){
.setup-card{padding:2rem 1.2rem;}
.gate-btns{flex-direction:column;align-items:center;}
}
/* ── MEMBER NAV ── */
#memNav{position:fixed;top:calc(28px + env(safe-area-inset-top, 0px));left:0;right:0;z-index:1001;height:56px;background:rgba(0,0,0,0.97);backdrop-filter:blur(20px);border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 16px;transition:transform 0.3s ease,opacity 0.3s ease;}
.dd-logo-trigger{background:none;border:none;font-size:0.82rem;font-weight:900;color:#fff;cursor:pointer;letter-spacing:-0.02em;text-transform:uppercase;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:0.3rem;padding:0.3rem 0.4rem;border-radius:6px;transition:background 0.2s;white-space:nowrap;flex-shrink:0;}
.dd-logo-trigger:hover{background:#1a1a1a;}
.logo-dd-menu{min-width:160px;}
.mem-center{display:flex;align-items:center;}
.mem-nav-link{background:none;border:none;font-family:'Inter',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#555;cursor:pointer;padding:0.5rem 0.8rem;border-radius:6px;transition:all 0.2s;}
.mem-nav-link:hover{color:#fff;background:#1a1a1a;}
.mem-right{display:flex;align-items:center;gap:6px;margin-left:auto;}
.btn-admin{background:#cc2222;border:none;color:#fff;font-family:'Inter',sans-serif;font-size:0.62rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;padding:0.45rem 1rem;border-radius:50px;cursor:pointer;transition:all 0.2s;}
.btn-admin:hover{background:#aa1111;}
.profile-dd-trigger{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:opacity .2s;}
.profile-dd-trigger:hover{opacity:.8;}
.nav-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#330e0e,#cc2222);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:800;color:#fff;overflow:hidden;background-size:cover;background-position:center;flex-shrink:0;border:2px solid #333;}
.nav-username{display:none;}
.profile-dd-menu{right:0;left:auto;min-width:200px;}
/* ── NAV DROPDOWN ── */
.nav-dropdown{position:relative;}
.dd-menu{
display:none;
position:fixed;
top:calc(28px + env(safe-area-inset-top,0px) + 56px + 8px);
background:#111;
border:1px solid #333;
border-radius:12px;
padding:0.4rem;
min-width:190px;
max-width:calc(100vw - 32px);
z-index:99999;
box-shadow:0 8px 32px rgba(0,0,0,0.8);
}
.dd-menu.open{display:block;}
.profile-dd-menu{right:16px;left:auto;}
.logo-dd-menu{left:16px;right:auto;max-width:220px;}
.dd-menu button{display:block;width:100%;background:none;border:none;font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:600;color:#ccc;cursor:pointer;padding:0.75rem 1rem;border-radius:8px;text-align:left;transition:all 0.2s;white-space:nowrap;}
.dd-menu button:hover,.dd-menu button:active{background:#1a1a1a;color:#fff;}
/* ── PROFILE LAYOUT ── */
.profile-layout{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem;display:grid;grid-template-columns:260px 1fr 220px;gap:1.5rem;align-items:start;}
.prof-left{display:flex;flex-direction:column;gap:1rem;}
.prof-card{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:16px;padding:1.5rem;text-align:center;}
.prof-av{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#330e0e,#cc2222);margin:0 auto 0.4rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:#fff;cursor:pointer;overflow:hidden;background-size:cover;background-position:center;transition:opacity 0.2s;}
.prof-av:hover{opacity:0.8;}
.prof-photo-tip{font-size:0.55rem;color:#333;margin-bottom:0.6rem;letter-spacing:0.08em;text-transform:uppercase;}
.prof-name{font-size:1rem;font-weight:900;letter-spacing:-0.01em;margin-bottom:0.1rem;}
.prof-username{font-size:0.72rem;color:#444;margin-bottom:0.4rem;}
.prof-tier{display:inline-block;font-size:0.58rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.2rem 0.7rem;border-radius:50px;background:#cc2222;color:#fff;margin-bottom:0.8rem;}
.prof-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#111;border-radius:8px;overflow:hidden;margin-bottom:0.8rem;}
.prof-stat{background:#111;padding:0.7rem;text-align:center;}
.ps-num{font-size:1.1rem;font-weight:900;}
.ps-label{font-size:0.55rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#444;margin-top:0.15rem;}
.prof-dating{text-align:left;border-top:1px solid #111;padding-top:0.8rem;margin-top:0.3rem;margin-bottom:0.8rem;}
.prof-dating-item{font-size:0.68rem;color:#555;padding:0.2rem 0;}
.prof-dating-item span{color:#888;font-weight:600;}
.prof-dating-empty{font-size:0.68rem;color:#333;font-style:italic;}
/* ── UPGRADE NUDGE ── */
.upgrade-nudge{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:1.2rem;text-align:center;}
.nudge-text{font-size:0.7rem;font-weight:600;color:#555;margin-bottom:0.8rem;line-height:1.5;}
/* ── GINA PANEL ── */
.prof-right{position:sticky;top:100px;}
.gina-panel{background:#0a0a0a;border:1px solid #1a1a1a;border-radius:12px;padding:1.2rem;}
.gina-panel-title{font-size:0.62rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#444;margin-bottom:0.8rem;padding-bottom:0.6rem;border-bottom:1px solid #111;}
.gina-item{padding:0.7rem 0;border-bottom:1px solid #0a0a0a;cursor:pointer;transition:opacity 0.2s;}
.gina-item:hover{opacity:0.7;}
.gina-item:last-of-type{border-bottom:none;}
.gi-label{font-size:0.55rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#cc2222;margin-bottom:0.2rem;}
.gi-title{font-size:0.78rem;font-weight:600;color:#bbb;line-height:1.4;}
/* ── SETTINGS MODAL EXTRAS ── */
.settings-tier-label{font-size:0.85rem;font-weight:800;color:#fff;margin-bottom:0.3rem;}
.settings-tier-desc{font-size:0.78rem;color:#555;line-height:1.6;}
.username-field-wrap{position:relative;}
.username-hint{font-size:0.65rem;color:#333;margin-top:-0.4rem;margin-bottom:0.8rem;}
/* ── FORM ROW 2 ── */
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;}
.form-row-2 .field{margin-bottom:0;}
/* ── EMPTY FEED ── */
.empty-feed{padding:2rem;text-align:center;color:#333;font-size:0.85rem;}
/* ── RESPONSIVE PROFILE ── */
@media(max-width:1000px){.profile-layout{grid-template-columns:220px 1fr;}.prof-right{display:none;}}
@media(max-width:700px){.profile-layout{grid-template-columns:1fr;}.prof-card{position:static;}.prof-left{position:static;}}
.prof-bio{font-size:0.75rem;color:#555;line-height:1.5;margin-bottom:0.5rem;font-style:italic;text-align:center;}
/* PWA INSTALL BANNER */
#pwa-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:linear-gradient(135deg,#111 0%,#1a1a1a 100%);border-top:1px solid #2a2a2a;padding:1rem 1.5rem;align-items:center;gap:1rem;}
#pwa-banner.show{display:flex;}
.pwa-banner-icon{width:48px;height:48px;border-radius:12px;object-fit:cover;flex-shrink:0;}
.pwa-banner-text{flex:1;}
.pwa-banner-title{font-size:0.85rem;font-weight:800;color:#fff;letter-spacing:0.02em;}
.pwa-banner-sub{font-size:0.7rem;color:#666;margin-top:0.1rem;}
.pwa-banner-btn{background:#fff;color:#000;border:none;font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;padding:0.6rem 1.2rem;border-radius:50px;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.pwa-banner-close{background:none;border:none;color:#444;font-size:1.2rem;cursor:pointer;padding:0.2rem;flex-shrink:0;line-height:1;}
/* IOS INSTALL PROMPT */
#ios-prompt{display:none;position:fixed;bottom:80px;left:1rem;right:1rem;z-index:9999;background:#1a1a1a;border:1px solid #333;border-radius:16px;padding:1.2rem 1.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.8);}
#ios-prompt.show{display:block;}
.ios-prompt-close{position:absolute;top:0.8rem;right:1rem;background:none;border:none;color:#555;font-size:1.1rem;cursor:pointer;}
.ios-prompt-title{font-size:0.9rem;font-weight:800;color:#fff;margin-bottom:0.4rem;}
.ios-prompt-sub{font-size:0.75rem;color:#666;line-height:1.5;margin-bottom:1rem;}
.ios-prompt-steps{display:flex;flex-direction:column;gap:0.6rem;}
.ios-step{display:flex;align-items:center;gap:0.8rem;font-size:0.75rem;color:#aaa;}
.ios-step-num{width:22px;height:22px;background:#222;border:1px solid #333;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:#fff;flex-shrink:0;}
.ios-arrow{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #333;}
/* ── MOBILE NAV FIXES ── */
@media(max-width:480px){
.dd-logo-trigger{font-size:0.72rem;white-space:nowrap;padding:0.3rem 0.4rem;}
#memNav{padding:0 0.8rem;}
.mem-right{gap:0.4rem;}
.nav-username{max-width:70px;font-size:0.62rem;}
.profile-dd-trigger{padding:0.3rem 0.5rem 0.3rem 0.3rem;}
.btn-admin{font-size:0.55rem;padding:0.4rem 0.7rem;}
.mem-nav-link{display:none;}
}
/* ── SAFE AREA / STATUS BAR FIX ── */
/* safe area handled above */
/* ── HIDE CENTER NAV ON MOBILE, SHOW IN DROPDOWN ── */
@media(max-width:600px) {
.mem-center { display: none !important; }
}
.dd-community-link { display: none; }
@media(max-width:600px) {
.dd-community-link { display: block !important; }
}
/* ── SETTINGS FORM SPACING FIX ── */
.edit-scroll .field { margin-bottom: 0.75rem; display: block; width: 100%; }
.edit-scroll .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; }
.edit-scroll .fsec { margin-top: 1.2rem; margin-bottom: 0.6rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #cc2222; }
.edit-scroll .username-hint { font-size: 0.68rem; color: #555; margin-top: -0.5rem; margin-bottom: 0.75rem; }
.edit-scroll .chk-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: #777; margin-bottom: 0.6rem; cursor: pointer; }
@media(max-width:480px) {
.edit-scroll .form-row-2 { grid-template-columns: 1fr; }
}
/* ── PHOTO ALBUM REDESIGN ── */
.prof-album { margin-top: 1.2rem; border-top: 1px solid #1a1a1a; padding-top: 1rem; }
.prof-album-title { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #444; margin-bottom: 0.8rem; text-align: center; }
.prof-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.album-photo { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; border-radius: 2px; transition: opacity 0.2s; }
.album-photo:hover { opacity: 0.8; }
.album-add-btn { width: 100%; aspect-ratio: 1; background: #111; border: 1px dashed #2a2a2a; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; color: #333; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; gap: 0.3rem; }
.album-add-btn:hover { background: #1a1a1a; color: #666; }
.album-add-icon { font-size: 1.2rem; line-height: 1; }
.album-empty { text-align: center; padding: 1rem 0; color: #333; font-size: 0.72rem; }
/* ── IMAGE TIP ── */
.img-tip { font-size: 0.6rem; color: #444; letter-spacing: 0.04em; align-self: center; }
/* ── LIGHTBOX ── */
#albumLightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; align-items: center; justify-content: center; }
#albumLightbox.open { display: flex; }
#albumLightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }
#albumLightboxClose { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; }
/* ── FRIENDS PAGE ── */
#page-friends .page-hd { padding: 2rem 1.5rem 1rem; }
.friends-empty { text-align: center; padding: 4rem 2rem; color: #444; font-size: 0.85rem; line-height: 1.6; }
.friends-empty-title { font-size: 1rem; font-weight: 700; color: #333; margin-bottom: 0.5rem; }
/* ── PWA INSTALL BANNER ── */
#pwa-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:linear-gradient(135deg,#111 0%,#1a1a1a 100%);border-top:1px solid #2a2a2a;padding:1rem 1.5rem;align-items:center;gap:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));}
#pwa-banner.show{display:flex;}
.pwa-banner-icon{width:48px;height:48px;border-radius:12px;object-fit:cover;flex-shrink:0;}
.pwa-banner-text{flex:1;}
.pwa-banner-title{font-size:0.85rem;font-weight:800;color:#fff;letter-spacing:0.02em;}
.pwa-banner-sub{font-size:0.7rem;color:#666;margin-top:0.1rem;}
.pwa-banner-btn{background:#fff;color:#000;border:none;font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;padding:0.6rem 1.2rem;border-radius:50px;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.pwa-banner-close{background:none;border:none;color:#444;font-size:1.2rem;cursor:pointer;padding:0.2rem;flex-shrink:0;line-height:1;}
#ios-prompt{display:none;position:fixed;bottom:80px;left:1rem;right:1rem;z-index:9999;background:#1a1a1a;border:1px solid #333;border-radius:16px;padding:1.2rem 1.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.8);}
#ios-prompt.show{display:block;}
.ios-prompt-close{position:absolute;top:0.8rem;right:1rem;background:none;border:none;color:#555;font-size:1.1rem;cursor:pointer;}
.ios-prompt-title{font-size:0.9rem;font-weight:800;color:#fff;margin-bottom:0.4rem;}
.ios-prompt-sub{font-size:0.75rem;color:#666;line-height:1.5;margin-bottom:1rem;}
.ios-prompt-steps{display:flex;flex-direction:column;gap:0.6rem;}
.ios-step{display:flex;align-items:center;gap:0.8rem;font-size:0.75rem;color:#aaa;}
.ios-step-num{width:22px;height:22px;background:#222;border:1px solid #333;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:#fff;flex-shrink:0;}
.ios-arrow{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #333;}
@media(max-width:480px){
.dd-logo-trigger{font-size:0.72rem;white-space:nowrap;padding:0.3rem 0.4rem;}
#memNav{padding:0 0.8rem;}
.mem-right{gap:0.4rem;}
.nav-username{max-width:70px;font-size:0.62rem;}
.profile-dd-trigger{padding:0.3rem 0.5rem 0.3rem 0.3rem;}
.btn-admin{font-size:0.55rem;padding:0.4rem 0.7rem;}
.mem-nav-link{display:none;}
}
/* ── ALBUM PHOTO WRAP + DELETE ── */
.album-photo-wrap { position: relative; aspect-ratio: 1; }
.album-photo-wrap .album-photo { width: 100%; height: 100%; }
/* Inside the photos strip, sizing is controlled by ds-photos-strip rules */
.ds-photos-strip > .album-photo-wrap { max-width: none !important; }
.album-delete-btn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.75); border: none; color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 0.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.album-photo-wrap:hover .album-delete-btn { opacity: 1; }
@media(max-width:600px) { .album-delete-btn { opacity: 1; } }
/* ── FREE GATE BAR ── */
.free-gate-bar { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.72rem; color: #555; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }
/* ── EMAIL OPT-IN ── */
.optin-label { font-size: 0.72rem; color: #666; line-height: 1.5; margin-bottom: 0.8rem; display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.optin-label input { margin-top: 3px; flex-shrink: 0; accent-color: #cc2222; }
/* ── SAFE AREA OVERRIDES (consolidated) ── */
html { background: #000; }
/* ── COMPOSER PHOTO BUTTON ── */
.composer-media-btn {
background: none;
border: 1px solid #2a2a2a;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.4rem 0.8rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s;
}
.composer-media-btn:hover { border-color: #555; color: #aaa; }
/* ── SAFE AREA TOP FIX (PWA / iPhone) ── */
:root {
--sat: env(safe-area-inset-top, 0px);
}
body::before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--sat);
background: #111;
z-index: 9999;
}
/* ── SCROLL NAV TRANSITION ── */
#memNav {
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ── LES ALIGN NAV LINK ── */
.nav-links li button[onclick*="lesalign"],
.mob-nav button[onclick*="lesalign"] {
color: #cc2222 !important;
font-weight: 800;
}
/* ── CLICKABLE POST NAMES ── */
.clickable-name {
cursor: pointer;
transition: color 0.2s;
}
.clickable-name:hover { color: #cc2222; }
/* ══════════════════════════════════════
COMPACT PROFILE HEADER
══════════════════════════════════════ */
.prof-header-compact {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.2rem 0.8rem;
border-bottom: 1px solid #1a1a1a;
gap: 1rem;
}
.prof-header-left { display: flex; align-items: center; gap: 0.8rem; flex: 1; min-width: 0; }
.prof-av-sm {
width: 60px; height: 60px; border-radius: 50%;
background: linear-gradient(135deg,#330e0e,#cc2222);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; font-weight: 900; color: #fff;
cursor: pointer; flex-shrink: 0;
background-size: cover; background-position: center;
transition: opacity 0.2s;
}
.prof-av-sm:hover { opacity: 0.85; }
.prof-header-info { min-width: 0; }
.prof-header-info .prof-name { font-size: 1rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-header-info .prof-username { font-size: 0.72rem; color: #555; margin-top: 0.1rem; }
.prof-header-info .prof-tier { font-size: 0.62rem; margin-top: 0.2rem; }
.prof-header-right { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.prof-stat-inline { text-align: center; }
.prof-stat-inline .ps-num { font-size: 0.9rem; font-weight: 800; color: #fff; }
.prof-stat-inline .ps-label { font-size: 0.55rem; color: #555; letter-spacing: 0.08em; text-transform: uppercase; }
.btn-outline-xs { background: none; border: 1px solid #333; color: #777; font-family: 'Inter',sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 50px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.btn-outline-xs:hover { border-color: #fff; color: #fff; }
/* PROFILE DETAILS BAR (collapsible) */
.prof-details-bar { padding: 0.8rem 1.2rem; border-bottom: 1px solid #111; display: none; }
.prof-details-bar.open { display: block; }
.prof-details-toggle { display: block; width: 100%; background: none; border: none; border-bottom: 1px solid #111; color: #333; font-family: 'Inter',sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem; cursor: pointer; transition: color 0.2s; text-align: center; }
.prof-details-toggle:hover { color: #666; }
.prof-album-inline { margin-top: 0.8rem; }
/* SHARED POST CARD */
.post-share-label { font-size: 0.68rem; color: #555; margin-bottom: 0.5rem; font-style: italic; }
.shared-post-card { border: 1px solid #222; border-radius: 10px; padding: 0.8rem; margin-bottom: 0.5rem; background: #0d0d0d; }
.shared-post-card .post-top { margin-bottom: 0.5rem; }
.shared-post-card .post-text { font-size: 0.85rem; color: #ccc; }
.shared-post-card .post-img { max-height: 200px; }
/* GLOBAL OVERFLOW FIX */
html, body { overflow-x: hidden !important; max-width: 100vw; }
* { max-width: 100%; box-sizing: border-box; }
.page { overflow-x: hidden; }
/* SQL columns for new features */
/* ── MEMBER PROFILE PAGE ── */
.member-prof-wrap { padding: 1rem; max-width: 680px; margin: 0 auto; }
.back-btn { background: none; border: 1px solid #222; color: #666; font-family: 'Inter',sans-serif; font-size: 0.72rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 50px; cursor: pointer; margin-bottom: 1rem; display: inline-block; transition: all 0.2s; }
.back-btn:hover { border-color: #fff; color: #fff; }
/* ── SHARED POST - clean display ── */
.post-share-label { font-size: 0.68rem; color: #555; margin-bottom: 0.6rem; font-style: italic; }
.shared-post-card { border: 1px solid #1a1a1a; border-radius: 10px; padding: 0.8rem; margin: 0.5rem 0; background: #0a0a0a; overflow: hidden; }
.shared-post-card .post-top { margin-bottom: 0.5rem; }
.shared-post-card .post-text { font-size: 0.85rem; color: #ccc; word-break: break-word; }
.shared-post-card .post-img { max-height: 240px; width: 100%; object-fit: cover; border-radius: 6px; margin-top: 0.5rem; }
/* ── LOGGED IN: ticker + nav both visible ── */
body.logged-in .page {
padding-top: calc(84px + env(safe-area-inset-top, 0px));
}
body.logged-in #memNav {
top: calc(28px + env(safe-area-inset-top, 0px));
}
/* ── TICKER TRACK FIX ── */
/* duplicate removed */
/* duplicate removed */
/* ══════════════════════════════════════
MEET MEMBERS
══════════════════════════════════════ */
.mem-nav-meet { color: #cc2222 !important; font-weight: 800 !important; }
.mem-nav-meet.active { background: #1a0000 !important; color: #ff4444 !important; }
.page-sub { font-size: 0.78rem; color: #555; margin-top: 0.3rem; letter-spacing: 0.02em; }
/* FILTERS */
.meet-filters {
display: flex;
gap: 0.6rem;
padding: 0 1.5rem 1rem;
flex-wrap: wrap;
}
.meet-filter-select {
background: #111;
border: 1px solid #222;
color: #777;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.45rem 0.8rem;
border-radius: 50px;
cursor: pointer;
outline: none;
transition: border-color 0.2s;
}
.meet-filter-select:focus { border-color: #555; color: #fff; }
/* GRID */
.meet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
padding: 0 1.2rem 3rem;
max-width: 900px;
margin: 0 auto;
}
@media(max-width:480px) {
.meet-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; padding: 0 0.8rem 3rem; }
}
/* MEMBER CARD */
.meet-card {
background: #0d0d0d;
border: 1px solid #1a1a1a;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: border-color 0.2s, transform 0.2s;
}
.meet-card:hover { border-color: #333; transform: translateY(-2px); }
.meet-card:active { transform: translateY(0); }
.meet-card-av {
width: 100%;
aspect-ratio: 1;
background: linear-gradient(135deg, #1a0a0a, #330e0e);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 900;
color: #fff;
position: relative;
background-size: cover;
background-position: center top;
}
.meet-card-tier {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
font-size: 0.52rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 50px;
}
.meet-card-body {
padding: 0.8rem;
}
.meet-card-name {
font-size: 0.88rem;
font-weight: 800;
color: #fff;
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.meet-card-details {
font-size: 0.65rem;
color: #555;
margin-bottom: 0.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.meet-card-status {
font-size: 0.65rem;
color: #444;
margin-bottom: 0.2rem;
}
.meet-card-intention {
font-size: 0.62rem;
color: #cc2222;
font-weight: 700;
letter-spacing: 0.03em;
margin-bottom: 0.5rem;
}
.meet-card-btn {
background: none;
border: 1px solid #222;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.35rem 0.7rem;
border-radius: 50px;
cursor: pointer;
width: 100%;
transition: all 0.2s;
text-transform: uppercase;
}
.meet-card:hover .meet-card-btn { border-color: #cc2222; color: #cc2222; }
.meet-empty {
text-align: center;
padding: 3rem 2rem;
color: #333;
font-size: 0.82rem;
line-height: 1.6;
grid-column: 1/-1;
}
/* ══════════════════════════════════════
FOLLOW LIST MODAL
══════════════════════════════════════ */
.follow-list-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.7rem 0;
border-bottom: 1px solid #111;
}
.follow-list-av {
width: 40px; height: 40px; border-radius: 50%;
background: #1a1a1a;
display: flex; align-items: center; justify-content: center;
font-size: 0.75rem; font-weight: 800; color: #fff;
flex-shrink: 0;
background-size: cover; background-position: center;
}
.follow-list-info { flex: 1; min-width: 0; }
.follow-list-name { font-size: 0.82rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-list-username { font-size: 0.65rem; color: #555; margin-top: 0.1rem; }
.follow-list-remove {
background: none;
border: 1px solid #333;
color: #666;
font-family: 'Inter', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 50px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.follow-list-remove:hover { border-color: #cc2222; color: #cc2222; }
.follow-list-empty { text-align: center; padding: 2rem; color: #444; font-size: 0.82rem; }
/* ── CLICKABLE FOLLOW STATS ── */
.prof-stat-inline:hover .ps-num { color: #cc2222; }
.prof-stat-inline:hover .ps-label { color: #cc2222; }
/* ══════════════════════════════════════
PROFILE SETUP OVERLAY
══════════════════════════════════════ */
#profileSetupOverlay .field { margin-bottom: 0.7rem; }
#profileSetupOverlay .fsec { margin-top: 1rem; margin-bottom: 0.5rem; }
/* ══════════════════════════════════════
FRIENDS FEED
══════════════════════════════════════ */
#page-friends .cw { max-width: 680px; margin: 0 auto; padding: 0 1rem 3rem; }
/* ══════════════════════════════════════
CAPTCHA + US NOTICE
══════════════════════════════════════ */
.captcha-wrap {
background: #0d0d0d;
border: 1px solid #222;
border-radius: 10px;
padding: 0.8rem;
margin-bottom: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.captcha-label {
font-size: 0.75rem;
color: #888;
font-weight: 600;
}
.captcha-input {
width: 100px !important;
text-align: center;
}
.us-notice {
font-size: 0.68rem;
color: #555;
text-align: center;
margin-bottom: 0.6rem;
letter-spacing: 0.02em;
}
/* ══════════════════════════════════════
ADMIN VERIFIED BADGE
══════════════════════════════════════ */
.admin-verify-badge {
font-size: 0.6rem;
color: #44cc44;
font-weight: 700;
}
/* ── VERIFIED CHECKMARK ON POSTS ── */
.post-verified { color: #44cc44; font-size: 0.65rem; margin-left: 0.3rem; }
/* ── DATING MODE BUTTON ── */
#datingModeBtn { font-size: 0.6rem !important; padding: 0.35rem 0.6rem !important; }
/* ══════════════════════════════════════
DATING MODE
══════════════════════════════════════ */
.btn-dating-toggle {
background: none;
border: 1px solid #333;
color: #666;
font-family: 'Inter', sans-serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.35rem 0.8rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.btn-dating-toggle:hover { border-color: #9a2a9a; color: #cc44cc; }
/* DATING QUESTIONNAIRE */
.dq-checks { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.dq-checks .chk-label { font-size: 0.75rem; }
/* MEET CARD VERIFIED */
.meet-verified {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background: #44cc44;
color: #000;
width: 20px; height: 20px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 900;
}
/* VERIFIED BADGE on profile */
.prof-verified {
display: inline-block;
color: #44cc44;
font-size: 0.72rem;
font-weight: 700;
margin-left: 0.3rem;
}
/* DATING MODE ACTIVE INDICATOR on profile */
.dating-active-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: #2a0a4a;
border: 1px solid #6a2a9a;
color: #cc88ff;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.2rem 0.6rem;
border-radius: 50px;
margin-top: 0.3rem;
}
/* new layout removed - using original profile-layout */
/* ══════════════════════════════════════
DATING MODE SECTION
══════════════════════════════════════ */
.dating-mode-section {
background: #0a0a14;
border: 1px solid #2a1a4a;
border-radius: 12px;
padding: 0.9rem 1rem;
margin: 0.8rem 0;
text-align: center;
}
.dating-mode-label {
font-size: 0.78rem;
font-weight: 800;
color: #cc88ff;
letter-spacing: 0.05em;
margin-bottom: 0.3rem;
}
.dating-mode-desc {
font-size: 0.65rem;
color: #555;
line-height: 1.4;
margin-bottom: 0.7rem;
}
.dating-mode-btn {
background: none;
border: 1px solid #6a2a9a;
color: #cc88ff;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.5rem 1.2rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
width: 100%;
}
.dating-mode-btn:hover { background: #2a0a4a; }
.dating-mode-btn.active {
background: #4a1a7a;
border-color: #9a44cc;
color: #fff;
}
.dating-mode-btn.active::before { content: '✓ '; }
/* ══════════════════════════════════════
INSTAGRAM-STYLE MOBILE PROFILE
══════════════════════════════════════ */
/* Hide mobile header on desktop, hide desktop layout on mobile */
.prof-mobile-header { display: none; }
.prof-mobile-feed { display: none; }
.prof-desktop-only { display: grid; }
@media(max-width:768px) {
.prof-mobile-header { display: block; }
.prof-mobile-feed { display: block; padding: 0 0.8rem 3rem; }
.prof-desktop-only { display: none !important; }
}
/* ── MOBILE TOP ROW ── */
.prof-mobile-top {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1rem 1rem 0.8rem;
}
.prof-av-circle {
width: 74px; height: 74px; border-radius: 50%;
background: linear-gradient(135deg,#330e0e,#cc2222);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; font-weight: 900; color: #fff;
flex-shrink: 0; cursor: pointer;
background-size: cover; background-position: center;
border: 2px solid #222;
transition: opacity 0.2s;
}
.prof-av-circle:hover { opacity: 0.85; }
/* ── MOBILE STATS ROW ── */
.prof-mobile-stats {
display: flex;
gap: 1.2rem;
flex: 1;
}
.prof-mobile-stat { text-align: center; cursor: pointer; }
.pms-num { font-size: 1.1rem; font-weight: 900; color: #fff; line-height: 1; }
.pms-label { font-size: 0.62rem; color: #666; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.15rem; }
.prof-mobile-stat:hover .pms-num { color: #cc2222; }
.prof-mobile-stat:hover .pms-label { color: #cc2222; }
/* ── MOBILE INFO ── */
.prof-mobile-info {
padding: 0 1rem 0.6rem;
}
.prof-mobile-name {
font-size: 0.95rem; font-weight: 800; color: #fff; line-height: 1.2;
}
.prof-mobile-tier {
margin: 0.2rem 0;
}
.prof-mobile-bio {
font-size: 0.78rem; color: #aaa; line-height: 1.4; margin-top: 0.2rem;
font-style: normal;
}
.prof-mobile-username {
font-size: 0.68rem; color: #555; margin-top: 0.2rem;
}
/* ── MOBILE ACTION BUTTONS ── */
.prof-mobile-actions {
display: flex;
gap: 0.5rem;
padding: 0 1rem 0.8rem;
}
.prof-action-btn {
flex: 1;
background: #1a1a1a;
border: 1px solid #2a2a2a;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 700;
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
text-align: center;
}
.prof-action-btn:hover { background: #222; }
.prof-action-btn.dating-on {
background: #2a0a4a;
border-color: #6a2a9a;
color: #cc88ff;
}
/* ── MOBILE DETAILS COLLAPSIBLE ── */
.prof-mobile-details {
margin: 0 1rem 0.6rem;
border: 1px solid #1a1a1a;
border-radius: 8px;
overflow: hidden;
}
.prof-mobile-details summary {
padding: 0.6rem 0.8rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #444;
cursor: pointer;
list-style: none;
background: #0d0d0d;
}
.prof-mobile-details summary::-webkit-details-marker { display: none; }
.prof-mobile-details summary::after { content: ' ▼'; font-size: 0.55rem; }
.prof-mobile-details[open] summary::after { content: ' ▲'; }
.prof-mobile-details .prof-dating { padding: 0.6rem 0.8rem; }
/* ── INSTAGRAM PHOTOS GRID ── */
.prof-photos-section {
margin: 0 0 0.5rem;
border-top: 1px solid #111;
}
.prof-photos-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.prof-photos-title {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #444;
}
.prof-photos-add {
background: none;
border: none;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 700;
cursor: pointer;
padding: 0.2rem 0.5rem;
border-radius: 4px;
transition: color 0.2s;
}
.prof-photos-add:hover { color: #fff; }
/* THE KEY FIX: tight 3-column photo grid like Facebook/Instagram */
.prof-photos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.prof-photos-grid .album-photo-wrap {
aspect-ratio: 1;
position: relative;
overflow: hidden;
}
.prof-photos-grid .album-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.2s;
}
.prof-photos-grid .album-photo:hover { opacity: 0.85; }
.prof-photos-grid .album-delete-btn {
position: absolute;
top: 4px; right: 4px;
background: rgba(0,0,0,0.7);
border: none; color: #fff;
width: 20px; height: 20px;
border-radius: 50%;
font-size: 0.55rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.2s;
}
.prof-photos-grid .album-photo-wrap:hover .album-delete-btn { opacity: 1; }
@media(max-width:600px) {
.prof-photos-grid .album-delete-btn { opacity: 1; }
}
/* ── UPGRADE NUDGE MOBILE ── */
.prof-mobile-feed .upgrade-nudge { margin: 0.8rem 0; }
/* ══════════════════════════════════════
HERMATCH iOS TOGGLE SWITCH
══════════════════════════════════════ */
.hermatch-toggle-wrap {
display: flex;
align-items: center;
justify-content: space-between;
background: #0d0d0d;
border: 1.5px solid #e8b4c8;
border-radius: 10px;
padding: 0.6rem 0.9rem;
margin: 0.4rem 0;
gap: 0.8rem;
}
.hermatch-toggle-label {
font-size: 0.75rem;
font-weight: 700;
color: #888;
letter-spacing: 0.04em;
white-space: nowrap;
}
.hermatch-toggle {
position: relative;
width: 44px;
height: 26px;
background: #2a2a2a;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background 0.25s ease;
flex-shrink: 0;
padding: 0;
}
.hermatch-toggle.is-on {
background: #0d2e0d;
border: 1px solid #44cc44;
}
.hermatch-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: transform 0.25s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
pointer-events: none;
}
.hermatch-toggle.is-on .hermatch-toggle-thumb {
transform: translateX(18px);
background: #44cc44;
}
/* ══════════════════════════════════════
PROFILE TYPOGRAPHY COHESION FIX
══════════════════════════════════════ */
.prof-mobile-name {
font-size: 1.1rem !important;
font-weight: 900 !important;
color: #fff !important;
letter-spacing: -0.01em;
font-style: normal !important;
}
.prof-mobile-tier {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0.25rem 0;
}
.prof-mobile-bio {
font-size: 0.8rem !important;
color: #bbb !important;
line-height: 1.5 !important;
font-style: normal !important;
margin-top: 0.3rem;
}
.prof-mobile-username {
font-size: 0.72rem !important;
color: #555 !important;
font-style: normal !important;
margin-top: 0.15rem;
}
.prof-mobile-actions .prof-action-btn {
font-size: 0.75rem !important;
font-weight: 700 !important;
}
/* ══════════════════════════════════════
HERMATCH AFAB NOTE
══════════════════════════════════════ */
.hermatch-afab-note {
font-size: 0.72rem;
color: #666;
line-height: 1.5;
background: #0a0a14;
border: 1px solid #1a1a2a;
border-radius: 8px;
padding: 0.7rem 0.9rem;
margin-bottom: 0.8rem;
}
/* ══════════════════════════════════════
ADMIN CLICKABLE MEMBERS
══════════════════════════════════════ */
.member-name { transition: color 0.2s; }
.member-name:hover { color: #cc2222 !important; }
.member-av { transition: opacity 0.2s; }
.member-av:hover { opacity: 0.8; }
/* ══════════════════════════════════════
HERMATCH NAV LABEL
══════════════════════════════════════ */
.mem-nav-hermatch { color: #cc2222 !important; font-weight: 800 !important; }
.mem-nav-hermatch.active { background: #1a0000 !important; color: #ff4444 !important; }
/* ══════════════════════════════════════
NOTIFICATION BELL — display controlled by JS only
══════════════════════════════════════ */
.notif-bell {
position: relative;
}
.notif-dot {
position: absolute;
top: 2px; right: 2px;
width: 8px; height: 8px;
background: #cc2222;
border-radius: 50%;
border: 1px solid #000;
}
/* ══════════════════════════════════════
HERMATCH PROFILE FIXES
══════════════════════════════════════ */
/* Make Edit Profile and HerMatch toggle same height */
.prof-mobile-actions {
display: flex;
gap: 0.5rem;
padding: 0 1rem 0.8rem;
align-items: stretch;
}
.prof-mobile-actions .prof-action-btn {
flex: 1;
height: 38px;
font-size: 0.72rem !important;
}
.prof-mobile-actions .hermatch-toggle-wrap {
flex: 1;
height: 38px;
margin: 0;
padding: 0 0.7rem;
border-radius: 8px;
}
/* HerMatch heart outline */
.hm-heart {
font-size: 0.85rem;
color: #cc2222;
font-style: normal;
}
/* HerMatch page logo */
.hermatch-page-hd { text-align: center; padding: 1.5rem 1rem 0.5rem; }
.hermatch-page-logo { height: 180px; width: 90%; max-width: 380px; object-fit: contain; margin: 1rem auto 1.2rem; display: block; }
/* Bio count */
.bio-count { font-size: 0.62rem; color: #444; text-align: right; margin-top: -0.4rem; margin-bottom: 0.6rem; }
/* Remove @ username on mobile - hide it */
/* ── CLEAN UP ALBUM ADD BOX ── */
.album-add-btn { display: none !important; }
.album-empty { display: none; }
/* ── BELL SVG COLOR ── */
.notif-bell svg { display: block; }
.notif-bell:hover svg { stroke: #ccc; }
/* ── HERMATCH HEART SVG ── */
.hermatch-toggle-label svg { flex-shrink: 0; }
/* ══════════════════════════════════════
HERMATCH RED BUTTON
══════════════════════════════════════ */
.hermatch-action-btn {
flex: 1;
height: 38px;
background: #cc2222;
border: none;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.hermatch-action-btn:hover { background: #aa1111; }
.hermatch-action-btn.hermatch-on {
background: #44cc44;
color: #000;
}
/* ══════════════════════════════════════
FONT CONSISTENCY FIX
Everything uses Inter. Standardize sizes.
══════════════════════════════════════ */
body, button, input, textarea, select {
font-family: 'Inter', sans-serif !important;
}
/* Profile name - large, bold, consistent */
.prof-mobile-name, .prof-name {
font-family: 'Inter', sans-serif !important;
font-weight: 800 !important;
font-style: normal !important;
letter-spacing: -0.01em;
}
/* Bio - normal weight, readable */
.prof-mobile-bio, .prof-bio {
font-family: 'Inter', sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 0.82rem !important;
color: #aaa !important;
line-height: 1.5 !important;
}
/* Tier badge - uppercase, small */
.prof-tier, .prof-mobile-tier {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
}
/* Post text - clean readable */
.post-text {
font-family: 'Inter', sans-serif !important;
font-size: 0.92rem !important;
font-weight: 400 !important;
line-height: 1.55 !important;
color: #e8e8e8 !important;
}
/* Post name */
.post-name {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 0.82rem !important;
}
/* All small labels */
.ps-label, .pms-label, .prof-dating-item span,
.post-time, .post-badge, .feed-tabs .ftab {
font-family: 'Inter', sans-serif !important;
font-style: normal !important;
}
/* Settings fields consistent */
.field {
font-family: 'Inter', sans-serif !important;
font-size: 0.85rem !important;
}
/* ── GET THE APP MODAL ── */
.get-app-section {
background: #0d0d0d;
border: 1px solid #1a1a1a;
border-radius: 10px;
padding: 0.9rem;
text-align: left;
}
.get-app-os {
font-size: 0.72rem;
font-weight: 800;
color: #fff;
letter-spacing: 0.04em;
margin-bottom: 0.6rem;
}
.get-app-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.get-app-step {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.75rem;
color: #aaa;
line-height: 1.4;
}
.gas-num {
width: 20px; height: 20px;
background: #cc2222;
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.62rem; font-weight: 800;
flex-shrink: 0;
margin-top: 1px;
}
/* ── LIGHTBOX FIX ── */
#albumLightbox {
cursor: pointer;
}
#albumLightboxClose {
position: fixed !important;
top: 1.2rem !important;
right: 1.2rem !important;
z-index: 10001 !important;
background: rgba(0,0,0,0.8) !important;
border: 1px solid #444 !important;
color: #fff !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
font-size: 1rem !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#albumLightboxImg {
cursor: default;
pointer-events: none;
}
/* ══════════════════════════════════════
HERMATCH ONE-AT-A-TIME EXPERIENCE
══════════════════════════════════════ */
/* INTRO SCREEN */
.hm-intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - 120px);
padding: 2rem;
text-align: center;
}
.hm-intro-logo {
height: 140px;
width: auto;
max-width: 320px;
object-fit: contain;
margin-bottom: 1.5rem;
}
.hm-intro-sub {
font-size: 0.65rem;
letter-spacing: 0.18em;
color: #444;
text-transform: uppercase;
margin-bottom: 1rem;
}
.hm-intro-tagline {
font-size: 1rem;
color: #888;
line-height: 1.6;
max-width: 280px;
margin-bottom: 2rem;
}
.hm-loading {
font-size: 0.72rem;
color: #555;
letter-spacing: 0.06em;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
/* CARD WRAP */
/* ══ HERMATCH CARD v37 ══ */
.hm-card-wrap {
position: relative;
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: 0.5rem 0.5rem 0.3rem;
height: calc(100vh - 58px);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Card container — perspective for flip */
.hm-card-scene {
flex: 1;
perspective: 1200px;
min-height: 0;
overflow: hidden;
}
/* THE CARD — flips in 3D, fills available height */
.hm-card {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
border-radius: 22px;
}
.hm-card.is-flipped {
transform: rotateY(180deg);
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hm-card-scene { animation: cardIn 0.35s ease; }
.hm-card.swiping-pass { animation: swipeLeft 0.35s ease forwards; }
.hm-card.swiping-connect { animation: swipeRight 0.35s ease forwards; }
@keyframes swipeLeft { to { opacity: 0; transform: translateX(-120%) rotate(-12deg); } }
@keyframes swipeRight { to { opacity: 0; transform: translateX(120%) rotate(12deg); } }
/* FRONT FACE */
.hm-card-front {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 22px;
overflow: hidden;
background: #0f0f0f;
box-shadow: 0 16px 50px rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
}
/* PHOTO — top 62%, face-centered */
.hm-card-photo {
flex: 0 0 62%;
background-size: cover;
background-position: center 20%;
background-color: #111;
background-repeat: no-repeat;
position: relative;
width: 100%;
min-height: 0;
}
.hm-card-photo::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 55px;
background: linear-gradient(to bottom, transparent, #0f0f0f);
}
/* INFO PANEL — bottom 38% */
.hm-card-panel {
flex: 1;
background: #0f0f0f;
padding: 0.8rem 1.2rem 0;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.hm-card-name {
font-size: 1.6rem;
font-weight: 900;
color: #fff;
line-height: 1.05;
margin-bottom: 0.2rem;
letter-spacing: -0.02em;
}
.hm-verified { color: #44cc44; font-size: 1.1rem; }
.hm-card-meta {
font-size: 0.78rem;
color: rgba(255,255,255,0.38);
margin-bottom: 0.38rem;
}
.hm-card-intention {
font-size: 0.72rem;
font-weight: 800;
color: #e8b4c8;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.38rem;
}
.hm-card-about {
font-size: 0.84rem;
color: rgba(255,255,255,0.72);
font-style: italic;
line-height: 1.45;
margin-bottom: 0.42rem;
}
.hm-card-details {
display: flex;
flex-wrap: wrap;
gap: 0.32rem;
margin-bottom: 0.45rem;
}
.hm-detail-pill {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.11);
color: rgba(255,255,255,0.55);
font-size: 0.65rem;
font-weight: 600;
padding: 0.22rem 0.6rem;
border-radius: 50px;
}
/* See More — subtle, above buttons */
.hm-see-more-btn {
background: none;
border: none;
color: rgba(255,255,255,0.22);
font-family: 'Inter', sans-serif;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
width: 100%;
text-align: center;
padding: 0.25rem 0 0.35rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.hm-see-more-btn svg {
width: 9px; height: 9px;
fill: none;
stroke: rgba(255,255,255,0.22);
stroke-width: 2.5;
}
/* Buttons */
.hm-card-actions {
display: flex;
gap: 0.65rem;
margin-bottom: 0.9rem;
}
.hm-btn-pass {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 7px;
background: #cc2222;
border: none;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.78rem; font-weight: 600;
height: 54px; border-radius: 999px;
cursor: pointer; transition: all 0.2s;
}
.hm-btn-pass:hover { background: #b31c1c; }
.hm-btn-connect {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 7px;
background: linear-gradient(135deg, #e8b4c8, #c8956c);
border: none;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.78rem; font-weight: 700;
height: 54px; border-radius: 999px;
cursor: pointer; transition: all 0.2s;
box-shadow: 0 4px 18px rgba(232,180,200,0.25);
}
.hm-btn-connect:hover {
box-shadow: 0 6px 24px rgba(232,180,200,0.45);
transform: translateY(-1px);
}
.hm-btn-connect svg {
width: 14px; height: 14px;
fill: none; stroke: #fff; stroke-width: 2; flex-shrink: 0;
}
/* BACK FACE */
.hm-card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: rotateY(180deg);
border-radius: 22px;
overflow: hidden;
background: #0f0f0f;
box-shadow: 0 16px 50px rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
}
.hm-back-header {
padding: 1rem 1.2rem 0.7rem;
border-bottom: 1px solid #1a1a1a;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.hm-back-name {
font-size: 1.1rem;
font-weight: 900;
color: #fff;
}
.hm-back-close {
background: none;
border: 1px solid #222;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.28rem 0.65rem;
border-radius: 50px;
cursor: pointer;
}
.hm-back-scroll {
flex: 1;
overflow-y: auto;
padding: 0.8rem 1.2rem 0.4rem;
-webkit-overflow-scrolling: touch;
}
.hm-back-scroll::-webkit-scrollbar { width: 2px; }
.hm-back-scroll::-webkit-scrollbar-thumb { background: #222; border-radius: 2px; }
.hm-back-section { margin-bottom: 0.9rem; }
.hm-back-label {
font-size: 0.56rem;
font-weight: 800;
color: #e8b4c8;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 0.25rem;
}
.hm-back-value {
font-size: 0.8rem;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
.hm-back-value.italic { font-style: italic; }
.hm-back-pills {
display: flex; flex-wrap: wrap; gap: 0.28rem;
}
.hm-back-pill {
background: rgba(232,180,200,0.08);
border: 1px solid rgba(232,180,200,0.18);
color: #e8b4c8;
font-size: 0.64rem; font-weight: 600;
padding: 0.2rem 0.6rem; border-radius: 50px;
}
.hm-back-divider { height: 1px; background: #181818; margin: 0.2rem 0 0.9rem; }
.hm-back-actions {
padding: 0.65rem 1.2rem 0.9rem;
border-top: 1px solid #181818;
display: flex; gap: 0.65rem;
flex-shrink: 0;
}
/* Progress */
.hm-progress {
text-align: center;
font-size: 0.56rem;
color: #222;
padding: 0.35rem 0 0;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
}
.hm-match-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.hm-match-box {
text-align: center;
padding: 2.5rem 2rem;
max-width: 340px;
width: 90%;
}
.hm-match-title {
font-size: 2rem;
font-weight: 900;
color: #fff;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.hm-match-sub {
font-size: 0.82rem;
color: #888;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.hm-match-photos {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.hm-match-av {
width: 80px; height: 80px;
border-radius: 50%;
background-size: cover;
background-position: center;
border: 3px solid #cc2222;
background-color: #1a1a1a;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; font-weight: 900; color: #fff;
}
.hm-match-continue {
background: none;
border: 1px solid #333;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 700;
padding: 0.6rem 1.5rem;
border-radius: 50px;
cursor: pointer;
margin-top: 1rem;
transition: all 0.2s;
}
.hm-match-continue:hover { border-color: #555; color: #888; }
/* ALL DONE */
/* ── HERMATCH EMPTY STATE ── */
.hm-empty-state {
position: fixed;
inset: 0;
background: radial-gradient(circle at 50% 40%,
rgba(255,120,90,0.18) 0%,
rgba(120,60,200,0.15) 35%,
#050505 75%
);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
overflow: hidden;
z-index: 10;
animation: hmGlowDrift 12s ease-in-out infinite;
}
@keyframes hmGlowDrift {
0%,100% { background-position: 50% 40%; }
50% { background-position: 48% 45%; }
}
.hm-empty-state::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.25;
animation: hmParticlesFloat 20s linear infinite;
pointer-events: none;
}
@keyframes hmParticlesFloat {
from { transform: translateY(0); }
to { transform: translateY(-40px); }
}
.hm-empty-inner {
position: relative;
z-index: 2;
max-width: 340px;
}
.hm-empty-logo img {
width: 44px;
margin-bottom: 18px;
filter: drop-shadow(0 0 10px rgba(255,180,160,0.4));
animation: hmHeartFloat 4s ease-in-out infinite;
}
@keyframes hmHeartFloat {
0%,100% {
transform: translateY(0);
filter: drop-shadow(0 0 10px rgba(255,180,160,0.4));
}
50% {
transform: translateY(-4px);
filter: drop-shadow(0 0 18px rgba(255,180,160,0.7));
}
}
.hm-empty-inner h1 {
font-size: 28px;
font-weight: 600;
color: #f5e9e2;
margin-bottom: 12px;
font-family: 'Inter', sans-serif;
}
.hm-empty-sub {
font-size: 15px;
line-height: 1.5;
color: rgba(255,255,255,0.7);
margin-bottom: 28px;
font-family: 'Inter', sans-serif;
}
.hm-empty-actions {
display: flex;
flex-direction: column;
gap: 14px;
}
.hm-btn {
height: 56px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: transform 0.25s ease;
font-family: 'Inter', sans-serif;
}
.hm-btn:active {
transform: scale(0.97);
}
.hm-btn-primary {
background: linear-gradient(135deg, #ff7a7a, #b23a48);
color: #fff;
box-shadow:
0 6px 24px rgba(255,90,90,0.45),
0 0 40px rgba(255,120,120,0.25);
animation: hmButtonPulse 3.2s ease-in-out infinite;
}
.hm-btn-primary:hover { transform: scale(1.03); }
.hm-btn-secondary {
background: linear-gradient(135deg, #8a5cff, #c86dd7);
color: #fff;
box-shadow:
0 6px 24px rgba(150,100,255,0.4),
0 0 35px rgba(180,120,255,0.25);
animation: hmButtonPulse 3.2s ease-in-out infinite;
animation-delay: 1.6s;
}
@keyframes hmButtonPulse {
0%,100% {
box-shadow:
0 6px 24px rgba(255,90,90,0.45),
0 0 30px rgba(255,120,120,0.25);
}
50% {
box-shadow:
0 8px 32px rgba(255,90,90,0.6),
0 0 50px rgba(255,120,120,0.45);
}
}
.hm-btn-outline {
background: transparent;
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hm-btn-outline:hover {
border-color: rgba(255,255,255,0.5);
}
/* ══════════════════════════════════════
HERMATCH LANDING PAGE — CONVERSION
══════════════════════════════════════ */
.hml-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.hml-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hml-hero-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
}
.hml-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.62);
}
.hml-hero-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 1.5rem 4rem;
width: 100%;
}
.hml-logo {
height: 100px;
width: auto;
max-width: 280px;
object-fit: contain;
margin-bottom: 2rem;
}
.hml-headline {
font-size: 2.4rem;
font-weight: 900;
color: #fff;
line-height: 1.15;
letter-spacing: -0.03em;
margin-bottom: 1rem;
max-width: 340px;
}
.hml-sub-headline {
font-size: 0.88rem;
color: #888;
line-height: 1.6;
max-width: 300px;
margin-bottom: 2.5rem;
}
.hml-cta-btn {
background: linear-gradient(135deg, #e8b4c8, #f5d0e0);
border: none;
color: #1a0a0f;
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1rem 2.5rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 1rem;
}
.hml-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(232,180,200,0.3); }
.hml-cta-btn.sm { font-size: 0.78rem; padding: 0.8rem 1.8rem; }
.hml-social-proof {
font-size: 0.68rem;
color: #444;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* SECTION LABEL */
.hml-section-label {
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #e8b4c8;
text-align: center;
margin-bottom: 2rem;
}
/* HOW IT WORKS */
.hml-how {
padding: 4rem 1.5rem;
max-width: 480px;
margin: 0 auto;
}
.hml-steps { display: flex; flex-direction: column; gap: 2rem; }
.hml-step { display: flex; gap: 1.2rem; align-items: flex-start; }
.hml-step-num {
font-size: 2rem;
font-weight: 900;
color: #e8b4c8;
line-height: 1;
flex-shrink: 0;
width: 40px;
opacity: 0.6;
}
.hml-step-title {
font-size: 0.92rem;
font-weight: 800;
color: #fff;
margin-bottom: 0.4rem;
}
.hml-step-desc {
font-size: 0.78rem;
color: #666;
line-height: 1.6;
}
/* CARD PREVIEW */
.hml-preview-section {
padding: 4rem 1.5rem;
background: #050505;
}
.hml-card-mock {
position: relative;
max-width: 320px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
background: #111;
box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.hml-mock-photo {
height: 200px;
background: linear-gradient(135deg, #1a0a0f, #3a0a1f);
}
.hml-mock-content {
padding: 1.2rem;
}
.hml-mock-name { font-size: 1.2rem; font-weight: 900; color: #fff; }
.hml-mock-meta { font-size: 0.68rem; color: #666; margin: 0.2rem 0 0.6rem; }
.hml-mock-intention {
font-size: 0.62rem;
font-weight: 800;
color: #e8b4c8;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.hml-mock-quote {
font-size: 0.8rem;
color: #aaa;
font-style: italic;
line-height: 1.5;
margin-bottom: 0.8rem;
}
.hml-mock-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hml-pill {
background: #1a1a1a;
border: 1px solid #2a2a2a;
color: #666;
font-size: 0.62rem;
padding: 0.2rem 0.6rem;
border-radius: 50px;
}
.hml-mock-actions { display: flex; gap: 0.6rem; }
.hml-mock-pass {
flex: 1; background: #1a1a1a; border: 1px solid #2a2a2a;
color: #555; font-family: 'Inter', sans-serif; font-size: 0.75rem;
font-weight: 700; padding: 0.7rem; border-radius: 10px; cursor: pointer;
}
.hml-mock-connect {
flex: 2; background: linear-gradient(135deg, #e8b4c8, #f5d0e0);
border: none; color: #1a0a0f; font-family: 'Inter', sans-serif;
font-size: 0.75rem; font-weight: 800; padding: 0.7rem;
border-radius: 10px; cursor: pointer;
}
.hml-mock-blur {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
.hml-mock-blur-text {
font-size: 0.82rem;
color: rgba(255,255,255,0.8);
font-weight: 700;
text-align: center;
}
/* WHY HERMATCH */
.hml-why {
padding: 4rem 1.5rem;
max-width: 480px;
margin: 0 auto;
}
.hml-why-items { display: flex; flex-direction: column; gap: 2rem; }
.hml-why-title {
font-size: 1rem;
font-weight: 800;
color: #fff;
margin-bottom: 0.4rem;
}
.hml-why-desc {
font-size: 0.78rem;
color: #666;
line-height: 1.6;
}
/* PLANS */
.hml-plans {
padding: 4rem 1.2rem;
background: #050505;
}
.hml-plan-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
max-width: 500px;
margin: 0 auto;
}
@media(max-width:440px) { .hml-plan-cards { grid-template-columns: 1fr; } }
.hml-plan {
background: #0d0d0d;
border: 1px solid #1a1a1a;
border-radius: 16px;
padding: 1.5rem 1rem;
}
.hml-plan.featured {
border-color: #e8b4c8;
background: #0d0a0b;
}
.hml-plan-badge {
font-size: 0.52rem;
font-weight: 800;
letter-spacing: 0.12em;
color: #e8b4c8;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.hml-plan-name { font-size: 1rem; font-weight: 900; color: #fff; margin-bottom: 0.3rem; }
.hml-plan-price { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 0.5rem; }
.hml-plan-price span { font-size: 0.8rem; color: #555; font-weight: 400; }
.hml-plan-desc { font-size: 0.68rem; color: #555; line-height: 1.5; margin-bottom: 1rem; }
.hml-plan-features { margin-bottom: 1.2rem; }
.hml-pf { font-size: 0.68rem; color: #aaa; padding: 0.2rem 0; border-bottom: 1px solid #111; }
.hml-pf.muted { color: #333; }
.hml-plan-btn {
width: 100%;
background: #1a1a1a;
border: 1px solid #2a2a2a;
color: #888;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.7rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
}
.hml-plan-btn.primary {
background: linear-gradient(135deg, #e8b4c8, #f5d0e0);
border: none;
color: #1a0a0f;
}
/* FINAL CTA */
.hml-final-cta {
padding: 5rem 1.5rem;
text-align: center;
background: radial-gradient(ellipse at bottom, #1a0a10 0%, #000 60%);
}
.hml-final-headline {
font-size: 2rem;
font-weight: 900;
color: #fff;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 2rem;
}
.hml-final-sub {
font-size: 0.6rem;
color: #333;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 1rem;
}
/* HOME PAGE HERMATCH BUTTON */
.btn-hermatch-hero {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 360px;
margin: 0.6rem auto 0;
background: linear-gradient(135deg, #e8b4c8, #f5d0e0);
border: 2px solid #cc2222;
color: #1a0a0f;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.85rem 1.8rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
min-height: 48px;
}
.btn-hermatch-hero:hover { transform: translateY(-1px); }
/* ── HERMATCH LANDING DESKTOP FIX ── */
@media(min-width: 768px) {
.hml-hero {
min-height: 80vh;
padding: 5rem 2rem;
}
.hml-headline { font-size: 3.5rem; max-width: 600px; }
.hml-sub-headline { font-size: 1rem; max-width: 440px; }
.hml-how {
max-width: 960px;
padding: 5rem 2rem;
}
.hml-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.hml-step { flex-direction: column; }
.hml-preview-section { padding: 5rem 2rem; }
.hml-card-mock { max-width: 400px; }
.hml-why {
max-width: 960px;
padding: 5rem 2rem;
}
.hml-why-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.hml-plans { padding: 5rem 2rem; }
.hml-plan-cards {
max-width: 700px;
gap: 1.5rem;
}
.hml-final-cta { padding: 7rem 2rem; }
.hml-final-headline { font-size: 3rem; }
/* Hero buttons on desktop */
.hero-btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
max-width: 500px;
margin: 0 auto;
}
.btn-hermatch-hero.span2 {
grid-column: span 2;
}
.btn-white.span2 {
grid-column: span 2;
}
}
/* ── HERMATCH HOW-IT-WORKS BG ── */
.hml-how-bg {
position: relative;
overflow: hidden;
}
.hml-how-bg-img-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.hml-how-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.hml-how-bg-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.78);
}
.hml-how-content {
position: relative;
z-index: 1;
max-width: 480px;
margin: 0 auto;
width: 100%;
}
/* ── DIRECT MESSAGES PAGE ── */
#page-dms {
background: #0e0e0e;
min-height: 100vh;
flex-direction: column;
display: none !important;
}
#page-dms.active {
display: flex !important;
}
.dm-header {
background: #111;
border-bottom: 1px solid #222;
padding: 1.1rem 1.2rem;
display: flex;
align-items: center;
gap: 0.8rem;
position: sticky;
top: 0;
z-index: 10;
}
.dm-header-back {
background: none;
border: none;
color: #cc2222;
font-size: 1.5rem;
cursor: pointer;
padding: 0 0.4rem;
line-height: 1;
}
.dm-header-title {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #fff;
flex: 1;
}
.dm-inbox-list {
flex: 1;
overflow-y: auto;
padding: 0;
}
.dm-thread-item {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.2rem;
border-bottom: 1px solid #1a1a1a;
cursor: pointer;
transition: background 0.15s;
text-decoration: none;
color: inherit;
}
.dm-thread-item:hover, .dm-thread-item.active { background: #181818; }
.dm-thread-avatar {
width: 46px; height: 46px;
border-radius: 50%;
background: #2a2a2a;
overflow: hidden;
flex-shrink: 0;
}
.dm-thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-thread-avatar-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; font-weight: 700; color: #cc2222;
background: #1e0a0a;
}
.dm-thread-info { flex: 1; min-width: 0; }
.dm-thread-name {
font-weight: 600; font-size: 0.95rem; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-thread-preview {
font-size: 0.82rem; color: #666;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 0.2rem;
}
.dm-thread-time { font-size: 0.75rem; color: #444; flex-shrink: 0; }
.dm-unread-dot {
width: 9px; height: 9px;
border-radius: 50%; background: #cc2222;
flex-shrink: 0;
}
.dm-empty {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 3rem 2rem;
gap: 0.8rem;
}
.dm-empty-icon { font-size: 2.5rem; opacity: 0.3; }
.dm-empty-title { font-size: 1rem; font-weight: 600; color: #888; }
.dm-empty-sub { font-size: 0.85rem; color: #555; }
/* CHAT WINDOW */
#page-dm-chat {
background: #0e0e0e;
flex-direction: column;
height: 100vh;
display: none !important;
}
#page-dm-chat.active {
display: flex !important;
}
.dm-chat-header {
background: #111;
border-bottom: 1px solid #222;
padding: 0.9rem 1.2rem;
display: flex;
align-items: center;
gap: 0.8rem;
flex-shrink: 0;
}
.dm-chat-header-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: #1e0a0a;
overflow: hidden;
flex-shrink: 0;
}
.dm-chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-chat-header-name {
font-weight: 700; font-size: 1rem; color: #fff; flex: 1;
}
.dm-messages {
flex: 1;
overflow-y: auto;
padding: 1rem 1rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.dm-msg {
max-width: 78%;
padding: 0.6rem 0.9rem;
border-radius: 18px;
font-size: 0.92rem;
line-height: 1.45;
word-break: break-word;
}
.dm-msg.mine {
align-self: flex-end;
background: #cc2222;
color: #fff;
border-bottom-right-radius: 4px;
}
.dm-msg.theirs {
align-self: flex-start;
background: #1e1e1e;
color: #eee;
border-bottom-left-radius: 4px;
}
.dm-msg-time {
font-size: 0.7rem;
color: #555;
margin-top: 0.2rem;
text-align: right;
}
.dm-msg.theirs + .dm-msg-time { text-align: left; }
.dm-compose {
display: flex;
align-items: flex-end;
gap: 0.6rem;
padding: 0.8rem 1rem;
background: #111;
border-top: 1px solid #1a1a1a;
flex-shrink: 0;
}
.dm-compose-input {
flex: 1;
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 20px;
padding: 0.65rem 1rem;
color: #fff;
font-size: 0.92rem;
font-family: 'Inter', sans-serif;
resize: none;
max-height: 120px;
outline: none;
transition: border-color 0.2s;
min-height: 40px;
line-height: 1.4;
}
.dm-compose-input:focus { border-color: #cc2222; }
.dm-compose-input::placeholder { color: #444; }
.dm-send-btn {
width: 40px; height: 40px;
border-radius: 50%;
background: #cc2222;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: opacity 0.2s;
}
.dm-send-btn:hover { opacity: 0.85; }
.dm-send-btn svg { width: 18px; height: 18px; fill: #fff; }
.dm-gate {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 3rem 2rem; gap: 1rem;
}
.dm-gate-title { font-size: 1.2rem; font-weight: 700; color: #fff; }
.dm-gate-sub { font-size: 0.9rem; color: #888; }
.dm-date-label {
text-align: center;
font-size: 0.72rem; color: #444;
margin: 0.6rem 0;
text-transform: uppercase; letter-spacing: 0.05em;
}
/* ── NAV ICON BUTTONS — DM, Search, Bell — all identical ── */
.nav-icon-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
flex-shrink: 0;
border-radius: 6px;
transition: background 0.2s;
position: relative;
}
.nav-icon-btn:hover { background: rgba(255,255,255,0.08); }
.nav-icon-btn svg {
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
stroke: #fff;
fill: none;
stroke-width: 2.0;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-dm-badge {
position: absolute; top: 1px; right: 1px;
width: 8px; height: 8px;
background: #cc2222; border-radius: 50%;
display: none;
}
.nav-dm-badge.show { display: block; }
/* ── GIF BUTTON IN COMMENTS ── */
.btn-comment.gif-btn {
background: transparent;
border: 1px solid #333;
color: #888;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0 0.5rem;
border-radius: 4px;
height: 28px;
flex-shrink: 0;
}
.btn-comment.gif-btn:hover { border-color: #cc2222; color: #cc2222; }
/* ── BIRTH YEAR LABEL ── */
.field-label { font-size: 0.7rem; color: #666; display: block; margin-bottom: 0.3rem; }
/* ══ HERMATCH LANDING v35 FIXES ══ */
/* Hero image — full width, no clipping on desktop */
.hml-hero-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
display: block;
}
@media (min-width: 768px) {
.hml-hero-bg-img {
object-fit: cover;
object-position: center 20%;
width: 100%;
height: 100%;
}
.hml-hero { min-height: 100vh; }
}
/* How It Works — plain black, no background image */
.hml-how {
padding: 4rem 1.5rem;
max-width: 480px;
margin: 0 auto;
background: transparent;
position: relative;
z-index: 1;
}
/* Remove old hml-how-bg styles if inherited */
.hml-how-bg { background: transparent; }
.hml-how-bg .hml-how-bg-img-wrap { display: none; }
/* Mock card — replace blur with clean visible preview */
.hml-mock-photo {
height: 220px;
background: linear-gradient(160deg, #1a0510 0%, #2d0a1a 50%, #1a0510 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.hml-mock-avatar-ring {
width: 90px;
height: 90px;
border-radius: 50%;
border: 2px solid rgba(232,180,200,0.4);
display: flex;
align-items: center;
justify-content: center;
}
.hml-mock-avatar-inner {
width: 74px;
height: 74px;
border-radius: 50%;
background: linear-gradient(135deg, #3a0a1f, #5a1030);
border: 1px solid rgba(232,180,200,0.2);
}
.hml-mock-badge {
color: #44cc88;
font-size: 0.7rem;
}
/* Remove blur overlay entirely */
.hml-mock-blur { display: none; }
/* Replace with clean bottom bar */
.hml-mock-cta-bar {
padding: 1rem 1.2rem;
border-top: 1px solid #1a1a1a;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: #0a0a0a;
}
.hml-mock-cta-text {
font-size: 0.72rem;
color: #555;
letter-spacing: 0.02em;
}
/* Divider photo — full bleed, hands photo, between Why and Pricing */
.hml-divider-photo {
position: relative;
height: 320px;
overflow: hidden;
}
@media (min-width: 768px) {
.hml-divider-photo { height: 440px; }
}
.hml-divider-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
.hml-divider-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
}
.hml-divider-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.6rem;
font-weight: 900;
color: #fff;
line-height: 1.3;
letter-spacing: -0.02em;
padding: 2rem;
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
@media (min-width: 768px) {
.hml-divider-text { font-size: 2.4rem; }
}
/* ══ SUBSCRIPTION MANAGEMENT PAGE ══ */
.sub-current-card {
background: #111;
border: 1px solid #1e1e1e;
border-radius: 16px;
padding: 1.4rem 1.3rem;
margin-bottom: 0.5rem;
}
.sub-current-tier {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #555;
margin-bottom: 0.4rem;
}
.sub-current-name {
font-size: 1.4rem;
font-weight: 900;
color: #fff;
margin-bottom: 0.2rem;
}
.sub-current-price {
font-size: 0.78rem;
color: #555;
margin-bottom: 0.8rem;
}
.sub-current-price span { color: #333; }
.sub-status-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3rem 0.8rem;
border-radius: 50px;
}
.sub-status-badge.active { background: rgba(68,204,136,0.1); color: #44cc88; border: 1px solid rgba(68,204,136,0.2); }
.sub-status-badge.free { background: rgba(255,255,255,0.05); color: #444; border: 1px solid #222; }
.sub-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sub-plan-card {
background: #0f0f0f;
border: 1px solid #1e1e1e;
border-radius: 16px;
padding: 1.2rem 1.3rem;
margin-bottom: 1rem;
}
.sub-plan-card.featured {
border-color: #cc2222;
background: #0d0808;
}
.sub-plan-card.hm {
border-color: rgba(232,180,200,0.25);
background: #0d0a0d;
}
.sub-plan-badge {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #cc2222;
margin-bottom: 0.7rem;
}
.sub-plan-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1rem;
}
.sub-plan-name {
font-size: 1.1rem;
font-weight: 900;
color: #fff;
margin-bottom: 0.15rem;
}
.sub-plan-price {
font-size: 1.4rem;
font-weight: 900;
color: #fff;
}
.sub-plan-price span { font-size: 0.72rem; color: #555; font-weight: 400; }
.sub-plan-tag {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.65rem;
border-radius: 50px;
background: rgba(255,255,255,0.06);
color: #555;
border: 1px solid #222;
white-space: nowrap;
}
.sub-plan-tag.gold { background: rgba(200,149,108,0.1); color: #c8956c; border-color: rgba(200,149,108,0.2); }
.sub-plan-tag.pink { background: rgba(232,180,200,0.1); color: #e8b4c8; border-color: rgba(232,180,200,0.2); }
.sub-plan-perks {
list-style: none;
margin-bottom: 1.2rem;
}
.sub-plan-perks li {
font-size: 0.78rem;
color: #666;
padding: 0.3rem 0;
border-bottom: 1px solid #111;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sub-plan-perks li::before {
content: '✓';
color: #44cc88;
font-size: 0.65rem;
font-weight: 900;
flex-shrink: 0;
}
.sub-proration-note {
font-size: 0.7rem;
color: #c8956c;
background: rgba(200,149,108,0.08);
border: 1px solid rgba(200,149,108,0.15);
border-radius: 8px;
padding: 0.6rem 0.8rem;
margin-bottom: 0.8rem;
line-height: 1.5;
}
.sub-billing-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid #111;
cursor: pointer;
transition: opacity 0.15s;
}
.sub-billing-row:hover { opacity: 0.7; }
.sub-billing-label { font-size: 0.85rem; font-weight: 600; color: #ccc; margin-bottom: 0.15rem; }
.sub-billing-sub { font-size: 0.68rem; color: #444; }
.sub-billing-arrow { font-size: 1.3rem; color: #333; }
.sub-billing-row.danger .sub-billing-label { color: #cc4444; }
/* ══ HERMATCH PAGE — fill viewport, no scroll gap ══ */
#page-hermatch {
height: 100vh;
overflow: hidden;
display: none !important;
flex-direction: column;
padding-top: calc(56px + env(safe-area-inset-top, 0px));
}
#page-hermatch.active { display: flex !important; }
.hm-card-wrap {
flex: 1;
overflow: hidden;
}
/* ══ LOGGED-IN BUTTON SHAPE: rounded rectangle — inside app pages only ══ */
/* Excludes home page hero buttons */
.logged-in #page-profile .btn-primary,
.logged-in #page-profile .btn-red,
.logged-in #page-profile .btn-white,
.logged-in #page-profile .btn-outline,
.logged-in #page-community .btn-primary,
.logged-in #page-community .btn-red,
.logged-in #page-community .btn-white,
.logged-in #page-admin .btn-primary,
.logged-in #page-admin .btn-red,
.logged-in #page-subscription .btn-primary,
.logged-in #page-subscription .btn-red,
.logged-in #page-subscription .btn-white,
.logged-in #page-settings .btn-primary,
.logged-in #page-settings .btn-red,
.logged-in #page-member .btn-primary,
.logged-in #page-member .btn-red,
.logged-in #page-member .btn-white,
.logged-in #page-friends .btn-primary,
.logged-in #page-friends .btn-red,
.logged-in #page-newmembers .btn-primary,
.logged-in #page-newmembers .btn-red {
border-radius: 10px !important;
}
/* Keep pill shape for small tag/badge elements */
.logged-in .tier-tag,
.logged-in .vlock-tier,
.logged-in .pb-align,
.logged-in .pb-slow,
.logged-in .pb-mem,
.logged-in .pb-admin,
.logged-in .hm-detail-pill,
.logged-in .hm-pill,
.logged-in .hm-back-pill,
.logged-in .sub-status-badge,
.logged-in .sub-plan-tag,
.logged-in .tag,
.logged-in .notif-dot,
.logged-in .nav-dm-badge {
border-radius: 50px !important;
}
/* ══ COMPOSER FOOTER — same-size icon buttons ══ */
.composer-foot {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.8rem;
flex-wrap: nowrap;
}
.composer-icon-btn {
background: none;
border: 1.5px solid #2a2a2a;
color: #fff;
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
}
.composer-icon-btn:hover { border-color: #555; }
.composer-icon-btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: #fff;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.composer-gif-btn {
background: none;
border: 1.5px solid #2a2a2a;
color: #fff;
height: 36px;
padding: 0 0.75rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
flex-shrink: 0;
}
.composer-gif-btn:hover { border-color: #555; }
.composer-post-btn {
margin-left: auto;
background: #cc2222;
border: none;
color: #fff;
height: 36px;
padding: 0 1.1rem;
border-radius: 8px;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: all 0.2s;
flex-shrink: 0;
}
.composer-post-btn:hover { background: #aa1111; }
/* ══ ALBUM PHOTOS — no visible X by default ══ */
.album-delete-btn {
position: absolute;
top: 4px; right: 4px;
background: rgba(0,0,0,0.8);
border: none;
color: #fff;
width: 22px; height: 22px;
border-radius: 50%;
font-size: 0.6rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0 !important;
transition: opacity 0.2s;
pointer-events: none;
}
.album-photo-wrap.selected .album-delete-btn {
opacity: 1 !important;
pointer-events: all;
}
/* On tap/click — show delete via selected state */
.album-photo-wrap.selected .album-photo {
outline: 2px solid #cc2222;
outline-offset: -2px;
}
/* Override mobile always-visible rule */
@media(max-width: 600px) {
.album-delete-btn { opacity: 0 !important; pointer-events: none; }
.album-photo-wrap.selected .album-delete-btn { opacity: 1 !important; pointer-events: all; }
}
.prof-photos-grid .album-delete-btn {
opacity: 0 !important;
pointer-events: none;
}
.prof-photos-grid .album-photo-wrap.selected .album-delete-btn {
opacity: 1 !important;
pointer-events: all;
}
@media(max-width: 600px) {
.prof-photos-grid .album-delete-btn { opacity: 0 !important; pointer-events: none; }
.prof-photos-grid .album-photo-wrap.selected .album-delete-btn { opacity: 1 !important; pointer-events: all; }
}
/* ══ TERMS PAGE ══ */
.terms-section { margin-bottom: 1.8rem; }
.terms-heading {
font-size: 0.7rem;
font-weight: 800;
color: #e8b4c8;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
/* ══ HERMATCH QUESTIONNAIRE MODAL — pink section headers ══ */
.hm-modal .fsec {
color: #e8b4c8 !important;
}
.hm-modal .hermatch-afab-note {
border-left: 2px solid #e8b4c8;
padding-left: 0.8rem;
color: #888;
font-size: 0.72rem;
}
/* ══ COMPOSER POST BUTTON — smaller ══ */
.composer-post-btn {
height: 32px !important;
padding: 0 0.9rem !important;
font-size: 0.68rem !important;
}
.composer-icon-btn {
width: 32px !important;
height: 32px !important;
}
.composer-gif-btn {
height: 32px !important;
padding: 0 0.6rem !important;
font-size: 0.62rem !important;
}
/* ══ HERMATCH GATE — gate message for non-members ══ */
.meet-gate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
gap: 1rem;
flex: 1;
}
/* ══ FAQ PAGE ══ */
.faq-category {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #cc2222;
margin: 2rem 0 0.8rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #1a1a1a;
}
.faq-category:first-child { margin-top: 0.5rem; }
.faq-item { border-bottom: 1px solid #111; }
.faq-q {
width: 100%;
background: none;
border: none;
color: #ccc;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 600;
text-align: left;
padding: 1rem 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
transition: color 0.2s;
line-height: 1.4;
}
.faq-q:hover { color: #fff; }
.faq-item.open .faq-q { color: #fff; }
.faq-arrow {
font-size: 1.2rem;
color: #cc2222;
flex-shrink: 0;
font-weight: 300;
line-height: 1;
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
font-size: 0.8rem;
color: #666;
line-height: 1.75;
padding: 0 0 0 0;
}
.faq-item.open .faq-a { padding-bottom: 1rem; }
/* ══ PUBLIC FOOTER — FAQ + Terms links ══ */
.pub-footer {
background: #050505;
border-top: 1px solid #111;
padding: 3rem 1.5rem 2rem;
}
.pub-footer-grid {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
@media(min-width: 600px) {
.pub-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.pub-footer-brand { }
.pub-footer-logo {
font-size: 0.85rem;
font-weight: 900;
color: #fff;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.pub-footer-tagline {
font-size: 0.7rem;
color: #444;
line-height: 1.6;
max-width: 220px;
}
.pub-footer-col-title {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #333;
margin-bottom: 0.8rem;
}
.pub-footer-links { list-style: none; }
.pub-footer-links li { margin-bottom: 0.5rem; }
.pub-footer-links button {
background: none;
border: none;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
cursor: pointer;
padding: 0;
transition: color 0.2s;
text-align: left;
}
.pub-footer-links button:hover { color: #fff; }
.pub-footer-bottom {
max-width: 900px;
margin: 0 auto;
border-top: 1px solid #111;
padding-top: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
.pub-footer-copy {
font-size: 0.65rem;
color: #2a2a2a;
}
/* ══ BLOCK BUTTON ON CARD BACK ══ */
.hm-back-block-btn {
background: none;
border: 1px solid #2a2a2a;
color: #555;
font-family: 'Inter', sans-serif;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.28rem 0.65rem;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
transition: all 0.2s;
}
.hm-back-block-btn:hover { border-color: #cc4444; color: #cc4444; }
/* ══ SUBSCRIPTION PAGE v41 — matches mockup exactly ══ */
.sub-current-card {
background: #111;
border: 1px solid #1e1e1e;
border-radius: 12px;
padding: 1.2rem;
margin-bottom: 1.5rem;
}
.sub-current-tier {
font-size: 0.55rem; font-weight: 800; letter-spacing: 0.14em;
text-transform: uppercase; color: #444; margin-bottom: 0.35rem;
}
.sub-current-name { font-size: 1.3rem; font-weight: 900; color: #fff; margin-bottom: 0.15rem; }
.sub-current-price { font-size: 0.78rem; color: #555; margin-bottom: 0.7rem; }
.sub-current-desc { font-size: 0.72rem; color: #444; margin-top: 0.6rem; line-height: 1.5; }
.sub-status-badge {
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 50px;
}
.sub-badge-active { background: rgba(68,204,136,0.1); color: #44cc88; border: 1px solid rgba(68,204,136,0.2); }
.sub-badge-free { background: rgba(255,255,255,0.04); color: #444; border: 1px solid #1e1e1e; }
.sub-status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sub-section-label {
font-size: 0.55rem; font-weight: 800; letter-spacing: 0.14em;
text-transform: uppercase; color: #333; margin-bottom: 0.8rem;
}
.sub-plan-card {
background: #0f0f0f; border: 1px solid #1a1a1a;
border-radius: 12px; padding: 1.1rem; margin-bottom: 0.8rem;
}
.sub-plan-featured { border-color: #cc2222; background: #0d0808; }
.sub-plan-hm { border-color: rgba(232,180,200,0.2); background: #0d0a0d; }
.sub-plan-badge {
font-size: 0.55rem; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase; color: #cc2222; margin-bottom: 0.6rem;
}
.sub-plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.8rem; }
.sub-plan-name { font-size: 1rem; font-weight: 900; color: #fff; margin-bottom: 0.1rem; }
.sub-plan-price { font-size: 1.2rem; font-weight: 900; color: #fff; }
.sub-plan-price span { font-size: 0.68rem; color: #555; font-weight: 400; }
.sub-plan-tag {
font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.2rem 0.55rem; border-radius: 50px;
background: rgba(255,255,255,0.05); color: #444; border: 1px solid #222;
}
.sub-plan-tag-gold { background: rgba(200,149,108,0.1); color: #c8956c; border-color: rgba(200,149,108,0.2); }
.sub-plan-tag-pink { background: rgba(232,180,200,0.1); color: #e8b4c8; border-color: rgba(232,180,200,0.2); }
.sub-plan-perks { list-style: none; margin-bottom: 1rem; }
.sub-plan-perks li {
font-size: 0.72rem; color: #666; padding: 0.22rem 0;
border-bottom: 1px solid #0d0d0d; display: flex; align-items: center; gap: 0.4rem;
}
.sub-plan-perks li::before { content: '✓'; color: #44cc88; font-size: 0.6rem; font-weight: 900; flex-shrink: 0; }
.sub-proration-note {
font-size: 0.68rem; color: #c8956c;
background: rgba(200,149,108,0.07); border: 1px solid rgba(200,149,108,0.15);
border-radius: 8px; padding: 0.55rem 0.7rem; margin-bottom: 0.8rem; line-height: 1.5;
}
.sub-btn {
width: 100%; padding: 0.8rem; border-radius: 8px; border: none;
font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 800;
letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.sub-btn-white { background: #fff; color: #000; }
.sub-btn-white:hover { background: #ddd; }
.sub-btn-red { background: #cc2222; color: #fff; }
.sub-btn-red:hover { background: #aa1111; }
.sub-btn-pink { background: linear-gradient(135deg, #e8b4c8, #f5d0e0); color: #1a0510; }
.sub-btn-pink:hover { background: linear-gradient(135deg, #f0c8d8, #f8dce8); }
.sub-billing-row {
display: flex; align-items: center; justify-content: space-between;
padding: 0.9rem 0; border-bottom: 1px solid #0f0f0f; cursor: pointer; transition: opacity 0.15s;
}
.sub-billing-row:hover { opacity: 0.7; }
.sub-billing-label { font-size: 0.82rem; font-weight: 600; color: #bbb; margin-bottom: 0.12rem; }
.sub-billing-sub { font-size: 0.65rem; color: #444; }
.sub-billing-arrow { font-size: 1.2rem; color: #2a2a2a; }
.sub-billing-danger .sub-billing-label { color: #cc4444; }
/* ══ DM LIMIT UI ══ */
.dm-limit-counter {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background: #0d0d0d;
border-top: 1px solid #1a1a1a;
font-size: 0.65rem;
color: #555;
flex-shrink: 0;
}
.dm-limit-lock {
padding: 1.2rem 1rem;
background: #0d0d0d;
border-top: 1px solid #1a1a1a;
text-align: center;
flex-shrink: 0;
}
.dm-limit-lock-text {
font-size: 0.75rem;
color: #555;
margin-bottom: 0.3rem;
}
/* ══ WHO CONNECTED ON YOU ══ */
.hm-admirers-header {
padding: 1rem 1.2rem 0.5rem;
flex-shrink: 0;
}
.hm-admirers-title {
font-size: 0.72rem;
font-weight: 800;
color: #e8b4c8;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.15rem;
}
.hm-admirers-sub {
font-size: 0.65rem;
color: #444;
}
.hm-admirers-grid {
display: flex;
gap: 0.75rem;
padding: 0.75rem 1.2rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hm-admirers-grid::-webkit-scrollbar { display: none; }
.hm-admirer-card {
flex-shrink: 0;
width: 90px;
cursor: pointer;
text-align: center;
transition: opacity 0.2s;
}
.hm-admirer-card:hover { opacity: 0.8; }
.hm-admirer-av {
width: 70px;
height: 70px;
border-radius: 50%;
background: #1a0a14;
border: 2px solid rgba(232,180,200,0.3);
margin: 0 auto 0.4rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 800;
color: #e8b4c8;
overflow: hidden;
}
.hm-admirer-name {
font-size: 0.68rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hm-admirer-meta {
font-size: 0.6rem;
color: #555;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0.1rem;
}
.hm-admirer-pill {
display: inline-block;
font-size: 0.55rem;
color: #e8b4c8;
border: 1px solid rgba(232,180,200,0.2);
border-radius: 50px;
padding: 0.1rem 0.4rem;
margin-top: 0.2rem;
}
.hm-admirers-divider {
height: 1px;
background: #111;
margin: 0 1.2rem 0.5rem;
}
/* ══ HERMATCH ONBOARDING 4-SCREEN FLOW ══ */
#page-hm-onboard {
display: none !important;
}
#page-hm-onboard.active {
display: flex !important;
flex-direction: column;
}
.hm-ob-screen {
display: flex;
flex-direction: column;
min-height: 100vh;
padding-top: calc(56px + env(safe-area-inset-top, 0px));
}
.hm-ob-header {
padding: 1.5rem 1.2rem 1rem;
text-align: center;
flex-shrink: 0;
}
.hm-ob-step {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #e8b4c8;
margin-bottom: 0.4rem;
}
.hm-ob-title {
font-size: 1.4rem;
font-weight: 900;
color: #fff;
margin-bottom: 0.3rem;
}
.hm-ob-sub {
font-size: 0.75rem;
color: #555;
line-height: 1.5;
}
.hm-ob-scroll-body {
flex: 1;
overflow-y: auto;
padding: 0 1.2rem;
-webkit-overflow-scrolling: touch;
}
.hm-ob-body {
flex: 1;
overflow-y: auto;
padding: 0 1.2rem;
-webkit-overflow-scrolling: touch;
}
.hm-ob-declaration {
font-size: 0.85rem;
color: #888;
line-height: 1.85;
padding: 1rem 0;
}
.hm-ob-declaration p {
margin-bottom: 1.2rem;
}
.hm-ob-confirm-wrap {
padding: 1.5rem 0 1rem;
border-top: 1px solid #1a1a1a;
margin-top: 0.5rem;
}
.hm-ob-confirm-label {
display: flex;
align-items: flex-start;
gap: 0.8rem;
font-size: 0.78rem;
color: #888;
line-height: 1.6;
cursor: pointer;
}
.hm-ob-confirm-label input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: #e8b4c8;
}
.hm-ob-q-label {
font-size: 0.72rem;
font-weight: 700;
color: #e8b4c8;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 1.2rem 0 0.5rem;
}
.hm-ob-footer {
padding: 1rem 1.2rem 2rem;
flex-shrink: 0;
background: #000;
border-top: 1px solid #111;
}
.hm-ob-back {
background: none;
border: none;
color: #444;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
cursor: pointer;
padding: 0.5rem 0;
display: block;
text-align: center;
width: 100%;
margin-top: 0.5rem;
}
.hm-ob-back:hover { color: #666; }
/* ══ QUESTIONNAIRE LAYER LABELS ══ */
.dq-layer-label {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #e8b4c8;
margin: 1.8rem 0 0.8rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #1a1a1a;
}
.dq-tier3-tag {
font-size: 0.55rem;
font-weight: 700;
color: #444;
background: #111;
border: 1px solid #222;
border-radius: 50px;
padding: 0.1rem 0.5rem;
margin-left: 0.4rem;
vertical-align: middle;
letter-spacing: 0.04em;
text-transform: none;
}
.dq-avail-display {
font-size: 0.72rem;
color: #555;
background: #0f0f0f;
border: 1px solid #1a1a1a;
border-radius: 8px;
padding: 0.6rem 0.8rem;
margin-bottom: 0.8rem;
}
/* ══ CARD BACK TIER SECTIONS ══ */
.hm-tier3-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #1a1a1a;
}
.hm-tier3-label {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #e8b4c8;
margin-bottom: 0.8rem;
}
.hm-tier3-blur {
margin-top: 1rem;
padding: 1.5rem 1rem;
background: #0a0a0a;
border: 1px solid #1a1a1a;
border-radius: 10px;
text-align: center;
filter: blur(0);
position: relative;
overflow: hidden;
}
.hm-tier3-blur::before {
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(4px);
background: rgba(0,0,0,0.6);
border-radius: 10px;
}
.hm-tier3-blur-inner {
position: relative;
z-index: 1;
}
/* ══ COACHING NUDGE ══ */
.hm-coach-nudge {
display: flex;
align-items: flex-start;
gap: 0.6rem;
background: rgba(232,180,200,0.06);
border: 1px solid rgba(232,180,200,0.15);
border-radius: 8px;
padding: 0.8rem 1rem;
margin: 0 0 0.5rem;
flex-shrink: 0;
}
.hm-coach-nudge-text {
flex: 1;
font-size: 0.72rem;
color: #888;
line-height: 1.65;
}
.hm-coach-nudge-dismiss {
background: none;
border: none;
color: #333;
font-size: 1rem;
cursor: pointer;
flex-shrink: 0;
padding: 0;
line-height: 1;
}
/* ══ MATCH CARD PROMPTS ══ */
.hm-match-prompt {
text-align: center;
padding: 1rem 0.5rem;
}
.hm-match-prompt-text {
font-size: 0.82rem;
color: #888;
line-height: 1.7;
font-style: italic;
margin-bottom: 1rem;
}
.hm-match-common {
background: #0f0f0f;
border: 1px solid #1a1a1a;
border-radius: 8px;
padding: 0.8rem;
margin-bottom: 1rem;
}
.hm-match-common-label {
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #e8b4c8;
margin-bottom: 0.5rem;
}
.hm-match-common-item {
font-size: 0.72rem;
color: #666;
padding: 0.2rem 0;
}
/* ══ INBOUND INTEREST TEASER ══ */
.hm-teaser-blur {
padding: 1rem 1.2rem;
position: relative;
}
.hm-teaser-blur-inner {
text-align: center;
padding: 1.2rem;
background: rgba(232,180,200,0.04);
border: 1px solid rgba(232,180,200,0.12);
border-radius: 10px;
}
.hm-teaser-avatars {
display: flex;
justify-content: center;
gap: 0.4rem;
margin-bottom: 0.8rem;
}
.hm-teaser-av-blur {
width: 46px;
height: 46px;
border-radius: 50%;
background: #2a1520;
filter: blur(6px);
}
.hm-teaser-cta-text {
font-size: 0.78rem;
font-weight: 700;
color: #e8b4c8;
margin-bottom: 0.3rem;
}
/* ══ PLANS + HERMATCH LANDING ══ */
.sub-plan-hm .sub-plan-name { color: #e8b4c8; }
/* ══ HERMATCH TIER CARD ON PLANS PAGE ══ */
.tier-hm {
border: 2px solid rgba(232,180,200,0.3) !important;
background: linear-gradient(180deg, #0d0a0d 0%, #0a0a0a 100%);
}
.tier-tag-pink {
background: rgba(232,180,200,0.15) !important;
color: #e8b4c8 !important;
border: 1px solid rgba(232,180,200,0.2) !important;
}
/* ══ HERMATCH ONBOARDING — 4 SCREEN FLOW ══ */
#page-hm-onboard { background: #000; }
.hm-ob-screen {
display: flex;
flex-direction: column;
min-height: calc(100vh - 58px);
padding-top: 0;
}
.hm-ob-header {
padding: 0.6rem 1.5rem 0.4rem;
text-align: center;
flex-shrink: 0;
}
/* Screen 1+2 combined — scrollable, prominent logo */
.hm-ob-screen1 {
padding: 0;
justify-content: flex-start;
}
.hm-ob1-inner {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 1rem 1.4rem 2rem;
overflow-y: auto;
}
.hm-ob1-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0 0.25rem;
}
.hm-ob1-logo {
/* Remove whitespace — logo should fill its natural width */
height: 56px;
width: auto;
object-fit: contain;
object-position: center;
}
.hm-ob1-text {
font-size: 0.95rem;
color: #e0e0e0;
line-height: 1.75;
}
.hm-ob1-text p { margin-bottom: 0.7rem; }
.hm-ob1-text p:last-child { margin-bottom: 0; }
.hm-ob1-close {
font-weight: 800;
color: #fff !important;
}
.hm-ob1-divider {
height: 1px;
background: #1a1a1a;
margin: 0.25rem 0;
}
.hm-ob-step {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #e8b4c8;
margin-bottom: 0.5rem;
}
.hm-ob-title {
font-size: 1.4rem;
font-weight: 900;
color: #fff;
margin-bottom: 0.3rem;
}
.hm-ob-sub {
font-size: 0.78rem;
color: #555;
line-height: 1.5;
}
.hm-ob-scroll-body {
flex: 1;
overflow-y: auto;
padding: 0;
-webkit-overflow-scrolling: touch;
}
.hm-ob-body {
flex: 1;
overflow-y: auto;
padding: 0.5rem 1.5rem 1rem;
-webkit-overflow-scrolling: touch;
}
/* declaration-wrap styles replaced by hm-ob1-* */
.hm-ob-declaration p {
margin-bottom: 1.2rem;
}
.hm-ob-declaration p:last-child {
margin-bottom: 0;
}
.hm-ob-confirm-wrap {
padding: 1.2rem 1.5rem 0.5rem;
border-top: 1px solid #111;
margin-top: 1.2rem;
}
.hm-ob-confirm-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.8rem;
color: #aaa;
line-height: 1.6;
cursor: pointer;
}
.hm-ob-confirm-label input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
accent-color: #e8b4c8;
}
.hm-ob-q-label {
font-size: 0.72rem;
font-weight: 700;
color: #e8b4c8;
letter-spacing: 0.04em;
margin-bottom: 0.4rem;
margin-top: 1rem;
}
.hm-ob-footer {
padding: 1rem 1.5rem 2rem;
flex-shrink: 0;
border-top: 1px solid #111;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.hm-ob-back {
background: none;
border: none;
color: #444;
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
cursor: pointer;
padding: 0.3rem 0;
text-align: center;
transition: color 0.2s;
}
.hm-ob-back:hover { color: #888; }
/* ══ QUESTIONNAIRE LAYERS ══ */
.dq-layer-label {
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #e8b4c8;
margin: 1.8rem 0 0.8rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #1a1a1a;
}
.dq-avail-display {
font-size: 0.72rem;
color: #555;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 8px;
padding: 0.6rem 0.8rem;
margin-bottom: 0.8rem;
}
.dq-tier3-tag {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #e8b4c8;
background: rgba(232,180,200,0.08);
border: 1px solid rgba(232,180,200,0.2);
border-radius: 50px;
padding: 0.1rem 0.5rem;
margin-left: 0.4rem;
white-space: nowrap;
}
/* ══ CARD BACK — 3-TIER CONTENT ══ */
.hm-back-section {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
}
.hm-back-row {
display: flex;
flex-direction: column;
background: #111;
border-radius: 8px;
padding: 0.5rem 0.7rem;
min-width: 120px;
flex: 1;
}
.hm-back-label {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #444;
margin-bottom: 0.2rem;
}
.hm-back-val {
font-size: 0.72rem;
color: #ccc;
font-weight: 600;
}
.hm-back-text-row {
background: #0d0d0d;
border: 1px solid #1a1a1a;
border-radius: 8px;
padding: 0.7rem 0.8rem;
margin-bottom: 0.6rem;
}
.hm-back-text-val {
font-size: 0.75rem;
color: #888;
line-height: 1.6;
margin-top: 0.2rem;
}
/* Tier 3 blurred */
.hm-tier3-section { margin-top: 0.5rem; }
.hm-tier3-blur {
background: #0d0d0d;
border: 1px solid #1a1a1a;
border-radius: 8px;
padding: 0.7rem 0.8rem;
margin-bottom: 0.6rem;
position: relative;
overflow: hidden;
}
.hm-tier3-blur-text {
font-size: 0.75rem;
color: transparent;
text-shadow: 0 0 8px rgba(232,180,200,0.4);
filter: blur(4px);
line-height: 1.6;
user-select: none;
}
.hm-tier3-lock {
font-size: 0.6rem;
color: #e8b4c8;
font-style: italic;
margin-top: 0.3rem;
opacity: 0.7;
}
.hm-tier3-unlocked-badge {
font-size: 0.62rem;
font-weight: 700;
color: #44cc88;
background: rgba(68,204,136,0.08);
border: 1px solid rgba(68,204,136,0.2);
border-radius: 50px;
padding: 0.3rem 0.8rem;
text-align: center;
margin-bottom: 0.8rem;
}
/* ══ MATCH CARD — with prompt ══ */
.hm-match-commons {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
margin-bottom: 1rem;
}
.hm-match-common-pill {
font-size: 0.62rem;
color: #e8b4c8;
background: rgba(232,180,200,0.08);
border: 1px solid rgba(232,180,200,0.2);
border-radius: 50px;
padding: 0.2rem 0.6rem;
}
.hm-match-prompt {
font-size: 0.82rem;
color: #888;
font-style: italic;
line-height: 1.7;
text-align: center;
padding: 1rem 1.5rem;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
margin-bottom: 1rem;
}
/* ══ COACHING NUDGE BANNER ══ */
.dm-nudge-banner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
background: rgba(232,180,200,0.06);
border: 1px solid rgba(232,180,200,0.15);
border-radius: 8px;
padding: 0.75rem 0.9rem;
margin: 0.5rem 0.8rem;
flex-shrink: 0;
}
.dm-nudge-text {
font-size: 0.75rem;
color: #c4899e;
line-height: 1.65;
flex: 1;
}
.dm-nudge-dismiss {
background: none;
border: none;
color: #555;
font-size: 1rem;
cursor: pointer;
flex-shrink: 0;
padding: 0;
line-height: 1;
}
.dm-nudge-dismiss:hover { color: #888; }
/* ══ BLURRED TEASER ══ */
.hm-admirer-blurred { opacity: 0.5; pointer-events: none; }
.hm-admirer-av-blur {
background: linear-gradient(135deg, #1a0a14, #2a0a1e);
filter: blur(3px);
}
.hm-admirer-name-blur {
height: 10px;
background: #222;
border-radius: 4px;
margin: 0.3rem auto;
width: 60px;
filter: blur(2px);
}
.hm-admirer-upgrade-card {
flex-shrink: 0;
width: 90px;
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.5rem;
}
.hm-admirer-upgrade-text {
font-size: 0.6rem;
color: #e8b4c8;
line-height: 1.4;
}
.hm-admirer-upgrade-btn {
font-size: 0.6rem;
font-weight: 800;
color: #e8b4c8;
border: 1px solid rgba(232,180,200,0.3);
border-radius: 50px;
padding: 0.2rem 0.5rem;
}
/* ══ CROP MODAL ══ */
#cropModal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.97);
z-index: 99999;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
#cropViewport {
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
#cropImage {
pointer-events: none;
-webkit-user-drag: none;
}
/* ══ ALL AVATAR/CARD IMAGES — always fill, face-focused ══ */
.dash-av,
.photo-circle,
.hm-card-photo,
.hm-admirer-av,
.hm-match-av,
.meet-card-av,
.composer-av,
.comm-av,
.prof-av,
.dm-av,
.dm-header-av {
background-size: cover !important;
background-position: center 20% !important;
background-repeat: no-repeat !important;
}
/* ══ LINK PREVIEWS ══ */
.link-preview-wrap {
margin: 0.5rem 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid #1a1a1a;
background: #0d0d0d;
}
.link-preview {
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
text-decoration: none;
}
.link-preview-img {
width: 100%;
height: 160px;
background-color: #111;
flex-shrink: 0;
}
.link-preview-body {
padding: 0.7rem 0.8rem;
flex: 1;
}
.link-preview-site {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555;
margin-bottom: 0.2rem;
}
.link-preview-title {
font-size: 0.78rem;
font-weight: 700;
color: #ccc;
line-height: 1.4;
margin-bottom: 0.2rem;
}
.link-preview-desc {
font-size: 0.7rem;
color: #555;
line-height: 1.4;
}
.link-preview-close {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0,0,0,0.7);
border: none;
color: #fff;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 0.7rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.link-preview-loading {
padding: 0.8rem;
font-size: 0.7rem;
color: #444;
}
.post-link-preview {
display: block;
text-decoration: none;
border: 1px solid #1a1a1a;
border-radius: 10px;
overflow: hidden;
background: #0d0d0d;
margin-top: 0.6rem;
transition: border-color 0.2s;
}
.post-link-preview:hover { border-color: #333; }
/* ══ VIDEO POSTS ══ */
.post-video-wrap {
margin-top: 0.6rem;
border-radius: 10px;
overflow: hidden;
background: #000;
}
.post-video {
width: 100%;
max-height: 360px;
display: block;
object-fit: contain;
}
/* ══ WELCOME SCREEN ══ */
#page-welcome { display: none; }
#page-welcome.active { display: flex !important; align-items: center; justify-content: center; }
.welcome-wrap {
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 2rem 1.5rem; max-width: 400px; gap: 0.8rem;
}
.welcome-logo {
font-size: 1rem; font-weight: 900; color: #fff;
letter-spacing: 0.1em; text-transform: uppercase;
}
.welcome-sub {
font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: #cc2222;
}
.welcome-headline {
font-size: 1.6rem; font-weight: 900; color: #fff;
line-height: 1.2; margin-top: 0.5rem;
}
.welcome-body {
font-size: 0.82rem; color: #666; line-height: 1.6;
}
.welcome-paths {
display: flex; flex-direction: column; gap: 0.75rem;
width: 100%; margin-top: 0.5rem;
}
.welcome-path-btn {
background: #0d0d0d; border: 1px solid #222; border-radius: 14px;
padding: 1.2rem; text-align: left; cursor: pointer;
transition: all 0.2s; display: flex; align-items: center; gap: 1rem;
width: 100%;
}
.welcome-path-btn:hover { border-color: #444; }
.welcome-path-pink { border-color: rgba(232,180,200,0.25); }
.welcome-path-pink:hover { border-color: rgba(232,180,200,0.5); }
.welcome-path-icon {
width: 44px; height: 44px; border-radius: 50%;
background: #1a1a1a; display: flex; align-items: center;
justify-content: center; flex-shrink: 0;
}
.welcome-path-icon svg { width: 22px; height: 22px; color: #fff; }
.welcome-path-pink .welcome-path-icon { background: rgba(232,180,200,0.1); }
.welcome-path-pink .welcome-path-icon svg { color: #e8b4c8; }
.welcome-path-label {
font-size: 0.95rem; font-weight: 800; color: #fff;
margin-bottom: 0.2rem;
}
.welcome-path-desc { font-size: 0.72rem; color: #555; line-height: 1.4; }
.welcome-note { font-size: 0.65rem; color: #333; margin-top: 0.5rem; }
/* ══ PROFILE SETUP ══ */
.setup-av {
width: 96px; height: 96px; border-radius: 50%;
background: #111; border: 2px dashed #333;
display: flex; flex-direction: column; align-items: center;
justify-content: center; cursor: pointer; transition: border-color 0.2s;
background-size: cover; background-position: center 20%;
overflow: hidden; gap: 0.3rem;
}
.setup-av:hover { border-color: #555; }
.setup-av svg { color: #444; }
.setup-av-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #444; }
/* Accent color picker */
.accent-picker {
display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.accent-swatch {
width: 32px; height: 32px; border-radius: 50%;
border: 3px solid transparent; cursor: pointer;
transition: all 0.15s; flex-shrink: 0;
}
.accent-swatch.selected {
border-color: #fff; transform: scale(1.15);
}
/* Social input rows */
.social-inputs { display: flex; flex-direction: column; gap: 0.5rem; }
.social-input-row {
display: flex; align-items: center; gap: 0.7rem;
background: #111; border: 1.5px solid #1a1a1a;
border-radius: 10px; padding: 0 0.8rem;
}
.social-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.5; }
.social-input-row .field {
background: none; border: none; padding: 0.75rem 0;
margin: 0; flex: 1;
}
/* ══ FOLLOW SUGGESTIONS ══ */
#followSuggestionsGrid {
display: flex; flex-direction: column; gap: 0.75rem;
}
.follow-suggestion-card {
display: flex; align-items: center; gap: 0.9rem;
background: #0d0d0d; border: 1px solid #1a1a1a;
border-radius: 12px; padding: 0.9rem;
}
.follow-sug-av {
width: 52px; height: 52px; border-radius: 50%;
background: #1a1a1a; flex-shrink: 0;
background-size: cover; background-position: center 20%;
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem; font-weight: 800; color: #fff;
}
.follow-sug-info { flex: 1; min-width: 0; }
.follow-sug-name {
font-size: 0.85rem; font-weight: 700; color: #fff;
margin-bottom: 0.1rem; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.follow-sug-meta { font-size: 0.65rem; color: #555; }
.follow-sug-sig { font-size: 0.7rem; color: #777; font-style: italic; margin-top: 0.1rem; }
.follow-sug-btn {
background: none; border: 1px solid #333; color: #aaa;
font-family: 'Inter', sans-serif; font-size: 0.62rem;
font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
padding: 0.4rem 0.9rem; border-radius: 50px; cursor: pointer;
transition: all 0.2s; flex-shrink: 0;
}
.follow-sug-btn.following {
background: #1a1a1a; border-color: #333; color: #555;
}
.follow-sug-btn:not(.following):hover { border-color: #fff; color: #fff; }
/* ══ PROFILE — accent color + signature line ══ */
.profile-header-accent {
height: 4px; width: 100%;
background: var(--accent, #cc2222);
margin-bottom: 0;
}
.profile-signature {
font-size: 0.88rem; font-style: normal;
color: var(--accent, #cc2222); margin-bottom: 0.4rem;
line-height: 1.4;
}
.profile-social-links {
display: flex; gap: 0.75rem; margin-top: 0.6rem;
flex-wrap: wrap;
}
.profile-social-link {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: #1a1a1a; border: 1px solid #333;
cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.profile-social-link:hover { border-color: #666; }
.profile-social-link svg { width: 20px; height: 20px; }
/* ══ HEY HEAUX BUTTON ══ */
.hey-heaux-btn {
background: none;
border: 1px solid #333;
color: #888;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.4rem 0.9rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.hey-heaux-btn:hover { border-color: #e8b4c8; color: #e8b4c8; }
.hey-heaux-btn.sent { border-color: #e8b4c8; color: #e8b4c8; background: rgba(232,180,200,0.08); }
/* ══════════════════════════════════════════════════════
COMMUNITY PAGE — matches mockup exactly
══════════════════════════════════════════════════════ */
/* Section label */
.comm-sec-label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
padding: 0.9rem 1.2rem 0.4rem;
}
/* Divider */
.comm-divider {
height: 1px;
background: #0a0a0a;
margin: 0.25rem 0;
}
/* ── HEAUXS YOU MAY KNOW ── */
.hmyk-section { background: #000; }
.hmyk-scroll {
display: flex;
gap: 0.75rem;
padding: 0.3rem 1.2rem 1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.hmyk-scroll::-webkit-scrollbar { display: none; }
.hmyk-card {
flex-shrink: 0;
width: 100px;
background: #0a0a0a;
border: 1px solid #141414;
border-radius: 14px;
padding: 0.9rem 0.6rem 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
cursor: pointer;
transition: border-color 0.2s;
}
.hmyk-card:hover { border-color: #2a2a2a; }
.hmyk-card-av {
width: 54px;
height: 54px;
border-radius: 50%;
background: #1a1a1a;
background-size: cover;
background-position: center 20%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 900;
color: #fff;
border: 2px solid #1a1a1a;
flex-shrink: 0;
}
.hmyk-card-name {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.hmyk-card-meta {
font-size: 12px;
color: rgba(255,255,255,0.5);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.hmyk-follow-btn {
background: none;
border: 1px solid #222;
color: #777;
font-family: 'Inter', sans-serif;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.28rem 0.65rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
margin-top: 0.1rem;
}
.hmyk-follow-btn:hover { border-color: #fff; color: #fff; }
.hmyk-follow-btn.following { border-color: #1a1a1a; color: #B0B0B0; background: #0a0a0a; cursor: default; }
/* ── COMPOSER ── */
.comm-composer-wrap { padding: 0.6rem 16px 0.4rem; }
.comm-composer {
background: #0a0a0a;
border: 1px solid #141414;
border-radius: 14px;
padding: 0.9rem;
}
.comm-composer-row {
display: flex;
gap: 0.7rem;
align-items: flex-start;
}
.comm-comp-av {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1a1a1a;
background-size: cover;
background-position: center 20%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
color: #fff;
overflow: hidden;
}
.comm-comp-ta {
flex: 1;
background: none;
border: none;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
outline: none;
resize: none;
min-height: 42px;
padding-top: 0.25rem;
line-height: 1.5;
}
.comm-comp-ta::placeholder { color: rgba(255,255,255,0.4); }
.comm-comp-preview { margin-top: 0.5rem; }
.comm-comp-preview img, .comm-comp-preview video {
max-width: 100%;
max-height: 220px;
border-radius: 10px;
display: block;
}
.comm-comp-foot {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid #111;
}
.comm-comp-icon {
background: none;
border: 1.5px solid #1a1a1a;
width: 34px;
height: 34px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
flex-shrink: 0;
padding: 0;
}
.comm-comp-icon:hover { border-color: rgba(255,255,255,0.2); }
.comm-comp-icon svg { width: 15px; height: 15px; }
.comm-comp-gif {
background: none;
border: 1.5px solid #1a1a1a;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.6rem;
font-weight: 800;
height: 34px;
padding: 0 0.65rem;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.06em;
transition: border-color 0.2s;
flex-shrink: 0;
}
.comm-comp-gif:hover { border-color: rgba(255,255,255,0.2); }
.comm-comp-post {
margin-left: auto;
background: #cc2222;
border: none;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
height: 34px;
padding: 0 1rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.comm-comp-post:hover { background: #aa1111; }
/* ── UPLOAD BUTTON (replaces camera/video/gif icons) ── */
.ds-upload-btn {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: background 0.15s, border-color 0.15s;
}
.ds-upload-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); }
.ds-upload-btn:active { background: rgba(255,255,255,0.04); }
/* ── UPLOAD ACTION SHEET ROWS ── */
.upload-sheet-row {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 15px 24px;
background: none;
border: none;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.upload-sheet-row:hover { background: rgba(255,255,255,0.04); }
/* ── ALBUM UPLOAD TILE ── */
.album-upload-tile {
flex: 0 0 32vw;
width: 32vw;
height: 32vw;
max-width: none;
border: 1.5px dashed rgba(255,255,255,0.18);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(255,255,255,0.02);
transition: background 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.album-upload-tile:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }
.comm-readonly {
font-size: 0.78rem;
color: #444;
padding: 0.8rem 0.2rem;
text-align: center;
}
/* ── COMMUNITY FEED ── */
.comm-feed {
padding: 0.4rem 1rem 5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* ── POST CARD — matches mockup ── */
.comm-post {
background: #080808;
border: 1px solid #0f0f0f;
border-radius: 14px;
padding: 0.9rem;
transition: border-color 0.2s;
}
.comm-post:hover { border-color: #141414; }
.comm-post-head {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.65rem;
}
.comm-post-av {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1a1a1a;
background-size: cover;
background-position: center 20%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
color: #fff;
cursor: pointer;
overflow: hidden;
}
.comm-post-info { flex: 1; min-width: 0; }
.comm-post-author {
font-size: 16px;
font-weight: 600;
color: rgba(255,255,255,0.9);
cursor: pointer;
transition: color 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.comm-post-author:hover { color: #fff; }
.comm-post-time { font-size: 12px; color: rgba(255,255,255,0.5); }
.comm-post-badge {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.15rem 0.5rem;
border-radius: 50px;
flex-shrink: 0;
}
.cpb-host { background: rgba(204,34,34,0.1); color: #cc2222; border: 1px solid rgba(204,34,34,0.2); }
.cpb-align { background: rgba(200,149,108,0.1); color: #c8956c; border: 1px solid rgba(200,149,108,0.2); }
.cpb-slow { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); border: 1px solid #1a1a1a; }
.cpb-hm { background: rgba(232,180,200,0.1); color: #e8b4c8; border: 1px solid rgba(232,180,200,0.2); }
.comm-post-body {
font-size: 15px;
color: rgba(255,255,255,0.75);
line-height: 1.5;
margin-bottom: 0.65rem;
word-break: break-word;
}
.comm-post-body strong { color: rgba(255,255,255,0.9); font-weight: 700; }
.comm-post-img {
width: 100%;
border-radius: 10px;
display: block;
margin-bottom: 0.65rem;
object-fit: cover;
max-height: 300px;
}
.comm-post-actions {
display: flex;
gap: 1.2rem;
align-items: center;
}
.comm-act-btn {
background: none;
border: none;
color: rgba(255,255,255,0.55);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
transition: color 0.15s;
padding: 0;
}
.comm-act-btn:hover { color: rgba(255,255,255,0.8); }
.comm-act-btn.liked { color: #cc2222; }
.comm-act-btn svg {
width: 15px;
height: 15px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.comm-act-btn.liked svg { fill: #cc2222; stroke: #cc2222; }
/* Comments section */
.comm-comments {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid #0f0f0f;
display: none;
}
.comm-comments.open { display: block; }
.comm-comment {
display: flex;
gap: 0.5rem;
margin-bottom: 0.6rem;
align-items: flex-start;
}
.comm-comment-av {
width: 26px;
height: 26px;
border-radius: 50%;
background: #1a1a1a;
background-size: cover;
background-position: center 20%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 800;
color: #fff;
overflow: hidden;
}
.comm-comment-body {
background: #0d0d0d;
border-radius: 8px;
padding: 0.45rem 0.65rem;
flex: 1;
}
.comm-comment-author {
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,0.75);
margin-bottom: 0.1rem;
}
.comm-comment-text {
font-size: 14px;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
.comm-comment-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}
.comm-comment-input {
flex: 1;
background: #0d0d0d;
border: 1px solid #1a1a1a;
border-radius: 20px;
padding: 0.4rem 0.8rem;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 15px;
outline: none;
}
.comm-comment-input::placeholder { color: rgba(255,255,255,0.4); }
.comm-comment-send {
background: none;
border: none;
color: #cc2222;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
/* ── NOTIFICATION PANEL ── */
.notif-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 375px;
background: #000;
border-left: 1px solid #111;
z-index: 5000;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
box-shadow: -4px 0 24px rgba(0,0,0,0.6);
}
.notif-panel.open { transform: translateX(0); }
.notif-panel-header {
padding: 1rem 1.2rem 0.7rem;
border-bottom: 1px solid #0f0f0f;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
background: #000;
z-index: 1;
}
.notif-panel-title { font-size: 1rem; font-weight: 900; color: #fff; }
.notif-panel-close {
background: none;
border: none;
color: #555;
font-size: 1.3rem;
cursor: pointer;
padding: 0;
line-height: 1;
}
.notif-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.85rem 1.2rem;
border-bottom: 1px solid #0a0a0a;
cursor: pointer;
transition: background 0.15s;
}
.notif-item.unread { background: #0d0508; }
.notif-item:hover { background: #0d0d0d; }
.notif-av {
width: 44px;
height: 44px;
border-radius: 50%;
background: #1a1a1a;
background-size: cover;
background-position: center 20%;
flex-shrink: 0;
}
.notif-text {
flex: 1;
font-size: 0.8rem;
font-weight: 600;
color: #888;
line-height: 1.4;
}
.notif-text.unread { color: #ddd; }
.notif-name { font-weight: 700; }
.notif-time { font-size: 0.62rem; color: #333; margin-top: 0.15rem; }
.notif-sub { font-size: 0.7rem; color: #444; font-style: italic; margin-top: 0.1rem; }
.notif-section-label {
padding: 0.6rem 1.2rem;
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #222;
background: #000;
}
.notif-follow-back {
background: none;
border: 1px solid #222;
color: #888;
font-family: 'Inter', sans-serif;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 50px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════
PROFILE PAGE — MATCHES MOCKUP EXACTLY
══════════════════════════════════════════════════════ */
.prof-new-wrap {
padding: 0;
max-width: 480px;
margin: 0 auto;
}
/* Top row */
.prof-new-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1rem 1.2rem 0.8rem;
}
/* Avatar */
.prof-new-av-wrap { position: relative; }
.prof-new-av {
width: 82px;
height: 82px;
border-radius: 50%;
background: #1a1a1a;
background-size: cover;
background-position: center 20%;
cursor: pointer;
transition: opacity 0.2s;
box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--accent, #cc2222);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 900;
color: #fff;
overflow: hidden;
}
.prof-new-av:hover { opacity: 0.85; }
.prof-new-verified {
position: absolute;
bottom: 2px;
right: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #000;
border: 2px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
.prof-new-verified svg { width: 12px; height: 12px; }
/* Action buttons */
.prof-new-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-end;
margin-top: 0.3rem;
}
.prof-new-edit-btn {
background: #111;
border: 1px solid #2a2a2a;
color: #aaa;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.45rem 1.1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.prof-new-edit-btn:hover { border-color: #555; color: #fff; }
/* Name + handle */
.prof-new-name {
font-size: 1.15rem;
font-weight: 900;
color: #fff;
padding: 0 1.2rem 0.05rem;
line-height: 1.2;
}
.prof-new-handle {
font-size: 0.72rem;
color: #444;
padding: 0 1.2rem 0.35rem;
}
/* Signature */
.prof-new-signature {
font-size: 0.85rem;
font-style: italic;
color: var(--accent, #cc2222);
padding: 0 1.2rem 0.4rem;
line-height: 1.4;
}
/* Meta */
.prof-new-meta {
font-size: 0.72rem;
color: #555;
padding: 0 1.2rem 0.4rem;
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
align-items: center;
}
/* Tier badge */
.prof-new-tier-wrap { padding: 0 1.2rem 0.45rem; }
.prof-new-tier {
font-size: 0.56rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.2rem 0.65rem;
border-radius: 50px;
display: inline-block;
}
/* Bio */
.prof-new-bio {
font-size: 0.82rem;
color: #888;
line-height: 1.65;
padding: 0 1.2rem 0.6rem;
}
/* Social links */
.prof-new-socials {
display: flex;
gap: 0.6rem;
padding: 0 1.2rem 0.8rem;
flex-wrap: wrap;
}
.prof-new-socials a {
width: 32px;
height: 32px;
border-radius: 50%;
background: #111;
border: 1px solid #1e1e1e;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: border-color 0.2s;
}
.prof-new-socials a:hover { border-color: #444; }
.prof-new-socials a svg { width: 15px; height: 15px; }
/* Stats bar */
.prof-new-stats {
display: flex;
border-top: 1px solid #0f0f0f;
border-bottom: 1px solid #0f0f0f;
}
.prof-new-stat {
flex: 1;
padding: 0.8rem 0;
text-align: center;
border-right: 1px solid #0f0f0f;
transition: background 0.15s;
}
.prof-new-stat:last-child { border-right: none; }
.prof-new-stat:hover { background: #080808; }
.prof-new-stat-num {
font-size: 1.05rem;
font-weight: 900;
color: #fff;
}
.prof-new-stat-label {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #444;
margin-top: 0.1rem;
}
/* Photos */
.prof-new-photos-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1.2rem 0.4rem;
}
.prof-new-photos-title {
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #333;
}
.prof-new-photos-add {
background: none;
border: none;
color: var(--accent, #cc2222);
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
padding: 0;
}
/* Composer */
.prof-new-composer {
margin: 0.6rem 1rem 0.4rem;
background: #0a0a0a;
border: 1px solid #141414;
border-radius: 14px;
padding: 0.9rem;
}
.prof-new-comp-row {
display: flex;
gap: 0.7rem;
align-items: flex-start;
}
.prof-new-comp-av {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1a1a1a;
background-size: cover;
background-position: center 20%;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
color: #fff;
}
.prof-new-comp-ta {
flex: 1;
background: none;
border: none;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
outline: none;
resize: none;
min-height: 42px;
padding-top: 0.25rem;
line-height: 1.5;
}
.prof-new-comp-ta::placeholder { color: #2a2a2a; }
.prof-new-comp-foot {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid #111;
}
/* Feed tabs */
.prof-new-tabs {
display: flex;
border-top: 1px solid #0f0f0f;
border-bottom: 1px solid #0f0f0f;
margin-top: 0.5rem;
}
.prof-new-tab {
flex: 1;
background: none;
border: none;
color: #444;
font-family: 'Inter', sans-serif;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.8rem 0;
cursor: pointer;
transition: all 0.2s;
border-bottom: 2px solid transparent;
}
.prof-new-tab.active {
color: #fff;
border-bottom-color: var(--accent, #cc2222);
}
/* Profile layout — new wrap always shows, old desktop hidden */
.prof-desktop-only { display: none !important; }
.prof-mobile-feed { display: none !important; }
.prof-new-wrap { display: block !important; }
/* ══════════════════════════════════════════════════════
PROFILE — EXACT MOCKUP STYLES — OVERRIDES ALL OLD CSS
══════════════════════════════════════════════════════ */
/* Wrapper */
.prof-new-wrap {
display: block !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
background: #000 !important;
}
/* Accent stripe */
#profAccentStripe {
height: 3px !important;
width: 100% !important;
display: block !important;
transition: background 0.3s !important;
}
/* Top row */
.prof-new-top {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
padding: 1.2rem 1.2rem 0.8rem !important;
background: #000 !important;
}
/* Avatar */
.prof-new-av-wrap {
position: relative !important;
flex-shrink: 0 !important;
}
.prof-new-av {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
background-color: #1a1a1a !important;
background-size: cover !important;
background-position: center 20% !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.4rem !important;
font-weight: 900 !important;
color: #fff !important;
overflow: hidden !important;
border: 3px solid #000 !important;
box-shadow: 0 0 0 2px var(--accent, #cc2222) !important;
}
.prof-new-verified {
position: absolute !important;
bottom: 2px !important;
right: 2px !important;
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
background: #000 !important;
border: 2px solid #000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.prof-new-verified svg { width: 12px !important; height: 12px !important; }
/* Actions */
.prof-new-actions {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
margin-top: 0.3rem !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
}
.prof-new-edit-btn {
background: none !important;
border: 1px solid #2a2a2a !important;
color: #888 !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.65rem !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 0.4rem 1rem !important;
border-radius: 50px !important;
cursor: pointer !important;
white-space: nowrap !important;
}
/* Name */
.prof-new-name {
font-size: 1.1rem !important;
font-weight: 900 !important;
color: #fff !important;
padding: 0 1.2rem 0.1rem !important;
line-height: 1.2 !important;
display: block !important;
font-style: normal !important;
}
.prof-new-handle {
font-size: 0.72rem !important;
color: #444 !important;
padding: 0 1.2rem 0.3rem !important;
display: block !important;
font-style: normal !important;
}
/* Signature */
.prof-new-signature {
font-size: 0.82rem !important;
font-style: italic !important;
color: var(--accent, #cc2222) !important;
padding: 0 1.2rem 0.5rem !important;
line-height: 1.4 !important;
display: block !important;
}
/* Meta */
.prof-new-meta {
font-size: 0.7rem !important;
color: #555 !important;
padding: 0 1.2rem 0.5rem !important;
display: flex !important;
gap: 0.4rem !important;
flex-wrap: wrap !important;
align-items: center !important;
}
/* Tier badge */
.prof-new-tier-wrap {
padding: 0 1.2rem 0.5rem !important;
display: block !important;
}
.prof-new-tier {
font-size: 0.55rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 0.2rem 0.65rem !important;
border-radius: 50px !important;
display: inline-block !important;
}
/* Bio */
.prof-new-bio {
font-size: 0.8rem !important;
color: #888 !important;
line-height: 1.65 !important;
padding: 0 1.2rem 0.7rem !important;
display: block !important;
font-style: normal !important;
}
/* Social links */
.prof-new-socials {
display: flex !important;
gap: 0.6rem !important;
padding: 0 1.2rem 0.8rem !important;
flex-wrap: wrap !important;
}
.prof-new-socials a {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: #111 !important;
border: 1px solid #1e1e1e !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
flex-shrink: 0 !important;
}
.prof-new-socials a svg {
width: 15px !important;
height: 15px !important;
}
/* Stats bar */
.prof-new-stats {
display: flex !important;
border-top: 1px solid #0f0f0f !important;
border-bottom: 1px solid #0f0f0f !important;
background: #000 !important;
}
.prof-new-stat {
flex: 1 !important;
padding: 0.8rem 0 !important;
text-align: center !important;
border-right: 1px solid #0f0f0f !important;
cursor: pointer !important;
}
.prof-new-stat:last-child { border-right: none !important; }
.prof-new-stat-num {
font-size: 1rem !important;
font-weight: 900 !important;
color: #fff !important;
line-height: 1.2 !important;
display: block !important;
}
.prof-new-stat-label {
font-size: 0.55rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #444 !important;
margin-top: 0.1rem !important;
display: block !important;
}
/* Photos */
.prof-new-photos-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0.7rem 1.2rem 0.4rem !important;
}
.prof-new-photos-title {
font-size: 0.55rem !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: #333 !important;
}
.prof-new-photos-add {
background: none !important;
border: none !important;
color: var(--accent, #cc2222) !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
cursor: pointer !important;
}
/* Composer */
.prof-new-composer {
margin: 0.6rem 1rem 0.4rem !important;
background: #0a0a0a !important;
border: 1px solid #141414 !important;
border-radius: 14px !important;
padding: 0.9rem !important;
display: block !important;
}
.prof-new-comp-row {
display: flex !important;
gap: 0.7rem !important;
align-items: flex-start !important;
}
.prof-new-comp-av {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background-color: #1a1a1a !important;
background-size: cover !important;
background-position: center 20% !important;
flex-shrink: 0 !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
color: #fff !important;
}
.prof-new-comp-ta {
flex: 1 !important;
background: none !important;
border: none !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.88rem !important;
outline: none !important;
resize: none !important;
min-height: 42px !important;
padding-top: 0.25rem !important;
line-height: 1.5 !important;
}
.prof-new-comp-ta::placeholder { color: #2a2a2a !important; }
.prof-new-comp-foot {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
margin-top: 0.7rem !important;
padding-top: 0.7rem !important;
border-top: 1px solid #111 !important;
}
/* Tabs */
.prof-new-tabs {
display: flex !important;
border-top: 1px solid #0f0f0f !important;
border-bottom: 1px solid #0f0f0f !important;
margin-top: 0.5rem !important;
background: #000 !important;
}
.prof-new-tab {
flex: 1 !important;
background: none !important;
border: none !important;
border-bottom: 2px solid transparent !important;
color: #444 !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.65rem !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 0.8rem 0 !important;
cursor: pointer !important;
}
.prof-new-tab.active {
color: #fff !important;
border-bottom-color: var(--accent, #cc2222) !important;
}
/* ── COMMUNITY POST CARDS in profile feed ── */
#profFeed .comm-post {
background: #080808 !important;
border: 1px solid #0f0f0f !important;
border-radius: 14px !important;
padding: 0.9rem !important;
margin-bottom: 0 !important;
}
/* ══════════════════════════════════════════════════════
COMMUNITY POSTS — HARD OVERRIDES — MATCHES MOCKUP
══════════════════════════════════════════════════════ */
.comm-feed {
padding: 0.4rem 1rem 5rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
background: #000 !important;
}
.comm-post {
background: rgba(255,255,255,0.02) !important;
border: 1px solid #0f0f0f !important;
border-radius: 14px !important;
padding: 0.9rem !important;
display: block !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
.comm-post-head {
display: flex !important;
align-items: center !important;
gap: 0.65rem !important;
margin-bottom: 0.65rem !important;
}
.comm-post-av {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background-color: #1a1a1a !important;
background-size: cover !important;
background-position: center 20% !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
color: #fff !important;
overflow: hidden !important;
cursor: pointer !important;
}
.comm-post-info {
flex: 1 !important;
min-width: 0 !important;
}
.comm-post-author {
font-size: 16px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
cursor: pointer !important;
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-style: normal !important;
}
.comm-post-time {
font-size: 13px !important;
color: #B0B0B0 !important;
display: block !important;
}
.comm-post-badge {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 0.15rem 0.5rem !important;
border-radius: 50px !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
.cpb-host { background: rgba(204,34,34,0.1) !important; color: #cc2222 !important; border: 1px solid rgba(204,34,34,0.2) !important; }
.cpb-align { background: rgba(200,149,108,0.1) !important; color: #c8956c !important; border: 1px solid rgba(200,149,108,0.2) !important; }
.cpb-slow { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.6) !important; border: 1px solid #1a1a1a !important; }
.cpb-hm { background: rgba(232,180,200,0.1) !important; color: #e8b4c8 !important; border: 1px solid rgba(232,180,200,0.2) !important; }
.comm-post-body {
font-size: 16px !important;
color: #FFFFFF !important;
line-height: 1.5 !important;
margin-bottom: 0.65rem !important;
word-break: break-word !important;
font-style: normal !important;
}
.comm-post-img {
width: 100% !important;
border-radius: 10px !important;
display: block !important;
margin-bottom: 0.65rem !important;
object-fit: cover !important;
max-height: 300px !important;
}
.comm-post-actions {
display: flex !important;
gap: 1.2rem !important;
align-items: center !important;
}
.comm-act-btn {
background: none !important;
border: none !important;
color: #B0B0B0 !important;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 0.3rem !important;
padding: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.comm-act-btn svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
fill: none !important;
stroke-width: 2.0 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.comm-act-btn.liked { color: #cc2222 !important; }
.comm-act-btn.liked svg { fill: #cc2222 !important; stroke: #cc2222 !important; }
/* HMYK section */
.hmyk-section {
background: #000 !important;
padding-bottom: 0.2rem !important;
}
.comm-sec-label {
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.6) !important;
padding: 0.9rem 1.2rem 0.4rem !important;
display: block !important;
}
.hmyk-scroll {
display: flex !important;
gap: 0.75rem !important;
padding: 0.3rem 1.2rem 1rem !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
.hmyk-card {
flex-shrink: 0 !important;
width: 100px !important;
background: #0a0a0a !important;
border: 1px solid #141414 !important;
border-radius: 14px !important;
padding: 0.9rem 0.6rem 0.75rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.35rem !important;
cursor: pointer !important;
}
.hmyk-card-av {
width: 54px !important;
height: 54px !important;
border-radius: 50% !important;
background-color: #1a1a1a !important;
background-size: cover !important;
background-position: center 20% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.9rem !important;
font-weight: 900 !important;
color: #fff !important;
border: 2px solid #1a1a1a !important;
flex-shrink: 0 !important;
}
.hmyk-card-name {
font-size: 13px !important;
font-weight: 600 !important;
color: rgba(255,255,255,0.9) !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: 100% !important;
}
.hmyk-card-meta {
font-size: 12px !important;
color: rgba(255,255,255,0.5) !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: 100% !important;
}
.hmyk-follow-btn {
background: none !important;
border: 1px solid rgba(255,255,255,0.15) !important;
color: #B0B0B0 !important;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
padding: 0.28rem 0.65rem !important;
border-radius: 50px !important;
cursor: pointer !important;
white-space: nowrap !important;
margin-top: 0.1rem !important;
}
.hmyk-follow-btn.following {
border-color: rgba(255,255,255,0.06) !important;
color: #B0B0B0 !important;
cursor: default !important;
}
/* Community composer */
.comm-composer-wrap {
padding: 0.6rem 1rem 0.4rem !important;
}
.comm-composer {
background: rgba(255,255,255,0.02) !important;
border: 1px solid #141414 !important;
border-radius: 14px !important;
padding: 0.9rem !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.comm-composer-row {
display: flex !important;
gap: 0.7rem !important;
align-items: flex-start !important;
}
.comm-comp-av {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background-color: #1a1a1a !important;
background-size: cover !important;
background-position: center 20% !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
color: #fff !important;
overflow: hidden !important;
}
.comm-comp-ta {
flex: 1 !important;
background: none !important;
border: none !important;
color: #fff !important;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
font-size: 16px !important;
outline: none !important;
resize: none !important;
min-height: 42px !important;
padding-top: 0.25rem !important;
line-height: 1.5 !important;
}
.comm-comp-ta::placeholder { color: rgba(255,255,255,0.4) !important; }
.comm-comp-foot {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
margin-top: 0.7rem !important;
padding-top: 0.7rem !important;
border-top: 1px solid #111 !important;
}
.comm-comp-icon {
background: none !important;
border: 1.5px solid #1a1a1a !important;
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
.comm-comp-icon svg {
width: 18px !important;
height: 18px !important;
}
.comm-comp-gif {
background: none !important;
border: 1.5px solid rgba(255,255,255,0.08) !important;
color: #fff !important;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
height: 34px !important;
padding: 0 0.65rem !important;
border-radius: 8px !important;
cursor: pointer !important;
letter-spacing: 0.06em !important;
flex-shrink: 0 !important;
}
.comm-comp-post {
margin-left: auto !important;
background: linear-gradient(135deg, #ff4d4d, #cc0000) !important;
border: none !important;
color: #fff !important;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
height: 34px !important;
padding: 0 1rem !important;
border-radius: 10px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
transition: opacity 0.2s, box-shadow 0.2s !important;
}
.comm-comp-post:hover {
opacity: 0.88 !important;
box-shadow: 0 4px 14px rgba(204,0,0,0.4) !important;
}
/* ── VERIFICATION CONFIRMATION SCREEN ────────────────────────────────────── */
#verifyConfirmScreen {
display: none;
position: fixed;
inset: 0;
z-index: 9100;
background: #000;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 28px 60px;
text-align: center;
overflow-y: auto;
}
.vcs-radial {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 20%, rgba(77,166,255,0.09) 0%, transparent 55%);
pointer-events: none;
}
.vcs-pink-radial {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 30%, rgba(245,163,199,0.04) 0%, transparent 45%);
pointer-events: none;
}
/* Flame wrap */
.vcs-flame-wrap {
position: relative;
width: 120px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
flex-shrink: 0;
}
.vcs-glow-outer {
position: absolute;
inset: -20px;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 62%, rgba(77,166,255,0.14) 0%, rgba(245,163,199,0.06) 50%, transparent 70%);
animation: vcs-pulse 2.8s ease-in-out infinite;
}
.vcs-glow-inner {
position: absolute;
inset: 6px;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 68%, rgba(77,166,255,0.2) 0%, transparent 65%);
animation: vcs-pulse 2.8s ease-in-out infinite 0.5s;
}
@keyframes vcs-pulse {
0%, 100% { opacity: 0.6; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.05); }
}
.vcs-flame-svg {
position: relative;
z-index: 2;
animation: vcs-flicker 2.6s ease-in-out infinite;
transform-origin: 50% 88%;
filter: drop-shadow(0 0 10px rgba(77,166,255,0.4)) drop-shadow(0 0 24px rgba(77,166,255,0.18));
}
@keyframes vcs-flicker {
0% { transform: scaleX(1) scaleY(1) rotate(-0.4deg); }
18% { transform: scaleX(0.95) scaleY(1.03) rotate(0.8deg); }
36% { transform: scaleX(1.03) scaleY(0.97) rotate(-0.5deg); }
54% { transform: scaleX(0.97) scaleY(1.04) rotate(0.7deg); }
72% { transform: scaleX(1.02) scaleY(0.97) rotate(-0.6deg); }
100% { transform: scaleX(1) scaleY(1) rotate(-0.4deg); }
}
/* Text */
.vcs-headline {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
font-size: 28px;
font-weight: 600;
color: #fff;
margin-bottom: 14px;
letter-spacing: -0.3px;
line-height: 1.15;
position: relative;
}
.vcs-body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
line-height: 1.65;
color: rgba(160,200,240,0.7);
margin-bottom: 28px;
max-width: 300px;
position: relative;
}
.vcs-card {
width: 100%;
max-width: 340px;
background: rgba(77,166,255,0.03);
border: 1px solid rgba(77,166,255,0.1);
border-radius: 16px;
padding: 18px 18px;
margin-bottom: 18px;
box-shadow: 0 2px 24px rgba(0,0,20,0.4), inset 0 1px 0 rgba(77,166,255,0.06);
display: flex;
flex-direction: column;
gap: 13px;
position: relative;
}
.vcs-row {
display: flex;
align-items: flex-start;
gap: 12px;
text-align: left;
}
.vcs-pip {
width: 5px;
height: 5px;
border-radius: 50%;
background: #4DA6FF;
flex-shrink: 0;
margin-top: 6px;
box-shadow: 0 0 7px rgba(77,166,255,0.65);
}
.vcs-row-txt {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
font-size: 13px;
color: rgba(160,200,240,0.72);
line-height: 1.5;
}
.vcs-note {
font-size: 11px;
color: rgba(77,166,255,0.28);
margin-bottom: 20px;
line-height: 1.5;
position: relative;
}
.vcs-btn {
width: 100%;
max-width: 340px;
height: 48px;
border-radius: 999px;
background: rgba(77,166,255,0.04);
border: 1px solid rgba(77,166,255,0.22);
color: #4DA6FF;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 18px rgba(77,166,255,0.06), inset 0 1px 0 rgba(77,166,255,0.09);
cursor: default;
position: relative;
}
/* ds-verified flame badge — blue glow */
.ds-verified {
background: linear-gradient(135deg, rgba(10,30,80,0.92), rgba(20,60,140,0.85));
border: 1.5px solid rgba(77,166,255,0.45);
overflow: visible;
}
/* ══════════════════════════════════════════════════════
HERMATCH CARD v2 — APPROVED DESIGN
Replaces old full-screen card layout
══════════════════════════════════════════════════════ */
/* Card wrap — full screen container, flex column */
#hmCardWrap {
display: none;
flex-direction: column;
}
/* Flip container */
.hm-flip-container {
flex: 1;
margin: 10px 10px 6px;
perspective: 1200px;
min-height: 0;
}
/* Flipper */
.hm-flipper {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
will-change: transform;
transition: transform 0.5s ease;
cursor: pointer;
border-radius: 20px;
}
.hm-flipper.is-flipped {
transform: rotateY(180deg);
}
/* Shared face rules */
.hm-front,
.hm-back {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
}
/* ── FRONT ── */
.hm-front {
background: #111;
}
.hm-photo {
position: absolute;
inset: 0;
overflow: hidden;
}
.hm-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
visibility: visible;
opacity: 1;
filter: brightness(1.06) contrast(1.03);
}
.hm-photo img[src=""],
.hm-photo img:not([src]) {
/* fallback gradient when no src */
display: none;
}
.hm-gradient-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.72) 0%,
rgba(0,0,0,0.32) 45%,
rgba(0,0,0,0.08) 70%,
transparent 85%
);
pointer-events: none;
}
.hm-card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 18px 16px;
overflow: hidden;
z-index: 2;
}
.hm-name-line {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 3px;
overflow: visible; /* let flame glow render fully outside box */
}
.hm-name {
font-size: 22px;
font-weight: 700;
color: rgba(255,255,255,0.95);
text-shadow: 0 2px 12px rgba(0,0,0,0.5);
letter-spacing: -0.3px;
}
/* Verified flame — global */
.hm-verified-flame-wrap {
display: inline-flex;
align-items: center;
margin-left: 6px;
overflow: visible;
vertical-align: middle;
flex-shrink: 0;
}
.hm-verified-flame {
display: inline-block;
flex-shrink: 0;
pointer-events: none;
overflow: visible;
transform: translateY(-1px);
}
.hm-identity {
font-size: 15px;
font-weight: 500;
color: rgba(255,255,255,0.95);
margin-bottom: 4px;
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.hm-quote {
font-size: 15px;
font-style: italic;
font-weight: 400;
color: rgba(255,255,255,0.95);
line-height: 1.45;
margin-bottom: 9px;
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Pills */
.hm-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
margin-bottom: 8px;
overflow: hidden;
max-height: 80px;
position: relative;
z-index: 2;
}
.hm-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
padding: 8px 14px 8px 10px;
border-radius: 999px;
color: rgba(255,255,255,0.95);
border: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.hm-pill::after {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
pointer-events: none;
}
.hm-pill-love {
background: linear-gradient(135deg, #8a5cff, #c86dd7);
box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 18px rgba(200,120,255,0.25);
}
.hm-pill-kids {
background: linear-gradient(135deg, #ff7a7a, #d94b6a);
box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 18px rgba(255,100,120,0.25);
}
.hm-pill-attach {
background: linear-gradient(135deg, #ff7a7a, #b23a48);
box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 18px rgba(255,90,100,0.25);
}
/* Icon — no background circle, SVG sits directly on pill */
.hm-pill-icon {
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hm-pill-love .hm-pill-icon,
.hm-pill-kids .hm-pill-icon,
.hm-pill-attach .hm-pill-icon {
background: none;
}
/* Tap hint */
/* Message bubble slide-in — realtime append */
@keyframes hmMsgSlideIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.hm-tap-hint {
text-align: center;
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.35);
letter-spacing: 0.12em;
margin-top: 4px;
animation: hm-hintpulse 2.6s ease-in-out infinite;
}
@keyframes hm-hintpulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.7; }
}
/* ── BACK ── */
.hm-back {
background: #f0eae4;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
/* Offset top to clear fixed nav (28px status + 56px nav = 84px + safe-area) */
padding-top: calc(84px + env(safe-area-inset-top, 0px));
}
/* Flame must never appear on the back face */
.hm-back .hm-verified-flame { display: none !important; }
.hm-back-header {
background: #fff;
padding: 14px 16px 12px;
border-bottom: 1px solid rgba(0,0,0,0.08);
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.hm-back-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 0 0 2.5px #9F2F4F;
flex-shrink: 0;
overflow: hidden;
background: linear-gradient(135deg,#2a0a1a,#1a0510);
flex-shrink: 0;
}
.hm-back-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 50%;
display: block;
}
.hm-back-name {
font-size: 16px;
font-weight: 800;
color: #111;
}
.hm-back-sub {
font-size: 11px;
color: rgba(0,0,0,0.4);
margin-top: 2px;
}
.hm-back-scroll {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 18px;
-webkit-overflow-scrolling: touch;
}
.hm-back-scroll::-webkit-scrollbar { display: none; }
/* Back sections */
.hm-back-section { display: flex; flex-direction: column; gap: 4px; }
.hm-section-label {
font-size: 10px;
font-weight: 800;
color: rgba(0,0,0,0.45);
text-transform: uppercase;
letter-spacing: 0.13em;
margin-bottom: 5px;
}
.hm-section-quote {
font-size: 14px;
font-style: italic;
color: #1a1a1a;
line-height: 1.6;
padding-left: 10px;
border-left: 2.5px solid #9F2F4F;
}
.hm-field-list { display: flex; flex-direction: column; }
.hm-field-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 5px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
font-size: 12px;
}
.hm-field-row:last-child { border-bottom: none; }
.hm-field-key {
color: rgba(0,0,0,0.55);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.01em;
}
.hm-field-val {
color: #111;
font-weight: 600;
font-size: 14px;
text-align: right;
max-width: 58%;
}
.hm-back-body-txt {
font-size: 13px;
color: #1a1a1a;
line-height: 1.6;
}
.hm-tag-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.hm-tag {
background: rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.1);
border-radius: 999px;
padding: 3px 10px;
font-size: 12px;
color: rgba(0,0,0,0.5);
font-weight: 600;
}
.hm-nonneg {
background: rgba(220,80,120,0.06);
border: 1px solid rgba(220,80,120,0.18);
border-radius: 12px;
padding: 11px 13px;
}
.hm-nonneg-label {
font-size: 9px;
font-weight: 700;
color: rgba(180,50,80,0.8);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.hm-nonneg-text {
font-size: 12px;
font-weight: 500;
color: rgba(160,40,80,0.9);
line-height: 1.5;
}
/* Back footer */
.hm-back-footer {
background: #fff;
padding: 10px 16px 14px;
border-top: 1px solid rgba(0,0,0,0.07);
flex-shrink: 0;
}
.hm-back-btn {
width: 100%;
height: 38px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(0,0,0,0.12);
color: rgba(0,0,0,0.4);
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: 'Inter', sans-serif;
}
/* ── ACTION BUTTONS ── */
.hm-action-row {
flex-shrink: 0;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding-bottom: 18px;
background: #000;
}
.hm-btn-x {
width: 72px;
height: 72px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
box-shadow: 0 4px 18px rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
}
.hm-btn-heart {
width: 72px;
height: 72px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #ff7a7a, #b23a48);
color: #fff;
box-shadow:
0 8px 28px rgba(255,90,90,0.5),
0 0 50px rgba(255,120,120,0.35);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
animation: hmHeartPulse 3s ease-in-out infinite;
}
@keyframes hmHeartPulse {
0%,100% {
box-shadow:
0 6px 24px rgba(255,90,90,0.45),
0 0 30px rgba(255,120,120,0.25);
}
50% {
box-shadow:
0 10px 36px rgba(255,90,90,0.65),
0 0 65px rgba(255,120,120,0.5);
}
}
.hm-btn-x:active, .hm-btn-heart:active { transform: scale(0.95); }
/* Incomplete profile fallback */
.hm-incomplete {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
text-align: center;
background: linear-gradient(160deg,#1a0510,#2a0a1a);
}
.hm-incomplete-name {
font-size: 22px;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
}
.hm-incomplete-msg {
font-size: 13px;
color: rgba(255,255,255,0.4);
line-height: 1.6;
}
/* ── ROSE INDICATOR — HerMatch Plus + Alignment only ── */
.hm-card-rose {
position: absolute;
top: 14px;
right: 14px;
font-size: 22px;
z-index: 6;
pointer-events: none;
animation: hmRoseGlow 2.4s ease-in-out infinite;
}
@keyframes hmRoseGlow {
0%,100% {
transform: scale(1);
filter: drop-shadow(0 0 4px rgba(255,122,122,0.4));
}
50% {
transform: scale(1.08);
filter: drop-shadow(0 0 12px rgba(255,122,122,0.85));
}
}
/* Rose must never appear on back face */
.hm-back .hm-card-rose { display: none !important; }