/* ==========================================================================
daylight.css — turning the lights on, one file for every page
--------------------------------------------------------------------------
CEO 2026-09-09: "怎么看着这么暗呢…有金色阳光洒下来那种感觉".
The palette was never the problem. The problem was that a page painted in one
flat #103328, edge to edge, has no light in it — the eye reads an unlit room,
not an elegant dark one. So: same colours, but lit. A sun above the top of the
page, three soft shafts of gold falling through it, and dust turning slowly in
the light. Nothing here introduces a colour that was not already hers.
Why it is a separate file and not pasted into twenty pages: one dial to turn.
Link it LAST in so it can lift the tokens the page has already set.
To use on a page:
<- last thing in
<- first thing in
Everything animated here moves only opacity and transform, so it stays on the
compositor and costs no layout. Anyone who has asked their machine to stop
moving things gets the light and none of the motion.
========================================================================== */
/* ---- 1. one notch more light in the surfaces and the words --------------
The cards are the fix that matters. With a photograph behind the page, a card
made of 5.5% white is a sheet of glass: branches read straight through the
sentences. So --card-bg stops being a tint and becomes a panel — her own green,
80% — and every card on every page inherits it, including pages nobody has
written yet. Chasing this class by class was the wrong instinct: there are
five different card class names across six pages, and the token is one place. */
:root {
--mist: #dcebe1; /* was #cfe0d6 — dim on this green */
--card-bg: rgba(12, 40, 31, 0.80); /* was 5.5% white — a pane of glass */
--card-line: rgba(255, 255, 255, 0.20);
}
/* cards read as objects sitting on the page, not as a patch of the page */
.pillar, .prod, .card, .rescard, .tile, .g5price, .g5camp, .drawerin, .eform {
box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* The shared front door (index.html) is built on site.css, whose sections paint
their own solid colour — so the tree stopped dead at the top of the page and
left a hard seam across it. This file is only ever loaded on a lit page, so
these can be cleared outright: the light IS the background now. */
.hero-crest, .hero-crest.dark, section.tint, section.band { background: transparent; }
/* ---- 2. the light itself ------------------------------------------------- */
.daylight {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
/* the page's own content has to sit in front of it. Static elements have no
stacking order of their own, and a fixed layer would paint straight over them. */
body > *:not(.daylight) { position: relative; z-index: 1; }
.daylight span, .daylight img { position: absolute; display: block; }
/* the sun, just above the top edge — never drawn, only felt */
.daylight .sun {
left: 50%; top: -30vh; width: 130vw; height: 130vh;
transform: translateX(-50%);
background: radial-gradient(50% 50% at 50% 50%,
rgba(232, 200, 128, 0.17) 0%,
rgba(30, 107, 79, 0.34) 36%,
rgba(16, 51, 40, 0) 74%);
animation: dl-breathe 19s ease-in-out infinite;
}
/* three shafts of light coming down through it */
.daylight .shaft {
top: -45vh; height: 175vh; transform-origin: top center;
background: linear-gradient(to bottom,
rgba(232, 200, 128, 0.16) 0%,
rgba(232, 200, 128, 0.085) 38%,
rgba(232, 200, 128, 0.035) 70%,
rgba(232, 200, 128, 0) 99%);
filter: blur(22px);
}
.daylight .s1 { left: 6vw; width: 15vw; transform: rotate(13deg);
animation: dl-drift-a 34s ease-in-out infinite alternate; }
.daylight .s2 { left: 38vw; width: 22vw; transform: rotate(16deg); opacity: .8;
animation: dl-drift-b 46s ease-in-out infinite alternate; }
.daylight .s3 { left: 72vw; width: 13vw; transform: rotate(11deg); opacity: .7;
animation: dl-drift-a 40s ease-in-out infinite alternate-reverse; }
/* ---- the tree (CEO 2026-09-10) -----------------------------------------
She sent a photograph and said use this one. It is the right call — a grown
SVG tree, seen at full strength, always reads as drawn.
But the photograph is a bright one: blue sky, pale cloud, sunlit grass. Laid
in raw it would take the site off her palette entirely and put cream type on
pale grass, which cannot be read. So the photograph goes in UNDER a veil of
her own green — heaviest across the bottom, where the grass is brightest and
where the words sit; lightest at the top left, where the trunk is. What comes
through is the tree at golden hour, which is what the page wanted all along.
Fixed, not scrolling: you sit under the tree, the page moves past you. */
.daylight .photo {
inset: -3% -3%; width: 106%; height: 106%;
object-fit: cover; object-position: 20% 42%;
filter: saturate(.72) brightness(.86) hue-rotate(-8deg);
animation: dl-breeze 64s ease-in-out infinite alternate;
}
.daylight .veil {
inset: 0; width: 100%; height: 100%;
background:
radial-gradient(46% 40% at 82% 8%, rgba(232, 200, 128, 0.22) 0%,
rgba(232, 200, 128, 0) 68%),
linear-gradient(180deg,
rgba(16, 51, 40, 0.60) 0%,
rgba(16, 51, 40, 0.70) 30%,
rgba(16, 51, 40, 0.86) 58%,
rgba(16, 51, 40, 0.94) 80%,
rgba(16, 51, 40, 0.97) 100%);
}
@keyframes dl-breeze {
from { transform: scale(1) translate3d(0, 0, 0); }
to { transform: scale(1.045) translate3d(-1.1%, -0.6%, 0); }
}
/* light that has reached the floor and come back up — keeps the bottom of a
long page from falling back into the unlit room */
.daylight .floor {
left: -10vw; right: -10vw; bottom: -18vh; width: 120vw; height: 62vh;
background: radial-gradient(60% 100% at 42% 100%,
rgba(30, 107, 79, 0.34) 0%,
rgba(232, 200, 128, 0.05) 34%,
rgba(16, 51, 40, 0) 78%);
animation: dl-breathe-slow 27s ease-in-out infinite;
}
@keyframes dl-breathe-slow {
0%, 100% { opacity: .7; }
50% { opacity: 1; }
}
/* dust turning in the light — the thing that makes a still page feel alive */
.daylight .motes {
inset: -12% -12%;
background-image: radial-gradient(circle,
rgba(240, 216, 156, 0.7) 0 1.1px, transparent 1.4px);
}
.daylight .m1 { background-size: 168px 168px; opacity: .22;
animation: dl-rise 58s linear infinite; }
.daylight .m2 { background-size: 97px 97px; opacity: .10;
animation: dl-rise 96s linear infinite reverse; }
@keyframes dl-breathe {
0%, 100% { opacity: .78; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
@keyframes dl-drift-a {
from { transform: rotate(11deg) translateX(-2.2vw); opacity: .62; }
to { transform: rotate(16deg) translateX(2.2vw); opacity: 1; }
}
@keyframes dl-drift-b {
from { transform: rotate(18deg) translateX(2vw); opacity: 1; }
to { transform: rotate(13deg) translateX(-2.6vw); opacity: .6; }
}
@keyframes dl-rise {
from { background-position: 0 0; }
to { background-position: 140px -880px; }
}
/* ---- 3. small screens and still screens --------------------------------- */
@media (max-width: 900px) {
/* on a phone the trunk is most of what fits; hold it at the left edge */
.daylight .photo { object-position: 12% 40%; }
}
@media (max-width: 640px) {
/* three shafts across a phone is soup; keep the middle one and the sun */
.daylight .s1, .daylight .s3, .daylight .m2 { display: none; }
.daylight .floor { height: 46vh; }
.daylight .photo { animation: none; } /* save the battery */
}
@media (prefers-reduced-motion: reduce) {
.daylight .sun, .daylight .shaft, .daylight .motes,
.daylight .floor, .daylight .photo { animation: none; }
}