/* ========================================================================== BNSCA atmosphere — depth, side lighting, the sea-blue day palette and the cosmic horizon under the footer. Why this is a separate file, and not more rules in style.css ------------------------------------------------------------ The brief for this layer was explicit that the Admin Panel and the Member Panel must not change. Both of those load `tokens.css` and `style.css` — `admin/dashboard.html` links all of the first four stylesheets the home page does — so anything written into a shared `:root` there reaches them whether it was meant to or not. A comment saying "public only" would not have made that untrue. Isolation here is therefore structural rather than a matter of care: this file is linked from the fourteen public pages and from nothing else. The admin document never contains it, so no selector in it can match anything in the admin document, no matter how broadly it is written. That is why the `:root` blocks below are allowed to look global — in the only documents that ever parse them, they are. `members.html` is deliberately *not* in the list. Its title says Member Portal and its markup is a login stage, an OTP stage, a dashboard and a chat panel: it is the Member Panel, which is out of scope, even though it wears the public header and footer. It keeps the palette it had. Loaded after `style.css`, so an alias defined in both resolves here. What it changes, in order ------------------------ 1. The day palette: a sea-blue page instead of the near-white one, with the golds re-measured against it rather than carried over. 2. A depth system — three elevations, each a *pair* of shadows plus a lit edge, lit consistently from the upper left. 3. The banner, blended into the page instead of ending at a hard rule. 4. The footer's cosmic horizon, in both themes. No rule in this file sets a width, a height, a margin, a padding, a position that moves anything, a font-size or a display. The page is laid out exactly as it was; only its light changes. ========================================================================== */ /* ========================================================================== 1. THE DAY PALETTE — sea blue The light theme's page was #F5F7FB: white with a hint of blue in it. On a screen that is simply white, and everything the site puts on it — white cards, white panels, white inputs — has nothing to sit *against*. That is the whole reason the day theme reads as flat. It is not missing shadows so much as missing a background for shadows to fall on. So the page becomes sea blue and the cards stay near-white. The contrast between surface and page is what creates depth; the shadows in section 2 only describe it. Every value below is a measured one, not a picked one. The constraint that set them is the gold: `--c-gold` is used as *text* (the Join Us button's label, the review stars, section titles) and the light theme's #846714 was tuned against #F5F7FB. Against the deepest tone of the sea-blue page it measures 3.99:1 — under AA, and under it everywhere at once, because it is the token. Deepening it to #725913 restores the margin: 4.97:1 on the deepest page tone and 6.66:1 on a white card, against a 4.5 requirement. The hue is unchanged. It is the same gold with its lightness pulled down, which is exactly what the light theme already does to #D4AF37 — this is one further step down the same line, forced by a darker page. ========================================================================== */ :root[data-theme="light"] { /* The sea, from mist at the top of the page to open water at the bottom. `--surface-page` stays a single flat colour because a great many rules use it as a solid fill — a sticky header's backdrop, a fade-out mask over a truncated list — and those need one colour, not a gradient. It is set to the middle of the range so anything painted with it sits invisibly against the gradient behind it. */ --sea-mist: #EAF2F9; --sea-open: #D3E2F0; --surface-page: #DEEAF5; /* Cards keep their near-white, lifted the last step to true white at the top edge by the lit edge in section 2. The faint warmth (#FCFDFF is cooler than paper, deliberately) keeps them reading as *lit* surfaces rather than as holes cut in the page. */ --surface-panel: #FCFDFF; --surface-card: #FCFDFF; --surface-input: #FFFFFF; /* Hairlines take the sea's own hue rather than a neutral grey, so a divider inside a card looks like part of the same picture. */ --surface-line: #BCD2E4; --surface-veil: rgba(12, 42, 78, 0.07); --surface-tint: rgba(12, 42, 78, 0.05); /* Shadows are the sea's colour, not black. A black shadow on a blue page reads as a smudge; a deep-blue one reads as the page's own colour in shade, which is what a shadow physically is. */ --surface-shadow: rgba(12, 42, 78, 0.16); --surface-shadow-soft: rgba(12, 42, 78, 0.11); --surface-shadow-strong: rgba(12, 42, 78, 0.24); /* The golds, re-measured against the sea rather than against near-white. See the block comment above for the numbers. */ --c-gold: #725913; --c-gold-light: #6A5311; --c-gold-deep: #7E6419; --c-gold-veil: rgba(114, 89, 19, 0.34); --c-gold-veil-soft: rgba(114, 89, 19, 0.16); /* ---------- Status colours, re-measured against the sea ----------------- The light theme's red, green and amber were tuned against #F5F7FB, where they measured 5.01, 5.30 and 5.35. Against #D3E2F0 — the deepest tone of the sea, and the one at the foot of the viewport — all three slip under AA together: 4.26, 4.44 and 4.48. The red is the one that shows, because `.effective-date` on the privacy and terms pages is a line of red text on the open page rather than a badge. That the page is `background-attachment: fixed` is what makes this a real failure rather than a theoretical one: the tone under any given line of text depends on where it sits in the *viewport*, so every line meets the deepest tone at some scroll position. There is no "but that text is near the top of the page" to hide behind. Deepened just far enough to clear 4.5 with margin on that worst tone — 4.93, 4.95 and 5.36 — and no further, because these three carry meaning and a set of near-blacks would communicate less than the contrast problem cost. Behind white text, as badge fills, deepening only helps. */ --c-error: #B51F1F; --c-success: #106B2D; --c-warning: #8F4107; /* Body text. The existing --ink-on-pale (#12233F) is already a deep navy and needs no change on a bluer page — it measures far above AA on every tone of the sea. What did need changing is the *muted* text: #475569 is a cool grey that disappears into a blue page far faster than it did into a white one. It becomes a navy of the same darkness instead, which holds its separation from the background because it shares the background's hue. */ --surface-text: #16283F; --surface-text-muted: #3C5372; } /* The sea itself. Painted on `body` rather than on `html` so the gradient is the height of the document; `background-attachment: fixed` keeps it from banding on a long page, where a scrolled gradient would visibly repeat its ramp each screenful. `min-height` is the one dimension this file sets, and it sets it on the element that already fills the viewport, so nothing moves: without it a short page (the 404, an empty gallery) paints the gradient over only the few hundred pixels the content occupies and leaves flat colour beneath. */ :root[data-theme="light"] body { background-color: var(--surface-page); background-image: linear-gradient(180deg, var(--sea-mist) 0%, var(--surface-page) 45%, var(--sea-open) 100%); background-attachment: fixed; min-height: 100vh; } /* The dark theme gets the same treatment in its own register: the flat navy becomes a shallow gradient, lighter at the top where the light is coming from and deepening toward the footer it has to meet. The range is narrow on purpose — this should read as air in the room, not as a visible sweep. */ :root:not([data-theme="light"]) body { background-color: var(--surface-page); background-image: linear-gradient(180deg, #0C2039 0%, #0A192F 42%, #071426 100%); background-attachment: fixed; min-height: 100vh; } /* On a phone the gradient scrolls with the document instead. `background-attachment: fixed` is the right answer on a desktop — it keeps the ramp the height of the screen, so a 5,000px page cannot show visible banding — but it is a long-standing source of scroll jank on mobile browsers, which have to repaint the whole backdrop on every frame rather than translating it. Switching to `scroll` stretches the same three stops over the whole document. That is a slower sweep, not a different palette: the colours a line of text can meet are exactly the ones the contrast audit measured, so nothing needs re-checking. */ @media (max-width: 768px) { :root[data-theme="light"] body, :root:not([data-theme="light"]) body { background-attachment: scroll; } } /* ========================================================================== 2. DEPTH — three elevations, lit from the upper left What was there before was a single shadow: `0 4px 18px rgba(0,0,0,0.45)`, straight down, one blur, black. One shadow can say "this is above the page"; it cannot say how far, and it cannot say where the light is. Each elevation below is three things at once: * a **contact shadow** — tight, close, slightly stronger. This is the one the eye reads as "the object is touching the surface", and it is the one whose absence makes a card look pasted on. * an **ambient shadow** — wide, soft, weak, offset further. This is the room's light being blocked, and it is what carries the sense of height. * a **lit edge** — an inset hairline along the top and left, the colour of the light rather than of the surface. A raised object catches light on the faces turned toward the source, and without it the two shadows just read as blur. All three are offset consistently to the *lower right*, because the light is agreed to be at the upper left. That agreement is the reason the page reads as one scene: shadows pointing in different directions on neighbouring cards is exactly what makes a layout feel assembled rather than lit. The offsets grow faster than the blur between levels, which is how physical shadows behave as an object rises, and is why level 3 reads as meaningfully higher rather than merely blurrier. ========================================================================== */ :root { /* The light source's own colour, used for the lit edge. White at low alpha in the dark theme — the only light in a night scene is what the object reflects. */ --lit-edge: rgba(255, 255, 255, 0.09); --lit-edge-strong: rgba(255, 255, 255, 0.14); --depth-1: 1px 1px 2px var(--surface-shadow-soft), 3px 5px 14px var(--surface-shadow-soft), inset 1px 1px 0 var(--lit-edge); --depth-2: 2px 2px 4px var(--surface-shadow-soft), 6px 12px 28px var(--surface-shadow), inset 1px 1px 0 var(--lit-edge-strong); --depth-3: 3px 4px 8px var(--surface-shadow), 12px 26px 54px var(--surface-shadow-strong), inset 1px 1px 0 var(--lit-edge-strong); } :root[data-theme="light"] { /* On a bright page the lit edge is the page's own highlight, so it is white at much higher alpha — near-opaque along the top of a white card, which is what gives it its rounded, physical top edge. */ --lit-edge: rgba(255, 255, 255, 0.85); --lit-edge-strong: rgba(255, 255, 255, 1); } /* The surfaces that take it. These are the same selectors style.css already groups as "every card-like block", listed again rather than restyled at source so that the admin's `.card` — which is the same class name in a document that never loads this file — is untouched. `box-shadow` only. Not one of these rules sets a border, a radius, a background or a size, so a card is exactly the card it was, differently lit. */ .card, .panel, .member-card, .gallery-item, .notice-item, .event-card, .page-card, .sub-card, .contact-card, .review-card, .policy-card, .rp-card, .dn-card, .mission-card { box-shadow: var(--depth-2); } /* Small, dense, repeated things sit lower. A grid of forty thumbnails each casting a level-2 shadow is not depth, it is noise — the shadows merge into a grey wash between the tiles and the grid ends up looking dirtier than it did flat. */ .thumb, .tick-row, .social-circles a { box-shadow: var(--depth-1); } /* Hover raises the object rather than adding a glow to it. The existing hover kept its gold aura, which is part of the club's look and is not being taken away — it is simply no longer doing the lifting on its own. The transform is left exactly as style.css sets it; only the shadow it animates to is replaced, so the motion is unchanged and the destination is a taller version of the same lighting rather than a different effect. */ .card:hover, .member-card:hover, .gallery-item:hover, .notice-item:hover, .event-card:hover { box-shadow: var(--depth-3), 0 0 34px var(--c-gold-veil); } /* The header is a plane above the page, and says so with a shadow beneath it rather than with the line it used. A line is a boundary; a shadow is a height, and the header is genuinely floating over content that scrolls under it. */ .site-header { box-shadow: 0 1px 0 var(--c-gold-veil-soft), 0 6px 24px var(--surface-shadow-soft); } /* ========================================================================== 3. THE BANNER, BLENDED `.page-hero` ended at `border-bottom: 2px solid gold` — a hard 2px rule straight across the page, with the photograph stopping dead above it. It is the sharpest edge on the site, and on the compact banners it lands close enough to the title to read as a box drawn around it. The rule goes and a gradient takes its place: the banner's own bottom fades into whatever the page colour is beneath it, so the photograph appears to dissolve into the page rather than to be cropped by it. Because the fade is painted *inside* the banner as an overlay, the banner is the same height it was and the content below starts in the same place. The gold is not lost — it becomes a soft glow along the same line instead of a rule, which is the club's colour still marking the edge, just not with a knife. ========================================================================== */ .page-hero { border-bottom: none; /* The banner already sets `position: relative` and `overflow: hidden`, which is what lets the overlay below be positioned and clipped. Restated so this rule does not silently depend on a line 3,600 lines away. */ position: relative; overflow: hidden; } /* The dissolve. `currentColor` is not usable here — the banner's text colour is gold — so the page colour is named directly, and it is the same token the body is painted from, which is what makes the blend exact in both themes. `pointer-events: none` because this sits over the banner's own content, and the home banner's slides are clickable. */ .page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 92px; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--hero-blend-mid) 62%, var(--surface-page) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--c-gold-veil-soft) 78%, rgba(0, 0, 0, 0) 100%); } :root { --hero-blend-mid: rgba(10, 25, 47, 0.55); } :root[data-theme="light"] { --hero-blend-mid: rgba(222, 234, 245, 0.6); } /* The home banner is layered: the photograph slides at z-index 0, a tint over them at 1, and the title and subtitles above both at 2. The blend goes between the tint and the text, and the text moves up one to make room. The `:not()` list is copied from style.css's own rule, and it is the whole point of this one. Written as a bare `.page-hero > *` — which is what it was first — it has the same specificity as `.hero-slides { position: absolute }` and loads later, so it wins, and the photograph layer that must be absolute becomes relative. The slides then stack in the document flow and the home banner falls apart. Anything selecting the hero's children has to exclude the three that are positioned layers rather than content. */ .page-hero > *:not(.hero-slides):not(.hero-overlay):not(.hero-decor) { position: relative; z-index: 3; } /* ========================================================================== 4. THE COSMIC HORIZON The footer used to be the page colour with `border-top: 2px solid gold` across it — in the day theme, a near-white block under a near-white page, separated by a gold line. Nothing about it read as an ending. It now falls away into space. The page colour at the top, a deepening band through it, and near-black by the time the copyright line is reached, with a faint field of stars and a warm glow along the horizon where the light the page was lit by finally goes out. The transition is *long* — most of the footer's height plus 110 pixels above it — because a short fade from a pale page to black is a dark band, not a horizon. The 110 pixels above are painted by an overlay that is absolutely positioned outside the footer's box, so it costs no height: the footer is the same size it was, and the fade begins in the empty margin that already sat above it. Both themes get it. In the dark theme the page is already navy and the footer merely continues downward into deeper space; in the day theme it is the whole point of the effect — the sea-blue page reaching dusk. ========================================================================== */ #site-footer { position: relative; /* The hard rule is what the brief specifically objected to. What replaces it is the glow at the horizon, painted by ::before below. */ border-top: none; background: /* The horizon glow: a wide, very soft warm light along the top edge, as though the last of the day is behind the fold. */ radial-gradient(120% 90px at 50% 0%, var(--horizon-glow) 0%, rgba(0, 0, 0, 0) 72%), /* Space. The first stop is 0.34 and not 0, and that number is not free: it is exactly where the ::before overlay above the footer finishes. Written as 0 it looked right in the file and produced a visible seam straight across the page — the overlay handed off at 34% darkness to a gradient starting at nothing, and the eye reads a step of a third of an alpha as a drawn line, which is the very thing the border-top was removed for. The two gradients are one continuous fade and have to agree at the join. */ linear-gradient(180deg, rgba(3, 7, 18, 0.34) 0%, rgba(3, 7, 18, 0.52) 16%, rgba(3, 7, 18, 0.85) 42%, #050912 68%, #01030A 100%); /* Everything in the footer is now on black, in both themes. */ color: #C9D6E8; } :root { --horizon-glow: rgba(212, 175, 55, 0.13); } :root[data-theme="light"] { /* Warmer and slightly stronger in the day theme, because it is standing in for a sunset over the sea rather than for a lamp in a dark room. */ --horizon-glow: rgba(232, 190, 92, 0.2); } /* The 110 pixels above the footer, where the fade begins. Absolutely positioned with a negative top, so it paints over the bottom of the page without occupying any space of its own — the footer's box is untouched and nothing below it moves. `pointer-events: none` matters: this overlaps the last section of every page, and without it the bottom 110 pixels of that section would stop accepting clicks. */ #site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: -110px; height: 110px; pointer-events: none; background: linear-gradient(180deg, rgba(3, 7, 18, 0) 0%, rgba(3, 7, 18, 0.06) 45%, rgba(3, 7, 18, 0.2) 78%, rgba(3, 7, 18, 0.34) 100%); } /* The stars. A handful of fixed radial gradients rather than the animated star field the rest of the site uses, because this is a footer: it should settle, not twinkle. They are placed in the lower half only, where the background has actually reached black — a star painted over the still-pale top of the fade is a grey dot. `background-repeat: no-repeat` on a single layered background of nine tiny radial gradients costs one paint and no elements. */ #site-footer::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55; background-repeat: no-repeat; background-image: radial-gradient(1.5px 1.5px at 12% 62%, rgba(255,255,255,0.85), transparent), radial-gradient(1px 1px at 26% 78%, rgba(255,255,255,0.6), transparent), radial-gradient(1.5px 1.5px at 38% 55%, rgba(252,246,186,0.7), transparent), radial-gradient(1px 1px at 51% 86%, rgba(255,255,255,0.55), transparent), radial-gradient(2px 2px at 64% 68%, rgba(252,246,186,0.75), transparent), radial-gradient(1px 1px at 73% 52%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 84% 80%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 92% 60%, rgba(252,246,186,0.6), transparent), radial-gradient(1px 1px at 6% 88%, rgba(255,255,255,0.45), transparent); } /* The footer's own content sits above both overlays. */ #site-footer > * { position: relative; z-index: 1; } /* ---- Footer text, on black, in BOTH themes ---------------------------- This is the part that would break silently if it were forgotten. style.css sets `:root[data-theme="light"] #site-footer { color: var(--ink-on-pale) }` — a deep navy, correct against the near-white footer it was written for and invisible against the black one. The selectors below carry one extra element qualifier (`html`) so they outrank it on specificity rather than by `!important`, which would take the override away from anyone who needs it later. */ html:root #site-footer, html:root #site-footer p, html:root[data-theme="light"] #site-footer, html:root[data-theme="light"] #site-footer p { color: #C9D6E8; } html:root #site-footer .footer-credit, html:root[data-theme="light"] #site-footer .footer-credit { color: #8A9BB4; } html:root #site-footer .footer-links a, html:root[data-theme="light"] #site-footer .footer-links a { color: #DCC98A; } /* There is deliberately no `:hover` rule here, and that is worth a sentence because the obvious one is wrong. style.css fills these links with gold on hover and puts dark navy on top of it (`.footer-links a:hover { background: var(--gold); color: #0b1f38 }`). Adding a hover colour here overrides the text but not the fill, which is how a first draft of this file ended up painting pale gold #FCF6BA onto a gold background at about 1.35:1 — a link that vanished at the moment the pointer reached it. The existing hover already reads correctly against the black footer in both themes: bright gold with navy text in the dark theme, and the deepened gold with white text that style.css's own light override supplies. The right move is to leave it alone. */ html:root #site-footer .footer-location, html:root[data-theme="light"] #site-footer .footer-location { color: #D9E4F2; border-color: rgba(212, 175, 55, 0.4); background: rgba(255, 255, 255, 0.05); } /* The social circles sit on black now, so they take the night palette in both themes — the same values the dark theme already used, restated here so the day theme cannot hand them its deepened gold, which was chosen to be read against white and is nearly invisible against black. */ html:root #site-footer .social-circles a, html:root[data-theme="light"] #site-footer .social-circles a { border-color: rgba(212, 175, 55, 0.55); color: #D4AF37; background: rgba(255, 255, 255, 0.04); } /* ========================================================================== 5. WHAT THE DEEPER GOLD BROKE, AND WHY IT IS FIXED HERE RATHER THAN UNDONE `--c-gold` carries two jobs that pull in opposite directions. As *text* it has to be dark enough to read on a pale surface, which is why the light theme deepens it and why the sea-blue page deepened it one step further. As a *fill* — a gold chip, a gold button, a gold hover — it has to stay light enough for the dark text sitting on top of it. Every step that helps the first job hurts the second. Measured after the change, three places had dark text on a gold fill: .notice-tag #16233A on #725913 2.36 : 1 .btn:hover #0B1F38 on #725913 2.36 : 1 .nav-search.is-open navy on #725913 2.4 : 1 None of them was introduced by this file — at the previous gold they measured 2.94:1 and were already under AA — but they were made worse by it, which makes them this file's business to fix. Reverting the gold is not the fix. To keep #846714 readable as text the page would have to stay at about #E8F0F8, which is white with a hint of blue in it: the sea-blue day theme and the old gold cannot both exist. So the token keeps the value the *text* needs, and the handful of places that use gold as a background say what colour belongs on top of it. That is the same split the site already made once, when the red used as text got its own `--red-text` rather than dragging the red used as a fill along with it. ========================================================================== */ /* The full list, found by searching style.css for every rule that paints a gold background and sets a dark text colour on it — seven of them: .btn-gold already handled by style.css's own light override .footer-links a:hover " .toast " .btn:hover fixed below .skip-link fixed below .nav-search.is-open .nav-search-icon fixed below .notice-tag fixed below, the other way round .rp-section-head " Three of the seven were already right, which is worth stating: the light theme had solved this problem before, just not everywhere, and the deeper gold turned the places it had missed from marginal into obvious. Where gold is a background, the text on it goes white. White on #725913 is 6.66:1 — better than the dark text ever managed, in either theme. */ :root[data-theme="light"] .btn:hover, :root[data-theme="light"] .skip-link, :root[data-theme="light"] .nav-search.is-open .nav-search-icon { color: #FFFFFF; } /* The notice tag is the exception, and takes the opposite fix. It is a bright gold chip with dark type on it — that is what the element *is*, and turning it into a dark chip with white type would be a different design rather than a corrected one. Its fill is already a gradient running from the gold token to a pale gold #F0D089, and the pale end reads at 10.5:1 with the existing navy text. So in the day theme the fill simply stays at that pale end for its whole width, and the text is untouched. Measured: #16233A on #E8C377 is 8.6:1 at the darker end of the new gradient, and the chip still reads as gold rather than as cream. */ :root[data-theme="light"] .notice-tag { background: linear-gradient(90deg, #E8C377, #F3D89B); } /* The donation form's section bands are the same kind of thing — a gold band with dark uppercase type on it, running the width of the form — and take the same answer for the same reason. Measured: #14243C on #E3BC6C is 8.67:1. */ :root[data-theme="light"] .rp-section-head { background: linear-gradient(90deg, #E3BC6C, #F0D293); } /* ---- Two pre-existing dark-theme reds, found while auditing -------------- Neither was caused by this file and neither is in the day theme, but both are real AA failures on the public site and both fixes are one line, so they are taken here rather than written down and left. `.cb-closed` — "Sunday: Closed" on the contact page — is red *text* on a navy card at 3.59:1. The site already has the value it should be using: `--red-text` exists precisely because a red chosen to be a badge fill is too dark to read as text on navy, and it is what the admin panel's reject labels use. #E88B93 on that card measures 5.47:1. `.notif-new` — the bell badge in the header — is the opposite case: white text on a red fill at 3.76:1. Here the red is the background, so it is the background that deepens. White on #D32F2F is 4.98:1, and the badge still reads as the same alert red at the size it is actually drawn. `.effective-date` on the privacy and terms pages joins them, and that one *is* this file's doing. It was red text on the flat #0A192F page at 4.67:1 — passing, with very little room. The night gradient in section 1 lifts the top of the page to #0C2039, which is a lighter surface, and that was enough to put it at 4.35:1. Exactly the same lesson as the day theme's status colours one section up: a colour measured against one flat background is not measured at all once the background becomes a range. #E88B93 on that tone is 6.67:1, so it clears the lift and everything below it. All three are scoped to the dark theme; the day theme's deepened red already clears AA in both roles. */ :root:not([data-theme="light"]) .cb-closed, :root:not([data-theme="light"]) .effective-date { color: var(--red-text, #E88B93); } :root:not([data-theme="light"]) .effective-date { border-color: var(--red-text, #E88B93); } :root:not([data-theme="light"]) .notif-new { background: #D32F2F; } /* ========================================================================== 6. ANIMATION INKS, RE-AIMED AT THE SEA The light theme's star field was measured against #F5F7FB. The page is now #DEEAF5 at its middle and #D3E2F0 at its foot — darker and bluer — which moves the stars closer to their background at exactly the point where the field is densest. They are deepened to compensate, and only that. The palette is not redesigned: navy and muted royal blue with a gold cast on the rare large ones, as before, because that decision was about what the field should look like and nothing about the page has changed that. ========================================================================== */ :root[data-theme="light"] { --stars-ink-1: rgba(18, 40, 71, 0.40); --stars-ink-2: rgba(24, 56, 100, 0.48); --stars-ink-3: rgba(114, 89, 19, 0.46); /* ShineBorder and the Limelight lamp are both dark accents in the day theme and both were already navy, so they hold against a bluer page. The one value that does not is the pale end of ShineBorder's gold, which was set at 0.45 alpha to keep it from disappearing into white; against the sea it can afford — and needs — to be firmer. */ --shine-ink-gold: #725913; --shine-ink-gold-soft: rgba(114, 89, 19, 0.6); }