:root { --bg: #0f1419; --surface: #1c232c; --surface-2: #2a3340; --text: #d5d0c4; --text-strong: #ece5d4; --muted: #a39d8e; --border: #475368; /* was #2a3340 — bumped for visibility */ --border-strong: #6b7a92; /* used for h2 underlines etc. */ --accent: #e8b162; --accent-hover: #f0c585; --link: #d8b890; --link-hover: #f0c585; --success: #9ac897; --danger: #e08770; --radius: 6px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: linear-gradient(180deg, rgba(15,20,25,0.55) 0%, rgba(15,20,25,0.86) 55%, rgba(15,20,25,0.93) 100%), url('/assets/elephant-trunk-1280.webp') center top / cover no-repeat fixed, var(--bg); color: var(--text); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; } @media (min-width: 1500px) { body { background-image: linear-gradient(180deg, rgba(15,20,25,0.55) 0%, rgba(15,20,25,0.86) 55%, rgba(15,20,25,0.93) 100%), url('/assets/elephant-trunk.webp'); } } .site-header { position: relative; z-index: 50; backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); background: rgba(28,35,44,0.7); } /* Sticky site header on members-area pages only. is added by lib/page.php when the path starts with /members. Pinning the header here means the brand + officer-tools dropdown follow the user as they scroll through long dashboards (treasurer, billing, members list). z-index 100 to stay above the stat-strip's shadow and any drag-drop overlays in the dashboards. */ body.page-members .site-header { position: sticky; top: 0; z-index: 100; background: rgba(20, 26, 36, 0.92); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .site-footer { backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); background: rgba(28,35,44,0.7); } .container { max-width: 980px; margin: 0 auto; padding: 0 1rem; width: 100%; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } /* Header */ .site-header { background: var(--surface); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1rem; } .brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 600; } .brand:hover { text-decoration: none; } .brand-mark { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(232, 177, 98, 0.45)); } .brand-text { font-size: 0.95rem; line-height: 1.15; } .brand-text em { color: var(--muted); font-style: normal; font-weight: 400; font-size: 0.85rem; } .site-nav { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; font-size: 0.95rem; } .site-nav a { color: var(--text); padding: 0.3rem 0.55rem; border-radius: var(--radius); } .site-nav a:hover { background: var(--surface-2); text-decoration: none; } .nav-user { color: var(--muted); padding: 0.3rem 0.55rem; } /* Dropdown (header nav) */ .dropdown { position: relative; display: inline-block; } .dropdown-trigger { background: transparent; border: none; color: var(--text); padding: 0.3rem 0.55rem; border-radius: var(--radius); font: inherit; font-size: 0.95rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25em; } .dropdown-trigger:hover { background: var(--surface-2); } .dropdown-trigger[aria-expanded="true"] { background: var(--surface-2); } .dropdown-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dropdown-trigger .caret { font-size: 0.65em; opacity: 0.7; transition: transform 0.18s ease; } .dropdown-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 0.4rem); right: 0; width: min(320px, calc(100vw - 2rem)); background: rgba(22, 28, 36, 0.92); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55); padding: 1rem 1.1rem; text-align: left; z-index: 10; display: none; } .dropdown.open .dropdown-menu { display: block; } .dropdown-menu h4 { margin: 0 0 0.2rem; font-size: 1.05rem; color: var(--text-strong); } .dropdown-menu .dropdown-intro { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.85rem; } .officer-list { list-style: none; padding: 0; margin: 0; } .officer-list li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.3rem 0; line-height: 1.4; } .officer-list .officer-role { flex: 0 0 auto; min-width: 6.8em; color: var(--muted); font-size: 0.9rem; } .officer-list a { font-weight: 500; } .dropdown-note { color: var(--muted); font-size: 0.8rem; margin: 0.95rem 0 0; padding-top: 0.65rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-style: italic; } main.container { flex: 1; padding-top: 2rem; padding-bottom: 3rem; } h1, h2, h3 { line-height: 1.25; margin-top: 1.5em; margin-bottom: 0.5em; color: var(--text-strong); } h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; color: var(--accent); border-bottom: 2px solid var(--border-strong); padding-bottom: 0.35em; margin-bottom: 0.8em; } h3 { font-size: 1.1rem; } p, ul, ol { margin: 0 0 1em; } /* Hero — frosted-glass panel over the nebula body bg */ .hero { position: relative; background: rgba(15, 20, 25, 0.35); backdrop-filter: blur(6px) saturate(130%); -webkit-backdrop-filter: blur(6px) saturate(130%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 4rem 1.5rem; text-align: center; margin-bottom: 2rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .hero h1 { margin: 0; font-size: 2.6rem; letter-spacing: -0.01em; color: var(--text-strong); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65); } .hero h1 .accent { color: var(--accent); text-shadow: 0 0 24px rgba(232, 177, 98, 0.35), 0 2px 16px rgba(0, 0, 0, 0.65); } .hero p { color: var(--text); font-size: 1.1rem; margin-top: 0.6rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); } .hero .btn { box-shadow: 0 4px 16px rgba(232, 177, 98, 0.28); } .hero-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; } /* "Are We Observing?" button + status dot */ .observing-trigger { display: inline-flex; align-items: center; gap: 0.55em; } .observing-trigger .status-dot { display: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(154, 200, 151, 0.85); } .observing-trigger.is-observing .status-dot { display: inline-block; animation: observing-pulse 2.6s ease-in-out infinite; } @keyframes observing-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(154, 200, 151, 0.95); } 50% { opacity: 0.5; box-shadow: 0 0 4px rgba(154, 200, 151, 0.35); } } @media (prefers-reduced-motion: reduce) { .observing-trigger.is-observing .status-dot { animation: none; } } .observing-trigger .caret { font-size: 0.65em; opacity: 0.7; transition: transform 0.18s ease; } .observing-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); } /* Observing panel — expands inside the hero */ .observing-panel { display: none; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: left; } .observing-panel.open { display: block; } .observing-status { padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid; margin-bottom: 1.5rem; } .observing-status strong { display: block; font-size: 1.15rem; margin-bottom: 0.25rem; } .observing-status p { margin: 0; } .observing-yes { background: rgba(154, 200, 151, 0.12); border-color: rgba(154, 200, 151, 0.5); } .observing-yes strong { color: var(--success); text-shadow: 0 0 12px rgba(154, 200, 151, 0.4); } .observing-yes p { color: var(--text); } .observing-no { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } .observing-no strong { color: var(--text-strong); } .observing-no p { color: var(--muted); } .observing-not { background: rgba(220, 90, 90, 0.10); border-color: rgba(220, 90, 90, 0.45); } .observing-not strong { color: #ef9a9a; text-shadow: 0 0 12px rgba(220, 90, 90, 0.35); } .observing-not p { color: var(--text); } .observing-trigger.is-not-observing .status-dot { display: inline-block; background: #ef6c6c; box-shadow: 0 0 10px rgba(220, 90, 90, 0.7); animation: none; } .observing-section-title { font-size: 1.05rem; color: var(--accent); margin: 1.25rem 0 0.4rem; border: none; padding: 0; } .observing-section-sub { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.85rem; } .astrospheric-embed { margin: 0.5rem 0 1rem; min-height: 280px; background: rgba(15, 20, 25, 0.5); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); padding: 1rem; overflow: hidden; } .astrospheric-embed > p { padding-top: 6rem; } .astrospheric-pro-hint { margin: 0.6rem 0 0; padding: 0.6rem 0.85rem; border-left: 3px solid var(--accent); background: rgba(232, 177, 98, 0.07); color: var(--text); font-size: 0.92em; line-height: 1.5; border-radius: 0 var(--radius) var(--radius) 0; } .astrospheric-pro-hint code { background: rgba(0,0,0,0.45); color: var(--accent); padding: 0.05em 0.45em; border-radius: 4px; font-size: 0.95em; font-weight: 600; user-select: all; } .astrospheric-pro-hint a { margin-left: 0.25rem; white-space: nowrap; } .astrospheric-pro-hint-compact { font-size: 0.85em; padding: 0.45rem 0.7rem; } .observing-officer { margin-top: 1.5rem; padding: 1rem 1.25rem; background: rgba(232, 177, 98, 0.05); border: 1px dashed rgba(232, 177, 98, 0.3); border-radius: var(--radius); } .observing-officer .observing-section-title { margin-top: 0; } /* Sky data display (observing panel summary + /sky.php detail) */ .sky-summary { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .sky-grid { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0.45rem 1.25rem; margin: 0.4rem 0 0; font-size: 0.95em; } .sky-grid dt { color: var(--muted); font-weight: 400; } .sky-grid dd { margin: 0; color: var(--text-strong); } .sky-grid dt.stacked, .sky-grid dd.stacked { grid-column: 1 / -1; } .sky-grid dt.stacked { margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .sky-detail-grid { margin-top: 1rem; } .sky-detail-grid .card h3 { margin-top: 0; display: flex; align-items: center; gap: 0.4em; } .sky-detail-grid .card h3 .card-icon { display: inline-block; width: 1.1em; height: 1.1em; margin: 0; color: var(--accent); flex: 0 0 auto; filter: drop-shadow(0 0 4px rgba(232,177,98,0.25)); } .sky-detail-grid .sky-grid dd strong { color: var(--accent); } /* Twilight bar — day at a glance gradient */ .twilight-section { margin-top: 1.5rem; margin-bottom: 1.5rem; } .twilight-section h2 { margin-bottom: 0.5rem; } .twilight-bar { position: relative; overflow: hidden; width: 100%; height: 38px; margin: 0.5rem 0 1.6rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.08); background: var(--surface); } .twilight-fill { position: absolute; inset: 0; border-radius: calc(var(--radius) - 1px); } .twilight-now { position: absolute; top: -5px; bottom: -5px; width: 3px; background: #ff4a4a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 74, 74, 0.9); z-index: 2; pointer-events: none; border-radius: 1px; } .twilight-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.16); pointer-events: none; } .twilight-tick span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.72em; white-space: nowrap; margin-top: 4px; } /* Moon visualization — real photo + SVG shadow overlay */ .moon-card-body { display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.25rem; } .moon-phase-vis { flex: 0 0 auto; text-align: center; } .moon-photo { position: relative; display: inline-block; border-radius: 50%; overflow: hidden; filter: drop-shadow(0 0 16px rgba(245, 236, 209, 0.25)); background: #0a0a0a; } .moon-photo .moon-disc { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; } .moon-photo .moon-shadow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .moon-phase-label { margin-top: 0.6rem; font-size: 0.88em; color: var(--text); text-align: center; max-width: 140px; } .moon-card-body dl { flex: 1 1 180px; min-width: 0; } .moon-inline-vis { display: inline-block; vertical-align: -0.5em; margin-right: 0.45em; line-height: 0; } .moon-inline-vis .moon-photo { filter: none; } /* Live imagery panels (GOES + radar) */ .sky-imagery { margin-top: 2rem; } .sky-imagery h2 { margin-bottom: 0.75rem; } .imagery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; margin-top: 1rem; } .imagery-panel { background: rgba(28, 35, 44, 0.55); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 1.25rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .imagery-panel h3 { margin-top: 0; color: var(--accent); } .imagery-panel > a { display: block; line-height: 0; } .imagery-panel img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #000; transition: transform 0.2s ease; } .imagery-panel > a:hover img { transform: scale(1.01); } .imagery-panel p.muted { margin: 0.75rem 0 0; font-size: 0.85em; line-height: 1.5; } /* Reserved-slot placeholder (e.g. sky cam feed not yet wired up) */ .placeholder-square { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius); border: 2px dashed rgba(255, 255, 255, 0.15); background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.015) 0 14px, rgba(255, 255, 255, 0.04) 14px 28px ), rgba(15, 20, 25, 0.5); display: flex; align-items: center; justify-content: center; } .placeholder-label { color: var(--muted); font-size: 0.85em; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(0, 0, 0, 0.25); } .skycam-frame { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.08); background: #000; overflow: hidden; } .skycam-frame img, .skycam-frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } /* Calendars page */ .calendar-block { margin-bottom: 2rem; } .calendar-block h2 { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; } .calendar-embed { background: #1c232c; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .calendar-embed iframe { width: 100%; height: 100%; border: 0; display: block; /* Force dark mode on Google Calendar embeds (Google has no official toggle): invert flips bg light->dark and text dark->light; hue-rotate 180° keeps colored event blocks approximately their original hue. */ filter: invert(1) hue-rotate(180deg); } @media (max-width: 600px) { .calendar-embed { aspect-ratio: 3 / 4; } } .badge-cal-public { background: rgba(127, 200, 143, 0.2); color: var(--success); font-size: 0.7em; } .badge-cal-members { background: rgba(127, 179, 232, 0.2); color: var(--link); font-size: 0.7em; } .badge-cal-officers { background: rgba(232, 177, 98, 0.2); color: var(--accent); font-size: 0.7em; } /* Members area — welcome hero, stats strip, three-section layout */ .member-hero { margin: 0.5rem 0 1.5rem; padding: 1.5rem 1.5rem 1.25rem; background: rgba(28, 35, 44, 0.92); border: 1px solid rgba(255, 255, 255, 0.18); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: 0 4px 22px rgba(0, 0, 0, 0.55); } .member-hero h1 { margin: 0; color: var(--text-strong); font-size: 1.75rem; } .member-hero p { margin: 0.5rem 0 0; } /* ========================================================================== Top stat strip on /members/ — Tonight · Next meeting · Dark sky · Moon · Active members. Each tile = icon on the left + label/value stack on the right. Icon uses an emoji or, for the moon, the real SVG that /sky uses, so the strip reads at-a-glance without looking like five identical boxes. ========================================================================== */ .stat-strip { display: grid; /* 5 equal columns, never wrap. minmax(0, 1fr) + min-width:0 on cards lets each tile shrink past its content's natural width so the label can re-flow to two lines if the viewport gets tight, rather than the whole strip wrapping to a second row. */ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 2rem; } .stat-card { position: relative; display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0.75rem; min-width: 0; /* let the card actually shrink inside the grid */ background: linear-gradient(135deg, rgba(232, 177, 98, 0.04) 0%, rgba(28, 35, 44, 0) 60%), rgba(22, 28, 38, 0.94); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 22px rgba(0, 0, 0, 0.45); transition: border-color 0.18s ease, transform 0.18s ease; } .stat-card:hover { border-color: rgba(232, 177, 98, 0.28); } .stat-icon { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; border-radius: 9px; background: rgba(232, 177, 98, 0.10); border: 1px solid rgba(232, 177, 98, 0.22); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } .stat-icon-moon { /* The moon SVG IS the graphic — drop the accent chip background. Width/height matches the size passed to moon_phase_html (36px) so the inline width="36px" on the wrapping .moon-photo doesn't overflow the slot. */ background: transparent; border-color: transparent; border: 0; width: 36px; height: 36px; padding: 0; overflow: hidden; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); } .stat-icon-moon .moon-photo { /* Defensive — if anything in moon_phase_html ever changes its inline sizing, the icon slot still clips correctly. */ position: relative; width: 100% !important; height: 100% !important; } .stat-icon-moon .moon-photo .moon-disc, .stat-icon-moon .moon-photo .moon-shadow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .stat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .stat-label { color: var(--muted); font-size: 0.66em; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; /* Allow the label to wrap onto a second line if the tile gets too narrow to keep it on one. nowrap here was forcing the tile's min-content width = label width, which pushed the 5th tile to a second row at sub-1000px viewports. */ line-height: 1.2; } .stat-value { color: var(--text-strong); font-size: 0.9em; line-height: 1.25; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em; } .stat-value strong { font-weight: 600; } .stat-value .stat-sub { font-size: 0.82em; } .stat-value .stat-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--success); margin-right: 0.3em; box-shadow: 0 0 8px rgba(154, 200, 151, 0.7); flex-shrink: 0; } /* "Tonight" tile lights up green when observing is on. */ .stat-card.stat-tonight.is-active { background: linear-gradient(135deg, rgba(154, 200, 151, 0.14) 0%, rgba(22, 28, 38, 0) 60%), rgba(22, 28, 38, 0.94); border-color: rgba(154, 200, 151, 0.45); } .stat-card.stat-tonight.is-active .stat-icon-tonight { background: rgba(154, 200, 151, 0.20); border-color: rgba(154, 200, 151, 0.55); } /* "Tonight" tile glows amber-red when a NOT-observing notice is up. */ .stat-card.stat-tonight.is-not-observing { background: linear-gradient(135deg, rgba(220, 90, 90, 0.12) 0%, rgba(22, 28, 38, 0) 60%), rgba(22, 28, 38, 0.94); border-color: rgba(220, 90, 90, 0.45); } .stat-card.stat-tonight.is-not-observing .stat-icon-tonight { background: rgba(220, 90, 90, 0.18); border-color: rgba(220, 90, 90, 0.55); } .stat-not-observing-pill { display: inline-flex; align-items: center; gap: 0.32em; padding: 0.1em 0.55em; border-radius: 999px; font-size: 0.94em; color: #ef9a9a; background: rgba(220, 90, 90, 0.15); border: 1px solid rgba(220, 90, 90, 0.45); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-not-observing-pill strong { font-weight: 600; } .stat-not-observing-pill .muted { color: rgba(239, 154, 154, 0.78); font-size: 0.86em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .stat-dot-not-observing { width: 0.55em; height: 0.55em; border-radius: 50%; background: #ef6c6c; box-shadow: 0 0 8px rgba(220, 90, 90, 0.7); flex-shrink: 0; } /* "Next meeting" tile lights up green when a live meeting is active. The tile's primary content swaps from "next date / in N days" to a clickable "Meeting active — Join →" pill. */ .stat-card.stat-nextmeeting.is-active { background: linear-gradient(135deg, rgba(154, 200, 151, 0.14) 0%, rgba(22, 28, 38, 0) 60%), rgba(22, 28, 38, 0.94); border-color: rgba(154, 200, 151, 0.45); } .stat-card.stat-nextmeeting.is-active .stat-icon-nextmeeting { background: rgba(154, 200, 151, 0.20); border-color: rgba(154, 200, 151, 0.55); } /* Combined Tonight + Next Meeting tile — two compact rows stacked inside one card body. Each row is "tiny-label : value" so the eye reads them as a quick two-line dossier instead of two separate boxes. */ .stat-stack { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; } .stat-stack-row { display: flex; align-items: baseline; gap: 0.45em; font-size: 0.84em; line-height: 1.25; min-width: 0; } .stat-stack-row + .stat-stack-row { padding-top: 0.32rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .stat-stack-label { color: var(--muted); font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; flex: 0 0 auto; } .stat-stack-value { color: var(--text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-stack-value strong { font-weight: 600; } .stat-stack-value .muted { font-size: 0.92em; margin-left: 0.2em; } /* Observing / Meeting pills used inside the stacked Tonight row. */ .stat-observing-pill, .stat-meet-pill { display: inline-flex; align-items: center; gap: 0.32em; padding: 0.1em 0.55em; border-radius: 999px; font-size: 0.94em; text-decoration: none; color: var(--success); background: rgba(154, 200, 151, 0.18); border: 1px solid rgba(154, 200, 151, 0.45); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-observing-pill strong, .stat-meet-pill strong { font-weight: 600; } .stat-observing-pill .muted, .stat-meet-pill .muted { color: rgba(154, 200, 151, 0.78); font-size: 0.86em; } .stat-meet-pill:hover { background: rgba(154, 200, 151, 0.28); text-decoration: none; } /* Legacy class still used by older inline rows — kept compatible. */ .stat-tonight-row { display: inline-flex; align-items: center; gap: 0.3em; color: inherit; text-decoration: none; } .stat-tonight-row .stat-tonight-meta { font-size: 0.82em; margin-left: 0.15em; } .stat-meeting-row { /* The meeting-active row is a link, so call it out a bit more — green chip-style background that pulses gently. */ padding: 0.18em 0.55em; border-radius: 999px; background: rgba(154, 200, 151, 0.22); border: 1px solid rgba(154, 200, 151, 0.55); color: var(--success); transition: background 0.15s ease, transform 0.15s ease; cursor: pointer; } .stat-meeting-row:hover { background: rgba(154, 200, 151, 0.32); transform: translateY(-1px); text-decoration: none; } .stat-meeting-row .stat-tonight-meta { color: rgba(154, 200, 151, 0.85); } .stat-dot-observing { background: var(--success); box-shadow: 0 0 8px rgba(154, 200, 151, 0.7); } .stat-dot-meeting { background: #6fd6a4; box-shadow: 0 0 8px rgba(111, 214, 164, 0.85); animation: stat-dot-pulse 1.6s ease-in-out infinite; } @keyframes stat-dot-pulse { 0%, 100% { box-shadow: 0 0 4px rgba(111, 214, 164, 0.55); } 50% { box-shadow: 0 0 12px rgba(111, 214, 164, 1); } } @media (prefers-reduced-motion: reduce) { .stat-dot-meeting { animation: none; } .stat-meeting-row:hover { transform: none; } } /* Total active members / Quorum tile. Both numbers center-aligned inside their own column so 50 and 17 sit on the same vertical axis — the previous mixed-alignment made it look like the bignum was wandering off to the left. */ .stat-card.stat-quorum .stat-quorum-stack { display: flex; flex-direction: column; align-items: center; line-height: 1.05; margin-top: 0.1rem; } .stat-card.stat-quorum .stat-bignum { display: block; font-size: 1.7em; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text-strong); } .stat-quorum-line { display: block; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.72em; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; white-space: nowrap; min-width: 5em; text-align: center; } .stat-quorum-line strong { color: var(--text-strong); font-size: 1.15em; font-variant-numeric: tabular-nums; font-weight: 700; text-transform: none; margin-left: 0.15em; } /* 5-up at desktop → 3-up at small tablet → 2-up at phones. */ @media (max-width: 720px) { .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 480px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .stat-card { padding: 0.65rem 0.7rem; } .stat-icon { width: 1.85rem; height: 1.85rem; font-size: 1.15rem; } .stat-icon-moon { width: 32px; height: 32px; } } .member-section { margin: 0 0 2rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05); } .section-head { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .section-head h2 { margin: 0; border: none; padding: 0; font-size: 1.4rem; color: var(--text-strong); position: relative; padding-left: 0.7em; } .section-head h2::before { content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.22em; width: 4px; border-radius: 2px; background: var(--accent); } .section-head p { margin: 0; flex: 1 1 200px; min-width: 0; } .section-officer .section-head h2::before { background: var(--link); } .section-admin .section-head h2::before { background: var(--danger); } /* Member perks callout (in members section, not a tile) */ .perks-block { background: linear-gradient(135deg, rgba(232, 177, 98, 0.08), transparent 65%), rgba(28, 35, 44, 0.45); border: 1px solid rgba(232, 177, 98, 0.25); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 0 0 1.5rem; } .perks-block .perks-title { margin: 0 0 0.6rem; color: var(--accent); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .perks-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.45rem 1.5rem; } .perks-list li { color: var(--text); padding-left: 1.1em; position: relative; line-height: 1.45; } .perks-list li::before { content: '★'; color: var(--accent); position: absolute; left: 0; top: 0; font-size: 0.85em; } .perks-edit { margin-top: 0.85rem; border-top: 1px dashed rgba(232, 177, 98, 0.18); padding-top: 0.6rem; } .perks-edit summary { cursor: pointer; } /* Breadcrumb navigation for inner pages */ .breadcrumb { margin: 0 0 1rem; } .breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45em; font-size: 0.88em; color: var(--muted); } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 0.45em; color: var(--muted); opacity: 0.65; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--accent); text-decoration: underline; } .breadcrumb li:last-child span { color: var(--text); } /* Drive-backed resource tables (documents, finance) */ .resource-table { font-size: 0.95em; } .resource-table tr a { color: var(--text-strong); } .resource-table tr a:hover { color: var(--accent); text-decoration: none; } /* Resource page sortable column links */ .resource-table th a { color: var(--muted); text-decoration: none; font-weight: 600; } .resource-table th a:hover { color: var(--accent); } /* Photos toolbar (sort buttons) */ .photos-toolbar { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; } .photos-toolbar a { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(28, 35, 44, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); font-size: 0.85em; text-decoration: none; } .photos-toolbar a:hover { background: rgba(40, 50, 64, 0.7); border-color: rgba(232, 177, 98, 0.35); } /* Folder strip (subfolders shown above the photo grid) */ .folder-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0 1.25rem; } .folder-tile { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55rem 0.95rem; background: rgba(28, 35, 44, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); color: var(--text-strong); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .folder-tile:hover { background: rgba(40, 50, 64, 0.7); border-color: rgba(232, 177, 98, 0.45); text-decoration: none; } .folder-icon { font-size: 1.05em; } /* Photo gallery grid (members/photos.php) */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.85rem; margin: 1rem 0; } .photo-tile { display: block; position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: rgba(15, 20, 25, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); text-decoration: none; color: var(--text); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .photo-tile:hover { transform: translateY(-2px); border-color: rgba(232, 177, 98, 0.45); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); text-decoration: none; } .photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; color: var(--muted); font-size: 0.85em; text-align: center; } .photo-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); color: var(--text-strong); padding: 1.4rem 0.65rem 0.55rem; font-size: 0.78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .photo-delete { position: absolute; top: 0.4rem; right: 0.4rem; margin: 0; } .photo-delete .btn-link-danger { background: rgba(0, 0, 0, 0.55); color: #fff; width: 1.7em; height: 1.7em; line-height: 1.4em; border-radius: 50%; text-decoration: none; font-size: 1.1em; text-align: center; padding: 0; backdrop-filter: blur(4px); } .photo-delete .btn-link-danger:hover { background: var(--danger); color: #fff; } /* =========================================================================== * AstroBin gallery (/photos.php). Distinct CSS namespace so tweaks here * don't bleed into the older Drive-backed .photo-grid styles above. * ========================================================================= */ .astrobin-hero { margin: 0.4rem 0 1.4rem; padding: 1.1rem 1.2rem 1.2rem; background: rgba(28, 35, 44, 0.55); border: 1px solid var(--border); border-radius: var(--radius); } .astrobin-hero h1 { margin: 0 0 0.4rem; } .astrobin-hero-blurb { margin: 0 0 0.6rem; color: var(--text); } .astrobin-hero-meta { margin: 0 0 0.85rem; font-size: 0.88em; } .astrobin-refresh-stamp { margin-left: 0.4em; } .astrobin-hero-cta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; } .astrobin-empty { padding: 1.1rem 1.2rem; } .astrobin-grid { list-style: none; margin: 0.6rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .astrobin-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .astrobin-tile:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); transform: translateY(-2px); } .astrobin-thumb-link { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(15, 20, 25, 0.55); text-decoration: none; } .astrobin-thumb-link:hover { text-decoration: none; } .astrobin-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .astrobin-tile:hover .astrobin-thumb { transform: scale(1.03); } .astrobin-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted); font-size: 0.85em; } .astrobin-tile-body { padding: 0.65rem 0.85rem 0.85rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .astrobin-tile-title { margin: 0; font-size: 1rem; line-height: 1.25; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .astrobin-tile-title a { color: inherit; text-decoration: none; } .astrobin-tile-title a:hover { color: var(--accent-hover); text-decoration: underline; } .astrobin-tile-credit { margin: 0; font-size: 0.85em; color: var(--muted); } .astrobin-author { color: var(--text); text-decoration: none; font-weight: 500; } .astrobin-author:hover { color: var(--accent-hover); text-decoration: underline; } .astrobin-tile-date { margin-left: 0.45em; font-size: 0.92em; opacity: 0.8; } .astrobin-tile-cta { margin: 0.3rem 0 0; font-size: 0.85em; } .astrobin-tile-link { color: var(--accent); text-decoration: none; font-weight: 500; } .astrobin-tile-link:hover { color: var(--accent-hover); text-decoration: underline; } .astrobin-grid-footer { margin: 0.4rem 0 0.4rem; font-size: 0.85em; } /* Connect-tile color hint for the new "Astrophotography" homepage tile. Mirrors the existing connect-* color tokens. */ .connect-tile.connect-astrobin .connect-icon { color: #9bd0e8; } /* AstroBin admin page */ .astrobin-admin-status { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; } .astrobin-admin-status dt { color: var(--muted); font-weight: 600; font-size: 0.92em; align-self: start; } .astrobin-admin-status dd { margin: 0; } .astrobin-admin-actions { margin-top: 0.4rem; } .astrobin-admin-cron { background: rgba(15, 20, 25, 0.55); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.85rem; overflow-x: auto; font-size: 0.88em; color: var(--text); } .astrobin-admin-table { margin-top: 0.6rem; } .astrobin-admin-table img { width: 60px; height: 60px; object-fit: cover; display: block; } @media (max-width: 600px) { .astrobin-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; } .astrobin-tile-title { font-size: 0.95rem; } } /* Voting page */ .vote-card { background: rgba(28, 35, 44, 0.55); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .vote-card.vote-open { border-left: 3px solid var(--accent); } .vote-card.vote-closed { opacity: 0.85; } .vote-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .vote-head h3 { margin: 0; flex: 1 1 auto; color: var(--text-strong); font-size: 1.1rem; } .vote-head h3 a { color: var(--text-strong); } .vote-head h3 a:hover { color: var(--accent); text-decoration: none; } .vote-desc { color: var(--text); margin: 0.25rem 0 0.85rem; font-size: 0.95em; } .vote-tally { display: flex; gap: 1.25rem; margin: 0.5rem 0 0.85rem; align-items: baseline; flex-wrap: wrap; } .tally-yes strong, .tally-no strong, .tally-cell strong { font-size: 1.4rem; } .tally-yes { color: var(--success); } .tally-no { color: var(--danger); } .tally-cell { color: var(--text); } /* Default 2-option Yes/No vote keeps the green/red tally tint. */ .vote-tally-binary .tally-cell:first-child { color: var(--success); } .vote-tally-binary .tally-cell:nth-child(2) { color: var(--danger); } .vote-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.5rem 0; margin-bottom: 0.5rem; } .vote-btn-yes { background: rgba(154, 200, 151, 0.2); color: var(--success); border: 1px solid var(--success); box-shadow: none; } .vote-btn-yes:link, .vote-btn-yes:visited, .vote-btn-yes:hover, .vote-btn-yes:focus, .vote-btn-yes:active { color: var(--success); } .vote-btn-yes:hover { background: rgba(154, 200, 151, 0.35); } .vote-btn-yes.is-active { background: var(--success); color: #0c1a0e; } .vote-btn-yes.is-active:link, .vote-btn-yes.is-active:visited, .vote-btn-yes.is-active:hover, .vote-btn-yes.is-active:focus, .vote-btn-yes.is-active:active { color: #0c1a0e; } .vote-btn-no { background: rgba(224, 135, 112, 0.2); color: var(--danger); border: 1px solid var(--danger); box-shadow: none; } .vote-btn-no:link, .vote-btn-no:visited, .vote-btn-no:hover, .vote-btn-no:focus, .vote-btn-no:active { color: var(--danger); } .vote-btn-no:hover { background: rgba(224, 135, 112, 0.35); } .vote-btn-no.is-active { background: var(--danger); color: #1a0a06; } .vote-btn-no.is-active:link, .vote-btn-no.is-active:visited, .vote-btn-no.is-active:hover, .vote-btn-no.is-active:focus, .vote-btn-no.is-active:active { color: #1a0a06; } /* Neutral pill used when a vote has 3+ options and no Yes/No coloring fits. */ .vote-btn:not(.vote-btn-yes):not(.vote-btn-no) { background: rgba(140, 160, 200, 0.15); color: var(--text); border: 1px solid var(--border); box-shadow: none; } .vote-btn:not(.vote-btn-yes):not(.vote-btn-no):hover { background: rgba(140, 160, 200, 0.3); } .vote-btn:not(.vote-btn-yes):not(.vote-btn-no).is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* Officer-only create form: option list editor. */ .vote-options-editor { display: flex; flex-direction: column; gap: 0.4rem; } .vote-option-row { display: flex; gap: 0.4rem; align-items: center; } .vote-option-row input { flex: 1 1 auto; min-width: 0; } .vote-option-row .vote-option-remove { flex: 0 0 auto; padding: 0.25rem 0.6rem; font-size: 1.1em; line-height: 1; } .vote-yourstatus { font-size: 0.88em; } .vote-closed-note { font-size: 0.9em; } .vote-share { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0; font-size: 0.85em; } .vote-share-input { flex: 1 1 280px; background: rgba(15, 20, 25, 0.6); border: 1px solid var(--border); color: var(--muted); padding: 0.3rem 0.5rem; border-radius: var(--radius); font: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; } .vote-officer-panel { margin-top: 0.85rem; padding-top: 0.65rem; border-top: 1px dashed rgba(255, 255, 255, 0.1); } .vote-officer-panel summary { cursor: pointer; color: var(--accent); font-size: 0.88em; } /* Officer "delete" link on event list items */ .event-delete-form { display: inline; margin-left: 0.6rem; } .btn-link-danger { background: transparent; border: none; padding: 0; color: var(--danger); font: inherit; font-size: 0.85em; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .btn-link-danger:hover { color: #f0a195; } /* "Add event" / "Propose event" block at top of /meetings.php and /calendars.php */ .event-action-block { margin: 0.75rem 0 1.25rem; padding: 0.6rem 0.9rem; background: rgba(232, 177, 98, 0.06); border: 1px solid rgba(232, 177, 98, 0.25); border-radius: var(--radius); } .event-action-block > summary { color: var(--accent); font-size: 0.95em; cursor: pointer; padding: 0.15rem 0; list-style: none; } .event-action-block > summary::-webkit-details-marker { display: none; } .event-action-block > summary::before { content: ''; display: none; } .event-action-block[open] > summary { margin-bottom: 0.5rem; border-bottom: 1px dashed rgba(232, 177, 98, 0.3); padding-bottom: 0.5rem; } /* Filter tabs above the calendar grid (/calendars.php) */ .filter-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .filter-tab { padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(28, 35, 44, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); font-size: 0.9em; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .filter-tab:hover { background: rgba(40, 50, 64, 0.7); border-color: rgba(232, 177, 98, 0.35); text-decoration: none; } .filter-tab.active { background: rgba(232, 177, 98, 0.18); border-color: rgba(232, 177, 98, 0.55); color: var(--text-strong); font-weight: 600; } /* Sub-filter pills (e.g. planet picker on the Planets tab) — visually smaller and quieter than the main tab bar. */ .filter-subtabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 1rem; padding-left: 0.1rem; } .filter-subtab { padding: 0.22rem 0.65rem; border-radius: 999px; background: rgba(15, 20, 25, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 0.82em; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .filter-subtab:hover { background: rgba(40, 50, 64, 0.55); border-color: rgba(232, 177, 98, 0.25); color: var(--text); text-decoration: none; } .filter-subtab.active { background: rgba(232, 177, 98, 0.12); border-color: rgba(232, 177, 98, 0.45); color: var(--text-strong); font-weight: 500; } /* Director of Observations — compact 30-day Sky Calendar panel. */ .sky-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; margin: 0.5rem 0 0.4rem; } .sky-panel-card { padding: 0.85rem 0.95rem; background: rgba(15, 20, 25, 0.5); border: 1px solid var(--border, #2c3540); border-radius: var(--radius); } .sky-panel-card h3 { margin: 0 0 0.5rem; color: var(--accent); font-size: 0.95em; letter-spacing: 0.02em; display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; } .sky-panel-all { font-size: 0.78em; font-weight: 400; text-decoration: none; } .sky-panel-all:hover { color: var(--accent); } .sky-panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; } .sky-panel-list li { display: flex; gap: 0.6rem; font-size: 0.88em; line-height: 1.35; } .sky-panel-date { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 6.5em; } .sky-panel-title { flex: 1 1 auto; color: var(--text); overflow-wrap: anywhere; } /* Director of Observations — "Constellations this month" panel. */ .const-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.7rem; margin: 0.6rem 0; } .const-card { background: rgba(15, 20, 25, 0.5); border: 1px solid var(--border, #2c3540); border-radius: var(--radius); overflow: hidden; } .const-card-prime { border-color: rgba(232, 177, 98, 0.45); background: rgba(232, 177, 98, 0.06); } .const-card > summary { cursor: pointer; list-style: none; padding: 0.65rem 0.85rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; } .const-card > summary::-webkit-details-marker { display: none; } .const-card > summary strong { color: var(--text-strong, #f1f5fa); font-size: 1em; } .const-card-meta { font-size: 0.82em; } .const-prime-badge { color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 0.86em; } .const-has-notes { color: var(--accent); font-style: italic; } .const-card[open] > summary { border-bottom: 1px solid var(--border, #2c3540); background: rgba(15, 20, 25, 0.35); } .const-card-body { padding: 0.7rem 0.85rem 0.85rem; } .const-obj-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.2rem; } .const-obj-list li { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; font-size: 0.86em; line-height: 1.35; } .const-obj-desig { color: var(--accent); font-weight: 500; flex: 0 0 auto; font-variant-numeric: tabular-nums; min-width: 3.4em; } a.const-obj-desig { text-decoration: none; border-bottom: 1px dotted rgba(232, 177, 98, 0.45); } a.const-obj-desig:hover { text-decoration: none; border-bottom-color: var(--accent); color: var(--text-strong, #f1f5fa); } .const-obj-name { color: var(--text-strong, #f1f5fa); font-style: italic; } .const-obj-meta { font-size: 0.92em; } .const-notes-form { margin-top: 0.4rem; } .const-notes-label > span { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.82em; } .const-notes-form textarea { width: 100%; background: rgba(15, 20, 25, 0.55); color: var(--text); border: 1px solid var(--border, #2c3540); border-radius: 4px; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.9em; line-height: 1.45; } .const-notes-form textarea:focus { outline: none; border-color: var(--accent); } .const-notes-actions { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* Custom calendar grid view (/meetings.php and /calendars.php) */ .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0.5rem; flex-wrap: wrap; } .cal-nav .cal-month-title { margin: 0; border: none; padding: 0; font-size: 1.5rem; color: var(--text-strong); text-align: center; flex: 1 1 auto; min-width: 8em; } .cal-nav .btn { font-size: 0.85em; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; } .cal-dow { background: rgba(28, 35, 44, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.5rem 0.4rem; text-align: center; font-size: 0.78em; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .cal-day { background: rgba(28, 35, 44, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-height: 92px; padding: 0.4rem 0.35rem; display: flex; flex-direction: column; gap: 2px; } .cal-day.cal-other { opacity: 0.4; } .cal-day.cal-today { background: rgba(232, 177, 98, 0.1); } .cal-day.cal-today .cal-num { color: var(--accent); font-weight: 700; } .cal-num { font-size: 0.82em; color: var(--muted); margin-bottom: 1px; text-align: right; padding-right: 2px; } .cal-event { display: block; background: rgba(232, 177, 98, 0.18); color: var(--text-strong); padding: 2px 6px; border-radius: 3px; font-size: 0.76em; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid var(--accent); } .cal-event:hover { background: rgba(232, 177, 98, 0.32); text-decoration: none; } .cal-event-time { color: var(--accent); font-weight: 600; margin-right: 3px; } .upcoming-list li:target { background: rgba(232, 177, 98, 0.1); border-left: 3px solid var(--accent); padding-left: 0.75rem; margin-left: -0.75rem; } .upcoming-list li.past { opacity: 0.6; } .upcoming-list li.past:target { opacity: 1; } @media (max-width: 600px) { .cal-day { min-height: 60px; padding: 0.25rem 0.2rem; } .cal-event { font-size: 0.68em; padding: 1px 4px; } .cal-num { font-size: 0.75em; } .cal-nav .cal-month-title { font-size: 1.1rem; flex-basis: 100%; order: -1; margin-bottom: 0.5rem; } } /* "Coming up" list under the public calendar grid on /meetings.php */ .upcoming-list { list-style: none; padding: 0; margin: 1rem 0 0; } .upcoming-list li { display: flex; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); align-items: flex-start; } .upcoming-list li:last-child { border-bottom: 0; } .upcoming-when { flex: 0 0 auto; width: 6.5em; text-align: right; line-height: 1.3; } .upcoming-when strong { display: block; color: var(--text-strong); font-size: 1rem; } .upcoming-when span { font-size: 0.85em; } .upcoming-body { flex: 1 1 auto; min-width: 0; } .upcoming-body strong { color: var(--text-strong); font-size: 1rem; } .upcoming-note { font-size: 0.88em; margin-top: 0.3rem; } /* Card grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .card { position: relative; background: rgba(28, 35, 44, 0.92); backdrop-filter: blur(4px) saturate(120%); -webkit-backdrop-filter: blur(4px) saturate(120%); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); padding: 1.5rem 1.25rem; color: var(--text); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; box-shadow: 0 4px 22px rgba(0, 0, 0, 0.55); } a.card { display: block; } a.card:hover { background: rgba(42, 53, 70, 0.95); border-color: rgba(232, 177, 98, 0.55); text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } .card h3 { margin-top: 0; color: var(--accent); } .card p { color: var(--text); } @media (prefers-reduced-motion: reduce) { .card { transition: none; } a.card:hover { transform: none; } } /* "Cover the Stripe fee" opt-in. Shows up on /join, /welcome, /members/billing.php and /donate.php — same compact look everywhere so the ask feels consistent. Always opt-in (never default-checked) per the treasurer's preference. */ .cover-fee-opt { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.6rem 0 0.8rem; padding: 0.55rem 0.7rem; background: rgba(122, 140, 255, 0.06); border: 1px solid rgba(122, 140, 255, 0.22); border-radius: 8px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .cover-fee-opt:hover { background: rgba(122, 140, 255, 0.12); border-color: rgba(158, 170, 255, 0.45); } .cover-fee-opt input[type="checkbox"] { margin-top: 0.18em; flex-shrink: 0; accent-color: var(--accent, #e8b162); cursor: pointer; } .cover-fee-opt span { font-size: 0.86rem; line-height: 1.4; color: var(--text, #e7eaef); opacity: 0.92; } /* ================================================================= Members area — featured cards, documents hub, quick links, grouped tool lists. Designed to break up the wall-of-tiles feel of the old layout. The "welcome / quick docs / perks / billing" block above remains unchanged. ================================================================= */ /* ---- Featured cards (the 4 keepers in each section) ---- */ /* Featured-card grid: left-aligned grid with section-specific column counts. Member section is always 5 cards (Astronomy / Forum / Directory / Marketplace / Tickets) so it forces 5 columns at desktop widths — cards get tighter but stay on one row. Officer section normally has 3 cards (Officer / Announcements / Tickets) and grows to 4 when the Event-Proposals alert tile appears; the :has() rule below widens the grid to 4 columns automatically in that case so the alert tile doesn't push the row to two lines. */ .featured-grid { display: grid; gap: 1rem; margin: 1.2rem 0 1.6rem; } .section-member .featured-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .section-officer .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .section-officer .featured-grid:has(> .featured-card:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1180px) { .section-member .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .section-officer .featured-grid, .section-officer .featured-grid:has(> .featured-card:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .section-member .featured-grid, .section-officer .featured-grid, .section-officer .featured-grid:has(> .featured-card:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .section-member .featured-grid, .section-officer .featured-grid, .section-officer .featured-grid:has(> .featured-card:nth-child(4)) { grid-template-columns: 1fr; } } .featured-card { position: relative; display: flex; flex-direction: column; gap: 0.5rem; /* Tightened side padding to give narrow 5-up member cards enough internal width to fit two-word headings on one line. */ padding: 1.1rem 0.95rem 1.05rem; background: linear-gradient(135deg, rgba(232, 177, 98, 0.04) 0%, rgba(28, 35, 44, 0) 60%), rgba(20, 26, 36, 0.95); border: 1px solid rgba(255, 255, 255, 0.10); border-left: 3px solid rgba(232, 177, 98, 0.55); border-radius: 12px; color: var(--text); text-decoration: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 30px rgba(0, 0, 0, 0.45); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; overflow: hidden; } .featured-card::after { /* Subtle radial accent that lights up on hover — adds visual depth without using a per-tile background image. */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% -10%, rgba(232, 177, 98, 0.18) 0%, rgba(232, 177, 98, 0) 60%); opacity: 0; transition: opacity 0.25s ease; } .featured-card:hover { transform: translateY(-3px); border-color: rgba(232, 177, 98, 0.45); border-left-color: var(--accent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 24px rgba(232, 177, 98, 0.15); text-decoration: none; } .featured-card:hover::after { opacity: 1; } .featured-icon { font-size: 1.8rem; line-height: 1; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); } .featured-card h3 { margin: 0; color: var(--accent); font-size: 1.1rem; letter-spacing: 0.005em; } .featured-card p { margin: 0; color: var(--text); font-size: 0.92rem; line-height: 1.45; opacity: 0.88; } .featured-card-alert { border-left-color: #ffae5e; background: linear-gradient(135deg, rgba(255, 174, 94, 0.10) 0%, rgba(28, 35, 44, 0) 60%), rgba(20, 26, 36, 0.95); } /* ---- Documents hub ---- */ .docs-hub { margin: 1.5rem 0; padding: 1.2rem 1.3rem 1.3rem; background: linear-gradient(180deg, rgba(122, 140, 255, 0.05) 0%, rgba(20, 26, 36, 0) 80%), rgba(20, 26, 36, 0.92); border: 1px solid rgba(122, 140, 255, 0.22); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); } .docs-hub-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.9rem; } .docs-hub-icon { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); } .docs-hub-title { margin: 0; color: #c8d0ff; font-size: 1.15rem; } .docs-hub-blurb { margin: 0.15rem 0 0; font-size: 0.9rem; } .docs-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; } .docs-hub-tile { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.85rem 0.95rem; background: rgba(28, 35, 50, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; color: var(--text); text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .docs-hub-tile:hover { background: rgba(48, 60, 90, 0.95); border-color: rgba(158, 170, 255, 0.55); transform: translateY(-1px); text-decoration: none; } .docs-hub-tile-title { color: #c8d0ff; font-weight: 600; font-size: 0.96rem; } .docs-hub-tile-blurb { color: var(--muted); font-size: 0.82em; line-height: 1.4; } /* ---- Quick-links pill row ---- */ .quick-links { list-style: none; margin: 1rem 0 0.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem; } .quick-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.85rem; background: rgba(28, 35, 44, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; color: var(--text); text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .quick-link:hover { background: rgba(42, 53, 70, 0.85); border-color: rgba(232, 177, 98, 0.45); transform: translateY(-1px); text-decoration: none; } .quick-link-icon { font-size: 1.2rem; line-height: 1; flex: 0 0 auto; opacity: 0.85; } .quick-link-text { display: flex; flex-direction: column; line-height: 1.3; } .quick-link-text strong { color: var(--text-strong); font-weight: 600; font-size: 0.95rem; } .quick-link-text .muted { font-size: 0.78em; } /* ---- Officer + Admin grouped tool lists ---- */ .officer-tool-groups, .admin-tool-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; } .officer-tool-group, .admin-tool-group { background: rgba(20, 26, 36, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 0.9rem 1.05rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .officer-tool-group > summary { cursor: pointer; list-style: none; padding: 0.2rem 0; display: flex; flex-direction: column; gap: 0.2rem; } .officer-tool-group > summary::-webkit-details-marker { display: none; } .officer-tool-group > summary::marker { content: ""; } .officer-tool-group > summary::before { content: "▸ "; color: var(--accent); display: inline; margin-right: 0.3em; transition: transform 0.18s ease; } .officer-tool-group[open] > summary::before { content: "▾ "; } .officer-tool-group-title, .admin-tool-group-title { color: var(--accent); font-size: 1.02rem; font-weight: 600; } .admin-tool-group-title { margin: 0.15rem 0 0.55rem; display: block; } .officer-tool-group-hint { font-size: 0.82em; margin-left: 1.2em; } .officer-tool-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } .officer-tool-list li a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.7rem; margin: 0 -0.35rem; border-radius: 8px; color: var(--text); text-decoration: none; transition: background 0.15s ease; } .officer-tool-list li a:hover { background: rgba(232, 177, 98, 0.10); text-decoration: none; } .officer-tool-list li a strong { color: var(--text-strong); font-weight: 600; font-size: 0.94rem; } .officer-tool-list li a .muted { font-size: 0.82em; line-height: 1.35; } .officer-tool-list .badge { font-size: 0.7em; vertical-align: middle; } /* Mobile: stack the featured cards single-column and tighten paddings. */ @media (max-width: 600px) { .featured-card { padding: 1.1rem 1rem; } .docs-hub { padding: 1rem 1rem 1.1rem; } .docs-hub-grid { grid-template-columns: 1fr; } } /* Honor reduced-motion preference across the new components. */ @media (prefers-reduced-motion: reduce) { .featured-card, .docs-hub-tile, .quick-link { transition: none; } .featured-card:hover, .docs-hub-tile:hover, .quick-link:hover { transform: none; } .featured-card::after { transition: none; } } /* Forms */ form.form { max-width: 480px; } .field { margin-bottom: 1rem; } .field label { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.9rem; } .field input, .field textarea, .field select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.7rem; font: inherit; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); } .field input:disabled { color: var(--muted); } .btn { display: inline-block; background: var(--accent); color: #2a1a08; border: none; border-radius: var(--radius); padding: 0.55rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } .btn:link, .btn:visited, .btn:hover, .btn:focus, .btn:active { color: #2a1a08; text-decoration: none; } .btn:hover { background: var(--accent-hover); } .btn-ghost { background: rgba(28, 35, 44, 0.5); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-ghost:link, .btn-ghost:visited, .btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active { color: var(--text); } .btn-ghost:hover { background: rgba(40, 50, 64, 0.6); border-color: rgba(232, 177, 98, 0.35); } .btn-danger { background: var(--danger); color: #1a0a06; } .btn-danger:link, .btn-danger:visited, .btn-danger:hover, .btn-danger:focus, .btn-danger:active { color: #1a0a06; } /* Tables */ table.data { width: 100%; border-collapse: collapse; margin: 1em 0; } table.data th, table.data td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; } table.data th { color: var(--muted); font-weight: 600; font-size: 0.9rem; } table.data tr:hover td { background: var(--surface); } /* Flash */ .flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid var(--border); background: var(--surface); } .flash-success { background: rgba(127, 200, 143, 0.1); border-color: var(--success); color: var(--success); } .flash-error { background: rgba(224, 135, 112, 0.1); border-color: var(--danger); color: var(--danger); } /* Footer */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 1rem 0; color: var(--muted); font-size: 0.9rem; text-align: center; } .site-footer a { color: var(--muted); } /* Role badges */ .badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--surface-2); color: var(--muted); text-transform: lowercase; } .badge-admin { background: rgba(232, 177, 98, 0.2); color: var(--accent); } .badge-officer { background: rgba(127, 179, 232, 0.2); color: var(--link); } .badge-member { background: rgba(127, 200, 143, 0.2); color: var(--success); } .badge-pending { background: rgba(140, 150, 170, 0.2); color: var(--muted); } /* Misc */ .muted { color: var(--muted); } .text-center { text-align: center; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } details { margin: 1rem 0; } details > summary { cursor: pointer; padding: 0.4rem 0; color: var(--accent); } iframe { display: block; } @media (max-width: 600px) { .hero { padding: 1.5rem 1rem; } .hero h1 { font-size: 1.8rem; } .nav-user { display: none; } h1 { font-size: 1.5rem; } } /* ============================================================ New Member Packet (/join.php) + pending-user welcome ============================================================ */ /* Outer shell that darkens the body bg image so text reads cleanly */ .join-page-shell { position: relative; margin: -0.5rem -0.5rem 1rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: rgba(8, 12, 22, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 24px rgba(0,0,0,0.45); } .join-page-shell .join-section, .join-page-shell .join-cta { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .join-page-shell .join-section-dark { background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(20,30,55,0.45)); border-color: rgba(120,180,255,0.22); } /* Staff edit bar at the top of /join.php */ .join-staff-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.8rem; margin-bottom: 1rem; background: rgba(255,200,80,0.08); border: 1px dashed rgba(255,200,80,0.4); border-radius: var(--radius); font-size: 0.92em; } .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.85em; } /* Inline edit pencil rendered on each block when staff is viewing */ .block-edit-pencil { position: absolute; top: 0.4rem; right: 0.5rem; width: 1.6rem; height: 1.6rem; line-height: 1.5rem; text-align: center; border-radius: 50%; background: rgba(255,200,80,0.18); color: #ffd476; border: 1px solid rgba(255,200,80,0.4); text-decoration: none; font-size: 0.95em; z-index: 5; } .block-edit-pencil:hover { background: rgba(255,200,80,0.32); color: #fff; } /* Containers that host an edit pencil need to be positioning contexts */ .join-section, .join-cta, .join-card, .join-tip, .join-tip-card, .app-tile, .join-tech > div, .join-step > div, .join-figure, .join-callout, .join-highlight > div, .join-scope-text, .join-hero { position: relative; } /* Whole-glossary collapse */ .glossary-shell { margin-top: 0.5rem; } .glossary-shell > summary { cursor: pointer; list-style: none; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .glossary-shell > summary::-webkit-details-marker { display: none; } .glossary-shell > summary::before { content: "▸ "; color: var(--muted); font-size: 1.2em; } .glossary-shell[open] > summary::before { content: "▾ "; } .glossary-shell > summary h2 { margin: 0; border: none; padding: 0; } .glossary-shell-hint { margin-left: 0.5rem; } /* ----- Admin: /members/admin/join.php ---------------------- */ .join-admin-toc { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 1rem; margin: 1rem 0 2rem; line-height: 2; } .join-admin-toc a { margin-right: 0.6rem; padding: 0.15rem 0.5rem; border-radius: 4px; background: rgba(120,180,255,0.1); text-decoration: none; font-size: 0.9em; } .join-admin-toc a:hover { background: rgba(120,180,255,0.25); } .join-admin-group { margin: 2rem 0; padding: 1rem 1.2rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); } .join-admin-group h2 { margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; } .join-admin-block { margin: 0.6rem 0; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.9rem; } .join-admin-block > summary { cursor: pointer; font-size: 1.02em; padding: 0.3rem 0; } .join-admin-block > summary .slug-tag { color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; } .join-admin-form { margin: 0.6rem 0 1rem; padding: 0.6rem 0.8rem; background: rgba(0,0,0,0.25); border-radius: 6px; } .small-hint { margin: 0.3rem 0 0.6rem; font-size: 0.85em; } .join-admin-textarea { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; line-height: 1.4; background: var(--bg, #0f1419); color: var(--text, #e8e9ea); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; resize: vertical; min-height: 8rem; } .join-admin-preview { max-width: 280px; max-height: 220px; border-radius: 6px; background: rgba(255,255,255,0.92); padding: 0.3rem; margin: 0.3rem 0 0.6rem; } .pending-welcome { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; } .pending-welcome h2 { margin-top: 0; } .pending-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1.5rem; } .join-hero { display: flex; align-items: center; gap: 1.5rem; padding: 2rem 1.5rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, rgba(60,90,160,0.18), rgba(20,30,60,0.4)); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .join-hero .join-emblem { width: 140px; height: auto; flex-shrink: 0; filter: drop-shadow(0 0 14px rgba(120,180,255,0.25)); } .join-hero h1 { margin: 0 0 0.4rem; line-height: 1.15; font-size: 2.1rem; } .join-tag { margin: 0; color: var(--muted); font-size: 1.05rem; } .join-section { margin: 2rem 0; padding: 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius); } .join-section h2 { margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .join-section-dark { background: linear-gradient(180deg, rgba(10,15,30,0.55), rgba(20,30,55,0.35)); border-color: rgba(120,180,255,0.18); } .join-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; } .join-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; } .join-card h3 { margin: 0 0 0.4rem; color: var(--accent, #88c4ff); font-size: 1.05rem; } .join-card p { margin: 0.4rem 0; } /* Pricing block */ .join-pricing { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; } .price-card { flex: 1 1 220px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; text-align: center; } .price-amount { font-size: 2.4rem; font-weight: 700; color: var(--accent, #88c4ff); line-height: 1; } .price-label { color: var(--muted); font-size: 0.9em; margin-bottom: 0.6rem; } .join-callout { background: rgba(110,180,255,0.07); border-left: 4px solid #6ab4ff; padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; } .join-callout h3 { margin-top: 0; color: #aedaff; } /* App grid */ .app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0; } .app-tile { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.15s, border-color 0.15s; } .app-tile:hover { transform: translateY(-2px); border-color: rgba(120,180,255,0.45); } .app-tile-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; text-decoration: none; color: inherit; } .app-tile-inner img { width: 80px; height: 80px; object-fit: contain; border-radius: 12px; margin-bottom: 0.6rem; } .app-name { font-weight: 600; } .app-blurb { font-size: 0.88em; color: var(--muted); margin-top: 0.3rem; } .app-tile-featured { background: rgba(110,180,255,0.08); border-color: rgba(120,180,255,0.45); } /* CVAS member-perk tiles — visually distinct from third-party tiles. */ .app-tile-perk { background: rgba(232, 177, 98, 0.10); border-color: rgba(232, 177, 98, 0.55); position: relative; } .app-tile-perk:hover { border-color: rgba(232, 177, 98, 0.85); } .app-tile-perk .app-name { color: var(--accent); } /* Member-perk highlight for the "Other recommended websites" tips */ .join-tip-perk { background: rgba(232, 177, 98, 0.08); border-left: 3px solid var(--accent); padding-left: 1rem; } /* The "Member perk" pill — used inside app tiles and website tips */ .perk-badge { display: inline-block; margin-left: 0.45rem; font-size: 0.62em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #1c232c; background: var(--accent); padding: 0.18rem 0.55rem; border-radius: 999px; vertical-align: middle; white-space: nowrap; } .join-numbered { background: rgba(0,0,0,0.25); padding: 0.8rem 1rem 0.8rem 2.4rem; border-radius: var(--radius); margin: 0.8rem 0; } .join-numbered li { margin: 0.3rem 0; } .join-code { display: inline-block; background: rgba(120,180,255,0.18); border: 1px solid rgba(120,180,255,0.4); border-radius: 6px; padding: 0.2em 0.6em; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05em; color: #c9e3ff; } /* Tip / link cards */ .join-tip { margin: 0.8rem 0; padding: 0.6rem 0.8rem; border-left: 3px solid rgba(120,180,255,0.35); background: rgba(255,255,255,0.025); } .join-tip p { margin: 0.3rem 0 0; color: var(--muted); } .join-tip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.2rem 0; } .join-tip-card { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.15s, border-color 0.15s; } .join-tip-card:hover { transform: translateY(-2px); border-color: rgba(120,180,255,0.45); } .join-tip-card-inner { display: flex; flex-direction: column; padding: 0.8rem; text-decoration: none; color: inherit; } .join-tip-card-inner img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; border-radius: 6px; margin-bottom: 0.6rem; } /* Quote / Highlight blocks */ .join-quote { border-left: 4px solid rgba(120,180,255,0.5); padding: 0.6rem 1rem; margin: 1rem 0; color: #cfe1ff; font-style: italic; } .join-quote cite { display: block; font-style: normal; color: var(--muted); margin-top: 0.4rem; font-size: 0.9em; } .join-highlight { display: grid; grid-template-columns: 1fr 2fr; gap: 1.4rem; align-items: start; background: rgba(255,200,80,0.06); border: 1px solid rgba(255,200,80,0.25); border-radius: var(--radius); padding: 1.2rem; margin: 1rem 0; } .join-highlight-img { width: 100%; height: auto; border-radius: 8px; } .join-highlight h3 { margin-top: 0; color: #ffd476; font-size: 1.3rem; } /* Step blocks (alternating image left / right) */ .join-step { display: grid; grid-template-columns: 2fr 1fr; gap: 1.4rem; align-items: center; margin: 1.6rem 0; } .join-step-reverse { grid-template-columns: 1fr 2fr; } .join-step-img { width: 100%; height: auto; border-radius: 8px; background: #fff; padding: 0.4rem; } .scope-spec-list { margin-top: 0.8rem; } .scope-spec-list dt { font-weight: 700; color: var(--accent, #88c4ff); margin-top: 0.6rem; } .scope-spec-list dd { margin: 0.2rem 0 0.5rem 0; } /* Telescope / mount image rows */ .join-scope-row { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 1.4rem; align-items: start; } .join-scope-img { width: 100%; height: auto; background: #fff; border-radius: 8px; padding: 0.4rem; } .join-scope-text h3 { color: var(--accent, #88c4ff); margin-top: 1rem; } .join-scope-text h3:first-child { margin-top: 0; } .join-fullwidth { width: 100%; max-width: 760px; height: auto; display: block; margin: 0 auto 1rem; background: rgba(255,255,255,0.92); border-radius: 8px; padding: 0.5rem; } /* Technique blocks */ .join-tech { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 1.4rem; align-items: center; margin: 1.4rem 0; padding: 1rem; background: rgba(255,255,255,0.025); border-radius: var(--radius); } .join-tech-reverse { grid-template-columns: 1fr; } .join-tech img { width: 100%; height: auto; border-radius: 8px; background: rgba(255,255,255,0.92); padding: 0.4rem; } .join-tech h3 { margin-top: 0; color: var(--accent, #88c4ff); } /* Figures (sky measurement etc.) */ .join-figure { margin: 0; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; text-align: center; } .join-figure img { width: 100%; height: auto; border-radius: 6px; background: #fff; } .join-figure figcaption { color: var(--muted); font-size: 0.88em; margin-top: 0.5rem; text-align: left; } /* Glossary */ .join-glossary { column-count: 2; column-gap: 1.2rem; margin-top: 1rem; } .glossary-item { break-inside: avoid; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; } .glossary-item summary { cursor: pointer; font-weight: 600; color: var(--accent, #88c4ff); list-style: none; } .glossary-item summary::-webkit-details-marker { display: none; } .glossary-item summary::before { content: "▸ "; color: var(--muted); } .glossary-item[open] summary::before { content: "▾ "; } .glossary-item p { margin: 0.4rem 0 0; font-size: 0.93em; color: var(--text); } /* Final CTA */ .join-cta { margin: 2rem 0 1rem; padding: 1.8rem; text-align: center; background: linear-gradient(135deg, rgba(60,90,160,0.22), rgba(20,30,60,0.45)); border: 1px solid rgba(120,180,255,0.3); border-radius: var(--radius); } .join-cta h2 { margin-top: 0; border-bottom: none; padding-bottom: 0; font-size: 1.8rem; } .join-cta-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.2rem 0; } @media (max-width: 760px) { .join-hero { flex-direction: column; text-align: center; gap: 1rem; padding: 1.4rem 1rem; } .join-hero h1 { font-size: 1.6rem; } .join-hero .join-emblem { width: 110px; } .join-section { padding: 1rem; } .join-highlight, .join-step, .join-step-reverse, .join-scope-row, .join-tech { grid-template-columns: 1fr; } .join-glossary { column-count: 1; } .join-cta { padding: 1.2rem; } } /* ============================================================ Back-to-top floating button ============================================================ */ .back-to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(20, 30, 60, 0.85); color: #c9e3ff; border: 1px solid rgba(120, 180, 255, 0.45); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; transition: transform 0.15s, background 0.15s; } .back-to-top:hover { transform: translateY(-2px); background: rgba(40, 60, 100, 0.95); } .back-to-top[hidden] { display: none; } /* ============================================================ Personal codes (gate / warm-room) on /members/ ============================================================ */ .codes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.2rem 0; } .code-card { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; } .code-card-gate { border-left: 4px solid #6ab4ff; } .code-card-warm { border-left: 4px solid #ffd476; } .code-card-label { font-size: 0.9em; color: var(--muted); margin-bottom: 0.3rem; } .code-card-value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.08em; color: #e8e9ea; line-height: 1.2; } /* Shoulder-surf protection: blur secret codes until the user hovers, focuses, or taps the card. Touch devices reveal on tap via :focus (the card is made focusable with tabindex). The pending placeholder is exempted — it's just a status message, not a secret. */ .code-card-value:not(.code-card-pending) { filter: blur(8px); transition: filter 0.15s ease-out; cursor: pointer; user-select: none; } .code-card:hover .code-card-value:not(.code-card-pending), .code-card:focus .code-card-value:not(.code-card-pending), .code-card:focus-within .code-card-value:not(.code-card-pending), .code-card-value:not(.code-card-pending):hover, .code-card-value:not(.code-card-pending):focus { filter: none; user-select: text; } .code-card-value.code-card-pending { font-size: 1.05rem; font-weight: normal; color: var(--muted); letter-spacing: 0; font-family: inherit; font-style: italic; } .code-card-hint { font-size: 0.85em; margin-top: 0.4rem; } /* ============================================================ Membership status summary on /members/ ============================================================ */ .billing-summary { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.2rem; margin: 1rem 0 1.5rem; } .billing-summary-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; } .billing-active, .billing-due { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } /* ============================================================ /members/billing.php ============================================================ */ .billing-status-card { padding: 1.4rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 1.5rem; background: rgba(255,255,255,0.04); } .billing-status-card.is-active { background: linear-gradient(135deg, rgba(60,160,90,0.18), rgba(20,40,60,0.4)); border-color: rgba(120,220,150,0.35); } .billing-status-card.is-due { background: linear-gradient(135deg, rgba(255,170,70,0.16), rgba(40,30,60,0.4)); border-color: rgba(255,200,80,0.4); } .billing-status-card h2 { margin-top: 0; } .billing-pay-card { padding: 1.4rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255,255,255,0.03); margin-bottom: 1.5rem; } .billing-pay-card h2 { margin-top: 0; } .billing-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; } .billing-tier-form { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; text-align: center; } .billing-tier-form h3 { margin: 0; color: var(--accent, #88c4ff); } .billing-price { font-size: 2rem; font-weight: 700; margin: 0.4rem 0; color: #e8e9ea; } .billing-history { margin-top: 2rem; } .billing-history table.data { width: 100%; } /* ============================================================ /members/admin/billing.php ============================================================ */ /* Roomier rows — the previous default-data-table padding squished the columns once we added "Last payment" alongside "Active membership" and "Total paid all time". Vertical-align: top keeps multi-line cells (date + amount + method) aligned with the member name on the left. */ .billing-admin-table th, .billing-admin-table td { padding: 0.65rem 0.85rem; vertical-align: top; line-height: 1.4; } .billing-admin-table th { white-space: nowrap; line-height: 1.25; } .billing-admin-table th .sort-header { display: inline-block; } .billing-admin-table .billing-active-cell { white-space: nowrap; } .billing-admin-table .billing-active-thru { display: block; margin-top: 0.2rem; font-size: 0.86em; color: var(--muted); } .billing-admin-table .billing-lastpaid-date { font-variant-numeric: tabular-nums; white-space: nowrap; } .billing-admin-table .billing-lastpaid-meta { margin-top: 0.15rem; font-size: 0.82em; white-space: nowrap; } .billing-admin-table .billing-total-cell { font-variant-numeric: tabular-nums; font-weight: 500; } .billing-admin-table .billing-payments-mini summary { cursor: pointer; color: var(--accent, #88c4ff); font-size: 0.9em; } /* Replaced the original inner with a wrapping flex list — the table version overflowed the outer column on narrow viewports, clipping the delete button on the right. Each .billing-payment-row is a flex line: date | amount | badge | source | delete. When the column is too narrow, items wrap onto the next line instead of disappearing. */ .billing-payments-mini-list { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.85em; } .billing-payment-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .billing-payment-row:last-child { border-bottom: none; } .billing-payment-row .bp-date { min-width: 5.5em; } .billing-payment-row .bp-amount { font-variant-numeric: tabular-nums; min-width: 4.5em; font-weight: 500; } .billing-payment-row .bp-status .badge { white-space: nowrap; } .billing-payment-row .bp-source { font-size: 0.92em; } .billing-payment-row .bp-delete { /* Push the delete button to the far right so it always sits at the row's trailing edge regardless of how many other pieces wrapped. */ margin-left: auto; } .billing-payment-row .bp-delete .btn { padding: 0 0.5em; line-height: 1.4; } /* Inline per-payment edit form. Hidden by default; the ✎ button toggles it. Grid for the input fields so they reflow on narrow widths instead of spilling out of the column. */ .billing-payment-edit { list-style: none; margin: 0.2rem 0 0.6rem; padding: 0.7rem 0.85rem; background: rgba(232, 177, 98, 0.06); border: 1px solid rgba(232, 177, 98, 0.30); border-radius: 8px; } .billing-payment-edit[hidden] { display: none !important; } .bp-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem 0.7rem; margin-bottom: 0.6rem; } .bp-edit-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted, #9aa3ad); } .bp-edit-grid label.bp-edit-notes { grid-column: 1 / -1; } .bp-edit-grid input, .bp-edit-grid select { font: inherit; padding: 0.3rem 0.45rem; background: rgba(0, 0, 0, 0.30); color: var(--text, #f1f5fa); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px; } .bp-edit-grid input:focus, .bp-edit-grid select:focus { outline: none; border-color: var(--accent, #e8b162); } .bp-edit-actions { display: flex; gap: 0.5rem; align-items: center; } .bp-edit-toggle { padding: 0 0.5em; line-height: 1.4; } /* Legacy class kept in case any stale page-cache HTML still references it. */ .billing-payments-mini-table { margin-top: 0.4rem; font-size: 0.85em; width: 100%; } .billing-payments-mini-table td { padding: 0.2rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .billing-admin-manual { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin-top: 2rem; } .billing-admin-manual h2 { margin-top: 0; } .billing-admin-manual-form .form-row { display: flex; gap: 1rem; flex-wrap: wrap; } .billing-admin-manual-form .form-row .field { flex: 1; min-width: 160px; } /* Member type-ahead picker */ .member-typeahead { position: relative; } .member-typeahead input[type="text"] { width: 100%; background: var(--bg, #0f1419); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; font-size: 1em; } .member-typeahead-list { position: absolute; top: calc(100% + 0.2rem); left: 0; right: 0; z-index: 50; list-style: none; margin: 0; padding: 0.3rem 0; background: rgba(22, 28, 36, 0.98); border: 1px solid var(--border-strong, #6b7a92); border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); max-height: 18rem; overflow-y: auto; } .member-typeahead-list[hidden] { display: none; } .member-typeahead-list li { padding: 0.4rem 0.7rem; cursor: pointer; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.92em; } .member-typeahead-list li:hover, .member-typeahead-list li.is-highlighted { background: rgba(120, 180, 255, 0.15); } /* Sortable column header */ .sort-header { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; text-decoration: none; white-space: nowrap; } .sort-header:hover { color: var(--accent); text-decoration: none; } .sort-arrow { font-size: 0.8em; opacity: 0.85; } .sort-arrow.muted { opacity: 0.35; } /* ============================================================ /members/admin/codes.php ============================================================ */ .codes-admin-section { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.5rem; } .codes-admin-section h2 { margin-top: 0; } .codes-admin-table { width: 100%; border-collapse: collapse; } .codes-admin-table th, .codes-admin-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: middle; } .codes-row-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0; } .codes-row-form input { background: var(--bg, #0f1419); color: var(--text, #e8e9ea); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.92em; } .warm-code-cell { background: rgba(255,200,80,0.18); color: #ffd476; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 1em; } /* ============================================================ /join.php pricing — purchase buttons ============================================================ */ .price-card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .price-card form { width: 100%; display: flex; justify-content: center; } .price-card .btn, .price-card .btn-primary { width: auto; } .join-callout-success { background: rgba(110,220,150,0.10); border-left-color: #6adc96; } .join-callout-success h3 { color: #aef0c5; } /* ============================================================ Misc shared helpers ============================================================ */ .form-row { display: flex; gap: 1rem; flex-wrap: wrap; } .form-row .field { flex: 1; min-width: 160px; } .btn-primary { background: linear-gradient(180deg, #4a8dff, #2c64d8); color: #fff; border: 1px solid #2c64d8; box-shadow: 0 2px 6px rgba(40,90,180,0.4); } .btn-primary:hover { background: linear-gradient(180deg, #5a9dff, #3674e8); } /* ============================================================ /members/admin/users.php (full-CRUD user editor) ============================================================ */ .users-add { background: rgba(110,180,255,0.06); border: 1px solid rgba(120,180,255,0.3); border-radius: var(--radius); padding: 0.7rem 1rem; margin-bottom: 1.5rem; } .users-add > summary { cursor: pointer; font-size: 1.05em; color: #aedaff; } .users-form { margin-top: 1rem; } .users-form .field input[type="text"], .users-form .field input[type="email"], .users-form .field input[type="password"], .users-form .field select, .users-form .field textarea { background: var(--bg, #0f1419); color: var(--text, #e8e9ea); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.95em; width: 100%; } .users-filter { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; padding: 0.5rem 0.8rem; background: rgba(255,255,255,0.03); border-radius: var(--radius); } .users-filter input[type="text"], .users-filter select { background: var(--bg, #0f1419); color: var(--text, #e8e9ea); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.6rem; font-size: 0.9em; } .users-filter input[type="text"] { min-width: 14rem; } .user-row { margin: 0.5rem 0; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); border-left: 4px solid var(--border); } .user-row.role-admin { border-left-color: #ff7a7a; } .user-row.role-officer { border-left-color: #ffd476; } .user-row.role-member { border-left-color: #6ab4ff; } .user-row.role-pending { border-left-color: #c98aff; } .user-row.is-inactive { border-left-color: #555; opacity: 0.7; } .user-row > details > summary { cursor: pointer; padding: 0.6rem 0.9rem; list-style: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .user-row > details > summary::-webkit-details-marker { display: none; } .user-row > details > summary::before { content: "▸ "; color: var(--muted); } .user-row > details[open] > summary::before { content: "▾ "; } .user-row-meta { margin-left: auto; font-size: 0.88em; } .user-row-body { padding: 0.6rem 1rem 1rem; border-top: 1px solid var(--border); } .user-row-body hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } .user-row-actions { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; } .role-checks { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.7rem 0.5rem; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; } .role-checks legend { color: var(--muted); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0.4rem; } .role-checks label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.92em; cursor: pointer; } .role-checks input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; } .role-checks input:disabled + * { opacity: 0.6; cursor: not-allowed; } .role-granted-hint { width: 100%; } .user-action { display: flex; align-items: center; gap: 0.4rem; margin: 0; } .user-action label { color: var(--muted); font-size: 0.88em; } .user-action select { background: var(--bg, #0f1419); color: var(--text, #e8e9ea); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.9em; } .user-action-pw input[type="text"] { background: var(--bg, #0f1419); color: var(--text, #e8e9ea); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.9em; width: 14rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .user-row-footer { margin-top: 0.8rem; font-size: 0.85em; } /* ============================================================ /members/directory.php — wider table for admins ============================================================ */ .directory-table { width: 100%; } .directory-table td, .directory-table th { vertical-align: top; } .directory-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.6rem 0 0.9rem; } .directory-toolbar input[type="search"] { flex: 1 1 18rem; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; font: inherit; } .directory-toolbar select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.6rem; font: inherit; } .directory-count { font-size: 0.86em; } .directory-name-cell { display: flex; gap: 0.6rem; align-items: flex-start; } .directory-name-cell .avatar { flex-shrink: 0; width: 36px; height: 36px; font-size: 0.95em; } .directory-name { color: var(--link); text-decoration: none; } .directory-name:hover { text-decoration: underline; } .directory-bio { margin-top: 0.15rem; } .directory-actions { white-space: nowrap; } .directory-actions .btn { padding: 0.25rem 0.6rem; } /* ============================================================ /members/admin/users-import.php — pre-formatted report block ============================================================ */ .import-report { background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem 1rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; line-height: 1.4; max-height: 24rem; overflow: auto; white-space: pre-wrap; } /* ============================================================ /members/admin/codes.php — checkbox toggle for "also reset password" ============================================================ */ .codes-pw-toggle { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.85em; white-space: nowrap; } .codes-pw-toggle input { width: auto; } /* ============================================================ Inner-page reading panel — applied to
on every page except the homepage and /join.php (which has its own shell) ============================================================ */ main.container.main-darken { background: rgba(10, 14, 22, 0.78); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-radius: var(--radius); padding: 1.4rem 1.6rem 2.2rem; margin-top: 1rem; margin-bottom: 1.5rem; box-shadow: 0 0 28px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.06); } @media (max-width: 600px) { main.container.main-darken { padding: 1rem 1rem 1.5rem; margin-top: 0.6rem; } } /* Wide tables (directory, admin/billing, codes) need to scroll horizontally on narrow viewports rather than crushing every column. */ table.data, table.directory-table, table.codes-admin-table, table.billing-admin-table { width: 100%; } .codes-admin-table, .billing-admin-table { display: block; overflow-x: auto; white-space: normal; } /* Allow the directory to wrap rather than scroll horizontally. */ .directory-table { table-layout: auto; width: 100%; } .directory-table td:nth-child(2), /* Role badge */ .directory-table td:nth-child(3), /* Email */ .directory-table td:nth-child(4) /* Phone */ { white-space: nowrap; } /* Mailing-address (admin only) and the DM-button column wrap naturally. */ .directory-table td .badge { white-space: nowrap; } /* Phone numbers, dates, and other naturally one-line values must never wrap mid-token. */ .codes-admin-table td:nth-child(3), /* Current code */ .codes-admin-table td:nth-child(6) /* Updated date */ { white-space: nowrap; } /* Make table cells in directory breathe a bit so names don't stack vertically in narrow columns when there's room. */ .directory-table th, .directory-table td { padding: 0.5rem 0.7rem; vertical-align: top; } .directory-table td:first-child { min-width: 11rem; } /* ============================================================ "Are we observing tonight?" — officer announce form (AJAX) ============================================================ */ .observing-officer-form { margin: 0; } .observing-location-picker { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 1rem 0.8rem; margin: 0.5rem 0 0.8rem; background: rgba(255,255,255,0.03); } .observing-location-picker legend { color: var(--muted); font-size: 0.9em; padding: 0 0.4rem; } .observing-location-picker label { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; cursor: pointer; } .observing-location-picker label:hover { color: var(--accent, #88c4ff); } .observing-location-picker input[type="radio"] { accent-color: #6ab4ff; width: auto; } .observing-time-picker { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem; margin: 0.4rem 0; background: rgba(255,255,255,0.03); display: flex; flex-wrap: wrap; gap: 0.8rem; } .observing-time-picker legend { color: var(--muted); font-size: 0.9em; padding: 0 0.4rem; } .observing-time-picker label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.88em; } .observing-time-picker label > span { color: var(--muted); font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.05em; } .observing-time-picker input[type="datetime-local"] { background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: 0.32rem 0.5rem; font-size: 0.9em; color-scheme: dark; } .observing-officer-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; } .observing-announce-btn { background: linear-gradient(180deg, #4cc474, #2d8c50); color: #fff; border: 1px solid #2d8c50; box-shadow: 0 2px 6px rgba(40,140,70,0.4); } .observing-announce-btn:hover { background: linear-gradient(180deg, #5cd484, #3d9c60); } .observing-announce-btn:disabled, .observing-cancel-btn:disabled { opacity: 0.55; cursor: progress; } .observing-toast { margin-top: 0.6rem; padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 0.92em; line-height: 1.4; border: 1px solid transparent; } .observing-toast-success { background: rgba(110,220,150,0.12); border-color: rgba(110,220,150,0.4); color: #b9f0d0; } .observing-toast-info { background: rgba(120,180,255,0.12); border-color: rgba(120,180,255,0.4); color: #cfe1ff; } .observing-toast-error { background: rgba(255,120,120,0.14); border-color: rgba(255,120,120,0.4); color: #ffd2d2; } .observing-toast[hidden] { display: none; } /* ============================================================ /members/admin/email.php ============================================================ */ .email-presets { list-style: none; padding: 0; margin: 0.5rem 0 0; } .email-presets li { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; flex-wrap: wrap; } .email-presets .btn { white-space: nowrap; } .email-log-table { display: block; overflow-x: auto; width: 100%; } .email-log-table tr.is-failed td { background: rgba(255,80,80,0.06); } .email-log-table th, .email-log-table td { padding: 0.4rem 0.6rem; vertical-align: top; } /* ============================================================ Header user/officer dropdown — vertical menu of links ============================================================ */ .nav-user-menu { padding: 0.4rem 0; width: min(220px, calc(100vw - 2rem)); } .nav-user-menu a { display: block; padding: 0.5rem 1rem; color: var(--text); text-decoration: none; font-size: 0.95em; } .nav-user-menu a:hover { background: rgba(120,180,255,0.1); color: var(--text-strong); text-decoration: none; } .nav-user-menu a.nav-dashboard-link { background: linear-gradient(180deg, rgba(232, 177, 98, 0.18), rgba(232, 177, 98, 0.06)); color: var(--accent); font-weight: 700; border-left: 3px solid var(--accent); padding-left: calc(1rem - 3px); } .nav-user-menu a.nav-dashboard-link:hover { background: linear-gradient(180deg, rgba(232, 177, 98, 0.32), rgba(232, 177, 98, 0.12)); color: var(--accent); } .nav-user-menu a.nav-dashboard-link span[aria-hidden] { margin-right: 0.35em; } .nav-user-menu hr { border: 0; border-top: 1px solid var(--border); margin: 0.3rem 0; } .nav-user-trigger { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-user-badge { display: inline-block; background: #ff4a4a; color: #fff; border-radius: 999px; padding: 0 0.4rem; font-size: 0.78em; margin-left: 0.3rem; line-height: 1.5; } /* ============================================================ Notification bell + dropdown (header) ============================================================ */ .notif-dropdown { position: relative; } .notif-trigger, .dm-trigger { background: transparent; border: 1px solid transparent; color: inherit; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 6px; position: relative; display: inline-flex; align-items: center; line-height: 1; text-decoration: none; } .notif-trigger:hover, .dm-trigger:hover { background: rgba(255,255,255,0.06); text-decoration: none; } .notif-trigger svg, .dm-trigger svg { display: block; } .dm-badge { position: absolute; top: 0.05rem; right: 0.05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px; background: #4cc474; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.05rem; text-align: center; box-shadow: 0 0 0 2px var(--surface, #1c232c); } .dm-badge[hidden] { display: none; } .notif-badge { position: absolute; top: 0.05rem; right: 0.05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px; background: #ff4a4a; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.05rem; text-align: center; box-shadow: 0 0 0 2px var(--surface, #1c232c); } .notif-badge[hidden] { display: none; } .notif-menu { width: 22rem; max-width: 90vw; padding: 0; overflow: hidden; } .notif-dropdown.open .notif-menu { display: block; } .notif-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); } .notif-mark-all-btn { background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.78em; color: var(--muted); cursor: pointer; } .notif-mark-all-btn:hover { color: var(--text); border-color: rgba(120,180,255,0.45); } .notif-list { list-style: none; margin: 0; padding: 0; max-height: 24rem; overflow-y: auto; } .notif-item, .notif-loading, .notif-empty { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); } .notif-loading, .notif-empty { font-size: 0.9em; } .notif-item { display: flex; gap: 0.6rem; cursor: pointer; transition: background 0.15s; } .notif-item:hover { background: rgba(120,180,255,0.06); } .notif-item.is-unread { background: rgba(120,180,255,0.05); border-left: 3px solid #6ab4ff; padding-left: calc(0.8rem - 3px); } .notif-item .notif-icon { flex-shrink: 0; width: 1.6rem; text-align: center; font-size: 1.1em; line-height: 1.2; } .notif-item .notif-text { flex: 1; min-width: 0; } .notif-item .notif-title { font-weight: 600; font-size: 0.92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-item.is-unread .notif-title { color: #cfe1ff; } .notif-item .notif-body { font-size: 0.85em; color: var(--muted); margin-top: 0.15rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif-item .notif-when { font-size: 0.78em; margin-top: 0.2rem; } .notif-menu-foot { padding: 0.5rem 0.8rem; text-align: center; border-top: 1px solid var(--border); background: rgba(0,0,0,0.2); } .notif-menu-foot a { font-size: 0.88em; } /* ============================================================ /members/admin/president.php ============================================================ */ .prez-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem; margin: 0.6rem 0 1.4rem; } .prez-stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.85rem; background: rgba(255,255,255,0.03); } .prez-stat.is-warn { border-color: rgba(232, 177, 98, 0.55); background: rgba(232, 177, 98, 0.07); } .prez-stat-value { font-size: 1.45rem; font-weight: 700; color: var(--text); line-height: 1; } .prez-stat.is-warn .prez-stat-value { color: var(--accent); } .prez-stat-label { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.25rem; } .prez-section { margin: 1.6rem 0; padding-top: 0.4rem; border-top: 1px solid var(--border); } .prez-section h2 { margin: 0.6rem 0; color: var(--accent); } .prez-agenda-list, .prez-action-list, .prez-officer-list, .prez-recent-list { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .prez-agenda-list { counter-reset: agenda; padding-left: 0; } .prez-agenda-list > li { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.45rem 0.7rem; background: rgba(255,255,255,0.02); counter-increment: agenda; position: relative; padding-left: 2.4rem; } .prez-agenda-list > li::before { content: counter(agenda) "."; position: absolute; left: 0.6rem; top: 0.45rem; color: var(--muted); font-weight: 600; } .prez-agenda-body { margin-top: 0.5rem; padding: 0.4rem 0 0.2rem; border-top: 1px dashed var(--border); } .prez-agenda-actions { margin-top: 0.4rem; display: flex; gap: 0.3rem; flex-wrap: wrap; } .prez-action-list > li { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.45rem 0.7rem; background: rgba(255,255,255,0.02); } .prez-action-list > li.prio-high { border-left: 3px solid #ff8a8a; } .prez-action-list > li.prio-low { opacity: 0.85; } .prez-action-list > li.is-overdue { background: rgba(220, 90, 90, 0.07); } .prez-action-prio { display: inline-block; background: rgba(255,255,255,0.07); color: var(--muted); border-radius: 999px; padding: 0.05em 0.55em; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.4em; } .prez-action-list > li.prio-high .prez-action-prio { background: rgba(220,90,90,0.2); color: #ffb4b4; } .prez-action-body { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px dashed var(--border); } .prez-action-buttons { margin-top: 0.4rem; display: flex; gap: 0.3rem; flex-wrap: wrap; } .prez-table { width: 100%; } .prez-table td, .prez-table th { vertical-align: top; padding: 0.5rem 0.7rem; } .prez-table tr.result-passed { background: rgba(110,220,150,0.04); } .prez-table tr.result-failed { background: rgba(220,90,90,0.04); } .prez-officer-list > li, .prez-recent-list > li { padding: 0.35rem 0; border-bottom: 1px dashed var(--border); } .prez-inline-form .form-row { display: flex; flex-wrap: wrap; gap: 0.55rem 0.9rem; } .prez-inline-form .field { flex: 1; min-width: 9rem; margin-bottom: 0.4rem; } .prez-inline-form textarea { font-family: inherit; } /* Secretary attendance grid */ .secretary-attendance-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; margin: 0.5rem 0 0.8rem; } @media (max-width: 720px) { .secretary-attendance-grid { grid-template-columns: 1fr; } } .secretary-attendance-list { list-style: none; margin: 0; padding: 0; columns: 2 14rem; column-gap: 1.4rem; } .secretary-attendance-list li { break-inside: avoid; padding: 0.15rem 0; } .secretary-attendance-list label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .secretary-attendance-list input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; } .secretary-attendance-guests textarea { width: 100%; min-height: 9rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.7rem; font: inherit; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; } .secretary-report { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.4rem 1.2rem; } .secretary-report li { padding: 0.3rem 0; border-bottom: 1px dashed var(--border); } /* ============================================================ /members/admin/treasurer.php ============================================================ */ .treasurer-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; margin: 0.6rem 0 1.4rem; } .treasurer-stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; background: rgba(255,255,255,0.03); } .treasurer-stat.is-warn { border-color: rgba(220, 90, 90, 0.55); background: rgba(220, 90, 90, 0.08); } .treasurer-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1; } .treasurer-stat.is-warn .treasurer-stat-value { color: #ff9c9c; } .treasurer-stat-label { font-size: 0.84em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.2rem; } .treasurer-stat-hint { font-size: 0.78em; margin-top: 0.4rem; line-height: 1.35; } .treasurer-section { margin: 1.6rem 0; padding-top: 0.4rem; border-top: 1px solid var(--border); } .treasurer-section h2 { margin: 0.6rem 0 0.6rem; color: var(--accent); } .treasurer-table { width: 100%; } .treasurer-table td, .treasurer-table th { vertical-align: top; padding: 0.5rem 0.7rem; } .treasurer-table tr.is-overdue { background: rgba(220, 90, 90, 0.07); } .treasurer-table tr.is-overdue strong { color: #ff9c9c; } .treasurer-table tr.is-unpaid { background: rgba(220, 90, 90, 0.07); } .treasurer-table tr.is-expiring { background: rgba(232, 177, 98, 0.07); } .treasurer-actions { white-space: nowrap; } .treasurer-actions .btn { padding: 0.22rem 0.55rem; } .treasurer-actions form { display: inline; } .treasurer-upcoming { border: 1px solid rgba(232, 177, 98, 0.4); border-radius: var(--radius); padding: 0.8rem 1rem; background: rgba(232, 177, 98, 0.06); margin-bottom: 1rem; } .treasurer-upcoming-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .treasurer-upcoming-list li { display: grid; grid-template-columns: 11rem 1fr auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-top: 1px dashed var(--border); } .treasurer-upcoming-list li:first-child { border-top: none; } .treasurer-upcoming-list li.is-soon .treasurer-upcoming-when strong { color: var(--accent); } .treasurer-upcoming-list li.is-overdue .treasurer-upcoming-when strong { color: #ff9c9c; } @media (max-width: 720px) { .treasurer-upcoming-list li { grid-template-columns: 1fr; } } .treasurer-add-expense .form-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; } .treasurer-add-expense .field { flex: 1; min-width: 10rem; } /* Drag-to-reorder card grid (Members + Officers sections) */ .card-grid-reorder .card, .card-grid-reorder .dashboard-pill { cursor: grab; user-select: none; transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .card-grid-reorder .card:active, .card-grid-reorder .dashboard-pill:active { cursor: grabbing; } .card-grid-reorder .card.is-dragging, .card-grid-reorder .dashboard-pill.is-dragging { opacity: 0.45; transform: scale(0.98); } .card-grid-reorder .card.is-drag-over, .card-grid-reorder .dashboard-pill.is-drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232, 177, 98, 0.35); } .card-grid-hint { margin-top: 0.5rem; } /* Officer dashboard pills — compact, accent-styled, distinct from regular cards */ .officer-subhead { color: var(--muted); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; margin: 1rem 0 0.5rem; font-weight: 600; } .officer-subhead:first-of-type { margin-top: 0.4rem; } .dashboard-pill-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 0.6rem; } .dashboard-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.1rem; background: linear-gradient(180deg, rgba(232, 177, 98, 0.22), rgba(232, 177, 98, 0.08)); border: 1px solid rgba(232, 177, 98, 0.55); border-radius: 8px; color: var(--accent); text-decoration: none !important; font-size: 0.95em; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; position: relative; } .dashboard-pill:hover { background: linear-gradient(180deg, rgba(232, 177, 98, 0.4), rgba(232, 177, 98, 0.18)); border-color: rgba(232, 177, 98, 0.9); color: var(--accent); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); } .dashboard-pill:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .dashboard-pill .pill-icon { font-size: 1.1em; line-height: 1; } .dashboard-pill .pill-label { line-height: 1; } .dashboard-pill .pill-badge { background: #ff4a4a; color: #fff; border-radius: 999px; padding: 0.1em 0.5em; font-size: 0.75em; font-weight: 700; line-height: 1.2; min-width: 1.1em; text-align: center; box-shadow: 0 0 0 2px rgba(20, 25, 32, 0.95); margin-left: 0.2rem; } /* Admin indicators on the dashboard */ .admin-indicators { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; margin: 0.6rem 0 1.1rem; } .admin-indicator { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; background: rgba(255,255,255,0.03); } .admin-indicator.is-live { border-color: rgba(106,220,150,0.5); background: rgba(106,220,150,0.06); } .admin-indicator-value { font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--text); } .admin-indicator.is-live .admin-indicator-value { color: #6adc96; } .admin-indicator-label { font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.2rem; } .admin-indicator-hint { font-size: 0.78em; margin-top: 0.4rem; line-height: 1.35; } .admin-online-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: #6adc96; box-shadow: 0 0 0.35em rgba(106,220,150,0.7); margin-right: 0.35em; vertical-align: middle; } .admin-online-list ul { list-style: none; margin: 0.4rem 0 0; padding: 0; max-height: 14rem; overflow: auto; } .admin-online-list li { padding: 0.18rem 0; font-size: 0.88em; } .notif-menu-prefs { padding: 0.55rem 0.8rem 0.6rem; border-top: 1px solid var(--border); background: rgba(0,0,0,0.15); font-size: 0.86em; } .notif-prefs-head { color: var(--muted); font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; } .notif-pref-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.18rem 0; cursor: pointer; color: var(--text); } .notif-pref-row input { width: auto; margin: 0; cursor: pointer; } .notif-prefs-status { margin-top: 0.25rem; font-size: 0.82em; } /* ============================================================ Notifications full page ============================================================ */ .notif-page-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .notif-page-tabs a { margin-right: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.92em; text-decoration: none; color: var(--muted); } .notif-page-tabs a.is-active { background: rgba(120,180,255,0.15); color: #cfe1ff; } .notif-tab-badge { display: inline-block; background: #ff4a4a; color: #fff; border-radius: 999px; padding: 0 0.4rem; font-size: 0.78em; margin-left: 0.3rem; } .notif-page-list { list-style: none; margin: 0; padding: 0; } .notif-page-item { display: flex; gap: 0.8rem; padding: 0.8rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.5rem; } .notif-page-item.is-unread { background: rgba(120,180,255,0.08); border-left: 4px solid #6ab4ff; padding-left: calc(1rem - 4px); } .notif-page-item .notif-icon { width: 2rem; font-size: 1.4em; text-align: center; flex-shrink: 0; } .notif-page-item .notif-text { flex: 1; min-width: 0; } .notif-page-item .notif-title { font-weight: 600; font-size: 1em; } .notif-page-item .notif-title a { color: inherit; } .notif-page-item .notif-title a:hover { color: var(--accent); } .notif-page-item .notif-body { color: var(--muted); margin-top: 0.3rem; font-size: 0.92em; } .notif-page-item .notif-when { font-size: 0.8em; margin-top: 0.4rem; } .notif-page-actions { display: flex; flex-direction: column; gap: 0.3rem; flex-shrink: 0; } /* ============================================================ /members/admin/message.php — Quick Message form ============================================================ */ .quick-message-form { max-width: 44rem; } .quick-message-form textarea { background: var(--bg, #0f1419); color: var(--text, #e8e9ea); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; font-family: inherit; width: 100%; line-height: 1.5; resize: vertical; } .qm-channels { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 1rem 0.8rem; margin: 0.5rem 0; background: rgba(255,255,255,0.03); } .qm-channels legend { color: var(--muted); font-size: 0.9em; padding: 0 0.4rem; } .qm-channels label { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; cursor: pointer; } /* ============================================================ Quick Documents (Agenda / Minutes / Sky Report / Newsletter) ============================================================ */ .quick-docs-section { margin: 1rem 0 1.5rem; } .quick-docs-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .quick-docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; } .quick-doc-card { display: flex; gap: 0.7rem; padding: 0.8rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s, transform 0.15s; } .quick-doc-card.is-ready { border-left: 4px solid #6adc96; padding-left: calc(0.8rem - 4px); } .quick-doc-card.is-empty { border-left: 4px solid rgba(140,150,170,0.4); padding-left: calc(0.8rem - 4px); opacity: 0.85; } .quick-doc-icon { flex-shrink: 0; width: 2.4rem; height: 2.4rem; background: rgba(0,0,0,0.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; } .quick-doc-text { flex: 1; min-width: 0; } .quick-doc-text h3 { margin: 0 0 0.1rem; color: var(--accent, #88c4ff); font-size: 1.0rem; } .quick-doc-text .muted { font-size: 0.82em; margin: 0; } .quick-doc-meta { margin: 0.4rem 0; font-size: 0.85em; color: var(--muted); } .quick-doc-upload { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); } .quick-doc-upload summary { cursor: pointer; } .quick-doc-email-toggle { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0; font-size: 0.88em; color: var(--muted); } .quick-doc-email-toggle input { width: auto; } .quickdocs-admin-table { width: 100%; display: block; overflow-x: auto; } .quickdocs-admin-table th, .quickdocs-admin-table td { padding: 0.5rem 0.7rem; vertical-align: middle; } .quickdocs-admin-table .quick-doc-icon { width: 1.6rem; height: 1.6rem; font-size: 1rem; display: inline-flex; vertical-align: middle; } /* ============================================================ Locations page ============================================================ */ .loc-card { margin: 1.2rem 0; padding: 1.4rem 1.6rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); position: relative; } .loc-card h2 { margin: 0 0 0.2rem; color: var(--accent, #88c4ff); } .loc-card .loc-tag { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.95em; } .loc-card .loc-address { margin: 0 0 0.8rem; padding: 0.4rem 0.7rem; border-left: 3px solid var(--accent); background: rgba(232, 177, 98, 0.06); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.92em; color: var(--text); } .loc-card .loc-address a { margin-left: 0.45em; font-size: 0.92em; white-space: nowrap; } .footer-address { color: var(--muted); font-size: 0.84em; margin: 0.3rem 0 0 !important; } .loc-card-cta { background: linear-gradient(135deg, rgba(60,90,160,0.18), rgba(20,30,60,0.4)); border-color: rgba(120,180,255,0.3); text-align: center; } #indian-hill { border-left: 4px solid #ffd476; padding-left: calc(1.6rem - 4px); } #montville { border-left: 4px solid #6ab4ff; padding-left: calc(1.6rem - 4px); } #nassau { border-left: 4px solid #6adc96; padding-left: calc(1.6rem - 4px); } /* ============================================================ Perks list — ensure inline links are visible on the dark bg ============================================================ */ .perks-list a { color: #aedaff; text-decoration: underline; text-decoration-color: rgba(174,218,255,0.4); text-underline-offset: 2px; } .perks-list a:hover { color: #fff; text-decoration-color: #fff; } /* ============================================================ Homepage: Locations showcase + Upcoming events ============================================================ */ .locations-showcase { margin: 2rem 0 1.5rem; } .locations-showcase-head { text-align: center; margin-bottom: 1rem; } .locations-showcase-head h2 { margin: 0 0 0.2rem; } .locations-showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .loc-tile { display: flex; flex-direction: column; background: rgba(28, 35, 44, 0.92); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .loc-tile:hover { transform: translateY(-3px); border-color: rgba(120,180,255,0.45); box-shadow: 0 8px 22px rgba(0,0,0,0.45); text-decoration: none; } .loc-tile-photo { aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: #1a2030; border-bottom: 1px solid var(--border); } .loc-tile-text { padding: 0.8rem 1rem 1rem; } .loc-tile-text h3 { margin: 0 0 0.3rem; color: var(--accent, #88c4ff); font-size: 1.05rem; } .loc-tile-text p { margin: 0; font-size: 0.92em; } /* Locations DETAIL page (/locations.php) — actual photo above body */ .loc-card { overflow: hidden; } .loc-card-img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; background: #0c1220; } /* Homepage "Stay connected" — calendar link + social tiles */ .connect { margin: 2rem 0 1.5rem; } .connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; margin-top: 1rem; } .connect-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 1.25rem 1rem; background: rgba(28, 35, 44, 0.92); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); } .connect-tile:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); } .connect-tile strong { color: var(--text-strong); font-size: 1.05rem; } .connect-tile .muted { font-size: 0.85em; } .connect-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.06); margin-bottom: 0.3rem; } /* Brand-color tints per tile */ .connect-calendar .connect-icon { background: rgba(232, 177, 98, 0.16); color: var(--accent); } .connect-calendar:hover { border-color: rgba(232, 177, 98, 0.55); } .connect-fb .connect-icon { background: rgba(24, 119, 242, 0.18); color: #4a8ff5; } .connect-fb:hover { border-color: rgba(24, 119, 242, 0.55); } .connect-ig .connect-icon { background: rgba(225, 48, 108, 0.18); color: #ff5b8d; } .connect-ig:hover { border-color: rgba(225, 48, 108, 0.55); } .connect-yt .connect-icon { background: rgba(255, 0, 0, 0.18); color: #ff5252; } .connect-yt:hover { border-color: rgba(255, 0, 0, 0.55); } .connect-donate .connect-icon { background: rgba(110, 220, 150, 0.18); color: #6adc96; } .connect-donate:hover { border-color: rgba(110, 220, 150, 0.55); } .connect-meet .connect-icon { background: rgba(140, 180, 255, 0.18); color: #8cb4ff; } .connect-meet:hover { border-color: rgba(140, 180, 255, 0.55); } .connect-meet.is-live .connect-icon { background: rgba(95, 191, 95, 0.22); color: #7bd47b; box-shadow: 0 0 0 1px rgba(95,191,95,0.45), 0 0 16px rgba(95,191,95,0.35); } .connect-meet.is-live { border-color: rgba(95,191,95,0.55); } .connect-live { display: inline-block; margin-left: 0.45rem; font-size: 0.65em; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: #5fbf5f; padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: middle; animation: connect-live-pulse 1.4s ease-in-out infinite; } @keyframes connect-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(95,191,95,0.6); } 50% { box-shadow: 0 0 0 5px rgba(95,191,95,0); } } /* ============================================================ 2FA setup (/2fa-setup.php) — QR + manual key + backup codes ============================================================ */ .totp-setup-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 0.6rem; } .totp-qr-wrap { flex: 0 0 auto; background: #fff; padding: 0.6rem; border-radius: 8px; } .totp-qr-wrap #totp-qr img, .totp-qr-wrap #totp-qr canvas { display: block; } .totp-manual { flex: 1; min-width: 16rem; } .totp-secret-code { display: inline-block; background: rgba(120,180,255,0.18); border: 1px solid rgba(120,180,255,0.4); border-radius: 6px; padding: 0.5rem 0.8rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; letter-spacing: 0.1em; color: #c9e3ff; user-select: all; } .totp-backup-codes { background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.2rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; letter-spacing: 0.06em; line-height: 1.7; user-select: all; color: #ffd476; } /* ========================================================================= Public-features additions (RSVP, outreach newsletter, Image of the Month) Added 2026-05-07. Strictly additive — no existing classes touched. ========================================================================= */ /* ---- Public RSVP form ---- */ .rsvp-page, .rsvp-cancel-page, .iotm-archive-page, .newsletter-signup-page, .newsletter-confirm-page, .newsletter-unsub-page { max-width: 720px; margin: 0 auto; } .rsvp-head { margin-bottom: 1rem; } .rsvp-event-title { margin: 0.4rem 0 0.4rem; font-size: 1.4em; } .rsvp-summary { margin: 0.4rem 0; color: #c5d2dc; white-space: pre-wrap; } .rsvp-head-count { margin-top: 0.4rem; font-size: 0.95em; } .rsvp-form { padding: 1rem 1.2rem; } .rsvp-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; } .rsvp-fineprint { margin-top: 0.6rem; } .rsvp-success h2 { margin-top: 0; } /* RSVP button on calendar event cards */ .upcoming-rsvp { margin: 0.4rem 0 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* ---- Newsletter signup ---- */ .newsletter-form { padding: 1rem 1.2rem; } .newsletter-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; } .newsletter-fineprint { line-height: 1.5; } /* Footer signup widget */ .footer-newsletter { max-width: 540px; margin: 0 auto 1.2rem; padding: 0.8rem 1rem; border: 1px solid var(--border, #333); border-radius: 8px; background: rgba(0,0,0,0.25); } .footer-newsletter label { display: block; font-weight: 600; color: #d8e3ed; margin-bottom: 0.4rem; font-size: 0.95em; } .footer-newsletter-row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: stretch; } .footer-newsletter-row input[type=email] { flex: 1; min-width: 12rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border, #444); border-radius: 5px; background: rgba(255,255,255,0.05); color: inherit; font: inherit; } .footer-newsletter-row .btn { flex: 0 0 auto; } .footer-newsletter-blurb { margin: 0.5rem 0 0; font-size: 0.82em; line-height: 1.4; } /* ---- Image of the Month — homepage feature ---- */ .iotm-feature { margin: 2rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--border, #333); border-radius: 10px; background: rgba(0,0,0,0.28); } .iotm-feature-head h2 { margin: 0 0 0.3rem; } .iotm-feature-head p { margin: 0 0 1rem; } .iotm-feature-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; } @media (max-width: 720px) { .iotm-feature-grid { grid-template-columns: 1fr; } } .iotm-feature-photo { display: block; line-height: 0; border-radius: 8px; overflow: hidden; background: #000; } .iotm-feature-photo img { width: 100%; height: auto; display: block; } .iotm-feature-title { margin: 0; font-size: 1.2em; } .iotm-feature-title a { color: inherit; } .iotm-feature-credit { margin: 0.3rem 0 0.6rem; font-size: 0.9em; } .iotm-feature-citation { margin: 0.5rem 0 0.8rem; color: #c5d2dc; font-size: 0.95em; line-height: 1.5; white-space: pre-wrap; } .iotm-feature-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0 0; } /* ---- Image of the Month — archive grid ---- */ .iotm-grid { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; } .iotm-tile { border: 1px solid var(--border, #333); border-radius: 8px; background: rgba(0,0,0,0.25); overflow: hidden; display: flex; flex-direction: column; } .iotm-tile-month { padding: 0.45rem 0.8rem; font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--border, #333); } .iotm-thumb-link { display: block; line-height: 0; background: #000; } .iotm-thumb { width: 100%; height: auto; display: block; } .iotm-tile-body { padding: 0.8rem 1rem; } .iotm-tile-title { margin: 0; font-size: 1.05em; } .iotm-tile-title a { color: inherit; } .iotm-tile-credit { margin: 0.25rem 0 0.5rem; font-size: 0.86em; } .iotm-tile-citation { color: #c5d2dc; font-size: 0.9em; line-height: 1.45; white-space: pre-wrap; margin: 0.4rem 0; } .iotm-tile-cta { margin: 0.5rem 0 0; font-size: 0.9em; } .iotm-tile-link { font-weight: 500; } /* ============================================================================= Homepage card-link tiles (Who/What/Where/What we do → /we-observe) ========================================================================== */ .card-grid-history .card.card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; } .card-grid-history .card-link-cue { display: block; margin-top: 0.9rem; color: var(--accent); font-size: 0.88em; font-weight: 500; letter-spacing: 0.01em; opacity: 0.85; transition: opacity 0.18s ease, transform 0.18s ease; } .card-grid-history .card-link:hover .card-link-cue { opacity: 1; transform: translateX(2px); } /* ============================================================================= /we-observe — public history page (rendered from the "We Observe" PDF) ========================================================================== */ .we-observe-page { max-width: 880px; margin: 1.5rem auto 4rem; padding: 0 1rem; line-height: 1.7; font-size: 1.02em; } .we-observe-page h1 { font-size: 2.2em; margin: 0 0 0.3rem; color: var(--accent); } .we-observe-page h2 { margin: 2.2rem 0 0.8rem; padding-top: 0.5rem; color: var(--text-strong, #f1f5fa); border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 1.4em; } .we-observe-page h3 { margin: 1.4rem 0 0.5rem; color: var(--accent); font-size: 1.1em; } .we-observe-page blockquote { margin: 1rem 0; padding: 0.4rem 1rem; border-left: 3px solid var(--accent); color: #c5d2dc; font-style: italic; background: rgba(232, 177, 98, 0.04); } .we-observe-page p { margin: 0.7rem 0; } .we-observe-page .we-observe-byline { color: var(--muted); font-size: 1.05em; margin: 0 0 1.5rem; } .we-observe-page .we-observe-dropcap::first-letter { float: left; font-size: 3.2em; line-height: 0.9; margin: 0.05em 0.12em 0 0; color: var(--accent); font-weight: 600; } .we-observe-toc { position: sticky; top: 1rem; margin: 1rem 0 1.5rem; padding: 0.9rem 1.1rem; background: rgba(15, 20, 25, 0.55); border: 1px solid var(--border, #2c3540); border-radius: var(--radius); font-size: 0.92em; } .we-observe-toc strong { display: block; margin-bottom: 0.3rem; color: var(--accent); } .we-observe-toc ol { margin: 0.2rem 0 0 1.1rem; padding: 0; } .we-observe-toc li { margin: 0.15rem 0; } .we-observe-pdf-banner { margin: 1rem 0 2rem; padding: 0.8rem 1rem; background: rgba(232, 177, 98, 0.06); border: 1px solid rgba(232, 177, 98, 0.25); border-radius: var(--radius); font-size: 0.95em; } .home-memorial { margin: 2rem 0 1rem; padding: 0.85rem 1.1rem; background: rgba(15, 20, 25, 0.40); border: 1px solid rgba(232, 177, 98, 0.22); border-left: 3px solid var(--accent); border-radius: var(--radius); text-align: center; font-size: 0.96em; } .home-memorial p { margin: 0; line-height: 1.6; color: var(--text); } .home-memorial-title { color: var(--accent); font-weight: 600; letter-spacing: 0.02em; margin-right: 0.4em; } .home-memorial a { font-weight: 500; } /* ============================================================================= /memorial — In Memoriam public page ========================================================================== */ .memorial-page { max-width: 880px; margin: 1.5rem auto 4rem; padding: 0 1rem; } .memorial-hero h1 { font-size: 2.1em; margin: 0 0 0.4rem; color: var(--accent); } .memorial-hero-blurb { color: #c5d2dc; font-size: 1.05em; margin: 0 0 2rem; } .memorial-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; } .memorial-card { display: grid; grid-template-columns: 140px 1fr; gap: 1.2rem; padding: 1.2rem 1.3rem; background: rgba(28, 35, 44, 0.92); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); } .memorial-card:has(.memorial-photo:empty), .memorial-card:not(:has(.memorial-photo)) { grid-template-columns: 1fr; } .memorial-photo { width: 140px; height: 140px; overflow: hidden; border-radius: 6px; background: rgba(15, 20, 25, 0.55); border: 1px solid var(--border, #2c3540); } .memorial-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .memorial-name { margin: 0 0 0.2rem; color: var(--text-strong, #f1f5fa); font-size: 1.3em; } .memorial-aka { color: var(--muted); font-weight: 400; font-size: 0.9em; margin-left: 0.4rem; } .memorial-meta { margin: 0 0 0.5rem; font-size: 0.92em; display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; } .memorial-meta span { white-space: nowrap; } .memorial-roles { margin: 0.2rem 0 0.6rem; color: var(--accent); font-size: 0.95em; font-style: italic; } .memorial-story p { margin: 0.5rem 0; line-height: 1.65; } .memorial-story em { color: #c5d2dc; } .memorial-footnote { margin-top: 2.5rem; text-align: center; font-size: 0.92em; } .memorial-empty { padding: 1.5rem 1.4rem; } @media (max-width: 640px) { .memorial-card { grid-template-columns: 1fr; } .memorial-photo { width: 100%; height: 220px; } } /* ============================================================================= /members/admin/memorial — officer-side editor ========================================================================== */ .memorial-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; margin: 1rem 0 3rem; } @media (max-width: 980px) { .memorial-admin-grid { grid-template-columns: 1fr; } } .memorial-form label { display: block; margin: 0.7rem 0; } .memorial-form label > span:first-child { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.9rem; } .memorial-form input[type="text"], .memorial-form input[type="number"], .memorial-form input[type="url"], .memorial-form select, .memorial-form textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.7rem; font: inherit; } .memorial-form textarea { min-height: 200px; font-family: inherit; line-height: 1.5; } .memorial-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } @media (max-width: 600px) { .memorial-form-row { grid-template-columns: 1fr; } } .memorial-public { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0.4rem; } .memorial-public input[type="checkbox"] { width: auto; margin: 0; } .memorial-public > span:first-child { display: none; } .memorial-form-actions { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } .memorial-admin-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; } .memorial-admin-list li { padding: 0.65rem 0.8rem; background: rgba(15, 20, 25, 0.30); border: 1px solid var(--border, #2c3540); border-radius: 4px; display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; } .memorial-admin-row { min-width: 0; } .memorial-admin-name { color: var(--text-strong, #f1f5fa); } .memorial-admin-name .badge { display: inline-block; padding: 0.05rem 0.4rem; background: rgba(232, 177, 98, 0.12); border: 1px solid rgba(232, 177, 98, 0.35); border-radius: 3px; color: var(--accent); font-size: 0.75em; margin-left: 0.4rem; } .memorial-admin-meta { font-size: 0.86em; margin-top: 0.2rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; } .memorial-admin-actions { display: flex; gap: 0.4rem; flex-wrap: nowrap; } /* ==================== Announcement strip ==================== Full-width highlighted band between the stat tiles and the Quick documents grid on /members/. Officers post here from /members/admin/announcements.php. */ .announcement-strip { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.25rem 0 1.75rem; } .announcement-card { position: relative; border-radius: 12px; padding: 1rem 1.2rem; background: linear-gradient(135deg, rgba(120, 160, 220, 0.16), rgba(80, 110, 170, 0.10)); border: 1px solid rgba(120, 160, 220, 0.42); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.25); } .announcement-card.announcement-urgent { background: linear-gradient(135deg, rgba(224, 135, 112, 0.22), rgba(180, 80, 60, 0.12)); border-color: rgba(224, 135, 112, 0.55); } .announcement-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.35rem; } .announcement-icon { font-size: 1.4rem; line-height: 1; } .announcement-title { margin: 0; font-size: 1.15rem; line-height: 1.25; } .announcement-body { color: var(--text); line-height: 1.5; margin: 0.25rem 0 0; } .announcement-body a { color: var(--accent); text-decoration: underline; } .announcement-body a:hover { color: var(--text); } .announcement-vote { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed rgba(255,255,255,0.12); } /* Slim inline vote widget — used inside .announcement-vote. The full .vote-card lives on /members/votes.php; this is the trimmed version. */ .vote-inline-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; flex-wrap: wrap; } .vote-inline-question { font-weight: 600; } .vote-inline-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .vote-inline-tally { margin: 0; font-size: 0.92em; } /* ==================== Admin · announcements page ==================== */ .ann-body-toolbar { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; flex-wrap: wrap; } .ann-vote-fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.85rem 0.85rem; } .ann-vote-fieldset legend { padding: 0 0.3rem; font-weight: 600; } .ann-vote-fieldset label.inline { margin-right: 1rem; } .ann-vote-existing select { min-width: 280px; } .ann-admin-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0.5rem 0 1.5rem; } .ann-admin-row { border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; background: rgba(15, 20, 25, 0.55); } .ann-admin-row.ann-urgent { border-color: rgba(224, 135, 112, 0.6); } .ann-admin-row.is-archived { opacity: 0.78; } .ann-admin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.35rem; } .ann-admin-body { line-height: 1.45; } .ann-admin-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; align-items: flex-start; } .ann-admin-actions .inline { display: inline-block; } .ann-admin-actions details.inline summary { list-style: none; cursor: pointer; } .ann-admin-actions details.inline summary::-webkit-details-marker { display: none; } .ann-admin-actions details[open] { width: 100%; } /* Generic small utility used by the admin page. */ .inline { display: inline; } form.inline { display: inline-block; } /* Compact button size used by the admin row actions when .btn-sm isn't enough reduction (the existing .btn-sm already exists earlier in this file). */ .btn-ghost.btn-sm { padding: 0.22rem 0.55rem; font-size: 0.82em; } /* ==================== Tickets ==================== Member submits at /members/tickets, officer triages at /members/admin/tickets. Shared status + priority badges. */ .ticket-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); } .ticket-meta .muted { font-size: 0.88em; } .badge.ticket-status, .badge.ticket-priority { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.18rem 0.55rem; } .ts-open { background: rgba(120, 160, 220, 0.22); color: #cfe1ff; border: 1px solid rgba(120, 160, 220, 0.55); } .ts-progress { background: rgba(255, 200, 70, 0.22); color: #ffe28a; border: 1px solid rgba(255, 200, 70, 0.55); } .ts-resolved { background: rgba(110, 200, 130, 0.22); color: #bce8c4; border: 1px solid rgba(110, 200, 130, 0.55); } .ts-closed { background: rgba(140, 140, 140, 0.22); color: #cccccc; border: 1px solid rgba(140, 140, 140, 0.55); } .ts-wontfix { background: rgba(180, 110, 110, 0.22); color: #e9bcbc; border: 1px solid rgba(180, 110, 110, 0.55); } .tp-critical { background: rgba(255, 80, 80, 0.30); color: #ffd0d0; border: 1px solid rgba(255, 80, 80, 0.65); } .tp-high { background: rgba(255, 160, 80, 0.25); color: #ffd9b3; border: 1px solid rgba(255, 160, 80, 0.55); } .tp-normal { background: rgba(140, 160, 200, 0.18); color: #c9d4e6; border: 1px solid var(--border); } .tp-low { background: rgba(140, 140, 140, 0.18); color: #aaa; border: 1px solid var(--border); } .ticket-body { background: rgba(15, 20, 25, 0.45); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; line-height: 1.55; } .ticket-list { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .ticket-row a { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.85rem; background: rgba(15, 20, 25, 0.55); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); } .ticket-row a:hover { border-color: var(--accent); } .ticket-row.is-closed a { opacity: 0.7; } .ticket-row-id { font-family: monospace; color: var(--muted); font-size: 0.9em; } .ticket-row-title { font-weight: 600; } .ticket-row-meta { font-size: 0.82em; } .ticket-comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; } .ticket-comment { background: rgba(15, 20, 25, 0.45); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; } .ticket-comment header { margin-bottom: 0.35rem; font-size: 0.92em; } .ticket-comment-body { line-height: 1.5; white-space: pre-wrap; } .ticket-comment.is-status { background: rgba(120, 160, 220, 0.06); border-style: dashed; font-style: italic; } .ticket-reply-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; } .ticket-reply-form textarea { width: 100%; min-height: 90px; } .ticket-admin-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1rem 0; padding: 0.75rem 1rem; background: rgba(15, 20, 25, 0.55); border: 1px solid var(--border); border-radius: 8px; } .ticket-admin-toolbar .inline-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .ticket-admin-toolbar label { font-weight: 600; font-size: 0.88em; } .tickets-admin-table td { vertical-align: middle; } .filter-bar a.is-active { color: var(--accent); font-weight: 700; } /* ==================== Changelog ==================== */ .changelog-month { margin: 1.5rem 0; } .changelog-month h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; margin: 1.5rem 0 0.5rem; font-size: 1.2rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .changelog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .changelog-entry { background: rgba(15, 20, 25, 0.5); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 1rem 1.25rem; } .changelog-head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.35rem; font-size: 0.88em; } .changelog-kind { font-weight: 600; } .changelog-title { margin: 0.2rem 0 0.4rem; font-size: 1.15rem; } .changelog-body { line-height: 1.55; } .changelog-body h3, .changelog-body h4 { margin: 1rem 0 0.4rem; } .changelog-body ul, .changelog-body ol { margin: 0.3rem 0 0.6rem 1.2rem; } .changelog-body code { background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: 3px; padding: 0 0.3rem; font-size: 0.92em; } /* Stripe-fee disclosure box used on /join, /welcome, /members/billing, and /donate. Shows dues + fee + total breakdown; the user can't opt out of the fee (always added so 100% of dues reaches CVAS). */ .fee-disclosure { background: rgba(120, 160, 220, 0.10); border: 1px solid rgba(120, 160, 220, 0.35); border-radius: 8px; padding: 0.75rem 1rem; margin: 0.75rem 0; } .fee-disclosure .fee-line { display: flex; justify-content: space-between; align-items: baseline; padding: 0.15rem 0; font-size: 0.95em; } .fee-disclosure .fee-line-total { border-top: 1px solid var(--border); margin-top: 0.35rem; padding-top: 0.45rem; font-weight: 700; font-size: 1em; } .fee-disclosure .fee-explain { margin: 0.5rem 0 0; font-size: 0.82em; line-height: 1.4; } /* HTML-overlay catalog labels for the Sky Finder + FOV picker. Aladin renders its native labels to , where CSS text-shadow doesn't apply, so we draw labels as positioned elements inside this absolute-positioned container and let real CSS handle the black outline. Pointer-events:none so clicks pass through to Aladin. */ .cvas-html-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 100; } .cvas-html-label { position: absolute; top: 0; left: 0; transform: translate(-9999px, -9999px); /* off-screen until first update */ pointer-events: none; user-select: none; white-space: nowrap; color: #ffd84d; font: bold 12px/1 sans-serif; letter-spacing: 0.01em; will-change: transform; /* Heavy 8-direction outline survives any background — dark sky AND bright deep-sky imagery (galaxies + emission nebulae). */ text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 2px 2px 0 #000, 0 0 3px #000; } /* "Online right now" list — path column. Inline-truncate long paths so the row stays one line; full path stays available via the link's href on hover. */ .admin-online-where { font-size: 0.82em; } .admin-online-where a { display: inline-block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* ==================== Blog (public) ==================== */ .blog-hero { margin: 1.25rem 0 1.5rem; } .blog-hero h1 { margin: 0 0 0.25rem; } .blog-filter { margin: 0 0 1.25rem; padding: 0.6rem 1rem; background: rgba(120, 160, 220, 0.10); border-left: 3px solid var(--accent); border-radius: 6px; } .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 2rem; } @media (max-width: 800px) { .blog-layout { grid-template-columns: 1fr; } .blog-side { order: 2; } } .blog-main { min-width: 0; } .blog-side { display: flex; flex-direction: column; gap: 1.25rem; } .blog-side-block h3 { font-size: 0.95rem; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .blog-tag-cloud { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .blog-tag-pill { display: inline-block; padding: 0.15rem 0.55rem; background: rgba(120, 160, 220, 0.16); border: 1px solid rgba(120, 160, 220, 0.35); border-radius: 999px; font-size: 0.82em; color: var(--text); text-decoration: none; line-height: 1.6; } .blog-tag-pill:hover { background: rgba(120, 160, 220, 0.30); } .blog-card { display: flex; gap: 1.2rem; margin: 0 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .blog-card:last-of-type { border-bottom: 0; } .blog-card-hero { flex: 0 0 220px; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; background: rgba(0,0,0,0.3); } .blog-card-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card-body { flex: 1 1 auto; min-width: 0; } .blog-card-body h2 { margin: 0 0 0.35rem; font-size: 1.35rem; line-height: 1.25; } .blog-card-body h2 a { color: var(--text); text-decoration: none; } .blog-card-body h2 a:hover { color: var(--accent); } .blog-excerpt { margin: 0.4rem 0 0.6rem; line-height: 1.5; } .blog-readmore { color: var(--accent); } .blog-meta { font-size: 0.85em; } .blog-meta .blog-tag-pill { font-size: 0.78em; padding: 0 0.4rem; } @media (max-width: 600px) { .blog-card { flex-direction: column; gap: 0.85rem; } .blog-card-hero { flex: 0 0 auto; width: 100%; } } .blog-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--border); } /* Single post */ .blog-article { max-width: 760px; margin: 0 auto 2rem; } .blog-preview-banner { background: rgba(255, 200, 70, 0.12); border: 1px solid rgba(255, 200, 70, 0.45); border-radius: 8px; padding: 0.65rem 0.9rem; margin-bottom: 1rem; } .blog-article-head h1 { margin: 0.2rem 0 0.6rem; font-size: 2rem; line-height: 1.15; } .blog-dek { font-size: 1.1rem; color: var(--muted); margin: 0 0 1rem; line-height: 1.4; } .blog-hero-img { margin: 1rem 0 1.5rem; } .blog-hero-img img { width: 100%; height: auto; border-radius: 10px; display: block; } .blog-hero-img figcaption { margin-top: 0.4rem; font-size: 0.85em; text-align: center; } .blog-body { font-size: 1.05rem; line-height: 1.65; } .blog-body p { margin: 0 0 1rem; } .blog-body h3, .blog-body h4, .blog-body h5 { margin: 1.6rem 0 0.5rem; line-height: 1.25; } .blog-body h3 { font-size: 1.45rem; } .blog-body h4 { font-size: 1.2rem; } .blog-body img.blog-img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.6rem 0; display: block; } .blog-body a { color: var(--accent); } .blog-body ul, .blog-body ol { margin: 0 0 1rem 1.2rem; } .blog-body blockquote { border-left: 3px solid var(--accent); margin: 1rem 0; padding: 0.4rem 0 0.4rem 1rem; color: var(--muted); } .blog-body pre { background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem 1rem; overflow-x: auto; } .blog-tags-row { margin: 1.5rem 0; } .blog-tags-row .blog-tag-pill { margin-right: 0.3rem; } .blog-share { margin: 0.6rem 0 1.5rem; font-size: 0.9em; } .blog-share a { color: var(--accent); } .blog-related { max-width: 760px; margin: 0 auto 2rem; } .blog-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; } .blog-related-card { display: block; border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--text); background: rgba(15, 20, 25, 0.55); border: 1px solid var(--border); } .blog-related-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; } .blog-related-card span { display: block; padding: 0.6rem 0.8rem; font-size: 0.92em; line-height: 1.3; } .blog-related-card:hover { border-color: var(--accent); } .blog-comments { max-width: 760px; margin: 0 auto 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .blog-comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .blog-comment { background: rgba(15, 20, 25, 0.45); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; } .blog-comment-head { margin-bottom: 0.35rem; } .blog-comment-body { line-height: 1.5; } .blog-comment-form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; } .blog-comment-form textarea { width: 100%; min-height: 90px; } /* ==================== Blog (admin) ==================== */ .blog-admin-table td { vertical-align: top; } .blog-edit-form { max-width: 820px; } .blog-edit-form .form-actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; } .blog-body-toolbar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; } .blog-hero-preview { margin-bottom: 0.5rem; } .blog-hero-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid var(--border); display: block; } /* Non-member teaser variant of the Astrospheric Pro hint — slight accent border + join-link emphasis to read as a perk hook rather than info. */ .astrospheric-pro-hint-teaser { background: linear-gradient(135deg, rgba(255, 213, 106, 0.08) 0%, rgba(22, 28, 38, 0) 60%); border: 1px solid rgba(255, 213, 106, 0.28); border-radius: var(--radius, 8px); padding: 0.75rem 1rem; } .astrospheric-pro-hint-teaser a { font-weight: 600; } /* Secondary line under the Observing! / Not tonight pill on the members dashboard Tonight card. Lets the pill stay compact while the location or reason text wraps or ellipsises on its own line. */ .stat-tonight-detail { display: block; margin-top: 0.25rem; font-size: 0.82em; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; word-wrap: break-word; } /* What are you bringing? fieldset on the RSVP form — amber accent so it reads as a section the user needs to look at, not skip. */ .rsvp-bring-group { margin: 1rem 0; padding: 1rem 1.1rem 0.6rem 1.1rem; border: 1px solid rgba(255, 213, 106, 0.45); background: linear-gradient(135deg, rgba(255, 213, 106, 0.07) 0%, rgba(22, 28, 38, 0) 60%); border-radius: 8px; } .rsvp-bring-group > legend { padding: 0 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.95rem; } .rsvp-bring-group .rsvp-bring-help { margin: 0 0 0.75rem 0; font-size: 0.85em; } .rsvp-bring-group .req { color: var(--accent); } /* /welcome agree gate — final amber card with the orientation acknowledgement checkbox. Must stand out so members don't miss it. */ .welcome-accept-gate { margin-top: 2rem; } .welcome-accept-card { padding: 1.5rem; border: 1px solid rgba(255, 213, 106, 0.5); background: linear-gradient(135deg, rgba(255, 213, 106, 0.10) 0%, rgba(22, 28, 38, 0) 60%); border-radius: 10px; } .welcome-accept-checkbox { display: flex; align-items: flex-start; gap: 0.6em; cursor: pointer; padding: 0.5rem 0; } .welcome-accept-checkbox input[type=checkbox] { width: 1.25em; height: 1.25em; margin-top: 0.15em; flex: 0 0 auto; accent-color: var(--accent); } .welcome-accept-checkbox span { line-height: 1.45; } .welcome-accept-actions { margin-top: 1rem; } /* Blurred code value for users without a completed tour. The value is still in the DOM (officers can demo unblur in dev tools), but it's visually obscured and an overlay message explains why. */ .code-card-blurred { filter: blur(8px); user-select: none; pointer-events: none; } .code-card-locked { cursor: not-allowed; opacity: 0.96; } .code-card-locked .code-card-lockmsg { margin-top: 0.45rem; color: rgba(255, 213, 106, 0.95); font-size: 0.85em; line-height: 1.35; } /* Top-of-page red-bordered banner: 'creating an account is NOT membership' */ .join-membership-banner { margin: 1.25rem 0 1.5rem; } .join-membership-banner-inner { background: linear-gradient(135deg, rgba(220,90,90,0.10) 0%, rgba(22,28,38,0) 60%); border: 1px solid rgba(220,90,90,0.55); border-left: 5px solid #ef6c6c; border-radius: 8px; padding: 1rem 1.2rem; } .join-membership-banner-inner strong { display: block; font-size: 1.05rem; margin-bottom: 0.3rem; color: #ef9a9a; } .join-membership-banner-inner p { margin: 0; line-height: 1.4; } /* Read-everything checkbox above pay buttons */ .read-everything-checkbox { display: flex; align-items: flex-start; gap: 0.55em; background: rgba(255,213,106,0.08); border: 1px solid rgba(255,213,106,0.45); border-radius: 6px; padding: 0.65rem 0.85rem; margin: 0.75rem 0; cursor: pointer; text-align: left; line-height: 1.4; } .read-everything-checkbox input[type=checkbox] { width: 1.15em; height: 1.15em; margin-top: 0.15em; flex: 0 0 auto; accent-color: var(--accent); } .read-everything-checkbox span { font-size: 0.92em; } /* === Prospect list — full-width card layout (replaces nested table) === */ .prospect-list { display: flex; flex-direction: column; gap: 0.45rem; } .prospect-list-header, .prospect-summary { display: grid; grid-template-columns: minmax(8rem, 1.4fr) /* Name */ minmax(11rem, 2fr) /* Contact */ minmax(7rem, 1fr) /* Source */ minmax(8rem, 1fr) /* Status */ minmax(7rem, 1fr) /* Last touched */ 2rem; /* Chevron / actions */ gap: 0.75rem; align-items: center; padding: 0.5rem 0.85rem; } .prospect-list-header { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.35rem; } .prospect-card { background: rgba(20,30,55,0.45); border: 1px solid rgba(120,180,255,0.18); border-radius: 8px; overflow: hidden; } .prospect-card[open] { background: rgba(20,30,55,0.65); border-color: rgba(120,180,255,0.35); } .prospect-summary { cursor: pointer; list-style: none; user-select: none; transition: background 0.15s ease; } .prospect-summary::-webkit-details-marker { display: none; } .prospect-summary:hover { background: rgba(120,180,255,0.06); } .prospect-summary-cell { font-size: 0.92em; line-height: 1.35; min-width: 0; word-break: break-word; } .prospect-summary-cell a { word-break: break-all; } .prospect-summary-chev { text-align: center; color: var(--muted); transition: transform 0.18s ease; } .prospect-card[open] .prospect-chev { transform: rotate(180deg); display: inline-block; } .prospect-card-body { padding: 0.9rem 1rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(15,22,40,0.45); } .prospect-card-body h4 { margin: 0 0 0.55rem 0; font-size: 0.95rem; color: var(--accent); } .prospect-card-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 900px) { .prospect-card-cols { grid-template-columns: 1fr; gap: 1.2rem; } .prospect-list-header { display: none; } .prospect-summary { grid-template-columns: 1fr auto; gap: 0.4rem 0.75rem; padding: 0.75rem 0.9rem; } .prospect-summary-cell::before { content: attr(data-label) ":"; display: inline-block; font-size: 0.78em; color: var(--muted); margin-right: 0.4em; text-transform: uppercase; letter-spacing: 0.05em; } .prospect-summary-chev { grid-row: 1; grid-column: 2; } } .prospect-quick-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed rgba(255,255,255,0.08); } .prospect-delete-btn { color: #ef9a9a; } /* Contact history — stacked entries, full width */ .contact-log { list-style: none; padding: 0; margin: 0 0 0.9rem 0; display: flex; flex-direction: column; gap: 0.5rem; } .contact-log-entry { background: rgba(15,20,30,0.55); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 0.55rem 0.75rem; } .contact-log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.82em; color: var(--muted); margin-bottom: 0.25rem; } .contact-log-meta .contact-log-when { color: var(--text-strong); font-weight: 600; } .contact-log-meta .contact-log-by { color: var(--text); } .contact-log-meta .contact-log-method { color: var(--accent); } .contact-log-meta .contact-log-outcome { color: var(--text); } .contact-log-del { margin-left: auto; margin-bottom: 0; } .contact-log-del .btn-link-danger { background: transparent; border: 0; color: #ef6c6c; cursor: pointer; font-size: 1em; line-height: 1; padding: 0 0.25rem; } .contact-log-notes { font-size: 0.92em; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; } .prospect-log-attempt { background: rgba(255,213,106,0.06); border: 1px solid rgba(255,213,106,0.25); border-radius: 6px; padding: 0.7rem 0.85rem; } .prospect-log-attempt > strong { display: block; margin-bottom: 0.45rem; font-size: 0.92em; color: var(--accent); } /* Contact-actions bar at the top of each expanded prospect card. */ .prospect-actions-bar { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.85rem 0; padding: 0.55rem 0.7rem; background: rgba(120,180,255,0.06); border: 1px solid rgba(120,180,255,0.2); border-radius: 6px; } .prospect-actions-bar .btn { font-size: 0.85em; } /* In-page email composer (collapsible). */ .prospect-email-composer { margin: 0 0 1rem 0; border: 1px solid rgba(154,200,151,0.35); border-radius: 6px; background: rgba(154,200,151,0.05); } .prospect-email-composer > summary { cursor: pointer; padding: 0.6rem 0.85rem; font-weight: 600; color: var(--success); font-size: 0.95em; list-style: none; } .prospect-email-composer > summary::-webkit-details-marker { display: none; } .prospect-email-composer[open] > summary { border-bottom: 1px solid rgba(154,200,151,0.25); } .prospect-email-composer > form { padding: 0.75rem 0.9rem 0.9rem 0.9rem; } .prospect-email-composer textarea { min-height: 8rem; font-family: inherit; line-height: 1.4; } /* Telescopius-style stargazing-conditions grid (Open-Meteo hourly) */ .sky-stargazing { margin: 2rem 0 1.5rem 0; } .sky-stargazing-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.75rem -0.5rem 0; padding: 0 0.5rem; } .sky-stargazing-grid { border-collapse: separate; border-spacing: 1px; font-size: 0.78em; min-width: 100%; table-layout: fixed; } .sky-stargazing-grid th, .sky-stargazing-grid td { padding: 0; text-align: center; } .sky-stargazing-grid th.sg-hour { width: 1.85rem; min-width: 1.85rem; padding: 0.35rem 0; background: rgba(15, 22, 40, 0.6); border-radius: 3px; font-weight: 500; color: var(--text); } .sky-stargazing-grid th.sg-hour.is-night { background: rgba(10, 14, 22, 0.85); color: #cbd5e8; } .sky-stargazing-grid th.sg-hour.is-day { background: rgba(255, 213, 106, 0.10); color: #ffd476; } .sky-stargazing-grid .sg-day { font-size: 0.92em; opacity: 0.85; } .sky-stargazing-grid .sg-h { font-size: 0.78em; opacity: 0.75; line-height: 1; } .sky-stargazing-grid td.sg-label { text-align: left; padding: 0.3rem 0.6rem 0.3rem 0; font-weight: 600; color: var(--text); white-space: nowrap; background: transparent; min-width: 8rem; position: sticky; left: 0; z-index: 2; } .sky-stargazing-grid td.sg-label.sg-sublabel { font-weight: 400; color: var(--muted); padding-left: 1rem; font-size: 0.9em; } .sky-stargazing-grid td.sg-cell { width: 1.85rem; height: 1.8rem; border-radius: 3px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.92); text-shadow: 0 1px 1px rgba(0,0,0,0.55); font-size: 0.92em; } .sky-stargazing-grid td.sg-good { background: rgba(110, 195, 120, 0.62); } .sky-stargazing-grid td.sg-ok { background: rgba(238, 200, 80, 0.62); color: #1a1408; text-shadow: none; } .sky-stargazing-grid td.sg-bad { background: rgba(220, 80, 80, 0.62); } .sky-stargazing-grid td.sg-temp { background: rgba(120, 180, 255, 0.18); } /* Astrospheric embed loading skeleton — visual placeholder while the third-party JS bundle + their API call complete. Reduces the "blank flash" of the embed re-initializing on every /sky page load. */ .astrospheric-skeleton { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.1rem 1.2rem 1rem 1.2rem; min-height: 18rem; background: linear-gradient(180deg, rgba(20,30,55,0.45) 0%, rgba(12,18,30,0.55) 100%); border: 1px solid rgba(120,180,255,0.18); border-radius: 8px; } .astrospheric-skeleton-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .astrospheric-skeleton-chart { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.3rem; } .askel-row { display: flex; align-items: center; gap: 0.7rem; } .askel-row-label { flex: 0 0 5.5rem; height: 0.85rem; border-radius: 3px; background: rgba(255,255,255,0.08); } .askel-row-strip { flex: 1; height: 1.4rem; border-radius: 3px; background: linear-gradient( 90deg, rgba(154, 200, 151, 0.18) 0%, rgba(154, 200, 151, 0.32) 20%, rgba(238, 200, 80, 0.28) 45%, rgba(220, 80, 80, 0.22) 65%, rgba(154, 200, 151, 0.28) 85%, rgba(154, 200, 151, 0.18) 100% ); } .askel-bar { height: 0.9rem; border-radius: 3px; background: rgba(255,255,255,0.08); } .askel-bar-w40 { width: 40%; } .askel-bar-w20 { width: 18%; } .astrospheric-skeleton-foot { margin-top: 0.4rem; text-align: center; color: var(--muted); font-size: 0.86em; letter-spacing: 0.04em; } /* Shimmer: a moving highlight sweep across every skeleton bar so the user perceives "loading" rather than "broken." */ .astrospheric-skeleton .askel-bar, .astrospheric-skeleton .askel-row-label, .astrospheric-skeleton .askel-row-strip { position: relative; overflow: hidden; } .astrospheric-skeleton .askel-bar::after, .astrospheric-skeleton .askel-row-label::after, .astrospheric-skeleton .askel-row-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100% ); transform: translateX(-100%); animation: askel-shimmer 1.6s ease-in-out infinite; } .astrospheric-skeleton .askel-row:nth-child(2) .askel-row-strip::after { animation-delay: 0.12s; } .astrospheric-skeleton .askel-row:nth-child(3) .askel-row-strip::after { animation-delay: 0.24s; } .astrospheric-skeleton .askel-row:nth-child(4) .askel-row-strip::after { animation-delay: 0.36s; } .astrospheric-skeleton .askel-row:nth-child(5) .askel-row-strip::after { animation-delay: 0.48s; } @keyframes askel-shimmer { 0% { transform: translateX(-100%); } 60% { transform: translateX(100%); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .astrospheric-skeleton .askel-bar::after, .astrospheric-skeleton .askel-row-label::after, .astrospheric-skeleton .askel-row-strip::after { animation: none; } } /* Weather tile — Telescopius-style 7-night forecast next to the Weather card. Per-row bars use a CSS custom property --score (0-100). The bar is split green (good portion) / red (bad portion) at the score, with a white tick sitting on the divider so the eye can read both the value and the share. */ .sky-weather-tile h3 { display: flex; align-items: center; gap: 0.5rem; } .sky-weather-tile .weather-tile-more { margin-left: auto; font-size: 0.72em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #e08a8a; text-decoration: none; border-bottom: 1px solid transparent; } .sky-weather-tile .weather-tile-more:hover { border-bottom-color: #e08a8a; } .sky-weather-tile .weather-tile-sub { font-size: 0.82em; margin: -0.2rem 0 0.6rem 0; text-align: center; opacity: 0.85; } .sky-weather-tile .weather-tile-head { display: grid; grid-template-columns: 5.2rem repeat(3, 1fr); gap: 0.55rem; padding: 0 0.05rem 0.35rem; font-size: 0.72em; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,0.06); } .sky-weather-tile .wt-col-label { text-align: center; letter-spacing: 0.03em; } .sky-weather-tile .weather-tile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; } .sky-weather-tile .weather-tile-row { display: grid; grid-template-columns: 5.2rem repeat(3, 1fr); gap: 0.55rem; align-items: center; padding: 0.42rem 0.3rem; border-radius: 0.4rem; } .sky-weather-tile .weather-tile-row + .weather-tile-row { border-top: 1px solid rgba(255,255,255,0.04); } .sky-weather-tile .weather-tile-row-today { background: rgba(255,255,255,0.04); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .sky-weather-tile .wt-day { display: flex; align-items: center; gap: 0.45rem; color: var(--fg); font-weight: 500; font-size: 0.92em; white-space: nowrap; } .sky-weather-tile .wt-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; color: #cfd8e3; opacity: 0.92; } .sky-weather-tile .weather-tile-row-today .wt-icon { color: #fff; } .sky-weather-tile .wt-svg { display: block; } .sky-weather-tile .weather-tile-foot { margin: 0.7rem 0 0; font-size: 0.72em; text-align: center; letter-spacing: 0.02em; } /* The bar gauge — green-red split with a vertical tick at the score. */ .tcl-bar { --score: 50%; --good: #6ab07a; --bad: #c9596a; position: relative; display: inline-block; height: 0.5rem; border-radius: 0.4rem; background: linear-gradient( to right, var(--good) 0%, var(--good) var(--score), var(--bad) var(--score), var(--bad) 100% ); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); } .tcl-bar-tick { position: absolute; top: -2px; left: var(--score); transform: translateX(-50%); width: 2px; height: calc(100% + 4px); background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); } @media (max-width: 540px) { .sky-weather-tile .weather-tile-head, .sky-weather-tile .weather-tile-row { grid-template-columns: 4.4rem repeat(3, 1fr); gap: 0.35rem; } .sky-weather-tile .wt-day { font-size: 0.85em; } } /* Hourly stargazing scrubber — replaces the old 24-column table on /sky. Single slider + per-hour detail panel. All bars use a single goodness colour scheme (.sg-rating-good/.sg-rating-ok/.sg-rating-bad) so adding a new metric just means adding one .sg-metric block. */ .sg-scrubber { background: linear-gradient(180deg, rgba(20,30,55,0.45) 0%, rgba(10,15,25,0.55) 100%); border: 1px solid rgba(120,180,255,0.18); border-radius: 10px; padding: 1.2rem 1.3rem 1.1rem; margin: 0.6rem 0 0.4rem; } .sg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 0.7rem; margin-bottom: 0.5rem; } .sg-head-when { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .sg-head-hour { font-size: 1.7rem; font-weight: 600; color: var(--fg); letter-spacing: 0.02em; } .sg-head-day { font-size: 1.05rem; color: var(--muted); font-weight: 500; } .sg-head-rel { font-size: 0.85rem; color: var(--muted); font-style: italic; } .sg-head-rating { display: flex; align-items: center; gap: 0.85rem; } .sg-rating-badge { padding: 0.32rem 0.85rem; border-radius: 999px; font-weight: 600; font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; } .sg-rating-badge.sg-rating-great { background: rgba(40,128,55,0.55); color: #d2f0d7; border-color: rgba(40,128,55,0.85); } .sg-rating-badge.sg-rating-good { background: rgba(127,207,145,0.35); color: #b4e3ba; border-color: rgba(127,207,145,0.6); } .sg-rating-badge.sg-rating-ok { background: rgba(232,200,90,0.32); color: #f1d97a; border-color: rgba(232,200,90,0.55); } .sg-rating-badge.sg-rating-poor { background: rgba(232,140,158,0.40); color: #ffd0d9; border-color: rgba(232,140,158,0.7); } .sg-rating-badge.sg-rating-bad { background: rgba(150,30,45,0.55); color: #ffb5bf; border-color: rgba(150,30,45,0.85); } .sg-rating-badge.sg-rating-unavailable { background: rgba(255,255,255,0.05); color: var(--muted); border-color: rgba(255,255,255,0.1); } .sg-rating-score { font-size: 1.15rem; color: var(--muted); font-variant-numeric: tabular-nums; } .sg-rating-score-unit { font-size: 0.75em; opacity: 0.7; margin-left: 0.1rem; } /* Slider block — the rainbow strip + range input + axis labels. */ .sg-slider-block { position: relative; padding: 0.6rem 0 1.5rem; } .sg-slider-strip { position: relative; height: 0.72rem; border-radius: 0.4rem; background-repeat: no-repeat; background-size: 100% 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); margin-bottom: -0.72rem; /* slider sits on top */ } .sg-slider { position: relative; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 0.72rem; margin: 0; z-index: 2; } .sg-slider:focus { outline: none; } .sg-slider::-webkit-slider-runnable-track { height: 0.72rem; background: transparent; border-radius: 0.4rem; } .sg-slider::-moz-range-track { height: 0.72rem; background: transparent; border-radius: 0.4rem; } .sg-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.05rem; height: 1.55rem; margin-top: -0.42rem; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.5); cursor: grab; border: none; } .sg-slider::-moz-range-thumb { width: 1.05rem; height: 1.55rem; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.5); cursor: grab; border: none; } .sg-slider:active::-webkit-slider-thumb { cursor: grabbing; } .sg-slider:active::-moz-range-thumb { cursor: grabbing; } .sg-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #5aa8ff, 0 0 0 4px rgba(90,168,255,0.3), 0 2px 6px rgba(0,0,0,0.5); } .sg-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #5aa8ff, 0 0 0 4px rgba(90,168,255,0.3), 0 2px 6px rgba(0,0,0,0.5); } .sg-slider-axis { position: relative; height: 1.4rem; margin-top: 0.55rem; } .sg-axis-tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 0.72em; color: var(--muted); line-height: 1.05; text-align: center; } .sg-axis-day { font-weight: 600; color: var(--fg); opacity: 0.85; } .sg-axis-hour { font-size: 0.92em; opacity: 0.7; } /* Metric tiles. */ .sg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; margin-top: 0.4rem; } .sg-metric { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); border-radius: 7px; padding: 0.6rem 0.75rem 0.65rem; display: flex; flex-direction: column; gap: 0.4rem; } .sg-metric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .sg-metric-label { font-size: 0.78em; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; } .sg-metric-value { font-size: 1.32rem; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.05; } .sg-metric-suffix { font-size: 0.62em; font-weight: 500; color: var(--muted); margin-left: 0.05rem; } .sg-metric-bar { position: relative; height: 0.42rem; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; } .sg-metric-fill { display: block; height: 100%; width: 0%; transition: width 200ms ease, background-color 200ms ease; background: rgba(255,255,255,0.2); } .sg-metric.sg-metric-temp, .sg-metric.sg-metric-gust { border-style: dashed; } .sg-metric-sub { font-size: 0.78em; color: var(--muted); } .sg-metric-bar.sg-rating-great .sg-metric-fill { background: linear-gradient(90deg,#3f9a52,#5cb070); } .sg-metric-bar.sg-rating-good .sg-metric-fill { background: linear-gradient(90deg,#7fcf91,#9ddca9); } .sg-metric-bar.sg-rating-ok .sg-metric-fill { background: linear-gradient(90deg,#e0b94a,#f0d171); } .sg-metric-bar.sg-rating-poor .sg-metric-fill { background: linear-gradient(90deg,#e07a8a,#ec96a4); } .sg-metric-bar.sg-rating-bad .sg-metric-fill { background: linear-gradient(90deg,#a83e4c,#c2566a); } .sg-metric-bar.sg-rating-unavailable .sg-metric-fill { background: rgba(255,255,255,0.1); } .sg-foot { margin: 0.9rem 0 0; font-size: 0.82em; line-height: 1.45; } /* Compact tweaks for narrow viewports. */ @media (max-width: 640px) { .sg-scrubber { padding: 0.95rem 0.9rem 0.85rem; } .sg-head-hour { font-size: 1.4rem; } .sg-head-rating { width: 100%; justify-content: space-between; } .sg-metric-value { font-size: 1.18rem; } .sg-axis-day { font-size: 0.7em; } .sg-axis-hour { font-size: 0.65em; } .sg-slider-axis { height: 1.6rem; } } /* === New /sky cards: space weather, air quality, meteor showers, NWS === */ /* Pills used across multiple cards. */ .kp-pill, .aqi-pill { display: inline-block; min-width: 2.4rem; padding: 0.18rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.95em; text-align: center; letter-spacing: 0.02em; border: 1px solid transparent; font-variant-numeric: tabular-nums; } .kp-pill.kp-quiet { background: rgba(106,176,122,0.18); color: #b4e3ba; border-color: rgba(106,176,122,0.4); } .kp-pill.kp-unsettled { background: rgba(232,200,90,0.18); color: #f1d97a; border-color: rgba(232,200,90,0.4); } .kp-pill.kp-minor { background: rgba(232,150,90,0.22); color: #f1c08a; border-color: rgba(232,150,90,0.45); } .kp-pill.kp-major { background: rgba(201,89,106,0.25); color: #e7a4ad; border-color: rgba(201,89,106,0.55); } .kp-pill.kp-unknown { background: rgba(255,255,255,0.05); color: var(--muted); border-color: rgba(255,255,255,0.12); } .aqi-pill.aqi-good { background: rgba(106,176,122,0.18); color: #b4e3ba; border-color: rgba(106,176,122,0.4); } .aqi-pill.aqi-moderate { background: rgba(232,200,90,0.20); color: #f1d97a; border-color: rgba(232,200,90,0.45); } .aqi-pill.aqi-sensitive { background: rgba(232,150,90,0.22); color: #f1c08a; border-color: rgba(232,150,90,0.5); } .aqi-pill.aqi-unhealthy { background: rgba(201,89,106,0.25); color: #e7a4ad; border-color: rgba(201,89,106,0.55); } .aqi-pill.aqi-very_unhealthy { background: rgba(150,80,180,0.30); color: #d8a4e7; border-color: rgba(150,80,180,0.5); } .aqi-pill.aqi-hazardous { background: rgba(120,50,30,0.40); color: #e0a78f; border-color: rgba(120,50,30,0.6); } .aqi-pill.aqi-great { background: rgba(140,210,160,0.25); color: #c2eccc; border-color: rgba(140,210,160,0.5); } .aqi-pill.aqi-ok { background: rgba(232,200,90,0.18); color: #f1d97a; border-color: rgba(232,200,90,0.4); } .aqi-pill.aqi-poor { background: rgba(232,150,90,0.22); color: #f1c08a; border-color: rgba(232,150,90,0.45); } .aqi-pill.aqi-bad { background: rgba(201,89,106,0.25); color: #e7a4ad; border-color: rgba(201,89,106,0.55); } .aqi-pill.aqi-unknown { background: rgba(255,255,255,0.05); color: var(--muted); border-color: rgba(255,255,255,0.12); } /* Meteor shower list. */ .meteor-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .meteor-row { border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 0.55rem 0.7rem; background: rgba(255,255,255,0.02); } .meteor-row-peak { border-color: rgba(232,200,90,0.4); background: linear-gradient(180deg, rgba(232,200,90,0.10) 0%, rgba(232,200,90,0.04) 100%); } .meteor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .meteor-name { font-weight: 600; color: var(--fg); } .meteor-zhr { font-size: 0.78em; color: var(--muted); font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.05); padding: 0.12rem 0.45rem; border-radius: 4px; } .meteor-meta { font-size: 0.83em; margin-top: 0.25rem; } .meteor-peak.peak-soon { color: #f1d97a; font-weight: 600; } .meteor-moon { font-weight: 600; } .meteor-moon-great { color: #b4e3ba; } .meteor-moon-good { color: #c2eccc; } .meteor-moon-ok { color: #f1d97a; } .meteor-moon-poor { color: #f1c08a; } .meteor-moon-bad { color: #e7a4ad; } /* NWS forecast periods. */ .nws-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .nws-period { border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 0.55rem 0.7rem; background: rgba(255,255,255,0.02); } .nws-period-first { border-color: rgba(120,180,255,0.3); background: linear-gradient(180deg, rgba(120,180,255,0.07) 0%, rgba(120,180,255,0.02) 100%); } .nws-period-night { background: rgba(30,40,70,0.18); } .nws-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .nws-name { font-weight: 600; color: var(--fg); } .nws-temp { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); } .nws-short { font-size: 0.92em; margin-top: 0.18rem; } .nws-detail { font-size: 0.82em; margin-top: 0.4rem; line-height: 1.45; } /* Space-weather grid is just sky-grid with a hint of breathing room. */ .sky-space-grid dt, .sky-aqi-grid dt { padding-top: 0.3rem; } .sky-space-grid dt:first-of-type, .sky-aqi-grid dt:first-of-type { padding-top: 0; } /* Day-at-a-glance weather overlay layered over the twilight gradient. Hours with cloud cover get a soft white-grey blob whose opacity scales with cloud_cover; hours with rain/snow/fog get an animated texture on top. All layers sit BELOW the .twilight-now red marker and the tick labels (which have higher z-index). */ .twilight-weather { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 1; } /* Clouds — soft puffy blobs that drift very slowly. */ .tw-cloud { position: absolute; top: 0; height: 100%; background-image: url('/assets/cloudy.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); } /* Rain — short blue dashes falling steadily. */ .tw-rain { position: absolute; top: 0; height: 100%; background-image: url('/assets/rain.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); } /* Snow — pale dots that drift down + side-to-side. */ .tw-snow { position: absolute; top: 0; height: 100%; background-image: url('/assets/snow.png'); background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); } /* Fog — flat translucent grey wash (no animation; fog doesn't fall). */ .tw-fog { position: absolute; top: 0; height: 100%; background: linear-gradient(180deg, rgba(210, 215, 225, 0.55) 0%, rgba(190, 200, 215, 0.32) 50%, rgba(210, 215, 225, 0.55) 100%); mix-blend-mode: screen; } /* Make sure the red 'now' marker + tick labels stay on top of weather. */ .twilight-now, .twilight-tick { z-index: 3; } @media (prefers-reduced-motion: reduce) { .tw-cloud, .tw-rain, .tw-snow { animation: none; } } /* Audit log — compact IPv6 with a 'v6' badge so the column doesn't blow up. */ .audit-ip { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; white-space: nowrap; } .audit-ip-v6 { cursor: help; } .audit-ip-badge { display: inline-block; margin-left: 0.35rem; padding: 0 0.32rem; background: rgba(120,180,255,0.18); border: 1px solid rgba(120,180,255,0.35); border-radius: 4px; font-size: 0.72em; color: #aec9ee; vertical-align: 1px; letter-spacing: 0.04em; text-transform: lowercase; } /* Security banner (password expiry / mandatory 2FA) — sits at the top of
on every authenticated page when a policy needs the user's attention. */ .sec-banner { margin: 0.4rem 0 1rem; padding: 0.7rem 1rem; border-radius: 6px; border: 1px solid transparent; font-size: 0.95em; } .sec-banner a { font-weight: 600; } .sec-banner-warn { background: rgba(232,200,90,0.12); border-color: rgba(232,200,90,0.4); color: #f1d97a; } .sec-banner-urgent { background: rgba(201,89,106,0.18); border-color: rgba(201,89,106,0.5); color: #f5b5be; } .sec-banner + .sec-banner { margin-top: -0.6rem; } /* Bitwarden / password-manager recommendation block on password forms. */ .password-mgr-hint { margin: 0.6rem 0 1rem; padding: 0.65rem 0.9rem; background: rgba(120, 180, 255, 0.07); border: 1px solid rgba(120, 180, 255, 0.25); border-left-width: 3px; border-radius: 4px; font-size: 0.92em; line-height: 1.45; } .password-mgr-hint strong { color: var(--fg); } .password-mgr-hint a { font-weight: 600; } /* Anchored sections on members pages need room for the sticky header, otherwise the section's top gets hidden under the nav when you scroll to a fragment like /members/#officers. */ body.page-members section[id], body.page-members h2[id], body.page-members h3[id] { scroll-margin-top: 5rem; } /* === Image gallery member pages === */ .my-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; } .my-image-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; } .my-image-thumb { display: block; aspect-ratio: 1; overflow: hidden; } .my-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .my-image-meta { padding: 0.6rem 0.75rem; } /* === Public gallery === */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; margin: 1.2rem 0; } .gallery-tile { display: block; aspect-ratio: 1; position: relative; overflow: hidden; border-radius: 6px; background: #0f1419; text-decoration: none; } .gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms; } .gallery-tile:hover img { transform: scale(1.04); } .gallery-tile-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.6rem; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%); color: #fff; font-size: 0.85em; line-height: 1.2; display: flex; flex-direction: column; gap: 0.1rem; } .gallery-tile-overlay strong { font-size: 0.95em; } .gallery-toolbar { margin: 0.6rem 0; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; } .gallery-toolbar select { background: rgba(0,0,0,0.3); color: var(--fg); border: 1px solid rgba(255,255,255,0.1); padding: 0.2rem 0.4rem; border-radius: 3px; } .gallery-pager { margin: 1.5rem 0; text-align: center; } .gallery-pager a { display: inline-block; padding: 0.4rem 0.7rem; margin: 0 0.1rem; border-radius: 4px; background: rgba(255,255,255,0.03); color: var(--fg); text-decoration: none; } .gallery-pager a.is-current { background: rgba(120,180,255,0.2); color: #aec9ee; } .gallery-iotd { margin: 1.4rem 0; } .gallery-iotd-card { display: grid; grid-template-columns: minmax(0, 50%) 1fr; gap: 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--fg); } .gallery-iotd-card img { width: 100%; height: 100%; object-fit: cover; max-height: 360px; } .gallery-iotd-meta { padding: 1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; } .gallery-iotd-meta small { color: #f0c585; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 0.78em; } .gallery-iotd-meta h2 { margin: 0.3rem 0; } .gallery-detail { max-width: 64rem; margin: 0 auto; } .gallery-detail-head { margin-bottom: 1rem; } .gallery-figure { margin: 0 0 1.2rem; } .gallery-figure a { display: block; line-height: 0; } .gallery-main-img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #000; border-radius: 6px; display: block; cursor: zoom-in; } .gallery-figcaption { margin-top: 0.4rem; font-size: 0.85em; } .gallery-revisions { margin: 1.5rem 0; } .gallery-revisions-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; } .gallery-rev-tile { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; padding: 0.3rem; text-decoration: none; color: var(--fg); width: 7rem; } .gallery-rev-tile.is-final { border-color: rgba(127,207,145,0.4); } .gallery-rev-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; } .gallery-rev-tile span { font-size: 0.78em; color: var(--muted); } .gallery-actions { margin: 1rem 0; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } .gallery-meta-block { margin: 1.5rem 0; padding: 1rem 1.2rem; background: rgba(255,255,255,0.03); border-radius: 6px; } .gallery-meta-block h3 { margin-top: 0; } .gallery-comments h3 { margin-bottom: 0.8rem; } .gallery-comment-form textarea { width: 100%; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); color: var(--fg); padding: 0.5rem; border-radius: 4px; font-family: inherit; margin-bottom: 0.4rem; } .gallery-comment { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .gallery-comment-head { margin-bottom: 0.2rem; } .gallery-profile-head { margin-bottom: 1.4rem; } /* ===== Astrobin-style gallery lightbox detail view ===== */ body.page-gallery-lightbox { margin: 0; background: #0a0d12; color: var(--fg); } .lb-shell { display: grid; grid-template-columns: 1fr 45rem; background: #0a0d12; min-height: 100vh; width: 100%; } .lb-shell > .lb-panel { max-height: 100vh; } @media (max-width: 1500px) { .lb-shell { grid-template-columns: 1fr 36rem; } } @media (max-width: 1100px) { .lb-shell { grid-template-columns: 1fr 28rem; } } @media (max-width: 880px) { .lb-shell { grid-template-columns: 1fr 22rem; } } @media (max-width: 880px) { .lb-shell { grid-template-columns: 1fr; grid-template-rows: 60vh 1fr; } } /* LEFT: stage */ .lb-stage { position: relative; min-height: 80vh; height: 100vh; background: radial-gradient(ellipse at center, #1a1f2a 0%, #06080c 100%); overflow: hidden; } .lb-image-wrap { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; /* Image flush to top; bottom padding clears the revision-tab pill. */ padding: 0 5vw 4.5rem; } .lb-image-link { display: grid; place-items: center; cursor: zoom-in; max-width: 100%; max-height: 100%; line-height: 0; } .lb-image { grid-area: 1 / 1; display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 4.5rem); /* visible viewport minus tab clearance */ object-fit: contain; object-position: top center; box-shadow: 0 0 60px rgba(0,0,0,0.6); } .lb-image-base { z-index: 1; } .lb-image-hover { z-index: 2; opacity: 0; transition: opacity 650ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .lb-image-link:hover .lb-image-hover { opacity: 1; } .lb-close { position: absolute; top: 0.7rem; left: 0.9rem; z-index: 10; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; backdrop-filter: blur(6px); transition: background 200ms; } .lb-close:hover { background: rgba(0,0,0,0.85); } .lb-top-right { position: absolute; top: 0.7rem; right: 0.9rem; z-index: 10; display: flex; gap: 0.4rem; } .lb-tool-btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; text-decoration: none; backdrop-filter: blur(6px); transition: background 200ms; } .lb-tool-btn:hover { background: rgba(0,0,0,0.85); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; backdrop-filter: blur(6px); transition: background 200ms; } .lb-nav:hover { background: rgba(0,0,0,0.8); } .lb-nav span { font-size: 2.2rem; line-height: 0.5; margin-top: -4px; } .lb-nav-prev { left: 0.8rem; } .lb-nav-next { right: 0.8rem; } .lb-rev-tabs { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.45rem; z-index: 10; background: rgba(0,0,0,0.55); padding: 0.4rem 0.55rem; border-radius: 999px; backdrop-filter: blur(8px); } .lb-rev-tab { min-width: 2rem; height: 2rem; padding: 0 0.55rem; background: rgba(255,255,255,0.08); color: #ddd; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: 0.86em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background 180ms, color 180ms, border-color 180ms; } .lb-rev-tab:hover { background: rgba(255,255,255,0.18); color: #fff; } .lb-rev-tab.is-active { background: #f0c585; color: #1a1409; border-color: #f0c585; } .lb-rev-add { background: transparent; color: #aab; border-style: dashed; border-color: rgba(255,255,255,0.25); } /* RIGHT: scrollable panel */ .lb-panel { overflow-y: auto; background: linear-gradient(180deg, rgba(22,28,38,0.96) 0%, rgba(12,16,22,0.96) 100%); border-left: 1px solid rgba(255,255,255,0.08); padding: 1.4rem 1.4rem 3rem; color: #e9ecf2; font-size: 0.95rem; line-height: 1.5; } .lb-panel::-webkit-scrollbar { width: 8px; } .lb-panel::-webkit-scrollbar-track { background: transparent; } .lb-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } .lb-panel-head h1 { margin: 0 0 0.2rem; font-size: 1.4rem; } .lb-panel-filename { color: #b9c1cd; font-size: 0.92em; margin-top: 0.15rem; } .lb-panel-stats { margin: 0.7rem 0 0.4rem; display: flex; gap: 0.55rem; flex-wrap: wrap; color: #c4ccd8; font-size: 0.88em; align-items: center; } .lb-stat { white-space: nowrap; } .lb-stat + .lb-stat::before { content: '·'; margin-right: 0.45rem; opacity: 0.5; } .lb-panel-author { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); margin-top: 0.6rem; } .lb-avatar { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.08); } .lb-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; background: rgba(127,207,145,0.2); color: #b4e3ba; font-weight: 700; font-size: 0.95em; } .lb-panel-counts { display: flex; gap: 0.7rem; } .lb-icon-btn { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--fg); padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.85em; cursor: pointer; text-decoration: none; } .lb-icon-btn:hover { background: rgba(255,255,255,0.12); } .lb-panel-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9em; } .lb-row-label { color: #a8b1bf; text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.06em; font-weight: 700; } .lb-row-pill { background: rgba(255,255,255,0.05); border-radius: 4px; padding: 0.18rem 0.5rem; font-size: 0.82em; color: var(--fg); } .lb-row-loc { color: var(--fg); } .lb-row-bortle { margin-left: auto; color: var(--muted); font-size: 0.78em; letter-spacing: 0.05em; } .lb-section { margin: 1rem 0; border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; background: rgba(255,255,255,0.02); } .lb-section > summary { padding: 0.55rem 0.8rem; cursor: pointer; list-style: none; } .lb-section > summary::-webkit-details-marker { display: none; } .lb-section[open] > summary { border-bottom: 1px solid rgba(255,255,255,0.06); } .lb-section-title { font-weight: 700; font-size: 1.02em; color: #f0f2f5; letter-spacing: 0.01em; } .lb-section-body { padding: 0.7rem 0.8rem; } .lb-section-summary { color: #d6dce6; margin: 0 0 0.7rem; font-size: 0.95em; } .lb-table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .lb-table th, .lb-table td { padding: 0.5rem 0.45rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); } .lb-table th { color: #a8b1bf; font-weight: 700; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; } .lb-table td { color: #e9ecf2; } .lb-eq-row { display: grid; grid-template-columns: 6rem 1fr; gap: 0.6rem; padding: 0.35rem 0; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.04); } .lb-eq-row:last-child { border-bottom: none; } .lb-eq-label { color: #a8b1bf; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; line-height: 1.25; } .lb-eq-items { display: flex; flex-wrap: wrap; gap: 0.3rem; } .lb-eq-pill { background: rgba(127,207,145,0.15); border: 1px solid rgba(127,207,145,0.4); border-radius: 4px; padding: 0.25rem 0.6rem; font-size: 0.9em; color: #d5f0db; } .lb-comment-form textarea { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: var(--fg); padding: 0.5rem; border-radius: 4px; font-family: inherit; margin-bottom: 0.4rem; } /* ===== Gallery lightbox polish: integration summary, zoom indicator, tooltip ===== */ .lb-integration > summary { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.65rem 0.8rem !important; } .lb-integration-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; font-size: 0.92em; color: #e0e6ee; } .lb-i-label { background: rgba(127,207,145,0.15); border: 1px solid rgba(127,207,145,0.4); color: #d5f0db; padding: 0.15rem 0.55rem; border-radius: 4px; font-weight: 600; font-size: 0.92em; } .lb-i-time { font-weight: 700; color: #f0f2f5; font-variant-numeric: tabular-nums; } .lb-i-dates { color: #c4ccd8; } .lb-i-moon { color: #d6dce6; font-variant-numeric: tabular-nums; } /* Native browser tooltip is already produced by the title= attr — but make the © badge look hover-clickable so users know to mouseover. */ .lb-stat[title] { cursor: help; border-bottom: 1px dotted rgba(255,255,255,0.18); padding-bottom: 0.05em; } /* PhotoSwipe zoom indicator */ .pswp-zoom-indicator { position: absolute; top: 1rem; left: 1rem; background: rgba(0,0,0,0.55); color: #fff; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.95rem; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); pointer-events: none; z-index: 1100; } /* ===== Gallery sidebar polish: collection pill + coordinates row ===== */ .lb-panel-row-collection { display: flex; justify-content: flex-end; padding-top: 0.4rem; border-bottom: none !important; } .lb-row-collection-pill { color: #c4ccd8; font-size: 0.86em; background: rgba(232,150,90,0.10); border: 1px solid rgba(232,150,90,0.35); color: #f0c585; padding: 0.18rem 0.6rem; border-radius: 4px; text-decoration: none; } .lb-panel-row-loc { gap: 0.55rem; } .lb-row-loc { color: #f0c585; font-weight: 500; flex: 1; } .lb-row-bortle { color: #c4ccd8; } .lb-row-bortle strong { color: #f0c585; font-size: 1.05em; } .lb-panel-row-coords { flex-wrap: wrap; gap: 0.4rem 0.85rem; padding: 0.65rem 0; font-size: 0.88em; color: #e0e6ee; border-bottom: 1px solid rgba(255,255,255,0.05); } .lb-coord-cell { color: #f0c585; display: inline-flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; } /* Plate-solve status box on the Sky coordinates section. */ .ps-status-idle { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .ps-status-pending { background: rgba(232,200,90,0.10); border: 1px solid rgba(232,200,90,0.4); color: #f1d97a; } .ps-status-ok { background: rgba(106,176,122,0.12); border: 1px solid rgba(106,176,122,0.4); color: #b4e3ba; } .ps-status-fail { background: rgba(201,89,106,0.15); border: 1px solid rgba(201,89,106,0.5); color: #f5b5be; } .ps-status-box code { background: rgba(0,0,0,0.4); padding: 0.3rem 0.5rem; border-radius: 3px; word-break: break-word; } /* Tell the browser this site is dark, so native widgets (select option menus, date pickers, scrollbars on form controls) render dark instead of OS-default white-on-white. */ :root { color-scheme: dark; } html, body { color-scheme: dark; } /* Belt-and-suspenders for browsers that ignore color-scheme. */ select option { background: #1a1f2a; color: #e9ecf2; } select option:checked, select option:hover { background: #2c3d6a; color: #ffffff; } /* Sidebar pills/coord cells used as search links keep their look. */ .lb-link, a.lb-link, a.lb-link:visited, a.lb-link:hover, a.lb-link:focus { text-decoration: none; color: inherit; cursor: pointer; } a.lb-link { transition: filter 0.12s ease, background 0.12s ease; } a.lb-link:hover { filter: brightness(1.18); } a.lb-eq-pill:hover { background: rgba(127,207,145,0.28); } a.lb-row-pill:hover, a.lb-row-loc:hover, a.lb-row-bortle:hover { background: rgba(255,255,255,0.10); border-radius: 4px; } /* Active-filters bar above the gallery toolbar. */ .gallery-active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.8rem 0 1rem; padding: 0.6rem 0.8rem; background: rgba(232,200,90,0.08); border: 1px solid rgba(232,200,90,0.35); border-radius: 6px; font-size: 0.9em; } .gallery-active-filters .gaf-label { color: #f1d97a; font-weight: 600; letter-spacing: 0.02em; } .gallery-active-filters .gaf-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; text-decoration: none; color: #e0e6ee; transition: background 0.12s ease, border-color 0.12s ease; } .gallery-active-filters .gaf-chip:hover { background: rgba(201,89,106,0.18); border-color: rgba(201,89,106,0.55); color: #f5b5be; } .gallery-active-filters .gaf-chip-label { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em; color: #b6bdc9; } .gallery-active-filters .gaf-chip:hover .gaf-chip-label { color: inherit; } .gallery-active-filters .gaf-chip-value { font-weight: 500; } .gallery-active-filters .gaf-chip-x { font-size: 1.05em; line-height: 1; opacity: 0.75; padding-left: 0.15rem; } .gallery-active-filters .gaf-clear { margin-left: auto; color: #f1d97a; text-decoration: underline; font-size: 0.85em; } /* "From the CVAS gallery" section on the home page. */ .gallery-feature { margin: 2rem 0; padding: 1.4rem; background: rgba(20,30,55,0.4); border: 1px solid rgba(120,180,255,0.18); border-radius: 8px; } .gallery-feature-head h2 { margin: 0 0 0.2rem; } .gallery-feature-head p { margin: 0 0 1rem; } .gallery-feature-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; } .gallery-feature-photo { display: block; border-radius: 6px; overflow: hidden; background: #0b0e15; } .gallery-feature-photo img { display: block; width: 100%; height: auto; } .gallery-feature-body .gallery-feature-tag { margin: 0 0 0.3rem; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75em; color: #f0c585; } .gallery-feature-body .gallery-feature-title { margin: 0 0 0.4rem; } .gallery-feature-body .gallery-feature-title a { color: var(--fg); text-decoration: none; } .gallery-feature-body .gallery-feature-credit, .gallery-feature-body .gallery-feature-target { margin: 0 0 0.3rem; font-size: 0.92em; } .gallery-feature-body .gallery-feature-links { margin-top: 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .gallery-feature-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; margin-top: 1.2rem; } .gallery-feature-tile { position: relative; display: block; border-radius: 5px; overflow: hidden; background: #0b0e15; aspect-ratio: 1 / 1; } .gallery-feature-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; } .gallery-feature-tile:hover img { transform: scale(1.04); } .gallery-feature-tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.35rem 0.5rem; font-size: 0.78em; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .gallery-feature-grid { grid-template-columns: 1fr; } } /* Mobile lightbox stage auto-fit — keep the stage tightly wrapped around the image instead of locking it to 60vh and leaving a black void below landscape frames on a portrait phone. */ @media (max-width: 880px) { .lb-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .lb-stage { min-height: 0; height: auto; padding-bottom: 3.6rem; /* room for the rev-tab pill below */ } .lb-image-wrap { position: relative; inset: auto; padding: 0 4vw 0.8rem; min-height: 0; } .lb-image { max-height: 70vh; /* cap on extra-tall portrait images */ max-width: 100%; margin: 0 auto; } .lb-image-link { max-height: 70vh; } .lb-rev-tabs { position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); } .lb-nav { width: 2.4rem; height: 2.4rem; top: auto; bottom: 0.6rem; transform: none; } .lb-nav span { font-size: 1.6rem; } .lb-nav-prev { left: 0.6rem; } .lb-nav-next { right: 0.6rem; } .lb-shell > .lb-panel { max-height: none; } .lb-panel { padding: 1rem 1rem 2rem; } } /* Password input UX: eye toggle + strength meter (pw-meter.js). */ .pw-eye-wrap { position: relative; display: block; } .pw-eye-wrap input[type="password"], .pw-eye-wrap input[type="text"] { padding-right: 2.5rem; width: 100%; box-sizing: border-box; } .pw-eye-btn { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; padding: 0; border: none; background: transparent; color: var(--muted, #b9c1cd); cursor: pointer; font-size: 1.1rem; line-height: 1; opacity: 0.75; transition: opacity 0.15s ease, color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; } .pw-eye-btn:hover { opacity: 1; color: #fff; } .pw-eye-btn.is-open { color: #f0c585; opacity: 1; } .pw-meter { margin-top: 0.45rem; } .pw-meter-bar { height: 6px; background: rgba(255,255,255,0.07); border-radius: 999px; overflow: hidden; } .pw-meter-fill { display: block; height: 100%; width: 0%; transition: width 0.2s ease, background 0.2s ease; background: #555; } .pw-meter-fill.pw-very-weak { background: #c9596a; } .pw-meter-fill.pw-weak { background: #d98b3a; } .pw-meter-fill.pw-ok { background: #e8c85a; } .pw-meter-fill.pw-strong { background: #6ab07a; } .pw-meter-fill.pw-great { background: #5ad0c9; } .pw-meter-text { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.3rem; font-size: 0.82em; color: var(--muted, #b9c1cd); } .pw-meter-text strong { color: #e0e6ee; font-weight: 600; } /* Password requirements callout above the new-password input. */ .pw-rules-callout { background: rgba(232,200,90,0.06); border: 1px solid rgba(232,200,90,0.30); border-radius: 5px; padding: 0.6rem 0.85rem; margin: 0.4rem 0 0.8rem; font-size: 0.85em; } .pw-rules-callout strong { display: block; margin-bottom: 0.3rem; color: #f1d97a; letter-spacing: 0.02em; } .pw-rules-callout ul.pw-rules { margin: 0; padding-left: 1.2rem; color: var(--muted, #c4ccd8); } .pw-rules-callout ul.pw-rules li { line-height: 1.45; } /* Tighter 3-col layout for length + strength + crack so they fit. */ .pw-meter-text { flex-wrap: wrap; } .pw-meter-count strong { color: #e0e6ee; font-weight: 600; } /* Live rule-met / unmet styling on the password-requirements list. */ ul.pw-rules { list-style: none; padding-left: 0; margin: 0; } .pw-rules li { position: relative; padding-left: 1.4em; transition: color 0.15s ease; list-style: none; } .pw-rules li::before { content: '\2022'; /* neutral bullet */ position: absolute; left: 0; top: 0; color: var(--muted, #b9c1cd); font-weight: 700; } .pw-rules li.is-met { color: #9be1a8; } .pw-rules li.is-met::before { content: '\2713'; color: #6ab07a; } /* check */ .pw-rules li.is-unmet { color: #f5b5be; } .pw-rules li.is-unmet::before { content: '\2717'; color: #c9596a; } /* x */ /* Submit button disabled while password rules unmet. */ .pw-gate-disabled, .btn.pw-gate-disabled, button.pw-gate-disabled, input.pw-gate-disabled { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: auto; /* keep tooltip visible */ }