/** * Civic Premium 1.26.0 responsive visual system. * Homepage rules are scoped to .rbsv-civic-premium. Header/footer use a * parent :has() guard because they are wrapper siblings. The dock, sheets, * assistant and accessibility controls are narrow global mobile exceptions. */ .rbsv-civic-premium { /* Color tokens from DESIGN.md. */ --rbsv-civic-ink: #071E3D; --rbsv-civic-navy: #0B315D; --rbsv-civic-blue: #1269D3; --rbsv-civic-blue-dark: #0B4E9B; --rbsv-civic-gold: #E7B94E; --rbsv-civic-paper: #FFFFFF; --rbsv-civic-mist: #F3F7FC; --rbsv-civic-slate: #5F7188; --rbsv-civic-border: #DCE6F2; --rbsv-civic-success: #16865A; --rbsv-civic-warning: #B66A08; --rbsv-civic-danger: #C53D44; --rbsv-civic-focus: #FFCA52; /* Bilingual typography tokens from DESIGN.md. */ --rbsv-civic-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rbsv-civic-font-arabic: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif; --rbsv-civic-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace; /* Radius and layout tokens from DESIGN.md. */ --rbsv-civic-radius: 0.875rem; --rbsv-civic-radius-sm: 0.625rem; --rbsv-civic-radius-md: 0.875rem; --rbsv-civic-radius-lg: 1.25rem; --rbsv-civic-section-gap: clamp(4rem, 7vw, 7rem); --rbsv-civic-page-max: 74rem; --rbsv-civic-community-large-min: 17rem; --rbsv-civic-community-large-padding: 2rem; --rbsv-civic-community-utility-min: 8.25rem; --rbsv-civic-community-utility-padding: 1rem; --rbsv-civic-map-min: 22rem; --rbsv-civic-action-min: 9.75rem; --rbsv-civic-action-padding: 1.2rem; --rbsv-civic-action-label-size: .96rem; color: var(--rbsv-civic-ink); background: var(--rbsv-civic-paper); font-family: var(--rbsv-civic-font-sans); line-height: 1.65; overflow: clip; } .rbsv-civic-premium, .rbsv-civic-premium *, .rbsv-civic-premium *::before, .rbsv-civic-premium *::after { box-sizing: border-box; } .rbsv-civic-premium::selection, .rbsv-civic-premium *::selection { color: var(--rbsv-civic-ink); background: var(--rbsv-civic-focus); } .rbsv-app.is-arabic .rbsv-civic-premium, .rbsv-app.is-arabic .rbsv-civic-premium button, .rbsv-app.is-arabic .rbsv-civic-premium input { font-family: var(--rbsv-civic-font-arabic); } .rbsv-civic-premium :where(h1, h2, h3, p) { overflow-wrap: anywhere; } .rbsv-civic-premium :where(time, sup, .rbsv-civic-weather, .rbsv-civic-status, .rbsv-service-pulse) { font-variant-numeric: tabular-nums; } .rbsv-civic-premium .rbsv-shell { width: min(calc(100% - 2rem), var(--rbsv-civic-page-max)); margin-inline: auto; } .rbsv-civic-premium :where(a, button, input) { -webkit-tap-highlight-color: transparent; } .rbsv-civic-premium :where(a, button) { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } .rbsv-civic-premium :where(a, button):active { opacity: .82; } .rbsv-civic-premium :where(a, button, input):disabled, .rbsv-civic-premium :where(a, button)[aria-disabled="true"] { cursor: not-allowed; opacity: .52; } .rbsv-civic-premium :focus-visible, .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) :focus-visible, .rbsv-mobile-dock :focus-visible, .rbsv-civic-sheet :focus-visible, .rbsv-accessibility :focus-visible, .rbsv-assistant :focus-visible { /* Collision: premium-1-22.css forces a low-contrast blue focus outline. */ outline: 3px solid #FFCA52 !important; /* Collision: premium-1-22.css forces its focus-ring offset. */ outline-offset: 3px !important; } /* Header/announcement are scoped by presence of the Civic Premium homepage. */ .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .rbsv-app.is-arabic:has(> .rbsv-main .rbsv-civic-premium) { font-family: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-alertbar { /* Collision: premium-1-22.css forces the former announcement background. */ background: #0B315D !important; color: #FFFFFF; font-size: .75rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-alertbar .rbsv-shell { display: flex; align-items: center; justify-content: space-between; min-height: 2rem; gap: 1rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-alertbar :where(a, span) { color: inherit; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-live { display: inline-block; width: .45rem; height: .45rem; margin-inline-end: .5rem; border-radius: 50%; background: #E7B94E; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-header { position: sticky; top: 0; z-index: 900; border-bottom: 1px solid #DCE6F2; background: #FFFFFF; box-shadow: 0 5px 18px rgb(7 30 61 / .06); } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-header-inner { min-height: 4.75rem; gap: 1.25rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-brand { min-width: max-content; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-brand strong { /* Collision: premium-1-22.css forces its former blue brand value. */ color: #071E3D !important; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-brand small { /* Collision: premium-1-22.css forces its legacy muted value. */ color: #5F7188 !important; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-language-switcher { display: flex; align-items: center; gap: .2rem; padding: .2rem; border: 1px solid #DCE6F2; border-radius: .625rem; background: #F3F7FC; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-language-switcher a { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: .5rem; border-radius: .45rem; color: #0B315D; font-size: .75rem; font-weight: 750; text-decoration: none; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-language-switcher a.is-current { background: #FFFFFF; box-shadow: 0 1px 5px rgb(7 30 61 / .08); } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-nav { gap: .15rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-nav > a { min-height: 2.75rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-nav > a:not(.rbsv-nav-button) { /* Collision: premium-1-22.css forces its legacy ink value. */ color: #071E3D !important; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-nav-button { /* Collision: premium-1-22.css forces the former blue. */ background: #1269D3 !important; /* Collision: premium-1-22.css forces its foreground. */ color: #FFFFFF !important; } /* Compact editorial hero. */ .rbsv-civic-premium .rbsv-civic-hero { position: relative; /* Collision: premium-1-22.css forces a 620px minimum hero. */ min-height: 31.5rem !important; /* Collision: premium-1-22.css forces a 760px maximum hero. */ max-height: 36rem !important; background: var(--rbsv-civic-navy); } .rbsv-civic-premium .rbsv-home-hero-slides, .rbsv-civic-premium .rbsv-civic-hero .rbsv-slide { position: absolute; inset: 0; } .rbsv-civic-premium .rbsv-civic-hero .rbsv-slide { visibility: hidden; opacity: 0; pointer-events: none; } .rbsv-civic-premium .rbsv-civic-hero .rbsv-slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; } .rbsv-civic-premium .rbsv-civic-hero .rbsv-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; } .rbsv-civic-premium .rbsv-home-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(7 30 61 / .92) 0%, rgb(11 49 93 / .7) 44%, rgb(7 30 61 / .14) 76%); } .rbsv-app.is-arabic .rbsv-civic-premium .rbsv-home-hero-overlay { background: linear-gradient(270deg, rgb(7 30 61 / .92) 0%, rgb(11 49 93 / .72) 44%, rgb(7 30 61 / .16) 76%); } .rbsv-civic-premium .rbsv-home-hero-content { position: relative; z-index: 2; display: flex; align-items: center; min-height: 31.5rem; /* Collision: premium-1-22.css forces oversized block padding. */ padding-block: 4.5rem 5.75rem !important; } .rbsv-civic-premium .rbsv-civic-story { width: min(100%, 38rem); /* Collision: premium-1-22.css forces a 760px story measure. */ max-width: 38rem !important; margin: 0; padding: 0; color: #FFFFFF; } .rbsv-civic-premium .rbsv-home-eyebrow, .rbsv-civic-premium .rbsv-home-heading > div > span, .rbsv-civic-premium .rbsv-home-civic-copy > span, .rbsv-civic-premium .rbsv-home-map-copy > span, .rbsv-civic-premium .rbsv-home-final-copy > span { font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .rbsv-app.is-arabic .rbsv-civic-premium :where(.rbsv-home-eyebrow, .rbsv-home-heading > div > span, .rbsv-home-civic-copy > span, .rbsv-home-map-copy > span, .rbsv-home-final-copy > span) { letter-spacing: 0; text-transform: none; } .rbsv-civic-premium .rbsv-home-eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: #FFFFFF; } .rbsv-civic-premium .rbsv-home-eyebrow i { width: .5rem; height: .5rem; border: 2px solid #E7B94E; border-radius: 50%; } .rbsv-civic-premium .rbsv-civic-story h1 { max-width: 12ch; margin: 1rem 0 .7rem; color: #FFFFFF; font-weight: 740; text-wrap: balance; /* Collision: premium-1-22.css forces an 86px display scale. */ font-size: clamp(2.9rem, 5vw, 4.5rem) !important; /* Collision: premium-1-22.css forces compressed leading. */ line-height: 1.02 !important; /* Collision: premium-1-22.css forces excessive negative tracking. */ letter-spacing: -.045em !important; } .rbsv-app.is-arabic .rbsv-civic-premium .rbsv-civic-story h1 { max-width: 14ch; /* Collision: premium-1-22.css forces the former Arabic display scale. */ font-size: clamp(2.55rem, 4.7vw, 4rem) !important; /* Collision: premium-1-22.css forces the former Arabic tracking. */ letter-spacing: -.015em !important; /* Collision: premium-1-22.css forces loose Arabic leading. */ line-height: 1.2 !important; } .rbsv-civic-premium .rbsv-civic-story p { max-width: 49ch; margin: 0; color: rgb(255 255 255 / .88); line-height: 1.7; /* Collision: premium-1-22.css forces the old hero paragraph scale. */ font-size: clamp(.95rem, 1.25vw, 1.08rem) !important; } .rbsv-civic-premium .rbsv-home-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; } .rbsv-civic-premium :where(.rbsv-home-primary-button, .rbsv-home-secondary-button) { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .65rem 1rem; border-radius: var(--rbsv-civic-radius-sm); font-size: .78rem; font-weight: 780; text-decoration: none; } .rbsv-civic-premium .rbsv-home-primary-button { /* Collision: premium-1-22.css forces a paper primary hero button. */ background: var(--rbsv-civic-blue) !important; /* Collision: premium-1-22.css forces dark ink on the primary hero button. */ color: #FFFFFF !important; /* Collision: premium-1-22.css forces the complete white primary-button border shorthand. */ border: 1px solid var(--rbsv-civic-blue) !important; /* Collision: premium-1-22.css forces the former primary-button radius. */ border-radius: var(--rbsv-civic-radius-sm) !important; /* Collision: premium-1-22.css forces the former primary-button padding. */ padding: .65rem 1rem !important; } .rbsv-civic-premium .rbsv-home-primary-button:hover { /* Collision: premium-1-22.css keeps the important paper surface on hover. */ background: var(--rbsv-civic-blue-dark) !important; transform: none; box-shadow: none; } .rbsv-civic-premium .rbsv-home-secondary-button { /* Collision: premium-1-22.css forces the former secondary-button border. */ border: 1px solid rgb(255 255 255 / .55) !important; /* Collision: premium-1-22.css forces the former secondary-button surface. */ background: rgb(7 30 61 / .28) !important; /* Collision: premium-1-22.css forces the former secondary-button foreground. */ color: #FFFFFF !important; /* Collision: premium-1-22.css forces the former secondary-button radius. */ border-radius: var(--rbsv-civic-radius-sm) !important; /* Collision: premium-1-22.css forces the former secondary-button padding. */ padding: .65rem 1rem !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .rbsv-civic-premium .rbsv-civic-weather { position: absolute; z-index: 5; padding: 1.15rem; color: var(--rbsv-civic-ink); /* Collision: premium-1-22.css forces the weather card into the carousel band. */ bottom: 4.5rem !important; /* Collision: premium-1-22.css fixes the former physical side. */ right: auto !important; /* Collision: premium-1-22.css fixes the former physical side. */ left: auto !important; /* Collision: premium-1-22.css physical offsets block logical RTL placement. */ inset-inline-start: auto !important; /* Collision: premium-1-22.css physical offsets block logical RTL placement. */ inset-inline-end: max(1.5rem, calc((100vw - var(--rbsv-civic-page-max)) / 2)) !important; /* Collision: premium-1-22.css forces the old width. */ width: min(18rem, calc(100% - 2rem)) !important; /* Collision: premium-1-22.css forces a translucent dark weather surface. */ background: #FFFFFF !important; /* Collision: premium-1-22.css forces a translucent light weather border. */ border: 1px solid var(--rbsv-civic-border) !important; /* Collision: premium-1-22.css forces the former weather radius. */ border-radius: var(--rbsv-civic-radius-lg) !important; /* Collision: premium-1-22.css forces the former weather shadow. */ box-shadow: 0 16px 36px rgb(7 30 61 / .14) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .rbsv-civic-premium .rbsv-home-weather-hit { position: absolute; inset: 0; border-radius: inherit; } .rbsv-civic-premium .rbsv-civic-weather > div, .rbsv-civic-premium .rbsv-civic-weather > section, .rbsv-civic-premium .rbsv-civic-weather > footer, .rbsv-civic-premium .rbsv-civic-weather > a:last-child { position: relative; z-index: 1; } .rbsv-civic-premium .rbsv-civic-weather > div, .rbsv-civic-premium .rbsv-civic-weather > section, .rbsv-civic-premium .rbsv-civic-weather > footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .rbsv-civic-premium .rbsv-civic-weather > div span { font-size: .72rem; font-weight: 800; } .rbsv-civic-premium .rbsv-civic-weather > div small, .rbsv-civic-premium .rbsv-civic-weather > p, .rbsv-civic-premium .rbsv-civic-weather > footer { color: var(--rbsv-civic-slate); font-size: .7rem; } .rbsv-civic-premium .rbsv-civic-weather > section { margin-block: .55rem; } .rbsv-civic-premium .rbsv-civic-weather > section strong { font-size: 2.65rem; line-height: 1; } .rbsv-civic-premium .rbsv-civic-weather > section sup { font-size: .45em; vertical-align: top; } .rbsv-civic-premium .rbsv-civic-weather > section i { color: var(--rbsv-civic-warning); font-size: 2.1rem; font-style: normal; } .rbsv-civic-premium .rbsv-civic-weather > p { margin: .35rem 0 .8rem; } .rbsv-civic-premium .rbsv-civic-weather > footer { padding-block: .7rem; border-block: 1px solid var(--rbsv-civic-border); } .rbsv-civic-premium .rbsv-civic-weather > a:last-child { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 2.75rem; padding-top: .55rem; color: var(--rbsv-civic-blue-dark); font-size: .72rem; font-weight: 800; text-decoration: none; } .rbsv-civic-premium .rbsv-home-slider-nav { position: absolute; /* Collision: premium-1-22.css forces a higher legacy carousel layer. */ z-index: 6 !important; /* Collision: premium-1-22.css forces the former carousel bottom band. */ bottom: .85rem !important; /* Collision: premium-1-22.css forces physical centering that conflicts in RTL. */ left: 50% !important; /* Collision: premium-1-22.css leaves a physical right constraint in RTL. */ right: auto !important; transform: translateX(-50%); } .rbsv-civic-premium .rbsv-home-slider-nav > div { display: flex; align-items: center; /* Collision: premium-1-22.css forces the former carousel gap. */ gap: 0 !important; /* Collision: premium-1-22.css forces glass-pill carousel padding. */ padding: 0 !important; /* Collision: premium-1-22.css forces a glass-pill carousel border. */ border: 0 !important; /* Collision: premium-1-22.css forces a pill-shaped carousel container. */ border-radius: 0 !important; /* Collision: premium-1-22.css forces a glass-pill carousel background. */ background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .rbsv-civic-premium .rbsv-home-slider-nav [data-slide-to] { position: relative; padding: 0; border: 0; background: transparent; /* Collision: premium-1-22.css shrinks the dot target to 36px. */ width: 2.75rem !important; /* Collision: premium-1-22.css shrinks the dot target to 36px. */ height: 2.75rem !important; /* Collision: premium-1-22.css shrinks the dot target to 36px. */ min-width: 2.75rem !important; /* Collision: premium-1-22.css forces circular visible button chrome. */ border-radius: 0 !important; /* Collision: premium-1-22.css forces visible button chrome. */ background: transparent !important; /* Collision: premium-1-22.css forces legacy button elevation. */ box-shadow: none !important; } .rbsv-civic-premium .rbsv-home-slider-nav [data-slide-to].is-active { /* Collision: premium-1-22.css shrinks the selected dot button. */ width: 2.75rem !important; /* Collision: premium-1-22.css turns the selected button into a pill. */ border-radius: 0 !important; /* Collision: premium-1-22.css fills the selected button instead of its dot. */ background: transparent !important; } .rbsv-civic-premium .rbsv-home-slider-nav [data-slide-to] span, .rbsv-civic-premium .rbsv-home-slider-nav [data-slide-to]::before { position: absolute; inset: 50% auto auto 50%; width: .42rem; height: .42rem; border-radius: 50%; background: rgb(255 255 255 / .58); transform: translate(-50%, -50%); content: ""; } .rbsv-civic-premium .rbsv-home-slider-nav [data-slide-to] span { display: none; } .rbsv-civic-premium .rbsv-home-slider-nav [data-slide-to].is-active::before { width: .68rem; height: .68rem; background: var(--rbsv-civic-gold); box-shadow: 0 0 0 .24rem rgb(231 185 78 / .2); } /* Full-width Civic search. */ .rbsv-civic-premium .rbsv-civic-search { position: relative; z-index: 20; padding: 1rem 0; background: var(--rbsv-civic-paper); /* Collision: premium-1-22.css floats search over the hero. */ margin-top: 0 !important; } .rbsv-civic-premium .rbsv-home-command { border: 1px solid var(--rbsv-civic-border); background: var(--rbsv-civic-paper); /* Collision: premium-1-22.css forces the former radius. */ border-radius: var(--rbsv-civic-radius-md) !important; /* Collision: premium-1-22.css forces a large floating shadow. */ box-shadow: 0 8px 22px rgb(7 30 61 / .07) !important; } .rbsv-civic-premium .rbsv-home-command-search { width: 100%; /* Collision: premium-1-22.css forces the former intro column. */ grid-template-columns: minmax(11rem, .28fr) minmax(0, 1fr) !important; } .rbsv-civic-premium .rbsv-home-command-intro { padding-inline: .75rem 1rem; border-inline-end: 1px solid var(--rbsv-civic-border); } .rbsv-civic-premium .rbsv-home-command-intro span { color: var(--rbsv-civic-blue-dark); font-size: .65rem; font-weight: 800; letter-spacing: .12em; } .rbsv-civic-premium .rbsv-home-command-intro h2 { margin: .2rem 0 0; font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.2; } .rbsv-civic-premium .rbsv-smart-search { position: relative; display: grid; align-items: center; width: 100%; min-width: 0; border: 1px solid var(--rbsv-civic-border); border-radius: var(--rbsv-civic-radius-sm); background: var(--rbsv-civic-mist); /* Collision: premium-1-22.css forces the former field tracks. */ grid-template-columns: 2.75rem minmax(0, 1fr) auto auto !important; /* Collision: premium-1-22.css forces the former height. */ min-height: 3.25rem !important; } .rbsv-civic-premium .rbsv-smart-search > i { display: grid; place-items: center; color: var(--rbsv-civic-navy); } .rbsv-civic-premium .rbsv-smart-search > i svg { width: 1.25rem; height: 1.25rem; } .rbsv-civic-premium .rbsv-smart-search input { height: 3rem; padding-inline: .25rem .75rem; border: 0; background: transparent; color: var(--rbsv-civic-ink); font: inherit; font-size: .88rem; /* Collision: premium-1-22.css final guard is needed to prevent collapse. */ width: 100% !important; /* Collision: premium-1-22.css final guard is needed to prevent collapse. */ min-width: 0 !important; } .rbsv-civic-premium .rbsv-smart-search input:focus { outline: 0; } .rbsv-civic-premium .rbsv-smart-search input::placeholder { color: var(--rbsv-civic-slate); opacity: 1; } .rbsv-civic-premium .rbsv-smart-search button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; border: 0; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; } .rbsv-civic-premium .rbsv-smart-search .rbsv-search-clear { /* Collision: premium-1-22.css gives every search button primary styling. */ width: auto !important; /* Collision: premium-1-22.css gives every search button primary styling. */ min-width: 2.75rem !important; /* Collision: premium-1-22.css gives every search button primary styling. */ height: 2.75rem !important; /* Collision: premium-1-22.css gives every search button primary styling. */ padding-inline: .7rem !important; /* Collision: premium-1-22.css gives every search button primary styling. */ background: transparent !important; /* Collision: premium-1-22.css gives every search button primary styling. */ color: var(--rbsv-civic-blue-dark) !important; } .rbsv-civic-premium .rbsv-smart-search > button[type="submit"] { margin: .22rem; border-radius: .5rem; /* Collision: premium-1-22.css forces its former blue. */ background: #1269D3 !important; } .rbsv-civic-premium .rbsv-smart-search > button[type="submit"]:hover { /* Collision: premium-1-22.css keeps the important base submit background on hover. */ background: var(--rbsv-civic-blue-dark) !important; } /* Today: a quiet status band rather than floating boxes. */ .rbsv-civic-premium .rbsv-civic-status { padding: 0 0 1.25rem; background: var(--rbsv-civic-paper); } .rbsv-civic-premium .rbsv-civic-status > .rbsv-shell { overflow: hidden; border: 1px solid var(--rbsv-civic-border); background: var(--rbsv-civic-mist); /* Collision: premium-1-22.css assigns a five-column grid to the shell. */ display: block !important; /* Collision: premium-1-22.css forces its former radius. */ border-radius: var(--rbsv-civic-radius-md) !important; /* Collision: premium-1-22.css forces a status shadow. */ box-shadow: none !important; } .rbsv-civic-premium .rbsv-civic-status-heading { display: flex; align-items: baseline; gap: .65rem; padding: .75rem 1rem; border-bottom: 1px solid var(--rbsv-civic-border); } .rbsv-civic-premium .rbsv-civic-status-heading::before { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rbsv-civic-success); box-shadow: 0 0 0 .25rem rgb(22 134 90 / .1); content: ""; } .rbsv-civic-premium .rbsv-civic-status-heading span { color: var(--rbsv-civic-blue-dark); font-size: .65rem; font-weight: 800; letter-spacing: .12em; } .rbsv-civic-premium .rbsv-civic-status-heading h2 { margin: 0; font-size: 1rem; } .rbsv-civic-premium .rbsv-civic-status-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .rbsv-civic-premium .rbsv-civic-status-items a { position: relative; display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .75rem .85rem; border-inline-end: 1px solid var(--rbsv-civic-border); color: var(--rbsv-civic-ink); text-decoration: none; /* Collision: premium-1-22.css forces an 82px legacy card. */ min-height: 4.5rem !important; } .rbsv-civic-premium .rbsv-civic-status-items a:last-child { border-inline-end: 0; } .rbsv-civic-premium .rbsv-civic-status-items a > i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--rbsv-civic-blue); } .rbsv-civic-premium .rbsv-civic-status-items a.is-open > i { background: var(--rbsv-civic-success); } .rbsv-civic-premium .rbsv-civic-status-items a.is-alert > i { background: var(--rbsv-civic-danger); } .rbsv-civic-premium .rbsv-civic-status-items a span { display: grid; min-width: 0; gap: .12rem; } .rbsv-civic-premium .rbsv-civic-status-items a small { color: var(--rbsv-civic-slate); font-size: .61rem; font-weight: 700; } .rbsv-civic-premium .rbsv-civic-status-items a strong { overflow: hidden; font-size: .72rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .rbsv-civic-premium .rbsv-civic-status-items a > b { color: var(--rbsv-civic-blue-dark); font-size: .82rem; } .rbsv-civic-premium .rbsv-civic-service-status { border-top: 1px solid var(--rbsv-civic-border); } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse { max-width: none; margin: 0; padding: 1rem; border: 0; background: var(--rbsv-civic-paper); box-shadow: none; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse > header { align-items: center; padding-bottom: .8rem; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse > header h2 { font-size: 1.15rem; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse-grid article { min-height: 7rem; padding: 1rem; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse-grid h3 { margin: .2rem 0; font-size: 1rem; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse-grid p, .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse-grid time { font-size: .72rem; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse > footer { padding-top: .75rem; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse > footer a { min-height: 2.75rem; padding: .55rem .8rem; } /* Shared section heading and gold village-horizon signature. */ .rbsv-civic-premium .rbsv-home-section { position: relative; } .rbsv-civic-premium .rbsv-civic-essentials, .rbsv-civic-premium .rbsv-civic-village-life, .rbsv-civic-premium .rbsv-civic-municipality, .rbsv-civic-premium .rbsv-home-community, .rbsv-civic-premium .rbsv-home-map-section { /* Collision: premium-1-22.css forces fixed section padding instead of the canonical rhythm token. */ padding-block: var(--rbsv-civic-section-gap) !important; } .rbsv-civic-premium .rbsv-home-section::before { position: absolute; top: 0; inset-inline-start: max(1rem, calc((100% - var(--rbsv-civic-page-max)) / 2)); width: min(6rem, 22vw); height: 2px; background: var(--rbsv-civic-gold); content: ""; } .rbsv-civic-premium .rbsv-home-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } .rbsv-civic-premium .rbsv-home-heading > div > span, .rbsv-civic-premium .rbsv-home-civic-copy > span, .rbsv-civic-premium .rbsv-home-map-copy > span { color: var(--rbsv-civic-blue-dark); } .rbsv-civic-premium .rbsv-home-heading h2, .rbsv-civic-premium .rbsv-home-civic-copy h2, .rbsv-civic-premium .rbsv-home-map-copy h2 { max-width: 18ch; margin: .45rem 0 0; font-weight: 730; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; /* Collision: premium-1-22.css forces oversized section headings. */ font-size: clamp(2rem, 4vw, 3.35rem) !important; } .rbsv-app.is-arabic .rbsv-civic-premium :where(.rbsv-home-heading h2, .rbsv-home-civic-copy h2, .rbsv-home-map-copy h2) { letter-spacing: -.015em; line-height: 1.35; } .rbsv-civic-premium .rbsv-home-heading > p, .rbsv-civic-premium .rbsv-home-civic-copy > p, .rbsv-civic-premium .rbsv-home-map-copy > p { max-width: 50ch; margin: 0; color: var(--rbsv-civic-slate); font-size: .92rem; line-height: 1.75; } /* Everyday Essentials: exactly six equal, task-led cards. */ .rbsv-civic-premium .rbsv-civic-essentials { background: var(--rbsv-civic-paper); } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-actions-grid { /* Collision: premium-1-22.css forces four columns. */ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* Collision: premium-1-22.css forces its old gap. */ gap: .75rem !important; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; gap: .9rem; background: var(--rbsv-civic-paper); color: var(--rbsv-civic-ink); text-decoration: none; /* Collision: premium-1-22.css forces flex layout on essentials cards. */ display: grid !important; /* Collision: premium-1-22.css forces flex-start alignment on essentials cards. */ align-items: center !important; /* Collision: premium-1-22.css leaves a flex-direction on the grid card. */ flex-direction: initial !important; /* Collision: premium-1-22.css leaves flex space distribution on the grid card. */ justify-content: normal !important; /* Collision: premium-1-22.css forces the former card padding. */ padding: var(--rbsv-civic-action-padding) !important; /* Collision: premium-1-22.css forces the former card border. */ border: 1px solid var(--rbsv-civic-border) !important; /* Collision: premium-1-22.css forces the former card radius. */ border-radius: var(--rbsv-civic-radius-md) !important; /* Collision: premium-1-22.css forces the old card height. */ min-height: var(--rbsv-civic-action-min) !important; /* Collision: premium-1-22.css adds repeated card shadows. */ box-shadow: none !important; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-actions-grid .rbsv-home-action:first-child { /* Collision: premium-1-22.css spans the first card. */ grid-column: auto !important; /* Collision: premium-1-22.css spans the first card. */ grid-row: auto !important; /* Collision: premium-1-22.css enlarges the first card. */ min-height: var(--rbsv-civic-action-min) !important; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action.is-featured { /* Collision: premium-1-22.css forces the first card to navy. */ background: var(--rbsv-civic-mist) !important; /* Collision: premium-1-22.css forces the first card's navy border. */ border-color: var(--rbsv-civic-blue) !important; /* Collision: premium-1-22.css forces the first card's foreground to white. */ color: var(--rbsv-civic-ink) !important; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action:hover { /* Collision: premium-1-22.css moves cards on hover. */ transform: none !important; /* Collision: premium-1-22.css forces the former hover border. */ border-color: var(--rbsv-civic-blue) !important; /* Collision: premium-1-22.css forces the important paper card surface. */ background: var(--rbsv-civic-mist) !important; /* Collision: premium-1-22.css forces a large hover shadow. */ box-shadow: none !important; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action > i, .rbsv-civic-sheet-actions a > i { display: grid; place-items: center; font-style: normal; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action > i { /* Collision: premium-1-22.css forces the former icon-box width. */ width: 2.75rem !important; /* Collision: premium-1-22.css forces the former icon-box height. */ height: 2.75rem !important; /* Collision: premium-1-22.css forces the former icon-box radius. */ border-radius: var(--rbsv-civic-radius-sm) !important; /* Collision: premium-1-22.css forces the former icon-box surface. */ background: rgb(18 105 211 / .09) !important; /* Collision: premium-1-22.css forces the former icon-box foreground. */ color: var(--rbsv-civic-blue-dark) !important; } .rbsv-civic-sheet-actions a > i { width: 2.75rem; height: 2.75rem; border-radius: .625rem; background: rgb(18 105 211 / .09); color: #0B4E9B; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action > i svg, .rbsv-civic-sheet-actions a > i svg { width: 1.4rem; height: 1.4rem; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action.is-featured > span { margin: 0; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action.is-featured strong { max-width: none; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action > span { display: grid; gap: .35rem; min-width: 0; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action strong { /* Collision: premium-1-22.css forces the former task-label foreground. */ color: var(--rbsv-civic-ink) !important; /* Collision: premium-1-22.css forces the former task-label size. */ font-size: var(--rbsv-civic-action-label-size) !important; line-height: 1.35; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action small { margin: 0; /* Collision: premium-1-22.css forces the former supporting-copy foreground. */ color: var(--rbsv-civic-slate) !important; /* Collision: premium-1-22.css forces the former supporting-copy size. */ font-size: .72rem !important; line-height: 1.55; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action > b { position: static; /* Collision: premium-1-22.css hides non-featured arrows at mobile widths. */ display: grid !important; place-items: center; /* Collision: premium-1-22.css physically pins the featured arrow to the top. */ top: auto !important; /* Collision: premium-1-22.css physically pins the featured arrow in LTR. */ right: auto !important; /* Collision: premium-1-22.css physically pins the featured arrow to the bottom. */ bottom: auto !important; /* Collision: premium-1-22.css physically pins the featured arrow in RTL. */ left: auto !important; /* Collision: premium-1-22.css forces the former featured-arrow width. */ width: 2.75rem !important; /* Collision: premium-1-22.css forces the former featured-arrow height. */ height: 2.75rem !important; border-radius: 0; background: transparent; color: var(--rbsv-civic-blue-dark); } .rbsv-app.is-arabic .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action > b { transform: rotate(180deg); } .rbsv-civic-premium .rbsv-civic-all-services { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; margin-top: 1.15rem; padding: .25rem; color: var(--rbsv-civic-blue-dark); font-size: .78rem; font-weight: 800; text-decoration: none; } /* Village life: high-contrast editorial cards and compact empty states. */ .rbsv-civic-premium .rbsv-civic-village-life { /* Collision: premium-1-22.css forces its legacy dark value. */ background: #0B315D !important; color: #FFFFFF; } .rbsv-civic-premium .rbsv-civic-village-life::before { box-shadow: 1rem 0 0 -.34rem #16865A; } .rbsv-civic-premium .rbsv-civic-village-life .rbsv-home-heading h2 { /* Collision: premium-1-22.css forces the old foreground. */ color: #FFFFFF !important; } .rbsv-civic-premium .rbsv-civic-village-life .rbsv-home-heading > div > span { color: #FFCA52; } .rbsv-civic-premium .rbsv-civic-village-life .rbsv-home-heading > p { /* Collision: premium-1-22.css forces lower-contrast copy. */ color: #DCE6F2 !important; } .rbsv-civic-premium .rbsv-home-today-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: 1rem; } .rbsv-civic-premium :where(.rbsv-home-news-column, .rbsv-home-events-column) { padding: 1.15rem; border: 1px solid rgb(255 255 255 / .17); border-radius: var(--rbsv-civic-radius-md); /* Collision: premium-1-22.css forces its old panel surface. */ background: rgb(255 255 255 / .06) !important; /* Collision: premium-1-22.css forces its old panel shadow. */ box-shadow: none !important; } .rbsv-civic-premium :where(.rbsv-home-news-column, .rbsv-home-events-column) > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin-bottom: .75rem; } .rbsv-civic-premium :where(.rbsv-home-news-column, .rbsv-home-events-column) > header h3 { margin: 0; color: #FFFFFF; font-size: 1rem; } .rbsv-civic-premium :where(.rbsv-home-news-column, .rbsv-home-events-column) > header a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #FFFFFF; font-size: .7rem; font-weight: 750; } .rbsv-civic-premium .rbsv-home-news-grid, .rbsv-civic-premium .rbsv-home-events-list { display: grid; gap: .65rem; } .rbsv-civic-premium .rbsv-home-news-card { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); min-height: 6.5rem; overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--rbsv-civic-radius-sm); background: rgb(255 255 255 / .07); color: #FFFFFF; text-decoration: none; } .rbsv-civic-premium .rbsv-home-news-image { min-height: 100%; background-position: center; background-size: cover; } .rbsv-civic-premium .rbsv-home-news-image.is-placeholder { display: grid; place-items: center; background: rgb(255 255 255 / .08); } .rbsv-civic-premium .rbsv-home-news-image svg { width: 1.5rem; color: #FFCA52; } .rbsv-civic-premium .rbsv-home-news-copy { display: grid; align-content: center; gap: .18rem; min-width: 0; padding: .75rem; } .rbsv-civic-premium .rbsv-home-news-copy small, .rbsv-civic-premium .rbsv-home-news-copy em, .rbsv-civic-premium .rbsv-home-event-copy :where(small, em) { color: #DCE6F2; font-size: .66rem; font-style: normal; } .rbsv-civic-premium .rbsv-home-news-copy strong, .rbsv-civic-premium .rbsv-home-event-copy strong { font-size: .82rem; line-height: 1.4; } .rbsv-civic-premium .rbsv-home-news-copy b { color: #FFCA52; font-size: .66rem; } .rbsv-civic-premium .rbsv-home-events-list > a { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) 2.75rem; align-items: center; min-height: 5.4rem; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--rbsv-civic-radius-sm); background: rgb(255 255 255 / .07); color: #FFFFFF; text-decoration: none; } .rbsv-civic-premium .rbsv-home-events-list time { display: grid; place-items: center; align-self: stretch; border-inline-end: 1px solid rgb(255 255 255 / .14); color: #FFFFFF; } .rbsv-civic-premium .rbsv-home-events-list time b { font-size: 1.25rem; } .rbsv-civic-premium .rbsv-home-events-list time span { font-size: .65rem; text-transform: uppercase; } .rbsv-civic-premium .rbsv-home-event-copy { display: grid; gap: .12rem; min-width: 0; padding: .65rem; } .rbsv-civic-premium .rbsv-home-events-list > a > i { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: #FFCA52; font-style: normal; } .rbsv-civic-premium .rbsv-home-empty { display: flex; flex-direction: column; justify-content: center; padding: 1.2rem; border: 1px dashed rgb(255 255 255 / .25); border-radius: var(--rbsv-civic-radius-sm); background: rgb(255 255 255 / .04); /* Collision: premium-1-22.css makes empty states dominate. */ min-height: 10.5rem !important; } .rbsv-civic-premium .rbsv-home-empty h3 { /* Collision: premium-1-22.css forces an oversized empty heading. */ font-size: 1.15rem !important; } .rbsv-civic-premium .rbsv-home-empty p { margin: .25rem 0 .75rem; color: #DCE6F2; font-size: .75rem; } .rbsv-civic-premium .rbsv-home-empty a { min-height: 2.75rem; color: #FFFFFF; font-size: .75rem; font-weight: 750; } /* High-contrast municipality panel with three direct actions. */ .rbsv-civic-premium .rbsv-civic-municipality { /* Collision: premium-1-22.css forces a white/mist municipality. */ background: #0B315D !important; color: #FFFFFF; } .rbsv-civic-premium .rbsv-civic-municipality > .rbsv-shell { /* Collision: premium-1-22.css forces the old split proportions. */ grid-template-columns: minmax(0, .82fr) minmax(28rem, 1.18fr) !important; /* Collision: premium-1-22.css forces the old large gap. */ gap: clamp(2rem, 5vw, 4rem) !important; } .rbsv-civic-premium .rbsv-civic-municipality .rbsv-home-civic-copy > span { color: #FFCA52; } .rbsv-civic-premium .rbsv-civic-municipality .rbsv-home-civic-copy h2 { /* Collision: premium-1-22.css forces dark ink on the civic panel. */ color: #FFFFFF !important; /* Collision: premium-1-22.css forces its old municipality scale. */ font-size: clamp(2rem, 4vw, 3.35rem) !important; } .rbsv-civic-premium .rbsv-civic-municipality .rbsv-home-civic-copy p { /* Collision: premium-1-22.css forces dark muted civic copy. */ color: #DCE6F2 !important; } .rbsv-civic-premium .rbsv-home-civic-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; } .rbsv-civic-premium .rbsv-home-civic-actions a { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; min-height: 10rem; padding: 1rem; border: 1px solid rgb(255 255 255 / .22); border-radius: var(--rbsv-civic-radius-md); background: rgb(255 255 255 / .08); color: #FFFFFF; text-decoration: none; } .rbsv-civic-premium .rbsv-home-civic-actions a.is-primary { border-color: #FFCA52; background: #FFFFFF; color: var(--rbsv-civic-ink); } .rbsv-civic-premium .rbsv-home-civic-actions a:hover { border-color: #FFCA52; background: rgb(255 255 255 / .14); } .rbsv-civic-premium .rbsv-home-civic-actions a.is-primary:hover { background: var(--rbsv-civic-mist); } .rbsv-civic-premium .rbsv-home-civic-actions strong { font-size: .95rem; line-height: 1.35; } .rbsv-civic-premium .rbsv-home-civic-actions small { color: inherit; font-size: .7rem; line-height: 1.55; opacity: .78; } .rbsv-civic-premium .rbsv-home-civic-actions b { justify-self: end; font-size: 1rem; } /* Community participation. */ .rbsv-civic-premium .rbsv-home-community { background: var(--rbsv-civic-mist); } .rbsv-civic-premium .rbsv-home-community-grid { display: grid; /* Collision: premium-1-22.css forces its old responsive grid. */ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Collision: premium-1-22.css forces its old gap. */ gap: .75rem !important; } .rbsv-civic-premium .rbsv-home-community-grid > a { position: relative; display: grid; align-content: start; gap: .5rem; border: 1px solid var(--rbsv-civic-border); background: var(--rbsv-civic-paper); color: var(--rbsv-civic-ink); text-decoration: none; /* Collision: premium-1-22.css forces its old radius. */ border-radius: var(--rbsv-civic-radius-md) !important; /* Collision: premium-1-22.css forces its old shadow. */ box-shadow: none !important; } .rbsv-civic-premium .rbsv-home-community-grid > a.is-large { grid-column: span 2; grid-row: span 2; color: #FFFFFF; /* Collision: premium-1-22.css forces its old height. */ min-height: var(--rbsv-civic-community-large-min) !important; /* Collision: premium-1-22.css forces its old padding. */ padding: var(--rbsv-civic-community-large-padding) !important; /* Collision: premium-1-22.css forces a legacy gradient. */ background: #0B315D !important; } .rbsv-civic-premium .rbsv-home-community-grid > a.is-large span { color: #FFCA52; font-size: .67rem; font-weight: 800; letter-spacing: .12em; } .rbsv-civic-premium .rbsv-home-community-grid > a.is-large h3 { /* Collision: premium-1-22.css forces its old large-card scale. */ font-size: clamp(1.65rem, 3vw, 2.35rem) !important; line-height: 1.12; } .rbsv-civic-premium .rbsv-home-community-grid > a.is-large p { max-width: 45ch; color: #DCE6F2; } .rbsv-civic-premium .rbsv-home-community-grid > a.is-large b { margin-top: auto; color: #FFFFFF; } .rbsv-civic-premium .rbsv-home-community-grid > a:not(.is-large) { /* Collision: premium-1-22.css forces its old utility height. */ min-height: var(--rbsv-civic-community-utility-min) !important; /* Collision: premium-1-22.css forces its old utility padding. */ padding: var(--rbsv-civic-community-utility-padding) !important; } .rbsv-civic-premium .rbsv-home-community-grid > a:not(.is-large) i { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--rbsv-civic-radius-sm); background: rgb(18 105 211 / .09); color: var(--rbsv-civic-blue-dark); } .rbsv-civic-premium .rbsv-home-community-grid > a:not(.is-large) svg { width: 1.3rem; } .rbsv-civic-premium .rbsv-home-community-grid h3 { margin: 0; font-size: .95rem; } .rbsv-civic-premium .rbsv-home-community-grid p { margin: 0; color: var(--rbsv-civic-slate); font-size: .72rem; line-height: 1.55; } .rbsv-civic-premium .rbsv-home-community-grid > a:not(.is-large) b { position: absolute; inset-inline-end: .8rem; top: .8rem; color: var(--rbsv-civic-blue-dark); } /* Map discovery. */ .rbsv-civic-premium .rbsv-home-map-section { background: var(--rbsv-civic-paper); } .rbsv-civic-premium .rbsv-home-map-section > .rbsv-shell { display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); align-items: center; /* Collision: premium-1-22.css forces its old map gap. */ gap: clamp(2rem, 5vw, 4rem) !important; } .rbsv-civic-premium .rbsv-home-map-copy a { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin-top: 1.2rem; padding: .65rem .9rem; border-radius: var(--rbsv-civic-radius-sm); background: var(--rbsv-civic-blue); color: #FFFFFF; font-size: .75rem; font-weight: 800; text-decoration: none; } .rbsv-civic-premium .rbsv-home-map-frame { overflow: hidden; border: 1px solid var(--rbsv-civic-border); background: var(--rbsv-civic-mist); box-shadow: none; /* Collision: premium-1-22.css forces its old map radius. */ border-radius: var(--rbsv-civic-radius-lg) !important; } .rbsv-civic-premium .rbsv-home-map-frame, .rbsv-civic-premium .rbsv-home-map-frame .rbsv-live-map { /* Collision: premium-1-22.css forces its old map height. */ min-height: var(--rbsv-civic-map-min) !important; } /* Account CTA. */ .rbsv-civic-premium .rbsv-home-final-cta { /* Collision: premium-1-22.css forces its old CTA spacing. */ padding: clamp(3.5rem, 7vw, 6rem) 0 !important; /* Collision: premium-1-22.css forces its old mist approximation. */ background: #F3F7FC !important; } .rbsv-civic-premium .rbsv-home-final-cta > .rbsv-shell { /* Collision: premium-1-22.css forces its old near-navy. */ background: #0B315D !important; /* Collision: premium-1-22.css forces a large CTA shadow. */ box-shadow: 0 14px 34px rgb(7 30 61 / .12) !important; } .rbsv-civic-premium .rbsv-home-final-cta h2 { max-width: 18ch; margin: .4rem 0 .65rem; line-height: 1.08; letter-spacing: -.04em; } .rbsv-civic-premium .rbsv-home-final-copy > span { color: #FFCA52; } .rbsv-civic-premium .rbsv-home-final-copy ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.15rem 0 0; padding: 0; list-style: none; color: #FFFFFF; font-size: .75rem; } .rbsv-civic-premium .rbsv-home-final-copy li::before { margin-inline-end: .45rem; color: #FFCA52; content: "✓"; } .rbsv-civic-premium .rbsv-home-final-cta > .rbsv-shell > a { font-size: .8rem; font-weight: 800; text-decoration: none; } /* Footer is scoped by the Civic Premium homepage sibling. */ .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-footer { background: #071E3D; color: #DCE6F2; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-footer-grid { gap: clamp(1.5rem, 4vw, 3.5rem); } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-footer :where(h3, h4) { color: #FFFFFF; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-footer :where(p, a, span) { color: #DCE6F2; } /* Shared global mobile component variables. */ .rbsv-mobile-dock, .rbsv-civic-sheet, .rbsv-civic-sheet-backdrop, .rbsv-accessibility, .rbsv-assistant { --rbsv-civic-dock-height: 4.5rem; --rbsv-civic-safe-bottom: env(safe-area-inset-bottom, 0px); --rbsv-civic-floating-gap: .75rem; --rbsv-civic-overlay-z: 100100; --rbsv-civic-shared-ink: #071E3D; --rbsv-civic-shared-navy: #0B315D; --rbsv-civic-shared-blue: #1269D3; --rbsv-civic-shared-blue-dark: #0B4E9B; --rbsv-civic-shared-gold: #E7B94E; --rbsv-civic-shared-paper: #FFFFFF; --rbsv-civic-shared-mist: #F3F7FC; --rbsv-civic-shared-slate: #5F7188; --rbsv-civic-shared-border: #DCE6F2; } .rbsv-mobile-dock, .rbsv-civic-sheet, .rbsv-civic-sheet-backdrop { display: none; } .rbsv-civic-sheet[hidden], .rbsv-civic-sheet-backdrop[hidden] { display: none; } body.rbsv-sheet-open { overflow: hidden; overscroll-behavior: none; } .rbsv-civic-sheet-backdrop { position: fixed; z-index: var(--rbsv-civic-overlay-z); inset: 0; background: rgb(7 30 61 / .54); opacity: 1; transition: opacity 240ms ease; } .rbsv-civic-sheet { position: fixed; z-index: calc(var(--rbsv-civic-overlay-z) + 1); inset: auto 0 0; max-height: min(80dvh, 42rem); overflow-y: auto; overscroll-behavior: contain; padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + var(--rbsv-civic-safe-bottom)) max(1rem, env(safe-area-inset-left)); border-radius: 1.25rem 1.25rem 0 0; background: var(--rbsv-civic-shared-paper); box-shadow: 0 -14px 40px rgb(7 30 61 / .2); color: var(--rbsv-civic-shared-ink); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transform: translateY(0); transition: transform 240ms ease; } .rbsv-app.is-arabic :where(.rbsv-civic-sheet, .rbsv-mobile-dock) { font-family: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif; } .rbsv-app.is-arabic .rbsv-civic-sheet > header span { letter-spacing: 0; text-transform: none; } .rbsv-civic-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rbsv-civic-shared-border); } .rbsv-civic-sheet > header span { color: var(--rbsv-civic-shared-blue-dark); font-size: .65rem; font-weight: 800; letter-spacing: .11em; } .rbsv-civic-sheet > header h2 { margin: .2rem 0 0; font-size: 1.5rem; line-height: 1.25; } .rbsv-civic-sheet > header button { display: grid; place-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rbsv-civic-shared-border); border-radius: .625rem; background: var(--rbsv-civic-shared-mist); color: var(--rbsv-civic-shared-ink); font-size: 1.5rem; cursor: pointer; } .rbsv-civic-sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding-block: 1rem; } .rbsv-civic-sheet-actions a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .7rem; min-height: 5rem; padding: .75rem; border: 1px solid var(--rbsv-civic-shared-border); border-radius: .875rem; background: var(--rbsv-civic-shared-paper); color: var(--rbsv-civic-shared-ink); font-size: .75rem; font-weight: 750; line-height: 1.4; text-decoration: none; } .rbsv-civic-sheet-actions a:hover { border-color: var(--rbsv-civic-shared-blue); background: var(--rbsv-civic-shared-mist); } .rbsv-civic-sheet-all { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: var(--rbsv-civic-shared-blue-dark); font-size: .78rem; font-weight: 800; } .rbsv-civic-search-sheet .rbsv-smart-search { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto auto; align-items: center; min-height: 3.5rem; margin-top: 1rem; border: 1px solid var(--rbsv-civic-shared-border); border-radius: .875rem; background: var(--rbsv-civic-shared-mist); } .rbsv-civic-search-sheet .rbsv-smart-search > i { display: grid; place-items: center; color: var(--rbsv-civic-shared-navy); } .rbsv-civic-search-sheet .rbsv-smart-search > i svg { width: 1.25rem; } .rbsv-civic-search-sheet .rbsv-smart-search input { width: 100%; min-width: 0; height: 3.25rem; border: 0; background: transparent; color: var(--rbsv-civic-shared-ink); font: inherit; font-size: .78rem; } .rbsv-civic-search-sheet .rbsv-smart-search input:focus { outline: 0; } .rbsv-civic-premium .rbsv-smart-search input:focus-visible, .rbsv-civic-search-sheet .rbsv-smart-search input:focus-visible { position: relative; z-index: 2; /* Collision: premium-1-22.css forces a low-contrast input focus outline. */ outline: 3px solid #FFCA52 !important; /* Collision: premium-1-22.css forces its input focus-ring offset. */ outline-offset: 3px !important; } .rbsv-civic-search-sheet .rbsv-smart-search button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: .7rem; border: 0; border-radius: .625rem; background: transparent; color: var(--rbsv-civic-shared-blue-dark); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; } .rbsv-civic-search-sheet .rbsv-smart-search > button[type="submit"] { margin-inline-end: .2rem; background: var(--rbsv-civic-shared-blue); color: #FFFFFF; } .rbsv-civic-sheet > header button:hover, .rbsv-civic-search-sheet .rbsv-smart-search button:hover { border-color: var(--rbsv-civic-shared-blue); background: var(--rbsv-civic-shared-mist); } .rbsv-civic-search-sheet .rbsv-smart-search > button[type="submit"]:hover { background: var(--rbsv-civic-shared-blue-dark); } .rbsv-mobile-dock a:active, .rbsv-civic-sheet :where(a, button):active { opacity: .78; } .rbsv-civic-sheet :where(button, input):disabled { cursor: not-allowed; opacity: .52; } @media (max-width: 64rem) { .rbsv-civic-premium .rbsv-home-hero-content { padding-inline-end: 19rem; } .rbsv-civic-premium .rbsv-civic-status-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rbsv-civic-premium .rbsv-civic-status-items a:nth-child(3n) { border-inline-end: 0; } .rbsv-civic-premium .rbsv-civic-status-items a:nth-child(n + 4) { border-top: 1px solid var(--rbsv-civic-border); } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-actions-grid { /* Collision: premium-1-22.css forces its tablet grid. */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .rbsv-civic-premium .rbsv-civic-municipality > .rbsv-shell { /* Collision: premium-1-22.css forces the old tablet proportions. */ grid-template-columns: 1fr !important; } .rbsv-civic-premium .rbsv-home-community-grid { /* Collision: premium-1-22.css forces its tablet grid. */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .rbsv-civic-premium .rbsv-home-community-grid > a.is-large { /* Collision: premium-1-22.css forces its tablet span. */ grid-column: 1 / -1 !important; grid-row: auto; } .rbsv-civic-premium .rbsv-home-map-section > .rbsv-shell { /* Collision: premium-1-22.css forces its tablet map layout. */ grid-template-columns: 1fr !important; } } @media (max-width: 48.75rem) { .rbsv-civic-premium { --rbsv-civic-community-large-min: 13rem; --rbsv-civic-community-large-padding: 1.35rem; --rbsv-civic-community-utility-min: 8rem; --rbsv-civic-community-utility-padding: .8rem; --rbsv-civic-map-min: 18rem; --rbsv-civic-action-min: 9.25rem; --rbsv-civic-action-padding: .85rem; --rbsv-civic-action-label-size: .82rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-alertbar .rbsv-languages { /* Collision: premium-1-22.css owns the small-screen language display. */ display: none !important; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-alertbar .rbsv-shell { justify-content: center; min-height: 1.8rem; text-align: center; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-header-inner { min-height: 4rem; gap: .5rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-brand small { display: none; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-brand strong { font-size: .85rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-language-switcher { margin-inline-start: auto; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-language-switcher a { min-width: 2.75rem; min-height: 2.75rem; padding-inline: .3rem; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-menu-toggle { display: grid; place-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid #DCE6F2; border-radius: .625rem; background: #FFFFFF; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) #rbsv-primary-nav { position: fixed; z-index: 950; display: none; max-height: calc(100dvh - 7rem - env(safe-area-inset-top, 0px)); overflow-y: auto; padding: .65rem; border: 1px solid #DCE6F2; border-radius: .875rem; background: #FFFFFF; box-shadow: 0 18px 40px rgb(7 30 61 / .18); /* Collision: premium-1-22.css forces a 72px menu top over the premium header. */ top: calc(5.8rem + env(safe-area-inset-top, 0px)) !important; /* Collision: premium-1-22.css forces a physical right menu offset. */ right: 1rem !important; /* Collision: premium-1-22.css forces a physical left menu offset. */ left: 1rem !important; /* Collision: premium-1-22.css physical offsets prevent logical RTL placement. */ inset-inline-start: 1rem !important; /* Collision: premium-1-22.css physical offsets prevent logical RTL placement. */ inset-inline-end: 1rem !important; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) #rbsv-primary-nav.is-open { display: grid; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) #rbsv-primary-nav > a { display: flex; align-items: center; min-height: 2.75rem; padding-inline: .75rem; border-radius: .5rem; } .rbsv-civic-premium .rbsv-civic-hero { /* Collision: premium-1-22.css forces its mobile hero height. */ min-height: 36rem !important; /* Collision: premium-1-22.css removes the mobile max-height. */ max-height: 36rem !important; } .rbsv-civic-premium .rbsv-home-hero-overlay, .rbsv-app.is-arabic .rbsv-civic-premium .rbsv-home-hero-overlay { background: linear-gradient(0deg, rgb(7 30 61 / .97) 0%, rgb(11 49 93 / .74) 64%, rgb(7 30 61 / .2) 100%); } .rbsv-civic-premium .rbsv-home-hero-content { align-items: flex-start; min-height: 36rem; /* Collision: premium-1-22.css forces its old mobile padding. */ padding: 2.6rem 1.1rem 12.5rem !important; } .rbsv-civic-premium .rbsv-civic-story { max-width: none; } .rbsv-civic-premium .rbsv-civic-story h1, .rbsv-app.is-arabic .rbsv-civic-premium .rbsv-civic-story h1 { max-width: 12ch; /* Collision: premium-1-22.css forces its old mobile scale. */ font-size: clamp(2.35rem, 11vw, 3.1rem) !important; } .rbsv-civic-premium .rbsv-civic-story p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .rbsv-civic-premium .rbsv-home-hero-actions { margin-top: 1.1rem; } .rbsv-civic-premium .rbsv-civic-weather { padding: .8rem .9rem; /* Collision: premium-1-22.css places mobile weather in the dot hit-area band. */ bottom: 3.75rem !important; /* Collision: premium-1-22.css fixes the old mobile physical side. */ right: auto !important; /* Collision: premium-1-22.css fixes the old mobile physical side. */ left: auto !important; /* Collision: premium-1-22.css physical offsets block logical mobile placement. */ inset-inline-start: 1rem !important; /* Collision: premium-1-22.css physical offsets block logical mobile placement. */ inset-inline-end: 1rem !important; /* Collision: premium-1-22.css forces its old mobile width. */ width: auto !important; } .rbsv-civic-premium .rbsv-home-slider-nav { /* Collision: premium-1-22.css places mobile dots in the weather-card band. */ bottom: .25rem !important; } .rbsv-civic-premium .rbsv-civic-weather > section { position: absolute; inset-block-start: .65rem; inset-inline-end: .9rem; gap: .55rem; } .rbsv-civic-premium .rbsv-civic-weather > section strong { /* Collision: premium-1-22.css fixes its mobile temperature size. */ font-size: 2rem !important; } .rbsv-civic-premium .rbsv-civic-weather > section i { /* Collision: premium-1-22.css fixes its mobile weather icon size. */ font-size: 1.5rem !important; } .rbsv-civic-premium .rbsv-civic-weather > p, .rbsv-civic-premium .rbsv-civic-weather > footer { display: none; } .rbsv-civic-premium .rbsv-civic-weather > a:last-child { width: 55%; min-height: 2.75rem; } .rbsv-civic-premium .rbsv-civic-search { /* Collision: premium-1-22.css forces its old mobile search padding. */ padding: .75rem 0 !important; background: var(--rbsv-civic-mist); } .rbsv-civic-premium .rbsv-home-command-search { /* Collision: premium-1-22.css forces display:block. */ display: grid !important; /* Collision: premium-1-22.css forces its old mobile tracks. */ grid-template-columns: 1fr !important; /* Collision: premium-1-22.css forces its old mobile padding. */ padding: .5rem !important; } .rbsv-civic-premium .rbsv-home-command-intro { /* Collision: premium-1-22.css hides the mobile search heading. */ display: block !important; padding: .25rem .35rem .55rem; border-inline-end: 0; } .rbsv-civic-premium .rbsv-smart-search { /* Collision: premium-1-22.css forces its old mobile field tracks. */ grid-template-columns: 2.5rem minmax(0, 1fr) auto auto !important; } .rbsv-civic-premium .rbsv-smart-search > button[type="submit"] { /* Collision: premium-1-22.css forces its old mobile submit width. */ min-width: 4.8rem !important; /* Collision: premium-1-22.css forces its old mobile submit padding. */ padding-inline: .7rem !important; } .rbsv-civic-premium .rbsv-civic-status > .rbsv-shell { width: calc(100% - 1.5rem); } .rbsv-civic-premium .rbsv-civic-status-items { display: flex; overflow-x: auto; scroll-snap-type: inline mandatory; scrollbar-width: thin; } .rbsv-civic-premium .rbsv-civic-status-items a { flex: 0 0 min(17rem, 82vw); border-top: 0; scroll-snap-align: start; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse { margin: 0; padding: .85rem; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse > header { align-items: flex-start; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse-grid { grid-template-columns: 1fr; } .rbsv-civic-premium .rbsv-civic-service-status .rbsv-service-pulse-grid article { min-height: 0; padding: .85rem 0; border-inline-end: 0; border-bottom: 1px solid var(--rbsv-civic-border); } .rbsv-civic-premium .rbsv-home-heading { display: block; } .rbsv-civic-premium .rbsv-home-heading > p { margin-top: .75rem; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-actions-grid { /* Collision: premium-1-22.css controls the mobile grid. */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Collision: premium-1-22.css controls the mobile gap. */ gap: .6rem !important; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action, .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action:first-child { grid-template-columns: 1fr; align-content: start; gap: .7rem; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action:first-child { /* Collision: premium-1-22.css spans the first mobile card. */ grid-column: auto !important; } .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-action small { display: -webkit-box; overflow: hidden; font-size: .66rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .rbsv-civic-premium .rbsv-home-today-grid { grid-template-columns: 1fr; } .rbsv-civic-premium .rbsv-home-news-card { grid-template-columns: 5.25rem minmax(0, 1fr); } .rbsv-civic-premium .rbsv-home-news-copy em { display: none; } .rbsv-civic-premium .rbsv-home-civic-actions { grid-template-columns: 1fr; } .rbsv-civic-premium .rbsv-home-civic-actions a { grid-template-columns: minmax(0, 1fr) 2.75rem; grid-template-rows: auto auto; min-height: 6.75rem; } .rbsv-civic-premium .rbsv-home-civic-actions a b { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .rbsv-civic-premium .rbsv-home-community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .rbsv-civic-premium .rbsv-home-community-grid > a.is-large { grid-column: 1 / -1; } .rbsv-civic-premium .rbsv-home-community-grid > a:not(.is-large) p { /* Collision: premium-1-22.css hides all utility supporting copy. */ display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .rbsv-app:has(> .rbsv-main .rbsv-civic-premium) .rbsv-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px) + 1.25rem); } .rbsv-mobile-dock { position: fixed; z-index: 100000; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--rbsv-civic-dock-height) + var(--rbsv-civic-safe-bottom)); padding: .25rem max(.4rem, env(safe-area-inset-right)) var(--rbsv-civic-safe-bottom) max(.4rem, env(safe-area-inset-left)); border-top: 1px solid rgb(255 255 255 / .16); background: var(--rbsv-civic-shared-navy); box-shadow: 0 -8px 24px rgb(7 30 61 / .16); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .rbsv-mobile-dock > a { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .15rem; min-width: 2.75rem; min-height: 2.75rem; border-radius: .625rem; color: #DCE6F2; font-size: .62rem; font-weight: 700; text-decoration: none; } .rbsv-mobile-dock > a:hover, .rbsv-mobile-dock > a.is-active, .rbsv-mobile-dock > a[aria-current="page"] { background: rgb(255 255 255 / .1); color: #FFFFFF; } .rbsv-mobile-dock > a :where(svg, i) { width: 1.25rem; height: 1.25rem; } .rbsv-mobile-dock > a svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rbsv-mobile-dock .rbsv-mobile-dock-search i { display: grid; place-items: center; border-radius: 50%; background: transparent; } .rbsv-mobile-alert-badge { position: absolute; inset-block-start: .15rem; inset-inline-start: calc(50% + .35rem); display: grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding-inline: .2rem; border: 2px solid var(--rbsv-civic-shared-navy); border-radius: 1rem; background: #C53D44; color: #FFFFFF; font-size: .55rem; } .rbsv-civic-sheet-backdrop, .rbsv-civic-sheet { display: block; } .rbsv-civic-sheet-backdrop[hidden], .rbsv-civic-sheet[hidden] { display: none; } .rbsv-accessibility { inset-inline-start: var(--rbsv-civic-floating-gap); left: auto; bottom: calc(var(--rbsv-civic-dock-height) + var(--rbsv-civic-safe-bottom) + var(--rbsv-civic-floating-gap)); } .rbsv-accessibility > :first-child { width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; border-radius: 50%; } .rbsv-accessibility > :first-child b { display: none; } .rbsv-accessibility > div { inset-inline-start: 0; left: auto; bottom: 3.25rem; } .rbsv-assistant { position: fixed; z-index: 100020; inset-inline-end: var(--rbsv-civic-floating-gap); bottom: calc(var(--rbsv-civic-dock-height) + var(--rbsv-civic-safe-bottom) + var(--rbsv-civic-floating-gap)); } .rbsv-assistant .rbsv-assistant-toggle { padding: 0; /* Collision: premium-1-22.css fixes chatbot control size. */ width: 2.75rem !important; /* Collision: premium-1-22.css fixes chatbot control size. */ height: 2.75rem !important; /* Collision: premium-1-22.css fixes chatbot control size. */ min-width: 2.75rem !important; border-radius: 50%; } .rbsv-assistant .rbsv-assistant-toggle > span:last-child { display: none; } .rbsv-assistant .rbsv-assistant-panel { inset-inline-end: 0; bottom: 3.25rem; max-width: calc(100vw - 1.5rem); max-height: min(68dvh, 32rem); } } @media (max-width: 47.5rem) { .rbsv-civic-premium .rbsv-civic-essentials .rbsv-home-actions-grid .rbsv-home-action:first-child > b { /* Collision: premium-1-22.css forces the first 760px action cue to 40px wide. */ width: 2.75rem !important; /* Collision: premium-1-22.css forces the first 760px action cue to 40px tall. */ height: 2.75rem !important; min-width: 2.75rem; min-height: 2.75rem; } } @media (max-width: 24.375rem) { .rbsv-civic-premium .rbsv-smart-search .rbsv-search-clear span { font-size: .66rem; } .rbsv-civic-premium .rbsv-smart-search > button[type="submit"] { /* Collision: premium-1-22.css turns the 390px submit into an icon. */ min-width: 4.5rem !important; /* Collision: premium-1-22.css removes the 390px submit padding. */ padding-inline: .6rem !important; } .rbsv-civic-premium .rbsv-smart-search > button[type="submit"] span { /* Collision: premium-1-22.css hides the 390px submit label. */ position: static !important; /* Collision: premium-1-22.css hides the 390px submit label. */ width: auto !important; /* Collision: premium-1-22.css hides the 390px submit label. */ height: auto !important; /* Collision: premium-1-22.css hides the 390px submit label. */ overflow: visible !important; /* Collision: premium-1-22.css hides the 390px submit label. */ clip: auto !important; } .rbsv-civic-premium .rbsv-smart-search > button[type="submit"] b { display: none; } .rbsv-civic-premium :where(.rbsv-home-primary-button, .rbsv-home-secondary-button) { flex: 1 1 auto; padding-inline: .65rem; font-size: .7rem; } .rbsv-civic-premium .rbsv-home-news-card { grid-template-columns: 4.6rem minmax(0, 1fr); } .rbsv-mobile-dock > a { font-size: .58rem; } } /* * Civic Premium 1.26.1 runtime compatibility guards. * * The live layered Elementor homepage can retain an earlier generated widget * fragment until Elementor's element cache is cleared. These selectors cover * both the canonical 1.26 markup and that established fragment without * changing content, routes, or interaction semantics. */ .rbsv-civic-premium .rbsv-home-slider-nav { left: 50% !important; right: auto !important; width: max-content !important; max-width: calc(100% - 1.5rem); transform: translateX(-50%) !important; } .rbsv-civic-premium .rbsv-home-command-search { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; } .rbsv-civic-premium .rbsv-home-command-intro { display: none !important; } body.home .rbsv-civic-premium .rbsv-home-command-search > .rbsv-home-command-intro { display: none !important; } .rbsv-civic-premium .rbsv-home-command-search > form.rbsv-smart-search, .rbsv-civic-search-sheet form.rbsv-smart-search { grid-column: 1; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto !important; width: 100% !important; } .rbsv-smart-search [data-rbsv-search-clear][hidden] { display: none !important; } .rbsv-civic-premium .rbsv-civic-municipality .rbsv-muni-compact > span { color: #FFCA52 !important; } .rbsv-civic-premium .rbsv-civic-municipality .rbsv-muni-compact > h2 { color: #FFFFFF !important; } .rbsv-civic-premium .rbsv-civic-municipality .rbsv-muni-compact > p { color: #DCE6F2 !important; } @media (max-width: 52rem) { .rbsv-civic-premium .rbsv-smart-search > button[type="submit"] { grid-column: auto !important; grid-row: 1 !important; margin: .22rem !important; } .rbsv-civic-sheet { inset-block-end: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100dvh - 6rem - env(safe-area-inset-bottom, 0px)) !important; border-radius: 1.25rem !important; } .rbsv-civic-search-sheet .rbsv-smart-search > button[type="submit"] { grid-column: auto !important; grid-row: 1 !important; } #ast-scroll-top { display: none !important; } body.rbsv-sheet-open :where(.rbsv-accessibility, .rbsv-assistant, #ast-scroll-top) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* * Civic Premium 1.26.3 contrast and desktop search corrections. * Collision: legacy dark-card child colors survive on the Civic paper weather surface. */ .rbsv-civic-premium .rbsv-civic-weather > footer > span { background: var(--rbsv-civic-mist) !important; color: var(--rbsv-civic-slate) !important; } .rbsv-civic-premium .rbsv-civic-weather > footer > span > b { color: var(--rbsv-civic-ink) !important; } .rbsv-civic-premium .rbsv-civic-weather > a:last-child { color: var(--rbsv-civic-blue-dark) !important; } .rbsv-civic-premium .rbsv-civic-weather > div small { white-space: nowrap !important; } .rbsv-civic-premium .rbsv-civic-weather > section strong sup { position: static !important; inset: auto !important; transform: none !important; vertical-align: baseline !important; line-height: 1 !important; } /* Search is the homepage's primary desktop task, so it may use a wider measure than content sections. */ @media (min-width: 75rem) { .rbsv-civic-premium .rbsv-home-command-wrap.rbsv-civic-search { --rbsv-civic-page-max: 86rem; width: 100%; max-width: 90rem !important; margin-inline: auto !important; padding-inline: 1rem !important; } } @media (prefers-reduced-motion: reduce) { .rbsv-civic-premium, .rbsv-civic-premium *, .rbsv-civic-premium *::before, .rbsv-civic-premium *::after, .rbsv-mobile-dock *, .rbsv-civic-sheet, .rbsv-civic-sheet *, .rbsv-civic-sheet-backdrop, .rbsv-assistant *, .rbsv-accessibility * { animation-duration: .01ms; animation-iteration-count: 1; scroll-behavior: auto; transition-duration: .01ms; } } /* * Municipal Services refresh 1.26.4 * * This page is a resident service desk, not a marketing page. The hierarchy * therefore brings request tracking forward, makes the four actions easier to * scan, and keeps the three-step process visible without adding new routes or * changing the established request forms. */ .rbsv-municipal-hub { --rbsv-municipal-ink: #071e3d; --rbsv-municipal-blue: #1269d3; --rbsv-municipal-sky: #eaf3ff; --rbsv-municipal-line: #d9e6f5; gap: 1.125rem; } .rbsv-municipal-hub > header { position: relative; overflow: hidden; grid-template-columns: minmax(0, 1.35fr) minmax(18.5rem, .8fr); gap: clamp(1.25rem, 4vw, 4rem); padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgb(174 210 250 / .38); border-radius: 1.75rem; background: linear-gradient(115deg, rgb(7 30 61 / .96), rgb(10 62 126 / .94)), linear-gradient(140deg, #071e3d, #1269d3); box-shadow: 0 1.25rem 3.5rem rgb(7 30 61 / .18); } .rbsv-municipal-hub > header::before { position: absolute; inset: auto -3rem -6rem auto; width: 18rem; height: 18rem; border: 1px solid rgb(255 255 255 / .14); border-radius: 50%; box-shadow: 0 0 0 2.75rem rgb(255 255 255 / .04), 0 0 0 5.5rem rgb(255 255 255 / .025); content: ''; } .rbsv-municipal-hub > header > div, .rbsv-municipal-hub > header > aside { position: relative; z-index: 1; } .rbsv-municipal-hub > header > div > span { display: inline-flex; align-items: center; gap: .5rem; color: #b9d7ff !important; font-size: .68rem; letter-spacing: .13em; } .rbsv-municipal-hub > header > div > span::before { width: .5rem; height: .5rem; border-radius: 50%; background: #ffca52; box-shadow: 0 0 0 .28rem rgb(255 202 82 / .16); content: ''; } .rbsv-municipal-hub > header h2 { max-width: 11ch; margin: .65rem 0 .85rem; font-size: clamp(2rem, 4.2vw, 3.65rem); line-height: 1.04; letter-spacing: -.045em; } .rbsv-municipal-hub > header p { max-width: 37rem; color: #d9e8fa !important; font-size: clamp(.92rem, 1.35vw, 1.05rem); line-height: 1.7; } .rbsv-municipal-hub > header aside { align-self: stretch; align-content: center; gap: .65rem .75rem; padding: 1rem; border-color: rgb(255 255 255 / .18); border-radius: 1.25rem; background: rgb(255 255 255 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); backdrop-filter: blur(14px); } .rbsv-municipal-hub > header aside b { width: 2rem; height: 2rem; border: 1px solid rgb(255 255 255 / .18); background: #ffffff; color: var(--rbsv-municipal-blue); font-size: .72rem; box-shadow: 0 .4rem .9rem rgb(0 12 32 / .12); } .rbsv-municipal-hub > header aside span { padding-inline-end: .2rem; color: #ffffff; font-size: .8rem; font-weight: 750; } .rbsv-municipal-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } .rbsv-municipal-service-grid > a { position: relative; min-height: 9.5rem; grid-template-columns: 3.5rem minmax(0, 1fr) 2rem; gap: 1rem; padding: clamp(1rem, 2.25vw, 1.45rem); border-color: var(--rbsv-municipal-line); border-radius: 1.35rem; background: #ffffff; box-shadow: 0 .75rem 2rem rgb(15 52 95 / .07); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; } .rbsv-municipal-service-grid > a:hover { transform: translateY(-.2rem); border-color: #9fc9f5; box-shadow: 0 1.25rem 2.6rem rgb(15 52 95 / .12); } .rbsv-municipal-service-grid > a:focus-visible { outline: .2rem solid #ffca52; outline-offset: .2rem; } .rbsv-municipal-service-grid i { width: 3.5rem; height: 3.5rem; border: 1px solid #d9e9fb; border-radius: 1rem; background: var(--rbsv-municipal-sky); color: var(--rbsv-municipal-blue); } .rbsv-municipal-service-grid small { color: #4879ac; font-size: .62rem; letter-spacing: .105em; } .rbsv-municipal-service-grid strong { margin-top: .35rem; color: var(--rbsv-municipal-ink); font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.2; } .rbsv-municipal-service-grid p { margin-top: .45rem; color: #5e7691; font-size: .82rem; line-height: 1.45; } .rbsv-municipal-service-grid > a > b { display: grid; width: 2rem; height: 2rem; place-items: center; align-self: center; border: 1px solid #dce8f6; border-radius: 50%; color: var(--rbsv-municipal-blue) !important; font-size: 1rem; } /* Tracking is the returning resident's primary task, so it leads the grid. */ .rbsv-municipal-service-grid > a:nth-child(4) { order: -1; grid-column: 1 / -1; min-height: 8.6rem; grid-template-columns: 3.8rem minmax(0, 1fr) 2.5rem; border-color: #0c4d9b; background: linear-gradient(112deg, #071e3d, #0b4f9e); box-shadow: 0 1rem 2.5rem rgb(7 30 61 / .18); } .rbsv-municipal-service-grid > a:nth-child(4) i { width: 3.8rem; height: 3.8rem; border-color: rgb(255 255 255 / .18); background: rgb(255 255 255 / .12); color: #ffffff; } .rbsv-municipal-service-grid > a:nth-child(4) small { color: #b9d7ff; } .rbsv-municipal-service-grid > a:nth-child(4) strong { color: #ffffff; } .rbsv-municipal-service-grid > a:nth-child(4) p { max-width: 38rem; color: #d7e7fb; } .rbsv-municipal-service-grid > a:nth-child(4) > b { width: 2.5rem; height: 2.5rem; border-color: rgb(255 255 255 / .2); background: #ffffff; color: #0b4f9e !important; } @media (max-width: 48rem) { .rbsv-municipal-hub { gap: .85rem; } .rbsv-municipal-hub > header { grid-template-columns: 1fr; gap: 1.15rem; padding: 1.35rem 1.1rem; border-radius: 1.35rem; } .rbsv-municipal-hub > header::before { inset: auto -4.5rem -8rem auto; } .rbsv-municipal-hub > header h2 { max-width: 13ch; font-size: clamp(1.8rem, 9.4vw, 2.45rem); } .rbsv-municipal-hub > header p { font-size: .87rem; line-height: 1.6; } .rbsv-municipal-hub > header aside { gap: .55rem .65rem; padding: .8rem; border-radius: 1rem; } .rbsv-municipal-hub > header aside b { width: 1.8rem; height: 1.8rem; font-size: .65rem; } .rbsv-municipal-hub > header aside span { font-size: .72rem; } .rbsv-municipal-service-grid { grid-template-columns: 1fr; gap: .65rem; } .rbsv-municipal-service-grid > a, .rbsv-municipal-service-grid > a:nth-child(4) { min-height: 0; grid-column: auto; grid-template-columns: 3rem minmax(0, 1fr) 2rem; gap: .8rem; padding: 1rem; border-radius: 1.1rem; } .rbsv-municipal-service-grid i, .rbsv-municipal-service-grid > a:nth-child(4) i { width: 3rem; height: 3rem; border-radius: .85rem; } .rbsv-municipal-service-grid strong { font-size: 1rem; } .rbsv-municipal-service-grid p { font-size: .74rem; } .rbsv-municipal-service-grid > a:nth-child(4) > b { width: 2rem; height: 2rem; } } /* * Municipal Services UX refinement 1.26.5 * * The municipality page is treated as a working service desk. The process is * a compact stepper, the available tasks keep their DOM order, and the request * tracker remains visually distinct without disorienting keyboard or screen * reader users. Mobile cards are deliberately denser so the first useful * actions appear above the fold. */ .rbsv-municipal-hub { gap: 1rem; } .rbsv-municipal-hub > header { grid-template-columns: minmax(0, 1.2fr) minmax(22rem, .9fr); gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(2rem, 3.4vw, 2.75rem); border-radius: 1.5rem; background: #071e3d; box-shadow: 0 1.125rem 3rem rgb(7 30 61 / .16); } .rbsv-municipal-hub > header::before { inset: -8rem -5rem auto auto; width: 24rem; height: 24rem; border-color: rgb(113 175 243 / .16); box-shadow: 0 0 0 3rem rgb(18 105 211 / .045), 0 0 0 6rem rgb(18 105 211 / .025); } .rbsv-municipal-hub > header h2 { max-width: 13ch; margin: .55rem 0 .7rem; font-size: clamp(2rem, 3.6vw, 3.15rem); line-height: 1.02; } .rbsv-municipal-hub > header p { max-width: 36rem; font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.62; } /* A three-stage civic process reads faster than the former vertical list. */ .rbsv-municipal-hub > header aside { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; align-self: center; gap: .6rem .7rem; padding: 1rem .8rem .9rem; border-radius: 1.15rem; background: rgb(255 255 255 / .075); backdrop-filter: none; } .rbsv-municipal-hub > header aside::before { position: absolute; top: 2rem; inset-inline: 17%; height: 1px; background: rgb(185 215 255 / .24); content: ''; } .rbsv-municipal-hub > header aside b { position: relative; z-index: 1; grid-row: 1; justify-self: center; width: 2.1rem; height: 2.1rem; } .rbsv-municipal-hub > header aside b:nth-of-type(1), .rbsv-municipal-hub > header aside span:nth-of-type(1) { grid-column: 1; } .rbsv-municipal-hub > header aside b:nth-of-type(2), .rbsv-municipal-hub > header aside span:nth-of-type(2) { grid-column: 2; } .rbsv-municipal-hub > header aside b:nth-of-type(3), .rbsv-municipal-hub > header aside span:nth-of-type(3) { grid-column: 3; } .rbsv-municipal-hub > header aside span { grid-row: 2; padding: 0 .25rem; text-align: center; font-size: .72rem; line-height: 1.35; } .rbsv-municipal-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .rbsv-municipal-service-grid > a, .rbsv-municipal-service-grid > a:nth-child(4) { order: initial; grid-column: auto; min-height: 10rem; grid-template-columns: 3.35rem minmax(0, 1fr) 2.25rem; gap: .95rem; padding: 1.25rem; border: 1px solid var(--rbsv-municipal-line); border-radius: 1.15rem; background: #ffffff; box-shadow: 0 .5rem 1.5rem rgb(15 52 95 / .055); } .rbsv-municipal-service-grid > a::before { position: absolute; inset-block: 1.1rem; inset-inline-start: 0; width: .2rem; border-radius: 0 .2rem .2rem 0; background: #b8d8fb; content: ''; } .rbsv-municipal-service-grid > a:nth-child(2)::before { background: #ff8c86; } .rbsv-municipal-service-grid > a:nth-child(3)::before { background: #f2bd45; } .rbsv-municipal-service-grid > a:nth-child(4)::before { background: #58a6ff; } .rbsv-municipal-service-grid i, .rbsv-municipal-service-grid > a:nth-child(4) i { width: 3.35rem; height: 3.35rem; border-color: #d9e9fb; border-radius: .9rem; background: var(--rbsv-municipal-sky); color: var(--rbsv-municipal-blue); } .rbsv-municipal-service-grid > a:nth-child(2) i { border-color: #ffe0de; background: #fff1f0; color: #c94740; } .rbsv-municipal-service-grid > a:nth-child(3) i { border-color: #fbe8b8; background: #fff8e8; color: #9a6612; } .rbsv-municipal-service-grid > a:nth-child(4) { border-color: #0d4d96; background: #0a3c78; box-shadow: 0 .85rem 2rem rgb(7 30 61 / .14); } .rbsv-municipal-service-grid > a:nth-child(4) i { border-color: rgb(255 255 255 / .18); background: rgb(255 255 255 / .1); color: #ffffff; } .rbsv-municipal-service-grid > a:nth-child(4) small { color: #b9d7ff; } .rbsv-municipal-service-grid > a:nth-child(4) strong { color: #ffffff; } .rbsv-municipal-service-grid > a:nth-child(4) p { color: #d7e7fb; } .rbsv-municipal-service-grid > a:nth-child(4) > b { width: 2.25rem; height: 2.25rem; border-color: rgb(255 255 255 / .24); background: #ffffff; color: #0b4f9e !important; } .rbsv-municipal-service-grid > a:hover { transform: translateY(-.15rem); border-color: #9fc9f5; box-shadow: 0 1rem 2rem rgb(15 52 95 / .1); } .rbsv-municipal-service-grid > a:nth-child(4):hover { border-color: #2c83e6; background: #0b4386; } .rbsv-municipal-service-grid > a > b { transition: transform .2s ease, background-color .2s ease, color .2s ease; } .rbsv-municipal-service-grid > a:hover > b { transform: translateX(.18rem); } [dir="rtl"] .rbsv-municipal-service-grid > a::before { border-radius: .2rem 0 0 .2rem; } [dir="rtl"] .rbsv-municipal-service-grid > a > b { transform: scaleX(-1); } [dir="rtl"] .rbsv-municipal-service-grid > a:hover > b { transform: translateX(-.18rem) scaleX(-1); } [dir="rtl"] .rbsv-municipal-hub { font-family: "Noto Kufi Arabic", "GE SS Two", Tahoma, Arial, sans-serif; } @media (max-width: 48rem) { .rbsv-municipal-hub { gap: .7rem; } .rbsv-municipal-hub > header { gap: .9rem; padding: 1.15rem 1rem 1rem; border-radius: 1.15rem; } .rbsv-municipal-hub > header > div > span { font-size: .6rem; } .rbsv-municipal-hub > header h2 { max-width: 15ch; margin: .45rem 0 .55rem; font-size: clamp(1.55rem, 7.4vw, 2rem); line-height: 1.08; } .rbsv-municipal-hub > header p { font-size: .78rem; line-height: 1.5; } .rbsv-municipal-hub > header aside { gap: .45rem .35rem; padding: .65rem .45rem .6rem; border-radius: .9rem; } .rbsv-municipal-hub > header aside::before { top: 1.55rem; } .rbsv-municipal-hub > header aside b { width: 1.75rem; height: 1.75rem; font-size: .6rem; } .rbsv-municipal-hub > header aside span { padding: 0; font-size: .62rem; line-height: 1.35; } .rbsv-municipal-service-grid { gap: .55rem; } .rbsv-municipal-service-grid > a, .rbsv-municipal-service-grid > a:nth-child(4) { min-height: 5.7rem; grid-template-columns: 2.75rem minmax(0, 1fr) 1.9rem; gap: .7rem; padding: .85rem .8rem; border-radius: 1rem; } .rbsv-municipal-service-grid > a::before { inset-block: .85rem; } .rbsv-municipal-service-grid i, .rbsv-municipal-service-grid > a:nth-child(4) i { width: 2.75rem; height: 2.75rem; border-radius: .75rem; } .rbsv-municipal-service-grid small { display: none; } .rbsv-municipal-service-grid strong { margin: 0; font-size: .94rem; } .rbsv-municipal-service-grid p { display: -webkit-box; margin-top: .3rem; overflow: hidden; font-size: .7rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .rbsv-municipal-service-grid > a > b, .rbsv-municipal-service-grid > a:nth-child(4) > b { width: 1.9rem; height: 1.9rem; } }