New profile tabs
Moved Solar model to Why box
This commit is contained in:
fraxle
2026-06-05 03:46:16 +01:00
parent 714eb109fd
commit f9b5c2b248
7 changed files with 240 additions and 158 deletions
+18 -8
View File
@@ -7,21 +7,15 @@
.utci-header {
display: grid;
grid-template-columns: 1fr auto 1fr; /* left | dial | why */
grid-template-areas:
"hleft dial hright"
". env .";
grid-template-areas: "hleft dial hright";
column-gap: 32px;
row-gap: 6px;
align-items: center;
padding-bottom: 6px;
margin-bottom: 6px;
}
/* Side columns occupy only the dial's row, so they vertically centre against
the dial itself; the environment selector drops to its own row beneath. */
.header-left { grid-area: hleft; }
.scope-col { grid-area: dial; }
.scope-env-bar { grid-area: env; }
.header-right { grid-area: hright; }
/* Left column — wordmark, tagline, search and location stacked together */
@@ -276,10 +270,15 @@
}
.scope-env-row .cs-panel,
.scope-env-row .cs-option {
.scope-env-row .cs-option,
.insight-env-footer .cs-panel,
.insight-env-footer .cs-option {
text-align: center;
}
.insight-env-footer .cs-btn.on:hover .cs-btn-overlay { opacity: 1; }
.insight-env-footer .cs-btn .cs-btn-label { position: relative; z-index: 1; }
/* Per-environment gradient themes — !important keeps the gradient fixed
under the brass hover overlay (ui.css :hover rules load later). */
.scope-env-row[data-env="open"] .cs-btn.on { background: linear-gradient(135deg, #5a8a28 0%, #b8d860 100%) !important; border-color: #4a7818 !important; color: #fff; }
@@ -291,8 +290,19 @@
.scope-env-row[data-env="openwater"] .cs-btn.on { background: linear-gradient(135deg, #0c4878 0%, #2898d8 100%) !important; border-color: #0c4878 !important; color: #fff; }
.scope-env-row[data-env="urban"] .cs-btn.on { background: linear-gradient(135deg, #4a5568 0%, #a89880 100%) !important; border-color: #3a4455 !important; color: #fff; }
/* Duplicate gradient rules for the Solar model button inside the insight panel */
.insight-env-footer[data-env="open"] .cs-btn.on { background: linear-gradient(135deg, #5a8a28 0%, #b8d860 100%) !important; border-color: #4a7818 !important; color: #fff; }
.insight-env-footer[data-env="forest"] .cs-btn.on { background: linear-gradient(135deg, #1b5e3b 0%, #57bf8a 100%) !important; border-color: #1b5e3b !important; color: #fff; }
.insight-env-footer[data-env="alpine"] .cs-btn.on { background: linear-gradient(135deg, #a8cfe8 0%, #dff0fa 100%) !important; border-color: #6aaedd !important; color: #1a3a58; }
.insight-env-footer[data-env="beach"] .cs-btn.on { background: linear-gradient(135deg, #2a8fc8 0%, #e8d87a 100%) !important; border-color: #1e78b0 !important; color: #fff; }
.insight-env-footer[data-env="river"] .cs-btn.on { background: linear-gradient(135deg, #2e6e5e 0%, #78c4a8 100%) !important; border-color: #2e6e5e !important; color: #fff; }
.insight-env-footer[data-env="desert"] .cs-btn.on { background: linear-gradient(135deg, #b86820 0%, #e8c458 100%) !important; border-color: #a05818 !important; color: #fff; }
.insight-env-footer[data-env="openwater"] .cs-btn.on { background: linear-gradient(135deg, #0c4878 0%, #2898d8 100%) !important; border-color: #0c4878 !important; color: #fff; }
.insight-env-footer[data-env="urban"] .cs-btn.on { background: linear-gradient(135deg, #4a5568 0%, #a89880 100%) !important; border-color: #3a4455 !important; color: #fff; }
/* On hover the brass overlay covers the interior — force white text for contrast */
.scope-env-row .cs-btn.on:hover { color: #fff; }
.insight-env-footer .cs-btn.on:hover { color: #fff; }
/* The search box on the right of the header */
.utci-search-wrap {