fraxle
862f631beb
New big and small scope sunset and sunrise simulation New calculations for the day tabs Added missing icons to simple view New record popups Week ahead description popups Camping profile Tweak to some of the indoor tems
550 lines
13 KiB
CSS
550 lines
13 KiB
CSS
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-variable.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/fraunces-700-normal.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/fraunces-900-normal.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/fraunces-300-italic.woff2') format('woff2'); }
|
|
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/fraunces-700-italic.woff2') format('woff2'); }
|
|
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-400.woff2') format('woff2'); }
|
|
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/jetbrains-mono-600.woff2') format('woff2'); }
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Manrope', sans-serif;
|
|
background: #f5edd6;
|
|
color: #1e1208;
|
|
line-height: 1.7;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: #c8922a; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 18px 32px;
|
|
gap: 28px;
|
|
/* Mirrors .utci-topnav in css/base.css: a shade deeper than the parchment
|
|
page beneath, so the bar reads as chrome rather than as more page. */
|
|
background: #ebdcb4;
|
|
border-bottom: 1px solid #c9b08a;
|
|
box-shadow: 0 3px 8px rgba(30, 18, 8, 0.10);
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
header a {
|
|
font-family: 'Manrope', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #b09870;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
padding-bottom: 2px;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
header a:hover { color: #1e1208; border-bottom-color: #1e1208; text-decoration: none; }
|
|
header a.active { color: #c8922a; }
|
|
|
|
/* Desktop: nav-links renders inline as part of header flex row */
|
|
.nav-links {
|
|
display: contents; /* participates in header's flex layout transparently */
|
|
}
|
|
|
|
/* ── About dropdown ─────────────────────────────────────────────────── */
|
|
.nav-dropdown {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
/* Invisible bridge so hover doesn't break between toggle and menu */
|
|
.nav-dropdown::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 100%;
|
|
height: 4px;
|
|
}
|
|
.nav-dropdown-toggle .caret {
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
font-size: 0.7em;
|
|
transition: transform 0.2s;
|
|
}
|
|
.nav-dropdown:hover .nav-dropdown-toggle .caret,
|
|
.nav-dropdown:focus-within .nav-dropdown-toggle .caret {
|
|
transform: rotate(180deg);
|
|
}
|
|
.nav-dropdown-menu {
|
|
position: absolute;
|
|
top: calc(100% - 1px);
|
|
left: 50%;
|
|
margin-top: 0;
|
|
background: #fffcf2;
|
|
border: 1px solid #d4c0a0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(100, 70, 20, 0.12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 210px;
|
|
padding: 6px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateX(-50%) translateY(-4px);
|
|
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
|
|
z-index: 110;
|
|
}
|
|
.nav-dropdown:hover .nav-dropdown-menu,
|
|
.nav-dropdown:focus-within .nav-dropdown-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
.nav-dropdown-menu a {
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #5a3e1a;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
border-bottom: none;
|
|
white-space: nowrap;
|
|
}
|
|
.nav-dropdown-menu a:hover {
|
|
background: #ede4cc;
|
|
color: #1e1208;
|
|
border-bottom: none;
|
|
}
|
|
.nav-dropdown-menu a.active { color: #c8922a; }
|
|
|
|
/* The Account dropdown sits at the far right of the nav row, so a menu
|
|
centred under it (like About's) would spill past the viewport edge on
|
|
most screen widths. Right-align it to the toggle instead, growing left,
|
|
with its labels right-aligned to match the edge it hangs from. */
|
|
.nav-dropdown--right .nav-dropdown-menu {
|
|
left: auto;
|
|
right: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
.nav-dropdown--right.nav-dropdown:hover .nav-dropdown-menu,
|
|
.nav-dropdown--right.nav-dropdown:focus-within .nav-dropdown-menu {
|
|
transform: translateY(0);
|
|
}
|
|
.nav-dropdown--right .nav-dropdown-menu a {
|
|
text-align: right;
|
|
}
|
|
|
|
/* ── Burger button ──────────────────────────────────────────────────── */
|
|
.utci-burger {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.utci-burger span {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: #7a5c2a;
|
|
border-radius: 2px;
|
|
transition: transform 0.25s ease, opacity 0.2s ease;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.nav-overlay {
|
|
display: none;
|
|
}
|
|
|
|
/* Site identity — mirrors .nav-logo in css/base.css so the static pages and
|
|
the forecast app carry the same wordmark, icon and tagline. The header a
|
|
rules above dress every nav link, so the uppercase/brass treatment and the
|
|
hover underline are cancelled here. */
|
|
.nav-logo {
|
|
margin-right: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
header a.nav-logo:hover { border-bottom-color: transparent; }
|
|
|
|
.nav-logo-wordmark {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.05em;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: inherit;
|
|
}
|
|
.nav-logo-sun,
|
|
.nav-logo-scope {
|
|
font-family: 'Manrope', sans-serif;
|
|
font-weight: 250;
|
|
font-size: 1.6rem;
|
|
font-style: normal;
|
|
color: #1e1208;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.nav-logo-icon {
|
|
width: 1.26rem; /* same 0.79 ratio to the wordmark as the app's */
|
|
height: 1.26rem;
|
|
color: #1e1208;
|
|
flex-shrink: 0;
|
|
}
|
|
.nav-logo-tag {
|
|
display: block;
|
|
font-family: 'Manrope', sans-serif;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #7a5c2a;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
/* ── Mobile nav drawer ──────────────────────────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
/* Same pinned 72px bar as the app: wordmark centred, links behind the
|
|
burger. body pads itself to clear the fixed header. */
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 10px 20px;
|
|
height: 72px;
|
|
background: #ebdcb4;
|
|
}
|
|
|
|
body {
|
|
padding-top: 72px;
|
|
}
|
|
|
|
.nav-logo {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin-right: 0;
|
|
pointer-events: none; /* the full-width block must not swallow burger taps */
|
|
}
|
|
|
|
.nav-logo-wordmark,
|
|
.nav-logo-tag {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.nav-logo-wordmark {
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
.nav-logo-sun,
|
|
.nav-logo-scope {
|
|
font-size: 2.1rem;
|
|
}
|
|
.nav-logo-icon {
|
|
width: 1.65rem;
|
|
height: 1.65rem;
|
|
}
|
|
|
|
.utci-burger {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-links {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 220px;
|
|
height: 100vh;
|
|
background: #ebdcb4;
|
|
border-left: 1px solid #c9b08a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 80px 32px 32px;
|
|
gap: 28px;
|
|
transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: -8px 0 24px rgba(100,70,20,0.08);
|
|
z-index: 105;
|
|
}
|
|
|
|
.nav-links.is-open {
|
|
right: 0;
|
|
}
|
|
|
|
.nav-links a {
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Dropdown collapses to an indented static list inside the drawer */
|
|
.nav-dropdown {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
gap: 18px;
|
|
}
|
|
.nav-dropdown-toggle .caret { display: none; }
|
|
.nav-dropdown-menu {
|
|
position: static;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
background: none;
|
|
padding: 0 0 0 14px;
|
|
margin-top: 0;
|
|
min-width: 0;
|
|
gap: 18px;
|
|
}
|
|
.nav-dropdown-menu a { padding: 0; font-size: 14px; }
|
|
/* Right-aligned text is a desktop-popup touch - on mobile everything is
|
|
one left-indented list, so match About's list instead of standing out. */
|
|
.nav-dropdown--right .nav-dropdown-menu a { text-align: left; }
|
|
|
|
/* Burger → X animation */
|
|
header.nav-open .utci-burger span:nth-child(1) {
|
|
transform: translateY(7px) rotate(45deg);
|
|
}
|
|
header.nav-open .utci-burger span:nth-child(2) {
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
}
|
|
header.nav-open .utci-burger span:nth-child(3) {
|
|
transform: translateY(-7px) rotate(-45deg);
|
|
}
|
|
|
|
/* Overlay */
|
|
.nav-overlay {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(30,18,8,0.35);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.25s ease;
|
|
z-index: 104;
|
|
}
|
|
|
|
header.nav-open .nav-overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
main {
|
|
max-width: 780px;
|
|
margin: 0 auto;
|
|
padding: 3rem 1.5rem 5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 900;
|
|
font-size: 2.2rem;
|
|
color: #1e1208;
|
|
margin-bottom: 0.3rem;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.tagline {
|
|
font-family: 'Fraunces', serif;
|
|
font-style: italic;
|
|
font-size: 1.05rem;
|
|
color: #7a5c2a;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 900;
|
|
font-size: 1.2rem;
|
|
color: #1e1208;
|
|
margin: 2.5rem 0 0.7rem;
|
|
padding-bottom: 0.3rem;
|
|
border-bottom: 2px solid #c9b08a;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1.1rem;
|
|
color: #3a2a12;
|
|
font-size: 0.97rem;
|
|
}
|
|
|
|
strong { color: #1e1208; font-weight: 600; }
|
|
em { color: #7a5c2a; font-style: italic; }
|
|
|
|
.profile-block {
|
|
background: #fef8ea;
|
|
border: 1px solid #e0d0a8;
|
|
border-left: 4px solid #c8922a;
|
|
border-radius: 8px;
|
|
padding: 1.1rem 1.4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.profile-name {
|
|
font-family: 'Fraunces', serif;
|
|
font-weight: 900;
|
|
font-size: 1rem;
|
|
color: #1e1208;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.col-ref-table td:first-child {
|
|
white-space: nowrap;
|
|
width: 160px;
|
|
color: #5a3e1a;
|
|
}
|
|
|
|
/* Deep-linked rows (from the in-app column-header popups) get a brief
|
|
highlight so the reader can see which one they landed on. */
|
|
.col-ref-table tr[id] {
|
|
scroll-margin-top: 80px;
|
|
}
|
|
.col-ref-table tr:target td {
|
|
background: #fdf0cc;
|
|
box-shadow: inset 3px 0 0 #c8922a;
|
|
}
|
|
|
|
.faq-block {
|
|
background: #fef8ea;
|
|
border: 1px solid #e0d0a8;
|
|
border-radius: 8px;
|
|
margin-bottom: 0.5rem;
|
|
overflow: hidden;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.faq-block[open] {
|
|
border-color: #c8922a;
|
|
}
|
|
|
|
.faq-q {
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1rem 1.2rem;
|
|
font-weight: 600;
|
|
color: #1e1208;
|
|
font-size: 0.97rem;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
user-select: none;
|
|
}
|
|
|
|
.faq-q::-webkit-details-marker { display: none; }
|
|
|
|
.faq-q::after {
|
|
content: '+';
|
|
font-size: 1.3rem;
|
|
font-weight: 300;
|
|
color: #c8922a;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.faq-block[open] .faq-q::after {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.faq-block[open] .faq-q {
|
|
border-bottom: 1px solid #e0d0a8;
|
|
}
|
|
|
|
.faq-a {
|
|
color: #5a3e1a;
|
|
font-size: 0.93rem;
|
|
margin: 0;
|
|
padding: 0.9rem 1.2rem 1rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.stress-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.2rem 0 1.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stress-table th {
|
|
background: #ede4cc;
|
|
color: #5a3e1a;
|
|
font-weight: 600;
|
|
padding: 0.5rem 0.8rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #c9b08a;
|
|
}
|
|
|
|
.stress-table td {
|
|
padding: 0.45rem 0.8rem;
|
|
border-bottom: 1px solid #ede4cc;
|
|
color: #3a2a12;
|
|
}
|
|
|
|
.stress-table td ul {
|
|
margin: 0;
|
|
padding-left: 1.1rem;
|
|
}
|
|
|
|
.stress-table td ul li {
|
|
margin: 0.15rem 0;
|
|
}
|
|
|
|
.swatch {
|
|
display: inline-block;
|
|
width: 12px; height: 12px;
|
|
border-radius: 3px;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Bookends the header bar above: same deep-honey surface, warm border and
|
|
shadow, with the shadow pointing up instead of down. Mirrors
|
|
.utci-site-footer in css/ui.css. */
|
|
footer {
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
font-size: 0.82rem;
|
|
color: #b09870;
|
|
position: relative; /* keeps the upward shadow over the content it covers */
|
|
background: #ebdcb4;
|
|
border-top: 1px solid #c9b08a;
|
|
box-shadow: 0 -3px 8px rgba(30, 18, 8, 0.10);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
h1 { font-size: 1.6rem; }
|
|
main { padding: 2rem 1rem 4rem; }
|
|
header { padding: 10px 16px; }
|
|
}
|