/* ============================================================== Chennai Matrimony — Registration STEP 1 (matrimonial-registration-form.aspx) v1.5 design, restyle-in-place. Standalone page (own /, not on Registration.master) using .f-row/.f-lab/.f-input + #r_box info panel, so this is its OWN scoped sheet (the shared reg-redesign.css targets .reg_wrapper). Scoped under body.cm-regform. UI only — all fields/IDs/validation/flow kept. Loaded LAST to override the external landin-style.css. ============================================================== */ body.cm-regform { --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; background:var(--paper) !important; font-family:'Roboto',sans-serif !important; color:var(--ink) !important; margin:0 !important; } body.cm-regform, body.cm-regform * { font-family:'Roboto',sans-serif !important; box-sizing:border-box; } /* ===== header (design site-header) ===== */ .cm-regform .cm-site-header { background:var(--paper) !important; border-bottom:1px solid var(--line) !important; box-shadow:0 1px 10px rgba(0,0,0,0.04) !important; padding:0 !important; } .cm-regform .cm-header-inner { margin:0 auto !important; padding:14px 24px !important; display:flex !important; align-items:center !important; gap:24px !important; } .cm-regform .cm-logo-wrap { flex:none !important; } .cm-regform .cm-logo-wrap img, .cm-regform .cm-logo-wrap input[type="image"] { max-height:46px !important; width:auto !important; border:none !important; } /* Registration header: hide the nav menu + hamburger — keep only logo + phone + Member Login */ .cm-regform .cm-site-nav { display:none !important; } .cm-regform .cm-reg-burger { display:none !important; } .cm-regform .cm-header-ctas { flex:none !important; display:flex !important; align-items:center !important; gap:16px !important; margin-left:auto !important; } .cm-regform .cm-header-phone { display:inline-flex !important; align-items:center !important; gap:6px !important; color:var(--ink) !important; text-decoration:none !important; font-size:14px !important; font-weight:700 !important; white-space:nowrap !important; } .cm-regform .cm-header-phone .cm-phone-ic { color:var(--primary) !important; } .cm-regform .cm-header-login { display:inline-flex !important; align-items:center !important; justify-content:center !important; height:42px !important; padding:0 20px !important; border-radius:10px !important; background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color:#fff !important; text-decoration:none !important; font-size:14px !important; font-weight:700 !important; white-space:nowrap !important; } .cm-regform .cm-header-login:hover { filter:brightness(1.05) !important; } @media (max-width:900px) { .cm-regform .cm-header-inner { flex-wrap:nowrap !important; gap:10px !important; padding:12px 16px !important; } .cm-regform .cm-logo-wrap { margin-right:auto !important; } .cm-regform .cm-header-ctas { gap:10px !important; } .cm-regform .cm-header-phone { font-size:13px !important; } .cm-regform .cm-header-login { height:38px !important; padding:0 14px !important; font-size:13px !important; } } /* ===== page layout (float-based — content-wraper also holds the trust band + clears) ===== */ .cm-regform #content-main { background:transparent !important; padding:0 !important; } .cm-regform .content-wraper { max-width:1180px !important; margin:0 auto !important; padding:0 !important; display:block !important; width:auto !important; } .cm-regform .content-wraper::after { content:"" !important; display:block !important; clear:both !important; } .cm-regform .content-left-box { float:left !important; width:64% !important; margin:0 !important; background:var(--paper) !important; border:none !important; border-radius:0 !important; box-shadow:none !important; padding:48px 56px 64px !important; box-sizing:border-box !important; } /* form heading + progress meter (added in markup) */ .cm-regform .cm-reg-head { margin-bottom:22px !important; } .cm-regform .cm-reg-badge { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: 14px !important; font-weight: 700 !important; color: #163522 !important; background: #e8f6ec !important; letter-spacing: 0.8px; padding: 5px 12px !important; border-radius: 20px !important; margin-bottom: 12px !important; } .cm-regform .cm-reg-badge .dot { width:8px !important; height:8px !important; border-radius:50% !important; background:#16a34a !important; display:inline-block !important; } .cm-regform .cm-reg-h1 { font-size:36px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.1 !important; margin:14px 0 6px !important; letter-spacing:-0.6px !important; } .cm-regform .cm-reg-h1 em { font-style:italic !important; color:var(--primary) !important; } .cm-regform .cm-meter { margin-top:16px !important; } .cm-regform .cm-meter-top { display:flex !important; justify-content:space-between !important; align-items:center !important; margin-bottom:6px !important; } .cm-regform .cm-meter-lbl { font-size:12.5px !important; color:var(--mute) !important; font-weight:500 !important; } .cm-regform .cm-meter-pct { font-size:12.5px !important; color:var(--primary) !important; font-weight:700 !important; } .cm-regform .cm-meter-bar { height:7px !important; background:#efe7dd !important; border-radius:20px !important; overflow:hidden !important; } .cm-regform .cm-meter-fill { height:100% !important; background:linear-gradient(90deg, var(--primary), var(--primary-dark)) !important; border-radius:20px !important; } /* ===== form fields ===== */ .cm-regform .content-l-tabel { width:auto !important; float:none !important; margin:0 !important; height:auto !important; } /* clear:both — the legacy markup floats some field contents (e.g. the gender radios and the .spanchk validation spans). Without it a row can wrap alongside the previous row's float (Date of Birth was sliding up next to Gender). */ .cm-regform .f-row { display:block !important; clear:both !important; width:auto !important; height:auto !important; min-height:0 !important; overflow:visible !important; float:none !important; margin:0 0 18px !important; padding:0 !important; position:static !important; background:none !important; border:none !important; } /* Division is Christian-only: keep it hidden while its inline style is display:none; the religion JS reveals it (sets display:block) for Christian customers */ .cm-regform #christdivi[style*="none"] { display:none !important; } /* registration form footer: keep only the copyright + social bottom bar; hide the big multi-column footer */ .cm-regform .cm-site-footer .cm-footer-top, .cm-regform .cm-site-footer .cm-footer-services { display:none !important; } .cm-regform .cm-site-footer { padding-top:22px !important; } .cm-regform .f-lab { display:block !important; position:static !important; width:auto !important; height:auto !important; float:none !important; font-size:14px !important; font-weight:600 !important; color:var(--ink) !important; margin:0 0 7px !important; padding:0 !important; text-align:left !important; } .cm-regform .f-input, .cm-regform .f-input1, .cm-regform .f-input2, .cm-regform .content-l-tabel select, .cm-regform .content-l-tabel input[type="text"], .cm-regform .content-l-tabel input[type="password"], .cm-regform .content-l-tabel input[type="tel"], .cm-regform .content-l-tabel input[type="email"] { width:100% !important; height:50px !important; padding:0 14px !important; font-size:16px !important; color:var(--ink) !important; background:var(--paper) !important; border:1px solid #d6cabb !important; border-radius:6px !important; float:none !important; margin:0 !important; box-sizing:border-box !important; } .cm-regform .content-l-tabel select { padding:0 10px !important; cursor:pointer !important; appearance:auto !important; } .cm-regform .f-input:focus, .cm-regform .content-l-tabel select:focus, .cm-regform .content-l-tabel input:focus { outline:none !important; border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft) !important; } /* DOB: three selects in a row (float avoids inline-block whitespace wrap) */ .cm-regform .f-row .db { float:left !important; width:32% !important; margin:0 2% 0 0 !important; display:block !important; } .cm-regform .f-row .db:nth-of-type(3), .cm-regform .f-row .db:last-of-type { margin-right:0 !important; } /* Extra breathing room above the Date of Birth and Religion rows (percentage — px not applied here). NOTE: a % margin resolves against the CONTAINER WIDTH, not height — 13% on this ~640px column was ~84px, which left a large empty gap. 3% (~19px) on top of the previous row's 18px bottom margin gives a clear separation without the void. */ .cm-regform .f-row:has(.db), .cm-regform .f-row:has(#Category) { margin-top:3% !important; } /* DOB order: display as Date - Month - Year (DD, MM, YY). Visual only via flex order — server controls DOBYEAR/DOBMONTH/DOBDAY, IDs, values and validation are unchanged. */ .cm-regform .f-row:has(.db) { display:flex !important; flex-wrap:wrap !important; align-items:center !important; column-gap:2% !important; } .cm-regform .f-row:has(.db) .f-lab { flex:0 0 100% !important; } .cm-regform .f-row:has(.db) > span:not(.spanchk) { flex:0 0 100% !important; } .cm-regform .f-row:has(.db) .db { float:none !important; width:32% !important; margin:0 !important; } .cm-regform #DOBDAY { order:1 !important; } .cm-regform #DOBMONTH { order:2 !important; } .cm-regform #DOBYEAR { order:3 !important; } /* Mobile: code + number side by side (4-class selectors beat the input[type=text] rule). Row stays flex-wrap:wrap so the label (flex:0 0 100%) gets its OWN line; the code+number then share the next line. The number uses flex-basis:0 + min-width:0 so its hypothetical size is ~0 — it always fits beside the fixed-width code (never wraps to a 3rd line on narrow phones) and simply grows to fill the remaining width. */ .cm-regform .content-l-tabel .f-row:has(.f-input1) { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important; } .cm-regform .content-l-tabel .f-row:has(.f-input1) .f-lab { flex:0 0 100% !important; width:100% !important; } .cm-regform .content-l-tabel .f-row .f-input2 { flex:0 0 118px !important; width:118px !important; order:1 !important; height:50px !important; margin:0 !important; } .cm-regform .content-l-tabel .f-row .f-input1 { flex:1 1 0 !important; width:auto !important; min-width:0 !important; order:2 !important; height:50px !important; margin:0 !important; } /* gender — RadioButtonList restyled into the design's segmented buttons (radios kept) */ /* Gender = plain radio buttons only (radio circle + label, side by side) */ .cm-regform .gender, .cm-regform .gender tbody, .cm-regform .gender tr { display:flex !important; gap:30px !important; align-items:center !important; width:auto !important; height:auto !important; border-collapse:collapse !important; } .cm-regform .gender td { flex:0 0 auto !important; width:auto !important; height:auto !important; padding:0 !important; display:flex !important; align-items:center !important; } .cm-regform .gender input[type="radio"] { position:static !important; opacity:1 !important; width:18px !important; height:18px !important; margin:0 7px 0 0 !important; padding:0 !important; accent-color:var(--primary) !important; vertical-align:middle !important; cursor:pointer !important; flex:0 0 auto !important; } .cm-regform .gender label { display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; border:none !important; background:none !important; border-radius:0 !important; box-shadow:none !important; font-size:15px !important; font-weight:500 !important; color:var(--ink) !important; cursor:pointer !important; } .cm-regform .gender input:checked + label { border:none !important; background:none !important; box-shadow:none !important; color:var(--ink) !important; font-weight:600 !important; } /* error text */ .cm-regform .spanchk { display:block !important; position:static !important; float:none !important; width:auto !important; height:auto !important; margin:4px 0 0 !important; font-size:11.5px !important; color:#c0392b !important; text-align:left !important; } /* the field: tooltip hint spans — keep them out of normal flow (hover tooltips via external css) */ .cm-regform .content-l-tabel .f-row > span:not(.spanchk) { font-size:11px !important; color:var(--mute) !important; } /* submit — design .rg-nav-row (top divider) + full-width red button */ .cm-regform .f-row2 { margin-top:32px !important; padding-top:20px !important; border-top:1px solid var(--line) !important; } .cm-regform .submit.cm-real-submit { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; } .cm-regform .cm-reg-submit { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; width:auto !important; height:44px !important; padding:0 36px !important; background:var(--primary) !important; color:#fff !important; border:none !important; border-radius:22px !important; font-size:16px !important; font-weight:700 !important; letter-spacing:0.2px !important; cursor:pointer !important; box-shadow:0 8px 20px -8px rgba(194,18,58,0.5) !important; transition:background .15s, transform .12s !important; } .cm-regform .cm-reg-submit:hover { background:var(--primary-dark) !important; transform:translateY(-1px) !important; } /* hide the decorative footer image strip inside the left card */ .cm-regform .content-l-image-footer { display:none !important; } /* ===== right info panel — beige column (design .rg-visual) ===== */ .cm-regform #r_box { top: 0px !important; float: right !important; width: 36% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 22px !important; box-sizing: border-box !important; background: #FBEFDE !important; padding: 40px !important; } /* intro block + collage photo (added in markup) */ .cm-regform .cm-rg-intro { margin-bottom:2px !important; background:none !important; } .cm-regform .cm-rg-trust { display: inline-flex !important; align-items: center !important; gap: 9px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; color: #163522 !important; background: none !important; } .cm-regform .cm-rg-trust .dot { width:9px !important; height:9px !important; border-radius:50% !important; background:#16a34a !important; display:inline-block !important; flex:none !important; } .cm-regform .cm-rg-intro-title { font-size:33px !important; font-weight:700 !important; line-height:1.14 !important; letter-spacing:-0.6px !important; color:var(--ink) !important; margin:12px 0 0 !important; background:none !important; } .cm-regform .cm-rg-intro-title em { color:var(--primary) !important; font-style:italic !important; font-weight:700 !important; } .cm-regform .cm-rg-photo { border-radius:10px !important; overflow:hidden !important; border:1px solid var(--line) !important; box-shadow:0 16px 40px -20px rgba(31,20,16,0.32) !important; } .cm-regform .cm-rg-photo img { width:100% !important; height:auto !important; display:block !important; } .cm-regform .r_sub_box { background:var(--paper) !important; border:1px solid #efe7dd !important; border-radius:12px !important; box-shadow:0 6px 18px rgba(138,24,60,0.04) !important; padding:22px 24px 24px !important; width:auto !important; float:none !important; margin:0 !important; } .cm-regform .r_box_title { display:flex !important; align-items:center !important; gap:14px !important; padding-bottom:16px !important; margin-bottom:16px !important; border-bottom:1px solid var(--line) !important; background:none !important; } .cm-regform .r_box_title h4, .cm-regform .r_box_title h5, .cm-regform .r_box_head br + span, .cm-regform .r_box_head * { background:none !important; background-image:none !important; } .cm-regform .r_pic { flex:0 0 auto !important; float:none !important; position:static !important; margin:0 !important; } .cm-regform .r_box_head { flex:1 1 auto !important; float:none !important; position:static !important; margin:0 !important; min-width:0 !important; } .cm-regform .r_pic img { width:48px !important; height:48px !important; object-fit:contain !important; } /* exact design badge: red circle + white icon */ .cm-regform .r_pic .cm-ibadge { width:40px !important; height:40px !important; border-radius:50% !important; background:var(--primary) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 8px 18px -7px rgba(194,18,58,0.6) !important; } .cm-regform .r_pic .cm-qmark { font-size:27px !important; font-weight:700 !important; line-height:1 !important; } .cm-regform .r_pic .cm-ibadge svg { width:22px !important; height:22px !important; display:block !important; } .cm-regform .r_box_head { font-size:22px !important; font-weight:700 !important; color:var(--ink) !important; line-height:1.12 !important; letter-spacing:-0.3px !important; background:none !important; } .cm-regform .r_box_head span { display:block !important; font-size:13.5px !important; font-weight:500 !important; color:var(--mute) !important; margin-top:3px !important; background:none !important; padding:0 !important; } /* first card ("Why Choose"): the brand name on line 2 is red, not muted */ .cm-regform #r_box .r_sub_box:first-of-type .r_box_head span { color:var(--primary) !important; font-weight:700 !important; font-size:22px !important; margin-top:0 !important; } .cm-regform .r_box_opts ul { list-style:none !important; margin:0 !important; padding:0 !important; background:none !important; } .cm-regform .r_box_opts li { position:relative !important; padding:6px 0 6px 22px !important; font-size:15.5px !important; color:var(--ink) !important; line-height:1.5 !important; list-style:none !important; background:none !important; background-image:none !important; } .cm-regform .r_box_opts li::marker { content:"" !important; } .cm-regform .r_box_opts li::before { content:"" !important; position:absolute !important; left:0 !important; top:11px !important; border-left:7px solid var(--primary) !important; border-top:5px solid transparent !important; border-bottom:5px solid transparent !important; } /* last card ("Need Assistance"): phone numbers larger + bold */ .cm-regform #r_box .r_sub_box:last-of-type .r_box_opts li { font-size:22px !important; font-weight:600 !important; letter-spacing:0.3px !important; padding-top:8px !important; padding-bottom:8px !important; } .cm-regform #r_box .r_sub_box:last-of-type .r_box_opts li::before { top:16px !important; } /* ===== bottom trust band — NOT part of the new design, removed ===== */ .cm-regform .tab-cnt, .cm-regform #bot_box { display:none !important; } .cm-regform .content-wraper > .clear, .cm-regform .clear { clear:both !important; } .cm-regform #bot_box { background:var(--paper) !important; border:1px solid #efe7dd !important; border-radius:16px !important; padding:22px !important; } .cm-regform .bot-menu a { display:inline-block !important; margin-right:18px !important; color:var(--primary) !important; font-weight:700 !important; text-decoration:none !important; font-size:14px !important; } .cm-regform #bot_box h1 { font-size:18px !important; color:var(--ink) !important; font-weight:700 !important; margin:10px 0 6px !important; } .cm-regform #bot_box p { font-size:13px !important; color:var(--mute) !important; line-height:1.6 !important; } /* ===== footer (design site-footer — LIGHT) ===== */ .cm-regform .cm-site-footer { background:var(--paper) !important; color:var(--ink) !important; padding:0 !important; margin-top:28px !important; border-top:1px solid var(--line) !important; } .cm-regform .cm-footer-inner { max-width:1180px !important; margin:0 auto !important; padding:48px 24px 0 !important; } .cm-regform .cm-footer-top { display:grid !important; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1fr !important; gap:30px !important; padding-bottom:36px !important; } .cm-regform .cm-footer-logo img { height:42px !important; width:auto !important; display:block !important; margin-bottom:18px !important; } .cm-regform .cm-footer-addr { font-size:13.5px !important; line-height:1.7 !important; color:var(--mute) !important; } .cm-regform .cm-footer-phone { font-size:14px !important; font-weight:700 !important; color:var(--primary) !important; margin-top:16px !important; } .cm-regform .cm-footer-col { display:flex !important; flex-direction:column !important; gap:10px !important; } .cm-regform .cm-footer-col h4 { position:relative !important; font-size:12px !important; font-weight:700 !important; letter-spacing:1px !important; text-transform:uppercase !important; color:#b08968 !important; margin:0 0 12px !important; padding-bottom:8px !important; } .cm-regform .cm-footer-col h4::after { content:"" !important; position:absolute !important; left:0 !important; bottom:0 !important; width:22px !important; height:2px !important; background:var(--primary) !important; } .cm-regform .cm-footer-col a, .cm-regform .cm-footer-col span { font-size:13.5px !important; color:var(--ink) !important; text-decoration:none !important; cursor:pointer !important; } .cm-regform .cm-footer-col a:hover, .cm-regform .cm-footer-col span:hover { color:var(--primary) !important; } /* services bar */ .cm-regform .cm-footer-services { display:grid !important; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1fr !important; gap:30px !important; border-top:1px solid var(--line) !important; padding:18px 0 !important; font-size:13.5px !important; color:var(--mute) !important; } .cm-regform .cm-footer-services-inner { grid-column:2 / -1 !important; } .cm-regform .cm-footer-services strong { color:var(--ink) !important; } .cm-regform .cm-footer-services a { color:#2f7db8 !important; text-decoration:none !important; } .cm-regform .cm-footer-services a:hover { text-decoration:underline !important; } /* bottom bar */ .cm-regform .cm-footer-bottom { display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:wrap !important; gap:14px !important; border-top:1px solid var(--line) !important; padding:18px 0 24px !important; font-size:12.5px !important; color:var(--mute) !important; } .cm-regform .cm-footer-social { display:flex !important; align-items:center !important; gap:16px !important; } .cm-regform .cm-footer-social a { color:var(--mute) !important; display:inline-flex !important; } .cm-regform .cm-footer-social a:hover { color:var(--primary) !important; } /* hide the legacy server-rendered social-icons strip (design footer replaces it) */ .cm-regform .inside_footer_cop-r { display:none !important; } @media (max-width:900px) { .cm-regform .cm-footer-top { grid-template-columns:1fr 1fr !important; } .cm-regform .cm-footer-bottom { justify-content:flex-start !important; } } @media (max-width:900px) { .cm-regform .content-left-box { float:none !important; width:100% !important; } .cm-regform #r_box { float:none !important; width:100% !important; margin-top:20px !important; } } /* Mobile order: collage image -> intro headline -> form -> info cards. JS lifts .cm-rg-photo and .cm-rg-intro to the top of .content-wraper on mobile; these rules style them while they sit there (on desktop they live inside #r_box, untouched). */ @media (max-width:900px) { .cm-regform .content-wraper > .cm-rg-photo { margin:20px 56px 0 !important; box-shadow:none !important; } .cm-regform .content-wraper > .cm-rg-intro { padding:22px 56px 0 !important; margin:0 !important; background:none !important; } } @media (max-width:600px) { .cm-regform .content-wraper > .cm-rg-photo { margin:16px 20px 0 !important; } .cm-regform .content-wraper > .cm-rg-intro { padding:18px 20px 0 !important; } .cm-regform .content-left-box { padding-left:20px !important; padding-right:20px !important; } } /* gender radios: drop the external margin-left:10px (was leaving an empty box before Male) and give the table the same 18px bottom rhythm as the other field rows (its inline style only sets height/width, so this !important rule wins). */ .cm-regform .gender { margin-left:0 !important; margin-bottom:18px !important; } /* ── Password show / hide toggle ────────────────────────────────────────── .cm-pass-wrap is a relative anchor so the button sits inside the field. Right padding on the input keeps the typed text clear of the button. */ .cm-regform .cm-pass-wrap { position:relative !important; display:block !important; width:auto !important; } .cm-regform .cm-pass-wrap input[type="password"], .cm-regform .cm-pass-wrap input[type="text"] { padding-right:64px !important; } .cm-regform .cm-pass-show { position:absolute !important; right:12px !important; top:50% !important; transform:translateY(-50%) !important; background:none !important; border:none !important; color:var(--primary) !important; font-size:13px !important; font-weight:600 !important; cursor:pointer !important; padding:4px !important; margin:0 !important; line-height:1 !important; z-index:2 !important; width:auto !important; height:auto !important; box-shadow:none !important; } .cm-regform .cm-pass-show:hover { text-decoration:underline !important; }