/* ============================================================================ Charnwood OneVu portal — APAS preview theme ---------------------------------------------------------------------------- Drop-in stylesheet based on the APAS design system, adapted to the OneVu (Bootstrap 3 + Aurelia) citizen portal. • All icons are embedded inline as SVG data-URIs — no external files needed. • Pure CSS. Three enhancements from the live preview need markup/JS and are noted in the "NEEDS MARKUP / JS" section at the bottom of this file. Colours use the Charnwood brand green (#59AF33). Where white text sat on that green and failed WCAG contrast, a slightly darker green (#52a12f) or dark text is used so it passes AA. ============================================================================ */ /* ---------------------------------------------------------------- 1. TOKENS */ :root{ --apas-bg:#f3f3f5; --apas-surface:#ffffff; --apas-surface-2:#fafafb; --apas-ink:#111114; --apas-ink-2:#3a3a42; --apas-muted:#8a8a94; --apas-line:#e7e7eb; --apas-line-2:#efeff2; --apas-accent:#111114; --apas-accent-soft:#1e1e24; --apas-on-accent:#ffffff; --apas-green:#59af33; --apas-green-accessible:#52a12f; --apas-green-tint:rgba(89,175,51,.25); --apas-pill-green-bg:#b6f0c2; --apas-pill-green-ink:#0c5b29; --apas-pill-amber-bg:#ffd591; --apas-pill-amber-ink:#6b3d00; --apas-pill-blue-bg:#cfe2ff; --apas-pill-blue-ink:#0d3b86; --apas-pill-pink-bg:#ffd1e0; --apas-pill-pink-ink:#7a1c44; --apas-status-danger:#c0392b; --apas-font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --apas-radius-sm:8px; --apas-radius-md:10px; --apas-radius-lg:12px; --apas-radius-xl:14px; --apas-radius-2xl:20px; --apas-radius-full:999px; --apas-shadow-sm:0 1px 2px rgba(17,17,20,.04); --apas-shadow-md:0 4px 16px rgba(17,17,20,.06); --apas-shadow-lg:0 12px 32px rgba(17,17,20,.10); --apas-ease:cubic-bezier(.4,0,.2,1); } /* Load Inter (or self-host and remove this import) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ------------------------------------------------------------ 2. BASE/TYPE */ body{background:var(--apas-bg)!important;color:var(--apas-ink)!important;-webkit-font-smoothing:antialiased;} body,body button,body input,body select,body textarea,.navbar,h1,h2,h3,h4,h5,.btn{font-family:var(--apas-font-family)!important;} h1,h2,h3,h4{color:var(--apas-ink)!important;font-weight:700!important;letter-spacing:-.02em;} a{color:var(--apas-ink-2);} a:hover{color:var(--apas-ink);} /* --------------------------------------------------------- 3. HEADER/LOGO */ /* #onevu-custom-banner actually lives INSIDE #top-banner in the live markup (not as a sibling after it, as originally assumed) — it's the header's second flex child. Switching the header to a column flex stacks the logo row above a full-width banner row, so the banner spans the page width. */ #top-banner{height:auto!important;min-height:110px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;padding:0!important;background:var(--apas-surface)!important;border-bottom:0!important;overflow:visible!important;position:relative!important;} #top-banner img.logo{align-self:center!important;max-height:103px!important;width:auto!important;height:auto!important;margin:3.5px auto!important;display:block!important;} /* --------------------------------------------------------- 4. WARNING BAR */ /* "Phones are down" banner and its icon -- hidden entirely per request. */ #onevu-custom-banner{display:none!important;} /* ------------------------------------------------------ 5. PAGE-TITLE BAND */ .page-header{background:linear-gradient(90deg,#5ab031,#0072ab)!important;border-bottom:1px solid var(--apas-line)!important;width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:20px 45px 20px 81px!important;} .page-header,.page-header *{color:#000!important;} /* --------------------------------------------------------------- 6. TOP NAV */ .navbar-default.menu{background:var(--apas-accent)!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin-bottom:0!important;} .navbar-default.menu .nav>li>a{color:rgba(255,255,255,.72)!important;font-weight:600!important;font-size:14px!important;background:transparent!important;border:0!important;margin:8px 2px!important;padding:8px 14px!important;border-radius:var(--apas-radius-lg)!important;outline:none!important;transition:background .15s,color .15s;} .navbar-default.menu .nav>li>a:hover{background:rgba(255,255,255,.10)!important;color:#fff!important;} .navbar-default.menu .nav>li>a:focus{background:transparent!important;color:rgba(255,255,255,.72)!important;outline:none!important;} .navbar-default.menu .nav>li.active>a,.navbar-default.menu .nav>li.active>a:hover,.navbar-default.menu .nav>li.active>a:focus{background:#fff!important;color:var(--apas-ink)!important;} .navbar-default.menu .navbar-toggle{border-radius:var(--apas-radius-md)!important;border-color:rgba(255,255,255,.3)!important;} .navbar-default.menu .navbar-toggle .icon-bar{background:#fff!important;} /* --------------------------------------------------------------- 7. BUTTONS */ .btn{display:inline-flex!important;align-items:center;gap:8px;min-height:40px;padding:0 16px!important;border-radius:var(--apas-radius-lg)!important;border:1px solid var(--apas-line)!important;background:var(--apas-surface)!important;color:var(--apas-ink)!important;font-weight:600!important;box-shadow:none!important;text-shadow:none!important;transition:background .15s,border-color .15s;} .btn:hover,.btn:focus{background:var(--apas-line-2)!important;color:var(--apas-ink)!important;outline:none!important;} .btn-primary,.btn-success{background:var(--apas-accent)!important;border-color:var(--apas-accent)!important;color:var(--apas-on-accent)!important;} .btn-primary:hover,.btn-success:hover{background:var(--apas-accent-soft)!important;border-color:var(--apas-accent-soft)!important;} .btn-danger{background:var(--apas-status-danger)!important;border-color:var(--apas-status-danger)!important;color:#fff!important;} .btn-xs,.btn-sm{min-height:32px!important;padding:0 12px!important;border-radius:var(--apas-radius-md)!important;} /* bare Aurelia buttons that aren't Bootstrap .btn */ /* NOTE: this catch-all's :not() exclusions each add a class's worth of specificity (0,0,6,1) -- higher than the more "targeted-looking" .silo-detail-alt .silo-accordian-header rule below it (0,0,2,0). It was silently winning the cascade for every property they both set (display, gap, padding, border...), including the border this button was never supposed to have. .silo-accordian-header needs excluding here, same as .btn/.thumbnail/etc., for its own rule to have any effect at all. */ button.au-target:not(.btn):not(.thumbnail):not(.navbar-toggle):not(.close):not(.addFavourite):not(.favourite):not(.silo-accordian-header){display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:0 16px!important;border-radius:var(--apas-radius-lg)!important;border:1px solid var(--apas-line)!important;background:var(--apas-surface)!important;color:var(--apas-ink)!important;font-weight:600!important;font-size:14px!important;cursor:pointer!important;box-shadow:none!important;} /* ------------------------------------------------------------- 8. NAV-PILLS */ .nav-pills{display:inline-flex!important;flex-wrap:wrap!important;gap:8px!important;padding:0!important;margin:0 0 16px!important;list-style:none!important;} .nav-pills>li{float:none!important;margin:0!important;} .nav-pills>li>a{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:0 16px!important;margin:0!important;border-radius:var(--apas-radius-lg)!important;border:1px solid var(--apas-line)!important;background:var(--apas-surface)!important;color:var(--apas-ink)!important;font-weight:600!important;font-size:14px!important;text-decoration:none!important;} .nav-pills>li>a:hover{background:var(--apas-line-2)!important;color:var(--apas-ink)!important;} .nav-pills>li.active>a,.nav-pills>li.active>a:hover{background:var(--apas-accent)!important;border-color:var(--apas-accent)!important;color:var(--apas-on-accent)!important;} /* ------------------------------------------ 9. FORMS / TABLES / LABELS / ALERTS */ .form-control{background:var(--apas-surface-2)!important;border:1px solid var(--apas-line)!important;border-radius:var(--apas-radius-md)!important;color:var(--apas-ink)!important;box-shadow:none!important;height:auto!important;padding:10px 12px!important;} .form-control:focus{background:var(--apas-surface)!important;border-color:var(--apas-ink)!important;box-shadow:none!important;} label,.control-label{font-weight:600!important;color:var(--apas-ink-2)!important;} .table{background:var(--apas-surface)!important;} .table>thead>tr>th{border-bottom:1px solid var(--apas-line)!important;color:var(--apas-muted)!important;text-transform:uppercase;font-size:11px;letter-spacing:.06em;font-weight:600!important;} .table>tbody>tr>td{border-top:1px solid var(--apas-line-2)!important;} .table-hover>tbody>tr:hover{background:var(--apas-surface-2)!important;} .label,.badge{border-radius:var(--apas-radius-full)!important;font-weight:600!important;font-size:11px!important;padding:4px 10px!important;} .label-success{background:var(--apas-pill-green-bg)!important;color:var(--apas-pill-green-ink)!important;} .label-warning{background:var(--apas-pill-amber-bg)!important;color:var(--apas-pill-amber-ink)!important;} .label-info{background:var(--apas-pill-blue-bg)!important;color:var(--apas-pill-blue-ink)!important;} .label-danger{background:var(--apas-pill-pink-bg)!important;color:var(--apas-pill-pink-ink)!important;} .alert{border-radius:var(--apas-radius-xl)!important;border:1px solid var(--apas-line)!important;} .alert-info{background:var(--apas-pill-blue-bg)!important;border-color:transparent!important;color:var(--apas-pill-blue-ink)!important;} .alert-success{background:var(--apas-pill-green-bg)!important;border-color:transparent!important;color:var(--apas-pill-green-ink)!important;} .alert-warning{background:var(--apas-green-tint)!important;border-color:transparent!important;color:var(--apas-ink)!important;} .alert-danger{background:var(--apas-pill-pink-bg)!important;border-color:transparent!important;color:var(--apas-pill-pink-ink)!important;} /* -------------------------------------------------- 10. CARDS / SERVICE TILES */ .panel,.thumbnail,.well{background:var(--apas-surface)!important;border:1px solid var(--apas-line)!important;border-radius:var(--apas-radius-2xl)!important;box-shadow:var(--apas-shadow-sm)!important;} .panel-heading{background:transparent!important;border-bottom:1px solid var(--apas-line-2)!important;font-weight:700!important;border-radius:var(--apas-radius-2xl) var(--apas-radius-2xl) 0 0!important;padding:16px 20px!important;} .panel-body{padding:20px!important;} .thumbnail.silo-list,button.thumbnail{padding:20px!important;text-align:left!important;transition:box-shadow .18s,transform .18s,border-color .18s;} .thumbnail.silo-list:hover,button.thumbnail:hover{box-shadow:0 0 0 2px #3b7531,0 8px 20px rgba(0,0,0,.18)!important;transform:translateY(-2px);border-color:#3b7531!important;} .thumbnail.silo-header{padding-top:20px!important;} /* remove the blank double-chevron column */ .thumbnail .details-link{display:none!important;} /* --------------------------------------------------- 11. SERVICE CARD ICONS */ /* Positioned icon slot on each service tile (bottom-right). */ .thumbnail.silo-list{position:relative!important;} .thumbnail.silo-list::after{content:'';position:absolute;right:24px;top:20px;width:66px;height:58px;background:center/contain no-repeat;pointer-events:none;} /* Robust method: add ONE of these classes to each service tile's element. */ .apas-svc--housing::after {background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} .apas-svc--tenancy::after {background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} .apas-svc--waste::after {background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} .apas-svc--street::after {background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} .apas-svc--council::after {background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} .apas-svc--benefits::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} .apas-svc--businessrates::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* Fallback for the fixed 6-service grid, keyed by POSITION FROM THE END of the tile list (nth-last-child) rather than from the start. Two bugs fixed here: 1. ".silo-default" is a class ON each tile itself, not an ancestor of ".row" -- the old ".silo-default .row > ..." selector never matched anything, which is why icons never rendered at all. 2. The page also has an OUTER single-column layout row/col wrapper (plain ".row" > ".col-md-12") around the entire page content, which a bare ".row > [class*="col-"]" selector also matches -- and since that wrapper is the same for every tile, it made every single tile resolve to the SAME nth-last-child(1) rule regardless of its real position. Scoping to ".row.au-target" (the actual card-grid row, which carries an extra Aurelia binding class the page wrapper lacks) makes the selector match only the intended grid. Caveat: this still assumes the 6 default services always render as a fixed-order tail after any personalised "Add to My Account" shortcuts (confirmed on myaccount-test.charnwood.gov.uk). If a resident's set of services differs from these 6, or the site ever changes their relative order, icons will misalign. The robust fix is the .apas-svc--* classes above, but nothing in the current markup adds those classes to a tile. Remove this whole block if that gets addressed. */ .row.au-target > [class*="col-"]:nth-last-child(6) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* My Council Tax */ .row.au-target > [class*="col-"]:nth-last-child(5) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* My Benefits */ .row.au-target > [class*="col-"]:nth-last-child(4) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* My Tenancy */ .row.au-target > [class*="col-"]:nth-last-child(3) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* Waste and Recycling */ .row.au-target > [class*="col-"]:nth-last-child(2) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* Housing Advice */ .row.au-target > [class*="col-"]:nth-last-child(1) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* Street Management */ /* -------------------------------- 11b. "ADD TO MY ACCOUNT" SHORTCUT ICONS */ /* Icons for the personalised shortcut tiles (Benefit claims, Council Tax, Business Rates), keyed by POSITION FROM THE START since these are always prepended before the fixed 6-service grid above. Same caveat as the fallback above: if a resident's shortcuts differ in count or order from what was observed on myaccount-test.charnwood.gov.uk, icons will misalign. */ .row.au-target > [class*="col-"]:nth-child(1) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* Benefit claims */ .row.au-target > [class*="col-"]:nth-child(2) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* Council Tax */ .row.au-target > [class*="col-"]:nth-child(3) .thumbnail.silo-list::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 73 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M71.6873 36.1453C71.6873 55.6957 55.8059 71.5405 36.2187 71.5405C16.6265 71.5405 0.75 55.6957 0.75 36.1453C0.75 16.5961 16.6265 0.750014 36.2187 0.750014C55.8059 0.750014 71.6873 16.5961 71.6873 36.1453Z' stroke='%23231F20' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M24.3179 18.9626L52.1182 36.1058L24.3179 53.249' stroke='%23231F20' stroke-width='1.56' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");} /* Business Rates */ /* ------------------------------------------------ 12. DETAIL / FAQ PAGES */ .silo-detail-alt .faq-nav-list ol{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:14px!important;} /* Scoped to DIRECT children of the
    only. A plain descendant selector here previously matched every
  1. anywhere inside a FAQ item's expanded body too -- including unrelated ones like the Account/Contact Info and Bills/Payments .nav-tabs
  2. s -- wrapping them in a second, unwanted white bordered pill around their own black pill. */ .silo-detail-alt .faq-nav-list>ol>li{background:var(--apas-surface)!important;border:1px solid var(--apas-line)!important;border-radius:var(--apas-radius-2xl)!important;padding:6px 6px 4px!important;margin:0!important;list-style:none!important;box-shadow:var(--apas-shadow-sm)!important;overflow:hidden!important;} /* NOTE: the "border" shorthand silently fails to override this