/* ========================================================================== CINVORA — one stylesheet for the whole site. Store, profiles, success page and policy pages all pull from here so nothing drifts. Mobile first: nearly all the traffic is a phone off an ad. ========================================================================== */ /* ── theming ─────────────────────────────────────────────────────────────── :root is LIGHT and [data-theme="dark"] overrides it. That is the same shape the model pages already use, and both read the same localStorage key ('theme') and the same attribute on - so a choice made on the store is still in force on a model page and back again. Do not flip the two around: the model pages would then disagree with the store on what a bare with no attribute means, and one of them would boot in the wrong colours for a frame. --bg-rgb / --fg-inv exist so the translucent sticky bars and the "on" chip can follow the theme without a second rule per element. ───────────────────────────────────────────────────────────────────────── */ :root{ --bg:#ffffff; --card:#ffffff; --card2:#f3f3f6; --line:#e6e6ee; --line2:#d6d6e0; --fg:#111114; --dim:#5e5e6b; --dim2:#87879a; --bg-rgb:255,255,255; --fg-inv:#ffffff; --pink:#e8317a; --pink2:#f0538e; --ok:#12a06b; --gold:#b57b00; --grad:linear-gradient(96deg,#e8317a,#f0538e); --shadow:0 18px 40px -22px rgba(17,17,20,.28); } [data-theme="dark"]{ --bg:#06060a; --card:#14141c; --card2:#1b1b25; --line:#262631; --line2:#33333f; --fg:#f4f4f7; --dim:#9b9baa; --dim2:#6a6a79; --bg-rgb:6,6,10; --fg-inv:#06060a; --pink:#e8317a; --pink2:#f0538e; --ok:#34d399; --gold:#f0a500; --shadow:0 18px 40px -20px rgba(0,0,0,.85); } html{color-scheme:light dark;} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;} body{ margin:0;background:var(--bg);color:var(--fg); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden; } a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;} button{font:inherit;} /* touch-action:manipulation removes the ~300ms wait a mobile browser makes after every tap while it checks for a second tap (double-tap-to-zoom). It is the single biggest reason buttons feel slow on a phone, and costs nothing to switch off - the page is already width=device-width, so there is nothing sensible to double-tap-zoom into. */ a,button,[onclick],[role="button"],.chip,.cta,.btn{touch-action:manipulation;} /* Anything the person has to scroll to does not need to be laid out until they get there. Skipped where unsupported, so nothing is lost. */ footer{content-visibility:auto;contain-intrinsic-size:auto 320px;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;} } .wrap{max-width:1240px;margin:0 auto;padding:0 20px;} .narrow{max-width:720px;} /* ── nav ────────────────────────────────────────────────────────────────── */ .bar{position:sticky;top:0;z-index:60;background:rgba(var(--bg-rgb),.82); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);} .bar .in{display:flex;align-items:center;gap:14px;height:64px; max-width:1240px;margin:0 auto;padding:0 20px;} /* Wordmark plus a mark: a speech bubble with a heart in it. Reads as "conversation" and "someone", which is what this is, without being explicit about it - the same reason the palette is warm rather than red. */ .logo{display:inline-flex;align-items:center;gap:9px; font-size:21px;font-weight:800;letter-spacing:-.025em;text-transform:none; line-height:1;color:var(--fg);} .logo .mark{width:27px;height:27px;flex:0 0 auto;} /* The wordmark is ONE flex item. It has to be: .logo is inline-flex with a gap, so a bare "Cin" text node and a vora were two items and the 9px gap landed in the middle of the word - CIN VORA. Wrapping both in .wm means the gap only ever separates the mark from the text. */ .logo .wm{font-weight:800;font-style:normal;white-space:nowrap;} .logo .wm i{font-style:normal;color:var(--pink);} .navlinks{margin-left:auto;display:flex;align-items:center;gap:20px;} .navlinks a{font-size:13.5px;font-weight:600;color:var(--dim);} .navlinks a:hover{color:var(--fg);} .barcta{padding:9px 17px;border-radius:999px;background:var(--pink); color:#fff!important;font-size:13px;font-weight:700;} .back{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--dim);} @media(max-width:640px){ .navlinks a:not(.barcta){display:none;} } /* ── theme toggle ─────────────────────────────────────────────────────────── Sits inside the bar as a flex item, to the right of "See models" - not position:fixed. A fixed circle at top-right lands on top of whatever the bar already has there, which is exactly the collision the model pages had. */ .themebtn{flex:0 0 auto;margin-left:14px;width:36px;height:36px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;cursor:pointer; background:var(--card2);border:1px solid var(--line);color:var(--fg); transition:background .18s,border-color .18s;padding:0;} .themebtn:hover{border-color:var(--line2);} .themebtn svg{width:17px;height:17px;fill:currentColor;display:block;} .themebtn .moon-icon{display:none;} [data-theme="dark"] .themebtn .sun-icon{display:none;} [data-theme="dark"] .themebtn .moon-icon{display:block;} /* ── buttons ────────────────────────────────────────────────────────────── */ .btn{display:inline-block;padding:14px 26px;border-radius:999px;border:0; background:var(--grad);color:#fff;font-size:15px;font-weight:800;cursor:pointer; box-shadow:0 10px 26px -12px rgba(232,49,122,.9);transition:transform .14s;} .btn:hover{transform:translateY(-1px);} .btn.block{display:block;width:100%;text-align:center;} .btn.ghost{background:none;border:1px solid var(--line2);color:var(--fg);box-shadow:none;} .note{display:block;margin-top:10px;font-size:12px;color:var(--dim2);text-align:center;} /* ── section heads ──────────────────────────────────────────────────────── */ .head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:46px 0 18px;} .head h2{margin:0;font-size:clamp(20px,4.6vw,27px);font-weight:800;letter-spacing:-.025em;} .head p{margin:5px 0 0;font-size:13.5px;color:var(--dim);} .count{font-size:12px;color:var(--dim2);font-weight:700;white-space:nowrap;} /* ── girl cards (store grid) ────────────────────────────────────────────── */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:20px;} .g{position:relative;background:var(--card);border:1px solid var(--line); border-radius:22px;overflow:hidden;display:flex;flex-direction:column; transition:transform .18s cubic-bezier(.4,0,.2,1),border-color .18s,box-shadow .18s;} .g:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow);} /* padding-box ratio, not aspect-ratio. Chrome only shipped aspect-ratio in 88 and a lot of Android phones in India are older than that - on those the box collapses to zero height and the photo simply does not appear, which is exactly the "images are gone on my phone" symptom. This works everywhere. */ .shot{position:relative;display:block;height:0;padding-top:125%;overflow:hidden;background:var(--card2);} .shot img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1);} .g:hover .shot img{transform:scale(1.045);} .shot::after{content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(6,6,10,.94) 0%,rgba(6,6,10,.42) 28%,transparent 55%);} .badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px; padding:6px 11px;border-radius:999px;background:rgba(6,6,10,.72);backdrop-filter:blur(8px); border:1px solid rgba(52,211,153,.34);font-size:11px;font-weight:700;color:#34d399;} .badge i{width:6px;height:6px;border-radius:50%;background:#34d399;display:block;} .badge.new{border-color:rgba(251,191,36,.4);color:#f0a500;} .badge.new i{background:#f0a500;} .rate{position:absolute;top:12px;right:12px;z-index:2;padding:6px 11px;border-radius:999px; background:rgba(6,6,10,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14); font-size:11.5px;font-weight:700;color:#fff;} .rate b{color:var(--gold);} .ontop{position:absolute;left:15px;right:15px;bottom:13px;z-index:2;} .ontop h3{margin:0;font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1.1;} .ontop .sub{margin-top:3px;font-size:12.5px;color:#c9c9d4;font-weight:500;} .body{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1;} .bio{margin:0;font-size:14px;line-height:1.58;color:var(--dim);} .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;} .tag{padding:5px 10px;border-radius:8px;background:var(--card2);border:1px solid var(--line); font-size:11px;font-weight:600;color:var(--dim);} .pics{position:absolute;left:14px;bottom:13px;z-index:2;display:inline-flex;align-items:center;gap:6px; padding:5px 10px;border-radius:999px;background:rgba(6,6,10,.62);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15);font-size:11.5px;font-weight:700;color:#fff;} .ontop{left:15px;right:15px;bottom:44px;} .foot{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line);} .tags{margin-bottom:15px;} .price b{font-size:19px;font-weight:800;letter-spacing:-.02em;} .price span{display:block;font-size:11px;color:var(--dim2);font-weight:600;margin-top:1px;} .cta{margin-left:auto;padding:12px 20px;border-radius:999px;background:var(--grad);color:#fff; font-size:14px;font-weight:800;white-space:nowrap;box-shadow:0 8px 22px -10px rgba(232,49,122,.85); transition:transform .14s;} .g:hover .cta{transform:translateY(-1px);} /* One link stretched over the whole card. A 100px-wide "Chat now" pill is easy to miss with a thumb; this makes a tap anywhere on the card work. */ .cardlink{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5; display:block;text-indent:-9999px;overflow:hidden;} /* ── phones: two per row ────────────────────────────────────────────────── One card per row meant scrolling past a whole screen to see who else was there, and most people never got to the third. Three per row on a 400px phone is ~115px a card, which turns a face into a thumbnail. Two is the only width where you can see everyone and still see who they are. The bio and tags come off at this size - there is no room for them, and the photo plus the name is what actually gets the tap. Both are still on her own page, one tap away. */ @media(max-width:700px){ .grid{grid-template-columns:1fr 1fr;gap:12px;} .g{border-radius:18px;} .body{padding:11px 12px 13px;} .bio,.tags{display:none;} .ontop{left:11px;right:11px;bottom:38px;} .ontop h3{font-size:19px;} .ontop .sub{font-size:11px;margin-top:1px;} .badge{top:9px;left:9px;padding:5px 9px;font-size:10px;} .rate{top:9px;right:9px;padding:5px 9px;font-size:10.5px;} .pics{left:11px;bottom:10px;padding:4px 8px;font-size:10.5px;} .foot{flex-direction:column;align-items:stretch;gap:9px;margin-top:0;padding-top:0;border-top:0;} .price{display:flex;align-items:baseline;gap:6px;} .price b{font-size:16.5px;} .price span{display:inline;font-size:10.5px;} .cta{margin-left:0;width:100%;text-align:center;padding:11px 8px;font-size:13.5px;} } /* very narrow phones - one per row rather than squeeze two into 320px */ @media(max-width:359px){ .grid{grid-template-columns:1fr;} .bio{display:block;} } /* ── profile page ───────────────────────────────────────────────────────── */ .pcols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px; align-items:start;padding-top:24px;} /* ── phone reading order ────────────────────────────────────────────────── Two columns stacking meant: big photo, six thumbnails, name, bio, what you get, and only THEN the price. That is a lot of scrolling before he learns what it costs. The sticky bar covers it, but the natural order still buried the ask. display:contents flattens both columns into one flow so the blocks can be interleaved: photo, who she is, price and button, then the rest for anyone who still needs convincing. Desktop keeps the two-column layout. */ @media(max-width:860px){ .pcols{display:flex;flex-direction:column;gap:0;} .pcols > div{display:contents;} .gal{order:1;} .pname{order:2;margin-top:18px;} .pmeta{order:3;} .buybox{order:4;margin-top:16px;} .thumbs{order:5;margin-top:18px;} .pabout{order:6;} .ptags{order:7;} .incbox{order:8;} .trustbox{order:9;} .thumbs{grid-template-columns:repeat(6,1fr);} } .gal{position:relative;border-radius:22px;overflow:hidden;background:var(--card2); border:1px solid var(--line);} .gal .main{aspect-ratio:3/4;width:100%;object-fit:cover;} .gal .nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center; padding:0 8px;pointer-events:none;} .gal .nav button{pointer-events:auto;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer; background:rgba(6,6,10,.6);backdrop-filter:blur(8px);color:#fff;font-size:17px;font-weight:700;} .gal .dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;} .gal .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.34);display:block;} .gal .dots i.on{background:#fff;width:18px;border-radius:999px;} .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:9px;} .thumbs img{aspect-ratio:1;object-fit:cover;border-radius:9px;cursor:pointer;opacity:.5; border:1.5px solid transparent;transition:.16s;} .thumbs img.on{opacity:1;border-color:var(--pink);} .pname{display:flex;align-items:center;gap:11px;flex-wrap:wrap;} .pname h1{margin:0;font-size:clamp(27px,6vw,38px);font-weight:800;letter-spacing:-.03em;} .pmeta{margin:7px 0 0;font-size:14.5px;color:var(--dim);} .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px; background:rgba(52,211,153,.11);border:1px solid rgba(52,211,153,.3); font-size:12px;font-weight:700;color:var(--ok);} .pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;} .pabout{margin:18px 0 0;font-size:15px;line-height:1.68;color:var(--dim);} .box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;margin-top:20px;} .box h4{margin:0 0 13px;font-size:12px;letter-spacing:.13em;text-transform:uppercase; color:var(--dim2);font-weight:800;} .inc{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;line-height:1.55;color:var(--dim);} .inc+.inc{margin-top:11px;} .inc .tick{color:var(--ok);font-weight:800;flex:0 0 auto;} .pricerow{display:flex;align-items:baseline;gap:11px;margin:4px 0 15px;} .pricerow b{font-size:34px;font-weight:800;letter-spacing:-.03em;} .pricerow s{font-size:16px;color:var(--dim2);} .pricerow em{font-style:normal;font-size:12px;font-weight:700;color:var(--ok); background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.28); padding:4px 9px;border-radius:7px;} /* ── generic panels ─────────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;} .step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 19px;} .step b{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px; margin-bottom:12px;background:rgba(232,49,122,.13);color:var(--pink);font-size:13px;font-weight:800;} .step h4{margin:0 0 5px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;} .step p{margin:0;font-size:13.5px;line-height:1.55;color:var(--dim);} .revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;} .rev{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:19px;} .stars{color:var(--gold);font-size:13px;letter-spacing:2px;} .rev p{margin:9px 0 12px;font-size:14px;line-height:1.6;color:var(--dim);} .who{font-size:12px;color:var(--dim2);font-weight:600;} .faq{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:9px;overflow:hidden;} .faq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px; padding:17px 19px;border:0;background:none;color:var(--fg);font-size:14.5px;font-weight:700; text-align:left;cursor:pointer;} .faq .chev{color:var(--dim2);transition:transform .2s;flex:0 0 auto;} .faq.open .chev{transform:rotate(180deg);} .faq .a{max-height:0;overflow:hidden;transition:max-height .26s ease;} .faq.open .a{max-height:320px;} .faq .a p{margin:0;padding:0 19px 18px;font-size:13.8px;line-height:1.62;color:var(--dim);} /* ── policy pages ───────────────────────────────────────────────────────── */ .doc{padding:34px 0 10px;} .doc h1{font-size:clamp(26px,5.5vw,36px);font-weight:800;letter-spacing:-.03em;margin:0 0 6px;} .doc .upd{font-size:12.5px;color:var(--dim2);margin:0 0 26px;} .doc h2{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin:30px 0 9px;} .doc p,.doc li{font-size:14.6px;line-height:1.72;color:var(--dim);} .doc ul,.doc ol{padding-left:20px;} .doc li{margin-bottom:7px;} .doc a{color:var(--pink2);} .doc .box{margin-top:26px;} /* ── sticky buy bar ─────────────────────────────────────────────────────── */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);} .sticky .in{display:flex;align-items:center;gap:12px;max-width:1240px;margin:0 auto;} .sticky .p b{font-size:17px;font-weight:800;} .sticky .p span{display:block;font-size:10.5px;color:var(--dim2);font-weight:600;} .sticky .btn{flex:1;padding:14px;font-size:15px;} @media(max-width:860px){ .sticky{display:block;} body.haspay{padding-bottom:86px;} } /* ── footer ─────────────────────────────────────────────────────────────── */ footer{margin-top:54px;border-top:1px solid var(--line);padding:28px 0 46px;} .fcols{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-bottom:14px;} .fcols a{font-size:13px;font-weight:600;color:var(--dim);} .fcols a:hover{color:var(--fg);} .fine{text-align:center;font-size:11.5px;line-height:1.9;color:var(--dim2);}