:root{ --radius:20px; --shadow:0 10px 30px rgba(0,0,0,.12); --bg:#0b0d10; --card:#131c26; --muted:#99a3b5; --ok:#22c55e; --chip:#1a2632; --chip-border:#243240; --text:#f2f6fc; --accent:#6ea8fe; --accent-2:#94b5ff; } body.gender-f { --accent:#ff6ec7; --accent-2:#ff9ade; } body.gender-m { --accent:#6ea8fe; --accent-2:#94c0ff; } body.gender-c { --accent:#f59e0b; --accent-2:#fbbf24; } body.gender-s { --accent:#34d399; --accent-2:#6ee7b7; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:linear-gradient(180deg,#0c0f14, #10141b 20%, #0b0d10); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:17px; line-height:1.65; } .container{ max-width:1100px; margin:clamp(0px,4vw,0px) auto; padding:clamp(12px,2vw,24px); } .grid{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns: 1fr; } @media (min-width: 900px){ .grid{ grid-template-columns: 360px 1fr; align-items:stretch; } } .card{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--card); border:1px solid #131a22; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .media{ position:relative; aspect-ratio:1/1; background:#0b0d10; display:flex; align-items:center; justify-content:center; } .media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; } .media:hover img{ transform:scale(1.03); } .badges{ position:absolute; top:12px; left:12px; display:flex; gap:8px; flex-wrap:wrap; } .badge{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.2px; color:#0b0d10; background:var(--accent); border:1px solid rgba(255,255,255,.25); text-transform:uppercase; } .badge.hd{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); } .badge.show{ background:#fff; color:#0b0d10; } .profile{ padding:clamp(16px,2vw,24px); display:flex; flex-direction:column; gap:14px; } .title{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .display{ font-size:clamp(26px,4vw,40px); line-height:1.1; font-weight:800; letter-spacing:.2px; margin:0; overflow-wrap: break-word; word-break: break-all; } .username{ font-size:14px; color:var(--muted); } .pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; } .pill{ background:var(--chip); border:1px solid var(--chip-border); color:var(--text); padding:6px 10px; border-radius:999px; font-size:15px; } .meta{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); } .meta .row{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--chip); border:1px solid var(--chip-border); padding:12px 14px; border-radius:14px; display:flex; align-items:center; gap:10px; overflow-wrap: break-word; word-break: break-all; } .k{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.5px; } .v{ font-weight:600; font-size:15px; } .subject{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)), var(--chip); border:1px solid var(--chip-border); border-radius:14px; padding:16px; font-size:clamp(16px,2.1vw,20px); } .subject strong{ color:var(--accent-2); } .tags{ display:flex; flex-wrap:wrap; gap:10px; } .tag{ background:transparent; border:1px dashed var(--chip-border); color:var(--text); padding:8px 12px; border-radius:999px; font-size:15px; } .btn{ appearance:none; border:none; cursor:pointer; text-decoration:none; text-align:center; padding:12px 18px; border-radius:12px; font-weight:700; letter-spacing:.3px; transition:transform .1s ease, box-shadow .2s ease, background .3s ease, color .3s ease; } .btn.primary{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0d10; box-shadow:0 8px 20px rgba(0,0,0,.25); } .btn.primary:active{ transform:translateY(1px); } .btn.ghost{ border:1px solid var(--chip-border); background:var(--chip); color:var(--text); } .actions { display: flex; flex-wrap: nowrap; gap: 0; width: 100%; } .actions .btn { flex: 1 1 50%; text-align: center; border-radius: 0; } .actions .btn:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .actions .btn:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .actions .btn { flex: 1 1 50%; text-align: center; border-radius: 0; transition: all 0.3s ease; } .actions .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1), 0 0 15px var(--accent); } .footer{ margin-top:18px; color:var(--muted); font-size:12px; text-align:center; } .ring{ position:absolute; inset:-1px; pointer-events:none; border-radius:inherit; box-shadow: 0 0 0 2px rgba(110,168,254,.08), 0 0 40px rgba(110,168,254,.10); } body.gender-f .ring{ box-shadow: 0 0 0 2px rgba(255,110,199,.10), 0 0 40px rgba(255,110,199,.12); } body.gender-m .ring{ box-shadow: 0 0 0 2px rgba(110,168,254,.10), 0 0 40px rgba(110,168,254,.12); } body.gender-c .ring{ box-shadow: 0 0 0 2px rgba(245,158,11,.12), 0 0 40px rgba(245,158,11,.14); } body.gender-s .ring{ box-shadow: 0 0 0 2px rgba(52,211,153,.12), 0 0 40px rgba(52,211,153,.16); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .media{ aspect-ratio:auto; display:block; padding:0; } .media .gallery{ display:grid; gap:8px; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); } .media .gallery a:first-child{ grid-column: 1 / -1; height: clamp(200px, 40vw, 420px); } .media .gallery a:not(:first-child){ display:none; } .media .gallery a{ overflow:hidden; } #gallery-top a:first-child { position:relative; } #gallery-top a:first-child .photo-count { position:absolute; right:10px; top:10px; background:rgba(0,0,0,0.6); color:#fff; padding:4px 8px; border-radius:12px; font-size:12px; font-weight:600; pointer-events:none; } .media .gallery a img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .media .gallery a:hover img{ transform:scale(1.05); } .display{ font-size:clamp(28px,5vw,44px); } .pswp-thumbnails-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; background: rgba(0,0,0,.6); display: flex; justify-content: center; z-index: 10000; overflow-x: auto; box-sizing: border-box; } .pswp-thumbnails-container { display: flex; gap: 8px; align-items: center; } .pswp-thumbnail { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; opacity: .7; outline: 2px solid transparent; cursor: pointer; transition: opacity .2s, transform .2s, outline-color .2s; } .pswp-thumbnail:hover { opacity: 1; transform: translateY(-2px); } .pswp-thumbnail-active { opacity: 1; outline-color: #fff; } .pswp-thumbnails-bar{ display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pswp-thumbnails-bar::-webkit-scrollbar{ display: none; } .pswp-thumbnails-bar .pswp-thumbnail, .pswp-thumbnails-bar .pswp__thumbnail, .pswp-thumbnails-bar .pswp__thumb, .pswp-thumbnails-bar a, .pswp-thumbnails-bar button{ flex: 0 0 auto; width: clamp(72px, 12vw, 128px); aspect-ratio: 4 / 3; scroll-snap-align: center; display: block; border: 0; padding: 0; background: none; box-sizing: border-box; } .pswp-thumbnails-bar img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; } .top-nav { width: 100%; padding: 12px 0; background: var(--card); text-align: center; } .top-nav-inner { display: flex; justify-content: center; align-items: center; } .top-nav-inner .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; } .top-nav-inner .nav-menu a { text-decoration: none; color: var(--text); font-weight: 600; padding: 8px 12px; border-radius: 8px; transition: color .2s ease; } .top-nav-inner .nav-menu a:hover { color: var(--accent); } .top-nav-inner .nav-menu a[aria-current="page"] { color: var(--accent); cursor: default; }