/* * SRF portal styles. * * Tokens measured off bharattesthouse.com/css/main.css on 2026-09-09, not * matched by eye — so this page sits beside the rest of the site without * looking like a bolt-on. * * EVERY RULE IS SCOPED UNDER .srf-app (2026-09-29). On bharattesthouse.com this * page is rendered inside the website's own header and footer, with the site's * Bootstrap theme loaded — so an unscoped `a`, `h2` or `input` rule here would * restyle the site's menu, and the site's `.btn` / `.card` would restyle this * form. The four clashing classes are renamed (.srf-btn, .srf-btn-light, * .srf-btn-sm, fieldset.srf-card) and everything else lives under the wrapper. * When the page runs standalone, itself carries class="srf-app". * One deliberate exception, at the end: the site's title band, scoped by its * own .srf-page-title class instead. */ .srf-app { --bth-blue: #3368c6; /* primary: top bar, buttons, links */ --bth-blue-dark: #2457aa; /* hover / active */ --bth-navy: #031b4e; /* all headings */ --bth-muted: #8a91ac; /* secondary text */ --bth-panel: #f6faff; /* section backgrounds */ --bth-panel-2: #f5f9fd; --bth-border: #e2e9f1; --bth-border-2: #dce1e9; --bth-danger: #c0392b; --bth-ok: #1e7e34; } .srf-app, .srf-app * { box-sizing: border-box; } .srf-app { margin: 0; font-family: Roboto, sans-serif; font-size: 15px; line-height: 1.6; color: #4a5568; background: #fff; } .srf-app h1, .srf-app h2, .srf-app h3, .srf-app h4 { font-family: Poppins, sans-serif; font-weight: 600; color: var(--bth-navy); margin: 0 0 15px; } .srf-app a { color: var(--bth-blue); text-decoration: none; } .srf-app a:hover { color: var(--bth-blue-dark); text-decoration: underline; } .srf-app .wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; } /* ---- chrome ------------------------------------------------------------ */ .srf-app .topbar { background: var(--bth-blue); color: #fff; font-size: 14px; } .srf-app .topbar a { color: #fff; } .srf-app .topbar-inner { display: flex; gap: 28px; flex-wrap: wrap; padding: 10px 20px; } .srf-app .ti { opacity: .85; } .srf-app .masthead { border-bottom: 1px solid var(--bth-border); } .srf-app .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 20px; } .srf-app .brand { display: block; text-decoration: none; } .srf-app .brand:hover { text-decoration: none; } .srf-app .brand-mark { display: block; font-family: Poppins, sans-serif; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: 1px; color: var(--bth-navy); } .srf-app .brand-tag { display: block; font-size: 12px; font-style: italic; color: var(--bth-muted); } .srf-app .masthead-nav { display: flex; gap: 26px; flex-wrap: wrap; } .srf-app .masthead-nav a { font-family: Poppins, sans-serif; font-weight: 500; color: var(--bth-navy); } .srf-app .pagehead { background: var(--bth-panel-2); border-bottom: 1px solid var(--bth-border); padding: 26px 0; } .srf-app .pagehead h1 { font-size: 34px; margin: 0 0 4px; border-left: 5px solid var(--bth-blue); padding-left: 14px; } .srf-app .crumbs { margin: 0; color: var(--bth-muted); font-size: 14px; padding-left: 19px; } .srf-app .crumbs span { color: var(--bth-blue); } .srf-app .pagehead-sub { margin: 10px 0 0; padding-left: 19px; max-width: 780px; } .srf-app .main { padding: 30px 20px 60px; } /* Inside the website's chrome the page-title band carries the heading, so the form's one-line introduction sits above the first section instead. */ .srf-app .srf-intro { margin: 0 0 24px; max-width: 820px; font-size: 15.5px; } .srf-app .sitefoot { background: var(--bth-navy); color: #c9d2e6; padding: 20px 0; font-size: 14px; } .srf-app .sitefoot p { margin: 0; } /* ---- form -------------------------------------------------------------- */ .srf-app fieldset.srf-card { border: 1px solid var(--bth-border); border-radius: 6px; padding: 0 0 20px; margin: 0 0 22px; min-width: 0; /* so a wide table cannot stretch the page */ } .srf-app fieldset.srf-card > legend { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; color: var(--bth-navy); background: var(--bth-panel); border: 1px solid var(--bth-border); border-radius: 4px; margin: 0 0 18px 18px; padding: 7px 16px; width: auto; } .srf-app .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 18px; padding: 0 20px; } .srf-app .c3 { grid-column: span 3; } .srf-app .c4 { grid-column: span 4; } .srf-app .c6 { grid-column: span 6; } .srf-app .c8 { grid-column: span 8; } .srf-app .c12 { grid-column: span 12; } .srf-app label.f { display: block; font-size: 14px; font-weight: 500; color: var(--bth-navy); margin-bottom: 5px; } .srf-app label.f .req { color: var(--bth-danger); } .srf-app .hint { display: block; font-weight: 400; color: var(--bth-muted); font-size: 13px; } .srf-app input[type=text], .srf-app input[type=email], .srf-app input[type=tel], .srf-app input[type=date], .srf-app select, .srf-app textarea { width: 100%; padding: 9px 12px; font-family: Roboto, sans-serif; font-size: 15px; color: #2d3748; background: #fff; border: 1px solid var(--bth-border-2); border-radius: 4px; /* The website theme also styles bare inputs (height, margins, shadow); pinned here so the form looks the same inside the site as standalone. */ height: auto; margin: 0; line-height: 1.5; box-shadow: none; } .srf-app input:focus, .srf-app select:focus, .srf-app textarea:focus { outline: none; border-color: var(--bth-blue); box-shadow: 0 0 0 3px rgba(51,104,198,.12); } .srf-app textarea { resize: vertical; min-height: 62px; } .srf-app .err-field { border-color: var(--bth-danger) !important; } .srf-app .err-msg { display: block; color: var(--bth-danger); font-size: 13px; margin-top: 4px; } /* ---- sample grid ------------------------------------------------------- */ .srf-app .tablewrap { overflow-x: auto; padding: 0 20px; } .srf-app table.samples { width: 100%; border-collapse: collapse; min-width: 900px; } .srf-app table.samples th { font-family: Poppins, sans-serif; font-weight: 600; font-size: 13px; text-align: left; color: var(--bth-navy); background: var(--bth-panel); border: 1px solid var(--bth-border); padding: 9px 10px; } .srf-app table.samples td { border: 1px solid var(--bth-border); padding: 8px; vertical-align: top; } .srf-app table.samples td.sl { text-align: center; color: var(--bth-muted); width: 44px; } .srf-app table.samples textarea { min-height: 54px; } /* ---- buttons ----------------------------------------------------------- */ .srf-app .srf-btn { display: inline-block; font-family: Poppins, sans-serif; font-weight: 500; font-size: 15px; padding: 11px 26px; border: 1px solid var(--bth-blue); border-radius: 4px; background: var(--bth-blue); color: #fff; cursor: pointer; } .srf-app .srf-btn:hover { background: var(--bth-blue-dark); border-color: var(--bth-blue-dark); color: #fff; text-decoration: none; } .srf-app .srf-btn-light { background: #fff; color: var(--bth-blue); } .srf-app .srf-btn-light:hover { background: var(--bth-panel); color: var(--bth-blue-dark); } .srf-app .srf-btn-sm { padding: 7px 16px; font-size: 14px; } .srf-app .actions { padding: 4px 20px 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* ---- notes, alerts, terms ---------------------------------------------- */ .srf-app .note { padding: 14px 18px; border-radius: 4px; border: 1px solid var(--bth-border); background: var(--bth-panel); margin: 0 0 22px; } .srf-app .alert-bad { border-color: #f0c7c2; background: #fdf3f2; color: #8c2f22; padding: 14px 18px; border-radius: 4px; border-width: 1px; border-style: solid; margin: 0 0 22px; } .srf-app .alert-good { border-color: #bfe3c8; background: #f2fbf5; color: #17632c; padding: 14px 18px; border-radius: 4px; border-width: 1px; border-style: solid; margin: 0 0 22px; } .srf-app ol.terms { margin: 0; padding: 0 20px 0 40px; font-size: 14px; } .srf-app ol.terms li { margin-bottom: 7px; } .srf-app .accept { padding: 16px 20px 0; display: flex; gap: 10px; align-items: flex-start; } .srf-app .accept input { margin-top: 4px; width: 17px; height: 17px; flex: none; } .srf-app .accept label { margin: 0; font-size: 14.5px; color: var(--bth-navy); font-weight: 500; } .srf-app .radios { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 3px; } .srf-app .radios label { margin: 0; font-weight: 400; color: #4a5568; display: flex; gap: 7px; align-items: center; } .srf-app .radios input { width: 16px; height: 16px; } /* The honeypot: off-screen rather than display:none, which some bots skip. */ .srf-app .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .srf-app .labcard { padding: 0 20px; } .srf-app .labcard .addr { color: var(--bth-muted); font-size: 14px; margin-top: 6px; min-height: 21px; } /* ---- confirmation ------------------------------------------------------ */ .srf-app .refbox { text-align: center; border: 2px dashed var(--bth-blue); background: var(--bth-panel); border-radius: 6px; padding: 26px 20px; margin: 0 0 24px; } .srf-app .refbox .lbl { font-size: 14px; color: var(--bth-muted); text-transform: uppercase; letter-spacing: 1px; } .srf-app .refbox .ref { font-family: Poppins, sans-serif; font-weight: 700; font-size: 34px; color: var(--bth-navy); margin-top: 4px; } @media (max-width: 860px) { .srf-app .c3, .srf-app .c4, .srf-app .c6, .srf-app .c8 { grid-column: span 12; } /* Stacked, so the divider that separated the two columns becomes a rule between them instead. */ .srf-app .split-col + .split-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--bth-border); padding-top: 16px; } .srf-app .pagehead h1 { font-size: 27px; } .srf-app .masthead-nav { display: none; } } /* ---- captcha ----------------------------------------------------------- */ .srf-app .captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .srf-app .captcha-img { border: 1px solid var(--bth-border-2); border-radius: 4px; display: block; } .srf-app .captcha-row input { width: 150px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500; } .srf-app #captcha-reload { line-height: 1; font-size: 17px; padding: 8px 12px; } /* ---- folds (optional sections) ----------------------------------------- */ /* Two columns side by side inside one card — the customer and the factory (owner request 2026-09-14). Each .split-col carries its own nested .grid, whose 20px side padding is zeroed so the two halves line up with the card's own gutter instead of indenting twice. */ .srf-app .split > .split-col > .grid { padding: 0; } .srf-app .split-col + .split-col { border-left: 1px solid var(--bth-border); padding-left: 18px; } .srf-app .split-head { font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; color: var(--bth-navy); margin: 0 0 10px; } .srf-app .split-head .opt { font-weight: 400; color: var(--bth-muted); font-size: 13px; margin-left: 6px; } /* "Same as company" — sits directly under the factory heading, so the tick and the fields it fills are read together. */ .srf-app .same-as { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--bth-navy); margin: 0 0 12px; cursor: pointer; } .srf-app .same-as input { width: 15px; height: 15px; cursor: pointer; } /* While the tick is on, the copied boxes are visibly not the ones to type in. */ .srf-app .same-as-locked input, .srf-app .same-as-locked select { background: var(--bth-panel); color: var(--bth-muted); cursor: not-allowed; } /* Owner request 2026-09-14: breathing room above the summary line, so an optional section reads as a separate offer rather than as the tail of the block above it. */ .srf-app .fold { margin: 22px 20px 0; border-top: 1px solid var(--bth-border); padding-top: 16px; } .srf-app .fold > summary { cursor: pointer; list-style: none; font-family: Poppins, sans-serif; font-weight: 500; font-size: 14.5px; color: var(--bth-blue); padding: 2px 0; } .srf-app .fold > summary::-webkit-details-marker { display: none; } /* A caret that turns, so it is obvious the section opens rather than links. */ .srf-app .fold > summary::before { content: "\203A"; display: inline-block; width: 14px; font-size: 18px; line-height: 1; transform: translateY(1px); } .srf-app .fold[open] > summary::before { transform: translateY(1px) rotate(90deg); } .srf-app .fold > summary:hover { color: var(--bth-blue-dark); } .srf-app .fold > summary .opt { font-weight: 400; color: var(--bth-muted); font-size: 13px; } /* The grid inside a fold already sits within the card's padding. */ .srf-app .fold .grid { padding: 14px 0 0; } .srf-app .fold ol.terms { padding: 12px 0 0 22px; } /* ---- file upload ------------------------------------------------------- */ .srf-app input[type=file] { width: 100%; padding: 8px 10px; font-family: Roboto, sans-serif; font-size: 14px; color: #2d3748; background: var(--bth-panel); border: 1px dashed var(--bth-border-2); border-radius: 4px; cursor: pointer; } .srf-app input[type=file]:hover { border-color: var(--bth-blue); } .srf-app input[type=file]::file-selector-button { font-family: Poppins, sans-serif; font-weight: 500; font-size: 13px; margin-right: 12px; padding: 6px 14px; cursor: pointer; color: var(--bth-blue); background: #fff; border: 1px solid var(--bth-blue); border-radius: 4px; } /* Signature / stamp previews (owner request 2026-09-17). */ .srf-app .upload-preview { margin-top: 8px; padding: 8px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .srf-app .upload-preview[hidden] { display: none; } .srf-app .upload-preview img { max-width: 100%; max-height: 160px; object-fit: contain; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; } .srf-app .upload-preview-file { font-size: 14px; color: #334155; } /* ---- the website's page-title band (owner request 2026-09-29) ------------ The one rule NOT under .srf-app: the band belongs to the website's chrome and sits above the form. It is still scoped — only this page's band carries .srf-page-title, so no other page of the site is touched. The site gives the band no padding on desktop (every inner page's title sits against the top edge); at 991px and below it already has a 180px centred band of its own, so the extra room is added on desktop only. */ @media (min-width: 992px) { .srf-page-title .ttm-page-title-row-inner .row { padding: 34px 0 24px; } }