/* ========================================================================== BNSCA glass cards — one static gradient-glass surface, everywhere This file is the single source of truth for how a card looks. There is no second card system: the travelling reflection, the breathing back-light, the rotating border beam and the sweeping shine border are all gone, and what replaced them lives here. A card is: a translucent deep-navy glass surface + a static gradient illumination inside it + a thin lit edge + one controlled shadow + a backdrop blur and it does not move. Not on hover, not on focus, not on scroll, not on a timer. That is the whole brief and it is worth stating plainly, because every one of those animations looked reasonable on its own and the four together made the page restless. Four strengths, one family -------------------------- The same surface at four densities, because a statistics tile and a modal dialog have different jobs: panel the large containers a page is built around — stronger glass, deeper shadow card the ordinary case tile small, dense, repeated — lighter surface, restrained edge solid modals and dropdowns — nearly opaque, because a dialog has to be read against whatever happens to be behind it Why the selectors carry `:root[data-surface][data-theme]` -------------------------------------------------------- Existing rules set `background` on these same cards at specificities up to (0,4,0) — the worst is `:root[data-theme="light"] .member-grid .member-card`. A (0,3,0) selector loses to it, and an earlier version of this file did: cards stayed opaque while the file looked correct. Two attributes bring these to (0,4,0), and this stylesheet is linked last, so it takes the tie. Why `background-color` is cleared explicitly -------------------------------------------- `background-image` and `background-color` are separate properties. Setting only the image leaves whatever opaque colour the old rules put in `background-color` sitting *behind* the translucent tint — the glass is painted onto a solid wall and the card looks exactly as it always did. That shipped once. The check that catches it is reading back computed `backgroundColor` on every card and asserting `rgba(0, 0, 0, 0)`. ========================================================================== */ /* ========================================================================== 1. THE TOKENS Two palettes, because the public site and the Admin Panel are lit differently. Both are dark: the light theme was removed from the project. ========================================================================== */ :root { /* Public. Deep navy-teal glass over the page's own gradient. */ --glass-bg: rgba(6, 34, 44, 0.62); --glass-bg-panel: rgba(5, 28, 37, 0.70); --glass-bg-tile: rgba(8, 40, 51, 0.55); --glass-bg-solid: rgba(4, 24, 32, 0.96); /* The illumination inside the glass. The accent is cyan — that decision is the club's and it is what `cyan-identity.css` carries through the rest of the site — so the light in the upper left is cyan. The lower-right hint is the club's gold, kept very restrained: enough that BNSCA's colour is present in the card surface, not enough to read as a second theme. */ --glass-lit-1: rgba(34, 211, 238, 0.13); --glass-lit-2: rgba(212, 175, 55, 0.055); --glass-border: rgba(56, 189, 248, 0.24); --glass-border-hi: rgba(103, 232, 249, 0.40); --glass-highlight: rgba(255, 255, 255, 0.10); /* One shadow, three layers: a contact shadow, an ambient shadow, and a cyan-tinted bloom that stands in for the light the page is lit by. This replaces the breathing back-light that used to be its own stylesheet. */ --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.38), 0 4px 26px rgba(34, 211, 238, 0.10); --glass-shadow-panel: 0 2px 4px rgba(0, 0, 0, 0.50), 0 22px 52px rgba(0, 0, 0, 0.45), 0 6px 34px rgba(34, 211, 238, 0.12); --glass-shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.38), 0 8px 20px rgba(0, 0, 0, 0.30); --glass-shadow-solid: 0 28px 70px rgba(0, 0, 0, 0.68), 0 2px 6px rgba(0, 0, 0, 0.5); --glass-blur: 10px; --glass-saturation: 118%; /* The inner tier - see section 3b. Lighter glass than the containers it sits in, and a shorter blur: a row inside a card inside a panel is three blurs deep, and each one is paid for by the GPU on every frame. */ --glass-bg-inner: rgba(10, 30, 52, 0.42); --glass-blur-inner: 6px; } /* The Admin Panel. `data-surface="admin"` is stamped onto by theme.js before the first paint. Everything is a little firmer than on the public site: this is a screen of tables, amounts and member names, and readability there outranks transparency. */ :root[data-surface="admin"] { --glass-bg: rgba(6, 24, 33, 0.68); --glass-bg-panel: rgba(5, 20, 28, 0.76); --glass-bg-tile: rgba(8, 30, 40, 0.62); --glass-bg-solid: rgba(4, 18, 25, 0.97); --glass-lit-1: rgba(34, 211, 238, 0.11); --glass-lit-2: rgba(212, 175, 55, 0.05); --glass-border: rgba(56, 189, 248, 0.22); --glass-border-hi: rgba(103, 232, 249, 0.38); --glass-blur: 12px; --glass-bg-inner: rgba(8, 30, 40, 0.48); } /* ========================================================================== 2. THE SURFACE One gradient stack, used by every tier. The two illuminations are radial and fixed in place — no `background-position` animation, no travelling band, and nothing that changes over time. `--glass-fill` is the tier's own tint and is the only part that varies. ========================================================================== */ :root { --glass-gradient: radial-gradient(120% 96% at 6% 0%, var(--glass-lit-1), transparent 58%), radial-gradient(110% 90% at 100% 100%, var(--glass-lit-2), transparent 62%), linear-gradient(var(--glass-fill, var(--glass-bg)), var(--glass-fill, var(--glass-bg))); } /* ========================================================================== 3. WHICH SURFACES GET IT Meaningful containers only. Deliberately absent: buttons, inputs, textareas, selects, checkboxes, radios, badges, chips, tags, table rows, table cells, pagination, navigation tabs, tiny icon buttons, dropdown options, chat message bubbles, list dividers and pure layout wrappers. A table sits inside one glass panel; its rows are not cards. ========================================================================== */ /* ---- Tier: panel — the large containers a page is built around ---------- */ :root[data-surface][data-theme] .panel, :root[data-surface][data-theme] .page-card, :root[data-surface][data-theme] .chat-panel, :root[data-surface][data-theme] .fee-pay-panel, :root[data-surface][data-theme] .dash-view, :root[data-surface][data-theme] .notice-board-frame, :root[data-surface][data-theme] .ov-panel, :root[data-surface][data-theme] .member-portal { --glass-fill: var(--glass-bg-panel); --glass-elev: var(--glass-shadow-panel); } /* ---- Tier: tile — small, dense, repeated -------------------------------- */ :root[data-surface][data-theme] .dash-tile, :root[data-surface][data-theme] .mission-card, :root[data-surface][data-theme] .stat-card, :root[data-surface][data-theme] .sum-card { --glass-fill: var(--glass-bg-tile); --glass-elev: var(--glass-shadow-tile); } /* ========================================================================== 3b. THE INNER TIER — every smaller card, row and box Section 3 above chose meaningful containers only, and left rows and small boxes solid on purpose. On 12 Sep 2026 the club asked for the opposite: every card, big or small, on the site, in the Member Portal and in the Admin Panel, is glass - the page shows through it, softly blurred. These are the families that were still solid. Still deliberately absent: buttons, inputs, chips, badges, table rows and cells, the chat bubbles, the notebook sheet, navigation, and pure layout wrappers - none of those is a card, and blurring a table row by row would cost more than it shows. Lighter fill and a 6px blur rather than the containers' 10-12px, because most of these sit inside a card that is already glass. ========================================================================== */ :root[data-surface][data-theme] .faq-item, :root[data-surface][data-theme] .gshow-stage, :root[data-surface][data-theme] .portal-note, :root[data-surface][data-theme] .rp-assist, :root[data-surface][data-theme] .rp-section-head, :root[data-surface][data-theme] .ask-box, :root[data-surface][data-theme] .notice-acc, :root[data-surface][data-theme] .notice-detail, :root[data-surface][data-theme] .section-photo, :root[data-surface][data-theme] .fp-step, :root[data-surface][data-theme] .dn-qr-wrap, :root[data-surface][data-theme] .am-person, :root[data-surface][data-theme] .annual-note, :root[data-surface][data-theme] .chat-compose, :root[data-surface][data-theme] .chat-contact, :root[data-surface][data-theme] .chat-new, :root[data-surface][data-theme] .dash-form, :root[data-surface][data-theme] .dash-item, :root[data-surface][data-theme] .dash-links, :root[data-surface][data-theme] .dash-qr-wrap, :root[data-surface][data-theme] .dash-search-results, :root[data-surface][data-theme] .event-full, :root[data-surface][data-theme] .fee-month, :root[data-surface][data-theme] .fee-proof, :root[data-surface][data-theme] .fee-stat, :root[data-surface][data-theme] .fee-upi, :root[data-surface][data-theme] .fee-yearnow, :root[data-surface][data-theme] .md-timer, :root[data-surface][data-theme] .nb-choice, :root[data-surface][data-theme] .nb-row, :root[data-surface][data-theme] .notice-full, :root[data-surface][data-theme] .pay-row, :root[data-surface][data-theme] .attach-file, :root[data-surface][data-theme] .attach-image, :root[data-surface][data-theme] .item-row, :root[data-surface][data-theme] .thumb, :root[data-surface][data-theme] .sl-row, :root[data-surface][data-theme] .cs-block, :root[data-surface][data-theme] .cs-trash, :root[data-surface][data-theme] .cs-trash-row, :root[data-surface][data-theme] .cs-edit, :root[data-surface][data-theme] .cs-format-help, :root[data-surface][data-theme] .cs-builtin-note, :root[data-surface][data-theme] .tpl-stage, :root[data-surface][data-theme] .tpl-field, :root[data-surface][data-theme] .tpl-default, :root[data-surface][data-theme] .trg-card, :root[data-surface][data-theme] .eq-row, :root[data-surface][data-theme] .fee-admin-month, :root[data-surface][data-theme] .fee-manual-chosen, :root[data-surface][data-theme] .fee-manual-field, :root[data-surface][data-theme] .fee-manual-results, :root[data-surface][data-theme] .fee-reject-box, :root[data-surface][data-theme] .fee-search, :root[data-surface][data-theme] .fee-source, :root[data-surface][data-theme] .fee-year-form, :root[data-surface][data-theme] .fin-filter, :root[data-surface][data-theme] .member-picker, :root[data-surface][data-theme] .mrow, :root[data-surface][data-theme] .list-search, :root[data-surface][data-theme] .ov-controls, :root[data-surface][data-theme] .ov-panel-head, :root[data-surface][data-theme] .send-grid, :root[data-surface][data-theme] .audit-controls, :root[data-surface][data-theme] .db-lock, :root[data-surface][data-theme] .db-notice, :root[data-surface][data-theme] .pf-photo { --glass-fill: var(--glass-bg-inner); background-color: transparent; background-image: var(--glass-gradient); background-repeat: no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow-tile), inset 0 1px 0 var(--glass-highlight); backdrop-filter: blur(var(--glass-blur-inner)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur-inner)) saturate(var(--glass-saturation)); animation: none; transition: none; transform: none; } /* ---- Tier: solid — dialogs and popups ---------------------------------- A modal has to be read against whatever is behind it, so it is nearly opaque. It is still the same family — same gradient, same edge — just thicker glass. The fee dialogs and the member list that drops down inside them are here too: the list opens over the month grid, and as thin glass its names and the month buttons read through each other. */ :root[data-surface][data-theme] .fee-reject-box, :root[data-surface][data-theme] .fee-manual-results, :root[data-surface][data-theme] .modal-card, :root[data-surface][data-theme] .bn-modal-card, :root[data-surface][data-theme] .dropdown-menu, :root[data-surface][data-theme] .menu-pop, :root[data-surface][data-theme] .msg-menu, :root[data-surface][data-theme] .emoji-panel, :root[data-surface][data-theme] .notif-panel, :root[data-surface][data-theme] .toast { --glass-fill: var(--glass-bg-solid); --glass-elev: var(--glass-shadow-solid); } /* The fee dialog and its member list get the solid colour underneath the gradient as well: the gradient's own fill is resolved at :root, where the tier's --glass-fill is not in force, so on its own it stays see-through. */ :root[data-surface][data-theme] .fee-reject-box, :root[data-surface][data-theme] .fee-manual-results { background-color: var(--glass-bg-solid); } /* ---- The surface itself, for every tier -------------------------------- */ :root[data-surface][data-theme] .card, :root[data-surface][data-theme] .panel, :root[data-surface][data-theme] .member-card, :root[data-surface][data-theme] .notice-item, :root[data-surface][data-theme] .notice-card, :root[data-surface][data-theme] .notice-details, :root[data-surface][data-theme] .notice-board-frame, :root[data-surface][data-theme] .event-card, :root[data-surface][data-theme] .page-card, :root[data-surface][data-theme] .sub-card, :root[data-surface][data-theme] .contact-card, :root[data-surface][data-theme] .review-card, :root[data-surface][data-theme] .policy-card, :root[data-surface][data-theme] .rp-card, :root[data-surface][data-theme] .dn-card, :root[data-surface][data-theme] .mission-card, :root[data-surface][data-theme] .highlight-card, :root[data-surface][data-theme] .gallery-item, :root[data-surface][data-theme] .dash-card, :root[data-surface][data-theme] .dash-tile, :root[data-surface][data-theme] .dash-view, :root[data-surface][data-theme] .donate-card, :root[data-surface][data-theme] .annual-box, :root[data-surface][data-theme] .fee-pay-panel, :root[data-surface][data-theme] .participate-panel, :root[data-surface][data-theme] .chat-panel, :root[data-surface][data-theme] .ov-panel, :root[data-surface][data-theme] .stat-card, :root[data-surface][data-theme] .sum-card, :root[data-surface][data-theme] .folder-card, :root[data-surface][data-theme] .login-box, :root[data-surface][data-theme] .register-box, :root[data-surface][data-theme] .success-box, :root[data-surface][data-theme] .member-portal, :root[data-surface][data-theme] .modal-card, :root[data-surface][data-theme] .bn-modal-card, :root[data-surface][data-theme] .dropdown-menu, :root[data-surface][data-theme] .menu-pop, :root[data-surface][data-theme] .msg-menu, :root[data-surface][data-theme] .emoji-panel, :root[data-surface][data-theme] .notif-panel, :root[data-surface][data-theme] .toast { /* Cleared, or the old opaque colour sits behind the tint. See the header. */ background-color: transparent; background-image: var(--glass-gradient); background-repeat: no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--glass-elev, var(--glass-shadow)), inset 0 1px 0 var(--glass-highlight); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); /* Nothing on a card animates. This is the rule that guarantees it rather than relying on having found every old keyframe: whatever a card inherited or was given elsewhere, it stops here. Controls *inside* the card are not matched by these selectors and keep their own focus and press feedback. */ animation: none; transition: none; transform: none; } /* ========================================================================== 4. HOVER A card that can be clicked says so with colour, immediately, and does not move. No lift, no scale, no glow that grows, no sweep. The border brightens and the surface lightens by a few per cent — that is the whole of it. `transition` is deliberately absent, so the change is instant rather than a short animation. A 200ms fade is still motion. ========================================================================== */ :root[data-surface][data-theme] .card:hover, :root[data-surface][data-theme] .member-card:hover, :root[data-surface][data-theme] .notice-item:hover, :root[data-surface][data-theme] .notice-card:hover, :root[data-surface][data-theme] .event-card:hover, :root[data-surface][data-theme] .gallery-item:hover, :root[data-surface][data-theme] .highlight-card:hover, :root[data-surface][data-theme] .folder-card:hover, :root[data-surface][data-theme] .stat-card:hover, :root[data-surface][data-theme] .sum-card:hover, :root[data-surface][data-theme] .dash-tile:hover, :root[data-surface][data-theme] .page-card:hover, :root[data-surface][data-theme] .sub-card:hover, :root[data-surface][data-theme] .contact-card:hover, :root[data-surface][data-theme] .mission-card:hover { border-color: var(--glass-border-hi); --glass-lit-1: rgba(34, 211, 238, 0.18); transform: none; } /* ========================================================================== 5. STOPPING THE OLD MOTION AT SOURCE The keyframes and the rules that drove them are gone from this project, but two things could still put a card in motion: a stylesheet rule this file does not out-specify, and the decorative child elements the old scripts used to inject. Both are shut off here so that "no card animates" is a property of the system rather than of having remembered every place. ========================================================================== */ /* Any leftover decorative ring, beam or glow inside a card is not drawn. The scripts that injected them are gone; this is the belt to that braces. */ :root[data-surface] .bb-ring, :root[data-surface] .bb-glow, :root[data-surface] .shine-ring { display: none !important; } /* Cards never animate and never move, whatever else asks them to. `style.css` still declares the old hover motion — `translateY(-6px)`, a `perspective(900px) ... rotateX(3deg) scale(1.02)` lift, and `reviewPulse` on the review cards — because those rules are shared with markup this file does not own. Rather than editing them in place they are neutralised here, which keeps this stylesheet the single source of truth for card behaviour and makes the whole change revertible by removing one file. The full family list is used deliberately. An earlier version of this block listed sixteen of the thirty-six families and `.review-card` was not among them, so `reviewPulse` was still running on every review. */ :root[data-surface][data-theme] .card, :root[data-surface][data-theme] .panel, :root[data-surface][data-theme] .member-card, :root[data-surface][data-theme] .notice-item, :root[data-surface][data-theme] .notice-card, :root[data-surface][data-theme] .notice-details, :root[data-surface][data-theme] .notice-board-frame, :root[data-surface][data-theme] .event-card, :root[data-surface][data-theme] .page-card, :root[data-surface][data-theme] .sub-card, :root[data-surface][data-theme] .contact-card, :root[data-surface][data-theme] .review-card, :root[data-surface][data-theme] .policy-card, :root[data-surface][data-theme] .rp-card, :root[data-surface][data-theme] .dn-card, :root[data-surface][data-theme] .mission-card, :root[data-surface][data-theme] .highlight-card, :root[data-surface][data-theme] .gallery-item, :root[data-surface][data-theme] .dash-card, :root[data-surface][data-theme] .dash-tile, :root[data-surface][data-theme] .dash-view, :root[data-surface][data-theme] .donate-card, :root[data-surface][data-theme] .annual-box, :root[data-surface][data-theme] .fee-pay-panel, :root[data-surface][data-theme] .participate-panel, :root[data-surface][data-theme] .chat-panel, :root[data-surface][data-theme] .ov-panel, :root[data-surface][data-theme] .stat-card, :root[data-surface][data-theme] .sum-card, :root[data-surface][data-theme] .folder-card, :root[data-surface][data-theme] .login-box, :root[data-surface][data-theme] .register-box, :root[data-surface][data-theme] .success-box, :root[data-surface][data-theme] .member-portal, :root[data-surface][data-theme] .modal-card, :root[data-surface][data-theme] .bn-modal-card { animation-name: none !important; } :root[data-surface][data-theme] .card:hover, :root[data-surface][data-theme] .panel:hover, :root[data-surface][data-theme] .member-card:hover, :root[data-surface][data-theme] .notice-item:hover, :root[data-surface][data-theme] .notice-card:hover, :root[data-surface][data-theme] .notice-details:hover, :root[data-surface][data-theme] .notice-board-frame:hover, :root[data-surface][data-theme] .event-card:hover, :root[data-surface][data-theme] .page-card:hover, :root[data-surface][data-theme] .sub-card:hover, :root[data-surface][data-theme] .contact-card:hover, :root[data-surface][data-theme] .review-card:hover, :root[data-surface][data-theme] .policy-card:hover, :root[data-surface][data-theme] .rp-card:hover, :root[data-surface][data-theme] .dn-card:hover, :root[data-surface][data-theme] .mission-card:hover, :root[data-surface][data-theme] .highlight-card:hover, :root[data-surface][data-theme] .gallery-item:hover, :root[data-surface][data-theme] .dash-card:hover, :root[data-surface][data-theme] .dash-tile:hover, :root[data-surface][data-theme] .dash-view:hover, :root[data-surface][data-theme] .donate-card:hover, :root[data-surface][data-theme] .annual-box:hover, :root[data-surface][data-theme] .fee-pay-panel:hover, :root[data-surface][data-theme] .participate-panel:hover, :root[data-surface][data-theme] .chat-panel:hover, :root[data-surface][data-theme] .ov-panel:hover, :root[data-surface][data-theme] .stat-card:hover, :root[data-surface][data-theme] .sum-card:hover, :root[data-surface][data-theme] .folder-card:hover, :root[data-surface][data-theme] .login-box:hover, :root[data-surface][data-theme] .register-box:hover, :root[data-surface][data-theme] .success-box:hover, :root[data-surface][data-theme] .member-portal:hover, :root[data-surface][data-theme] .modal-card:hover, :root[data-surface][data-theme] .bn-modal-card:hover, :root[data-surface][data-theme] .card:focus-within, :root[data-surface][data-theme] .panel:focus-within, :root[data-surface][data-theme] .member-card:focus-within, :root[data-surface][data-theme] .notice-item:focus-within, :root[data-surface][data-theme] .notice-card:focus-within, :root[data-surface][data-theme] .notice-details:focus-within, :root[data-surface][data-theme] .notice-board-frame:focus-within, :root[data-surface][data-theme] .event-card:focus-within, :root[data-surface][data-theme] .page-card:focus-within, :root[data-surface][data-theme] .sub-card:focus-within, :root[data-surface][data-theme] .contact-card:focus-within, :root[data-surface][data-theme] .review-card:focus-within, :root[data-surface][data-theme] .policy-card:focus-within, :root[data-surface][data-theme] .rp-card:focus-within, :root[data-surface][data-theme] .dn-card:focus-within, :root[data-surface][data-theme] .mission-card:focus-within, :root[data-surface][data-theme] .highlight-card:focus-within, :root[data-surface][data-theme] .gallery-item:focus-within, :root[data-surface][data-theme] .dash-card:focus-within, :root[data-surface][data-theme] .dash-tile:focus-within, :root[data-surface][data-theme] .dash-view:focus-within, :root[data-surface][data-theme] .donate-card:focus-within, :root[data-surface][data-theme] .annual-box:focus-within, :root[data-surface][data-theme] .fee-pay-panel:focus-within, :root[data-surface][data-theme] .participate-panel:focus-within, :root[data-surface][data-theme] .chat-panel:focus-within, :root[data-surface][data-theme] .ov-panel:focus-within, :root[data-surface][data-theme] .stat-card:focus-within, :root[data-surface][data-theme] .sum-card:focus-within, :root[data-surface][data-theme] .folder-card:focus-within, :root[data-surface][data-theme] .login-box:focus-within, :root[data-surface][data-theme] .register-box:focus-within, :root[data-surface][data-theme] .success-box:focus-within, :root[data-surface][data-theme] .member-portal:focus-within, :root[data-surface][data-theme] .modal-card:focus-within, :root[data-surface][data-theme] .bn-modal-card:focus-within, :root[data-surface][data-theme] .card:focus-visible, :root[data-surface][data-theme] .panel:focus-visible, :root[data-surface][data-theme] .member-card:focus-visible, :root[data-surface][data-theme] .notice-item:focus-visible, :root[data-surface][data-theme] .notice-card:focus-visible, :root[data-surface][data-theme] .notice-details:focus-visible, :root[data-surface][data-theme] .notice-board-frame:focus-visible, :root[data-surface][data-theme] .event-card:focus-visible, :root[data-surface][data-theme] .page-card:focus-visible, :root[data-surface][data-theme] .sub-card:focus-visible, :root[data-surface][data-theme] .contact-card:focus-visible, :root[data-surface][data-theme] .review-card:focus-visible, :root[data-surface][data-theme] .policy-card:focus-visible, :root[data-surface][data-theme] .rp-card:focus-visible, :root[data-surface][data-theme] .dn-card:focus-visible, :root[data-surface][data-theme] .mission-card:focus-visible, :root[data-surface][data-theme] .highlight-card:focus-visible, :root[data-surface][data-theme] .gallery-item:focus-visible, :root[data-surface][data-theme] .dash-card:focus-visible, :root[data-surface][data-theme] .dash-tile:focus-visible, :root[data-surface][data-theme] .dash-view:focus-visible, :root[data-surface][data-theme] .donate-card:focus-visible, :root[data-surface][data-theme] .annual-box:focus-visible, :root[data-surface][data-theme] .fee-pay-panel:focus-visible, :root[data-surface][data-theme] .participate-panel:focus-visible, :root[data-surface][data-theme] .chat-panel:focus-visible, :root[data-surface][data-theme] .ov-panel:focus-visible, :root[data-surface][data-theme] .stat-card:focus-visible, :root[data-surface][data-theme] .sum-card:focus-visible, :root[data-surface][data-theme] .folder-card:focus-visible, :root[data-surface][data-theme] .login-box:focus-visible, :root[data-surface][data-theme] .register-box:focus-visible, :root[data-surface][data-theme] .success-box:focus-visible, :root[data-surface][data-theme] .member-portal:focus-visible, :root[data-surface][data-theme] .modal-card:focus-visible, :root[data-surface][data-theme] .bn-modal-card:focus-visible { transform: none !important; } /* The photograph inside a card still answers the pointer - the one piece of card motion the club asked to keep (12 Sep 2026). The card itself holds still; the picture inside it zooms a few per cent, softly, and settles back. Where the photo fills its frame edge to edge (gallery tiles, highlights, event posters, section photos, admin thumbnails) the frame is overflow:hidden, so the zoom crops into the picture's own edges and nothing spills out of the card. Where the photo is an inset with its own rounded shape (a member's round portrait, a mission card's picture) it simply grows by a couple of pixels inside the card's padding; nothing is cut off. Icons inside cards stay still. */ :root[data-surface][data-theme] .member-card img, :root[data-surface][data-theme] .gallery-item img, :root[data-surface][data-theme] .event-card img, :root[data-surface][data-theme] .highlight-card img, :root[data-surface][data-theme] .mission-card img, :root[data-surface][data-theme] .section-photo img, :root[data-surface][data-theme] .review-card img, :root[data-surface][data-theme] .notice-card img, :root[data-surface][data-theme] .page-card img, :root[data-surface][data-theme] .contact-card img, :root[data-surface][data-theme] .rp-card img, :root[data-surface][data-theme] .dn-card img, :root[data-surface][data-theme] .dash-item img, :root[data-surface][data-theme] .event-full img, :root[data-surface][data-theme] .notice-full img, :root[data-surface][data-theme] .am-person img, :root[data-surface][data-theme] .thumb img, :root[data-surface][data-theme] .item-row img, :root[data-surface][data-theme] .mrow img, :root[data-surface][data-theme] .tick-row img, :root[data-surface][data-theme] .pf-photo img, :root[data-surface][data-theme] .cs-cover-thumb img { transition: transform 0.45s ease; transform: none; will-change: transform; } /* Edge-to-edge photos: a slightly stronger zoom, cropped by the frame. */ :root[data-surface][data-theme] .gallery-item:hover img, :root[data-surface][data-theme] .event-card:hover img, :root[data-surface][data-theme] .highlight-card:hover img, :root[data-surface][data-theme] .section-photo:hover img, :root[data-surface][data-theme] .thumb:hover img, :root[data-surface][data-theme] .pf-photo:hover img, :root[data-surface][data-theme] .cs-cover-thumb:hover img { transform: scale(1.06); } /* Inset photos and portraits: a gentler zoom, so a round portrait grows by a couple of pixels and never reaches the card's text. */ :root[data-surface][data-theme] .member-card:hover img, :root[data-surface][data-theme] .mission-card:hover img, :root[data-surface][data-theme] .review-card:hover img, :root[data-surface][data-theme] .notice-card:hover img, :root[data-surface][data-theme] .page-card:hover img, :root[data-surface][data-theme] .contact-card:hover img, :root[data-surface][data-theme] .rp-card:hover img, :root[data-surface][data-theme] .dn-card:hover img, :root[data-surface][data-theme] .dash-item:hover img, :root[data-surface][data-theme] .event-full:hover img, :root[data-surface][data-theme] .notice-full:hover img, :root[data-surface][data-theme] .am-person:hover img, :root[data-surface][data-theme] .item-row:hover img, :root[data-surface][data-theme] .mrow:hover img, :root[data-surface][data-theme] .tick-row:hover img { transform: scale(1.04); } /* The frames that clip the stronger zoom. All of them already had overflow:hidden in their own stylesheet except the profile photo box and the section cover thumbnail; set here so the rule above can rely on it. */ :root[data-surface][data-theme] .gallery-item, :root[data-surface][data-theme] .event-card, :root[data-surface][data-theme] .highlight-card, :root[data-surface][data-theme] .section-photo, :root[data-surface][data-theme] .thumb, :root[data-surface][data-theme] .pf-photo, :root[data-surface][data-theme] .cs-cover-thumb { overflow: hidden; } /* Icons inside cards do not move; that part of the old motion stays off. */ :root[data-surface][data-theme] .member-card:hover .icon, :root[data-surface][data-theme] .gallery-item:hover .icon, :root[data-surface][data-theme] .event-card:hover .icon, :root[data-surface][data-theme] .page-card:hover .icon, :root[data-surface][data-theme] .notice-card:hover .icon, :root[data-surface][data-theme] .review-card:hover .icon, :root[data-surface][data-theme] .highlight-card:hover .icon { transform: none !important; } /* The notice item's decorative bar grew from a quarter height on hover. */ :root[data-surface][data-theme] .notice-item::before, :root[data-surface][data-theme] .notice-item:hover::before { transition: none !important; } /* ========================================================================== 6. WHERE THE GLASS STOPS ========================================================================== */ /* The gallery lightbox stage and the hero overlay are viewers: the photograph should be the only bright thing in them, and a translucent frame would let the page bleed into the picture. */ :root[data-surface][data-theme] .gshow-stage .card, :root[data-surface][data-theme] .gshow-stage .gallery-item, :root[data-surface][data-theme] .hero-overlay .card { background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* A card inside a bar is a control, not a panel, whatever class it carries. */ :root[data-surface][data-theme] .nav-inner .card, :root[data-surface][data-theme] .admin-header .card { background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* ========================================================================== 7. SMALL SCREENS, AND NO BACKDROP-FILTER ========================================================================== */ /* On a phone the blur comes down and every surface firms up. A narrower column gives text less room to begin with, and a busy background behind a sheerer card is where readability goes first. */ @media (max-width: 768px) { :root { --glass-bg: rgba(6, 34, 44, 0.76); --glass-bg-panel: rgba(5, 28, 37, 0.82); --glass-bg-tile: rgba(8, 40, 51, 0.70); --glass-blur: 7px; } :root[data-surface="admin"] { --glass-bg: rgba(6, 24, 33, 0.80); --glass-bg-panel: rgba(5, 20, 28, 0.86); --glass-bg-tile: rgba(8, 30, 40, 0.74); --glass-blur: 8px; } } /* Where `backdrop-filter` is unavailable there is no refraction to soften what is behind the card, so the tint has to do the work alone and every surface firms up further. The card still reads as glass — just thicker glass — which is what "must still look intentional" means here. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-bg: rgba(6, 34, 44, 0.90); --glass-bg-panel: rgba(5, 28, 37, 0.93); --glass-bg-tile: rgba(8, 40, 51, 0.88); } :root[data-surface="admin"] { --glass-bg: rgba(6, 24, 33, 0.93); --glass-bg-panel: rgba(5, 20, 28, 0.95); --glass-bg-tile: rgba(8, 30, 40, 0.90); } } /* ========================================================================== 7. SEE-THROUGH, EVERYWHERE (25 Sep 2026) The club asked again, plainly: every card on the website and in the Admin Panel, big or small, transparent. The surfaces above were glass in name and close to solid in practice, for two reasons, and both are dealt with here. The tints were thick. 0.62 to 0.76 of a dark navy is a wall with a slight haze. They are roughly halved below; the blur stays, and it is the blur, not the tint, that keeps the words on a card readable against a busy page. And the tiers never took effect. `--glass-gradient` was declared on :root, and a custom property that uses var() is resolved where it is declared, so `var(--glass-fill)` inside it was read at :root - where no tier has set a fill - and every card got the same `--glass-bg` whatever tier it was in. Declared on every element instead, each card resolves its own tier's fill and its own hover light. Dialogs keep their near-solid tier on purpose: a form over a busy page has to be read. ========================================================================== */ :root { --glass-bg: rgba(6, 34, 44, 0.34); --glass-bg-panel: rgba(5, 28, 37, 0.40); --glass-bg-tile: rgba(8, 40, 51, 0.28); --glass-bg-inner: rgba(10, 30, 52, 0.20); --glass-blur: 12px; --glass-blur-inner: 8px; } :root[data-surface="admin"] { --glass-bg: rgba(6, 24, 33, 0.40); --glass-bg-panel: rgba(5, 20, 28, 0.46); --glass-bg-tile: rgba(8, 30, 40, 0.34); --glass-bg-inner: rgba(8, 30, 40, 0.24); --glass-blur: 14px; } :root[data-surface] * { --glass-gradient: radial-gradient(120% 96% at 6% 0%, var(--glass-lit-1), transparent 58%), radial-gradient(110% 90% at 100% 100%, var(--glass-lit-2), transparent 62%), linear-gradient(var(--glass-fill, var(--glass-bg)), var(--glass-fill, var(--glass-bg))); } /* The Email screen's own cards: a card per part of the site, and inside it a small card per email. Same inner glass as every other row. */ :root[data-surface][data-theme] .tpl-group, :root[data-surface][data-theme] .tpl-item, :root[data-surface][data-theme] .rating-overall { --glass-fill: var(--glass-bg-inner); background-color: transparent; background-image: var(--glass-gradient); background-repeat: no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow-tile), inset 0 1px 0 var(--glass-highlight); backdrop-filter: blur(var(--glass-blur-inner)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur-inner)) saturate(var(--glass-saturation)); } :root[data-surface][data-theme] .tpl-group:hover, :root[data-surface][data-theme] .tpl-item:hover, :root[data-surface][data-theme] .tpl-item.is-on { border-color: var(--glass-border-hi); --glass-lit-1: rgba(34, 211, 238, 0.20); }