/* City of Horizon — 311 Service Request demo
Primary teal-slate #1B5E6B (dark header/footer, white text 7.3:1)
Accent bright amber #E39A2E (logo sun + header underline; ~5:1 on teal)
(amber-brown #8A5200 is the on-white brand accent; too dark to use on teal)
Header dark teal; white logo + white nav text
Footer white; black text; teal logo */
/* --- Logo: fill the empty picture.logo via CSS background (no upload, no JS).
The colour's "#" is encoded as %23 so url() doesn't break. --- */
.logo-link.logo-no-image,
.logo-link {
pointer-events: auto;
}
/* No underline on the logo link (it's a wordmark, not body text). */
.logo-link,
.logo-link:hover,
.logo-link:focus {
text-decoration: none !important;
}
.logo-link picture.logo {
display: block;
font-size: 0; /* hide the fallback text node */
color: transparent;
width: 400px;
max-width: 100%;
height: 52px;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%278%2018%20372%2048%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23E39A2E%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%3E%3Cline%20x1%3D%2712%27%20y1%3D%2756%27%20x2%3D%2770%27%20y2%3D%2756%27%2F%3E%3Cline%20x1%3D%2741%27%20y1%3D%2724%27%20x2%3D%2741%27%20y2%3D%2731%27%2F%3E%3Cline%20x1%3D%2723%27%20y1%3D%2731%27%20x2%3D%2728%27%20y2%3D%2736%27%2F%3E%3Cline%20x1%3D%2759%27%20y1%3D%2731%27%20x2%3D%2754%27%20y2%3D%2736%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%2747%27%20x2%3D%2721%27%20y2%3D%2747%27%2F%3E%3Cline%20x1%3D%2761%27%20y1%3D%2747%27%20x2%3D%2768%27%20y2%3D%2747%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M26%2056a15%2015%200%200%201%2030%200z%27%20fill%3D%27%23E39A2E%27%2F%3E%3Ctext%20x%3D%2786%27%20y%3D%2742%27%20font-family%3D%27system-ui%2C-apple-system%2CSegoe%20UI%2CRoboto%2CHelvetica%2CArial%2Csans-serif%27%20font-size%3D%2734%27%20dominant-baseline%3D%27central%27%20fill%3D%27%23ffffff%27%3E%3Ctspan%20font-weight%3D%27400%27%20fill-opacity%3D%270.85%27%3ECity%20of%20%3C%2Ftspan%3E%3Ctspan%20font-weight%3D%27700%27%3EHorizon%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E") left center / contain no-repeat;
}
.site-header .identity__logo,
.site-footer .identity__logo {
height: 50px;
width: 150px;
}
/* Dark teal header with a bright-amber accent underline (matches the logo sun). */
header.global-header,
header.global-header .nav {
background-color: #1B5E6B !important;
}
header.global-header {
border-bottom: 3px solid #E39A2E !important;
}
/* Desktop (>= 70em): nav list always inline. */
@media screen and (min-width: 70em) {
.global-header [data-component="nav-double-intro"] {
display: flex !important;
}
}
/* Mobile + tablet (< 70em): hide the nav list until the Menu toggle is pressed. */
@media screen and (max-width: 69.9375em) {
#global-nav [data-component="nav-double-intro"] {
display: none !important;
}
#global-nav [data-trigger="mobile-nav"][aria-expanded="true"] ~ [data-component="nav-double-intro"] {
display: flex !important;
}
}
/* Origin paints these from the global --color-brand token (navy). This demo has
its own palette and we can't rescope the token, so recolour the brand-token
components directly (!important wins regardless of theme mode). */
/* Nav bar + nav links sit on the teal header — let it show through. */
.global-header > .nav .global-nav__inner > ul,
.global-header .global-nav__inner .top-nav-item .nav-link {
background-color: transparent !important;
}
/* Footer social-icon tiles: white background with a teal icon (not the navy
brand-token tile). */
.global-footer .with-icon--larger,
.nav--social-links .with-icon--larger,
.nav--social-links .with-icon--larger:visited {
background-color: #ffffff !important;
color: #1B5E6B !important;
}
/* Buttons: the brand token would make them navy. Use a neutral dark grey
(#4A4A4A, ~8.9:1 on white) — reads cleanly against the teal/amber palette. */
.button,
input[type=submit].button {
border-color: #4A4A4A !important;
color: #4A4A4A !important;
}
.button:hover, .button:active,
input[type=submit].button:hover, input[type=submit].button:active {
background-color: #4A4A4A !important;
color: #ffffff !important;
}
/* Hide Search: list item, toggle, and field panel (separate rules). */
.global-header .clean-list .top-nav-item:first-child {
display: none !important;
}
.global-header [data-search-toggle] {
display: none !important;
}
.global-header .top-nav-search {
display: none !important;
}
/* Sign in sits in the last nav . Hide it at base level the same way
Search's is hidden (which works at every width), then show it on
desktop and reveal it below desktop when the Menu toggle is open. */
.global-header .clean-list .top-nav-item:last-child {
display: none !important;
}
@media screen and (min-width: 70em) {
.global-header .clean-list .top-nav-item:last-child {
display: block !important;
}
}
#global-nav [data-trigger="mobile-nav"][aria-expanded="true"] ~ [data-component="nav-double-intro"] .top-nav-item:last-child {
display: block !important;
}
/* Sign in: white on the teal header. */
.global-header .account-login {
color: #ffffff !important;
background-color: transparent !important;
}
@media screen and (min-width: 70em) {
.global-header .account-login {
display: inline-flex !important;
}
}
.global-header .account-login:hover {
color: #ffffff !important;
background-color: transparent !important;
}
.global-header .account-login:focus-visible,
.global-header .account-login:focus {
color: #ffffff !important;
background-color: transparent !important;
outline: 3px solid #ffffff;
outline-offset: 3px;
}
/* White footer, black text, teal logo. */
.global-footer {
background-color: #ffffff;
color: #000000;
}
/* Footer logo: teal version (the header's white-on-teal mark would vanish here). */
.global-footer .logo-link picture.logo,
.site-footer .logo-link picture.logo {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%278%2018%20372%2048%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%231B5E6B%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%3E%3Cline%20x1%3D%2712%27%20y1%3D%2756%27%20x2%3D%2770%27%20y2%3D%2756%27%2F%3E%3Cline%20x1%3D%2741%27%20y1%3D%2724%27%20x2%3D%2741%27%20y2%3D%2731%27%2F%3E%3Cline%20x1%3D%2723%27%20y1%3D%2731%27%20x2%3D%2728%27%20y2%3D%2736%27%2F%3E%3Cline%20x1%3D%2759%27%20y1%3D%2731%27%20x2%3D%2754%27%20y2%3D%2736%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%2747%27%20x2%3D%2721%27%20y2%3D%2747%27%2F%3E%3Cline%20x1%3D%2761%27%20y1%3D%2747%27%20x2%3D%2768%27%20y2%3D%2747%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M26%2056a15%2015%200%200%201%2030%200z%27%20fill%3D%27%231B5E6B%27%2F%3E%3Ctext%20x%3D%2786%27%20y%3D%2742%27%20font-family%3D%27system-ui%2C-apple-system%2CSegoe%20UI%2CRoboto%2CHelvetica%2CArial%2Csans-serif%27%20font-size%3D%2734%27%20dominant-baseline%3D%27central%27%20fill%3D%27%231B5E6B%27%3E%3Ctspan%20font-weight%3D%27400%27%20fill-opacity%3D%270.85%27%3ECity%20of%20%3C%2Ftspan%3E%3Ctspan%20font-weight%3D%27700%27%3EHorizon%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E") left center / contain no-repeat;
}
/* Footer social icons + links (e.g. "Powered by Jadu") → teal on the white footer. */
.global-footer a {
color: #1B5E6B !important;
}
.global-footer .icon {
fill: #1B5E6B !important;
}
/* Menu toggle: white on the teal header (icon follows via currentColor).
The button is hidden on desktop, so this is a no-op there. */
#global-nav [data-trigger="mobile-nav"],
#global-nav [data-trigger="mobile-nav"]:hover,
#global-nav [data-trigger="mobile-nav"]:focus {
color: #ffffff !important;
}
/* Demo callout: slim strip at the very top of the screen, above the header.
Attached to html::before so it sits above without touching the header's
padding or the body grid. Consistent neutral colour across demos; name differs. */
html::before {
content: 'You are now viewing the Jadu "311 - Service Requests" demo site.';
display: block;
background-color: #F0F0F0;
border-bottom: 1px solid #000000;
color: #444444;
/* html doesn't inherit the theme font (Origin sets it on body), so set it here. */
font-family: "Arial MT Rounded Bold", Arial, sans-serif;
font-size: 0.75rem;
font-weight: 600;
padding: 0.4rem 1.25rem;
}