/* --------------------------------------------------------------------------- * site.css — shared styles for every page. * Moved verbatim out of templates/header.php; nothing here was restyled. * Page-specific CSS (e.g. world-map.css) loads after this via $pageCss. * ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- * PALETTE — liveporncamx.com * * Green is kept: it is the existing brand AND it already matches the Chaturbate * whitelabel on www., so click-through has no colour jump. What changed is the * execution. The old theme was a harsh green on flat #000 with no depth; this * is a proper dark surface ramp (bg < panel < card) with green demoted to an * ACCENT — nav underline, CTA, links, goal bar — rather than a background. * * --live is RED on purpose. On a green-accented site the old green "online" * dot fought the green accent and stopped reading as a status. Broadcast red * is the universal live signal, gives the grid a second colour, and is the * clearest visual break from livesexcam.me's navy+pink. * * --pink / --pink2 are kept as ALIASES: 76 existing rules across 11 files call * them by name. Redefining the value here retints all of them at once, with no * risk of a missed selector. New rules should use --accent / --accent2. * ------------------------------------------------------------------------ */ :root{ /* surfaces — a ramp, not one flat black */ --bg:#0B1410; --panel:#101D16; --card:#13251B; --header:#0C1712; --sidebar:#08110C; --border:#223B2C; /* text */ --text:#E4EDE7; --muted:#82998C; /* brand accent */ --accent:#25C765; --accent2:#4FE38C; --accent-deep:#128C48; /* status */ --live:#E0113A; --gold:#F0A035; /* legacy aliases — existing var(--pink) rules retint through these */ --pink:var(--accent); --pink2:var(--accent2); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px} a{color:inherit;text-decoration:none} /* ---------- header ---------- */ .top{background:var(--header);border-bottom:1px solid var(--border); display:flex;align-items:center;gap:20px;padding:10px 18px;position:sticky;top:0;z-index:50} .logo{font-weight:800;font-size:23px;letter-spacing:-1px;white-space:nowrap; display:flex;align-items:center;gap:9px} /* Webcam mark. Sized in em so it tracks the wordmark wherever .logo is restyled (header, mobile drawer) instead of needing a second rule each time. */ .logo-cam{width:1.25em;height:1.25em;flex:0 0 auto;overflow:visible} .logo-cam .lc-body{fill:#8FA6B8} .logo-cam .lc-ring{fill:#5B7488} .logo-cam .lc-lens{fill:#1B2A36} .logo-cam .lc-glint{fill:#E8F0F6;opacity:.9} .logo-cam .lc-base{fill:#5B7488;opacity:.55} .logo-cam .lc-stem{stroke:#5B7488;stroke-width:2.6;stroke-linecap:round} .logo .dot{color:var(--pink)} .logo .net{background:var(--pink);color:#fff;font-size:11px;padding:2px 7px;border-radius:10px;margin-left:3px;vertical-align:middle} .online-pill{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap} .online-dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite} @keyframes pulse{50%{opacity:.35}} .online-pill b{color:var(--text)} .searchbar{flex:1;max-width:520px;position:relative} .searchbar input{width:100%;background:var(--panel);border:1px solid var(--border);color:var(--text); padding:9px 38px 9px 14px;border-radius:20px;outline:none;font-size:13px} .searchbar input:focus{border-color:var(--pink)} .searchbar button{position:absolute;right:4px;top:3px;background:none;border:0;color:var(--muted); cursor:pointer;padding:5px 9px;font-size:14px} .top-right{margin-left:auto;display:flex;gap:10px;align-items:center} .btn-ghost{border:1px solid var(--pink);color:var(--pink);padding:7px 14px;border-radius:18px; font-size:12px;font-weight:700;white-space:nowrap} .btn-ghost:hover{background:var(--pink);color:#fff} /* nav. Same scrollbar treatment as .tagbar: this scrolls sideways on narrow viewports, and without these it gets Chrome's native grey track between about 900px (where the mobile CSS takes over) and roughly 1100px. */ .nav2{background:var(--panel);border-bottom:1px solid var(--border);display:flex;gap:2px; padding:0 18px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .nav2::-webkit-scrollbar{display:none} .nav2 a{padding:11px 15px;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--muted); text-transform:uppercase;border-bottom:2px solid transparent;white-space:nowrap} .nav2 a:hover{color:var(--text)} .nav2 a.on{color:var(--pink);border-bottom-color:var(--pink)} /* ---------- layout ---------- */ .shell{display:flex;align-items:flex-start} .sidebar{width:210px;flex:0 0 210px;background:var(--sidebar);border-right:1px solid var(--border); min-height:100vh;padding-bottom:30px} .side-h{display:flex;align-items:center;gap:8px;padding:14px 16px;color:var(--pink); font-weight:800;font-size:13px;letter-spacing:.5px;text-transform:uppercase; border-bottom:1px solid var(--border)} .side-sec{border-bottom:1px solid var(--border)} .side-sec>summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:12px;font-weight:700; letter-spacing:.5px;text-transform:uppercase;color:var(--text);display:flex;align-items:center; justify-content:space-between;gap:10px} /* Section icons are inline SVG, not an icon font or a second CDN: they inherit currentColor, so they pick up the muted/hover/open states for free and cost no extra request. The label wrapper keeps icon and text on one line while the chevron stays pinned right. */ .side-sec>summary .sec-t{display:flex;align-items:center;gap:9px;min-width:0} .sec-i{width:16px;height:16px;flex:0 0 auto;color:var(--muted);transition:color .15s} .side-sec[open]>summary .sec-i,.side-sec>summary:hover .sec-i{color:var(--pink2)} .side-h .sec-i{width:15px;height:15px;color:var(--pink)} .side-sec>summary::-webkit-details-marker{display:none} .side-sec>summary:after{content:"⌄";color:var(--muted);font-size:14px} .side-sec[open]>summary:after{content:"⌃"} .side-list{padding:0 8px 12px} .side-list a{display:flex;justify-content:space-between;align-items:center;gap:6px; padding:6px 8px;border-radius:6px;font-size:12.5px;color:var(--muted)} .side-list a:hover{background:var(--card);color:var(--text)} .side-list a.on{background:var(--pink);color:#fff} .side-list a .n{font-size:11px;opacity:.7} /* flag + label share a row; the flag keeps a fixed box so labels line up regardless of how wide each flag renders */ .side-list a .lbl{display:flex;align-items:center;gap:7px;min-width:0} .side-list a .lbl span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi{width:1.25em;line-height:1em;border-radius:2px;flex:0 0 auto} .chip .fi{margin-right:6px;vertical-align:-0.15em} /* footer link on a facet list ("More countries") */ .side-more{display:block;margin:6px 8px 0;padding:7px;text-align:center;font-size:12px; font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:8px} .side-more:hover{border-color:var(--pink);color:var(--text)} .chipwrap{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px} .chip{border:1px solid var(--border);border-radius:14px;padding:5px 11px;font-size:12px;color:var(--muted)} .chip:hover{border-color:var(--pink);color:var(--text)} .chip.on{background:var(--pink);border-color:var(--pink);color:#fff} .main{flex:1;min-width:0;padding:14px 18px 40px} /* tag bar — horizontally scrollable, drag to pan. NO VISIBLE SCROLLBAR. This used to set scrollbar-width:thin plus a styled ::-webkit-scrollbar, which looked right on macOS and in older Chrome. Chrome 121+ implements the standard scrollbar-width property, and the STANDARD one wins over the -webkit- pseudo-elements — so Chrome on Windows drew a native grey track with arrow buttons and ignored the 6px thumb entirely. All three properties are needed; no single one covers every engine: scrollbar-width Firefox, Chrome 121+ -ms-overflow-style old Edge ::-webkit-scrollbar Safari, older Chrome The mask fades the last chip at the right edge. With the scrollbar gone it is the only cue that the row scrolls at all — site.js already handles the drag-to-pan, but nothing else says "there is more over here". */ .tagbar{display:flex;gap:8px;overflow-x:auto;padding:0 0 12px; scrollbar-width:none;-ms-overflow-style:none; cursor:grab;user-select:none;scroll-behavior:smooth; -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent); mask-image:linear-gradient(90deg,#000 93%,transparent)} .tagbar.drag{cursor:grabbing;scroll-behavior:auto} .tagbar::-webkit-scrollbar{display:none} .tagbar a{flex:0 0 auto;border:1px solid var(--border);border-radius:6px;padding:5px 12px; font-size:12.5px;color:var(--muted);white-space:nowrap} .tagbar a:hover{border-color:var(--pink);color:var(--text)} .tagbar a.on{background:var(--pink);border-color:var(--pink);color:#fff} h1.page{font-size:19px;margin:6px 0 2px} h1.page .cnt{color:var(--pink)} .sub{color:var(--muted);font-size:12.5px;margin-bottom:14px} .sechead{font-size:14px;font-weight:800;margin:18px 0 10px;display:flex;align-items:center;gap:8px} /* ---------- grid ---------- */ /* Card grid. auto-fill + minmax rather than a fixed column count: the browser fits as many as the container allows, so a laptop, a 1080p monitor and an ultrawide each get a sensible number instead of six enormous or six cramped cards. The minimum is the only real dial. 215px produced 7 columns on a 1690px content area; 250px produces 6 at ~271px, which is roughly 17% more thumbnail. On a cam site the thumbnail IS the product, so bigger wins as long as it does not push the second row off screen — at this size it does not. */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .card{background:var(--card);border:1px solid var(--border);border-radius:9px;overflow:hidden; transition:transform .12s,border-color .12s} .card:hover{transform:translateY(-2px);border-color:var(--pink)} .thumb{position:relative;aspect-ratio:4/3;background:#1a2540;overflow:hidden} .thumb img{width:100%;height:100%;object-fit:cover;display:block} .thumb iframe,.thumb video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:transparent;z-index:2} /* The still is only hidden once a video stream is actually playing. Image previews swap in place on the same , so it must stay visible. NO TRANSITION ON THE FADE-IN. There used to be `transition:opacity .2s` on the video/iframe, and it caused the blank flash on BongaCams and Stripchat: `.playing` hides the still INSTANTLY while the video took 200ms to reach full opacity, so for those 200ms the card showed neither. Both layers now switch at the same moment. Chaturbate never had this because it swaps img.src in place and never sets `.playing`. (This is also what the `iframe-preview` class in preview.js was for - it adds and removes it, and its comment says it disables the cross-fade, but the rule was never written. Removing the fade outright covers both.) */ .card.playing .thumb img{opacity:0} /* only once the stream really plays */ .card.previewing .thumb video,.card.previewing .thumb iframe{opacity:0} .card.playing .thumb video,.card.playing .thumb iframe{opacity:1} .card.previewing,.card.previewing-img{border-color:var(--pink)} .card.previewing-img .thumb img{opacity:1} /* img preview swaps in place */ .badge-live{position:absolute;top:7px;left:7px;background:var(--pink);color:#fff;font-size:10px; font-weight:800;padding:3px 8px;border-radius:10px;display:flex;align-items:center;gap:5px;letter-spacing:.4px} .blink{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite} .hd{position:absolute;top:7px;right:7px;background:#2EAFE9;color:#062033;font-size:9.5px; font-weight:800;padding:2px 6px;border-radius:5px} .viewers{position:absolute;bottom:7px;left:7px;background:rgba(0,0,0,.65);color:#fff;font-size:11px; padding:3px 8px;border-radius:9px;display:flex;align-items:center;gap:4px} .srcbadge{position:absolute;bottom:7px;right:7px;background:rgba(0,0,0,.65);color:#cfd6e4; font-size:9.5px;padding:3px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.3px} .info{padding:8px 10px;display:flex;align-items:center;gap:8px} .av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 26px;background:#22304f} .meta{min-width:0} .name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .country{color:var(--muted);font-size:11.5px} .pager{display:flex;gap:6px;justify-content:center;margin:22px 0;flex-wrap:wrap} .pager a,.pager span{padding:6px 12px;border-radius:7px;border:1px solid var(--border);font-size:13px} .pager .cur{background:var(--pink);border-color:var(--pink);color:#fff} @media(max-width:900px){ .sidebar{display:none} .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .searchbar{max-width:none} } /* Foldables / large portrait tablets (Galaxy Fold ~884px, iPad ~834px). Two things happen in this 700-900px band: 1. GRID — the auto-fill above packs 4-5 tiny cards across; cap it at 3 so each card is tablet-sized and the thumbnails are legible. 2. TYPE SCALE — the whole site is drawn at phone sizes (10-13px), which reads small on a tablet now that the cards and bottom bar are bigger. Bump the CONTENT text a clear step (nav, tags, title, subtitle, section heads, model name + country, avatar). The thumbnail OVERLAY badges (LIVE/HD/views/src) are only nudged — they are secondary tags sitting ON the image and look clunky if enlarged much. Phones (<700px) and desktop (>900px) are untouched. */ @media(min-width:700px) and (max-width:900px){ .grid{grid-template-columns:repeat(3,1fr)} /* content text */ .nav2 a{font-size:14px} .tagbar a{font-size:14px} h1.page{font-size:24px} .sub{font-size:14px} .sechead{font-size:16px} .name{font-size:15px} .country{font-size:12.5px} .av{width:30px;height:30px;flex:0 0 30px} /* thumbnail overlay badges — small nudge only, they stay secondary */ .badge-live{font-size:11px} .viewers{font-size:12.5px} .hd{font-size:10.5px} .srcbadge{font-size:10.5px} /* pagination controls — bigger text and tap targets on a tablet */ .pager a,.pager span{font-size:14.5px;padding:8px 14px} } /* ---------- performer page: roulette arrows ---------- Stacked bottom-right over the player, where chococams puts them. Hidden in markup until performer.js binds, so they never render as dead controls. */ .pf-nav{position:absolute;right:14px;bottom:14px;z-index:6; display:flex;flex-direction:column;gap:9px} .pf-nav button{width:46px;height:44px;padding:0;line-height:1;font-size:19px; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.3); border-radius:8px;cursor:pointer;transition:background .12s,border-color .12s} .pf-nav button:hover:not(:disabled){background:var(--pink);border-color:var(--pink)} .pf-nav button:disabled{opacity:.3;cursor:default} /* Native