/** * Novarius Smart City Portal 0.9.4.3.1 — Civic Aurora Desktop / Surface Modes * * A desktop-only presentation layer built on the verified 0.9.0 runtime. * It deliberately does not own markup, data, capabilities or interaction. * The file is enqueued with media="(min-width: 1181px)" and repeats that * boundary below as a second guard protecting the accepted mobile/tablet UI. */ @media (min-width: 1181px) { /* --------------------------------------------------------------------- Aurora palette. Existing appearance choices remain the source of truth; each choice now drives a complete three-colour desktop atmosphere. --------------------------------------------------------------------- */ :root { --nv-aurora-primary: #1769aa; --nv-aurora-secondary: #2d73b9; --nv-aurora-tertiary: #77a9d7; --nv-aurora-deep: #163a5f; --nv-aurora-soft: #eaf2fb; --nv-aurora-rgb: 23, 105, 170; } /* Bursztyn pozostaje opcjonalnym wyborem mieszkańca, nie bazą Light. */ html[data-p7-accent="gold"] { --nv-aurora-primary: #d88a1d; --nv-aurora-secondary: #b86d10; --nv-aurora-tertiary: #efbd6a; --nv-aurora-deep: #8f5410; --nv-aurora-soft: #fff3df; --nv-aurora-rgb: 216, 138, 29; } html[data-p7-accent="navy"] { --nv-aurora-primary: #3a5da8; --nv-aurora-secondary: #24407f; --nv-aurora-tertiary: #7d99d6; --nv-aurora-deep: #1b2f5e; --nv-aurora-soft: #e8edf8; --nv-aurora-rgb: 58, 93, 168; } html[data-p7-accent="emerald"] { --nv-aurora-primary: #3de3bd; --nv-aurora-secondary: #36a9ff; --nv-aurora-tertiary: #8b70ff; --nv-aurora-deep: #078f76; --nv-aurora-soft: #e1faf3; --nv-aurora-rgb: 61, 227, 189; } html[data-p7-accent="teal"] { --nv-aurora-primary: #17b3a3; --nv-aurora-secondary: #0e7f8f; --nv-aurora-tertiary: #6fe3d6; --nv-aurora-deep: #0b6d63; --nv-aurora-soft: #e1f7f3; --nv-aurora-rgb: 23, 179, 163; } html[data-p7-accent="burgundy"] { --nv-aurora-primary: #b3395a; --nv-aurora-secondary: #7a2340; --nv-aurora-tertiary: #d97891; --nv-aurora-deep: #6b1830; --nv-aurora-soft: #fbe4ea; --nv-aurora-rgb: 179, 57, 90; } html[data-p7-accent="plum"] { --nv-aurora-primary: #935bb0; --nv-aurora-secondary: #6b3f8a; --nv-aurora-tertiary: #c39bda; --nv-aurora-deep: #5c3170; --nv-aurora-soft: #f3e7f7; --nv-aurora-rgb: 147, 91, 176; } html[data-p7-accent="indigo"] { --nv-aurora-primary: #5b5fc7; --nv-aurora-secondary: #3d3f96; --nv-aurora-tertiary: #9b9ef2; --nv-aurora-deep: #34348a; --nv-aurora-soft: #e9e9fb; --nv-aurora-rgb: 91, 95, 199; } body.home { --nv-night-950: #040610; --nv-night-900: #070b18; --nv-night-850: #0a1021; --nv-night-800: #0d152a; --nv-night-700: #15213c; --nv-line-dark: rgba(160, 188, 255, .15); --nv-text-dark: #f6f8ff; --nv-muted-dark: #9caaca; --nv-glass: rgba(10, 16, 38, .72); --nv-glow: 0 28px 90px rgba(0, 0, 0, .34), 0 0 60px rgba(var(--nv-aurora-rgb), .08); --nv-surface-shadow: 0 22px 55px rgba(18, 34, 70, .11); /* Surface colours are inherited from main.css six-mode system. Desktop Aurora owns only accent atmosphere and its night constants. */ --p7-blue-700: var(--nv-aurora-deep); --p7-blue-600: var(--nv-aurora-deep); --p7-blue-500: var(--nv-aurora-primary); --p7-blue-100: var(--nv-aurora-soft); --p7-navy-950: var(--nv-night-950); --p7-navy-900: var(--nv-night-900); --p7-navy-800: var(--nv-night-800); --p7-focus: var(--nv-aurora-primary); background: var(--p7-page-bg, var(--p7-paper)); } html[data-p7-theme="dark"] body.home { --p7-blue-100: color-mix(in srgb, var(--nv-aurora-primary) 12%, var(--p7-card)); background: var(--p7-page-bg, var(--p7-paper)); } body.home .p7-container { width: min(1480px, calc(100% - 72px)); } /* --------------------------------------------------------------------- Header — a compact, continuous civic navigation bar. --------------------------------------------------------------------- */ body.home .p7-site-header, html:not([data-p7-theme="dark"]) body.home .p7-site-header { background: rgba(4, 7, 18, .94); color: #fff; border-bottom: 1px solid rgba(146, 176, 241, .12); box-shadow: 0 1px 0 rgba(255, 255, 255, .025), 0 18px 55px rgba(0, 0, 0, .18); backdrop-filter: blur(22px) saturate(145%); } body.home .p7-site-header.is-elevated { box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 20px 60px rgba(0, 0, 0, .34); } body.home .p7-utility { border-bottom: 1px solid rgba(146, 176, 241, .09); background: #03050d; color: #8f9bbb; } body.home .p7-utility a, body.home .p7-brand, body.home .p7-area-name, body.home .p7-site-header .p7-status strong, body.home .p7-site-header .p7-nav-list a { color: #f5f7ff; } body.home .p7-brand-row { min-height: 72px; padding-block: 10px; } body.home .p7-brand-mark, body.home .p7-footer-brand > span:first-child { border: 1px solid rgba(255, 255, 255, .15); background: linear-gradient(145deg, var(--nv-aurora-primary), var(--nv-aurora-secondary) 55%, var(--nv-aurora-tertiary)); box-shadow: 0 12px 30px rgba(var(--nv-aurora-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .35); } body.home .p7-brand-copy small, body.home .p7-area-name small, body.home .p7-site-header .p7-status small { color: #8e9ab8; } body.home .p7-site-header .p7-status { padding: 7px 11px; border: 1px solid rgba(72, 220, 174, .18); border-radius: 12px; background: rgba(37, 201, 151, .07); } body.home .p7-site-header .p7-icon-button, body.home .p7-site-header .p7-menu-toggle, body.home .p7-site-header .p7-desktop-smart-menu-trigger, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-icon-button, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-menu-toggle, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-desktop-smart-menu-trigger { border-color: rgba(152, 179, 239, .18); background: rgba(255, 255, 255, .035); color: #f5f7ff; } body.home .p7-site-header .p7-icon-button:hover, body.home .p7-site-header .p7-menu-toggle:hover, body.home .p7-site-header .p7-desktop-smart-menu-trigger:hover { border-color: rgba(var(--nv-aurora-rgb), .48); background: rgba(var(--nv-aurora-rgb), .1); } body.home .p7-primary-nav, html:not([data-p7-theme="dark"]) body.home .p7-primary-nav { border-color: rgba(146, 176, 241, .1); background: rgba(5, 9, 22, .96); box-shadow: none; } body.home .p7-nav-list a { min-height: 46px; font-size: 13px; } body.home .p7-nav-list > li > a:hover, body.home .p7-nav-list > .current-menu-item > a, body.home .p7-nav-list > .current-menu-ancestor > a { color: var(--nv-aurora-primary); } body.home .p7-nav-list > .current-menu-item > a::after, body.home .p7-nav-list > .current-menu-ancestor > a::after { height: 2px; background: linear-gradient(90deg, var(--nv-aurora-primary), var(--nv-aurora-secondary)); box-shadow: 0 0 14px rgba(var(--nv-aurora-rgb), .55); } body.home .p7-site-header .p7-nav-list .sub-menu, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-nav-list .sub-menu { border-color: rgba(151, 182, 241, .16); background: rgba(7, 12, 29, .98); box-shadow: 0 28px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05); } body.home .p7-site-header .p7-nav-list .sub-menu a { color: #f4f7ff; } body.home .p7-site-header .p7-nav-list .sub-menu a:hover { background: rgba(var(--nv-aurora-rgb), .08); color: var(--nv-aurora-primary); } body.home .p7-site-header .p7-menu-copy small { color: #8f9dbc; } body.home .p7-appearance-panel { border-color: var(--p7-border); background: color-mix(in srgb, var(--p7-card) 94%, transparent); box-shadow: 0 28px 70px rgba(0, 0, 0, .2); backdrop-filter: blur(24px) saturate(140%); } body.home .p7-appearance-card { border-color: color-mix(in srgb, var(--nv-aurora-primary) 20%, var(--p7-border)); box-shadow: var(--p7-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08); } /* --------------------------------------------------------------------- Hero — Urban Prism atmosphere on the existing 0.9.0 DOM. --------------------------------------------------------------------- */ body.home .p7-hero { isolation: isolate; min-height: 650px; background: radial-gradient(900px 620px at 6% 18%, rgba(var(--nv-aurora-rgb), .2), transparent 64%), radial-gradient(720px 560px at 79% 24%, color-mix(in srgb, var(--nv-aurora-secondary) 22%, transparent), transparent 64%), radial-gradient(600px 500px at 88% 84%, color-mix(in srgb, var(--nv-aurora-tertiary) 16%, transparent), transparent 66%), linear-gradient(145deg, #03050d 0%, #071026 52%, #09091b 100%); } body.home .p7-hero::before { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background-image: linear-gradient(rgba(126, 159, 225, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 159, 225, .055) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 74% 76% at 70% 28%, #000 8%, transparent 72%); opacity: .9; } body.home .p7-hero::after { top: -30vw; right: -18vw; width: 58vw; height: 58vw; border: 1px solid rgba(var(--nv-aurora-rgb), .2); border-radius: 50%; box-shadow: 0 0 0 90px rgba(111, 99, 255, .025), 0 0 0 180px rgba(236, 85, 255, .018), 0 0 120px rgba(var(--nv-aurora-rgb), .08); } body.home .p7-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(430px, .72fr); gap: clamp(60px, 6vw, 112px); align-items: center; min-height: 650px; padding-block: 76px 102px; } body.home .p7-hero-copy { max-width: 900px; } body.home .p7-kicker { color: var(--nv-aurora-primary); font-size: 12px; letter-spacing: .16em; text-shadow: 0 0 22px rgba(var(--nv-aurora-rgb), .34); } body.home .p7-hero h1 { max-width: 960px; margin-top: 20px; font-size: clamp(68px, 5.4vw, 104px); font-weight: 670; line-height: .92; letter-spacing: -.065em; text-wrap: balance; } body.home .p7-hero h1 span { background: linear-gradient(94deg, var(--nv-aurora-primary), var(--nv-aurora-secondary) 52%, var(--nv-aurora-tertiary)); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 10px 32px rgba(var(--nv-aurora-rgb), .12)); } body.home .p7-hero-copy > p { max-width: 650px; margin-top: 28px; color: #b9c4df; font-size: clamp(18px, 1.25vw, 21px); line-height: 1.58; } body.home .p7-hero-actions { gap: 13px; margin-top: 34px; } body.home .p7-hero .p7-button { min-height: 52px; padding-inline: 22px; border-radius: 14px; } body.home .p7-hero .p7-button--primary { background: linear-gradient(105deg, var(--nv-aurora-deep), var(--nv-aurora-secondary)); color: #fff; box-shadow: 0 16px 38px rgba(var(--nv-aurora-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .28); } body.home .p7-hero .p7-button--primary:hover { background: linear-gradient(105deg, var(--nv-aurora-primary), var(--nv-aurora-secondary)); color: #fff; transform: translateY(-2px); } body.home .p7-hero .p7-button--secondary { border-color: rgba(167, 191, 244, .25); background: rgba(255, 255, 255, .035); color: #f3f6ff; backdrop-filter: blur(10px); } body.home .p7-hero .p7-button--secondary:hover { border-color: rgba(var(--nv-aurora-rgb), .45); background: rgba(var(--nv-aurora-rgb), .08); } body.home .p7-command-panel { border-color: rgba(147, 178, 242, .2); border-radius: 28px 28px 28px 8px; background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)), rgba(7, 12, 31, .7); box-shadow: var(--nv-glow), inset 0 1px 0 rgba(255, 255, 255, .1); backdrop-filter: blur(22px) saturate(145%); } body.home .p7-command-panel::before { position: absolute; z-index: 2; top: 0; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--nv-aurora-primary), var(--nv-aurora-secondary), transparent); box-shadow: 0 0 20px rgba(var(--nv-aurora-rgb), .45); content: ""; pointer-events: none; } body.home .p7-command-row { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 15px; padding: 19px 22px; border-color: rgba(157, 184, 240, .12); color: #f6f8ff; } body.home .p7-command-row--date { grid-template-columns: auto 1fr; padding-block: 21px; } body.home .p7-command-row--date time strong { font-size: 36px; font-weight: 680; color: #fff; } body.home .p7-command-row--date time span, body.home .p7-command-row__copy small { color: #8795b7; } body.home .p7-command-row__status { border: 1px solid rgba(71, 220, 177, .2); background: rgba(45, 202, 157, .09); color: #69e4bf; } body.home .p7-command-row__icon { width: 44px; height: 44px; border: 1px solid rgba(var(--nv-aurora-rgb), .15); background: rgba(var(--nv-aurora-rgb), .08); color: var(--nv-aurora-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } body.home .p7-command-row__icon--reserved { border-style: dashed; border-color: rgba(157, 184, 240, .2); background: transparent; color: #65718f; box-shadow: none; } body.home .p7-command-row__copy strong { font-size: 15px; font-weight: 680; } body.home .p7-command-row--link { transition: background-color .2s var(--p7-ease), transform .2s var(--p7-ease); } body.home .p7-command-row--link:hover { background: linear-gradient(90deg, rgba(var(--nv-aurora-rgb), .09), rgba(111, 99, 255, .04)); transform: translateX(3px); } body.home .p7-command-row--link > .p7-icon:last-child { color: var(--nv-aurora-primary); } /* --------------------------------------------------------------------- Today digest + official ticker — one continuous signal layer. --------------------------------------------------------------------- */ body.home .p7-digest { z-index: 3; margin-top: -52px; padding-bottom: 44px; background: var(--nv-night-900); } body.home .p7-digest__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; } body.home .p7-digest__tile, body.home .p7-digest__tile--feature { position: relative; grid-column: auto; min-height: 132px; padding: 21px 22px; overflow: hidden; border: 1px solid var(--nv-line-dark); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)); color: #f5f7ff; box-shadow: 0 18px 48px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045); backdrop-filter: blur(14px); } body.home .p7-digest__tile::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--nv-aurora-primary), transparent 72%); content: ""; opacity: .75; } body.home .p7-digest__tile:nth-child(2)::before { background: linear-gradient(90deg, var(--nv-aurora-secondary), transparent 72%); } body.home .p7-digest__tile:nth-child(3)::before { background: linear-gradient(90deg, var(--nv-aurora-tertiary), transparent 72%); } body.home .p7-digest__tile:nth-child(4)::before { background: linear-gradient(90deg, #43ddb1, transparent 72%); } body.home .p7-digest__tile:hover { border-color: rgba(var(--nv-aurora-rgb), .32); box-shadow: 0 24px 58px rgba(0, 0, 0, .3), 0 0 32px rgba(var(--nv-aurora-rgb), .06); transform: translateY(-4px); } body.home .p7-digest__eyebrow, body.home .p7-digest__tile--feature .p7-digest__eyebrow { color: #8492b2; letter-spacing: .11em; } body.home .p7-digest__tile strong, body.home .p7-digest__tile--feature strong { font-size: clamp(32px, 2.5vw, 46px); font-weight: 650; color: #f8f9ff; } body.home .p7-digest__tile--feature strong { color: var(--nv-aurora-primary); text-shadow: 0 0 28px rgba(var(--nv-aurora-rgb), .25); } body.home .p7-digest__tile strong .p7-icon { width: .9em; height: .9em; color: var(--nv-aurora-primary); } body.home .p7-digest__tile span:last-child, body.home .p7-digest__tile--feature span:last-child { color: #9aa7c3; } body.home .p7-ticker { padding-block: 16px; border-color: var(--p7-border); background: var(--p7-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } body.home .p7-ticker__inner { min-height: 38px; } body.home .p7-ticker__badge { box-shadow: 0 8px 22px rgba(176, 36, 44, .18); } body.home .p7-ticker__all { color: var(--nv-aurora-deep); } html[data-p7-theme="dark"] body.home .p7-ticker__all { color: var(--nv-aurora-primary); } /* --------------------------------------------------------------------- Editorial stream — bold lead story, balanced supporting grid and rail. --------------------------------------------------------------------- */ body.home .p7-section--news { padding-block: 104px; background: radial-gradient(600px 420px at 78% 5%, rgba(var(--nv-aurora-rgb), .08), transparent 70%), var(--p7-soft); } body.home .p7-section--soft:not(.p7-section--news) { padding-block: 92px; background: var(--p7-paper); } body.home .p7-section--news::before { display: none; } body.home .p7-section-header { margin-bottom: 36px; } body.home .p7-section-header h2 { font-size: clamp(48px, 4vw, 66px); font-weight: 660; line-height: .98; letter-spacing: -.055em; } body.home .p7-eyebrow { color: var(--nv-aurora-deep); letter-spacing: .16em; } html[data-p7-theme="dark"] body.home .p7-eyebrow { color: var(--nv-aurora-primary); } body.home .p7-section-header > a { min-height: 42px; padding: 8px 13px; border: 1px solid var(--p7-border); border-radius: 12px; background: color-mix(in srgb, var(--p7-card) 84%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } body.home .p7-editorial-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; } body.home .p7-card-grid--editorial { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } body.home .p7-card-grid--editorial .p7-smart-news-card { grid-column: span 1; border-color: color-mix(in srgb, var(--nv-aurora-primary) 8%, var(--p7-border)); border-radius: 20px; box-shadow: var(--p7-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08); } body.home .p7-card-grid--editorial .p7-smart-news-card.is-featured { grid-column: span 2; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 410px; } body.home .p7-card-grid--editorial .p7-smart-news-card:nth-child(6):last-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } body.home .p7-card-grid--editorial .p7-smart-news-card:nth-child(6):last-child .p7-card-image { min-height: 100%; aspect-ratio: auto; } body.home .p7-smart-news-card .p7-card-image { position: relative; background: linear-gradient(145deg, var(--nv-night-800), var(--nv-night-700)); } body.home .p7-smart-news-card .p7-card-image::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 7, 18, .22)); content: ""; pointer-events: none; } body.home .p7-smart-news-card .p7-card-body { padding: 22px; } body.home .p7-card-grid--editorial .p7-smart-news-card.is-featured .p7-card-body { padding: clamp(30px, 2.8vw, 44px); } body.home .p7-card-grid--editorial .p7-smart-news-card.is-featured :is(h2, h3) { margin-block: 14px 12px; font-size: clamp(31px, 2.5vw, 43px); line-height: 1.05; letter-spacing: -.04em; } body.home .p7-smart-news-card :is(h2, h3) { font-size: 18px; line-height: 1.2; letter-spacing: -.02em; } body.home .p7-smart-news-card:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 34%, var(--p7-border)); box-shadow: 0 28px 58px rgba(11, 23, 51, .14), 0 0 34px rgba(var(--nv-aurora-rgb), .045); transform: translateY(-4px); } body.home .p7-context-rail { gap: 14px; } body.home .p7-rail-card { position: relative; gap: 12px; padding: 21px; border-color: color-mix(in srgb, var(--nv-aurora-primary) 10%, var(--p7-border)); border-radius: 20px; box-shadow: var(--p7-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .2s var(--p7-ease), border-color .2s var(--p7-ease), box-shadow .2s var(--p7-ease); } body.home .p7-rail-card::before { position: absolute; top: 0; right: 20px; left: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--nv-aurora-primary), transparent); content: ""; opacity: .5; } body.home .p7-rail-card:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 38%, var(--p7-border)); box-shadow: 0 22px 48px rgba(11, 23, 51, .13); transform: translateY(-3px); } body.home .p7-rail-card__head .p7-icon, body.home .p7-rail-card__foot { color: var(--nv-aurora-deep); } html[data-p7-theme="dark"] body.home .p7-rail-card__head .p7-icon, html[data-p7-theme="dark"] body.home .p7-rail-card__foot { color: var(--nv-aurora-primary); } body.home .p7-topic-chips { gap: 9px; margin-top: 28px; padding-top: 24px; } body.home .p7-topic-chip { min-height: 38px; padding-inline: 13px; border-radius: 12px; background: var(--p7-card); } body.home .p7-topic-chip:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 44%, var(--p7-border)); background: var(--p7-blue-100); } /* --------------------------------------------------------------------- Map — a dark civic layer with a smaller, controlled canvas. --------------------------------------------------------------------- */ body.home .p7-local-map--canvas, html:not([data-p7-theme="dark"]) body.home .p7-local-map--canvas { border-color: rgba(145, 177, 239, .13); background: radial-gradient(720px 500px at 18% 32%, rgba(var(--nv-aurora-rgb), .18), transparent 66%), radial-gradient(620px 460px at 84% 72%, color-mix(in srgb, var(--nv-aurora-secondary) 14%, transparent), transparent 70%), linear-gradient(145deg, #050816, #08142a 58%, #090b1e); color: #f4f7ff; } body.home .p7-local-map--canvas::before { background-image: linear-gradient(rgba(139, 169, 232, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 169, 232, .05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 90% at 48% 50%, #000, transparent 78%); } body.home .p7-map-grid--canvas { min-height: clamp(430px, 34vw, 540px); } body.home .p7-map-canvas--canvas, html:not([data-p7-theme="dark"]) body.home .p7-map-canvas--canvas { background: radial-gradient(circle at 52% 46%, rgba(var(--nv-aurora-rgb), .15), transparent 26%), linear-gradient(145deg, rgba(9, 19, 42, .38), rgba(4, 7, 18, .7)); } body.home .p7-map-canvas::before, body.home .p7-map-canvas::after { border-color: rgba(var(--nv-aurora-rgb), .12); box-shadow: 0 0 38px rgba(var(--nv-aurora-rgb), .04); } body.home .p7-map-shape path, html:not([data-p7-theme="dark"]) body.home .p7-map-shape path { fill: rgba(var(--nv-aurora-rgb), .14); stroke: var(--nv-aurora-primary); filter: drop-shadow(0 0 16px rgba(var(--nv-aurora-rgb), .38)); } body.home .p7-map-stage:hover .p7-map-shape path, html:not([data-p7-theme="dark"]) body.home .p7-map-stage:hover .p7-map-shape path { fill: rgba(var(--nv-aurora-rgb), .22); stroke: #d5f5ff; filter: drop-shadow(0 0 24px rgba(var(--nv-aurora-rgb), .52)); } body.home .p7-map-panel--floating, html:not([data-p7-theme="dark"]) body.home .p7-map-panel--floating { width: min(470px, calc(100% - 80px)); margin: 40px; padding: 28px; border: 1px solid rgba(151, 182, 241, .19); border-radius: 26px 26px 26px 8px; background: rgba(7, 12, 29, .78); color: #f5f7ff; box-shadow: var(--nv-glow), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(22px) saturate(140%); } body.home .p7-area-profile-head h2 { margin: 8px 0 0; color: #fff; font-size: clamp(34px, 3vw, 46px); line-height: 1; letter-spacing: -.05em; } body.home .p7-area-profile-head p { color: #8f9dbc; } body.home .p7-map-panel-kicker { color: var(--nv-aurora-primary); } body.home .p7-area-count { border-color: rgba(var(--nv-aurora-rgb), .18); background: rgba(var(--nv-aurora-rgb), .09); color: var(--nv-aurora-primary); } body.home .p7-area-count span { color: #dce4f7; } body.home .p7-local-areas { border-color: rgba(151, 182, 241, .14); background: rgba(255, 255, 255, .025); } body.home .p7-local-areas__head strong, body.home .p7-local-area-chip strong { color: #f3f6ff; } body.home .p7-local-areas__head > span, body.home .p7-local-area-chip { border-color: rgba(151, 182, 241, .13); background: rgba(255, 255, 255, .035); color: #f3f6ff; } body.home .p7-mini-kicker, body.home .p7-local-area-chip small { color: #8391b0; } body.home .p7-area-facts a { border-color: rgba(151, 182, 241, .14); background: rgba(255, 255, 255, .035); color: #f4f7ff; } body.home .p7-area-facts a:hover { border-color: rgba(var(--nv-aurora-rgb), .4); background: rgba(var(--nv-aurora-rgb), .07); } body.home .p7-area-facts span { color: #8997b7; } body.home .p7-map-action { background: linear-gradient(105deg, var(--nv-aurora-deep), var(--nv-aurora-secondary)); color: #fff; box-shadow: 0 12px 28px rgba(var(--nv-aurora-rgb), .14); } body.home .p7-map-action:hover { background: linear-gradient(105deg, var(--nv-aurora-primary), var(--nv-aurora-secondary)); color: #fff; } body.home .p7-map-action--secondary { border-color: rgba(151, 182, 241, .18); background: rgba(255, 255, 255, .04); color: #e7edfb; box-shadow: none; } body.home .p7-map-action--secondary:hover { border-color: rgba(var(--nv-aurora-rgb), .4); background: rgba(var(--nv-aurora-rgb), .08); color: #fff; } body.home .p7-map-expand--floating { right: 34px; bottom: 34px; border-color: rgba(var(--nv-aurora-rgb), .25); background: rgba(5, 9, 22, .72); color: #f5f7ff; box-shadow: 0 12px 34px rgba(0, 0, 0, .26); } /* --------------------------------------------------------------------- Service Explorer — dense, keyboard-order-safe two-column system list. --------------------------------------------------------------------- */ body.home .p7-services--premium { padding-block: 104px; border-color: var(--p7-border); background: var(--p7-card); } body.home .p7-services-header { align-items: end; margin-bottom: 34px; } body.home .p7-service-search { width: min(470px, 100%); min-height: 56px; padding-inline: 17px; border-color: color-mix(in srgb, var(--nv-aurora-primary) 15%, var(--p7-border)); border-radius: 16px; background: var(--p7-paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(18, 34, 70, .05); } body.home .p7-service-search:focus-within { border-color: var(--nv-aurora-primary); box-shadow: 0 0 0 3px rgba(var(--nv-aurora-rgb), .13); } body.home .p7-services-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 38px; padding: 0; border-top: 1px solid var(--p7-border); } body.home .p7-services-grid--catalog > .p7-service-card--catalog { grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 15px; min-height: 104px; padding: 17px 8px; border: 0; border-bottom: 1px solid var(--p7-border); border-radius: 0; background: transparent; box-shadow: none; transition: padding-left .2s var(--p7-ease), background-color .2s var(--p7-ease), border-color .2s var(--p7-ease); } body.home .p7-services-grid--catalog > .p7-service-card--catalog[hidden] { display: none; } /* Progressive disclosure becomes visible on desktop. During a search, :has() releases the initial four-item limit so matching later rows can still appear. Browsers without :has() retain the safe all-visible base. */ @supports selector(body:has(input)) { body.home:not(:has(.p7-service-search input:not(:placeholder-shown))) .p7-services-grid--catalog:not(.is-expanded) > .p7-service-card--catalog:nth-child(n + 5) { display: none; } } body.home .p7-service-card--catalog:hover { padding-left: 13px; border-color: color-mix(in srgb, var(--nv-aurora-primary) 46%, var(--p7-border)); background: linear-gradient(90deg, rgba(var(--nv-aurora-rgb), .055), transparent 72%); box-shadow: none; transform: none; } body.home .p7-service-card--catalog .p7-service-icon { width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--nv-aurora-primary) 18%, var(--p7-border)); border-radius: 13px; background: color-mix(in srgb, var(--nv-aurora-primary) 9%, var(--p7-card)); color: var(--nv-aurora-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } html[data-p7-theme="dark"] body.home .p7-service-card--catalog .p7-service-icon { color: var(--nv-aurora-primary); } body.home .p7-service-copy strong { font-size: 15px; font-weight: 750; } body.home .p7-service-copy small { margin-top: 4px; font-size: 12px; line-height: 1.45; } body.home .p7-service-card--catalog > .p7-icon:last-child { color: var(--nv-aurora-deep); } html[data-p7-theme="dark"] body.home .p7-service-card--catalog > .p7-icon:last-child { color: var(--nv-aurora-primary); } body.home .p7-services-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 24px; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--nv-aurora-primary) 22%, var(--p7-border)); border-radius: 13px; background: var(--p7-paper); color: var(--p7-text); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; } body.home .p7-services-more:hover { border-color: var(--nv-aurora-primary); background: var(--p7-blue-100); } body.home .p7-services-more[aria-expanded="true"] span { transform: rotate(180deg); } /* --------------------------------------------------------------------- App promo — a conversion surface with depth, not a generic banner. --------------------------------------------------------------------- */ body.home .p7-app-promo { padding-block: 94px; border-color: rgba(145, 177, 239, .12); background: var(--nv-night-950); } body.home .p7-app-promo__shell, html[data-p7-theme="dark"] body.home .p7-app-promo__shell { grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); gap: clamp(50px, 6vw, 100px); min-height: 560px; padding: clamp(52px, 5vw, 78px); border: 1px solid rgba(151, 182, 241, .17); border-radius: 32px 32px 32px 10px; background: radial-gradient(640px 440px at 88% 18%, rgba(var(--nv-aurora-rgb), .2), transparent 68%), radial-gradient(520px 420px at 18% 92%, color-mix(in srgb, var(--nv-aurora-tertiary) 11%, transparent), transparent 72%), linear-gradient(135deg, #090f22, #0a132b 55%, #100b25); box-shadow: 0 40px 110px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07); } body.home .p7-app-promo__shell::before { position: absolute; top: 0; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--nv-aurora-primary), var(--nv-aurora-secondary), transparent); box-shadow: 0 0 24px rgba(var(--nv-aurora-rgb), .42); content: ""; } body.home .p7-app-promo__copy h2 { max-width: 760px; margin: 10px 0 18px; color: #f7f8ff; font-size: clamp(48px, 4vw, 70px); font-weight: 650; line-height: .98; letter-spacing: -.055em; } body.home .p7-app-promo__copy > p { max-width: 650px; color: #a9b5cf; font-size: 18px; } body.home .p7-app-promo .p7-eyebrow { color: var(--nv-aurora-primary); } body.home .p7-app-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; } body.home .p7-app-benefits li { min-height: 92px; padding: 15px; border: 1px solid rgba(151, 182, 241, .12); border-radius: 16px; background: rgba(255, 255, 255, .03); transition: border-color .2s var(--p7-ease), transform .2s var(--p7-ease); } body.home .p7-app-benefits li:hover { border-color: rgba(var(--nv-aurora-rgb), .34); transform: translateY(-3px); } body.home .p7-app-benefits strong { color: #f2f5ff; } body.home .p7-app-benefits small { color: #8f9db9; } body.home .p7-app-benefits li > .p7-icon { background: rgba(58, 218, 173, .12); color: #5be1bb; } body.home .p7-app-pending-badge { border-color: rgba(151, 182, 241, .17); background: rgba(255, 255, 255, .04); color: #a9b5cf; } body.home .p7-phone { width: min(270px, 78%); border-color: rgba(166, 190, 244, .34); background: #02040b; box-shadow: 0 46px 100px rgba(0, 0, 0, .52), 0 0 70px rgba(var(--nv-aurora-rgb), .15), inset 0 0 0 2px rgba(255, 255, 255, .07); transform: rotate(5deg); animation: nv-phone-float 8s ease-in-out infinite; } body.home .p7-phone__screen { background: radial-gradient(circle at 80% 10%, rgba(var(--nv-aurora-rgb), .18), transparent 34%), linear-gradient(180deg, #0c1630, #080d1d); color: #f5f7ff; } body.home .p7-phone__brand span { background: linear-gradient(145deg, var(--nv-aurora-primary), var(--nv-aurora-secondary)); } body.home .p7-phone__alert, body.home .p7-phone__tiles i { background: rgba(255, 255, 255, .06); box-shadow: 0 16px 34px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06); } body.home .p7-phone__alert small { color: #5ce1bc; } body.home .p7-phone__alert span { color: #94a2c0; } body.home .p7-app-orbit { border-color: rgba(var(--nv-aurora-rgb), .22); box-shadow: 0 0 60px rgba(var(--nv-aurora-rgb), .04); } /* --------------------------------------------------------------------- Desktop command surface — coherent visual language. --------------------------------------------------------------------- */ body.home .p7-smart-menu.is-open { background: rgba(2, 4, 12, .72); backdrop-filter: blur(10px) saturate(120%); } body.home .p7-smart-menu .p7-smart-menu__panel { border: 1px solid color-mix(in srgb, var(--nv-aurora-primary) 18%, var(--p7-border)); box-shadow: 0 42px 120px rgba(0, 0, 0, .46), 0 0 60px rgba(var(--nv-aurora-rgb), .07), inset 0 1px 0 rgba(255, 255, 255, .08); } body.home .p7-site-footer { border-top: 1px solid rgba(151, 182, 241, .12); background: #03050d; } body.home .p7-smart-menu .p7-section-card, body.home .p7-smart-menu .p7-capability-row { transition: transform .18s var(--p7-ease), border-color .18s var(--p7-ease), background-color .18s var(--p7-ease); } body.home .p7-smart-menu .p7-section-card:hover, body.home .p7-smart-menu .p7-capability-row:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 42%, var(--p7-border)); background: color-mix(in srgb, var(--nv-aurora-primary) 6%, var(--p7-card)); transform: translateY(-2px); } /* Dark mode gets separately tuned surfaces, not a simple inversion. */ html[data-p7-theme="dark"] body.home .p7-section--news, html[data-p7-theme="dark"] body.home .p7-services--premium { background: radial-gradient(640px 460px at 82% 0%, rgba(var(--nv-aurora-rgb), .055), transparent 70%), var(--p7-paper); } html[data-p7-theme="dark"] body.home .p7-smart-news-card, html[data-p7-theme="dark"] body.home .p7-rail-card, html[data-p7-theme="dark"] body.home .p7-topic-chip { border-color: rgba(151, 182, 241, .14); background: linear-gradient(155deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)), var(--p7-card); box-shadow: 0 18px 46px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .04); } @keyframes nv-phone-float { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-10px) rotate(3.5deg); } } } @media (min-width: 1600px) { body.home .p7-hero-grid { min-height: 700px; padding-block: 86px 112px; } body.home .p7-command-panel { max-width: 520px; justify-self: end; width: 100%; } body.home .p7-card-grid--editorial { gap: 20px; } } @media (min-width: 1181px) and (prefers-reduced-motion: reduce) { body.home .p7-hero .p7-button, body.home .p7-command-row--link, body.home .p7-digest__tile, body.home .p7-smart-news-card, body.home .p7-rail-card, body.home .p7-service-card--catalog, body.home .p7-app-benefits li, body.home .p7-smart-menu .p7-section-card, body.home .p7-smart-menu .p7-capability-row { transition: none; } body.home .p7-phone { animation: none; } body.home .p7-hero .p7-button:hover, body.home .p7-command-row--link:hover, body.home .p7-digest__tile:hover, body.home .p7-smart-news-card:hover, body.home .p7-rail-card:hover, body.home .p7-service-card--catalog:hover, body.home .p7-app-benefits li:hover, body.home .p7-smart-menu .p7-section-card:hover, body.home .p7-smart-menu .p7-capability-row:hover { transform: none; } } @media (min-width: 1181px) and (forced-colors: active) { body.home .p7-hero h1 span { background: none; color: CanvasText; filter: none; } body.home .p7-command-panel, body.home .p7-digest__tile, body.home .p7-rail-card, body.home .p7-map-panel--floating, body.home .p7-app-promo__shell, body.home .p7-smart-menu .p7-smart-menu__panel { border: 1px solid CanvasText; box-shadow: none; } body.home .p7-command-panel::before, body.home .p7-digest__tile::before, body.home .p7-rail-card::before, body.home .p7-app-promo__shell::before { display: none; } } /* ============================================================================ 0.9.2.1 — Civic Aurora LIGHT Rebalance ============================================================================ Purely additive: appended as its own @media block so every rule below wins the cascade by source order without touching a single line above. Scope: light mode only (html:not([data-p7-theme="dark"])), desktop only (>=1181px, same guard as the rest of this file). Dark mode — the "Civic Night" reading of this same identity — is completely untouched; nothing below has a dark-mode counterpart because nothing above needed to change for dark mode. Rationale: Hero, the Digest strip pulled up under it, the Map canvas + floating panel, and App Promo were all built with ONE unconditional dark "Urban Prism" surface, applied regardless of html[data-p7-theme]. Header is left alone deliberately — a slim ~72px dark bar reads as product chrome, not as "the page is dark mode", and the brief explicitly allows that exception. Everything a visitor actually reads and spends time in — Hero copy, Digest, Map, App Promo — gets its own proper light surface below: cool pearl ambient, soft aurora washes instead of glow-on-black, dark ink text, and pink/violet/cyan kept as signal accents rather than the dominant surface color. ============================================================================ */ @media (min-width: 1181px) { /* --------------------------------------------------------------------- Hero — daylight premium instead of night. --------------------------------------------------------------------- */ html:not([data-p7-theme="dark"]) body.home .p7-hero { background: radial-gradient(920px 620px at 8% 12%, color-mix(in srgb, var(--nv-aurora-tertiary) 20%, transparent), transparent 62%), radial-gradient(760px 560px at 82% 20%, color-mix(in srgb, var(--nv-aurora-secondary) 16%, transparent), transparent 62%), radial-gradient(640px 520px at 90% 88%, color-mix(in srgb, var(--nv-aurora-primary) 14%, transparent), transparent 66%), linear-gradient(150deg, #f8fafc 0%, #f2f6fa 46%, #eef4fa 100%); } html:not([data-p7-theme="dark"]) body.home .p7-hero::before { background-image: linear-gradient(rgba(11, 18, 36, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 18, 36, .035) 1px, transparent 1px); opacity: .8; } html:not([data-p7-theme="dark"]) body.home .p7-hero::after { border-color: color-mix(in srgb, var(--nv-aurora-primary) 22%, transparent); box-shadow: 0 0 0 90px rgba(111, 99, 255, .025), 0 0 0 180px rgba(236, 85, 255, .018), 0 0 120px color-mix(in srgb, var(--nv-aurora-primary) 10%, transparent); } html:not([data-p7-theme="dark"]) body.home .p7-kicker { color: var(--nv-aurora-deep); text-shadow: none; } html:not([data-p7-theme="dark"]) body.home .p7-hero h1 { color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-hero-copy > p { color: #4a5470; } html:not([data-p7-theme="dark"]) body.home .p7-hero .p7-button--secondary { border-color: color-mix(in srgb, var(--nv-aurora-deep) 26%, var(--p7-border)); background: rgba(255, 255, 255, .6); color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-hero .p7-button--secondary:hover { border-color: var(--nv-aurora-deep); background: rgba(255, 255, 255, .85); } /* Command Panel: pearl glass, not black glass. */ html:not([data-p7-theme="dark"]) body.home .p7-command-panel { border-color: color-mix(in srgb, var(--nv-aurora-deep) 14%, var(--p7-border)); background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); box-shadow: 0 24px 60px rgba(30, 34, 70, .1), inset 0 1px 0 rgba(255, 255, 255, .7); } html:not([data-p7-theme="dark"]) body.home .p7-command-row { border-color: color-mix(in srgb, var(--nv-aurora-deep) 10%, var(--p7-border)); color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-command-row--date time strong { color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-command-row--date time span, html:not([data-p7-theme="dark"]) body.home .p7-command-row__copy small { color: #667085; } html:not([data-p7-theme="dark"]) body.home .p7-command-row__icon { border-color: color-mix(in srgb, var(--nv-aurora-deep) 20%, transparent); background: color-mix(in srgb, var(--nv-aurora-primary) 10%, #fff); color: var(--nv-aurora-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); } html:not([data-p7-theme="dark"]) body.home .p7-command-row__icon--reserved { border-color: var(--p7-border); color: #9aa3b8; } html:not([data-p7-theme="dark"]) body.home .p7-command-row--link:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--nv-aurora-primary) 8%, transparent), transparent); } html:not([data-p7-theme="dark"]) body.home .p7-command-row--link > .p7-icon:last-child { color: var(--nv-aurora-deep); } /* --------------------------------------------------------------------- Digest — visually continues the Hero surface (negative margin pulls it up under the Hero), so it needs the same daylight treatment or the "big dark block" simply reappears one section lower. --------------------------------------------------------------------- */ html:not([data-p7-theme="dark"]) body.home .p7-digest { background: #f8fafc; } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile, html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature { border-color: var(--p7-border); background: linear-gradient(155deg, #ffffff, #f8fafc); color: #0b1224; box-shadow: 0 14px 34px rgba(30, 34, 70, .07), inset 0 1px 0 rgba(255, 255, 255, .8); } html:not([data-p7-theme="dark"]) body.home .p7-digest__eyebrow, html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature .p7-digest__eyebrow { color: #6b7290; } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile strong, html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature strong { color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature strong { color: var(--nv-aurora-deep); text-shadow: none; } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile span:last-child, html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature span:last-child { color: #667085; } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 32%, var(--p7-border)); box-shadow: 0 20px 44px rgba(30, 34, 70, .1); } /* --------------------------------------------------------------------- Map — light spatial canvas. Geometry stays vivid pink/violet/cyan; the surface it sits on becomes cool, bright neutral instead of a night-map plate. --------------------------------------------------------------------- */ html:not([data-p7-theme="dark"]) body.home .p7-local-map--canvas { border-color: var(--p7-border); background: radial-gradient(760px 520px at 16% 28%, color-mix(in srgb, var(--nv-aurora-primary) 12%, transparent), transparent 68%), radial-gradient(640px 480px at 86% 76%, color-mix(in srgb, var(--nv-aurora-tertiary) 10%, transparent), transparent 70%), linear-gradient(150deg, #f7fafc 0%, #eef4f9 60%, #f2f6fa 100%); color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-local-map--canvas::before { background-image: linear-gradient(rgba(11, 18, 36, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 18, 36, .045) 1px, transparent 1px); } html:not([data-p7-theme="dark"]) body.home .p7-map-canvas--canvas { background: radial-gradient(circle at 52% 46%, color-mix(in srgb, var(--nv-aurora-primary) 10%, transparent), transparent 30%), linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)); } html:not([data-p7-theme="dark"]) body.home .p7-map-canvas::before, html:not([data-p7-theme="dark"]) body.home .p7-map-canvas::after { border-color: color-mix(in srgb, var(--nv-aurora-deep) 16%, transparent); } html:not([data-p7-theme="dark"]) body.home .p7-map-shape path { fill: color-mix(in srgb, var(--nv-aurora-primary) 20%, transparent); stroke: var(--nv-aurora-deep); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--nv-aurora-primary) 30%, transparent)); } html:not([data-p7-theme="dark"]) body.home .p7-map-stage:hover .p7-map-shape path { fill: color-mix(in srgb, var(--nv-aurora-primary) 30%, transparent); stroke: var(--nv-aurora-deep); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--nv-aurora-primary) 42%, transparent)); } /* Floating info panel: pearl glass, not dark glass. */ html:not([data-p7-theme="dark"]) body.home .p7-map-panel--floating { border-color: color-mix(in srgb, var(--nv-aurora-deep) 14%, var(--p7-border)); background: rgba(255, 255, 255, .82); color: #0b1224; box-shadow: 0 24px 60px rgba(30, 34, 70, .12), inset 0 1px 0 rgba(255, 255, 255, .8); } html:not([data-p7-theme="dark"]) body.home .p7-area-profile-head h2 { color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-area-profile-head p { color: #667085; } html:not([data-p7-theme="dark"]) body.home .p7-map-panel-kicker { color: var(--nv-aurora-deep); } html:not([data-p7-theme="dark"]) body.home .p7-area-count { border-color: color-mix(in srgb, var(--nv-aurora-deep) 18%, transparent); background: color-mix(in srgb, var(--nv-aurora-primary) 9%, #fff); color: var(--nv-aurora-deep); } html:not([data-p7-theme="dark"]) body.home .p7-area-count span { color: #4a5470; } html:not([data-p7-theme="dark"]) body.home .p7-local-areas { border-color: var(--p7-border); background: rgba(255, 255, 255, .55); } html:not([data-p7-theme="dark"]) body.home .p7-local-areas__head strong, html:not([data-p7-theme="dark"]) body.home .p7-local-area-chip strong { color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-local-areas__head > span, html:not([data-p7-theme="dark"]) body.home .p7-local-area-chip { border-color: var(--p7-border); background: rgba(255, 255, 255, .7); color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-mini-kicker, html:not([data-p7-theme="dark"]) body.home .p7-local-area-chip small { color: #6b7290; } html:not([data-p7-theme="dark"]) body.home .p7-area-facts a { border-color: var(--p7-border); background: rgba(255, 255, 255, .7); color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-area-facts a:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 40%, transparent); background: color-mix(in srgb, var(--nv-aurora-primary) 8%, #fff); } html:not([data-p7-theme="dark"]) body.home .p7-area-facts span { color: #667085; } html:not([data-p7-theme="dark"]) body.home .p7-map-action--secondary { border-color: var(--p7-border); background: rgba(255, 255, 255, .6); color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-map-action--secondary:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 40%, transparent); background: color-mix(in srgb, var(--nv-aurora-primary) 8%, #fff); color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-map-expand--floating { border-color: color-mix(in srgb, var(--nv-aurora-deep) 22%, transparent); background: rgba(255, 255, 255, .82); color: #0b1224; box-shadow: 0 12px 30px rgba(30, 34, 70, .12); } /* --------------------------------------------------------------------- App Promo — premium product surface in daylight. The phone stays a deliberately dark, contrasting object (per brief), everything around it lifts into pearl / pale violet / pale cyan. --------------------------------------------------------------------- */ html:not([data-p7-theme="dark"]) body.home .p7-app-promo { background: #f8fafc; } html:not([data-p7-theme="dark"]) body.home .p7-app-promo__shell { border-color: color-mix(in srgb, var(--nv-aurora-deep) 12%, var(--p7-border)); background: radial-gradient(680px 460px at 88% 14%, color-mix(in srgb, var(--nv-aurora-secondary) 14%, transparent), transparent 68%), radial-gradient(560px 440px at 14% 92%, color-mix(in srgb, var(--nv-aurora-tertiary) 12%, transparent), transparent 72%), linear-gradient(140deg, #f8fafc 0%, #f1f5f9 55%, #eef4fa 100%); box-shadow: 0 32px 90px rgba(30, 34, 70, .12), inset 0 1px 0 rgba(255, 255, 255, .7); } html:not([data-p7-theme="dark"]) body.home .p7-app-promo__copy h2 { color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-app-promo__copy > p { color: #4a5470; } html:not([data-p7-theme="dark"]) body.home .p7-app-promo .p7-eyebrow { color: var(--nv-aurora-deep); } html:not([data-p7-theme="dark"]) body.home .p7-app-benefits li { border-color: var(--p7-border); background: rgba(255, 255, 255, .65); } html:not([data-p7-theme="dark"]) body.home .p7-app-benefits li:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 32%, transparent); } html:not([data-p7-theme="dark"]) body.home .p7-app-benefits strong { color: #0b1224; } html:not([data-p7-theme="dark"]) body.home .p7-app-benefits small { color: #667085; } html:not([data-p7-theme="dark"]) body.home .p7-app-pending-badge { border-color: var(--p7-border); background: rgba(255, 255, 255, .7); color: #4a5470; } /* Phone is intentionally left dark — a contrasting object, not part of the surface system, exactly as specified. No override here. */ } /* ============================================================================ Novarius 0.9.4.2 — Civic Light Palette A neutral public-service daylight identity: white and cool-slate surfaces, deep civic navy typography and a restrained tenant/civic-blue interaction colour. Amber remains a scarce Novarius signature, not a page tint. Dark mode is deliberately untouched. This block owns the desktop Home light mode. ============================================================================ */ @media (min-width: 1181px) { html:not([data-p7-theme="dark"]) body.home { --nv-light-paper: #f8fafc; --nv-light-paper-2: #f4f7fb; --nv-light-card: #ffffff; --nv-light-ink: #101828; --nv-light-muted: #52606d; --nv-light-line: #dce3ea; --nv-light-line-strong: #cbd5e1; --nv-light-amber: var(--nv-aurora-primary); --nv-light-amber-deep: var(--nv-aurora-deep); --nv-light-amber-soft: var(--nv-aurora-soft); --nv-light-shadow: 0 22px 54px rgba(15, 35, 55, .09); --nv-light-shadow-lg: 0 34px 90px rgba(15, 35, 55, .13); /* 0.9.4.3.1: do not re-own the global surface tokens here. The selected surface mode on is authoritative. */ background: var(--p7-page-bg, var(--p7-paper)); } /* Header: daylight product chrome. The dark Novarius mark becomes the contrast object; the surrounding navigation remains light and calm. */ html:not([data-p7-theme="dark"]) body.home .p7-site-header { background: rgba(255, 255, 255, .93); color: var(--nv-light-ink); border-bottom: 1px solid rgba(23, 74, 124, .16); box-shadow: 0 1px 0 rgba(255,255,255,.72), 0 14px 38px rgba(15, 35, 55, .07); backdrop-filter: blur(20px) saturate(128%); } html:not([data-p7-theme="dark"]) body.home .p7-site-header.is-elevated { box-shadow: 0 1px 0 rgba(23,74,124,.16), 0 18px 48px rgba(15, 35, 55, .11); } html:not([data-p7-theme="dark"]) body.home .p7-utility { background: #eef3f8; color: #52606d; border-bottom: 1px solid #dce3ea; } html:not([data-p7-theme="dark"]) body.home .p7-utility a { color: #344054; } html:not([data-p7-theme="dark"]) body.home .p7-brand, html:not([data-p7-theme="dark"]) body.home .p7-area-name, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-status strong, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-nav-list a { color: var(--nv-light-ink); } html:not([data-p7-theme="dark"]) body.home .p7-brand-copy small, html:not([data-p7-theme="dark"]) body.home .p7-area-name small, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-status small, html:not([data-p7-theme="dark"]) body.home .p7-brand-tenant { color: #667085; } html:not([data-p7-theme="dark"]) body.home .p7-brand-tenant__divider { background: #cbd5e1; } /* Preserve the approved Novarius brand mark as a dark ink signature, independent of the selected accent colour. */ html:not([data-p7-theme="dark"]) body.home .p7-brand-mark { border-color: rgba(16, 24, 40, .10); background: #101828; box-shadow: 0 10px 26px rgba(16, 40, 64, .14), inset 0 1px 0 rgba(255,255,255,.06); } html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-status { border-color: rgba(30, 128, 91, .17); background: #edf6f0; color: #275f4c; } html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-icon-button, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-menu-toggle, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-desktop-smart-menu-trigger { border-color: #d8e1ea; background: rgba(255, 255, 255, .76); color: #344054; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); } html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-icon-button:hover, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-menu-toggle:hover, html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-desktop-smart-menu-trigger:hover { border-color: color-mix(in srgb, var(--nv-aurora-primary) 46%, #cbd5e1); background: color-mix(in srgb, var(--nv-aurora-soft) 54%, #ffffff); color: var(--nv-aurora-deep); } html:not([data-p7-theme="dark"]) body.home .p7-primary-nav { border-color: #e1e7ee; background: rgba(248, 250, 252, .95); box-shadow: 0 10px 30px rgba(15, 35, 55, .045); } html:not([data-p7-theme="dark"]) body.home .p7-nav-list > li > a:hover, html:not([data-p7-theme="dark"]) body.home .p7-nav-list > .current-menu-item > a, html:not([data-p7-theme="dark"]) body.home .p7-nav-list > .current-menu-ancestor > a { color: var(--nv-aurora-deep); } html:not([data-p7-theme="dark"]) body.home .p7-nav-list > .current-menu-item > a::after, html:not([data-p7-theme="dark"]) body.home .p7-nav-list > .current-menu-ancestor > a::after { background: linear-gradient(90deg, var(--nv-aurora-deep), var(--nv-aurora-primary)); box-shadow: 0 0 12px rgba(var(--nv-aurora-rgb), .22); } html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-nav-list .sub-menu { border-color: #d8e1ea; background: rgba(255, 255, 255, .98); box-shadow: 0 28px 70px rgba(15, 35, 55, .14); } html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-nav-list .sub-menu a { color: #344054; } html:not([data-p7-theme="dark"]) body.home .p7-site-header .p7-nav-list .sub-menu a:hover { background: #eef4fa; color: var(--nv-aurora-deep); } /* Appearance tray continues the porcelain system instead of dropping back into dark glass while light mode is active. */ html:not([data-p7-theme="dark"]) body.home .p7-appearance-panel { border-color: #d8e1ea; background: rgba(248, 250, 252, .96); box-shadow: 0 28px 70px rgba(15, 35, 55, .14); } html:not([data-p7-theme="dark"]) body.home .p7-appearance-card { border-color: #d7e0e9; background: #ffffff; box-shadow: 0 14px 34px rgba(15, 35, 55, .07), inset 0 1px 0 #fff; } /* Hero: luminous civic canvas. Amber is a signal, not a fill colour. */ html:not([data-p7-theme="dark"]) body.home .p7-hero { background: radial-gradient(820px 520px at 7% 10%, rgba(var(--nv-aurora-rgb), .13), transparent 64%), radial-gradient(680px 520px at 94% 22%, rgba(var(--nv-aurora-rgb), .075), transparent 66%), radial-gradient(520px 400px at 78% 92%, rgba(95, 116, 149, .045), transparent 70%), linear-gradient(145deg, #ffffff 0%, #f4f7fb 48%, #eef3f8 100%); border-bottom: 1px solid #dce3ea; } html:not([data-p7-theme="dark"]) body.home .p7-hero::before { background-image: linear-gradient(rgba(15, 46, 78, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 46, 78, .028) 1px, transparent 1px); background-size: 78px 78px; mask-image: radial-gradient(ellipse 78% 82% at 72% 28%, #000 4%, transparent 75%); opacity: .72; } html:not([data-p7-theme="dark"]) body.home .p7-hero::after { border-color: rgba(var(--nv-aurora-rgb), .16); box-shadow: 0 0 0 86px rgba(var(--nv-aurora-rgb), .018), 0 0 110px rgba(var(--nv-aurora-rgb), .06); } html:not([data-p7-theme="dark"]) body.home .p7-kicker, html:not([data-p7-theme="dark"]) body.home .p7-hero .p7-eyebrow { color: var(--nv-aurora-deep); } html:not([data-p7-theme="dark"]) body.home .p7-hero h1 { color: #101828; text-shadow: none; } html:not([data-p7-theme="dark"]) body.home .p7-hero h1 span { background: linear-gradient(95deg, var(--nv-aurora-deep) 0%, var(--nv-aurora-primary) 58%, var(--nv-aurora-secondary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } html:not([data-p7-theme="dark"]) body.home .p7-hero-copy > p { color: #52606d; } html:not([data-p7-theme="dark"]) body.home .p7-hero .p7-button--primary { border-color: var(--nv-aurora-deep); background: var(--nv-aurora-deep); color: #ffffff; box-shadow: 0 12px 28px rgba(16, 40, 64, .18); } html:not([data-p7-theme="dark"]) body.home .p7-hero .p7-button--primary:hover { border-color: var(--nv-aurora-secondary); background: var(--nv-aurora-secondary); box-shadow: 0 16px 34px rgba(16, 40, 64, .22); } html:not([data-p7-theme="dark"]) body.home .p7-hero .p7-button--secondary { border-color: #cbd5e1; background: rgba(255, 255, 255, .72); color: #344054; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } html:not([data-p7-theme="dark"]) body.home .p7-command-panel { border-color: #d7e0e9; background: rgba(255, 255, 255, .86); box-shadow: 0 26px 66px rgba(15, 35, 55, .11), inset 0 1px 0 rgba(255,255,255,.94); backdrop-filter: blur(18px) saturate(112%); } html:not([data-p7-theme="dark"]) body.home .p7-command-row { border-color: #e5eaf0; color: #1d2939; } html:not([data-p7-theme="dark"]) body.home .p7-command-row__icon { border-color: rgba(var(--nv-aurora-rgb), .18); background: #eaf2fb; color: var(--nv-aurora-deep); } html:not([data-p7-theme="dark"]) body.home .p7-command-row--link:hover { background: linear-gradient(90deg, rgba(var(--nv-aurora-rgb), .075), rgba(255,255,255,0)); } /* Digest and information surfaces read as a single calm daylight system. */ html:not([data-p7-theme="dark"]) body.home .p7-digest { background: #f8fafc; } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile, html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature { border-color: #dce3ea; background: linear-gradient(155deg, #ffffff, #f7f9fc); color: #1d2939; box-shadow: 0 14px 34px rgba(15, 35, 55, .065), inset 0 1px 0 #fff; } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature { border-color: rgba(var(--nv-aurora-rgb), .24); background: linear-gradient(150deg, #f5f9fd, #eaf2fb); } html:not([data-p7-theme="dark"]) body.home .p7-digest__tile--feature strong { color: var(--nv-aurora-deep); } /* GEO: parchment spatial canvas with restrained signal geometry. */ html:not([data-p7-theme="dark"]) body.home .p7-local-map--canvas { border-color: #d6e0ea; background: radial-gradient(700px 500px at 16% 26%, rgba(var(--nv-aurora-rgb), .105), transparent 68%), radial-gradient(620px 460px at 88% 80%, rgba(47, 79, 109, .045), transparent 72%), linear-gradient(148deg, #f8fafc 0%, #eef3f8 58%, #f5f8fb 100%); color: #1d2939; } html:not([data-p7-theme="dark"]) body.home .p7-local-map--canvas::before { background-image: linear-gradient(rgba(36, 70, 104, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 70, 104, .045) 1px, transparent 1px); } html:not([data-p7-theme="dark"]) body.home .p7-map-canvas--canvas { background: radial-gradient(circle at 52% 46%, rgba(var(--nv-aurora-rgb), .09), transparent 31%), rgba(255,255,255,.20); } html:not([data-p7-theme="dark"]) body.home .p7-map-shape path { fill: rgba(var(--nv-aurora-rgb), .18); stroke: var(--nv-aurora-deep); filter: drop-shadow(0 0 9px rgba(var(--nv-aurora-rgb), .18)); } html:not([data-p7-theme="dark"]) body.home .p7-map-stage:hover .p7-map-shape path { fill: rgba(var(--nv-aurora-rgb), .25); stroke: var(--nv-aurora-deep); filter: drop-shadow(0 0 14px rgba(var(--nv-aurora-rgb), .24)); } html:not([data-p7-theme="dark"]) body.home .p7-map-panel--floating, html:not([data-p7-theme="dark"]) body.home .p7-map-expand--floating { border-color: #d6e0ea; background: rgba(255, 255, 255, .88); color: #1d2939; box-shadow: 0 24px 60px rgba(15, 35, 55, .10), inset 0 1px 0 rgba(255,255,255,.9); } /* App promo: premium editorial surface, not another dark slab. */ html:not([data-p7-theme="dark"]) body.home .p7-app-promo { background: #f8fafc; } html:not([data-p7-theme="dark"]) body.home .p7-app-promo__shell { border-color: #d6e0ea; background: radial-gradient(640px 440px at 88% 14%, rgba(var(--nv-aurora-rgb), .12), transparent 68%), radial-gradient(520px 410px at 12% 94%, rgba(47, 79, 109, .04), transparent 72%), linear-gradient(140deg, #ffffff 0%, #f3f7fb 56%, #eaf2f8 100%); box-shadow: 0 34px 90px rgba(15, 35, 55, .12), inset 0 1px 0 rgba(255,255,255,.9); } html:not([data-p7-theme="dark"]) body.home .p7-app-promo__shell::before { background: linear-gradient(90deg, transparent, rgba(var(--nv-aurora-rgb), .75), rgba(var(--nv-aurora-rgb), .36), transparent); box-shadow: 0 0 20px rgba(var(--nv-aurora-rgb), .17); } html:not([data-p7-theme="dark"]) body.home .p7-app-promo__copy h2 { color: #101828; } html:not([data-p7-theme="dark"]) body.home .p7-app-promo__copy > p { color: #52606d; } html:not([data-p7-theme="dark"]) body.home .p7-app-benefits li { border-color: #dce3ea; background: rgba(255, 255, 255, .68); } html:not([data-p7-theme="dark"]) body.home .p7-app-benefits strong { color: #1d2939; } html:not([data-p7-theme="dark"]) body.home .p7-app-benefits small, html:not([data-p7-theme="dark"]) body.home .p7-app-pending-badge { color: #52606d; } /* Keep skyline/footer as the deliberate evening sign-off. Its limited footprint now reads as a finale rather than making light mode dark. */ html:not([data-p7-theme="dark"]) body.home .p7-city-signature { border-top-color: #cbd5e1; } } /* ============================================================================ Novarius 0.9.4.3.1 — Surface Authority Fix Root cause fixed: legacy Civic Aurora desktop polish used later, more specific body.home rules with hard-coded surfaces. The selected data-p7-surface now owns page/hero/section/panel/map/app atmosphere at every breakpoint. ============================================================================ */ body.p7portal, body.home { background: var(--p7-page-bg, var(--p7-paper)); background-attachment: fixed; } @media (min-width: 1181px) { html[data-p7-surface] body.home { background: var(--p7-page-bg, var(--p7-paper)); } html[data-p7-surface] body.home .p7-site-header { background: var(--p7-header-bg, var(--p7-card)); border-bottom-color: var(--p7-border); } html[data-p7-surface] body.home .p7-primary-nav { background: var(--p7-nav-bg, var(--p7-card)); border-color: var(--p7-border); } html[data-p7-surface] body.home .p7-appearance-panel, html[data-p7-surface] body.home .p7-appearance-card, html[data-p7-surface] body.home .p7-command-panel, html[data-p7-surface] body.home .p7-map-panel--floating, html[data-p7-surface] body.home .p7-map-expand--floating { background: var(--p7-panel-bg, var(--p7-card)); border-color: var(--p7-border); } html[data-p7-surface] body.home .p7-hero { background: var(--p7-hero-bg, var(--p7-page-bg)); border-bottom-color: var(--p7-border); } html[data-p7-surface] body.home .p7-digest, html[data-p7-surface] body.home .p7-section--news, html[data-p7-surface] body.home .p7-services--premium, html[data-p7-surface] body.home .p7-app-promo { background: var(--p7-section-bg, var(--p7-paper)); } html[data-p7-surface] body.home .p7-digest__tile, html[data-p7-surface] body.home .p7-digest__tile--feature, html[data-p7-surface] body.home .p7-smart-news-card, html[data-p7-surface] body.home .p7-rail-card, html[data-p7-surface] body.home .p7-topic-chip { background-color: var(--p7-card); border-color: var(--p7-border); } html[data-p7-surface] body.home .p7-local-map--canvas { background: var(--p7-map-bg, var(--p7-page-bg)); border-color: var(--p7-border); } html[data-p7-surface] body.home .p7-map-canvas--canvas { background: color-mix(in srgb, var(--p7-card) 62%, transparent); } html[data-p7-surface] body.home .p7-app-promo__shell { background: var(--p7-app-bg, var(--p7-card)); border-color: var(--p7-border); } } /* Mobile/tablet also get a visible atmospheric canvas rather than only a component-token change. */ @media (max-width: 1180px) { html[data-p7-surface] body, html[data-p7-surface] body.home, html[data-p7-surface] .p7-main { background: var(--p7-page-bg, var(--p7-paper)); } html[data-p7-surface] body.home .p7-hero { background: var(--p7-hero-bg, var(--p7-page-bg)); } html[data-p7-surface] body.home .p7-digest, html[data-p7-surface] body.home .p7-section--news, html[data-p7-surface] body.home .p7-app-promo { background: var(--p7-section-bg, var(--p7-paper)); } }