1729 lines
62 KiB
CSS
1729 lines
62 KiB
CSS
|
|
:root {
|
|
--ink: #26342c;
|
|
--muted: #737b72;
|
|
--paper: #fafbf6;
|
|
--line: #d8ded4;
|
|
--accent: #365944
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--ink);
|
|
background: #e7ebe3
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
font: inherit
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
color: inherit
|
|
}
|
|
|
|
button:focus-visible,
|
|
select:focus-visible,
|
|
input:focus-visible {
|
|
outline: 3px solid #91aa92;
|
|
outline-offset: 3px
|
|
}
|
|
|
|
#view {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
touch-action: none
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
left: 32px;
|
|
top: 29px;
|
|
pointer-events: none
|
|
}
|
|
|
|
.eyebrow {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 2.6px;
|
|
color: #647669;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px
|
|
}
|
|
|
|
.dot {
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 50%;
|
|
background: #536e57
|
|
}
|
|
|
|
h1 {
|
|
font-size: 31px;
|
|
font-weight: 500;
|
|
letter-spacing: -1.1px;
|
|
line-height: 1.13;
|
|
margin: 10px 0 7px
|
|
}
|
|
|
|
.sub {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
line-height: 1.5
|
|
}
|
|
|
|
.metrics {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-top: 20px
|
|
}
|
|
|
|
.metric strong {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
letter-spacing: -.4px
|
|
}
|
|
|
|
.metric small {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.6px;
|
|
color: var(--muted)
|
|
}
|
|
|
|
.topright {
|
|
position: fixed;
|
|
right: 27px;
|
|
top: 28px;
|
|
display: flex;
|
|
gap: 8px
|
|
}
|
|
|
|
.btn {
|
|
border: 1px solid #d4dcd1;
|
|
background: #f9fbf5ed;
|
|
border-radius: 9px;
|
|
padding: 10px 14px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
box-shadow: 0 2px 8px #243c2210
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #fff
|
|
}
|
|
|
|
.btn.primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: white
|
|
}
|
|
|
|
.btn.active {
|
|
background: #dfebdf;
|
|
border-color: #99af9a
|
|
}
|
|
|
|
.icon {
|
|
width: 37px;
|
|
height: 37px;
|
|
padding: 0;
|
|
font-size: 16px
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 32px;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 11px;
|
|
max-width: calc(100% - 32px)
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 7px;
|
|
border: 1px solid #ffffffb0;
|
|
background: #f9fbf6ed;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 34px #24381e16;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.tool {
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 10px 13px;
|
|
font-size: 12px;
|
|
border-radius: 8px
|
|
}
|
|
|
|
.tool.active {
|
|
background: var(--accent);
|
|
color: white
|
|
}
|
|
|
|
.tool:hover {
|
|
background: #e8eee5
|
|
}
|
|
|
|
.tool.active:hover {
|
|
background: #365944
|
|
}
|
|
|
|
.divider {
|
|
width: 1px;
|
|
height: 21px;
|
|
background: #dce2d8;
|
|
margin: 0 4px
|
|
}
|
|
|
|
.help {
|
|
font-size: 10px;
|
|
letter-spacing: .25px;
|
|
color: #687567;
|
|
text-align: center;
|
|
background: #e7ebe3c0;
|
|
border-radius: 6px;
|
|
padding: 4px 9px
|
|
}
|
|
|
|
.compass {
|
|
position: fixed;
|
|
right: 29px;
|
|
bottom: 38px;
|
|
width: 84px;
|
|
height: 84px
|
|
}
|
|
|
|
.compass svg {
|
|
width: 84px;
|
|
height: 84px;
|
|
overflow: visible
|
|
}
|
|
|
|
.compass text {
|
|
font: 9px Arial;
|
|
fill: #596959
|
|
}
|
|
|
|
.compass line {
|
|
stroke: #b4c0ae;
|
|
stroke-width: 1
|
|
}
|
|
|
|
#northArrow {
|
|
fill: #365944
|
|
}
|
|
|
|
#direction {
|
|
position: fixed;
|
|
left: 32px;
|
|
bottom: 37px;
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
color: #576d5c
|
|
}
|
|
|
|
.tag {
|
|
font-size: 8px;
|
|
letter-spacing: 1.8px;
|
|
color: #7d8979;
|
|
display: block
|
|
}
|
|
|
|
.panel {
|
|
position: fixed;
|
|
right: 27px;
|
|
top: 77px;
|
|
max-height: calc(100% - 184px);
|
|
width: 337px;
|
|
overflow: auto;
|
|
background: #fafcf6f5;
|
|
border: 1px solid #fff;
|
|
border-radius: 15px;
|
|
box-shadow: 0 12px 45px #29392525;
|
|
padding: 23px;
|
|
display: none
|
|
}
|
|
|
|
.panel.open {
|
|
display: block
|
|
}
|
|
|
|
.panel h2 {
|
|
font-size: 19px;
|
|
letter-spacing: -.3px;
|
|
font-weight: 500;
|
|
margin: 0 0 10px
|
|
}
|
|
|
|
.panel h3 {
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.8px;
|
|
color: #70816e;
|
|
margin: 23px 0 10px
|
|
}
|
|
|
|
.panel p {
|
|
font-size: 12px;
|
|
line-height: 1.65;
|
|
color: #667261;
|
|
margin: 7px 0
|
|
}
|
|
|
|
.panel .row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid #e0e6db;
|
|
padding: 9px 0
|
|
}
|
|
|
|
.swatches {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px
|
|
}
|
|
|
|
.swatches label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
font-size: 10px;
|
|
color: #667261
|
|
}
|
|
|
|
input[type=color] {
|
|
width: 100%;
|
|
height: 30px;
|
|
border: 0;
|
|
background: none;
|
|
padding: 0;
|
|
cursor: pointer
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #d6e0d0;
|
|
border-radius: 6px;
|
|
background: #f5f8f0;
|
|
color: #334931;
|
|
font-size: 12px
|
|
}
|
|
|
|
.note {
|
|
border-left: 2px solid #a5b99d;
|
|
padding-left: 11px
|
|
}
|
|
|
|
.panel .buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 15px;
|
|
flex-wrap: wrap
|
|
}
|
|
|
|
.status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-size: 10px;
|
|
color: #6c7f68;
|
|
margin-top: 16px
|
|
}
|
|
|
|
#loading {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #e7ebe3;
|
|
z-index: 10;
|
|
gap: 20px
|
|
}
|
|
|
|
.spinner {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
border: 2px solid #bccabb;
|
|
border-top-color: #365944;
|
|
animation: spin 1s linear infinite
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg)
|
|
}
|
|
}
|
|
|
|
#loading .label {
|
|
font-size: 12px;
|
|
color: #597054
|
|
}
|
|
|
|
#loading.error {
|
|
padding: 30px;
|
|
text-align: center
|
|
}
|
|
|
|
.errorDetail {
|
|
font-size: 12px;
|
|
max-width: 480px;
|
|
line-height: 1.7;
|
|
color: #51624d
|
|
}
|
|
|
|
#measure {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none
|
|
}
|
|
|
|
#measure line {
|
|
stroke: #3f5b42;
|
|
stroke-width: 1
|
|
}
|
|
|
|
#measure circle {
|
|
fill: #456749
|
|
}
|
|
|
|
#measure text {
|
|
fill: #3a553d;
|
|
font: 12px Arial;
|
|
paint-order: stroke;
|
|
stroke: #eff3e9;
|
|
stroke-width: 5px;
|
|
stroke-linejoin: round
|
|
}
|
|
|
|
#toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 28px;
|
|
transform: translateX(-50%);
|
|
font-size: 12px;
|
|
background: #2f4739;
|
|
color: #fff;
|
|
padding: 11px 17px;
|
|
border-radius: 9px;
|
|
opacity: 0;
|
|
transition: opacity .25s;
|
|
pointer-events: none
|
|
}
|
|
|
|
.full {
|
|
display: none
|
|
}
|
|
|
|
@media(max-width:850px) {
|
|
header {
|
|
left: 20px;
|
|
top: 22px
|
|
}
|
|
|
|
.topright {
|
|
right: 18px;
|
|
top: 22px
|
|
}
|
|
|
|
h1 {
|
|
font-size: 26px
|
|
}
|
|
|
|
.metrics {
|
|
gap: 19px;
|
|
margin-top: 15px
|
|
}
|
|
|
|
.metric strong {
|
|
font-size: 16px
|
|
}
|
|
|
|
.bottom {
|
|
bottom: 21px
|
|
}
|
|
|
|
.tool {
|
|
padding: 10px
|
|
}
|
|
|
|
.compass {
|
|
display: none
|
|
}
|
|
|
|
#direction {
|
|
bottom: 114px;
|
|
left: 20px
|
|
}
|
|
|
|
.panel {
|
|
right: 18px;
|
|
top: 69px;
|
|
width: 320px
|
|
}
|
|
|
|
.help {
|
|
font-size: 9px
|
|
}
|
|
|
|
.optional {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
@media(max-width:520px) {
|
|
header {
|
|
left: 16px;
|
|
top: 19px
|
|
}
|
|
|
|
.eyebrow {
|
|
font-size: 8px;
|
|
letter-spacing: 1.7px
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px
|
|
}
|
|
|
|
.sub {
|
|
font-size: 10px;
|
|
max-width: 210px
|
|
}
|
|
|
|
.metrics {
|
|
gap: 16px;
|
|
margin-top: 13px
|
|
}
|
|
|
|
.metric strong {
|
|
font-size: 15px
|
|
}
|
|
|
|
.metric small {
|
|
font-size: 8px;
|
|
letter-spacing: 1px
|
|
}
|
|
|
|
.topright {
|
|
right: 13px;
|
|
top: 18px
|
|
}
|
|
|
|
.topright .btn.primary {
|
|
font-size: 10px;
|
|
padding: 11px 10px
|
|
}
|
|
|
|
.topright .icon {
|
|
width: 33px
|
|
}
|
|
|
|
.toolbar {
|
|
gap: 0;
|
|
padding: 5px;
|
|
border-radius: 12px
|
|
}
|
|
|
|
.tool {
|
|
padding: 10px 9px;
|
|
font-size: 10px
|
|
}
|
|
|
|
.divider {
|
|
margin: 0 1px
|
|
}
|
|
|
|
.bottom {
|
|
bottom: 17px;
|
|
gap: 8px
|
|
}
|
|
|
|
.help {
|
|
max-width: 320px;
|
|
font-size: 9px;
|
|
line-height: 1.5
|
|
}
|
|
|
|
#direction {
|
|
bottom: 100px;
|
|
left: 17px;
|
|
font-size: 10px
|
|
}
|
|
|
|
.panel {
|
|
top: 62px;
|
|
right: 12px;
|
|
left: 12px;
|
|
width: auto;
|
|
max-height: calc(100% - 159px);
|
|
padding: 20px
|
|
}
|
|
|
|
.btn {
|
|
font-size: 11px
|
|
}
|
|
|
|
.measureWord {
|
|
display: none
|
|
}
|
|
|
|
.topright .downloadText {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--solar: #b8812d;
|
|
--solar-soft: #f4e9cf;
|
|
--sun-side: 376px;
|
|
--sun-sheet: 340px
|
|
}
|
|
|
|
body.sun-open #view,
|
|
body.sun-open #measure,
|
|
body.sun-open #sunOverlay {
|
|
width: calc(100% - var(--sun-side))
|
|
}
|
|
|
|
#sunOverlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
overflow: hidden
|
|
}
|
|
|
|
body.sun-open .bottom {
|
|
left: calc((100% - var(--sun-side))/2)
|
|
}
|
|
|
|
body.sun-open .compass {
|
|
right: calc(var(--sun-side) + 18px)
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 30px;
|
|
letter-spacing: -1px
|
|
}
|
|
|
|
header .metrics {
|
|
margin-top: 18px;
|
|
gap: 22px
|
|
}
|
|
|
|
.solar-mark {
|
|
color: var(--solar);
|
|
font-size: 16px;
|
|
line-height: 1
|
|
}
|
|
|
|
#sunToggle {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
font-weight: 600
|
|
}
|
|
|
|
#sunToggle.active {
|
|
background: #f3e8ce;
|
|
border-color: #d8bd85
|
|
}
|
|
|
|
#sunPanel {
|
|
display: none;
|
|
position: fixed;
|
|
right: 16px;
|
|
top: 79px;
|
|
bottom: 20px;
|
|
width: 348px;
|
|
padding: 22px;
|
|
background: #fafbf7f7;
|
|
border: 1px solid #fff;
|
|
border-radius: 18px;
|
|
box-shadow: 0 12px 45px #29392517;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #c1cabe transparent;
|
|
z-index: 3
|
|
}
|
|
|
|
#sunPanel.open {
|
|
display: block
|
|
}
|
|
|
|
.sun-panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
margin-bottom: 17px
|
|
}
|
|
|
|
.sun-kicker {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
color: #8d753d;
|
|
margin-bottom: 6px
|
|
}
|
|
|
|
#sunPanel h2 {
|
|
font-size: 23px;
|
|
letter-spacing: -.65px;
|
|
font-weight: 500;
|
|
margin: 0
|
|
}
|
|
|
|
#sunPanel .close-panel {
|
|
border: 0;
|
|
background: #eef1e9;
|
|
border-radius: 50%;
|
|
width: 29px;
|
|
height: 29px;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
color: #6a7466
|
|
}
|
|
|
|
.sun-date-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 105px;
|
|
gap: 12px;
|
|
align-items: end
|
|
}
|
|
|
|
.sun-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
font-size: 10px;
|
|
color: #6f7969
|
|
}
|
|
|
|
.sun-field input:not([type=range]),
|
|
.sun-field select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 9px 9px;
|
|
height: 39px;
|
|
border: 1px solid #d9e0d2;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #354232;
|
|
font-size: 12px
|
|
}
|
|
|
|
.sun-field #sunClock {
|
|
font-size: 20px;
|
|
letter-spacing: -.6px;
|
|
padding: 6px;
|
|
width: 105px
|
|
}
|
|
|
|
.sun-seasons {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 5px;
|
|
margin-top: 11px
|
|
}
|
|
|
|
.sun-seasons button {
|
|
border: 1px solid #e0e4d9;
|
|
border-radius: 7px;
|
|
background: #f4f6ef;
|
|
padding: 8px 2px;
|
|
font-size: 10px;
|
|
color: #53624d
|
|
}
|
|
|
|
.sun-seasons button.active {
|
|
background: var(--solar-soft);
|
|
border-color: #dac08c;
|
|
color: #765923
|
|
}
|
|
|
|
.sun-status-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
color: #7b826f;
|
|
margin: 16px 0 5px;
|
|
gap: 8px
|
|
}
|
|
|
|
#dayState {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #856527
|
|
}
|
|
|
|
#dayState:before {
|
|
content: '';
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #c3933c
|
|
}
|
|
|
|
.sun-graph {
|
|
display: block;
|
|
width: 100%;
|
|
height: 85px;
|
|
cursor: crosshair;
|
|
touch-action: none
|
|
}
|
|
|
|
.sun-scrub {
|
|
width: 100%;
|
|
accent-color: var(--solar);
|
|
margin: 8px 0 3px;
|
|
cursor: ew-resize;
|
|
height: 22px
|
|
}
|
|
|
|
.sun-ticks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 9px;
|
|
color: #8b9283
|
|
}
|
|
|
|
.sun-play-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 90px 46px;
|
|
gap: 7px;
|
|
margin-top: 14px
|
|
}
|
|
|
|
.sun-play-row button,
|
|
.sun-play-row select {
|
|
height: 36px;
|
|
padding: 7px 9px;
|
|
font-size: 11px;
|
|
border-radius: 8px;
|
|
border: 1px solid #d6ddce;
|
|
background: #f2f5ec;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.sun-play-row #sunPlay {
|
|
background: #3c5d48;
|
|
color: white;
|
|
border-color: #3c5d48;
|
|
font-weight: 600
|
|
}
|
|
|
|
.sun-play-row #sunSpeed {
|
|
font-size: 10px;
|
|
padding: 7px 4px
|
|
}
|
|
|
|
.sun-readouts {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
margin-top: 20px;
|
|
padding-top: 17px;
|
|
border-top: 1px solid #e1e5d9
|
|
}
|
|
|
|
.sun-stat {
|
|
font-size: 10px;
|
|
color: #7b8372
|
|
}
|
|
|
|
.sun-stat strong {
|
|
display: block;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
letter-spacing: -.7px;
|
|
color: #324630;
|
|
margin: 4px 0 3px;
|
|
font-variant-numeric: tabular-nums
|
|
}
|
|
|
|
.sun-stat small {
|
|
font-size: 10px;
|
|
color: #929883
|
|
}
|
|
|
|
.sun-events {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 10px;
|
|
color: #718066;
|
|
margin: 16px 0 2px;
|
|
padding: 12px 0;
|
|
border-top: 1px solid #e5e8df;
|
|
border-bottom: 1px solid #e5e8df
|
|
}
|
|
|
|
.sun-events b {
|
|
font-weight: 600;
|
|
color: #3e563b;
|
|
margin-left: 4px
|
|
}
|
|
|
|
.sun-options {
|
|
display: flex;
|
|
gap: 17px;
|
|
flex-wrap: wrap;
|
|
margin: 14px 0 12px
|
|
}
|
|
|
|
.sun-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
color: #52684d;
|
|
cursor: pointer
|
|
}
|
|
|
|
.sun-options input {
|
|
accent-color: #597447;
|
|
margin: 0;
|
|
width: 14px;
|
|
height: 14px
|
|
}
|
|
|
|
.sun-hint {
|
|
font-size: 10px;
|
|
line-height: 1.6;
|
|
color: #84907a;
|
|
margin: 8px 0 13px
|
|
}
|
|
|
|
.sun-advanced {
|
|
margin-top: 15px;
|
|
border-top: 1px solid #e1e5d9;
|
|
padding-top: 13px
|
|
}
|
|
|
|
.sun-advanced summary {
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
color: #4d6645;
|
|
padding: 3px 0
|
|
}
|
|
|
|
.sun-advanced .fields {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-top: 14px
|
|
}
|
|
|
|
.sun-advanced .full-row {
|
|
grid-column: 1 / -1
|
|
}
|
|
|
|
.sun-advanced p {
|
|
font-size: 10px;
|
|
line-height: 1.65;
|
|
color: #7f8975;
|
|
margin: 10px 0
|
|
}
|
|
|
|
.sun-advanced a {
|
|
color: #536a4f
|
|
}
|
|
|
|
.sun-advanced .mini-btn {
|
|
font-size: 10px;
|
|
border: 1px solid #d2dbcb;
|
|
background: #f5f8ef;
|
|
border-radius: 7px;
|
|
padding: 8px 10px
|
|
}
|
|
|
|
.sun-export {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ced8c6;
|
|
border-radius: 8px;
|
|
background: #eef3e8;
|
|
font-size: 11px;
|
|
color: #47603e;
|
|
margin-top: 13px
|
|
}
|
|
|
|
.sun-footnote {
|
|
font-size: 9px;
|
|
line-height: 1.6;
|
|
color: #969d8b;
|
|
margin: 13px 0 0
|
|
}
|
|
|
|
#sunStamp {
|
|
position: fixed;
|
|
left: 32px;
|
|
top: 180px;
|
|
pointer-events: none;
|
|
color: #6c775f;
|
|
font-size: 11px;
|
|
line-height: 1.55
|
|
}
|
|
|
|
#sunStamp strong {
|
|
font-weight: 500;
|
|
color: #a07836;
|
|
font-variant-numeric: tabular-nums
|
|
}
|
|
|
|
#solarMessage {
|
|
color: #977026;
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
min-height: 0
|
|
}
|
|
|
|
#solarMessage:empty {
|
|
display: none
|
|
}
|
|
|
|
#panel {
|
|
z-index: 4
|
|
}
|
|
|
|
#sunOverlay text {
|
|
font: 10px Arial;
|
|
paint-order: stroke;
|
|
stroke: #f3f4e9;
|
|
stroke-width: 3px;
|
|
stroke-linejoin: round;
|
|
fill: #9a702d
|
|
}
|
|
|
|
#sunOverlay path,
|
|
#sunOverlay line {
|
|
vector-effect: non-scaling-stroke
|
|
}
|
|
|
|
body.night header,
|
|
body.night header h1 {
|
|
color: #d3dec9
|
|
}
|
|
|
|
body.night header .sub,
|
|
body.night header .metric small,
|
|
body.night header .eyebrow,
|
|
body.night #direction,
|
|
body.night #sunStamp {
|
|
color: #aab9a5
|
|
}
|
|
|
|
body.night #sunStamp strong {
|
|
color: #d6ba76
|
|
}
|
|
|
|
#toast {
|
|
z-index: 12;
|
|
top: 20px
|
|
}
|
|
|
|
@media(min-width:851px) {
|
|
.topright {
|
|
right: 20px;
|
|
top: 25px
|
|
}
|
|
|
|
.help {
|
|
font-size: 9px
|
|
}
|
|
|
|
.sun-open #direction {
|
|
bottom: 26px;
|
|
font-size: 10px
|
|
}
|
|
|
|
.sun-open .bottom {
|
|
bottom: 28px
|
|
}
|
|
|
|
.sun-open .compass {
|
|
bottom: 28px
|
|
}
|
|
|
|
.sun-open .toolbar .tool {
|
|
font-size: 11px;
|
|
padding: 10px 10px
|
|
}
|
|
}
|
|
|
|
@media(max-width:1100px) and (min-width:851px) {
|
|
header {
|
|
left: 22px;
|
|
top: 27px
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 25px
|
|
}
|
|
|
|
.metrics {
|
|
display: none !important
|
|
}
|
|
|
|
#sunStamp {
|
|
left: 22px;
|
|
top: 115px
|
|
}
|
|
|
|
.sun-open .compass {
|
|
display: none
|
|
}
|
|
|
|
.sun-open #direction {
|
|
display: none
|
|
}
|
|
|
|
.sun-open .toolbar .tool {
|
|
padding: 10px 7px;
|
|
font-size: 10px
|
|
}
|
|
}
|
|
|
|
@media(max-width:850px) {
|
|
:root {
|
|
--sun-sheet: min(42vh, 350px)
|
|
}
|
|
|
|
body.sun-open #view,
|
|
body.sun-open #measure,
|
|
body.sun-open #sunOverlay {
|
|
width: 100%;
|
|
height: calc(100% - var(--sun-sheet))
|
|
}
|
|
|
|
body.sun-open .bottom {
|
|
left: 50%;
|
|
bottom: calc(var(--sun-sheet) + 8px);
|
|
gap: 0
|
|
}
|
|
|
|
body.sun-open .help {
|
|
display: none
|
|
}
|
|
|
|
body.sun-open #direction {
|
|
display: none
|
|
}
|
|
|
|
body.sun-open .compass {
|
|
display: none
|
|
}
|
|
|
|
#sunPanel {
|
|
top: auto;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: var(--sun-sheet);
|
|
padding: 16px 21px 25px;
|
|
border-radius: 20px 20px 0 0;
|
|
box-shadow: 0 -8px 30px #26392514
|
|
}
|
|
|
|
.sun-panel-head {
|
|
display: none
|
|
}
|
|
|
|
.sun-date-row {
|
|
grid-template-columns: 1fr 120px;
|
|
gap: 16px
|
|
}
|
|
|
|
.sun-date-row .sun-field {
|
|
font-size: 9px
|
|
}
|
|
|
|
.sun-field #sunClock {
|
|
width: 100%;
|
|
font-size: 23px;
|
|
height: 40px
|
|
}
|
|
|
|
.sun-field input:not([type=range]) {
|
|
height: 40px
|
|
}
|
|
|
|
.sun-seasons {
|
|
margin-top: 9px
|
|
}
|
|
|
|
.sun-seasons button {
|
|
padding: 7px 0;
|
|
font-size: 10px
|
|
}
|
|
|
|
.sun-status-line {
|
|
margin: 12px 0 0
|
|
}
|
|
|
|
.sun-graph {
|
|
height: 62px
|
|
}
|
|
|
|
.sun-scrub {
|
|
margin: 4px 0 0
|
|
}
|
|
|
|
.sun-play-row {
|
|
margin-top: 10px;
|
|
grid-template-columns: 1fr 94px 51px
|
|
}
|
|
|
|
.sun-readouts {
|
|
margin-top: 15px;
|
|
padding-top: 12px
|
|
}
|
|
|
|
.sun-stat strong {
|
|
font-size: 23px
|
|
}
|
|
|
|
.sun-events {
|
|
margin-top: 13px
|
|
}
|
|
|
|
#sunStamp {
|
|
left: 18px;
|
|
top: 105px;
|
|
font-size: 10px
|
|
}
|
|
|
|
header {
|
|
left: 18px;
|
|
top: 19px
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 25px;
|
|
margin-top: 9px
|
|
}
|
|
|
|
.metrics {
|
|
display: none !important
|
|
}
|
|
|
|
header .sub {
|
|
max-width: 230px;
|
|
font-size: 10px
|
|
}
|
|
|
|
.topright {
|
|
right: 14px;
|
|
top: 19px;
|
|
gap: 6px
|
|
}
|
|
|
|
#saveGlb {
|
|
display: none
|
|
}
|
|
|
|
#sunToggle {
|
|
font-size: 10px;
|
|
padding: 10px 9px;
|
|
gap: 4px
|
|
}
|
|
|
|
.topright .icon {
|
|
width: 33px;
|
|
height: 33px
|
|
}
|
|
|
|
.sun-open .tool {
|
|
font-size: 10px;
|
|
padding: 9px 8px
|
|
}
|
|
|
|
.sun-open .bottom {
|
|
max-width: calc(100% - 16px)
|
|
}
|
|
|
|
#panel {
|
|
top: 66px;
|
|
bottom: 15px;
|
|
max-height: none
|
|
}
|
|
}
|
|
|
|
@media(max-width:420px) {
|
|
header h1 {
|
|
font-size: 23px
|
|
}
|
|
|
|
header .eyebrow {
|
|
font-size: 8px;
|
|
letter-spacing: 1.8px
|
|
}
|
|
|
|
#sunToggle .toggle-word {
|
|
display: none
|
|
}
|
|
|
|
#sunToggle {
|
|
width: 34px;
|
|
height: 34px;
|
|
justify-content: center;
|
|
padding: 0
|
|
}
|
|
|
|
.sun-open .tool {
|
|
padding: 9px 7px;
|
|
font-size: 10px
|
|
}
|
|
}
|
|
|
|
@media(max-height:500px) and (max-width:850px) {
|
|
:root {
|
|
--sun-sheet: 170px
|
|
}
|
|
|
|
header .sub,
|
|
#sunStamp {
|
|
display: none
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 21px
|
|
}
|
|
|
|
.sun-graph {
|
|
display: none
|
|
}
|
|
|
|
#sunPanel {
|
|
padding: 12px 20px
|
|
}
|
|
|
|
.sun-readouts {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
/* Optional surroundings: independent switches, all on when the page opens. */
|
|
.site-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 6px;
|
|
border: 1px solid #fff;
|
|
border-radius: 13px;
|
|
background: #f9fbf6f2;
|
|
box-shadow: 0 6px 24px #24381e13;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.site-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 9px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
font-size: 11px;
|
|
color: #596b55;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
}
|
|
|
|
.site-switch:hover {
|
|
background: #eef2e8;
|
|
}
|
|
|
|
.site-switch.selected {
|
|
background: #e1ecdc;
|
|
border-color: #b9cbb1;
|
|
color: #304d35;
|
|
}
|
|
|
|
.site-switch input {
|
|
appearance: none;
|
|
width: 13px;
|
|
height: 13px;
|
|
margin: 0;
|
|
border: 1px solid #a7b29f;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.site-switch input:checked {
|
|
background: #426448;
|
|
border-color: #426448;
|
|
}
|
|
|
|
.site-switch input:checked:after {
|
|
content: '\2713';
|
|
color: #fff;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.site-fit {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
flex-shrink: 0;
|
|
border: 0;
|
|
border-left: 1px solid #dce2d5;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: #59734e;
|
|
}
|
|
|
|
.site-fit:hover {
|
|
background: #e7eee1;
|
|
}
|
|
|
|
.site-fit svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
#siteMeta {
|
|
font-size: 9px;
|
|
letter-spacing: .1px;
|
|
color: #6e8066;
|
|
line-height: 1.2;
|
|
background: #f5f8eef0;
|
|
padding: 4px 8px;
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#siteMeta[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.bottom {
|
|
gap: 7px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.site-note {
|
|
margin-top: 14px;
|
|
border-top: 1px solid #dce4d5;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.site-note summary {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: #37563b;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.site-note p {
|
|
font-size: 11px;
|
|
}
|
|
|
|
@media(max-width:850px) {
|
|
.bottom {
|
|
max-width: calc(100% - 20px);
|
|
}
|
|
|
|
#direction {
|
|
bottom: 161px;
|
|
}
|
|
|
|
.site-controls {
|
|
gap: 2px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.site-switch {
|
|
font-size: 10px;
|
|
padding: 8px 8px;
|
|
gap: 5px;
|
|
}
|
|
|
|
body.sun-open .bottom {
|
|
gap: 5px;
|
|
}
|
|
|
|
#siteMeta {
|
|
font-size: 8px;
|
|
}
|
|
}
|
|
|
|
@media(max-width:520px) {
|
|
.bottom {
|
|
gap: 5px;
|
|
bottom: 12px;
|
|
}
|
|
|
|
.site-switch {
|
|
font-size: 9px;
|
|
padding: 8px 6px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.site-fit {
|
|
width: 27px;
|
|
height: 28px;
|
|
}
|
|
|
|
.site-controls {
|
|
gap: 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
.site-switch input {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.bottom .help {
|
|
display: none;
|
|
}
|
|
|
|
#direction {
|
|
bottom: 111px;
|
|
}
|
|
|
|
body.sun-open #siteMeta {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(max-width:360px) {
|
|
.site-switch {
|
|
font-size: 8.5px;
|
|
padding: 8px 4px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.site-fit {
|
|
width: 24px;
|
|
}
|
|
}
|
|
/* Fixed product palette, scoped to facade cladding only. */
|
|
.swatches { grid-template-columns: 1fr 1fr; }
|
|
.hardie-card { margin: 15px 0 17px; padding: 14px; border: 1px solid #d8ded4; border-radius: 11px; background: #ffffffb8; }
|
|
.hardie-kicker { font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: #677b61; margin-bottom: 8px; }
|
|
.hardie-card h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
|
|
.hardie-card .hardie-spec { font-size: 10px; line-height: 1.6; margin: 5px 0 10px; }
|
|
.hardie-preview { height: 48px; border-radius: 4px; background: #776e65; background-size: 400% 300%; background-position: 48% 48%; border: 1px solid #0002; box-shadow: inset 0 -3px 0 #0002, inset 0 1px 0 #fff2; }
|
|
.hardie-selection { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 9px 0 10px; color: #304835; }
|
|
.hardie-selection strong { font-size: 12px; font-weight: 600; }
|
|
.hardie-selection small { font-size: 9px; color: #778270; white-space: nowrap; }
|
|
.hardie-palette { border: 0; padding: 0; margin: 0; min-width: 0; }
|
|
.hardie-palette legend { font-size: 9px; color: #6d7b64; margin: 0 0 8px; padding: 0; }
|
|
.hardie-options { display: grid; grid-template-columns: 1fr; gap: 4px; }
|
|
.hardie-option { display: flex; align-items: center; gap: 8px; min-height: 33px; padding: 5px 8px; border: 1px solid #e1e6dd; border-radius: 6px; cursor: pointer; background: #fbfcf9; position: relative; }
|
|
.hardie-option:hover { border-color: #aabda1; background: #f4f7ef; }
|
|
.hardie-option.selected { background: #eaf1e5; border-color: #87a57c; }
|
|
.hardie-option:focus-within { outline: 2px solid #91aa92; outline-offset: 2px; }
|
|
.hardie-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
|
.hardie-chip { width: 22px; height: 21px; border-radius: 3px; flex-shrink: 0; border: 1px solid #0002; background: var(--chip); }
|
|
.hardie-option-name { font-size: 11px; flex: 1; line-height: 1.3; }
|
|
.hardie-option-code { font-size: 9px; color: #7d8577; font-variant-numeric: tabular-nums; }
|
|
.hardie-check { width: 11px; font-size: 12px; color: #365944; opacity: 0; }
|
|
.hardie-option.selected .hardie-check { opacity: 1; }
|
|
.hardie-card .hardie-scope { font-size: 10px; color: #6d7965; margin: 10px 0 7px; line-height: 1.5; }
|
|
.hardie-link { color: #365944; font-size: 11px; text-underline-offset: 3px; }
|
|
.hardie-detail-buttons { display: flex; gap: 6px; margin-top: 10px; }
|
|
.hardie-detail-buttons button { background: #f3f6ef; border: 1px solid #d6dfcf; border-radius: 6px; padding: 7px 8px; font-size: 10px; flex: 1; }
|
|
.hardie-detail-buttons button:hover { background: #e7eee0; }
|
|
.hardie-note { margin-top: 11px; border-top: 1px solid #e0e6da; padding-top: 8px; }
|
|
.hardie-note summary { font-size: 10px; cursor: pointer; color: #65765c; }
|
|
.hardie-card .hardie-note p { font-size: 10px; line-height: 1.55; }
|
|
.hardie-reference { width: 100%; height: auto; display: block; border-radius: 5px; margin: 8px 0; }
|
|
@media(max-width:360px) { .hardie-card { padding: 11px; } .hardie-option-code { font-size: 8px; } }
|
|
|
|
.hardie-structure-button { width: 100%; margin-top: 6px; padding: 7px; border: 1px solid #d6dfcf; border-radius: 6px; background: #f3f6ef; font-size: 10px; }
|
|
.hardie-preview-caption { font-size: 9px; color: #7a8372; margin-top: 4px; }
|
|
|
|
|
|
/* Optional interior. No source exterior selector is changed outside this state. */
|
|
#interiorLaunch{position:fixed;left:32px;top:225px;z-index:3;display:flex;align-items:center;gap:11px;padding:12px 17px;border:1px solid #b8c7b0;background:#fafcf6f5;border-radius:12px;box-shadow:0 5px 25px #263b2520;color:#365944;font-size:12px;font-weight:600}
|
|
#interiorLaunch svg{width:20px;height:20px}#interiorLaunch small{display:block;margin-top:4px;font-size:9px;font-weight:400;color:#7a8574;text-align:left}
|
|
#interiorLaunch:disabled{opacity:.6;cursor:wait}
|
|
.interior-heading,#interiorPanel,#interiorTools,#interiorLabels,#walkPad{display:none}
|
|
body.interior-active header,body.interior-active #interiorLaunch,body.interior-active .bottom,body.interior-active #direction,body.interior-active .compass,body.interior-active #measure,body.interior-active #sunStamp{display:none!important}
|
|
body.interior-active .interior-heading{display:flex;position:fixed;top:23px;left:25px;z-index:3;align-items:center;gap:17px;pointer-events:none}
|
|
.interior-heading button{pointer-events:auto;padding:11px 13px}.interior-heading .eyebrow{font-size:8px;letter-spacing:1.8px}.interior-heading h2{margin:5px 0 0;font-size:23px;font-weight:500;letter-spacing:-.65px;color:#2c4434}
|
|
body.interior-active:not(.interior-panel-closed):not(.sun-open) #view,body.interior-active:not(.interior-panel-closed):not(.sun-open) #sunOverlay{width:calc(100% - 340px)}
|
|
body.interior-active #interiorPanel{display:block;position:fixed;z-index:3;right:16px;top:78px;bottom:20px;width:308px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:20px;background:#fafcf7f7;border:1px solid #fff;box-shadow:0 10px 35px #263b2520;border-radius:16px}
|
|
body.interior-panel-closed #interiorPanel,body.interior-active.sun-open #interiorPanel{display:none}
|
|
.interior-panel-title{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0 0 12px}
|
|
.interior-panel-title h3{margin:0;font-size:16px;font-weight:500;letter-spacing:-.3px}.interior-panel-title span{font-size:9px;color:#75816f}
|
|
.int-kicker{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#7c8675;margin:20px 0 10px}
|
|
#interiorMap{width:100%;height:auto;display:block;border-radius:10px;background:#eff1e9;border:1px solid #e0e5d8}
|
|
#interiorMap .map-room{cursor:pointer;fill:#dcd4c1;stroke:#f5f4eb;stroke-width:2;transition:fill .15s}
|
|
#interiorMap .map-room:hover,#interiorMap .map-room.active{fill:#aebda2}
|
|
#interiorMap text{font:9px Arial;fill:#465743;pointer-events:none}
|
|
#interiorMap .map-wall{fill:#8e9986;pointer-events:none}
|
|
.int-map-hint{font-size:9px!important;line-height:1.5!important;margin:7px 0 0!important;color:#85917d!important}
|
|
.int-views{display:grid;grid-template-columns:1fr 1fr;gap:6px}
|
|
.int-views button{padding:11px 8px;text-align:left;border:1px solid #d9e0d2;border-radius:8px;background:#f2f6ed;color:#38523a;font-size:10px;line-height:1.35}
|
|
.int-views button.active{background:#dfe9d8;border-color:#a6ba99}.int-views button:hover{background:#e5ecde}
|
|
#interiorRoom{margin-top:2px;font-size:11px;background:#fff}
|
|
.int-options{display:grid;grid-template-columns:1fr;gap:10px;padding-top:14px;margin-top:16px;border-top:1px solid #e0e6d9}
|
|
.int-options label{font-size:11px;display:flex;align-items:center;gap:8px;color:#51654a}.int-options input{accent-color:#426448}
|
|
#interiorPanel p{font-size:10px;line-height:1.6;color:#77836e;margin:10px 0}
|
|
.int-source{font-size:10px;border-top:1px solid #dce3d4;padding-top:12px;margin-top:16px}.int-source summary{cursor:pointer;line-height:1.5;color:#536b49}
|
|
.int-source-buttons{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}
|
|
.int-source-buttons button{border:1px solid #d4ddca;border-radius:7px;font-size:10px;background:#f5f7ef;padding:8px;color:#486140}
|
|
.int-export{width:100%;margin-top:12px;border:1px solid #d0dbc6;border-radius:8px;background:#eef3e7;padding:10px;font-size:10px;color:#49613f}
|
|
body.interior-active #interiorTools{display:flex;position:fixed;z-index:4;left:calc((100% - 340px)/2);bottom:22px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:8px;max-width:calc(100% - 24px)}
|
|
body.interior-panel-closed #interiorTools{left:50%}body.interior-active.sun-open #interiorTools{left:calc((100% - var(--sun-side))/2)}
|
|
.int-mode-bar{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:6px;background:#fafcf6f5;border:1px solid #fff;border-radius:12px;box-shadow:0 5px 26px #263b2525}
|
|
.int-mode-bar button{border:0;background:transparent;border-radius:7px;padding:10px 11px;font-size:11px;color:#52684a}.int-mode-bar button.active{background:#365944;color:#fff}.int-mode-bar button:hover:not(.active){background:#e8eee2}
|
|
.int-mode-bar .int-nav-button{background:#e9efe3;font-size:15px;line-height:14px;padding:9px 10px}
|
|
#interiorHint{font-size:9px;line-height:1.45;color:#71806a;text-align:center;background:#f0f3e8de;border-radius:6px;padding:4px 10px;max-width:460px}
|
|
body.interior-active #interiorLabels{display:block;position:fixed;inset:0;pointer-events:none;z-index:2}
|
|
.int-room-tag{position:absolute;transform:translate(-50%,-50%);border:1px solid #ffffffdc;border-radius:7px;background:#fafcf4ea;padding:5px 7px;box-shadow:0 2px 10px #253a2220;pointer-events:auto;white-space:nowrap;line-height:1.2;font-size:10px;color:#334c35}
|
|
.int-room-tag b{font-weight:600}.int-room-tag small{display:block;font-size:8px;color:#7c8874;margin-top:3px}.int-room-tag:hover{border-color:#739069;background:#edf4e5}
|
|
body.interior-walk #sunOverlay{display:none}
|
|
body.interior-walk #walkPad{display:grid;position:fixed;z-index:4;left:24px;bottom:94px;grid-template-columns:38px 38px 38px;grid-template-rows:34px 34px;gap:4px}
|
|
#walkPad button{touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #d5dfcc;background:#f8fbf1ee;border-radius:8px;color:#425e3c;font-size:17px;box-shadow:0 3px 15px #314a2520}#walkPad button:active,#walkPad button.held{background:#bfd0b2}
|
|
#walkPad [data-walk=forward]{grid-column:2;grid-row:1}#walkPad [data-walk=left]{grid-column:1;grid-row:2}#walkPad [data-walk=back]{grid-column:2;grid-row:2}#walkPad [data-walk=right]{grid-column:3;grid-row:2}
|
|
#interiorReferenceDialog{width:min(1120px,96vw);max-height:94vh;border:1px solid #e2e8da;border-radius:14px;background:#fafcf6;padding:16px;color:#36503c;box-shadow:0 25px 90px #14241666}
|
|
#interiorReferenceDialog::backdrop{background:#1e2b22b3;backdrop-filter:blur(3px)}
|
|
.int-ref-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.int-ref-head h3{font-size:14px;font-weight:500;margin:0}.int-ref-head button{border:0;background:#e9eee3;border-radius:7px;padding:8px 12px}
|
|
#interiorReferenceImage{display:block;max-width:100%;max-height:76vh;object-fit:contain;margin:auto}.int-ref-caption{font-size:11px;line-height:1.5;margin:10px 0 0;color:#7b8574}
|
|
@media(max-width:1100px) and (min-width:851px){.interior-heading h2{font-size:19px}.interior-heading .eyebrow{display:none}.interior-heading{max-width:calc(100% - 370px)}}
|
|
@media(max-width:850px){
|
|
#interiorLaunch{top:147px;left:18px;padding:10px 13px;font-size:11px}#interiorLaunch small{font-size:8px}
|
|
body.interior-active .interior-heading{left:16px;top:18px;gap:10px;max-width:calc(100% - 110px)}.interior-heading h2{font-size:17px;margin-top:3px}.interior-heading .eyebrow{font-size:7px;letter-spacing:1px}.interior-heading button{padding:9px 10px;font-size:10px}
|
|
body.interior-active:not(.interior-panel-closed):not(.sun-open) #view,body.interior-active:not(.interior-panel-closed):not(.sun-open) #sunOverlay{width:100%;height:calc(100% - 242px)}
|
|
body.interior-active #interiorPanel{top:auto;left:0;right:0;bottom:0;width:100%;height:242px;border-radius:18px 18px 0 0;padding:15px 18px 24px}
|
|
#interiorMap{width:150px;float:left;margin-right:14px;margin-bottom:9px}.interior-panel-title{margin-bottom:9px}.interior-panel-title h3{font-size:14px}
|
|
.int-views{grid-template-columns:1fr 1fr;gap:5px}.int-views button{font-size:9px;padding:9px 6px}.int-kicker{margin:10px 0 7px;font-size:8px}.int-map-hint{display:none}#interiorRoom{font-size:10px;padding:8px}.int-options{clear:both;grid-template-columns:1fr 1fr;margin-top:14px;gap:10px}.int-options label{font-size:10px}
|
|
body.interior-active #interiorTools{left:50%;bottom:250px;gap:5px;width:max-content;max-width:calc(100% - 16px)}
|
|
body.interior-active.sun-open #interiorTools{left:50%;bottom:calc(var(--sun-sheet) + 8px)}body.interior-panel-closed #interiorTools{bottom:17px}
|
|
.int-mode-bar{padding:5px;gap:2px}.int-mode-bar button{font-size:10px;padding:9px 9px}.int-mode-bar .int-nav-button{padding:9px 10px}#interiorHint{display:none}
|
|
body.interior-walk #walkPad{left:12px;bottom:304px;grid-template-columns:36px 36px 36px;grid-template-rows:32px 32px;gap:4px}body.interior-walk.interior-panel-closed #walkPad{bottom:80px}body.interior-walk.sun-open #walkPad{bottom:calc(var(--sun-sheet) + 62px)}
|
|
.int-room-tag{font-size:8px;padding:4px 5px}.int-room-tag small{font-size:7px}.int-room-tag b .room-word{display:none}
|
|
#interiorReferenceDialog{padding:12px}.int-ref-head h3{font-size:12px}
|
|
}
|
|
@media(max-width:420px){
|
|
body.interior-active .interior-heading{max-width:calc(100% - 98px);gap:8px}.interior-heading h2{font-size:15px}.interior-heading button{font-size:9px;padding:9px 8px}
|
|
#interiorMap{width:132px;margin-right:10px}.int-views button{font-size:8.5px;padding:8px 5px}.int-mode-bar button{padding:9px 8px}
|
|
}
|
|
@media(max-height:550px) and (max-width:850px){
|
|
body.interior-active:not(.interior-panel-closed):not(.sun-open) #view{height:100%;width:calc(100% - 260px)}
|
|
body.interior-active #interiorPanel{left:auto;right:10px;top:65px;bottom:10px;width:245px;height:auto;border-radius:13px;padding:12px}#interiorMap{float:none;width:100%;margin-right:0}
|
|
body.interior-active #interiorTools{left:calc((100% - 260px)/2);bottom:12px}body.interior-panel-closed #interiorTools{left:50%}body.interior-walk #walkPad{bottom:64px}
|
|
}
|
|
|
|
|
|
|
|
/* Interior-only paint controls; facade palette and furniture are independent. */
|
|
.int-paint{clear:both;margin:18px 0 0;padding:14px 0 0;border-top:1px solid #e0e6d9}
|
|
.int-paint-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
|
|
.int-paint-head h4{margin:0;font-size:12px;font-weight:600;color:#38523a}
|
|
.int-paint-head span{font-size:9px;color:#7c8675}
|
|
.int-paint-fields{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:end}
|
|
.int-paint-picker{display:block;height:43px;padding:4px;border:1px solid #ccd6c6;border-radius:9px;background:#fff;overflow:hidden;cursor:pointer}
|
|
#interiorWallColor{display:block;width:100%;height:100%;padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer}
|
|
#interiorWallColor::-webkit-color-swatch-wrapper{padding:0}
|
|
#interiorWallColor::-webkit-color-swatch{border:1px solid #0002;border-radius:4px}
|
|
#interiorWallColor::-moz-color-swatch{border:1px solid #0002;border-radius:4px}
|
|
.int-paint-hex{min-width:0;display:flex;flex-direction:column;gap:4px;font-size:9px;color:#75816f}
|
|
#interiorWallHex{display:block;width:100%;min-width:0;height:32px;border:1px solid #d6e0d0;border-radius:7px;padding:7px 9px;background:#fff;color:#334931;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.7px;text-transform:uppercase}
|
|
.int-paint-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:10px}
|
|
.int-paint-presets button{display:flex;align-items:center;gap:6px;min-width:0;min-height:34px;padding:6px;border:1px solid #d9e0d2;border-radius:7px;background:#f7f9f3;color:#51654a;text-align:left;font-size:9px;line-height:1.25}
|
|
.int-paint-presets button:hover{background:#eaf0e4;border-color:#a6ba99}
|
|
.int-paint-presets button[aria-pressed=true]{border-color:#78946c;background:#e5eedf;color:#2e4b35;box-shadow:inset 0 0 0 1px #78946c}
|
|
.int-paint-chip{display:block;width:19px;height:19px;flex:0 0 19px;border-radius:4px;background:var(--paint);border:1px solid #0002}
|
|
.int-paint-reset{display:block;margin:10px 0 0;padding:7px 9px;border:1px solid #d6dfcf;border-radius:7px;background:#f3f6ef;color:#49613f;font-size:10px}
|
|
.int-paint-reset:hover{background:#e7eee0}
|
|
#interiorPanel .int-paint-note{font-size:9px;line-height:1.55;margin:8px 0 0;color:#7c8675}
|
|
@media(max-width:850px){.int-paint{margin-top:14px;padding-top:12px}.int-paint-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.int-paint-head h4{font-size:11px}.int-paint-presets button{min-height:36px}.int-paint-fields{grid-template-columns:48px minmax(0,1fr)}}
|
|
@media(max-width:360px){.int-paint-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
@media(max-height:550px) and (max-width:850px){.int-paint-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
|
|
|
|
|
/* ALLSTAV 2025 configuration panel. Independent from the retained sun and site tools. */
|
|
:root{--std-side:424px;--std-sheet:min(48dvh,440px);--std-line:#dce2d7;--std-green:#365944}
|
|
#standardsToggle{display:flex;align-items:center;gap:7px;font-weight:600;background:#365944;color:#fff;border-color:#365944}
|
|
#standardsToggle svg{width:15px;height:15px}#standardsToggle.active{background:#244633}
|
|
#standardsPanel{display:none;position:fixed;z-index:5;right:16px;top:78px;bottom:17px;width:392px;background:#fafbf7;border:1px solid #fff;border-radius:18px;box-shadow:0 12px 44px #20311f22;overflow:hidden;flex-direction:column}
|
|
body.std-open #standardsPanel{display:flex}body.std-open #view,body.std-open #measure,body.std-open #sunOverlay{width:calc(100% - var(--std-side))!important;height:100%!important}
|
|
body.std-open .bottom,body.std-open #interiorTools{left:calc((100% - var(--std-side))/2)!important}
|
|
body.std-open #interiorPanel,body.std-open #panel{display:none!important}body.std-open .compass{right:calc(var(--std-side) + 18px)}
|
|
body.std-open .interior-heading{max-width:calc(100% - var(--std-side) - 30px)}body.std-open #direction{font-size:10px;bottom:24px}
|
|
.std-head{padding:20px 20px 14px}.std-kicker{font-size:9px;letter-spacing:2px;font-weight:700;color:#829077}.std-head-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}.std-head h2{font-size:23px;letter-spacing:-.6px;font-weight:500;margin:0}.std-close{border:0;background:#edf1e7;border-radius:50%;width:29px;height:29px;flex-shrink:0;font-size:20px;line-height:20px}.std-head p{font-size:10px;line-height:1.5;color:#7c8774;margin:6px 0 0}
|
|
.std-tabs{margin:0 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:#ecf0e7;border:1px solid #e1e6db;padding:4px;border-radius:10px}.std-tabs button{border:0;border-radius:7px;padding:10px 5px;background:none;font-size:12px}.std-tabs button[aria-selected=true]{background:#365944;color:white;box-shadow:0 2px 5px #233a2520}
|
|
.std-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c1cbbb transparent;flex:1;min-height:0;padding:0 17px 18px}.std-scroll [hidden]{display:none!important}.std-shortcuts{display:flex;gap:5px;margin:13px 0 14px}.std-shortcuts button{flex:1;border:1px solid #dbe2d4;border-radius:7px;background:#f3f6ee;padding:8px 3px;font-size:10px}.std-shortcuts button:hover{background:#e4ecde}
|
|
.std-notice{font-size:10px;line-height:1.6;color:#777f6e;background:#eef2e9;border-radius:8px;padding:10px 11px;margin:10px 0}.std-notice strong{color:#53624b;font-weight:600}.std-notice.amber{background:#f6efdf;color:#8a744a}.std-notice.amber strong{color:#795f36}.std-notice.blue{background:#eaf0f2;color:#576e75}
|
|
.std-section{border-bottom:1px solid var(--std-line);padding:0}.std-section>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:16px 0;line-height:1.3}.std-section>summary::-webkit-details-marker{display:none}.std-section>summary:after{content:'+';font-size:18px;color:#8d9985;margin-left:auto}.std-section[open]>summary:after{content:'\2212'}.std-section>summary .std-number{font-size:10px;width:22px;height:22px;border:1px solid #d6decd;background:#eef2e8;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#738568;flex-shrink:0}.std-section>summary strong{display:block;font-size:12px;font-weight:600}.std-section>summary small{display:block;font-size:10px;font-weight:400;color:#849078;margin-top:4px;max-width:271px}.std-section .std-body{padding-bottom:17px}
|
|
.std-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;margin:13px 0 9px;color:#4a5c42;gap:7px}.std-source{border:0;padding:3px 0;background:none;color:#849375;font-size:9px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.std-body p{font-size:10px;line-height:1.6;color:#7c8673;margin:8px 0 10px}
|
|
.std-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.std-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.std-grid.cols5{grid-template-columns:repeat(5,minmax(0,1fr))}.std-grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
.std-card{position:relative;border:1px solid #dce2d5;background:white;border-radius:9px;padding:5px 5px 7px;min-width:0;min-height:65px;text-align:center;font-size:10px;line-height:1.35;transition:border-color .12s,box-shadow .12s}.std-card:hover{border-color:#8aa27c}.std-card[aria-pressed=true]{border-color:#55754a;box-shadow:0 0 0 1px #55754a;background:#f0f5e9}.std-card[aria-pressed=true]:after{content:'\2713';position:absolute;right:3px;top:3px;border-radius:50%;width:15px;height:15px;background:#365944;color:#fff;font-size:10px;line-height:15px}.std-card .sample{display:block;width:100%;height:32px;border-radius:5px;margin-bottom:6px;border:1px solid #00000008;background-size:cover;background-position:center}.std-card img{display:block;object-fit:cover;width:100%;height:48px;border-radius:4px;margin-bottom:6px}.std-card.door img{height:70px;object-fit:contain;background:#fff}.std-card.wood img{height:56px;object-fit:cover}.std-card strong{font-weight:500;display:block}.std-card small{display:block;margin-top:3px;font-size:8px;color:#87947c}.std-card .premium{color:#9e793e}.std-card .visual{color:#7b8990}
|
|
.std-swatch-inline{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid #0001}.std-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.std-field{display:block;font-size:10px;color:#75816b;margin:10px 0;line-height:1.5}.std-field select,.std-field input:not([type=color]):not([type=range]):not([type=checkbox]){display:block;width:100%;padding:10px 9px;border:1px solid #d7dfcf;border-radius:7px;background:#fff;font-size:11px;color:#3e5338;margin-top:5px;min-height:36px}.std-field input[type=color]{display:block;width:100%;height:35px;border:1px solid #d7dfcf;border-radius:7px;padding:3px;margin-top:5px;background:white}.std-field input[type=range]{width:100%;accent-color:#365944}.std-range-head{display:flex;justify-content:space-between;font-size:10px;color:#718165;margin-top:11px}.std-range-head strong{font-size:12px;color:#365944;font-weight:600}
|
|
.std-action{border:1px solid #d3dec8;background:#eff4e8;border-radius:7px;padding:9px 11px;font-size:10px;color:#46603c}.std-action.wide{width:100%;margin-top:10px}.std-action:hover{background:#e2ebd8}.std-action.dark{background:#365944;border-color:#365944;color:white}
|
|
.std-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;cursor:pointer;margin:3px 0 10px;padding:10px;background:#eef3e8;border-radius:9px}.std-toggle input{appearance:none;width:35px;height:21px;border-radius:12px;background:#bdc6b6;position:relative;flex-shrink:0;cursor:pointer;transition:background .15s}.std-toggle input:before{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:white;left:3px;top:3px;box-shadow:0 1px 4px #0002;transition:transform .15s}.std-toggle input:checked{background:#365944}.std-toggle input:checked:before{transform:translateX(14px)}
|
|
.std-check{display:flex;gap:9px;align-items:center;font-size:11px;color:#63765a;margin:12px 0;line-height:1.5}.std-check input{accent-color:#365944}.std-disabled{opacity:.45;pointer-events:none}.std-inventory{margin:10px 0;border:1px solid #e0e5da;border-radius:9px;padding:5px 11px}.std-inventory>div{font-size:10px;line-height:1.5;padding:8px 0;border-bottom:1px solid #e6eadf}.std-inventory>div:last-child{border:0}.std-inventory b{font-weight:600;color:#49623f}.std-inventory small{display:block;color:#8a9480;font-size:9px;margin-top:3px}
|
|
.std-footer{padding:12px 16px;border-top:1px solid #dce2d6;background:#f5f8ee;flex-shrink:0}.std-saved{font-size:9px;color:#859378;display:flex;gap:6px;align-items:center;margin-bottom:8px}.std-saved:before{content:'';width:5px;height:5px;border-radius:50%;background:#648257}.std-footer-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.std-footer-row button{font-size:11px;padding:10px}.std-summary-title{font-size:18px;font-weight:500;letter-spacing:-.3px;margin:19px 0 7px}.std-summary-group{margin-top:16px}.std-summary-group h4{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:#728466;margin:16px 0 7px}.std-summary-row{display:grid;grid-template-columns:1fr 1.5fr;gap:9px;font-size:10px;line-height:1.6;padding:8px 0;border-bottom:1px solid #e2e7dc}.std-summary-row span{color:#7e8a72}.std-summary-row b{font-weight:500;text-align:right;color:#41583b}.std-summary-row small{display:block;font-size:8px;color:#9b7945}
|
|
.std-export-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}.std-export-grid button{border:1px solid #d5dfcd;background:#f2f6ec;padding:11px 7px;border-radius:8px;font-size:10px}.std-reset{color:#9c6852!important;background:#f7f0e8!important}.std-fine{font-size:9px!important;line-height:1.6!important;color:#949e89!important;margin:12px 0 0!important}
|
|
#stdCatalogDialog{width:min(800px,94vw);max-height:94dvh;border:1px solid #fff;border-radius:15px;background:#fafbf7;padding:15px;box-shadow:0 20px 70px #13271066;color:#36523d}#stdCatalogDialog::backdrop,#stdResetDialog::backdrop{background:#1f2e23a8;backdrop-filter:blur(3px)}.std-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.std-dialog-head h3{margin:0;font-size:13px;font-weight:500}.std-dialog-head button{border:0;background:#e9efe1;padding:8px 11px;border-radius:7px;font-size:11px}#stdCatalogImage{display:block;max-width:100%;max-height:75dvh;object-fit:contain;margin:auto}#stdCatalogCaption{font-size:10px;color:#7c8871;line-height:1.5;margin:10px 0 0}.std-dialog-pager{display:flex;gap:7px;align-items:center;justify-content:space-between;margin-top:10px}.std-dialog-pager button{border:1px solid #d6dfcc;border-radius:7px;background:#edf3e5;padding:8px 11px;font-size:10px}
|
|
#stdResetDialog{width:min(390px,92vw);border:1px solid white;border-radius:16px;background:#fafbf7;padding:23px;color:#36523d}#stdResetDialog h3{font-size:19px;font-weight:500;margin:0 0 10px}#stdResetDialog p{font-size:12px;line-height:1.7;color:#7a866f}#stdResetDialog .std-two{margin-top:19px}
|
|
body.std-open #interiorLaunch{z-index:2}
|
|
@media(min-width:851px) and (max-width:1180px){body.std-open .compass,body.std-open #direction,body.std-open .help{display:none}body.std-open .tool{padding:9px 7px;font-size:10px}body.std-open .site-switch{font-size:9px}body.std-open .bottom{bottom:18px}body.std-open header .metrics{display:none!important}body.std-open #sunStamp{top:125px}body.std-open .interior-heading h2{font-size:17px}body.std-open .interior-heading .eyebrow{display:none}}
|
|
@media(max-width:850px){
|
|
#standardsPanel{top:auto;left:0;right:0;bottom:0;width:100%;height:var(--std-sheet);border-radius:18px 18px 0 0}
|
|
body.std-open #view,body.std-open #measure,body.std-open #sunOverlay{width:100%!important;height:calc(100% - var(--std-sheet))!important}
|
|
body.std-open .bottom,body.std-open #interiorTools{left:50%!important;bottom:calc(var(--std-sheet) + 8px)!important;gap:0}
|
|
body.std-open .site-controls,body.std-open .help,body.std-open #direction,body.std-open .compass{display:none}
|
|
body.std-open .interior-heading{max-width:calc(100% - 126px)}body.std-open #walkPad{bottom:calc(var(--std-sheet) + 65px)!important}
|
|
#standardsToggle{padding:8px 9px;font-size:10px;gap:4px;min-height:34px}.std-head{padding:12px 17px 9px}.std-head .std-kicker{font-size:8px}.std-head h2{font-size:18px}.std-head p{display:none}.std-head-row{margin-top:3px}.std-close{width:25px;height:25px}
|
|
.std-tabs{margin:0 14px}.std-tabs button{padding:8px 4px;font-size:11px}.std-scroll{padding:0 16px 18px}.std-shortcuts{margin:9px 0}.std-footer{padding:8px 15px}.std-saved{margin-bottom:5px;font-size:8px}.std-footer-row button{padding:8px;font-size:10px}.std-section>summary{padding:13px 0}
|
|
.std-card.door img{height:62px}.std-notice{font-size:9px;padding:8px 10px}.std-card{font-size:9px}.std-section>summary small{max-width:calc(100vw - 115px)}body.std-open header h1{font-size:23px}body.std-open #interiorLaunch{top:139px;font-size:10px;padding:8px 10px}
|
|
}
|
|
@media(max-width:530px){#standardsToggle .std-toggle-word{display:none}#standardsToggle{width:34px;justify-content:center;padding:0}.topright{gap:5px!important}.topright #infoButton{display:none}.std-head .std-kicker{display:none}.std-head-row{margin:0}.std-head{padding:11px 16px 8px}.std-head h2{font-size:17px}body.std-open #sunStamp{top:98px;font-size:9px}body.std-open .interior-heading .eyebrow{font-size:6px;letter-spacing:.6px}}
|
|
@media(max-height:550px) and (max-width:850px){:root{--std-side:340px}#standardsPanel{left:auto;right:8px;top:60px;bottom:8px;width:324px;height:auto;border-radius:12px}body.std-open #view,body.std-open #sunOverlay{width:calc(100% - 340px)!important;height:100%!important}body.std-open .bottom,body.std-open #interiorTools{left:calc((100% - 340px)/2)!important;bottom:10px!important}.std-head{padding:9px 14px}.std-head h2{font-size:16px}.std-footer{display:none}body.std-open #walkPad{bottom:60px!important}body.std-open .interior-heading{max-width:calc(100% - 370px)}}
|
|
|
|
@media(max-width:850px){body.std-open header .sub,body.std-open #sunStamp,body.std-open #interiorLaunch{display:none!important}body.std-open header h1{font-size:19px;line-height:1.2;max-width:calc(100vw - 116px);margin-top:9px}body.std-open header .eyebrow{font-size:7px;letter-spacing:1.3px}body.std-open #toast{top:73px;max-width:90%;font-size:10px}}
|
|
|