.custom-color-class{ background-color: rgb(33, 160, 202); color: #fff; } #appointment{ text-align: center; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .btn-outline-secondary { border-color: #ccc; color: #333; } .btn-outline-secondary:hover { background-color: #f0f0f0; color: #000; } .custom-card-header { background-color: #f8f8f8; color: #333; border-bottom: 1px solid #ddd; } .table-hover tbody tr:hover { background-color: #f9f9f9; } .table thead th { border-bottom: 2px solid #dee2e6; } .table td, .table th { vertical-align: middle; } /* Improved dropdown/select box styling for better visibility */ select.form-control, .form-control.select2-enable { /* This rule draws its own chevron below, so the native one has to go - otherwise the control shows two arrows. Previously invisible: the rule was being overridden, so only the native arrow showed. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1.5px solid #ced4da; background-color: #ffffff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } select.form-control:focus, .form-control.select2-enable:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } select.form-control:hover, .form-control.select2-enable:hover { border-color: #80bdff; cursor: pointer; } /* Style for small form controls (dashboard filters) */ select.form-control-sm { border: 1.5px solid #ced4da; background-color: #f8f9fa; transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out; } select.form-control-sm:focus { border-color: #80bdff; background-color: #ffffff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15); } select.form-control-sm:hover { background-color: #e9ecef; border-color: #adb5bd; } /* Select2 dropdown height constraint to prevent overflow */ .select2-results__options { max-height: 300px !important; overflow-y: auto !important; } /* Ensure Select2 dropdown container doesn't exceed viewport */ .select2-container--bootstrap4 .select2-results__options { max-height: 300px; overflow-y: auto; } /* Optional: Add subtle styling for better UX */ .select2-container--bootstrap4 .select2-dropdown { border: 1px solid #ced4da; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } /* Smooth scrolling for dropdown */ .select2-results__options { scroll-behavior: smooth; } /* ---- Phone sizing ------------------------------------------------------- These only take effect now that base.html declares a viewport; before that a phone reported ~980px and never reached this breakpoint. Matches the 575.98px breakpoint already used in index/register/event_picker. */ @media (max-width: 575.98px) { /* Bootstrap's h1 is 2.5rem, which spent ~96px of an 812px phone screen on a title the coordinator already knows. */ h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } /* A 13px checkbox is a poor tap target. The label is clickable too, but the box itself should be reachable without aiming. */ .form-check { padding-left: 1.85rem; min-height: 1.6rem; margin-bottom: .35rem; } .form-check-input { width: 1.15rem; height: 1.15rem; margin-left: -1.85rem; margin-top: .1rem; } .form-check-label { line-height: 1.5; } } /* ===== VDS 2026 look ====================================================== One composition, not two stacked sections: the photograph fills the window, the headline sits on its left and the puja list on its right, both over the same dark scrim. The navbar is lifted onto it so the image reaches the top. Variant 02's picture with variant 05's navigation, from index_variants_01. */ :root{ --vds-ink: #12100F; /* ground under the photograph */ --vds-gold: #C9A227; /* hairlines and eyebrows */ --vds-amber: #F0A857; /* the single call to action */ --vds-maroon: #8E0F5B; /* existing brand, kept for the navbar */ --vds-warm: #E8E0D2; /* body text on dark */ --vds-dim: #A2977F; /* secondary text on dark */ --vds-serif: "Instrument Serif", Georgia, "Times New Roman", serif; } /* ---- navbar lifted onto the hero ---- */ .vds-nav-overlay{ position: absolute; top: 0; left: 0; right: 0; z-index: 10; background-color: transparent !important; } .vds-nav-overlay .navbar-brand img{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); } /* ---- the hero fills the window ---- */ .vds-hero{ position: relative; min-height: 100vh; background: var(--vds-ink); color: #fff; display: flex; align-items: center; overflow: hidden; } .vds-hero__media{ position: absolute; inset: 0; background-position: 58% 38%; background-size: cover; background-repeat: no-repeat; } /* Three scrims. The photograph is bright and busy, so the type needs real ground: a warm bloom that keeps the lamps lit, a left-weighted wash for the headline, and a right-weighted one for the list. */ .vds-hero__scrim{ position: absolute; inset: 0; background: /* warm bloom, sat over the lamps so the aarti light carries onto his face */ radial-gradient(46% 42% at 44% 46%, rgba(255,190,100,.34), transparent 70%), /* the headline needs ground on the left; the right stays light enough to read the photo */ linear-gradient(90deg, rgba(12,10,9,.92) 0%, rgba(12,10,9,.74) 30%, rgba(12,10,9,.34) 52%, rgba(12,10,9,.30) 100%), linear-gradient(180deg, rgba(12,10,9,.62) 0%, rgba(12,10,9,.16) 40%, rgba(12,10,9,.80) 100%); } .vds-hero__inner{ position: relative; width: 100%; padding-top: 9rem; padding-bottom: 4rem; } /* ---- the two columns of the composition ---- */ .vds-hero__grid{ display: flex; flex-wrap: wrap; align-items: center; gap: 3rem 4rem; } .vds-hero__say{ flex: 1 1 26rem; min-width: 0; } .vds-hero__nav{ flex: 1 1 22rem; min-width: 0; } .vds-eyebrow{ font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--vds-amber); margin-bottom: 1rem; } .vds-display{ font-family: var(--vds-serif); font-weight: 400; font-size: 4.2rem; line-height: 1.0; letter-spacing: -.015em; margin: 0; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.5); } .vds-display em{ font-style: italic; color: #FFC978; display: block; } .vds-rule{ width: 64px; height: 1px; background: var(--vds-gold); margin: 1.8rem 0; border: 0; } .vds-hero__sub{ color: var(--vds-warm); font-size: 1.08rem; line-height: 1.65; max-width: 38ch; margin: 0; } .vds-cta{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .btn-vds{ background: var(--vds-amber); color: #1A0E06; border: 0; font-weight: 600; padding: .85rem 2.1rem; border-radius: 6px; } .btn-vds:hover, .btn-vds:focus{ background: #FFC178; color: #1A0E06; } .btn-vds-ghost{ background: rgba(12,10,9,.35); color: var(--vds-warm); border: 1px solid rgba(232,224,210,.35); font-weight: 600; padding: .85rem 2.1rem; border-radius: 6px; } .btn-vds-ghost:hover, .btn-vds-ghost:focus{ background: rgba(232,224,210,.14); color: #fff; } /* ---- the puja list, on the picture ---- */ .vds-list__title{ font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--vds-dim); font-weight: 600; margin-bottom: .6rem; } .vds-hero__nav{ background: linear-gradient(180deg, rgba(10,8,7,.58), rgba(10,8,7,.72)); border: 1px solid rgba(201,162,39,.22); border-radius: 4px; padding: 1.25rem 1.4rem 1.4rem; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .vds-list{ border-top: 1px solid rgba(201,162,39,.4); } .vds-list__row{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.15rem .35rem; border-bottom: 1px solid rgba(201,162,39,.4); text-decoration: none; color: var(--vds-warm); transition: background-color .15s ease, padding-left .15s ease; } .vds-list__row:hover, .vds-list__row:focus{ text-decoration: none; color: #fff; background: rgba(201,162,39,.12); padding-left: .75rem; } .vds-list__name{ font-family: var(--vds-serif); font-size: 1.45rem; line-height: 1.2; } .vds-list__meta{ font-size: .76rem; color: var(--vds-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .vds-list__row:hover .vds-list__meta, .vds-list__row:focus .vds-list__meta{ color: var(--vds-amber); } /* ---- desktop: drop the list clear of his beard ---- */ /* Measured against the cover-scaled photograph: with background-position 58% 38%, the beard ends around 59% of the hero's height. Centred, the panel landed across his face. The offset is in vh so it tracks the picture as the window resizes. */ @media (min-width: 992px){ /* align-items:center centres the MARGIN box, so a margin here moves the panel by only half its value - 40vh buys roughly 180px of drop at a 900px window. */ .vds-hero__nav{ margin-top: 40vh; } } /* ---- tablet ---- */ @media (max-width: 991.98px){ .vds-display{ font-size: 3.6rem; } .vds-hero{ min-height: auto; } .vds-hero__inner{ padding-top: 8.5rem; padding-bottom: 3rem; } .vds-hero__grid{ gap: 2.5rem; } } /* ---- phone ---- */ @media (max-width: 575.98px){ .vds-hero__inner{ padding-top: 7.5rem; padding-bottom: 2.5rem; } .vds-display{ font-size: 2.6rem; } .vds-hero__sub{ font-size: 1rem; } .vds-rule{ margin: 1.3rem 0; } .vds-cta{ gap: .6rem; } .btn-vds, .btn-vds-ghost{ display: block; width: 100%; text-align: center; } .vds-list__name{ font-size: 1.2rem; } .vds-list__row{ padding: .95rem .25rem; } } /* The navbar brand is authored at 200x90, which is half the width of a phone screen and tall enough to collide with an overlaid hero. Scale it where the navbar collapses. */ @media (max-width: 767.98px){ .navbar-brand img{ width: 148px; height: auto; } } /* ---- compact hero: a banner, not the whole page ---- The request form needs its cards visible without a full window of photograph first, so this drops the 100vh floor and shortens the bottom padding. The top padding that clears the overlaid navbar is untouched - that is fixed by the navbar's own height, not by how much content sits under it. */ .vds-hero--compact{ min-height: 0; } .vds-hero--compact .vds-hero__inner{ padding-bottom: 3rem; } .vds-hero--compact .vds-hero__sub{ max-width: 60ch; } /* Tints the shared photograph with the event's own accent colour, so events booked through the same picture still read as themselves. Sits between the photo and the dark scrim; a browser without mix-blend-mode just shows the plain photo underneath. */ .vds-hero__accent{ position: absolute; inset: 0; opacity: .45; mix-blend-mode: color; } @media (max-width: 575.98px){ .vds-hero--compact .vds-hero__inner{ padding-bottom: 2rem; } } /* ---- coordinator screens: tokens and type, no hero ---- Dashboard, edit and bulk pages are dense working tools that a coordinator opens to scan a table, not to arrive at. A full-bleed photograph would push that table below the fold, so these pages get only the shared colour tokens and type scale: an eyebrow line and a gold rule over a plain background, never .vds-hero or .vds-hero__media. */ .vds-page-header{ padding: 1.75rem 0 .25rem; } .vds-page-header .vds-eyebrow{ /* vds-eyebrow is amber-on-dark for the photo hero; low contrast on the white background these screens use, so it takes the brand maroon here instead. */ color: var(--vds-maroon); margin-bottom: .5rem; } .vds-page-header h1, .vds-page-header h2{ font-family: var(--vds-serif); font-weight: 400; color: var(--vds-ink); margin: 0; } .vds-page-header .vds-rule{ margin: 1rem 0 0; } @media (max-width: 575.98px){ .vds-page-header{ padding: 1.25rem 0 .25rem; } } /* ===== Modern form cards ================================================== register.html used to stack Bootstrap's stock .card, one per section, each with a different contextual header colour (info blue / success green / warning yellow / secondary grey / dark black) that had nothing to do with the maroon-and-gold palette the rest of the site now uses - it read as a leftover from a different theme. Replaced with one bevelled card: a soft raised shell (light catching the top edge, a shadow lifting it off the page) holding a numbered step badge instead of a loud header colour, plus carved-in ("bevel") fields to match. */ .vds-form-card{ background: #FFFDF8; border: 1px solid rgba(201,162,39,.18); border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 -1px 0 rgba(18,16,15,.03) inset, 0 22px 44px -28px rgba(18,16,15,.30), 0 2px 8px rgba(18,16,15,.05); margin-bottom: 1.75rem; overflow: hidden; } .vds-form-card__head{ display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.5rem; background: linear-gradient(180deg, rgba(201,162,39,.09), rgba(201,162,39,0)); border-bottom: 1px solid rgba(201,162,39,.18); } .vds-form-card__step{ flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--vds-serif); font-size: 1.1rem; color: #fff; background: linear-gradient(155deg, var(--step-colour, var(--vds-maroon)), #4A0930); box-shadow: 0 4px 10px -3px rgba(18,16,15,.45), 0 1px 0 rgba(255,255,255,.25) inset; } .vds-form-card__title{ font-family: var(--vds-serif); font-weight: 400; font-size: 1.25rem; color: var(--vds-ink); margin: 0; line-height: 1.25; } .vds-form-card__body{ padding: 1.5rem; } /* ---- carved-in ("bevel") fields, replacing the flat Bootstrap default ---- */ .vds-form-card .form-control{ border: 1px solid rgba(18,16,15,.14); border-radius: 12px; background-color: #FBFAF6; box-shadow: inset 0 1px 3px rgba(18,16,15,.08), inset 0 -1px 0 rgba(255,255,255,.6); padding: .6rem .9rem; min-height: 46px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .vds-form-card textarea.form-control{ min-height: 110px; } .vds-form-card .form-control:focus{ border-color: var(--vds-gold); background-color: #fff; box-shadow: 0 0 0 .2rem rgba(201,162,39,.22); outline: 0; } .vds-form-card select.form-control{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e0f5b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } .vds-form-card label{ font-weight: 600; font-size: .82rem; letter-spacing: .01em; color: var(--vds-ink); margin-bottom: .4rem; display: inline-block; } /* ---- CTA buttons on a light (non-hero) background ---- */ .btn-vds-solid{ background: linear-gradient(160deg, var(--btn-colour, var(--vds-maroon)), #4A0930); color: #fff; border: 0; font-weight: 600; border-radius: 14px; padding: .9rem 1.6rem; box-shadow: 0 12px 24px -10px rgba(18,16,15,.45), 0 1px 0 rgba(255,255,255,.2) inset; transition: transform .12s ease, box-shadow .12s ease; } .btn-vds-solid:hover, .btn-vds-solid:focus{ color: #fff; transform: translateY(-1px); box-shadow: 0 16px 28px -10px rgba(18,16,15,.5), 0 1px 0 rgba(255,255,255,.25) inset; } .btn-vds-outline{ background: #FBFAF6; color: var(--vds-maroon); border: 1.5px solid rgba(142,15,91,.3); border-radius: 12px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease; } .btn-vds-outline:hover, .btn-vds-outline:focus{ background: rgba(142,15,91,.07); color: var(--vds-maroon); border-color: var(--vds-maroon); } /* ---- the inline setup-time note, and its acknowledged state ---- Replaces Bootstrap's stock alert-info / alert-success, whose blue/green read as generic warning chrome next to the maroon-and-gold palette. */ .vds-note{ border-radius: 14px; padding: .9rem 1.1rem; border: 1px solid rgba(201,162,39,.35); background: rgba(201,162,39,.09); color: var(--vds-ink); } .vds-note--done{ border-color: rgba(46,125,50,.35); background: rgba(46,125,50,.08); } /* ---- the "optional" tag beside Exact location ---- */ .vds-tag-optional{ display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vds-maroon); background: rgba(142,15,91,.08); border: 1px solid rgba(142,15,91,.2); border-radius: 999px; padding: .15rem .6rem; margin-left: .4rem; vertical-align: middle; } @media (max-width: 575.98px){ .vds-form-card__body{ padding: 1.15rem; } .vds-form-card__head{ padding: 1rem 1.15rem; } .vds-form-card__title{ font-size: 1.08rem; } } /* ========================================================================= 2026 revamp: navbar, homepage, request form, coordinator screens Quiet palette: warm ink and paper, one gold hairline, maroon only as an accent. Status colours are muted so a page of badges does not shout. ========================================================================= */ :root{ --vds-paper: #FAF7F2; --vds-card: #FFFFFF; --vds-line: rgba(18,16,15,.10); --vds-line-2: rgba(18,16,15,.16); --vds-muted: #6B645A; --vds-soft: #F3EEE6; --vds-ok: #2F6B3F; --vds-ok-bg: #E7F1E9; --vds-wait: #8A5A0B; --vds-wait-bg: #FBF1DC; --vds-hold: #5E5850; --vds-hold-bg: #ECE8E2; --vds-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; } body{ background: var(--vds-paper); color: var(--vds-ink); font-family: var(--vds-sans); } a{ color: var(--vds-maroon); } a:hover{ color: #6A0B44; } /* ---- navbar ------------------------------------------------------------ */ .vds-nav{ background: #17120F; border-bottom: 1px solid rgba(201,162,39,.22); } .vds-nav.vds-nav-overlay{ border-bottom: 0; } .vds-nav .nav-link{ color: rgba(232,224,210,.88) !important; font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; padding: .5rem .8rem !important; border-radius: 6px; text-shadow: none; } .vds-nav .nav-link:hover, .vds-nav .nav-link:focus{ color: #fff !important; background: rgba(232,224,210,.08); } .vds-nav .vds-nav__quiet{ color: rgba(232,224,210,.6) !important; } .vds-nav__toggler{ border: 1px solid rgba(232,224,210,.28) !important; border-radius: 10px; padding: .55rem .6rem; background: rgba(12,10,9,.35); } .vds-nav__toggler:focus{ outline: 0; box-shadow: 0 0 0 .2rem rgba(201,162,39,.35); } .vds-nav__bars{ display: block; width: 22px; } .vds-nav__bars span{ display: block; height: 2px; background: #F3EBDD; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .vds-nav__bars span + span{ margin-top: 5px; } .vds-nav__toggler[aria-expanded="true"] .vds-nav__bars span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .vds-nav__toggler[aria-expanded="true"] .vds-nav__bars span:nth-child(2){ opacity: 0; } .vds-nav__toggler[aria-expanded="true"] .vds-nav__bars span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Collapsed menu: its own panel, never bare links over the photograph. */ @media (max-width: 991.98px){ .vds-nav{ position: relative; } .vds-nav.vds-nav-overlay{ position: absolute; } .vds-nav .navbar-collapse{ position: absolute; top: calc(100% - .25rem); left: 12px; right: 12px; z-index: 30; background: rgba(20,16,13,.97); border: 1px solid rgba(201,162,39,.25); border-radius: 14px; padding: .4rem; box-shadow: 0 24px 48px -16px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .vds-nav .navbar-nav .nav-link{ padding: .9rem 1rem !important; font-size: .86rem; } .vds-nav .navbar-nav .nav-item + .nav-item{ border-top: 1px solid rgba(232,224,210,.08); } } /* ---- homepage: one screen ---------------------------------------------- */ .vds-home{ position: relative; min-height: 100vh; min-height: 100svh; background: var(--vds-ink); color: #fff; overflow: hidden; display: flex; flex-direction: column; } .vds-home .vds-hero__media{ background-position: 62% 30%; } .vds-home__scrim{ position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 45%, rgba(255,190,100,.22), transparent 70%), linear-gradient(90deg, rgba(12,10,9,.92) 0%, rgba(12,10,9,.70) 38%, rgba(12,10,9,.45) 62%, rgba(12,10,9,.78) 100%), linear-gradient(180deg, rgba(12,10,9,.55) 0%, rgba(12,10,9,.10) 35%, rgba(12,10,9,.88) 100%); } .vds-home__inner{ position: relative; flex: 1 1 auto; display: flex; align-items: center; padding-top: 7.5rem; padding-bottom: 1.5rem; } .vds-home__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 3rem; align-items: center; width: 100%; } .vds-home .vds-display{ font-size: 4rem; } .vds-home .vds-hero__sub{ max-width: 34ch; } .vds-open{ background: linear-gradient(180deg, rgba(14,11,9,.70), rgba(14,11,9,.82)); border: 1px solid rgba(201,162,39,.25); border-radius: 18px; padding: 1.1rem 1.1rem .6rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); } .vds-open__title{ display: flex; align-items: center; gap: .5rem; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--vds-amber); font-weight: 700; margin: 0 .25rem .8rem; } .vds-open__title::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7BD389; box-shadow: 0 0 0 4px rgba(123,211,137,.18); } .vds-event{ padding: .2rem 0 .7rem; } .vds-event + .vds-event{ border-top: 1px solid rgba(201,162,39,.22); padding-top: .9rem; } .vds-event__head{ display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin: 0 .25rem .55rem; } .vds-event__name{ font-family: var(--vds-serif); font-size: 1.45rem; line-height: 1.15; color: #fff; } .vds-event__dates{ font-size: .74rem; color: var(--vds-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } /* An event whose days are over (views.index): named under "Completed", nothing to request. */ .vds-open__title--done{ color: var(--vds-dim); } .vds-event + .vds-open__title--done{ border-top: 1px solid rgba(201,162,39,.22); padding-top: .9rem; } .vds-open__title--done::before{ content: "\2713"; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: #7BD389; font-size: .8rem; letter-spacing: 0; } .vds-event--done .vds-event__name{ font-size: 1.1rem; color: var(--vds-warm); } .vds-puja-link{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem .9rem; margin-bottom: .45rem; border-radius: 12px; background: rgba(232,224,210,.06); border: 1px solid rgba(232,224,210,.10); color: var(--vds-warm); text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; } .vds-puja-link:hover, .vds-puja-link:focus{ background: rgba(240,168,87,.16); border-color: rgba(240,168,87,.5); color: #fff; transform: translateX(2px); } .vds-puja-link__name{ font-weight: 600; font-size: .98rem; } .vds-puja-link__meta{ display: block; font-size: .74rem; color: var(--vds-dim); font-weight: 400; margin-top: .1rem; } .vds-puja-link__go{ flex: 0 0 auto; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1A0E06; background: var(--vds-amber); border-radius: 999px; padding: .38rem .8rem; } .vds-home__help{ position: relative; border-top: 1px solid rgba(201,162,39,.22); background: rgba(12,10,9,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: .9rem 0 1rem; } .vds-home__help-inner{ display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; } .vds-home__help-lead{ color: var(--vds-warm); font-size: .95rem; margin: 0; } .vds-home__help-lead strong{ font-family: var(--vds-serif); font-weight: 400; font-size: 1.2rem; color: #fff; margin-right: .35rem; } .vds-call-list{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .vds-call{ display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .85rem .45rem .5rem; border-radius: 999px; background: rgba(232,224,210,.08); border: 1px solid rgba(232,224,210,.16); color: var(--vds-warm) !important; text-decoration: none !important; font-size: .86rem; line-height: 1.2; } .vds-call:hover, .vds-call:focus{ background: rgba(240,168,87,.18); border-color: rgba(240,168,87,.5); color: #fff !important; } .vds-call__icon{ width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--vds-amber); color: #1A0E06; flex: 0 0 auto; } .vds-call__zone{ display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vds-dim); } .vds-call__who{ font-weight: 600; } .vds-call__num{ color: var(--vds-dim); font-variant-numeric: tabular-nums; margin-left: .2rem; } @media (max-width: 991.98px){ .vds-home__grid{ grid-template-columns: 1fr; gap: 1.5rem; } .vds-home .vds-display{ font-size: 3rem; } .vds-home__inner{ padding-top: 7rem; align-items: flex-start; } } @media (max-width: 575.98px){ .vds-home .vds-display{ font-size: 2.35rem; } .vds-home .vds-hero__sub{ font-size: .95rem; } .vds-home .vds-rule{ margin: 1rem 0; } .vds-home__inner{ padding-top: 6.25rem; } .vds-open{ padding: .9rem .75rem .35rem; border-radius: 16px; } .vds-event__name{ font-size: 1.25rem; } .vds-puja-link{ padding: .85rem .8rem; } .vds-home__help-lead{ font-size: .88rem; } .vds-call-list{ display: grid; grid-template-columns: 1fr; width: 100%; } .vds-call{ border-radius: 12px; padding: .55rem .75rem .55rem .55rem; width: 100%; } .vds-home .vds-eyebrow{ margin-bottom: .6rem; } .vds-home__help{ padding-top: 1.1rem; } } /* Short laptop windows: tighten rather than scroll. */ @media (min-width: 992px) and (max-height: 760px){ .vds-home__inner{ padding-top: 6.5rem; } .vds-home .vds-display{ font-size: 3.3rem; } .vds-home .vds-rule{ margin: 1.1rem 0; } .vds-puja-link{ padding: .6rem .85rem; } } /* ---- section below the fold on the homepage ---- */ .vds-section{ padding: 3.5rem 0; } .vds-section__title{ font-family: var(--vds-serif); font-weight: 400; font-size: 2rem; margin-bottom: 1.5rem; text-align: center; } .vds-tile{ display: block; border-radius: 16px; overflow: hidden; background: var(--vds-card); border: 1px solid var(--vds-line); color: var(--vds-ink) !important; text-decoration: none !important; height: 100%; transition: transform .15s ease, box-shadow .15s ease; } .vds-tile:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(18,16,15,.45); } .vds-tile img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .vds-tile__body{ padding: .9rem 1rem 1rem; font-weight: 600; } /* ---- request form ------------------------------------------------------- */ .vds-form-wrap{ max-width: 760px; margin: 0 auto; } .vds-form-card__hint{ font-size: .82rem; color: var(--vds-muted); margin: -.1rem 0 1rem; } .vds-error{ color: #A3281F; font-size: .82rem; margin-top: .35rem; } .vds-error ul{ list-style: none; padding: 0; margin: 0; } /* Segmented choices (Samoohik / Private, request status) */ .vds-choice{ display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; } .vds-choice > div{ margin: 0; } .vds-choice label{ display: flex !important; align-items: flex-start; gap: .65rem; cursor: pointer; margin: 0; padding: .85rem .95rem; border-radius: 14px; border: 1.5px solid var(--vds-line-2); background: #FBFAF6; font-weight: 600; font-size: .95rem !important; letter-spacing: 0 !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; height: 100%; } .vds-choice label:hover{ border-color: rgba(142,15,91,.35); } .vds-choice input[type=radio]{ margin-top: .2rem; accent-color: var(--vds-maroon); width: 1.05rem; height: 1.05rem; flex: 0 0 auto; } .vds-choice label.is-checked{ border-color: var(--vds-maroon); background: rgba(142,15,91,.05); box-shadow: 0 0 0 3px rgba(142,15,91,.10); } .vds-choice__sub{ display: block; font-weight: 400; font-size: .78rem; color: var(--vds-muted); margin-top: .1rem; } /* Revenue Division or Mandal - pick either (config.MANDAL_FIRST_EVENTS) */ .vds-either{ margin-bottom: 1rem; } .vds-either .form-group{ margin-bottom: .35rem; } .vds-either__note{ display: block; font-size: .78rem; color: var(--vds-muted); } /* Venue: the place search (config.PLACE_SEARCH_EVENTS). Mobile first: one column, big tap targets, 16px input so iOS does not zoom. */ .vds-psearch{ margin-bottom: 1rem; } .vds-psearch label{ font-weight: 600; } .vds-psearch__input{ font-size: 16px; min-height: 48px; } .vds-psearch__hint{ display: block; font-size: .8rem; color: var(--vds-muted); margin-top: .4rem; line-height: 1.4; } .vds-psearch__status{ font-size: .8rem; color: var(--vds-muted); margin: .55rem 0 .35rem; min-height: 1em; } .vds-psearch__status.is-empty{ color: var(--vds-ink); } .vds-psearch__status.is-warning{ color: var(--vds-wait); } .vds-psearch__results{ list-style: none; padding: 0; margin: 0; border-radius: 12px; overflow: hidden; } .vds-psearch__results:not(:empty){ border: 1px solid var(--vds-line-2); } .vds-psearch__results li + li{ border-top: 1px solid var(--vds-line); } .vds-psearch__item{ display: block; width: 100%; text-align: left; border: 0; background: var(--vds-card); padding: .7rem .85rem; min-height: 52px; color: inherit; } .vds-psearch__item:hover, .vds-psearch__item:focus{ background: var(--vds-soft); outline: none; } .vds-psearch__name{ display: block; font-weight: 600; font-size: .98rem; } .vds-psearch__meta{ display: block; font-size: .8rem; color: var(--vds-muted); margin-top: .1rem; } .vds-psearch__chosen{ display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .9rem; border: 1.5px solid var(--vds-maroon); border-radius: 12px; background: rgba(142,15,91,.04); } .vds-psearch__chosen[hidden]{ display: none; } .vds-psearch__tick{ color: var(--vds-ok); font-weight: 700; font-size: 1.1rem; line-height: 1.4; } .vds-psearch__chosen-text{ flex: 1 1 auto; min-width: 0; } .vds-psearch__chosen-text strong{ font-size: 1.02rem; margin-right: .25rem; } /* A laptop has room for the list in a box of its own; a phone scrolls the page instead. */ @media (min-width: 768px){ .vds-psearch__results{ max-height: 26rem; overflow-y: auto; } } /* Searchable picker */ .vds-picker__native, .vds-form-card select.vds-picker__native[disabled]{ position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none; overflow: hidden; } .vds-form-card button.vds-picker__trigger:disabled{ font-weight: 400; color: #8A8378; background-color: var(--vds-soft); } .form-group{ position: relative; } .vds-picker__trigger{ text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e0f5b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right .8rem center !important; background-size: 14px 10px !important; padding-right: 2.2rem !important; color: var(--vds-ink); } .vds-picker__trigger.is-placeholder{ color: #8A8378; } .vds-picker__trigger:disabled{ cursor: not-allowed; opacity: .6; } body.vds-sheet-open{ overflow: hidden; } .vds-sheet{ position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; } .vds-sheet__backdrop{ position: absolute; inset: 0; background: rgba(18,16,15,.45); opacity: 0; transition: opacity .18s ease; } .vds-sheet__panel{ position: relative; width: 100%; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: var(--vds-card); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 40px -20px rgba(0,0,0,.4); transform: translateY(24px); opacity: 0; transition: transform .18s ease, opacity .18s ease; padding-bottom: env(safe-area-inset-bottom); } .vds-sheet.is-open .vds-sheet__backdrop{ opacity: 1; } .vds-sheet.is-open .vds-sheet__panel{ transform: none; opacity: 1; } .vds-sheet__head{ display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem .4rem; } .vds-sheet__title{ font-family: var(--vds-serif); font-size: 1.35rem; } .vds-sheet__close{ border: 0; background: var(--vds-soft); width: 36px; height: 36px; border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--vds-ink); } .vds-sheet__search{ padding: .4rem 1.1rem .7rem; border-bottom: 1px solid var(--vds-line); } .vds-sheet__search .form-control{ height: 48px; border-radius: 12px; font-size: 16px; background: #FBFAF6; border: 1px solid var(--vds-line-2); } .vds-sheet__search .form-control:focus{ border-color: var(--vds-gold); box-shadow: 0 0 0 .2rem rgba(201,162,39,.22); } .vds-sheet__list{ list-style: none; margin: 0; padding: .35rem .5rem 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 30vh; } .vds-sheet__option{ display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem .8rem; border-radius: 10px; cursor: pointer; font-size: 1rem; } .vds-sheet__option:hover, .vds-sheet__option:focus{ background: var(--vds-soft); outline: 0; } .vds-sheet__option.is-selected{ background: rgba(142,15,91,.07); color: var(--vds-maroon); font-weight: 600; } .vds-sheet__option.is-pinned{ border-top: 1px dashed var(--vds-line-2); margin-top: .35rem; border-radius: 0 0 10px 10px; color: var(--vds-maroon); font-weight: 600; } .vds-sheet__hint{ font-size: .72rem; color: var(--vds-muted); background: var(--vds-soft); border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; font-weight: 500; } .vds-sheet__empty{ padding: 1.25rem; text-align: center; color: var(--vds-muted); } @media (min-width: 576px){ .vds-sheet{ align-items: center; } .vds-sheet__panel{ max-width: 480px; max-height: 76vh; border-radius: 20px; } } /* Derived values: category and coordinator */ .vds-derived__waiting{ color: var(--vds-muted); font-size: .9rem; padding: .9rem 1rem; border: 1px dashed var(--vds-line-2); border-radius: 14px; background: #FBFAF6; } .vds-form-card select[disabled].form-control, .vds-form-card .form-control:disabled{ background-color: var(--vds-soft); color: var(--vds-ink); opacity: 1; font-weight: 600; cursor: not-allowed; } .vds-category-how{ font-size: .78rem; color: var(--vds-muted); margin-top: .35rem; } .vds-contacts{ display: grid; gap: .5rem; } .vds-contact{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; border-radius: 14px; border: 1px solid var(--vds-line); background: #FBFAF6; } .vds-contact__name{ font-weight: 600; } .vds-contact__role{ display: block; font-size: .74rem; color: var(--vds-muted); font-weight: 400; } .vds-contact__call{ display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .5rem .85rem; border-radius: 999px; font-weight: 600; font-size: .88rem; background: var(--vds-maroon); color: #fff !important; text-decoration: none !important; font-variant-numeric: tabular-nums; } .vds-contact__call:hover{ background: #6A0B44; } /* ---- thank-you ------------------------------------------------------------ */ .vds-done{ max-width: 680px; margin: -3.5rem auto 3rem; position: relative; z-index: 2; } .vds-done__card{ background: var(--vds-card); border-radius: 20px; border: 1px solid var(--vds-line); box-shadow: 0 30px 60px -36px rgba(18,16,15,.45); padding: 1.6rem; } .vds-done__ref{ font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vds-muted); } .vds-done__ref strong{ color: var(--vds-ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; } .vds-summary{ display: grid; grid-template-columns: 7.5rem 1fr; gap: .45rem 1rem; margin: 1.2rem 0; font-size: .95rem; } .vds-summary dt{ color: var(--vds-muted); font-weight: 500; } .vds-summary dd{ margin: 0; font-weight: 600; } .vds-disclaimer{ border-left: 3px solid var(--vds-gold); background: rgba(201,162,39,.08); border-radius: 0 14px 14px 0; padding: 1rem 1.1rem; margin: 1.2rem 0; font-size: .95rem; line-height: 1.6; } @media (max-width: 575.98px){ .vds-done{ margin-top: -2.5rem; } .vds-done__card{ padding: 1.2rem; border-radius: 16px; } .vds-summary{ grid-template-columns: 1fr; gap: .1rem; } .vds-summary dd{ margin-bottom: .55rem; } } /* ---- coordinator screens ------------------------------------------------- */ .vds-app{ padding-bottom: 3rem; } .vds-app .vds-page-header{ display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; } .vds-app .vds-page-header .vds-rule{ margin: .8rem 0 0; } .vds-app h1{ font-size: 2rem; } .vds-toolbar{ display: flex; flex-wrap: wrap; gap: .5rem; } .btn-quiet{ background: var(--vds-card); border: 1px solid var(--vds-line-2); color: var(--vds-ink); border-radius: 10px; font-weight: 600; font-size: .86rem; padding: .5rem .85rem; } .btn-quiet:hover, .btn-quiet:focus{ background: var(--vds-soft); color: var(--vds-ink); } .btn-ink{ background: var(--vds-ink); color: #fff; border-radius: 10px; font-weight: 600; font-size: .86rem; padding: .5rem .95rem; border: 0; } .btn-ink:hover, .btn-ink:focus{ background: #2A231E; color: #fff; } .vds-panel{ background: var(--vds-card); border: 1px solid var(--vds-line); border-radius: 16px; } .vds-panel__body{ padding: 1rem 1.1rem; } .vds-flash{ border-radius: 12px; padding: .75rem 1rem; margin-bottom: .75rem; font-size: .92rem; border: 1px solid var(--vds-line); background: var(--vds-card); } .vds-flash--success{ border-color: rgba(47,107,63,.3); background: var(--vds-ok-bg); color: var(--vds-ok); } .vds-flash--error{ border-color: rgba(163,40,31,.3); background: #F8E6E2; color: #8A2A1F; } .vds-flash--warning{ border-color: rgba(138,90,11,.3); background: var(--vds-wait-bg); color: var(--vds-wait); } .vds-stats{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; } .vds-stat{ background: var(--vds-card); border: 1px solid var(--vds-line); border-radius: 14px; padding: .7rem .85rem; color: var(--vds-ink) !important; text-decoration: none !important; display: block; } .vds-stat:hover{ border-color: var(--vds-line-2); background: #FFFDF9; } .vds-stat.is-active{ border-color: var(--vds-ink); box-shadow: inset 0 0 0 1px var(--vds-ink); } .vds-stat__label{ font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vds-muted); font-weight: 600; } .vds-stat__value{ font-family: var(--vds-serif); font-size: 1.9rem; line-height: 1.1; } .vds-stat--total{ background: var(--vds-ink); border-color: var(--vds-ink); color: #fff !important; } .vds-stat--total .vds-stat__label{ color: var(--vds-dim); } .vds-stat--total:hover{ background: #2A231E; } @media (max-width: 767.98px){ .vds-stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .vds-stat__value{ font-size: 1.5rem; } } .vds-status-tabs{ display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; } .vds-status-tab{ padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--vds-line-2); background: var(--vds-card); color: var(--vds-ink) !important; text-decoration: none !important; font-size: .84rem; font-weight: 600; } .vds-status-tab.is-active{ background: var(--vds-ink); border-color: var(--vds-ink); color: #fff !important; } .vds-status-tab__n{ opacity: .6; margin-left: .25rem; font-variant-numeric: tabular-nums; } .vds-badge{ display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; border-radius: 999px; padding: .2rem .6rem; white-space: nowrap; } /* The request pipeline (FlexibleRegistration.STATUS_CHOICES), quietest first. */ .vds-badge--requested{ color: var(--vds-wait); background: var(--vds-wait-bg); } .vds-badge--verified{ color: #2F4F6B; background: #E5ECF2; } .vds-badge--allocated{ color: var(--vds-maroon); background: rgba(142,15,91,.08); } .vds-badge--link_generated{ color: #1F5C58; background: #E0EFEC; } .vds-badge--registering{ color: var(--vds-ok); background: var(--vds-ok-bg); } /* Private and registered: done, so solid rather than tinted. */ .vds-badge--private_registered{ color: #fff; background: var(--vds-ok); } .vds-badge--on_hold{ color: var(--vds-hold); background: var(--vds-hold-bg); } .vds-badge--flag{ color: #8A2A1F; background: #F8E6E2; } .vds-chip{ display: inline-block; font-size: .72rem; border-radius: 6px; padding: .1rem .45rem; background: var(--vds-soft); color: var(--vds-muted); font-weight: 600; } .vds-filters summary{ list-style: none; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .vds-filters summary::-webkit-details-marker{ display: none; } .vds-filters summary::after{ content: "+"; font-size: 1.2rem; color: var(--vds-muted); } .vds-filters[open] summary::after{ content: "\2013"; } .vds-filters label{ font-size: .72rem; font-weight: 700; color: var(--vds-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25rem; } .vds-filters .form-control{ border-radius: 10px; border: 1px solid var(--vds-line-2); background-color: #FBFAF6; color: var(--vds-ink); font-size: .9rem; height: 42px; } .vds-filter-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; } @media (max-width: 991.98px){ .vds-filter-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px){ .vds-filter-grid{ grid-template-columns: 1fr; } } /* The Place search above the filter grid (_place_filter_search.html). 16px so iOS does not zoom. */ .vds-psearch--filter{ max-width: 40rem; margin: .9rem 0 0; } .vds-filters .vds-psearch--filter .vds-psearch__input{ font-size: 16px; height: auto; min-height: 44px; } .vds-psearch--filter .vds-psearch__status:empty{ margin: 0; min-height: 0; } /* The requests table. On a phone each row becomes a card - one markup, so nothing that reads the rows (the WhatsApp builder) ever sees a row twice. */ .vds-table{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; background: var(--vds-card); } .vds-table th{ position: sticky; top: 0; z-index: 2; background: #F6F2EB; color: var(--vds-muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .65rem .75rem; border-bottom: 1px solid var(--vds-line-2); white-space: nowrap; text-align: left; } .vds-table td{ padding: .75rem; border-bottom: 1px solid var(--vds-line); vertical-align: top; } .vds-table tbody tr:hover td{ background: #FFFDF8; } .vds-table .vds-cell-main{ font-weight: 600; } .vds-table .vds-cell-sub{ display: block; color: var(--vds-muted); font-size: .8rem; margin-top: .1rem; } .vds-table .vds-cell-sub a{ color: var(--vds-muted); } .vds-table a.vds-tel{ font-variant-numeric: tabular-nums; white-space: nowrap; } .vds-table-wrap{ border: 1px solid var(--vds-line); border-radius: 16px; overflow: auto; max-height: 75vh; background: var(--vds-card); } @media (max-width: 991.98px){ .vds-table-wrap{ border: 0; border-radius: 0; overflow: visible; max-height: none; background: transparent; } .vds-table, .vds-table tbody, .vds-table tr, .vds-table td{ display: block; width: 100%; } .vds-table{ background: transparent; } .vds-table thead{ display: none; } .vds-table tr{ background: var(--vds-card); border: 1px solid var(--vds-line); border-radius: 16px; margin-bottom: .8rem; padding: .35rem 0; } .vds-table td{ border: 0; padding: .45rem 1rem; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; } .vds-table td::before{ content: attr(data-label); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vds-muted); font-weight: 700; padding-top: .15rem; } .vds-table td.vds-cell-head{ grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--vds-line); padding-bottom: .65rem; margin-bottom: .2rem; } .vds-table td.vds-cell-head::before{ display: none; } .vds-table td.vds-cell-actions{ grid-template-columns: 1fr; } .vds-table td.vds-cell-actions::before{ display: none; } .vds-table td.vds-cell-empty{ display: block; text-align: center; } .vds-table td.vds-cell-empty::before{ display: none; } .vds-table tbody tr:hover td{ background: transparent; } } /* ---- coordinator edit ---------------------------------------------------- */ .vds-admin-card{ border-color: rgba(18,16,15,.18); } .vds-admin-card .vds-form-card__head{ background: #F6F2EB; } .vds-admin-card .vds-form-card__step{ background: var(--vds-ink); } .vds-meta{ display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--vds-muted); font-size: .85rem; margin-bottom: 1rem; } .vds-meta strong{ color: var(--vds-ink); font-weight: 600; } .vds-sticky-save{ position: sticky; bottom: 0; z-index: 5; background: linear-gradient(180deg, rgba(250,247,242,0), var(--vds-paper) 35%); padding: 1.2rem 0 1rem; display: flex; gap: .6rem; } .vds-sticky-save .btn{ flex: 1 1 auto; } @media (min-width: 576px){ .vds-sticky-save .btn{ flex: 0 0 auto; min-width: 12rem; } } /* ---- coordinator directory ----------------------------------------------- */ .vds-dir-zone__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 .6rem; } .vds-dir-zone__head h2{ font-family: var(--vds-serif); font-weight: 400; font-size: 1.7rem; margin: 0; } .vds-dir-district{ background: var(--vds-card); border: 1px solid var(--vds-line); border-radius: 16px; margin-bottom: .6rem; overflow: hidden; } .vds-dir-district > summary{ list-style: none; cursor: pointer; padding: .9rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; } .vds-dir-district > summary::-webkit-details-marker{ display: none; } .vds-dir-district > summary .vds-dir-count{ margin-left: auto; } .vds-dir-district > summary::after{ content: "+"; color: var(--vds-muted); font-size: 1.2rem; } .vds-dir-district[open] > summary::after{ content: "\2013"; } .vds-dir-division{ border-top: 1px solid var(--vds-line); padding: .8rem 1.1rem; } .vds-dir-division__name{ font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vds-muted); font-weight: 700; margin-bottom: .35rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .vds-dir-person{ display: flex; justify-content: space-between; align-items: center; gap: .5rem .75rem; padding: .45rem 0; flex-wrap: wrap; } .vds-dir-person + .vds-dir-person{ border-top: 1px dashed var(--vds-line); } .vds-dir-person.is-inactive{ opacity: .5; } .vds-dir-person__name{ font-weight: 600; } .vds-dir-person__tel{ color: var(--vds-muted); font-variant-numeric: tabular-nums; margin-left: .4rem; white-space: nowrap; } .vds-dir-edit{ display: none; background: #FBFAF6; border: 1px solid var(--vds-line); border-radius: 12px; padding: .8rem; margin: .3rem 0 .6rem; width: 100%; } .vds-dir-edit.is-open{ display: block; } .vds-dir-edit .form-control{ border-radius: 10px; } .vds-dir-edit label{ font-size: .72rem; font-weight: 700; color: var(--vds-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; } .vds-dir-gap{ color: #8A2A1F; font-size: .85rem; } .vds-dir-search{ position: sticky; top: 0; z-index: 4; background: var(--vds-paper); padding: .6rem 0; } .vds-dir-search .form-control{ height: 46px; border-radius: 12px; font-size: 16px; } .btn-link-quiet{ background: none; border: 0; padding: .2rem .4rem; color: var(--vds-maroon); font-weight: 600; font-size: .84rem; } .btn-link-quiet:hover{ text-decoration: underline; } /* ---- schedule ----------------------------------------------------------- */ .vds-day{ margin-bottom: 1.25rem; } .vds-day__date{ font-family: var(--vds-serif); font-size: 1.45rem; margin: 0 0 .5rem; font-weight: 400; } .vds-day__date small{ font-family: var(--vds-sans); font-size: .74rem; color: var(--vds-muted); letter-spacing: .1em; text-transform: uppercase; margin-left: .4rem; } .vds-slot{ display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; background: var(--vds-card); border: 1px solid var(--vds-line); border-radius: 14px; padding: .85rem 1rem; margin-bottom: .5rem; } .vds-slot__time{ font-weight: 700; font-variant-numeric: tabular-nums; } .vds-slot__puja{ font-weight: 600; } .vds-slot__where{ display: block; color: var(--vds-muted); font-size: .85rem; } @media (max-width: 575.98px){ .vds-slot{ grid-template-columns: 1fr; gap: .35rem; } } /* Phone fixes for the coordinator screens */ .vds-table td.vds-cell-head{ align-items: start; } .vds-badge{ align-self: start; } .vds-form-card select.form-control:disabled{ background-image: none !important; } @media (max-width: 575.98px){ .vds-app .vds-page-header{ display: block; } .vds-toolbar{ flex-wrap: nowrap; overflow-x: auto; margin: .75rem -15px 0; padding: 0 15px .25rem; scrollbar-width: none; } .vds-toolbar::-webkit-scrollbar{ display: none; } .vds-toolbar .btn{ flex: 0 0 auto; white-space: nowrap; } .vds-stats{ gap: .45rem; } .vds-stat{ padding: .55rem .7rem; } .vds-sheet__panel{ min-height: 55vh; } } /* The page scrolls, not a box inside it - with ~9 columns the table fits the container, and a nested scroller showed only two rows on a 768px laptop. */ @media (min-width: 992px){ .vds-table-wrap{ overflow: visible; max-height: none; } .vds-table th:first-child{ border-top-left-radius: 16px; } .vds-table th:last-child{ border-top-right-radius: 16px; } } .vds-sticky-save .btn{ display: inline-flex; align-items: center; justify-content: center; } /* ---- round 2 (2026-10-03) ------------------------------------------------ */ /* Hero eyebrow (event dates) on a phone: the photo's aarti flame sits right behind it, and amber text on a lit flame disappears. It gets its own dark pill on small screens. */ @media (max-width: 767.98px){ .vds-hero .vds-eyebrow, .vds-home .vds-eyebrow{ display: inline-block; background: rgba(12,10,9,.72); color: #FFC978; padding: .38rem .75rem; border-radius: 999px; letter-spacing: .14em; border: 1px solid rgba(201,162,39,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .vds-hero .vds-display, .vds-home .vds-display{ text-shadow: 0 2px 18px rgba(0,0,0,.85); } .vds-hero .vds-hero__sub{ text-shadow: 0 1px 8px rgba(0,0,0,.9); } } /* Laptop homepage: everything stacks in the left column so the right half of the photograph - Gurudev's face and the aarti - stays clear. On a phone the order is unchanged (headline, then the events). */ @media (min-width: 992px){ .vds-home__grid{ grid-template-columns: minmax(0, 31rem); gap: 1.4rem; } .vds-home .vds-hero__media{ background-position: 70% 28%; } .vds-home__scrim{ background: radial-gradient(38% 46% at 66% 34%, rgba(255,190,100,.10), transparent 70%), linear-gradient(90deg, rgba(12,10,9,.92) 0%, rgba(12,10,9,.80) 34%, rgba(12,10,9,.25) 52%, rgba(12,10,9,.05) 75%, rgba(12,10,9,.12) 100%), linear-gradient(180deg, rgba(12,10,9,.55) 0%, rgba(12,10,9,0) 30%, rgba(12,10,9,0) 70%, rgba(12,10,9,.75) 100%); } .vds-home__inner{ padding-top: 7rem; padding-bottom: 1.2rem; } .vds-home .vds-display{ font-size: 3.4rem; } .vds-home .vds-rule{ margin: 1rem 0; } .vds-home .vds-hero__sub{ font-size: .98rem; max-width: 40ch; } .vds-open{ padding: .9rem .9rem .35rem; } .vds-puja-link{ padding: .62rem .85rem; margin-bottom: .4rem; } .vds-event__name{ font-size: 1.3rem; } } /* Short laptop screens (768px tall is common): the intro sentence goes - the event panel says the same thing - so the events and the call strip stay on one screen. */ @media (min-width: 992px) and (max-height: 820px){ .vds-home__inner{ padding-top: 7.2rem; padding-bottom: .8rem; } .vds-home .vds-display{ font-size: 2.6rem; } .vds-home .vds-eyebrow{ margin-bottom: .45rem; } .vds-home .vds-rule{ margin: .7rem 0 0; } .vds-home .vds-hero__sub{ display: none; } .vds-home__grid{ gap: 1.1rem; } .vds-puja-link{ padding: .5rem .8rem; } .vds-event__head{ margin-bottom: .4rem; } .vds-event + .vds-event{ padding-top: .7rem; } .vds-home__help{ padding: .65rem 0 .7rem; } } /* Coordinator cards: the whole card is the call link, with a "Click to call" tag. */ a.vds-contact{ color: var(--vds-ink) !important; text-decoration: none !important; transition: border-color .15s ease, background-color .15s ease; } a.vds-contact:hover, a.vds-contact:focus{ border-color: var(--vds-maroon); background: rgba(142,15,91,.04); } .vds-contact__tag{ display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vds-ok); background: var(--vds-ok-bg); border-radius: 999px; padding: .12rem .55rem; margin-bottom: .3rem; } .vds-contact__name{ display: block; } /* Sankalpa levels for a Samoohik puja */ .vds-sankalpa{ border: 1px solid rgba(201,162,39,.35); background: rgba(201,162,39,.07); border-radius: 14px; padding: .2rem .95rem; } .vds-sankalpa > summary{ cursor: pointer; font-weight: 600; padding: .65rem 0; color: var(--vds-maroon); list-style: none; display: flex; justify-content: space-between; align-items: center; } .vds-sankalpa > summary::-webkit-details-marker{ display: none; } .vds-sankalpa > summary::after{ content: "+"; font-size: 1.2rem; color: var(--vds-muted); } .vds-sankalpa[open] > summary::after{ content: "\2013"; } .vds-sankalpa__lead{ font-size: .85rem; color: var(--vds-muted); margin: 0 0 .4rem; } .vds-sankalpa__list{ list-style: none; padding: 0; margin: 0 0 .7rem; } .vds-sankalpa__list li{ display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px dashed rgba(18,16,15,.14); font-size: .95rem; } .vds-sankalpa__list strong{ font-variant-numeric: tabular-nums; } /* "Share the location from the venue entrance" */ .vds-entrance{ display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; border-left: 3px solid var(--vds-maroon); background: rgba(142,15,91,.06); border-radius: 0 12px 12px 0; padding: .8rem .9rem; font-size: .92rem; line-height: 1.5; } .vds-entrance__icon{ font-size: 1.3rem; line-height: 1; } /* Public form category read-out (wraps, unlike a select) */ .vds-category-readout{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--vds-soft); border: 1px solid var(--vds-line-2); } .vds-category-readout__name{ font-weight: 700; font-size: 1.05rem; } .vds-category-readout__price{ font-weight: 600; color: var(--vds-maroon); font-variant-numeric: tabular-nums; } .vds-category-readout.is-empty{ color: var(--vds-muted); } .vds-category-readout.is-pending .vds-category-readout__name{ color: var(--vds-maroon); } .vds-category-readout__note{ flex-basis: 100%; font-size: .85rem; line-height: 1.5; color: var(--vds-ink); } .vds-category-readout__note[hidden]{ display: none; } /* Special-day note on the date step, with an inline button that switches the preference */ .vds-note--special{ border-color: rgba(142,15,91,.25); background: rgba(142,15,91,.05); line-height: 1.55; } .vds-linkish{ border: 0; background: none; padding: 0; color: var(--vds-maroon); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } select.form-control option:disabled{ color: #A8A196; } /* ---- request pipeline, slimmer dashboard (2026-10-08) ------------------- */ .vds-status-stack{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: .3rem; } @media (max-width: 991.98px){ .vds-status-stack{ align-items: flex-end; } } /* "More" in the dashboard header: a menu that drops below the button. */ .vds-more{ position: relative; } .vds-more > summary{ list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; } .vds-more > summary::-webkit-details-marker{ display: none; } .vds-more > summary::after{ content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } .vds-more[open] > summary::after{ transform: translateY(1px) rotate(-135deg); } .vds-more[open] > summary{ background: var(--vds-soft); } .vds-more__menu{ position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 15rem; max-width: calc(100vw - 32px); background: var(--vds-card); border: 1px solid var(--vds-line-2); border-radius: 14px; box-shadow: 0 14px 34px rgba(18,16,15,.14); padding: .35rem; } .vds-more__menu a{ display: block; padding: .7rem .85rem; border-radius: 10px; color: var(--vds-ink); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .vds-more__menu a:hover, .vds-more__menu a:focus{ background: var(--vds-soft); color: var(--vds-ink); text-decoration: none; } .vds-more__menu a:last-child{ color: var(--vds-muted); border-top: 1px solid var(--vds-line); border-radius: 0 0 10px 10px; margin-top: .25rem; } @media (max-width: 575.98px){ /* A grid, not a sideways-scrolling row (that would clip the menu): the first button across the top, the rest in halves below - More last, so its menu opens at the right edge. */ .vds-toolbar--fit{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; overflow: visible; margin: .75rem 0 0; padding: 0; } .vds-toolbar--fit > :first-child{ grid-column: 1 / -1; } .vds-toolbar--fit > .btn, .vds-toolbar--fit .vds-more > summary{ width: 100%; justify-content: center; } .vds-status-tabs{ gap: .3rem; } .vds-status-tab{ padding: .38rem .7rem; font-size: .8rem; } } .vds-admin-links{ display: flex; flex-wrap: wrap; gap: .5rem; } /* "No registrations yet": Private and Samoohik homas with a link and nobody registered. */ .vds-nudge{ display: flex; align-items: center; justify-content: space-between; gap: .7rem 1rem; flex-wrap: wrap; background: var(--vds-wait-bg); border: 1px solid rgba(138,90,11,.22); border-radius: 14px; padding: .7rem .8rem .7rem 1rem; margin-bottom: .9rem; } .vds-nudge__text strong{ display: block; color: var(--vds-wait); font-size: .92rem; } .vds-nudge__text span{ display: block; color: var(--vds-wait); opacity: .85; font-size: .78rem; } .vds-nudge__pills{ display: flex; gap: .45rem; } .vds-nudge__pill{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: .4rem .9rem; border-radius: 999px; background: var(--vds-card); border: 1px solid rgba(138,90,11,.3); color: var(--vds-wait) !important; font-weight: 700; font-size: .84rem; text-decoration: none !important; } .vds-nudge__pill:hover, .vds-nudge__pill:focus{ background: #FFFDF6; border-color: var(--vds-wait); } .vds-nudge__pill.is-active{ background: var(--vds-wait); border-color: var(--vds-wait); color: #fff !important; } .vds-nudge__n{ font-family: var(--vds-serif); font-size: 1.2rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; } @media (max-width: 575.98px){ .vds-nudge__pills{ width: 100%; } .vds-nudge__pill{ flex: 1 1 0; } } /* Edit screen: where the request has got to. Dots joined by a line; done in ink, the current one in maroon. */ .vds-steps{ list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: .1rem 0 1.2rem; padding: 0; } .vds-steps__step{ position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; font-size: .76rem; font-weight: 600; line-height: 1.2; color: var(--vds-muted); } .vds-steps__step::before{ content: ""; position: absolute; top: .42rem; left: -50%; right: 50%; height: 2px; background: var(--vds-line-2); } .vds-steps__step:first-child::before{ display: none; } .vds-steps__dot{ position: relative; z-index: 1; width: .95rem; height: .95rem; border-radius: 50%; background: var(--vds-card); border: 2px solid var(--vds-line-2); } .vds-steps__step.is-done, .vds-steps__step.is-current{ color: var(--vds-ink); } .vds-steps__step.is-done::before, .vds-steps__step.is-current::before{ background: var(--vds-ink); } .vds-steps__step.is-done .vds-steps__dot{ background: var(--vds-ink); border-color: var(--vds-ink); } .vds-steps__step.is-current{ font-weight: 700; } .vds-steps__step.is-current .vds-steps__dot{ background: var(--vds-maroon); border-color: var(--vds-maroon); box-shadow: 0 0 0 4px rgba(142,15,91,.14); } @media (max-width: 575.98px){ .vds-steps__step{ font-size: .68rem; hyphens: auto; } } .vds-tick{ background: #FBFAF6; border: 1px solid var(--vds-line); border-radius: 12px; padding: .75rem .9rem; } .vds-tick .form-check-label{ font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--vds-ink); } /* Teams (admins): the count, then one row per team - number, name box, requests. On a phone the name box takes its own line under the number. */ .vds-teams__label{ display: block; font-size: .72rem; font-weight: 700; color: var(--vds-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .35rem; } .vds-teams__input{ max-width: 7rem; height: 46px; font-size: 1.1rem; border-radius: 10px; font-variant-numeric: tabular-nums; } .vds-teams__names, .vds-teams__save{ border-top: 1px solid var(--vds-line); } .vds-teams__save{ display: flex; justify-content: flex-end; } .vds-teams__save .btn{ min-width: 8rem; height: 44px; } .vds-teams__title{ font-family: var(--vds-serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 .25rem; } .vds-teams__list{ list-style: none; margin: 0; padding: 0; } .vds-teams__item{ display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: .45rem .75rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--vds-line); } .vds-teams__item:first-child{ border-top: 0; } .vds-teams__name{ font-weight: 600; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--vds-ink); } .vds-teams__item.is-retired .vds-teams__name{ color: var(--vds-muted); } .vds-teams__field{ height: 42px; border-radius: 10px; } .vds-teams__count{ font-variant-numeric: tabular-nums; font-size: .86rem; white-space: nowrap; } @media (max-width: 575.98px){ .vds-teams__item{ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "field field"; } .vds-teams__name{ grid-area: name; flex-direction: row; align-items: center; } .vds-teams__count{ grid-area: count; } .vds-teams__field{ grid-area: field; } .vds-teams__save .btn{ width: 100%; } } /* A Samoohik homa's registrations against its minimum (_collection_level.html). */ .vds-goal{ display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; } .vds-goal__dot{ width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .vds-goal--none{ color: #8A2A1F; background: #F8E6E2; } .vds-goal--below{ color: var(--vds-wait); background: var(--vds-wait-bg); } .vds-goal--reached{ color: var(--vds-ok); background: var(--vds-ok-bg); } .vds-goal__bar{ display: inline-block; width: 2.6rem; height: .3rem; border-radius: 999px; background: rgba(138,90,11,.2); overflow: hidden; } .vds-goal__bar > span{ display: block; height: 100%; background: currentColor; border-radius: inherit; } /* A named team on a dashboard row: one line, cut short with its full name on hover. */ .vds-status-stack .vds-chip{ max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Public schedule's District / Place filters: side by side, even on a phone. */ .vds-sched-filter{ margin-bottom: 1rem; } .vds-sched-filter__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; } .vds-sched-filter__grid > div{ position: relative; } /* holds the picker's hidden