/* ============================================================ THE LAKE HOUR — guide hub (index.html) Two ideas, held together: 1. The page knows what time it is. js/hub.js reads the real sunrise/sunset out of data/weather and stamps data-phase on . The hero photograph is chosen by that phase, so at 8:40pm you get an actual Burlington sunset — because it is. 2. Photographs are graded, not scrimmed into submission. Every hero image goes through the same matte treatment (.sky-photo) — saturation down, contrast down, blacks lifted, grain on top — so ANY photo dropped into assets/sky/ stays readable and they all read as one family. Transparency alone never fixes white-text-on-photo; grading does. Photos are optional. With none present the drawn sky below is a complete fallback, so the page is never broken while art is being shot. ============================================================ */ :root { /* Black, like the Everything reel. The photographs carry the page; the links live in the dark between them, on glass. One material across both sites. */ --ground: #06080A; --panel: rgba(255, 255, 255, 0.075); --panel-hover: rgba(255, 255, 255, 0.13); --edge: rgba(255, 255, 255, 0.14); --edge-soft: rgba(255, 255, 255, 0.12); --ink: #F2F0EA; --ink-soft: rgba(242, 240, 234, 0.70); --ink-faint: rgba(242, 240, 234, 0.45); --accent: #E8A33D; --accent-soft: rgba(232, 163, 61, 0.16); --good: #6FD79E; --hot: #F0996A; --shadow: none; /* Drawn-sky stops — the fallback when a phase has no photograph. */ --sky-top: #1B3A5C; --sky-mid: #3E6E96; --sky-low: #9CC5DC; --sun: #FFD98A; --sun-glow: rgba(255, 217, 138, 0.55); --ridge: #16283C; --ridge-far: #2C4460; --water: #16344E; --water-lit: #4E86AC; --radius: 16px; --radius-sm: 10px; --pill: 999px; --serif: "Instrument Serif", "Lora", Georgia, serif; --ui: "DM Sans", system-ui, -apple-system, sans-serif; } /* Drawn-sky phases (fallback art). */ html[data-phase="night"] { --sky-top: #070E1C; --sky-mid: #101E36; --sky-low: #1E3350; --sun: #E8EEF7; --sun-glow: rgba(232, 238, 247, 0.28); --ridge: #050A14; --ridge-far: #0E1A2C; --water: #060D18; --water-lit: #22405E; } html[data-phase="dawn"] { --sky-top: #2A3350; --sky-mid: #7C6A85; --sky-low: #D89A86; --sun: #FFC9A3; --sun-glow: rgba(255, 201, 163, 0.5); --ridge: #1B2138; --ridge-far: #3B415C; --water: #23293F; --water-lit: #8A6E77; } html[data-phase="morning"] { --sky-top: #4E93C4; --sky-mid: #8FC4E4; --sky-low: #D6EAF4; --sun: #FFF3C4; --sun-glow: rgba(255, 243, 196, 0.6); --ridge: #33566F; --ridge-far: #6B93AC; --water: #35708F; --water-lit: #8FC4E4; } html[data-phase="day"] { --sky-top: #2E86BE; --sky-mid: #67B2DC; --sky-low: #BFE1F1; --sun: #FFF6D8; --sun-glow: rgba(255, 246, 216, 0.55); --ridge: #2C5670; --ridge-far: #628FA8; --water: #2B7599; --water-lit: #82C3E2; } html[data-phase="golden"] { --sky-top: #3D6088; --sky-mid: #E09A4E; --sky-low: #F5C173; --sun: #FFE1A0; --sun-glow: rgba(255, 190, 110, 0.7); --ridge: #2A3247; --ridge-far: #5A5468; --water: #2F4059; --water-lit: #D6904C; } html[data-phase="dusk"] { --sky-top: #1B2545; --sky-mid: #6B4670; --sky-low: #D9743F; --sun: #FFB067; --sun-glow: rgba(255, 140, 70, 0.6); --ridge: #10162B; --ridge-far: #2B2A48; --water: #131B33; --water-lit: #8C5449; } html[data-sky="grey"]:not([data-phase="night"]) { --sky-top: #6E7F8C; --sky-mid: #93A3AD; --sky-low: #C3CDD3; --sun: #E4E9EC; --sun-glow: rgba(228, 233, 236, 0.35); --ridge: #4A5A66; --ridge-far: #7B8B96; --water: #4F626E; --water-lit: #93A3AD; } * { box-sizing: border-box; } body.hub { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ============================================================ THE HERO ============================================================ */ .sky { position: relative; width: 100%; min-height: clamp(460px, 70vh, 680px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 76%); transition: background 1.6s ease; } /* ---- The photograph, and the grade that makes it usable ---- */ .sky-photo { position: absolute; inset: 0; background-image: var(--sky-img, none); background-size: cover; background-position: center 55%; /* THE grade: matte it out so white type can simply sit on top. */ filter: saturate(0.72) contrast(0.88) brightness(0.86); opacity: 0; transition: opacity 1.2s ease; } html[data-art="photo"] .sky-photo { opacity: 1; } /* Lift the blacks — the faded-film move that keeps shadows from going muddy. */ html[data-art="photo"] .sky-photo::after { content: ""; position: absolute; inset: 0; background: rgba(126, 134, 140, 0.14); mix-blend-mode: lighten; } /* Grain. Ties any two photos into the same family. */ .grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.16; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* Drawn sky furniture — hidden the moment a real photograph loads. */ html[data-art="photo"] .ridge, html[data-art="photo"] .lake, html[data-art="photo"] .orb, html[data-art="photo"] .glint { display: none; } .orb { position: absolute; width: 62px; height: 62px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 60px 22px var(--sun-glow), 0 0 140px 60px var(--sun-glow); transform: translate(-50%, -50%); transition: background 1.6s ease, box-shadow 1.6s ease; } .orb.moon { width: 40px; height: 40px; background: radial-gradient(circle at 62% 38%, rgba(0,0,0,0.10) 0 18%, transparent 19%), radial-gradient(circle at 34% 64%, rgba(0,0,0,0.08) 0 13%, transparent 14%), radial-gradient(circle at 70% 72%, rgba(0,0,0,0.06) 0 9%, transparent 10%), var(--sun); box-shadow: 0 0 34px 8px var(--sun-glow); } .ridge { position: absolute; left: 0; right: 0; bottom: 26%; width: 100%; height: 90px; display: block; } .ridge .far { fill: var(--ridge-far); transition: fill 1.6s ease; } .ridge .near { fill: var(--ridge); transition: fill 1.6s ease; } .lake { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(to bottom, var(--water-lit), var(--water)); transition: background 1.6s ease; } .glint { position: absolute; bottom: 0; width: 120px; height: 26%; transform: translateX(-50%); background: linear-gradient(to bottom, var(--sun-glow), transparent 90%); filter: blur(10px); pointer-events: none; transition: opacity 1.6s ease; } /* The scrim. A full-width black floor crushes the bottom third of the photograph — which is exactly where the lake is. So instead: a soft pool of shade behind the headline only, bottom-left, falling off fast. The rest of the frame stays a photograph. */ .sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 68% 62% at 20% 86%, rgba(6, 10, 14, 0.60), transparent 64%), linear-gradient(to bottom, transparent 58%, rgba(6, 10, 14, 0.22)); pointer-events: none; z-index: 1; } /* And rather than ending on a hard black edge, the photo dissolves into the page — no seam, no dead band, cards straddling the join. */ .sky::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--ground) 96%); pointer-events: none; z-index: 2; } .sky-copy { position: relative; z-index: 3; max-width: 1160px; margin: 0 auto; width: 100%; padding: 0 clamp(1.1rem, 4vw, 2.25rem) clamp(5rem, 7vw, 6.5rem); color: #fff; } .eyebrow { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; opacity: 0.82; margin: 0 0 0.5rem; } .wordmark { font-family: var(--serif); font-weight: 400; font-size: clamp(2.9rem, 7.5vw, 5.6rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); } .conditions { font-size: 0.95rem; margin: 0.85rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; font-variant-numeric: tabular-nums; opacity: 0.95; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .conditions .sep { opacity: 0.4; } .conditions strong { font-weight: 600; } /* Photo credit, park.photos-style: quiet, bottom corner. */ .credit { position: absolute; right: clamp(1.1rem, 4vw, 2.25rem); bottom: 7.2rem; z-index: 3; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } .credit:empty { display: none; } /* ============================================================ CONTENT — dense, but soft-edged ============================================================ */ .wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.25rem) 4rem; } /* The three live tiles, lifted to straddle the hero edge. */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: -46px; position: relative; z-index: 4; } .tile { background: var(--panel); border: 1px solid var(--edge-soft); border-radius: var(--radius); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 0.9rem 1.05rem 0.85rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.1rem; transition: transform 0.16s ease, border-color 0.16s ease; } .tile:hover, .tile:focus-visible { transform: translateY(-2px); background: var(--panel-hover); border-color: var(--accent); outline: none; } .tile .label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } .tile .big { font-family: var(--serif); font-size: 2.3rem; line-height: 1.15; font-variant-numeric: tabular-nums; } .tile .big .unit { font-size: 0.9rem; color: var(--ink-soft); font-family: var(--ui); } .tile .sub { font-size: 0.83rem; color: var(--ink-soft); } .tile .sub .yes { color: var(--good); font-weight: 500; } .tile .sub .no { color: var(--hot); font-weight: 500; } section { margin-top: 2.4rem; } .dept { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.85rem; flex-wrap: wrap; } .dept h2 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.005em; margin: 0; } .dept p { margin: 0; color: var(--ink-faint); font-size: 0.85rem; flex: 1; min-width: 10rem; } /* Dense on purpose: he has a lot of links and nobody should scroll for them. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 10px; } .card { background: var(--panel); border: 1px solid var(--edge-soft); border-radius: var(--radius); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 0.85rem 1rem 0.9rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.25rem; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .card:hover, .card:focus-visible { transform: translateY(-2px); background: var(--panel-hover); border-color: var(--accent); outline: none; } .card:focus-visible { box-shadow: 0 0 0 2px var(--accent); } .card h3 { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.005em; margin: 0; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .card p { margin: 0; font-size: 0.845rem; line-height: 1.45; color: var(--ink-soft); } /* Live counts, as pills. */ .stat { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 0.15rem 0.5rem; border-radius: var(--pill); white-space: nowrap; font-variant-numeric: tabular-nums; } .stat:empty { display: none; } .foot { margin-top: 2.75rem; padding-top: 1.1rem; border-top: 1px solid var(--edge-soft); font-size: 0.8rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } .foot a { color: var(--accent); text-decoration: none; } .foot a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ============================================================ BANDS — the same photo-to-black transition as the Everything reel, but shorter. There are fewer links here, so the page should not have to scroll past a full frame between them. ============================================================ */ .band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); /* break out of .wrap, full bleed */ min-height: clamp(190px, 26vh, 260px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; margin-top: 2.4rem; margin-bottom: 0; background: var(--ground); } /* The cards ride up into the foot of the photograph, so the glass all but touches it — the same move the live tiles make under the hero. Glass is the one material that reads on a photo AND on black, which is what lets a card straddle the join at all. */ .band + section { margin-top: -42px; position: relative; z-index: 4; } .band-img { position: absolute; inset: 0; background-size: cover; background-position: center 55%; filter: saturate(0.74) contrast(0.88) brightness(0.82); } /* Dissolve into black at both ends — no photo ever ends on a hard edge. */ .band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, var(--ground) 0%, rgba(6, 8, 10, 0.28) 20%, rgba(6, 8, 10, 0.40) 58%, rgba(6, 8, 10, 0.88) 92%, var(--ground) 100% ); } .band .grain { z-index: 2; opacity: 0.14; } .band-copy { position: relative; z-index: 3; padding: 0 1.25rem; } .band-copy h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 0; letter-spacing: -0.008em; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55); } .band-copy p { margin: 0.35rem auto 0; max-width: 44ch; color: var(--ink-soft); font-size: 0.9rem; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); } /* Glass needs a fallback where backdrop-filter is unsupported, or the cards turn into unreadable sheets of tinted nothing. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card, .tile { background: rgba(18, 22, 26, 0.86); } } /* ============================================================ ARRIVAL Cards settle in as they come into view, and the band photographs drift a little slower than the page. Both are small — the point is that the page feels alive, not that it performs. Both are off entirely for anyone who asked for less motion. ============================================================ */ .reveal { opacity: 0; transform: translateY(14px); } .reveal.seen { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* The photo sits taller than its frame so it has room to drift. */ .band-img { top: -12%; bottom: -12%; will-change: transform; } /* A slow bloom on the hero as the page opens. */ .sky-photo { transform: scale(1.045); } html[data-art="photo"] .sky-photo { transform: scale(1); transition: opacity 1.2s ease, transform 14s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.seen { opacity: 1; transform: none; transition: none; } .band-img { top: 0; bottom: 0; transform: none !important; } .sky-photo, html[data-art="photo"] .sky-photo { transform: none; transition: none; } }