/* ============================================================== Chennai Matrimony — Community/Caste portal (matrimonial-seo-search-results.aspx) v1.6 design (community.html). Restyle-in-place: scoped under #result_wrapper.cm-portal so it ONLY affects this page and never touches the global/legacy CSS. All server controls, DataGrid, validation kept. Loaded LAST with !important to override search-result.css / 8lak-css. ============================================================== */ #result_wrapper.cm-portal { --paper:#fff; --bg:#faf7f2; --surface:#FAF7F2; --ink:#1f1410; --mute:#766357; --line:rgba(31,20,16,0.12); --primary:#c2123a; --primary-dark:#80081b; --primary-soft:#fcdde3; } #result_wrapper.cm-portal, #result_wrapper.cm-portal * { font-family:'Roboto',sans-serif !important; box-sizing:border-box; } /* ===== hide the master's legacy chrome (this sheet only loads on this page) ===== */ .header_wrapper, .nav_cont, .sub_domain_main, .inside_footer_cop-r, #sub-d-control { display:none !important; } .content_wrapper { width:auto !important; max-width:none !important; background:none !important; } /* ===== wrapper / 2-col layout ===== */ #result_wrapper.cm-portal { width:auto !important; max-width:1300px !important; margin:0 auto !important; padding:40px 24px 70px !important; background:none !important; border:none !important; float:none !important; position:static !important; } .cm-portal #result-main { display:flex !important; gap:36px !important; align-items:flex-start !important; width:auto !important; float:none !important; position:static !important; } .cm-portal #r-main-right { flex:1 1 auto !important; min-width:0 !important; width:auto !important; float:none !important; position:static !important; margin:0 !important; padding:0 !important; border:none !important; background:none !important; } /* ===== heading + results count ===== */ .cm-portal #sub-d-center1 { margin:0 0 22px !important; padding:0 !important; background:none !important; border:none !important; } .cm-portal .sub-d-center-left1 { width:auto !important; float:none !important; } .cm-portal #sub-d-center1 h1 { font-size:28px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.25 !important; margin:0 0 6px !important; text-align:left !important; } .cm-portal #sub-d-center1 table { width:auto !important; } .cm-portal #sub-d-center1 h2 { font-size:14.5px !important; color:var(--mute) !important; font-weight:400 !important; margin:0 !important; } .cm-portal #sub-d-center1 h2 span { color:var(--primary) !important; font-weight:700 !important; } /* ===== DataGrid table -> responsive 3-col card grid ===== */ .cm-portal .merunbox { display:block !important; width:100% !important; border:0 !important; border-collapse:collapse !important; background:none !important; } /* auto-fitting grid: as many ~230px cards per row as the width allows (3 on desktop, 2 on tablet, 1 only on very narrow phones) — no rigid breakpoints to force 1 column */ .cm-portal .merunbox > tbody { display:grid !important; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)) !important; gap:22px !important; align-items:stretch !important; } .cm-portal .merunbox > tbody > tr:not(:has(.style50)) { display:none !important; } /* hide header/pager/empty rows */ .cm-portal .merunbox > tbody > tr { display: block !important; background: #fff !important; border: 0 !important; border-radius: 16px; border: 1px solid rgba(138, 24, 60, 0.06); overflow: hidden; cursor: pointer; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 30px rgba(138, 24, 60, 0.03), 0 1px 8px rgba(0, 0, 0, 0.01); display: flex; flex-direction: column; position: relative; } .cm-portal .merunbox > tbody > tr > td { display:block !important; padding:0 !important; border:0 !important; background:none !important; } .cm-portal .merunbox > tbody > tr > td:not(:has(.style50)) { display:none !important; } /* hide the empty BoundColumn cell */ /* ===== profile card (.style50) ===== */ .cm-portal .style50 { display:flex !important; flex-direction:column !important; width:auto !important; min-width:0 !important; float:none !important; margin:0 !important; padding:0 !important; background:#fff !important; border:1px solid #efe7dd !important; border-radius:16px !important; overflow:hidden !important; box-shadow:0 10px 30px rgba(138,24,60,0.05), 0 1px 6px rgba(0,0,0,0.03) !important; transition:box-shadow .3s ease, transform .3s ease; } .cm-portal .style50:hover { box-shadow:0 16px 38px -10px rgba(138,24,60,0.18) !important; transform:translateY(-3px); } .cm-portal .r-content-left { width:100% !important; height:290px !important; float:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; display:block !important; overflow:hidden !important; } .cm-portal .r-content-photo { position:relative !important; width:100% !important; height:290px !important; overflow:hidden !important; background:#f3ece2 !important; border-radius:0 !important; margin:0 !important; } .cm-portal .r-content-photo a, .cm-portal .r-content-photo .photo-wrapper-img, .cm-portal .r-content-photo img { width:100% !important; height:290px !important; object-fit:cover !important; object-position:top center !important; display:block !important; border:0 !important; } /* verified check badge removed (per request) */ .cm-portal .r-content-photo::after { display:none !important; content:none !important; } /* Full photo (no crop) + blurred side-fill backdrop */ .cm-portal .r-content-photo .photo-wrapper-img, .cm-portal .r-content-photo img { object-fit:contain !important; object-position:center !important; } .cm-portal .r-content-photo > *:not(.cm-photo-blurbg) { position:relative !important; z-index:1 !important; } .cm-portal .r-content-photo .cm-photo-blurbg { position:absolute !important; inset:0 !important; z-index:0 !important; background-size:cover !important; background-position:center center !important; filter:blur(18px) brightness(.9) !important; transform:scale(1.3) !important; } /* details */ .cm-portal .r-content-right-top { width:auto !important; float:none !important; margin:0 !important; padding:18px !important; } .cm-portal .r-content-top-1 { width:100% !important; } .cm-portal .r-content-top-1 table { width:100% !important; border-collapse:collapse !important; } /* name / MatriID row -> title (keeps the inline icons) */ .cm-portal .r-content-top-1 td[style*="F60"] { display:block !important; font-size:18px !important; font-weight:700 !important; color:var(--ink) !important; padding:0 0 12px !important; height:auto !important; } .cm-portal .r-content-top-1 td[style*="F60"] img { vertical-align:middle !important; margin:0 2px !important; } /* label / value rows -> beige specs box */ .cm-portal .r-content-top-1 table tr:not(:first-child) td { font-size:12.5px !important; padding:4px 6px !important; height:auto !important; line-height:1.4 !important; vertical-align:top !important; background:#FAF7F2 !important; } .cm-portal .r-content-top-1 table tr:not(:first-child) td[style*="999"] { color:var(--mute) !important; width:104px !important; font-weight:500 !important; padding-left:12px !important; } .cm-portal .r-content-top-1 table tr:not(:first-child) td[style*="333"] { color:var(--ink) !important; font-weight:600 !important; padding-right:12px !important; } .cm-portal .r-content-top-1 table tr:nth-child(2) td { padding-top:12px !important; } .cm-portal .r-content-top-1 table tr:nth-child(2) td:first-child { border-top-left-radius:10px !important; } .cm-portal .r-content-top-1 table tr:nth-child(2) td:last-child { border-top-right-radius:10px !important; } .cm-portal .r-content-top-1 table tr:last-child td { padding-bottom:12px !important; } .cm-portal .r-content-top-1 table tr:last-child td:first-child { border-bottom-left-radius:10px !important; } .cm-portal .r-content-top-1 table tr:last-child td:last-child { border-bottom-right-radius:10px !important; } /* buttons */ .cm-portal .r-content-top-2 { display:flex !important; gap:10px !important; margin-top:16px !important; align-items:stretch !important; } .cm-portal .r-content-top-2 .r-content-top-btn { margin:0 !important; flex:1 1 0 !important; } .cm-portal .r-content-top-btn1 > a, .cm-portal .r-content-top-btn2 > a { display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; height:42px !important; width:100% !important; border-radius:10px !important; font-size:13px !important; font-weight:700 !important; text-decoration:none !important; white-space:nowrap !important; box-sizing:border-box !important; } /* match the home-page card button (.card-cta-btn): gradient fill, 10px radius, 0.5px tracking */ .cm-portal .r-content-top-btn1 > a { background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color:#fff !important; letter-spacing:0.5px !important; border-radius:10px !important; box-shadow:0 4px 15px rgba(200,51,107,0.2) !important; transition:all 0.3s cubic-bezier(0.16,1,0.3,1) !important; } .cm-portal .r-content-top-btn1 > a:hover { transform:translateY(-2px) !important; box-shadow:0 8px 22px rgba(200,51,107,0.32) !important; } .cm-portal .r-content-top-btn1 > a img { display:none !important; } .cm-portal .r-content-top-btn1 > a::after { content:"View Profile"; } .cm-portal .r-content-top-btn2 > a { background:#FAF7F2 !important; color:var(--ink) !important; border:1px solid var(--line) !important; } .cm-portal .r-content-top-btn2 > a img { height:16px !important; width:auto !important; } .cm-portal .r-content-top-2 + .r-content-top-btn { display:none !important; } /* empty trailing btn div */ /* ===== right sidebar: Register Free ===== */ .cm-portal .reg_form { flex:0 0 320px !important; width:320px !important; float:none !important; position:static !important; margin:0 !important; } .cm-portal #sub-d-right { height:auto !important; width:auto !important; float:none !important; position:sticky !important; top:90px !important; background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:0 8px 30px -10px rgba(31,20,16,0.08) !important; padding:24px !important; } .cm-portal #sub-d-right-head { font-size:22px !important; font-weight:700 !important; color:var(--primary) !important; margin:0 0 18px !important; padding:0 0 10px !important; text-align:left !important; background:none !important; } .cm-portal .reg-right_col, .cm-portal .reg_form_box, .cm-portal .reg_form_box > div { width:auto !important; float:none !important; margin:0 !important; } .cm-portal .reg-row { margin:0 0 4px !important; } .cm-portal .reg-lab { font-size:12px !important; font-weight:600 !important; color:var(--mute) !important; text-align:left !important; float:none !important; width:auto !important; } .cm-portal .reg-row1 { margin:0 0 14px !important; float:none !important; width:auto !important; position:relative !important; overflow:visible !important; } /* field-hint tooltip: hidden by default, shown as a small bubble on field hover */ .cm-portal .reg-row1 > span { display:none !important; } .cm-portal .reg-row1.tooltips:hover > span { display:block !important; visibility:visible !important; opacity:1 !important; position:absolute !important; left:0 !important; top:100% !important; right:auto !important; bottom:auto !important; z-index:9999 !important; margin:6px 0 0 !important; width:max-content !important; max-width:280px !important; height:auto !important; min-height:0 !important; overflow:visible !important; clip:auto !important; white-space:normal !important; background:#1f1410 !important; color:#fff !important; padding:9px 12px !important; border:none !important; border-radius:8px !important; font-size:12px !important; line-height:1.45 !important; font-weight:400 !important; text-align:left !important; box-shadow:0 8px 22px rgba(0,0,0,0.22) !important; pointer-events:none !important; } .cm-portal .reg-row1.tooltips:hover > span b { color:#fff !important; } /* let the sidebar/form show the absolute tooltip instead of clipping it */ .cm-portal .reg_form, .cm-portal #sub-d-right, .cm-portal .reg_form_box { overflow:visible !important; } /* gender radios: drop the external margin-left:10px */ .cm-portal .gender { margin-left:0 !important; } .cm-portal .reg-lab1 { width:auto !important; float:none !important; } .cm-portal .reg-input, .cm-portal .reg-row1 select, .cm-portal .reg-row1 input[type="text"], .cm-portal .reg-row1 input[type="tel"], .cm-portal .reg-row1 input[type="password"], .cm-portal .reg-row1 input[type="email"], .cm-portal .r-input-name, .cm-portal .f-input2 { width:100% !important; height:40px !important; padding:0 10px !important; border:1px solid var(--line) !important; border-radius:8px !important; font-size:13.5px !important; color:var(--ink) !important; background:#fff !important; outline:none !important; box-sizing:border-box !important; margin:0 !important; } .cm-portal .reg-row1 select:focus, .cm-portal .reg-row1 input:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft) !important; } /* DOB 3-in-a-row */ .cm-portal .reg-db { width:auto !important; } .cm-portal .reg-lab1:has(.reg-db) { display:flex !important; gap:6px !important; } .cm-portal .reg-lab1 .reg-db { flex:1 1 0 !important; width:auto !important; min-width:0 !important; } /* mobile code + number */ .cm-portal .reg-lab1:has(.f-input2) { display:flex !important; gap:6px !important; } .cm-portal .reg-lab1 .f-input2 { flex:0 0 90px !important; width:90px !important; } .cm-portal .reg-lab1 .r-input-name { flex:1 1 auto !important; width:auto !important; } /* gender radios */ .cm-portal .r-gender, .cm-portal .r-gender tbody, .cm-portal .r-gender tr { display:flex !important; gap:18px !important; width:auto !important; } .cm-portal .r-gender td { padding:0 !important; } .cm-portal .r-gender label { font-size:13.5px !important; color:var(--ink) !important; font-weight:500 !important; } .cm-portal .r-gender input { accent-color:var(--primary) !important; margin-right:5px !important; vertical-align:middle !important; } /* error text */ .cm-portal .spanchk { display:block !important; float:none !important; font-size:11px !important; color:#c0392b !important; margin:-10px 0 10px !important; } /* submit: hide legacy image, show flat button (added in markup) */ .cm-portal .reg-row2 { text-align:left !important; margin-top:6px !important; } .cm-portal #ImageButton1, .cm-portal .reg-row2 input[type="image"] { display:none !important; } .cm-portal .cm-reg-submit { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:46px !important; border:none !important; border-radius:8px !important; background:var(--primary) !important; color:#fff !important; font-size:15px !important; font-weight:700 !important; cursor:pointer !important; box-shadow:0 8px 20px -6px rgba(194,18,58,0.45) !important; } .cm-portal .cm-reg-submit:hover { background:var(--primary-dark) !important; } /* ===== pager ===== */ .cm-portal #control { margin:28px 0 0 !important; } .cm-portal #control .control-sub { display:flex !important; justify-content:center !important; } @media (max-width:992px) { .cm-portal #result-main { flex-direction:column !important; } .cm-portal .reg_form { width:100% !important; flex:none !important; } .cm-portal #sub-d-right { position:static !important; } } @media (max-width:520px) { .cm-portal .merunbox > tbody { grid-template-columns:1fr !important; } } /* ===== design header (this page) ===== */ .cmp-header, .cmp-header *, .cmp-footer, .cmp-footer * { font-family:'Roboto',sans-serif !important; box-sizing:border-box; } .cmp-header { background:#fff !important; border-bottom:1px solid rgba(31,20,16,0.12) !important; box-shadow:0 1px 10px rgba(0,0,0,0.04) !important; } .cmp-header-inner { /*max-width:1200px;*/ margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px; } .cmp-logo { flex:none; } .cmp-logo img { height:46px; width:auto; display:block; } .cmp-nav { flex:1 1 auto; display:flex; justify-content:center; gap:28px; } .cmp-nav a, .cmp-nav a:link, .cmp-nav a:visited { color:#000 !important; text-decoration:none; font-size:15px; font-weight:600; } .cmp-nav a:hover { color:#c2123a !important; } .cmp-ctas { flex:none; display:flex; align-items:center; gap:16px; } .cmp-phone { color:#1f1410; text-decoration:none; font-size:14px; font-weight:700; white-space:nowrap; } .cmp-login, .cmp-login:link, .cmp-login:visited, .cmp-login:hover { display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:10px; background:linear-gradient(135deg,#c2123a,#80081b); color:#fff !important; text-decoration:none; font-size:14px; font-weight:700; } .cmp-login:hover { filter:brightness(1.05); } /* ===== design footer (this page) ===== */ .cmp-footer { background:#fff !important; color:#1f1410 !important; border-top:1px solid rgba(31,20,16,0.12) !important; margin-top:20px !important; } .cmp-footer-inner { max-width:1200px; margin:0 auto; padding:48px 24px 0; } .cmp-footer-top { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1fr; gap:30px; padding-bottom:36px; } .cmp-footer-logo img { height:42px; width:auto; display:block; margin-bottom:18px; } .cmp-footer-addr { font-size:13.5px; line-height:1.7; color:#766357; } .cmp-footer-phone { font-size:14px; font-weight:700; color:#c2123a; margin-top:16px; } .cmp-footer-col { display:flex; flex-direction:column; gap:10px; } .cmp-footer-col h4 { position:relative; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#b08968; margin:0 0 12px; padding-bottom:8px; } .cmp-footer-col h4::after { content:""; position:absolute; left:0; bottom:0; width:22px; height:2px; background:#c2123a; } .cmp-footer-col a { font-size:13.5px; color:#1f1410; text-decoration:none; } .cmp-footer-col a:hover { color:#c2123a; } /* Services bar uses the SAME grid as the columns above; the content sits in the Explore column (column 2 -> -1) so it lines up under "Explore". */ .cmp-footer-services { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1fr; gap:30px; border-top:1px solid rgba(31,20,16,0.12); padding:18px 0; font-size:13.5px; color:#766357; } .cmp-footer-services-inner { grid-column:2 / -1; } .cmp-footer-services strong { color:#1f1410; } .cmp-footer-services a { color:#2f7db8; text-decoration:none; } .cmp-footer-services a:hover { text-decoration:underline; } .cmp-footer-bottom { border-top:1px solid rgba(31,20,16,0.12); padding:18px 0 24px; font-size:12.5px; color:#766357; } @media (max-width:900px){ .cmp-footer-top { grid-template-columns:1fr 1fr; } .cmp-nav { display:none; } } /* ===== Register Free form — force clean block flow (fix floated gender/dob/mobile) ===== */ .cm-portal #sub-d-right-head { white-space:nowrap !important; } .cm-portal #sub-d-right .reg_form_box > div { width:auto !important; float:none !important; } .cm-portal .reg_form, .cm-portal #sub-d-right, .cm-portal .reg-right_col, .cm-portal .reg_form_box, .cm-portal .reg-row, .cm-portal .reg-row1, .cm-portal .reg-lab, .cm-portal .reg-lab1 { float:none !important; position:static !important; clear:both !important; } .cm-portal .reg-row { display:block !important; width:auto !important; margin:0 0 4px !important; } .cm-portal .reg-row1 { display:block !important; width:auto !important; margin:0 0 14px !important; overflow:visible !important; } .cm-portal .reg-lab1 { display:block !important; width:auto !important; } /* gender radios row */ .cm-portal .reg-lab1 .r-gender, .cm-portal .reg-lab1 .r-gender tbody, .cm-portal .reg-lab1 .r-gender tr { display:flex !important; gap:18px !important; width:auto !important; float:none !important; } .cm-portal .reg-lab1 .r-gender td { display:inline-flex !important; align-items:center !important; padding:0 !important; white-space:nowrap !important; } .cm-portal .reg-lab1 .r-gender label { font-size:13.5px !important; color:var(--ink) !important; margin-left:5px !important; } .cm-portal .reg-lab1 .r-gender input { width:auto !important; height:auto !important; accent-color:var(--primary) !important; } /* DOB: 3 selects in a row */ .cm-portal .reg-lab1:has(.reg-db) { display:flex !important; gap:6px !important; } .cm-portal .reg-lab1 .reg-db { flex:1 1 0 !important; width:auto !important; min-width:0 !important; } /* mobile: code + number in a row */ .cm-portal .reg-lab1:has(.f-input2) { display:flex !important; gap:6px !important; align-items:center !important; } .cm-portal .reg-lab1 .f-input2 { flex:0 0 92px !important; width:92px !important; } .cm-portal .reg-lab1 .r-input-name { flex:1 1 auto !important; width:auto !important; } /* ===== pagination (DataGridPager) -> design pill pager ===== */ .cm-portal #control { margin:30px 0 0 !important; width:100% !important; } .cm-portal #control .control-sub { display:flex !important; justify-content:center !important; } .cm-portal #control table { width:auto !important; margin:0 auto !important; border:0 !important; } .cm-portal #control td { padding:0 !important; } .cm-portal #control div[style*="dotted"], .cm-portal #control .control-sub div[align="center"] { border:1px solid var(--line) !important; margin:0 auto !important; display:inline-flex !important; flex-wrap:wrap !important; align-items:center !important; gap:4px !important; padding:6px !important; border-radius:10px !important; background:#fff !important; box-shadow:0 2px 10px -4px rgba(31,20,16,0.08) !important; } .cm-portal #control a, .cm-portal #control a:visited { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:34px !important; height:34px !important; padding:0 12px !important; font-size:13.5px !important; font-weight:600 !important; color:var(--mute) !important; text-decoration:none !important; border-radius:7px !important; width:auto !important; } .cm-portal #control a:hover { background:var(--bg) !important; color:var(--ink) !important; } .cm-portal #control .pagerStyle { color:var(--ink) !important; } /* ===== bottom SEO / description content ===== */ .cm-portal #r-main-right .seo-content-block, .cm-portal .cityDescription, .cm-portal #noflink { margin-top:36px !important; padding-top:26px !important; border-top:1px solid var(--line) !important; font-size:14px !important; line-height:1.7 !important; color:var(--mute) !important; text-align:justify !important; width:auto !important; } .cm-portal #r-main-right p { font-size:14px !important; line-height:1.7 !important; color:var(--mute) !important; } .cm-portal #r-main-right a { color:var(--primary) !important; } .cm-portal .noF { display:inline-block !important; padding:30px 20px !important; font-size:15px !important; color:var(--mute) !important; } /* active/current page (disabled LinkButton renders as ) -> red filled pill */ .cm-portal #control span.pagerStyle, .cm-portal #control span[class*="pager"], .cm-portal #control .control-sub div[align="center"] > span:not([id]) { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:34px !important; height:34px !important; padding:0 12px !important; background:var(--primary) !important; color:#fff !important; font-weight:700 !important; border-radius:7px !important; font-size:13.5px !important; box-shadow:none !important; } /* ===== pager final overrides ===== */ .cm-portal #control a, .cm-portal #control a:link, .cm-portal #control a:visited, .cm-portal #control .pagerStyle, .cm-portal #control span.pagerStyle { border:0 !important; outline:0 !important; box-shadow:none !important; } .cm-portal #control a, .cm-portal #control a:link, .cm-portal #control a:visited { font-weight:600 !important; } .cm-portal #control a:hover { background:var(--bg) !important; color:var(--ink) !important; } /* Prev (first link) + Next (last link) — dark, not red/green */ .cm-portal #control a[id*="Linkbutton1"], .cm-portal #control a[id*="nextbutton"] { color:#4a3a30 !important; font-weight:700 !important; } /* current page (disabled link renders as ) -> red filled pill */ .cm-portal #control span.pagerStyle, .cm-portal #control div[align="center"] > span:not([id]):not(:empty) { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:34px !important; height:34px !important; padding:0 12px !important; background:var(--primary) !important; color:#fff !important; font-weight:700 !important; border-radius:7px !important; } /* current page = the page-number element that is NOT an (disabled span), or any current/selected class -> red filled pill */ .cm-portal #control [id*="lnkpg"]:not(a), .cm-portal #control span[id*="lnkpg"], .cm-portal #control .current, .cm-portal #control .selected, .cm-portal #control .active, .cm-portal #control .currentpage { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:34px !important; height:34px !important; padding:0 12px !important; background:var(--primary) !important; color:#fff !important; font-weight:700 !important; border-radius:7px !important; border:0 !important; box-shadow:none !important; } /* remove external .pagerStyle teal border + bg1.jpg background */ .cm-portal #control .pagerStyle, .cm-portal .pagerStyle { background-image:none !important; border:none !important; width:auto !important; } /* ===== Register form: DOB + mobile inline (no :has dependency) ===== */ .cm-portal .reg-lab1 { display:flex !important; flex-wrap:wrap !important; gap:6px !important; align-items:center !important; } .cm-portal .reg-lab1 > * { flex:1 1 100% !important; } /* single control fills the row */ .cm-portal .reg-lab1 .reg-db { flex:1 1 0 !important; width:auto !important; min-width:0 !important; } /* DD / MM / YY thirds */ .cm-portal .reg-lab1 .f-input2 { flex:0 0 92px !important; width:92px !important; } /* mobile code */ .cm-portal .reg-lab1 .r-input-name { flex:1 1 110px !important; width:auto !important; } /* mobile number */ .cm-portal .reg-lab1 .r-gender { flex:1 1 100% !important; } /* gender radios full row */ /* ===== exact design measurements (community.html / mudaliar.css) ===== */ .cm-portal #result-main { gap:40px !important; } .cm-portal .reg_form { flex:0 0 310px !important; width:310px !important; } .cm-portal #sub-d-right { padding:28px !important; top:96px !important; border-width:1.5px !important; border-radius:12px !important; } .cm-portal #sub-d-right-head { font-size:22px !important; margin-bottom:20px !important; } .cm-portal .merunbox > tbody { gap:20px !important; } .cm-portal .reg-input, .cm-portal .reg-row1 select, .cm-portal .reg-row1 input[type="text"], .cm-portal .reg-row1 input[type="tel"], .cm-portal .reg-row1 input[type="password"], .cm-portal .reg-row1 input[type="email"], .cm-portal .r-input-name, .cm-portal .f-input2 { height:38px !important; font-size:13.5px !important; border-radius:6px !important; padding:0 10px !important; } .cm-portal .reg-lab { font-size:12px !important; font-weight:600 !important; margin-bottom:4px !important; } .cm-portal .reg-row1 { margin-bottom:16px !important; } .cm-portal #sub-d-center1 h1 { font-size:26px !important; } .cm-portal .cm-reg-submit { height:42px !important; font-size:14px !important; margin-top:10px !important; border-radius:6px !important; } /* ===== View Profile button: ensure label shows + equal widths ===== */ .cm-portal .r-content-top-2 { display:flex !important; gap:10px !important; align-items:stretch !important; } .cm-portal .r-content-top-2 .r-content-top-btn1, .cm-portal .r-content-top-2 .r-content-top-btn2 { flex:1 1 0 !important; min-width:0 !important; } .cm-portal .r-content-top-btn1 a { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:42px !important; border-radius:10px !important; background:var(--primary) !important; } .cm-portal .r-content-top-btn1 a img { display:none !important; } .cm-portal .r-content-top-btn1 a::after { content:"View Profile" !important; color:#fff !important; font-size:13px !important; font-weight:700 !important; white-space:nowrap !important; } /* ===== exact card match (design Image 2) ===== */ /* unified card: photo flush at top, info below, single border/shadow */ .cm-portal .style50 { background:#fff !important; border:1px solid #efe7dd !important; border-radius:16px !important; overflow:hidden !important; box-shadow:0 10px 30px rgba(138,24,60,0.05), 0 1px 6px rgba(0,0,0,0.03) !important; } .cm-portal .r-content-left { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; } .cm-portal .r-content-photo { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; height:290px !important; } .cm-portal .r-content-right-top { padding:0 16px 16px !important; margin:0 !important; } /* server-rendered title (MatriID + Age) + meta (height · city) — sized to match the design. float:none/clear:both because the external search-result.css floats these blocks. */ .cm-portal .cm-card-head { padding-top:14px !important; margin-bottom:14px !important; float:none !important; clear:both !important; width:100% !important; } .cm-portal .cm-card-title { font-size:15px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.25 !important; } .cm-portal .cm-card-meta { font-size:14px !important; color:var(--mute) !important; margin-top:5px !important; } /* specs as ONE beige box (float:none overrides search-result.css's float:left) */ .cm-portal .r-content-top-1 { background:#FAF7F2 !important; border:1px solid rgba(138,24,60,0.04) !important; border-radius:10px !important; padding:10px 12px !important; margin:0 !important; float:none !important; clear:both !important; width:100% !important; box-sizing:border-box !important; } /* hide only the legacy MatriID title row (1) and Age/Height (2) — those are in the server-rendered header now. Religion, Caste, Education, Profession, Salary, Residing, Star/Rasi all stay visible in the specs box. */ .cm-portal .r-content-top-1 table tr:nth-child(1), .cm-portal .r-content-top-1 table tr:nth-child(2) { display:none !important; } .cm-portal .r-content-top-1 table tr td { background:none !important; border-radius:0 !important; padding:4px 0 !important; height:auto !important; font-size:12.5px !important; line-height:1.4 !important; vertical-align:top !important; } .cm-portal .r-content-top-1 table tr td[style*="999"] { color:var(--mute) !important; width:90px !important; font-weight:500 !important; padding-left:0 !important; } .cm-portal .r-content-top-1 table tr td[style*="333"] { color:var(--ink) !important; font-weight:600 !important; padding-right:0 !important; } /* ================================================================ Card buttons — matches community.html: View Profile (red, wider) + View Contact (outline). Two buttons side by side at the card bottom. Photo layout intentionally untouched so images keep working. ================================================================ */ .cm-portal .cm-card-btns { display:flex !important; gap:10px !important; margin-top:16px !important; align-items:stretch !important; float:none !important; clear:both !important; width:100% !important; box-sizing:border-box !important; } .cm-portal .cm-card-btns .r-content-top-btn1 { flex:1.2 1 0 !important; min-width:0 !important; margin:0 !important; float:none !important; } .cm-portal .cm-card-btns .r-content-top-btn2 { flex:1 1 0 !important; min-width:0 !important; margin:0 !important; float:none !important; } .cm-portal .cm-card-btns .r-content-top-btn1 > a, .cm-portal .cm-card-btns .r-content-top-btn2 > a { display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; width:100% !important; height:42px !important; border-radius:10px !important; font-size:13px !important; font-weight:700 !important; text-decoration:none !important; box-sizing:border-box !important; white-space:nowrap !important; } .cm-portal .cm-card-btns .r-content-top-btn1 > a { background:var(--primary) !important; color:#fff !important; box-shadow:0 6px 16px rgba(194,18,58,0.22) !important; } .cm-portal .cm-card-btns .r-content-top-btn1 > a img { display:none !important; } .cm-portal .cm-card-btns .r-content-top-btn1 > a::after { content:"View Profile" !important; color:#fff !important; } .cm-portal .cm-card-btns .r-content-top-btn2 > a { background:#FAF7F2 !important; color:var(--ink) !important; border:1px solid var(--line) !important; } .cm-portal .cm-card-btns .r-content-top-btn2 > a img { height:15px !important; width:auto !important; } /* hide the empty trailing spacer div */ .cm-portal .r-content-right-top > .r-content-top-btn { display:none !important; } /* ================================================================ BULLETPROOF card-body stack — search-result.css floats nearly every block (.r-content-left, .r-content-right-top, .r-content-top-1, .r-content-top-2, .r-content-top-btn). Force the whole card into a clean vertical column so nothing floats up beside the specs box. ================================================================ */ .cm-portal .style50 { display:flex !important; flex-direction:column !important; } .cm-portal .style50 > .r-content-left, .cm-portal .style50 > .r-content-right-top { float:none !important; clear:both !important; width:100% !important; margin:0 !important; } .cm-portal .r-content-right-top { display:block !important; overflow:hidden !important; } .cm-portal .r-content-right-top > .cm-card-head, .cm-portal .r-content-right-top > .r-content-top-1, .cm-portal .r-content-right-top > .cm-card-btns { float:none !important; clear:both !important; width:100% !important; box-sizing:border-box !important; } /* the individual button divs (search-result.css gives them float:left + fixed 135x24 + 20px margin) */ .cm-portal .cm-card-btns > .r-content-top-btn { float:none !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; } .cm-portal .cm-card-btns > .r-content-top-btn1 { flex:1.2 1 0 !important; min-width:0 !important; } .cm-portal .cm-card-btns > .r-content-top-btn2 { flex:1 1 0 !important; min-width:0 !important; } /* ================================================================ Each profile = one self-contained CARD (matches the reference): white rounded container with a visible border + soft shadow, photo flush to the top edge, padded body below. ================================================================ */ .cm-portal .merunbox .style50 { background:#fff !important; border:1px solid #e6dccb !important; border-radius:16px !important; overflow:hidden !important; box-shadow:0 6px 22px rgba(31,20,16,0.10), 0 2px 6px rgba(0,0,0,0.06) !important; } /* soft contrasting backdrop so the white cards read as cards (like the reference) */ .cm-portal #r-main-right { background:#faf6f0 !important; border-radius:14px !important; padding:18px !important; box-sizing:border-box !important; } /* photo flush at the very top — no own radius/margin; the card's overflow:hidden rounds the top corners */ .cm-portal .style50 .r-content-left, .cm-portal .style50 .r-content-photo { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; width:100% !important; } .cm-portal .style50 .r-content-photo a, .cm-portal .style50 .r-content-photo img, .cm-portal .style50 .photo-wrapper-img { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; width:100% !important; display:block !important; } /* padded card body so the title/specs/buttons aren't edge-to-edge */ .cm-portal .style50 .r-content-right-top { padding:16px !important; } /* Square card corners: the photo has no radius of its own — the curve came from the card's border-radius + overflow:hidden clipping the image corners. Squaring the card makes the photo edges straight. */ .cm-portal .style50, .cm-portal .merunbox .style50 { border-radius:0 !important; } /* ================================================================ View Contact moved INTO the header: title (left) + phone & star (right); subtitle drops below. View Profile becomes the full-width bottom button. ================================================================ */ .cm-portal .cm-card-titlerow { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; width:100% !important; } .cm-portal .cm-card-titlerow .cm-card-title { min-width:0 !important; } .cm-portal .cm-card-actions { display:flex !important; align-items:center !important; gap:12px !important; flex:none !important; } /* View Contact -> thin gray phone icon (its real link/onclick is preserved) */ .cm-portal .cm-card-actions .cm-contact-ico { display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; font-size:0 !important; line-height:0 !important; text-decoration:none !important; cursor:pointer !important; } .cm-portal .cm-card-actions .cm-contact-ico img { display:none !important; } .cm-portal .cm-card-actions .cm-contact-ico::before { content:"" !important; display:inline-block !important; width:22px !important; height:22px !important; background:center / 22px 22px no-repeat !important; background-image:url("data:image/svg+xml;utf8,") !important; } /* call / "View Contact" phone icon removed from the cards. Hidden in CSS so the server-side logged-in / logged-out link variants in the markup stay intact. */ .cm-portal .cm-card-actions .cm-contact-ico { display:none !important; } /* outline gray star (decorative — no shortlist control on this page) */ .cm-portal .cm-card-actions .cm-star { display:inline-block !important; width:22px !important; height:22px !important; background:center / 22px 22px no-repeat !important; background-image:url("data:image/svg+xml;utf8,") !important; } /* View Profile spans the full width now that View Contact is in the header */ .cm-portal .cm-card-btns .r-content-top-btn1 { flex:1 1 100% !important; } .cm-portal .cm-card-btns .r-content-top-btn2 { display:none !important; } /* ===== sidebar Date of Birth: DD / MM / YY on one row ===== On this page the three selects sit inside a plain
within .reg-row1 (not .reg-lab1), so the earlier flex rule didn't catch them. */ .cm-portal .reg-row1 > div:has(.reg-db) { display:flex !important; gap:8px !important; align-items:center !important; } .cm-portal .reg-row1 .reg-db { flex:1 1 0 !important; width:auto !important; min-width:0 !important; } /* ===== sidebar Mobile: country-code dropdown + number on one row ===== */ .cm-portal .reg-row1 > div:has(.f-input2) { display:flex !important; gap:8px !important; align-items:center !important; } /* fixed width so the