/* JainBandhu - mobile-first styles */ :root { --primary: #b02a2a; /* deep red/maroon */ --primary-dark: #8b1e1e; /* Unread badge. Separate from --primary because dark mode lightens --primary to #e05a5a, where white text drops to 3.63 contrast and fails. */ --badge-bg: #b02a2a; /* Primary button background. Separate from --primary so dark mode can keep it dark enough for white text — see the .btn rule. */ --btn-bg: #b02a2a; --accent: #e8a020; /* saffron gold */ /* The header needs its OWN background, not --primary. In dark mode --primary is deliberately lightened (it is a foreground colour there, read against a near-black page), and the header was using it as a background — so the bar got lighter in dark mode and the gold "Bandhu" fell to 1.64 contrast, effectively invisible. A maroon header is the brand; it should not invert. */ --header-a: #b02a2a; --header-b: #8b1e1e; /* Brighter than --accent: the standard saffron manages only 2.95 on the header maroon. This clears 4.5 on both themes' lightest header end. */ --logo-accent: #ffd27a; --greet-fg: #f4d9a8; --bg: #fdf8f2; --card: #ffffff; --text: #33241f; /* Nudged darker from #8a7568: at the old value, secondary text (profile meta lines, hints, taglines) sat just under the readability threshold on white, which is hard work on a phone in daylight or for older eyes. */ --muted: #7f6a5c; --border: #ead9c8; --radius: 12px; --chip-ok-bg: #e8f7ee; --chip-ok-fg: #177245; /* Solid "connected" green. Dark mode flips to dark text on a light green, because white on a light green fails contrast badly. */ --ok-solid-bg: #15703c; --ok-solid-fg: #ffffff; --chip-warm-bg: #faf1e2; --chip-warm-fg: #8a5a00; --chip-info-bg: #d6eaff; --chip-info-fg: #1565c0; --skeleton: #efe3d5; --shadow: 0 2px 10px rgba(120,70,20,.07); /* Callout panels (kundli box, members-only notices) and status text. These need real dark-mode counterparts: a pale cream panel with the dark theme's near-white text on it is completely unreadable. */ --note-bg: #fff7e6; --note-border: #ffe0a3; --note-fg: #7a6a3a; --warn-bg: #fdebd0; --warn-border: #f5cba7; --warn-fg: #8f5a08; --error-fg: #c0392b; --success-fg: #1e8449; --field-bg: #ffffff; /* inputs, dropdowns, modals, popovers */ /* Placeholder text. Browsers default to a very light grey that washes out against the cream page, so "Search by name, city, work…" was barely there. */ --placeholder: #5f4d42; /* 7.99 on the white field */ --divider: #f0e4d6; /* the dashed hairlines between rows */ /* Faint wedding-invitation motif (mango leaf, marigold dots, a small kalash) tiled across the page background, BEHIND the cards. The cards are opaque, so this never sits under text and can't affect readability. Drawn in code: under 1KB, sharp at any zoom, and adds no height to any page. TO REMOVE IT: change the value below to `none`. Nothing else to touch. */ --page-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 6 q-6 12 0 22 q6-10 0-22z' fill='%23b02a2a' fill-opacity='0.055'/%3E%3Ccircle cx='6' cy='38' r='2.6' fill='%23e8a020' fill-opacity='0.10'/%3E%3Ccircle cx='58' cy='38' r='2.6' fill='%23e8a020' fill-opacity='0.10'/%3E%3Cpath d='M26 52 q-3-9 2-13 h8 q5 4 2 13z' fill='%23b02a2a' fill-opacity='0.045'/%3E%3Ccircle cx='32' cy='36' r='2.2' fill='%23b02a2a' fill-opacity='0.05'/%3E%3C/svg%3E"); } /* ---- Dark theme ---- Applied by setting data-theme="dark" on . Every colour the site uses is a variable, so only these need overriding — no component knows or cares which theme is active. Deliberately warm-toned rather than pure grey so it still feels like the same site rather than a different product. */ html[data-theme="dark"] { --primary: #e05a5a; --primary-dark: #c94545; --badge-bg: #c94545; /* white text: 4.75 (dark --primary would be 3.63) */ --accent: #e8a020; /* Darker maroon in dark mode, not lighter. */ --header-a: #6d1717; --header-b: #4d0f0f; --logo-accent: #ffd27a; /* 8.26 on #6d1717 */ --greet-fg: #f4d9a8; /* 8.59 on #6d1717 */ --bg: #17131a; --card: #221c26; --text: #f5eee8; --muted: #a89aa2; --border: #362c3c; --chip-ok-bg: #1c3a2a; --chip-ok-fg: #5fd99a; --ok-solid-bg: #5fd99a; --ok-solid-fg: #17131a; --btn-bg: #c03c3c; --chip-warm-bg: #3a2f1c; --chip-warm-fg: #e8a020; --chip-info-bg: #16324f; --chip-info-fg: #79bbff; --skeleton: #2e2634; --shadow: 0 2px 10px rgba(0,0,0,.35); --note-bg: #2a2216; --note-border: #4a3c20; --note-fg: #d9c9a3; --warn-bg: #3a2a14; --warn-border: #5a4020; --warn-fg: #e8b563; --error-fg: #ff7b6b; --success-fg: #5fd99a; --field-bg: #1c1720; --placeholder: #b9aca3; /* 7.96 on the dark field */ --divider: #362c3c; /* Same motif, drawn in a pale tint and dialled right down. A pattern that reads as "subtle texture" on cream starts to look like smudges on the screen against a near-black page, so dark mode needs its own strength rather than reusing the light-theme one. */ --page-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 6 q-6 12 0 22 q6-10 0-22z' fill='%23ffffff' fill-opacity='0.030'/%3E%3Ccircle cx='6' cy='38' r='2.6' fill='%23e8a020' fill-opacity='0.055'/%3E%3Ccircle cx='58' cy='38' r='2.6' fill='%23e8a020' fill-opacity='0.055'/%3E%3Cpath d='M26 52 q-3-9 2-13 h8 q5 4 2 13z' fill='%23ffffff' fill-opacity='0.025'/%3E%3Ccircle cx='32' cy='36' r='2.2' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"); } html[data-theme="dark"] .btn-secondary { background: var(--card); } /* The jain flag's white stripe would otherwise vanish against a dark header. */ html[data-theme="dark"] .jain-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.25); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif; /* Motif tiles on top of the flat background colour, and the opaque cards then sit on top of both — so the pattern shows only in the margins and gaps, never behind any text. Deliberately NOT background-attachment:fixed: iOS Safari handles that badly and it causes visible scroll stutter on phones, which is a poor trade for a texture nobody is meant to consciously notice. */ background-color: var(--bg); background-image: var(--page-motif); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Nothing should ever be able to scroll the page sideways. A single too-wide element used to shift everything and hide controls at the right edge; individual scrollable strips (tab row, "new this week") still scroll internally, which is what we actually want. `clip` rather than `hidden` on purpose: `hidden` turns this into a scroll container, which silently breaks `position: sticky` on the header and the tab row below it. */ overflow-x: clip; } /* ---- Header ---- */ header { background: linear-gradient(135deg, var(--header-a), var(--header-b)); color: #fff; padding: 7px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 50; /* Safety valve: with six controls (theme, A-, A+, and three languages) plus the logo, this row can exceed a narrow phone — especially once someone bumps the text size with A+. Wrapping is far better than overflowing, because horizontal overflow drags the WHOLE page sideways and cuts off the right-hand end of the tab row underneath. */ flex-wrap: wrap; } /* The brand was the smallest thing in a header full of six controls. Text size and dark mode are set once and never touched again, so they moved behind a gear; language stayed on the surface because someone who reads only Kannada arrives at an English page and must be able to find the switch. */ .brand { display: flex; align-items: center; gap: 11px; min-width: 0; } /* Brand logo in the header. The logo is used in its ORIGINAL colours (maroon "Jain" + gold "Bandhu"), so it sits on a white chip — maroon-on-maroon would be unreadable, and recolouring the artwork made it look washed out. */ .brand-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; /* No shadow: the logo artwork already carries one, and doubling it up looked heavy against the maroon bar. */ /* Cream, not white, and the exact cream from the logo file itself (#f5efe5, sampled from the master artwork). The header logo is cut from a JPEG master whose background cannot be keyed to transparency without leaving halos around its drop shadows, so the chip matches the logo's own background instead and the seam disappears. It also sits warmer against the maroon bar than stark white did. */ background: #f5efe5; border-radius: clamp(9px, .6vw + 6px, 13px); padding: clamp(4px, .25vw + 2px, 6px) clamp(8px, .8vw + 4px, 13px); } /* Fluid rather than three hard steps. The logo is artwork with fine detail — the flag and the swastika — so at 24px on a phone it turned to mush, while 34px left it looking undersized in a wide desktop header. clamp() grows it smoothly with the viewport and pins both ends, so it is never smaller than legible and never dominates the bar. 375px phone -> 26px 768px tablet -> 34px 1200px+ desktop -> 44px */ .brand-logo-img { height: clamp(24px, 2vw + 13px, 36px); width: auto; display: block; } .brand-admin { color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.35); flex-shrink: 0; } /* No per-breakpoint logo heights any more — clamp() above covers every width continuously, including the sizes between these old breakpoints where the logo used to jump. */ /* Name and greeting sit on one line, baseline-aligned so "Jai Jinendra" rests on the same line as "JainBandhu" rather than floating mid-height. It wraps to a second line only when the header genuinely runs out of room. */ .brand-text { min-width: 0; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .logo { font-size: 1.6rem; font-weight: 700; letter-spacing: .2px; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .logo span { color: var(--logo-accent); } /* NOT .tagline: that class already exists further down for the landing page's own subtitle, is defined later, and would win — painting the greeting muted brown on the maroon header and adding a 20px margin under it. */ /* The greeting was set in the interface font at .82rem, which read as a status label rather than a welcome. Georgia is already the display face across the landing page, so using it here ties the header to the rest of the brand. Deliberately NOT italic: Georgia has no Kannada or Devanagari glyphs, so "ಜೈ ಜಿನೇಂದ್ರ" falls back to a system face and the browser would fake the slant, which looks broken. The Noto entries give that fallback a serif to land on before the generic one. */ .brand-greet { font-family: Georgia, 'Times New Roman', 'Noto Serif Kannada', 'Noto Serif Devanagari', 'Noto Sans Kannada', serif; font-size: clamp(.82rem, .3vw + .74rem, 1.02rem); font-weight: 700; color: var(--greet-fg); letter-spacing: .4px; /* Matches the .logo text above it, so it sits on the gradient rather than floating flat on top of it. */ text-shadow: 0 1px 2px rgba(0, 0, 0, .3); white-space: nowrap; } /* A small bow when the page opens, twice, then still. Deliberately NOT a forever loop: this sits in a sticky header on every screen, and something moving permanently in the corner of your eye stops reading as a greeting and starts reading as an advert. */ @keyframes jb-namaste { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.22) rotate(-8deg); } 50% { transform: scale(1.06) rotate(5deg); } 75% { transform: scale(1.12) rotate(-3deg); } 100% { transform: scale(1) rotate(0deg); } } .greet-hands { display: inline-block; /* transforms do not apply to inline elements */ transform-origin: 50% 80%; /* pivots at the wrists, so it bows rather than spins */ animation: jb-namaste 1.5s ease-in-out .5s 2 both; } /* Anyone who has asked their device for less motion gets none. Vestibular conditions make repeated movement genuinely unpleasant, not just annoying. */ @media (prefers-reduced-motion: reduce) { .greet-hands { animation: none; } } /* margin-left:auto matters more than it looks. The header is flex-wrap, so on a narrow phone this block drops onto a second line — and a wrapped flex line starts at the LEFT. The dropdowns below are anchored `right: 0` to this box, so once it sat on the left, a 150px-wide menu opened leftward straight off the screen edge (the language menu was clipped to "lish"). An auto left margin absorbs the free space on whichever line this lands on, so it stays hard right whether the header wraps or not, and the menus always open inward. */ .hdr-actions { display: flex; align-items: center; gap: 6px; position: relative; flex-shrink: 0; margin-left: auto; } .hdr-btn { background: rgba(255,255,255,.16); border: none; color: #fff; padding: 7px 11px; border-radius: 8px; cursor: pointer; font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; min-height: 38px; } .hdr-btn .caret { font-size: .7rem; opacity: .8; } .hdr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Dropdowns. position:absolute inside .hdr-actions, which is the only positioned ancestor, so they hang below the button that opened them. */ .hdr-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.22); padding: 6px; min-width: 150px; /* Belt and braces for the case above: even if a future layout change puts this box somewhere unexpected, it can never be wider than the screen. */ max-width: calc(100vw - 20px); } .hdr-menu.open { display: flex; flex-direction: column; gap: 2px; } .hdr-menu button { background: none; border: none; color: var(--text); text-align: left; padding: 10px 12px; border-radius: 7px; cursor: pointer; font-size: .92rem; min-height: 42px; /* comfortable touch target */ } @media (hover: hover) { .hdr-menu button:hover { background: var(--chip-warm-bg); } } .hdr-menu button.active { background: var(--chip-warm-bg); color: var(--chip-warm-fg); font-weight: 700; } @media (max-width: 640px) { .logo { font-size: 1.32rem; } /* Narrower gap on a phone: the header has less room, and 16px there starts pushing the greeting onto a second line. */ .brand-text { gap: 11px; } .brand { gap: 9px; } /* Scale the flag AND the mark on it together, or the swastika ends up oversized on the smaller flag. */ .jain-flag { width: 40px; height: 31px; } .jf-swastika { width: 13px; height: 13px; } } /* Phones: the greeting is the first thing to go, never the name. This used to kick in only below 340px, which left every normal phone (360–414px) wrapping the header into two rows — logo on one line, language and settings on the next, with a band of empty maroon between. Without the greeting the logo and the two buttons fit on one row with room to spare, so wrapping is switched off here too: the safety valve is only needed when the greeting is present. */ @media (max-width: 520px) { .brand-greet { display: none; } header { flex-wrap: nowrap; } } .lang-btn.active { background: var(--accent); color: #4a2c00; font-weight: 600; } /* ---- Layout ---- */ .container { max-width: 900px; margin: 0 auto; padding: 16px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(120,70,20,.06); } h1 { font-size: 1.4rem; margin-bottom: 8px; } h2 { font-size: 1.15rem; margin-bottom: 12px; color: var(--primary); } h3 { font-size: 1rem; margin: 16px 0 8px; color: var(--primary-dark); border-bottom: 1px solid var(--border); padding-bottom: 4px; } .tagline { color: var(--muted); margin-bottom: 20px; } /* ---- Landing hero (index.html) ---- Explains the service before asking anyone to sign up. Sizes are in rem so they scale with the A-/A+ text-size control the rest of the site uses. */ .free-pill { display: inline-block; background: var(--chip-ok-bg); color: var(--chip-ok-fg); font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 4px 11px; border-radius: 20px; margin-bottom: 10px; } .hero-title { font-size: 1.55rem; line-height: 1.22; letter-spacing: -.01em; color: var(--text); margin-bottom: 7px; } .hero-sub { color: var(--text); opacity: .8; font-size: .92rem; line-height: 1.5; margin-bottom: 15px; } .stat-strip { display: flex; gap: 8px; margin-bottom: 15px; } .stat-box { flex: 1; background: var(--bg); border-radius: 10px; padding: 9px 6px; text-align: center; } .stat-box b { display: block; color: var(--primary); font-size: 1.15rem; line-height: 1.2; } .stat-box span { font-size: .66rem; color: var(--muted); } .hero-alt { text-align: center; font-size: .85rem; color: var(--muted); margin: 9px 0 0; } .hero-alt a { color: var(--primary); font-weight: 700; text-decoration: none; } .hero-alt a:hover { text-decoration: underline; } .feature-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; border-top: 1px solid var(--border); margin-top: 15px; padding-top: 13px; } .feature-grid > div { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700; color: var(--text); } /* At 15px these read as decoration rather than as a feature list. The icon now sits in a soft circular chip: the padding plus border-radius on the itself makes the circle, so no extra wrapper element was needed in six places of markup. box-sizing must be content-box here, because the global `* { box-sizing: border-box }` would otherwise eat the padding out of the 19px and leave a 5px icon. */ .feature-grid svg { width: 19px; height: 19px; padding: 7px; box-sizing: content-box; flex-shrink: 0; background: var(--chip-warm-bg); border-radius: 50%; /* chip-warm-fg, not --primary: on the dark chip --primary only reaches 3.60, and this pairing is already contrast-checked by the test suite. */ fill: none; stroke: var(--chip-warm-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* "Forgot password", tucked under the field it belongs to rather than competing with the primary actions below the button. */ .field-aside { display: flex; justify-content: flex-end; margin-top: 2px; } .quiet-link { background: none; border: none; cursor: pointer; padding: 2px; color: var(--muted); font-size: .78rem; } @media (hover: hover) { .quiet-link:hover { color: var(--primary); text-decoration: underline; } } /* Separates the primary action from the genuine alternative below it. */ .or-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; } .or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .or-divider span { font-size: .72rem; color: var(--muted); } /* Recently married, as a small testimonial rather than a bare list row. */ .story-card { background: var(--bg); border-radius: 12px; padding: 12px 13px; margin-top: 15px; } .story-names { font-size: .88rem; font-weight: 800; color: var(--text); } .story-meta { font-size: .74rem; color: var(--muted); margin-top: 1px; } .story-quote { margin-top: 9px; padding-left: 10px; border-left: 3px solid var(--accent); font-size: .8rem; font-style: italic; color: var(--text); opacity: .9; line-height: 1.45; } /* Secondary links, as one wrapping row rather than a stack of buttons. */ .mini-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 2px 8px 6px; margin-top: -6px; } .mini-links a { color: var(--muted); font-size: .78rem; text-decoration: none; } @media (hover: hover) { .mini-links a:hover { color: var(--primary); text-decoration: underline; } } .story-head { font-size: .68rem; font-weight: 800; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 9px; } .story-row { display: flex; align-items: center; gap: 10px; } .story-avatars { display: flex; flex-shrink: 0; } .story-avatars .av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--primary); } .story-avatars .av + .av { margin-left: -10px; border: 2px solid var(--card); } .story-text { font-size: .8rem; color: var(--text); opacity: .85; line-height: 1.4; min-width: 0; } .story-text em { color: var(--muted); font-style: normal; } @media (min-width: 560px) { .hero-title { font-size: 1.75rem; } } /* ---- Forms ---- */ label { display: block; font-size: .85rem; font-weight: 600; margin: 10px 0 4px; } input, select, textarea { /* min-width:0 stops a control (notably