/* ===================================================================== Australian Sauna Association , design system Anchored in the brand logo: slate-teal (#305460) + eucalyptus sage (#78a890). Warm ember accent for heat/CTAs, warm cream paper ground. Premium editorial. All brand values are tokens on :root. ===================================================================== */ :root { /* ── Brand (from the logo) ── */ --slate: #305460; --slate-deep: #244049; --slate-ink: #182d34; --sage: #78a890; --sage-deep: #5d8c74; --sage-soft: #a7c6b2; --sage-wash: #e7efe9; /* ── Heat accent (warm contrast to the cool brand) ── */ --ember: #cf6a43; --ember-deep: #b3552f; --amber: #e3a05a; /* ── Warm neutrals / paper ── */ --paper: #f7f3ec; --paper-2: #efe6d6; --card: #fffdf9; --ink: #21302f; --ink-soft: #54635f; --ink-faint: #677069; --line: rgba(48, 84, 96, 0.16); --line-soft: rgba(48, 84, 96, 0.09); --text-on-slate: #c7d6d1; /* lead/body text on the fixed dark slate bands */ /* ── Type ── */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* ── Geometry ── */ --radius: 14px; --radius-lg: 24px; --radius-pill: 999px; --container: 1200px; --container-narrow: 760px; /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(24, 45, 52, 0.06), 0 2px 8px rgba(24, 45, 52, 0.05); --shadow-md: 0 6px 24px rgba(24, 45, 52, 0.10), 0 2px 6px rgba(24, 45, 52, 0.06); --shadow-lg: 0 24px 60px rgba(24, 45, 52, 0.16), 0 6px 18px rgba(24, 45, 52, 0.08); /* ── Motion ── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ── Z-index scale ────────────────────────────────────────────────────────── Low tiers (< 1000) stack WITHIN a context: a header, a card, an open modal's body. High tiers (>= --z-map-scrim) clear the Leaflet sauna map, whose internal panes reach 700, so anything that floats over the map lives up here. Values match the previous hand-tuned numbers, so this is a rename, not a re-layer. */ --z-base: 1; /* positioned content within a context */ --z-sticky: 100; /* sticky headers + docks */ --z-nav: 200; /* skip link + nav-level chrome */ --z-dropdown: 300; /* menus, popovers, select + geo-result panels */ --z-sheet: 400; /* in-context sheets / sticky sub-bars */ --z-map-scrim: 1200; /* full-page scrim above the map, below modals */ --z-drawer: 9000; /* slide-in drawers + their backdrop */ --z-modal: 9200; /* modal dialogs + their overlay */ --z-confirm: 9600; /* confirm / prompt popovers (above an open modal) */ --z-lightbox: 9700; /* image lightbox */ --z-toast: 9900; /* toasts + transient pickers (always on top) */ /* ── Spacing scale ── */ --sp-xs: 0.4rem; --sp-half: 0.5rem; /* half-step between xs and sm; common in tight gaps + padding */ --sp-sm: 0.6rem; --sp-md: 1rem; --sp-lg: 1.25rem; --sp-xl: 1.5rem; --sp-2xl: 2rem; --sp-3xl: 3rem; color-scheme: light; --header-h: 76px; } /* ── Dark theme ────────────────────────────────────────────────── Set via (the no-flash inline script in applies the saved preference before paint; theme.js drives the toggle). A considered dark palette: warm charcoal-greens for ground + surfaces, light warm text, and the ember/sage accents nudged so they hold contrast on dark. The brand slate-deep stays dark so the admin header reads the same. Only semantic tokens flip; brand hues are tuned, not inverted. */ html[data-theme="dark"] { color-scheme: dark; --paper: #141d1c; --paper-2: #1b2625; --card: #1f2b29; --ink: #e7edeb; --ink-soft: #a7b3af; --ink-faint: #8c9893; --slate-ink: #eef3f1; --line: rgba(231, 239, 236, 0.15); --line-soft: rgba(231, 239, 236, 0.08); --sage-wash: rgba(122, 170, 146, 0.18); --sage-soft: #4f7361; --sage: #86b89e; --sage-deep: #74ab90; --slate: #5496a8; --ember: #db7d54; --ember-deep: #cb6c44; --shadow-sm: 0 1px 2px rgba(0,0,0,0.34); --shadow-md: 0 6px 22px rgba(0,0,0,0.44); --shadow-lg: 0 24px 60px rgba(0,0,0,0.52); } /* Hard-coded light fills that no token covers. */ html[data-theme="dark"] .status-draft { background: #3a3320; color: #e2c479; } html[data-theme="dark"] .status-hidden { background: #2a302f; color: #9aa6a2; } html[data-theme="dark"] .admin-nav-menu, html[data-theme="dark"] .row-menu-list { background: var(--card); } /* Dark maps: CARTO Dark Matter basemap is near-black, so the land reads as a void. Lift only the tile pane (markers/labels live in other Leaflet panes) to a charcoal in-between so land + boundaries read and the pins still pop. */ html[data-theme="dark"] .leaflet-tile-pane { filter: brightness(1.45) contrast(0.86) saturate(1.06); } html[data-theme="dark"] .bill-flag.grace { background: #3d2f1a; color: #e6b877; } html[data-theme="dark"] .bill-flag.restricted { background: #3f221f; color: #eaa39a; } /* ── Appearance switcher , lives in the account menus ────────────────────── Three swatches (light / dark / split = system) acting as radios, like macOS traffic lights. The "Appearance" label sits to the left; each swatch carries a hover tooltip (title), and on narrow/touch screens a text label shows beneath it. Swatch fills are fixed colours , they depict the themes, so they must not flip with the active theme. */ .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.7rem; } .theme-row-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin: 0; } .theme-seg { display: inline-flex; align-items: flex-start; gap: 0.55rem; } .theme-seg button { background: none; border: none; padding: 0.1rem; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; font: inherit; border-radius: 8px; -webkit-tap-highlight-color: transparent; } .theme-seg button:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; } /* Fixed fills that read as the two themes. They must stay distinct from BOTH menu backgrounds (light card ~ cream, dark card ~ dark teal), so the dark fill is a near-black rather than the theme's own bg colour (which would vanish into a dark menu). A theme-adaptive outline keeps the circle crisp in either menu. */ .theme-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink-faint) 55%, transparent); box-sizing: border-box; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .theme-seg button[data-theme-set="light"] .theme-swatch { background: #f3ead7; } .theme-seg button[data-theme-set="dark"] .theme-swatch { background: #0e1518; } /* Yin-yang for "System": light + dark in balance. Its own even outline replaces the swatch border, so the dark half no longer shows a contrasting light edge. */ .theme-seg button[data-theme-set="system"] .theme-swatch { border-color: transparent; background: #f3ead7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1 A15 15 0 0 1 16 31 A7.5 7.5 0 0 1 16 16 A7.5 7.5 0 0 0 16 1 Z' fill='%230e1518'/%3E%3Ccircle cx='16' cy='23.5' r='2.7' fill='%23f3ead7'/%3E%3Ccircle cx='16' cy='8.5' r='2.7' fill='%230e1518'/%3E%3Ccircle cx='16' cy='16' r='15' fill='none' stroke='%239a938a' stroke-width='1.3'/%3E%3C/svg%3E") center/100% 100% no-repeat; } .theme-seg button:hover .theme-swatch { border-color: var(--sage); } .theme-seg button.is-on .theme-swatch { border-color: transparent; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--sage-deep); } .theme-swatch-label { display: none; font-size: 0.68rem; font-weight: 600; color: var(--ink-faint); } .theme-seg button.is-on .theme-swatch-label { color: var(--slate-ink); } /* In the mobile drawer there's no hover, so label each swatch and stack the row. Keyed off the drawer container (not a width) so it's right whenever the drawer is in use; the desktop account dropdown stays compact with hover tooltips. */ .mobile-nav-links .theme-row { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); } .mobile-nav-links .theme-seg { gap: 1.15rem; } .mobile-nav-links .theme-swatch-label { display: block; } /* ── Reset / base ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); /* Always reserve the scrollbar gutter so the centered header + nav don't shift left/right between pages that scroll and pages that don't (the right-to-left "bounce" on navigation). No-op where scrollbars overlay (most of macOS). */ scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { font-family: var(--font-body); font-weight: 400; font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Short pages still fill the first viewport so the footer never floats up into it on mobile. Scoped to pages that actually render a footer (not chromeless modal embeds); degrades to current behaviour where :has is unsupported. */ body:has(> .site-footer) main#main { min-height: calc(100svh - var(--header-h)); } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* ── Typographic scale ─────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.07; letter-spacing: -0.01em; color: var(--slate-ink); text-wrap: balance; } .h-display { font-size: clamp(2.7rem, 7.2vw, 5.6rem); font-weight: 460; line-height: 0.98; letter-spacing: -0.02em; } h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); } p { text-wrap: pretty; } strong { font-weight: 650; color: var(--slate-ink); } em { font-style: italic; } /* Editorial italic flourish (Newsreader italic) */ .serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } /* ── Layout primitives ─────────────────────────────────────────── */ .wrap { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; } .section { padding-block: clamp(4rem, 9vw, 8rem); } .section-tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); } /* First section right under a PageHero: the hero already carries visual weight, so trim the top gap (was up to 8rem). Applied on Events + News. */ .section-after-hero { padding-top: clamp(2rem, 4vw, 3.25rem); } .bg-paper-2 { background: var(--paper-2); } .bg-sage-wash { background: var(--sage-wash); } .bg-slate { background: var(--slate-deep); color: #eef3f1; } .bg-slate h1, .bg-slate h2, .bg-slate h3 { color: #fff; } /* ── Eyebrow + section heading ─────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember-deep); } .eyebrow::before { content: ""; width: 1.8rem; height: 2px; border-radius: 2px; background: var(--ember); display: inline-block; } .bg-slate .eyebrow { color: var(--amber); } .bg-slate .eyebrow::before { background: var(--amber); } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head .lead { margin-top: var(--sp-md); font-size: 1.18rem; color: var(--ink-soft); } .bg-slate .section-head .lead { color: var(--text-on-slate); } .lead { font-size: 1.18rem; line-height: 1.6; color: var(--ink-soft); } /* ── Buttons ───────────────────────────────────────────────────── */ .btn { --btn-bg: var(--slate); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; padding: 0.92em 1.6em; font-family: var(--font-body); font-weight: 650; font-size: 0.98rem; letter-spacing: 0.01em; line-height: 1; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid transparent; border-radius: var(--radius-pill); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s; box-shadow: var(--shadow-sm); will-change: transform; } /* Re-hide so the `hidden` attribute works: the base `.btn { display: inline-flex }` (author origin) beats the UA `[hidden] { display: none }`, which otherwise left hidden buttons (e.g. a form's "Remove photo", the profile "Permanently delete") visible. Specificity here (.btn[hidden]) outranks the base rule. */ .btn[hidden] { display: none; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn-primary { --btn-bg: var(--ember); --btn-fg: #fff; } .btn-primary:hover { background: var(--ember-deep); } .btn-sage { --btn-bg: var(--sage-deep); --btn-fg: #fff; } /* "Registered" state on event cards: slate, distinct from Sign Up (ember) and Tickets (sage). Clicking it cancels the registration (with a confirm). */ .btn-registered { --btn-bg: var(--slate); --btn-fg: #fff; } .btn-registered:hover { background: var(--slate-ink); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--slate); border-color: var(--line); box-shadow: none; } .btn-ghost:hover { border-color: var(--slate); background: rgba(48,84,96,0.04); } .bg-slate .btn-ghost { --btn-fg: #fff; border-color: rgba(255,255,255,0.32); } .bg-slate .btn-ghost:hover { background: rgba(255,255,255,0.08); } .btn-lg { padding: 1.05em 2em; font-size: 1.05rem; } /* Size + danger live here (not admin.css) so the member portal, which only loads this stylesheet, gets compact + destructive buttons too. */ .btn-sm { padding: 0.45em 0.9em; font-size: 0.85rem; box-shadow: none; } .btn-danger { --btn-bg: transparent; --btn-fg: var(--ember-deep); border-color: color-mix(in srgb, var(--ember) 40%, transparent); box-shadow: none; } .btn-danger:hover { background: color-mix(in srgb, var(--ember) 10%, transparent); } /* Icon-only button: use WITH .btn + a colour modifier, e.g. class="btn btn-ghost btn-sm btn-icon btn-danger". Because it carries .btn it inherits the box model + line-height:1 + the row-action vertical-align fix, so the icon sits centered next to text buttons (the canonical row-action delete). */ .btn-icon { padding: 0; width: 2rem; height: 2rem; } .btn-ico { display: inline-grid; place-items: center; } .btn-ico svg { width: 16px; height: 16px; } /* Full-width button (auth pages, single-action modal forms). Use instead of an inline style="width:100%". */ .btn-block { width: 100%; } /* Offer redeem modal: full-width action buttons with a leading recognition icon, and a de-emphasised "Report this offer" text link so it stops competing with the real CTAs. (These elements are built in JS, so the styles must be global.) */ .ofd-action { gap: 0.5rem; } .ofd-action svg { flex: none; } .ofd-report-link { background: none; border: none; padding: 0; font: inherit; font-size: 0.82rem; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .ofd-report-link:hover { color: var(--ember-deep); } .ofd-report-link:disabled { cursor: default; text-decoration: none; opacity: 0.7; } .btn svg { width: 1.1em; height: 1.1em; } /* Disabled buttons read as inert, but never lift on hover. */ .btn:disabled:not(.is-loading), .btn[disabled]:not(.is-loading) { opacity: 0.55; cursor: not-allowed; box-shadow: var(--shadow-sm); } .btn:disabled:not(.is-loading):hover, .btn[disabled]:not(.is-loading):hover { transform: none; box-shadow: var(--shadow-sm); } /* Loading state: the label is hidden and a variant-coloured spinner (driven by --btn-fg, so it matches every button style) sits centred, with no size change so the layout never jumps. Applied via ASAButton.busy() / aria-busy. */ .btn.is-loading { color: transparent !important; pointer-events: none; cursor: default; position: relative; } .btn.is-loading:hover { transform: none; box-shadow: var(--shadow-sm); } .btn.is-loading > * { visibility: hidden; } .btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.15em; height: 1.15em; margin: 0; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--btn-fg) 28%, transparent); border-top-color: var(--btn-fg); border-radius: 50%; transform: translate(-50%, -50%); animation: asa-btn-spin 0.6s linear infinite; } @keyframes asa-btn-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 1.5s; } } /* Inline spinner usable next to non-button controls (e.g. a file picker row). */ .asa-inline-spinner { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; box-sizing: border-box; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: asa-btn-spin 0.6s linear infinite; } @media (prefers-reduced-motion: reduce) { .asa-inline-spinner { animation-duration: 1.5s; } } .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 650; color: var(--slate); border-bottom: 2px solid transparent; transition: gap 0.2s var(--ease), border-color 0.2s; } .link-arrow:hover { gap: 0.7em; border-color: var(--ember); } .link-arrow svg { width: 0.95em; height: 0.95em; transition: transform 0.2s var(--ease); } .link-arrow:hover svg { transform: translateX(2px); } /* ── Header ────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--header-h); display: flex; align-items: center; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-soft); transition: box-shadow 0.3s, background 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } /* Hide-on-scroll: slide the bar up when scrolling down, back on scroll up (driven by main.js). */ .site-header.is-hidden { transform: translateY(-110%); } @media (prefers-reduced-motion: reduce) { .site-header { transition: box-shadow 0.3s, background 0.3s; } .site-header.is-hidden { transform: none; } } /* Page navigation is an instant content swap, not a cross-fade. Keeps the SPA routing (no full reload) but removes the default view-transition fade that morphed the sticky header (right-to-left bounce) and smeared the member-nav's ember underline between tabs (orange flash). Unlayered so it beats Astro's @layer astro transition rules. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); width: min(100% - 2rem, var(--container)); } /* The logo must never shrink: it's the only flex-shrinkable item in .site-header-left (the back button is flex:none), so without this it collapses to 0 and the global img{max-width:100%} squished it flat when the back button appeared on inner pages. flex:none reserves its width; max-width:none stops the global cap from ever squeezing the fixed-height mark out of aspect ratio. */ .site-logo { flex: none; } .site-logo img { height: 38px; width: auto; max-width: none; } .site-header-left { display: flex; align-items: center; gap: 0.85rem; } .site-back { display: inline-flex; align-items: center; gap: var(--sp-xs); padding: 0.4rem 0.75rem; border: 1px solid var(--line, #e7e0d4); border-radius: 999px; background: var(--card, #fff); color: var(--ink-soft, #54635f); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; line-height: 1; flex: none; transition: color 0.15s, border-color 0.15s, background 0.15s; } .site-back svg { transition: transform 0.15s; } .site-back:hover { color: var(--ember-deep, #b3552f); border-color: var(--ember, #cf6a43); background: var(--paper-2, #efe9dd); } .site-back:hover svg { transform: translateX(-3px); } @media (max-width: 640px) { .site-back span { display: none; } .site-back { padding: 0.42rem; } } .site-nav { display: flex; align-items: center; gap: var(--sp-2xl); } .site-nav a { font-weight: 550; font-size: 0.97rem; color: var(--slate-ink); position: relative; padding-block: 0.4rem; white-space: nowrap; } .site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--ember); border-radius: 2px; transition: right 0.28s var(--ease); } .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; } /* Nav dropdown (e.g. Sauna Map -> Explore / Submit) */ .nav-dd { position: relative; display: inline-flex; align-items: center; } .nav-dd > a { display: inline-flex; align-items: center; gap: 0.25em; } .nav-dd-caret { width: 0.85em; height: 0.85em; transition: transform 0.2s var(--ease); } .nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); } .nav-dd-menu { position: absolute; top: 100%; left: 50%; margin-top: 6px; transform: translateX(-50%) translateY(4px); background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-md); padding: var(--sp-xs); min-width: 200px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); z-index: var(--z-dropdown); } /* The member profile menu carries icons + longer labels ("Switch to Admin Mode"), so give it extra width and right padding so the item highlight isn't flush against the longest label. */ .header-profile .nav-dd-menu { min-width: 264px; padding: 0.4rem 0.5rem; } .header-profile .nav-dd-menu a, .header-profile .nav-dd-menu .dd-logout button { padding-right: 1.1rem; } .nav-dd-menu::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px; } .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dd-menu a, .nav-dd-menu button { text-align: left; background: none; border: none; font: inherit; font-size: 0.95rem; font-weight: 550; color: var(--slate-ink); padding: 0.6em 0.85em; border-radius: 9px; cursor: pointer; white-space: nowrap; } .nav-dd-menu a::after { display: none; } .nav-dd-menu a:hover, .nav-dd-menu button:hover { background: var(--sage-wash); } /* Member profile menu items carry a leading icon (matching the portal nav). */ .header-profile .nav-dd-menu a, .header-profile .nav-dd-menu .dd-logout button { display: flex; align-items: center; gap: var(--sp-sm); } .header-profile .dd-logout { display: block; } .header-profile .dd-logout button { width: 100%; } .dd-ico { flex: none; display: inline-flex; color: var(--sage-deep); } .dd-ico svg { width: 1.05rem; height: 1.05rem; } .dd-logout .dd-ico { color: var(--ember-deep); } .header-profile .dd-admin .dd-ico { color: var(--sage-deep); } /* "Account" section label groups the mode switch + log out, mirroring the labelled groups in the mobile admin drawer. */ .dd-group { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 0.55rem 0.85rem 0.25rem; margin-top: 0.2rem; border-top: 1px solid var(--line-soft); } /* Toggle utility used by the header member login/profile swap. */ .u-hidden { display: none !important; } /* Member profile menu (right side of the header) */ .nav-dd--right .nav-dd-menu { left: auto; right: 0; transform: translateY(4px); } .nav-dd--right:hover .nav-dd-menu, .nav-dd--right:focus-within .nav-dd-menu { transform: translateY(0); } .nav-dd--right .nav-dd-menu::before { left: auto; right: 0; width: 100%; } .profile-btn { display: inline-flex; align-items: center; gap: 0.15em; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-pill, 999px); padding: 0.32rem 0.5rem 0.32rem 0.55rem; color: var(--slate-ink); cursor: pointer; } .profile-btn:hover { border-color: var(--sage); } .profile-btn .nav-dd-caret { width: 0.8em; height: 0.8em; } .dd-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 0.35rem 0.85rem 0.25rem; } .dd-logout { border-top: 1px solid var(--line-soft); margin-top: 0.25rem; padding-top: 0.25rem; } .dd-logout button { color: var(--ember-deep); width: 100%; } /* Mobile drawer member section (slick account panel) */ .mobile-member { display: flex; flex-direction: column; } .mm-card { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem; margin-bottom: 0.7rem; background: var(--card, #fff); border: 1px solid var(--line-soft); border-radius: 14px; } .mm-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sage, #6f9e89) 16%, #fff); color: var(--sage-deep, #4f7a66); } .mm-avatar svg { width: 22px; height: 22px; } .mm-id { display: flex; flex-direction: column; min-width: 0; } .mm-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 520; color: var(--slate-ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mm-sub { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.18rem; } .mm-links { display: flex; flex-direction: column; gap: 0.1rem; } .mm-links form { display: flex; } .mm-link { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.62rem 0.6rem; border: none; border-radius: 11px; background: none; text-align: left; cursor: pointer; font-family: var(--font-body); font-size: 1rem; font-weight: 540; color: var(--slate-ink); transition: background 0.15s var(--ease); } /* Hover only on hover-capable pointers, so a tap on touch doesn't leave a stuck light highlight (and so it never clashes in dark mode). Theme-adaptive tint via currentColor. Shared by the member burger + admin mobile drawer (both .mm-link). */ @media (hover: hover) { .mm-link:hover { background: color-mix(in srgb, currentColor 8%, transparent); } } .mm-link:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); outline: none; } .mm-link.is-active { background: color-mix(in srgb, var(--ember, #c0562a) 9%, transparent); } .mm-link .mm-ico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--slate, #305460); } .mm-link .mm-ico svg { width: 20px; height: 20px; } .mm-link.is-active .mm-ico { color: var(--ember-deep, #a8431f); } .mm-logout { color: var(--ember-deep); margin-top: 0.15rem; } .mm-logout .mm-ico { color: var(--ember-deep); } .header-cta { display: flex; align-items: center; gap: var(--sp-md); } /* Quiet text link so "Join" reads as the single primary action. */ .header-login-link { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } .header-login-link:hover { color: var(--slate); } /* Reserve the wider logged-out CTA footprint (Log in + Join) so swapping in the narrower member chrome (bell + profile) can't shift the centered nav on public pages (the nav "bounce" as the cookie-hint script resolves auth). Right-align so the member icons still sit flush right. Desktop only; the mobile header collapses to the hamburger below 901px. */ @media (min-width: 901px) { .header-cta { min-width: 9rem; justify-content: flex-end; } } /* Compact band: between the hamburger cut-off (901px) and where the full-size nav comfortably fits, the 8 nav items + logo + Log in/Join + Back button don't fit at default sizing (the full-size nav alone needs ~1200px now). Rather than let anything squish or overflow, shrink the nav text/spacing, trim the logo a touch, and collapse the Back button to icon-only across this whole range so every link stays inline on one row. Above 1200px the default sizing applies. */ @media (min-width: 901px) and (max-width: 1340px) { .site-header .wrap { gap: 0.8rem; width: min(100% - 1.5rem, var(--container)); } /* Nav gap stays tight through the whole band (letting it grow to the default 2rem would re-inflate the nav past the row width). Font + logo scale up smoothly with the viewport so they read compact at 901px and near full size by ~1230px, where the row finally has room. */ .site-nav { gap: 0.6rem; } .site-nav a { font-size: clamp(0.8rem, 0.2rem + 1.05vw, 1rem); } .site-header .header-cta { gap: 0.55rem; min-width: 0; } .site-logo img { height: clamp(30px, 0.375rem + 2.6vw, 38px); } /* Back button (inner pages) icon-only across the band so its ~90px label doesn't push the row into overflow. Full label returns above 1340px, where the default-size nav + labelled Back button finally fit the row. */ .site-back span { display: none; } .site-back { padding: 0.42rem; } } .nav-toggle { display: none; } @media (max-width: 900px) { .site-nav, .header-cta .btn-ghost, .header-login-link, .header-profile { display: none !important; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--slate-ink); } .nav-toggle svg { width: 26px; height: 26px; } } /* Mobile drawer , right-side panel + scrim */ .mobile-nav { /* Above all page content, including the sauna map's sheets (≤700); below the global modals/lightbox (9000+). */ position: fixed; inset: 0; z-index: var(--z-map-scrim); background: rgba(18, 24, 26, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } .mobile-nav.is-open { opacity: 1; visibility: visible; } .mobile-nav-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 380px); background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.36s var(--ease); box-shadow: -18px 0 50px rgba(0, 0, 0, 0.2); } .mobile-nav.is-open .mobile-nav-panel { transform: translateX(0); } /* Header stays pinned; the links area below it scrolls so long member menus fit. */ .mobile-nav-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 1.25rem; border-bottom: 1px solid var(--line-soft); } .mobile-nav-head .site-logo img { height: 30px; width: auto; } .mobile-nav-links { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding: 1rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px)); } .mobile-nav-link { font-family: var(--font-display); font-size: 1.65rem; font-weight: 500; line-height: 1.1; color: var(--slate-ink); text-align: center; padding: 0.5rem 0; transition: color 0.16s var(--ease); } .mobile-nav-link:first-of-type { margin-top: var(--sp-xs); } .mobile-nav-link:hover, .mobile-nav-link:focus-visible { color: var(--ember-deep); outline: none; } .mobile-nav-link.is-active { color: var(--ember-deep); } .mobile-nav-link.is-active::after { content: ""; display: block; width: 26px; height: 2px; margin: 0.3rem auto 0; background: var(--ember); border-radius: 2px; } /* Group label inside the mobile member drawer (mirrors the admin drawer). */ .mm-group-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0.7rem 0 0.2rem; padding: 0.5rem 0.2rem 0; border-top: 1px solid var(--line-soft); } .mobile-nav-label { font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); text-align: center; margin: 1.25rem 0 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); } .mobile-nav-links > .btn { margin-top: var(--sp-xl); } @media (prefers-reduced-motion: reduce) { .mobile-nav, .mobile-nav-panel { transition: none; } } /* ── Footer ────────────────────────────────────────────────────── */ .site-footer { background: #16262c; color: #cdd9d4; padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; } .site-footer a { color: #e5ede9; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } @media (max-width: 980px) and (min-width: 661px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-isa-line { margin-top: var(--sp-md); color: #a9bbb4; font-size: 0.85rem; line-height: 1.5; } .footer-isa-line a { text-decoration: underline; } .footer-aid-line { margin-top: var(--sp-half); color: #8ea49c; font-size: 0.82rem; line-height: 1.5; } .footer-aid-line a { text-decoration: underline; } .footer-brand img { height: 52px; width: auto; } .footer-brand p { margin-top: var(--sp-md); max-width: 30ch; color: #a9bbb4; font-size: 0.95rem; } .footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: var(--sp-md); } .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-sm); list-style: none; padding: 0; } .footer-col a { color: #bccac4; font-size: 0.96rem; } .footer-bottom { margin-top: var(--sp-3xl); padding-top: var(--sp-xl); border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; font-size: 0.85rem; color: #8ea49c; } .footer-social { display: flex; gap: 0.75rem; } .footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; } .footer-social a:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); } .footer-social svg { width: 19px; height: 19px; } /* Compact mobile footer: smaller logo, trimmed copy, and the long Explore link list laid out as two columns so it takes far less vertical space. */ @media (max-width: 760px) { .site-footer { padding-block: 1.75rem 1.1rem; } /* Groups stack as distinct sections; the air + faint hairline live on each .footer-col so the footer reads as calm blocks, not one dense wall. */ .footer-grid { grid-template-columns: 1fr; gap: 0; } .footer-brand img { height: 32px; } .footer-brand p { margin-top: var(--sp-xs); font-size: 0.85rem; line-height: 1.45; max-width: none; } /* A , trim the footer prose to the one tagline on mobile (the ISA-membership + Sauna Aid donation lines still show on desktop / belong on About + Get Involved). */ .footer-isa-line, .footer-aid-line { display: none; } /* C , each group separated by air + a hairline. */ .footer-col { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.09); } .footer-col h4 { margin-bottom: 0.6rem; } /* B , one full-width column with roomy, tappable rows (no more 2-col squeeze). */ .footer-col ul, .footer-links ul { display: flex; flex-direction: column; gap: 0.5rem; } .footer-col li { font-size: 0.95rem; } /* Scope the roomy rows to list links only , the social icon button keeps its own inline-flex centering. */ .footer-col ul a { display: inline-block; padding: 0.1rem 0; } .footer-social { margin-top: 0.7rem !important; } .footer-social a { width: 34px; height: 34px; } .footer-bottom { margin-top: 1.5rem; padding-top: var(--sp-md); font-size: 0.76rem; gap: var(--sp-half); } } /* ── Hero ──────────────────────────────────────────────────────── */ .hero { position: relative; overflow: clip; background: var(--slate-deep); color: #fff; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,38,44,0.18) 0%, rgba(20,38,44,0) 28%, rgba(20,38,44,0.32) 60%, rgba(20,38,44,0.9) 100%), linear-gradient(90deg, rgba(20,38,44,0.42) 0%, rgba(20,38,44,0) 42%); } .hero-inner { position: relative; z-index: 1; /* Fill the viewport below the sticky header (with a floor for short screens). */ min-height: max(520px, calc(100svh - var(--header-h))); display: flex; flex-direction: column; justify-content: flex-end; padding-block: clamp(3rem, 8vw, 6rem); } .hero h1 { color: #fff; max-width: 16ch; } .hero .eyebrow { color: var(--amber); } .hero .eyebrow::before { background: var(--amber); } .hero-sub { margin-top: 1.4rem; max-width: 44ch; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: #e8eeeb; line-height: 1.5; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; } /* Secondary CTA sits on the dark hero image: white text + visible white border. */ .hero .btn-ghost { --btn-fg: #fff; border-color: rgba(255,255,255,0.75); } .hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); } .hero-scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 1; pointer-events: none; color: rgba(255,255,255,0.7); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: var(--sp-half); } .hero-scroll .line { width: 1px; height: 34px; background: linear-gradient(var(--amber), transparent); animation: scrolldrop 2.2s var(--ease) infinite; } @keyframes scrolldrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Decorative cue only: hide it where it would crowd the wrapped CTAs (narrow or short viewports) so it can never overlap the hero buttons. */ @media (max-width: 1024px), (max-height: 760px) { .hero-scroll { display: none; } } @media (max-width: 600px) { /* Stack the CTAs full-width for a cleaner hero, and leave room below them so the scroll cue at the bottom is never covered. */ .hero-actions { flex-direction: column; align-items: stretch; gap: 0.7rem; margin-top: 1.8rem; } .hero-actions .btn { width: 100%; justify-content: center; } .hero-inner { padding-bottom: 6rem; } .hero-scroll { bottom: 1.6rem; } } /* ── PageHero (inner pages) ────────────────────────────────────── */ .page-hero { position: relative; background: var(--slate-deep); color: #fff; overflow: clip; } .page-hero-media { position: absolute; inset: 0; z-index: 0; opacity: 0.4; } .page-hero-media img { width: 100%; height: 100%; object-fit: cover; } .page-hero-inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.25rem, 4vw, 3.25rem); } .page-hero h1 { color: #fff; } .page-hero .lead { color: #d2ddd8; margin-top: var(--sp-md); max-width: 52ch; } .page-hero .eyebrow { color: var(--amber); } .page-hero .eyebrow::before { background: var(--amber); } /* ── Cards ─────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-media { aspect-ratio: 4/3; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .card-hover:hover .card-media img { transform: scale(1.05); } .card-body { padding: var(--sp-xl); } .grid { display: grid; gap: var(--sp-xl); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ── Split feature (text + image) ──────────────────────────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split.reverse > :first-child { order: 2; } .split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 5/4; } .split-media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } } /* ── Stat / value chips ────────────────────────────────────────── */ .stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); } .stat .num { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 480; color: var(--ember); line-height: 1; } .stat .label { margin-top: var(--sp-xs); font-size: 0.92rem; color: var(--ink-soft); } /* ── Team cards ────────────────────────────────────────────────── */ .team-card { text-align: left; } .team-avatar { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--sage-soft), var(--sage)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.6rem; font-weight: 460; overflow: hidden; position: relative; } .team-avatar img { width: 100%; height: 100%; object-fit: cover; } .team-card h3 { margin-top: var(--sp-md); font-size: 1.25rem; } .team-role { color: var(--ember-deep); font-weight: 600; font-size: 0.92rem; margin-top: 0.15rem; } .team-bio { margin-top: var(--sp-sm); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; } /* ── Pricing / membership ──────────────────────────────────────── */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); align-items: stretch; } @media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } } .tier { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.75rem; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .tier.featured { border-color: var(--ember); box-shadow: var(--shadow-lg); position: relative; transform: translateY(-6px); } .tier.featured::before { content: "Most popular"; position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: var(--ember); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4em 1em; border-radius: var(--radius-pill); } .tier-name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; color: var(--slate-ink); } .tier-price { margin-top: var(--sp-half); display: flex; align-items: baseline; gap: 0.3rem; } .tier-price .amount { font-family: var(--font-display); font-size: 2.6rem; font-weight: 480; color: var(--slate); line-height: 1; } .tier-price .per { color: var(--ink-soft); font-size: 0.95rem; } .tier-note { margin-top: 0.55rem; font-size: 0.82rem; line-height: 1.4; color: var(--ink-faint); } .tier-blurb { color: var(--ink-soft); font-size: 0.95rem; margin-top: var(--sp-sm); } .tier-list { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .tier-list li { display: flex; gap: 0.65rem; font-size: 0.96rem; color: var(--ink); align-items: flex-start; } .tier-list li svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--sage-deep); margin-top: 0.15rem; } .tier .btn { width: 100%; } /* ── Member portal chrome (public stylesheet; admin.css isn't loaded here) ── */ .admin-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; } .form-status { font-size: 0.9rem; } .pick-hint { font-size: 0.82rem; color: var(--ink-faint); margin-top: var(--sp-xs); } .pro-jump { width: 100%; color: var(--ink-soft); font-size: 0.9rem; margin-top: var(--sp-md); border-top: 1px solid var(--line-soft); padding-top: 0.9rem; } .pro-jump .linklike, button.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--ember-deep); font-weight: 600; text-decoration: underline; cursor: pointer; } .form-status.ok { color: var(--sage-deep); font-weight: 600; } .form-status.err { color: var(--ember-deep); font-weight: 600; } .status-badge { font-size: 0.75rem; font-weight: 600; padding: 0.2em 0.6em; border-radius: var(--radius-pill); text-transform: capitalize; } .status-published { background: var(--sage-wash); color: var(--sage-deep); } .status-draft { background: #f0ead9; color: #9a7b35; } /* One row, spread to fill the full content width (the tabs span edge to edge, aligning with the cards below). Falls back to horizontal scroll if a narrow desktop can't fit them (scrollbar hidden for a clean look). */ .member-nav { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0.1rem; border-bottom: 1px solid var(--line, #e7e0d4); padding-bottom: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .member-nav::-webkit-scrollbar { display: none; } .member-nav-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.6rem 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .member-nav-ic { flex: none; display: inline-flex; } .member-nav-ic svg { width: 1.05rem; height: 1.05rem; opacity: 0.9; } .member-nav-link:hover { color: var(--slate); } .member-nav-link.is-active { color: var(--slate); border-bottom-color: var(--ember, var(--slate)); } .member-nav-link.is-locked { color: var(--ink-faint, #a9a093); opacity: 0.55; cursor: not-allowed; pointer-events: none; } .member-nav-link.is-locked:hover { color: var(--ink-faint, #a9a093); } .member-nav-link.is-locked svg { width: 0.82rem; height: 0.82rem; margin-left: 0.3rem; vertical-align: -1px; } .member-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.35rem; margin-left: 0.35rem; border-radius: 999px; background: var(--ember); color: #fff; font-size: 0.72rem; font-weight: 700; } /* Benefits shown but inactive (membership needs attention): greyed, no ticks. */ .tier-list.is-muted li { color: var(--ink-faint, #a9a093); } .tier-list.is-muted li svg { display: none; } .tier-list.is-muted li::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; border-radius: 4px; border: 1.5px dashed var(--line, #d9d1c2); } /* ── Event cards ── */ .ev-card { display: flex; flex-direction: column; height: 100%; background: var(--card, #fff); border: 1px solid var(--line-soft, #e7e0d4); border-radius: var(--radius-lg, 16px); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .ev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage); } .ev-card-img { position: relative; height: 190px; background: linear-gradient(135deg, var(--sage-soft), var(--sage)); display: grid; place-items: center; overflow: hidden; flex: none; } .ev-card--large .ev-card-img { height: clamp(240px, 32vw, 360px); } /* Absolute inset (not a grid-centred child) so the image fills the frame edge to edge; otherwise iOS Safari left the green placeholder gradient showing as a band along the top. The .ev-card-img-ph placeholder still centres via the grid. */ .ev-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ev-card:hover .ev-card-img img { transform: scale(1.04); } .ev-card-img-ph { color: #fff; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; } .ev-date { position: absolute; top: 0.85rem; right: 0.85rem; background: var(--ember); color: #fff; border-radius: 10px; padding: 0.35rem 0.6rem; text-align: center; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .ev-date-day { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; } .ev-date-month { display: block; font-size: 0.66rem; letter-spacing: 0.14em; margin-top: 0.1rem; } .ev-date.is-range .ev-date-day { font-size: 1.05rem; letter-spacing: -0.02em; } .yt-embed { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 0.9rem 0; border-radius: 12px; overflow: hidden; background: #000; } .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ev-card-body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; } .ev-card--large .ev-card-body { padding: clamp(1.5rem, 3vw, 2.25rem); } .ev-card-tags { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin-bottom: var(--sp-sm); } .ev-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-deep); background: var(--sage-wash); padding: 0.25em 0.7em; border-radius: 999px; } .ev-tag-member { color: var(--ember-deep); background: #fbe7dd; } /* Event source: official ASA event vs a member-submitted one. */ .ev-tag-asa { color: #fff; background: var(--slate); } .ev-tag-member-event { color: #7a5310; background: #f6e7c6; } .ev-name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--slate-ink, var(--ink)); margin: 0; } .ev-card--large .ev-name { font-size: clamp(1.6rem, 3vw, 2.4rem); } .ev-sum { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; margin-top: var(--sp-half); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .ev-card--large .ev-sum { -webkit-line-clamp: 5; font-size: 1.05rem; } .ev-code { margin-top: 0.75rem; background: var(--sage-wash); border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.9rem; } .ev-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-top: auto; padding-top: 1.1rem; } .ev-actions .btn { white-space: nowrap; } /* Horizontal (our-story-style) feature: image beside the content. */ .ev-card--horizontal { flex-direction: row; } .ev-card--horizontal .ev-card-img { width: 46%; height: auto; align-self: stretch; min-height: 280px; } .ev-card--horizontal .ev-card-body { flex: 1; justify-content: center; } @media (max-width: 720px) { .ev-card--horizontal { flex-direction: column; } .ev-card--horizontal .ev-card-img { width: 100%; min-height: 0; height: 200px; } } /* Event detail modal body */ .evm-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; margin-bottom: var(--sp-md); } .evm-meta { color: var(--ember-deep); font-weight: 600; font-size: 0.95rem; margin-top: 0.3rem; } .evm-body { color: var(--ink-soft); line-height: 1.6; white-space: pre-wrap; margin-top: 0.85rem; } .evm-code { margin-top: var(--sp-md); background: var(--sage-wash); border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.92rem; } .evm-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: var(--sp-lg); } /* ── Community forum ── */ .forum-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-md); } .forum-cat { text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease; } .forum-cat:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .forum-cat h3 { color: var(--slate-ink, var(--ink)); } /* Titled cards: each forum group is one card with a header band (title + sub + optional badge), a divider, then its rows. */ .forum-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: var(--sp-lg); } /* Group header reads as a distinct tinted "shelf" with a larger display-serif title and a per-type left accent, so it never blurs into the category rows below it (which are sans-serif, 1rem). */ .forum-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line-soft); background: var(--paper); } .forum-card-title { font-size: 1.32rem; line-height: 1.15; letter-spacing: -0.01em; } .forum-card-sub { color: var(--ink-soft); font-size: 0.85rem; margin: 0.15rem 0 0; } .forum-card.is-pro .forum-card-head { background: color-mix(in srgb, var(--ember) 7%, var(--card)); } .forum-card.is-official .forum-card-head { background: color-mix(in srgb, var(--slate) 7%, var(--card)); } .forum-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md); padding: 0.85rem 1.5rem; text-decoration: none; color: inherit; border-top: 1px solid var(--line, #ece5d8); } .forum-row:first-child { border-top: none; } .forum-row:hover { background: var(--sage-wash); } .forum-row-title { display: block; font-weight: 600; color: var(--ink); } .forum-row-meta { display: block; font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.15rem; } .forum-row-count { flex: none; font-size: 0.82rem; color: var(--ink-faint); white-space: nowrap; } .forum-body { color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; } .forum-body p { margin: 0 0 0.75rem; } .forum-body p:last-child { margin-bottom: 0; } .forum-body code { background: var(--sage-wash); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; } /* Prose spacing for a rendered post body. The global reset zeroes heading, list and quote margins and .forum-body only restored

, so real markdown headings and lists (which replaced bold pseudo-headings) rendered cramped, and quotes looked like plain text. */ .forum-body h2, .forum-body h3, .forum-body h4 { line-height: 1.3; margin: 1.6rem 0 0.5rem; } .forum-body h4 { margin-top: 1.25rem; } .forum-body ul, .forum-body ol { margin: 0 0 0.9rem; padding-left: 1.5rem; } .forum-body li { margin: 0 0 0.35rem; } .forum-body li:last-child { margin-bottom: 0; } .forum-body blockquote { margin: 1.1rem 0; padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--sage) 10%, transparent); color: var(--ink-soft); } .forum-body > :first-child { margin-top: 0; } /* Links inside rendered markdown (renderSiteMarkdown output) read as links, not body text. The global `a { color: inherit; text-decoration: none }` hides them, so every markdown-render surface opts back in here. */ .forum-body a, .of-md a, .cl-summary a, .article-body a, .rem-rendered a, .apm-prose a { color: var(--ember-deep, #b3552f); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; } .forum-body a:hover, .of-md a:hover, .cl-summary a:hover, .article-body a:hover, .rem-rendered a:hover, .apm-prose a:hover { color: var(--ember); } .forum-author { color: var(--slate); text-decoration: none; } .forum-author:hover { text-decoration: underline; } .forum-del, .forum-report { background: none; border: none; padding: 0; font-size: 0.8rem; color: var(--ink-faint); cursor: pointer; text-decoration: underline; } .forum-del:hover, .forum-report:hover { color: var(--ember-deep); } .forum-report[disabled] { text-decoration: none; cursor: default; } /* ── Trust band (logos / affiliations) ─────────────────────────── */ .trust-band { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; } .trust-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-half); text-align: center; color: var(--ink-soft); } .trust-item .badge { font-family: var(--font-display); font-size: 1.6rem; color: var(--slate); } /* ── Pill / tag ────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 0.85em; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; background: var(--sage-wash); color: var(--sage-deep); } .pill-ember { background: color-mix(in srgb, var(--ember) 14%, transparent); color: var(--ember-deep); } /* ── Reveal on scroll ──────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ── Skip link ─────────────────────────────────────────────────── */ .skip-link { position: absolute; left: -999px; top: 0; z-index: var(--z-nav); background: var(--slate); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } /* ── Forms (base) ──────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: 1.1rem; } /* The [hidden] attr must beat .field's display:flex, so JS-toggled fields (the marketplace listing fields, the expert "Other expertise" box) actually hide. */ .field[hidden] { display: none; } /* Custom checkbox + radio. The native iOS control (accent-color + a scale transform) rendered oversized with an odd border, and distorted to an oval inside flex labels. Draw our own so it's consistent + clean on iOS, Android and desktop. `.jchip` inputs (position:absolute; opacity:0; 1px) and other visually-hidden inputs override this with their own rules and stay hidden. */ input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; flex: none; box-sizing: border-box; width: 1.2em; height: 1.2em; margin: 0; border: 1.5px solid color-mix(in srgb, var(--ink-faint) 80%, transparent); background: var(--card); cursor: pointer; display: inline-grid; place-content: center; vertical-align: -0.22em; transition: background 0.12s ease, border-color 0.12s ease; } input[type="checkbox"] { border-radius: 0.34em; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]::before { content: ""; width: 0.68em; height: 0.68em; transform: scale(0); background: #fff; transition: transform 0.1s ease-in-out; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } input[type="radio"]::before { content: ""; width: 0.58em; height: 0.58em; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.1s ease-in-out; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--sage-deep); border-color: var(--sage-deep); } input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; } input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; } /* Every uploader uses a `hidden` file input (display:none) triggered by a custom button via .click(). iOS Safari opens the picker unreliably for display:none inputs (it can take two taps or do nothing). Keep them RENDERED but off-screen so the picker opens on the first tap. !important beats the UA [hidden] rule. */ input[type="file"][hidden] { display: block !important; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none; } .field label { font-weight: 600; font-size: 0.9rem; color: var(--slate-ink); } .field input, .field select, .field textarea { font: inherit; padding: 0.8em 0.95em; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px var(--sage-wash); } .hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } /* ── Branded select (branded-select.js enhances .field select) ── The button mirrors the native field look; the native select stays in the box (invisible, click-through) so form submission + validation still work. */ .bsel { position: relative; } .bsel-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; } .bsel-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; font: inherit; padding: 0.8em 0.95em; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .bsel-btn:hover { border-color: var(--sage); } .bsel.is-open .bsel-btn, .bsel-btn:focus-visible { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px var(--sage-wash); } .bsel-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsel-label.is-placeholder { color: var(--ink-faint); } .bsel-caret { flex: none; color: var(--ink-soft); transition: transform 0.18s ease; } .bsel.is-open .bsel-caret { transform: rotate(180deg); } /* position: fixed (positioned by branded-select.js from the trigger rect) so the menu escapes any card/panel `overflow: hidden` clip instead of being cut off. */ .bsel-panel { position: fixed; z-index: var(--z-dropdown); background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.35rem; max-height: 16rem; overflow-y: auto; display: none; } .bsel.is-open .bsel-panel { display: block; } .bsel-group { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); padding: 0.55rem 0.7rem 0.3rem; } .bsel-group:first-child { padding-top: 0.3rem; } .bsel-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); width: 100%; font: inherit; text-align: left; padding: 0.6rem 0.7rem; border: none; background: none; border-radius: 8px; color: var(--ink); cursor: pointer; } .bsel-opt:hover, .bsel-opt.is-active { background: var(--sage-wash); } .bsel-opt.is-sel { color: var(--slate-ink); font-weight: 650; } .bsel-opt.is-sel::after { content: "✓"; flex: none; color: var(--sage-deep); font-weight: 700; } .geo-loading { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem; color: var(--ink-soft); font-size: 0.9rem; } .geo-spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--sage-deep); border-radius: 50%; animation: geo-spin 0.6s linear infinite; flex: 0 0 auto; } @keyframes geo-spin { to { transform: rotate(360deg); } } .bsel-opt.is-disabled { color: var(--ink-faint); cursor: default; } .bsel-opt.is-disabled:hover { background: none; } /* Portal sub-tabs (e.g. Events: All events / My events) */ .portal-tabs { display: flex; gap: 0.3rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); } .portal-tabs a { padding: 0.5rem 0.9rem; font-weight: 600; font-size: 0.95rem; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .portal-tabs a:hover { color: var(--ink); } .portal-tabs a.is-active { color: var(--slate-ink, var(--ink)); border-bottom-color: var(--sage-deep); } /* ── Markdown toolbar (textarea[data-md]) ── */ .md-editor { display: flex; flex-direction: column; width: 100%; } .md-toolbar { display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.3rem 0.4rem; background: var(--sage-wash); border: 1.5px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0; } .md-btn { border: 1px solid transparent; background: none; border-radius: 7px; padding: 0.28rem 0.55rem; font-size: 0.82rem; font-weight: 600; line-height: 1; color: var(--slate-ink); cursor: pointer; min-width: 30px; } .md-btn:hover { background: var(--card); border-color: var(--line); } .md-btn:active { background: var(--sage-soft); } .md-editor textarea { width: 100%; border-radius: 0 0 12px 12px; } /* ── WYSIWYG markdown editor (mdedit.js) ── */ .mde { display: flex; flex-direction: column; width: 100%; position: relative; } .mde-bar { display: flex; flex-wrap: wrap; gap: 0.2rem; align-items: center; padding: 0.3rem 0.4rem; background: var(--sage-wash); border: 1.5px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0; } .mde-bar .mde-merge { margin-left: auto; } .mde-input { min-height: 12rem; max-height: 34rem; overflow-y: auto; padding: 0.85rem 1rem; border: 1.5px solid var(--line); border-radius: 0 0 12px 12px; background: var(--card, #fff); color: var(--ink); font-size: 0.97rem; line-height: 1.6; outline: none; } .mde-input:focus { border-color: var(--sage-deep); } .mde-input[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--ink-faint); } .mde-input > :first-child { margin-top: 0; } /* Two-field link popover (display text + URL). */ .mde-linkpop { position: absolute; top: 2.9rem; left: 0.5rem; z-index: var(--z-sheet, 50); width: min(20rem, calc(100% - 1rem)); background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,26,28,0.18); padding: 0.7rem 0.75rem; gap: 0.5rem; } /* Gate display behind :not([hidden]) so setting the `hidden` attribute actually hides the popup. A bare `display: grid` here (author origin) beats the UA `[hidden] { display: none }` rule, which left the link box impossible to dismiss (Cancel / Escape / click-away all set hidden=true but it stayed shown). */ .mde-linkpop:not([hidden]) { display: grid; } /* Header with an always-reachable close (x): the primary escape on mobile, where the keyboard can cover Cancel, there is no Escape key, and outside-tap is unreliable on iOS. */ .mde-lp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.05rem; } .mde-lp-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); } .mde-lp-x { border: none; background: none; font-size: 1.4rem; line-height: 1; padding: 0 0.2rem; margin: -0.25rem -0.25rem 0 0; color: var(--ink-soft); cursor: pointer; border-radius: 6px; } .mde-lp-x:hover { color: var(--ink); background: var(--sage-wash); } .mde-linkpop label { display: grid; gap: 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); } .mde-linkpop input { padding: 0.42em 0.6em; border: 1.5px solid var(--line); border-radius: 7px; font: inherit; font-size: 0.92rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--card, #fff); } .mde-linkpop input:focus { outline: none; border-color: var(--sage-deep); } .mde-lp-row { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.1rem; } .mde-lp-add { background: var(--ember); border-color: var(--ember); color: #fff; } .mde-lp-add:hover { background: var(--ember-deep); border-color: var(--ember-deep); } .mde-input > :last-child { margin-bottom: 0; } .mde-input h1, .mde-input h2, .mde-input h3 { font-family: var(--font-serif, Georgia), serif; line-height: 1.25; margin: 0.6em 0 0.4em; color: var(--ink); } .mde-input h1 { font-size: 1.5rem; } .mde-input h2 { font-size: 1.25rem; } .mde-input h3 { font-size: 1.08rem; } .mde-input p, .mde-input div { margin: 0 0 0.7em; } .mde-input ul { margin: 0 0 0.7em; padding-left: 1.4rem; } .mde-input li { margin: 0 0 0.25em; } .mde-input blockquote { margin: 0 0 0.7em; padding: 0.4em 0.9em; background: var(--sage-wash); border: 1px solid var(--line-soft); border-radius: 8px; color: var(--ink-soft); } .mde-input a { color: var(--sage-deep); } .mde-input code { background: var(--sage-wash); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; } /* ── Image cropper (cropper.js): full image + 3:4 selection box ── */ .cropper-wp { position: relative; display: inline-block; max-width: 100%; line-height: 0; touch-action: none; user-select: none; } .cropper-wp .cropper-img { display: block; max-width: 100%; max-height: 56vh; width: auto; height: auto; -webkit-user-drag: none; user-select: none; } .cropper-sel { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(20, 26, 28, 0.55); cursor: move; } .cropper-sel .ch { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--sage-deep); border-radius: 50%; box-sizing: border-box; } .cropper-sel .ch.tl { left: -8px; top: -8px; cursor: nwse-resize; } .cropper-sel .ch.tr { right: -8px; top: -8px; cursor: nesw-resize; } .cropper-sel .ch.bl { left: -8px; bottom: -8px; cursor: nesw-resize; } .cropper-sel .ch.br { right: -8px; bottom: -8px; cursor: nwse-resize; } /* ── Confirmation popover (confirm.js) ── */ .confirm-backdrop { position: fixed; inset: 0; z-index: var(--z-confirm); background: rgba(20, 26, 28, 0.12); } .confirm-pop { position: fixed; z-index: calc(var(--z-confirm) + 1); width: min(310px, calc(100vw - 16px)); background: var(--card, #fff); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 18px 48px rgba(20, 26, 28, 0.3); padding: 1rem 1.05rem 0.9rem; animation: confirmIn 0.13s ease-out; } .confirm-pop.is-centered { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); } .confirm-msg { margin: 0 0 0.85rem; font-size: 0.93rem; line-height: 1.5; color: var(--ink); } .confirm-input { width: 100%; margin: 0 0 0.85rem; padding: 0.55em 0.7em; border: 1.5px solid var(--line); border-radius: 9px; font: inherit; font-size: 0.9rem; resize: vertical; color: var(--ink); background: var(--card, #fff); } .confirm-input:focus { outline: none; border-color: var(--sage); } .confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-half); } .confirm-arrow { position: absolute; width: 12px; height: 12px; background: var(--card, #fff); border: 1px solid var(--line); transform: rotate(45deg); } .confirm-pop.place-below .confirm-arrow { top: -7px; border-right: none; border-bottom: none; } .confirm-pop.place-above .confirm-arrow { bottom: -7px; border-left: none; border-top: none; } .confirm-ok-danger { --btn-bg: var(--ember); --btn-fg: #fff; background: var(--ember); color: #fff; } .confirm-ok-danger:hover { background: var(--ember-deep); } @keyframes confirmIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .confirm-pop.is-centered { animation: none; } /* Merge-field pill + insert menu (used in the editor toolbar) */ .mf-pill { display: inline-block; padding: 0.05em 0.55em; border-radius: 999px; background: var(--sage-soft, #dceae0); color: var(--sage-deep, #2f5d49); font-size: 0.85em; font-weight: 600; line-height: 1.45; white-space: nowrap; } /* In-editor preview of a CTA button (email composers). Mirrors the ember button the email renderer produces; click it to edit its text / link. */ .mde-cta-wrap { text-align: left; margin: 0.6rem 0; } .mde-cta { display: inline-block; padding: 0.7em 1.6em; border-radius: 9px; background: var(--ember, #cf6a43); color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 2px rgba(20,26,28,0.15); } .mde-cta-wrap:hover .mde-cta { background: var(--ember-deep, #b3552f); } .merge-trigger { display: inline-flex; align-items: center; gap: 0.25rem; } .composer-merge, .mde-merge { position: relative; display: inline-flex; } .merge-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: var(--z-dropdown); min-width: 150px; padding: 0.3rem; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 28px rgba(20,26,28,0.16); } .merge-menu[hidden] { display: none; } .merge-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.45rem 0.6rem; border-radius: 6px; font-size: 0.88rem; font-weight: 500; color: var(--ink); cursor: pointer; } .merge-menu button:hover { background: var(--sage-wash); } :focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; border-radius: 4px; } /* ── Image lightbox (carried from BMS, retuned) ────────────────── */ .image-lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: none; align-items: center; justify-content: center; } .image-lightbox.is-open { display: flex; } .image-lightbox-overlay { position: absolute; inset: 0; background: rgba(20,38,44,0.85); backdrop-filter: blur(4px); } .image-lightbox-box { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; } .image-lightbox-img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: var(--shadow-lg); } .image-lightbox-close { position: absolute; top: -3rem; right: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: none; display: flex; align-items: center; justify-content: center; } .image-lightbox-credit { color: #cdd9d4; font-size: 0.85rem; margin-top: var(--sp-sm); text-align: center; } /* ── Modal (reusable: data-modal-open="" / data-modal-close) ──── */ .asa-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--sp-md); opacity: 0; transition: opacity 0.2s var(--ease); } .asa-modal[hidden] { display: none; } .asa-modal.is-open { opacity: 1; } .asa-modal-overlay { position: absolute; inset: 0; background: rgba(20, 38, 44, 0.7); backdrop-filter: blur(3px); cursor: pointer; } .asa-modal-box { position: relative; z-index: 1; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-2xl); width: min(100%, 520px); max-height: 90svh; overflow-y: auto; overflow-x: hidden; transform: translateY(10px); transition: transform 0.2s var(--ease); } /* Let grid children shrink so two-column rows never force a horizontal scroll. */ .asa-modal-box .grid > * { min-width: 0; } .asa-modal-box input, .asa-modal-box select, .asa-modal-box textarea { max-width: 100%; } /* Settle to `none`, not `translateY(0)`: an identity transform still makes the box a containing block for position:fixed children, which traps branded-select dropdown panels inside the box's overflow and clips their options. */ .asa-modal.is-open .asa-modal-box { transform: none; } .asa-modal-close { position: absolute; top: 0.85rem; right: 0.85rem; flex: none; aspect-ratio: 1; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--sage-wash); color: var(--slate); display: grid; place-items: center; cursor: pointer; z-index: 4; } .asa-modal-close svg { width: 20px; height: 20px; } .asa-modal-close:hover { background: var(--sage-soft); } /* ── Slide-up sheet skin for .asa-modal (drag-to-dismiss via modal-sheet.js) ── On phones + tablets the centered dialog becomes a bottom sheet: anchored to the bottom, rounded top, sliding up, with a big drag handle (the tiny close X was a poor tap target on tablet). Full-width on phones; on wider tablets it's capped to a centered ~560px card. Desktop (>1024px) keeps the centered box. The grip is the drag handle; the close button and backdrop tap still work. */ .asa-sheet-grip { display: none; } @media (max-width: 1024px) { .asa-modal { align-items: flex-end; padding: 0; } .asa-modal-box { width: min(100%, 560px); max-width: none; max-height: 92svh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-top: calc(var(--sp-2xl, 2rem) + 6px); padding-bottom: calc(var(--sp-2xl, 2rem) + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1); touch-action: pan-y; } .asa-modal.is-open .asa-modal-box { transform: none; } .asa-sheet-grip { display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 26px; touch-action: none; cursor: grab; z-index: 3; } .asa-sheet-grip::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 999px; background: var(--line); } } /* Honour reduced-motion for the modal/sheet slide. */ @media (prefers-reduced-motion: reduce) { .asa-modal-box { transition-duration: 0.01ms; } } /* Event landing-page modal: a large frame that holds the chromeless /l/. */ .landing-modal { padding: clamp(0.5rem, 3vw, 2rem); } .landing-modal-box { position: relative; z-index: 1; width: min(100%, 1000px); height: min(88svh, 920px); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(10px); transition: transform 0.2s var(--ease); } .landing-modal.is-open .landing-modal-box { transform: translateY(0); } .landing-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--paper); opacity: 0; transition: opacity 0.25s ease; } .landing-frame.is-loaded { opacity: 1; } .landing-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--card); color: var(--slate); box-shadow: 0 4px 14px rgba(20,26,28,0.22); display: grid; place-items: center; cursor: pointer; transition: background 0.12s; } .landing-modal-close:hover { background: var(--sage-wash); } .asa-modal-title { margin-top: var(--sp-xs); } .asa-modal-blurb { color: var(--ink-soft); margin-top: var(--sp-sm); margin-bottom: var(--sp-lg); font-size: 0.95rem; } .submit-status { margin-top: 0.85rem; font-size: 0.9rem; } .submit-status.ok { color: var(--sage-deep); font-weight: 600; } .submit-status.err { color: var(--ember-deep); font-weight: 600; } /* ── Forum v2: voting, sorting, gated boards, images ─────────────────── */ .forum-badge { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px; white-space: nowrap; } .forum-badge-pro { background: var(--ember); color: #fff; } .forum-badge-official { background: var(--slate); color: #fff; } /* Light community-guidelines microcopy: a single quiet line that links out to the Code of Conduct, instead of the old centred warning-triangle block. */ .forum-note { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--ink-faint); margin: 0 0 1.1rem; line-height: 1.45; } .forum-note svg { flex: none; width: 14px; height: 14px; color: var(--sage-deep); } .forum-note a { color: var(--slate); text-decoration: underline; font-weight: 600; } .forum-note a:hover { color: var(--ember-deep); } .forum-readonly { font-size: 0.88rem; color: var(--ink-soft); background: color-mix(in srgb, var(--slate) 7%, transparent); border: 1px solid var(--line-soft); border-radius: 10px; padding: 0.7rem 0.95rem; margin-bottom: var(--sp-md); } /* Sort tabs */ .forum-sort { display: inline-flex; gap: 0.25rem; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.2rem; } .forum-sort a { padding: 0.32rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; } .forum-sort a:hover { color: var(--slate-ink); } .forum-sort a.is-active { background: var(--slate); color: #fff; } /* Vote widget (vertical) */ .votebox { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; flex: none; } .vote-btn { display: inline-grid; place-items: center; width: 28px; height: 26px; border: none; background: none; cursor: pointer; color: var(--ink-faint); border-radius: 6px; padding: 0; } .vote-btn:hover { background: var(--sage-wash); color: var(--slate-ink); } .vote-btn.is-on.up { color: var(--ember); } .vote-btn.is-on.down { color: var(--slate); } .vote-btn svg { width: 18px; height: 18px; display: block; } .vote-score { font-size: 0.85rem; font-weight: 700; color: var(--ink); min-width: 1.5em; text-align: center; } .vote-score.pos { color: var(--ember-deep); } .vote-score.neg { color: var(--slate); } /* Reddit-style list row: vote rail + content */ .forum-item { display: flex; gap: 0.85rem; align-items: center; padding: 0.85rem 1.25rem; text-decoration: none; color: inherit; border-top: 1px solid var(--line, #ece5d8); position: relative; } .forum-item:first-child { border-top: none; } /* The whole card links into the thread (stretched link), except the votebox. */ .forum-item-title::after { content: ""; position: absolute; inset: 0; } .forum-item .votebox { position: relative; z-index: 1; } .forum-item:hover .forum-item-title { text-decoration: underline; } .forum-item:hover { background: var(--sage-wash); } .forum-item .votebox { padding-top: 0; } .forum-item-main { flex: 1; min-width: 0; } .forum-item-title { display: block; font-weight: 650; color: var(--ink); line-height: 1.3; } .forum-item-meta { display: flex; flex-wrap: wrap; gap: var(--sp-half); font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.2rem; } .forum-item-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; align-self: center; } .forum-item-imgs { font-size: 0.75rem; color: var(--ink-faint); } /* Thread detail post with a vote rail */ .forum-post { display: flex; gap: var(--sp-md); } .forum-post .votebox { padding-top: 0.2rem; } .forum-post-main { flex: 1; min-width: 0; } .forum-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-half); margin: 0.85rem 0 0.2rem; } .forum-gallery a { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-soft); aspect-ratio: 1; } .forum-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Forum v3: distinct original post + nested comments ── */ .forum-back { color: var(--slate); text-decoration: underline; font-size: 0.9rem; } .forum-op { margin-bottom: var(--sp-lg); border-color: var(--sage); box-shadow: var(--shadow-sm); } /* Let the overflow (…) menu escape the card's rounded clip; the menu's z-index keeps it above the comments section that follows. */ .forum-op.card { overflow: visible; } .forum-op .card-body { padding: var(--sp-xl); } .forum-op-grid { display: flex; gap: var(--sp-md); } .forum-op-grid > .votebox { padding-top: 0.2rem; } .forum-op-main { flex: 1; min-width: 0; } .forum-op-flags { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; margin: 0 0 0.5rem; } /* ASA-announcement marker: an SVG megaphone (no emoji). */ .forum-op-announce { display: inline-flex; align-items: center; gap: 0.35em; } .foa-ico { display: inline-block; vertical-align: -0.18em; line-height: 0; flex: none; } /* max-width:none overrides the global `svg { max-width: 100% }`, which otherwise caps the icon at its (collapsed, 0-width) flex container = an invisible glyph. */ .foa-ico svg { display: block; width: 1.05em; height: 1.05em; max-width: none; } .forum-dock-closed .foa-ico { margin-right: 0.3em; } /* Locked-thread banner (admin lock reason shown to members). */ .forum-locked-banner { display: flex; align-items: flex-start; gap: 0.65rem; background: var(--ember-wash, #f7e9e3); border: 1px solid color-mix(in srgb, var(--ember) 40%, transparent); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 1.1rem; } .forum-locked-banner svg { flex: none; margin-top: 0.15rem; color: var(--ember-deep); } .forum-locked-banner > div { min-width: 0; line-height: 1.5; } .forum-locked-banner strong { color: var(--ember-deep); } .forum-locked-reason { color: var(--ink); } .forum-locked-sub { display: block; color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.05rem; } .forum-op-actions { display: flex; gap: var(--sp-xs); align-items: center; margin-top: var(--sp-md); flex-wrap: wrap; } .forum-op-actions .fc-act { display: inline-flex; align-items: center; gap: 0.35rem; } /* Comment composer (top level + inline reply) */ .forum-composer { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 0.85rem; margin-bottom: var(--sp-lg); } .forum-composer .form-status { margin: 0.5rem 0 0; } .fc-reply-form { margin: 0.55rem 0 0.2rem; padding: 0.7rem; } .forum-comments-h { font-size: 1.05rem; color: var(--slate-ink); margin: 0 0 0.6rem; } .forum-comments { display: flex; flex-direction: column; gap: 0.1rem; } /* Sticky composer dock: as the last content element, sticky-bottom keeps it at the foot of the screen while you scroll the thread, then it parks above the footer. Compact pill until tapped, then the full editor. */ .forum-dock { position: sticky; bottom: 0; z-index: var(--z-sticky); background: var(--paper); margin-top: 0.75rem; padding: 0.7rem 0 0.85rem; border-top: 1px solid var(--line-soft); } .forum-dock-bar { display: flex; align-items: center; gap: var(--sp-sm); width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 0.72rem 1.15rem; cursor: text; font: inherit; color: var(--ink-faint); transition: border-color 0.15s; } .forum-dock-bar:hover { border-color: var(--sage); } .forum-dock-ph { flex: 1; } .forum-dock-icon { color: var(--slate); display: inline-grid; place-items: center; } .forum-dock-icon svg { width: 18px; height: 18px; } .forum-dock-form { display: none; margin-bottom: 0; } .forum-dock.is-expanded .forum-dock-bar { display: none; } .forum-dock.is-expanded .forum-dock-form { display: block; } .forum-dock-foot { display: flex; gap: var(--sp-half); justify-content: flex-end; margin-top: var(--sp-sm); } .forum-dock-closed { color: var(--ink-faint); font-size: 0.9rem; text-align: center; padding: 1rem 0; } /* A comment node: clickable collapse rail + the body column. */ .fc { display: flex; gap: var(--sp-half); } .fc-rail { flex: none; width: 16px; border: none; background: none; padding: 0; cursor: pointer; position: relative; align-self: stretch; } .fc-rail::before { content: ""; position: absolute; left: 7px; top: 2px; bottom: 0; width: 2px; background: var(--line-soft); border-radius: 2px; transition: background 0.15s; } /* Hovering an arm highlights that comment + its whole branch (set in JS). */ .fc-rail:hover::before, .fc.is-arm-hover > .fc-rail::before { background: var(--sage); width: 2.5px; } .fc-main { flex: 1; min-width: 0; padding: 0.45rem 0 0.3rem; } .fc-head { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; } /* Reddit-style circular collapse toggle. */ .fc-toggle { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; font-size: 0.95rem; line-height: 1; display: grid; place-items: center; border-radius: 50%; } .fc-toggle:hover { background: var(--sage-wash); color: var(--slate-ink); border-color: var(--sage); } .fc-byline { display: inline-flex; align-items: center; gap: var(--sp-xs); min-width: 0; } .fc-author { color: var(--slate-ink); font-weight: 650; font-size: 0.88rem; } .fc-author a { color: var(--slate-ink); text-decoration: none; } .fc-author a:hover { text-decoration: underline; } .fc-time { color: var(--ink-faint); font-size: 0.78rem; } .fc-deleted { color: var(--ink-faint); font-style: italic; font-weight: 500; } .fc-collapsed-note { color: var(--ink-faint); font-size: 0.78rem; } /* A2: "edited" marker + inline edit form (forum post editing). */ .fc-edited { color: var(--ink-faint); font-size: 0.74rem; font-style: italic; } button.fc-edited { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; font-family: inherit; } button.fc-edited:hover { color: var(--slate); } .fc-edit-form { margin: 0.4rem 0 0.2rem; } .fc-edit-form textarea { width: 100%; } .fc-edit-actions { display: flex; gap: var(--sp-half); justify-content: flex-end; margin-top: var(--sp-half); } #forum-history-list .fh-version { border-top: 1px solid var(--line-soft); padding-top: 0.8rem; margin-top: 0.8rem; } #forum-history-list .fh-version:first-child { border-top: 0; padding-top: 0; margin-top: 0; } #forum-history-list .fh-when { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: var(--sp-xs); } /* A3: forum link preview card + composer live preview. */ .flink-card { display: flex; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: var(--card); margin-top: 0.85rem; max-width: 32rem; transition: border-color 0.14s ease; } .flink-card:hover { border-color: var(--sage); } .flink-img { flex: none; width: 7.5rem; background: var(--sage-wash); } .flink-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .flink-body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.85rem; min-width: 0; } .flink-domain { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); } .flink-title { font-weight: 650; color: var(--slate-ink); line-height: 1.3; font-size: 0.95rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .flink-desc { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .flink-preview { position: relative; margin-top: var(--sp-sm); } .flink-preview .flink-x { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; z-index: 2; } .flink-preview .flink-x:hover { border-color: var(--ember); color: var(--ember-deep); } .forum-item-link { display: inline-flex; align-items: center; gap: 0.25rem; } @media (max-width: 520px) { .flink-img { width: 5rem; } } /* A5: official post attachments. */ .fatt-list { margin-top: 0.85rem; max-width: 32rem; } .fatt-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin: 0 0 0.4rem; } .fatt { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); text-decoration: none; color: inherit; margin-bottom: var(--sp-xs); transition: border-color 0.14s ease; } .fatt:hover { border-color: var(--sage); } .fatt-ext { flex: none; min-width: 2.6rem; height: 2.6rem; padding: 0 0.3rem; border-radius: 8px; background: var(--sage-wash); color: var(--slate); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; display: grid; place-items: center; } .fatt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .fatt-name { font-weight: 600; color: var(--slate-ink); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fatt-meta { font-size: 0.78rem; color: var(--ink-soft); } .fatt-dl { flex: none; color: var(--ink-faint); } .fatt:hover .fatt-dl { color: var(--slate); } /* Composer attachment rows (admin). */ .fatt-up { display: flex; align-items: center; gap: var(--sp-sm); padding: 0.45rem 0.6rem; border: 1px solid var(--line-soft); border-radius: 9px; margin-bottom: var(--sp-xs); } .fatt-up input.fatt-desc { flex: 1; min-width: 0; } .fatt-up .fimg-x { flex: none; } /* A6: locked discussion boards (Enthusiast sees they exist, can't open). */ .forum-crow.is-locked { opacity: 0.62; cursor: default; } .forum-crow.is-locked:hover { transform: none; box-shadow: none; background: var(--card); border-color: var(--line-soft); } .forum-crow-lock { color: var(--ink-faint); margin-right: 0.15rem; flex: none; } .forum-card.is-locked-card { border: 1px dashed var(--line); } .fc-collapsible { padding-top: 0.3rem; } .fc .forum-body { font-size: 0.95rem; } .fc-actions { display: flex; align-items: center; gap: var(--sp-xs); margin-top: 0.35rem; flex-wrap: wrap; } .fc-actions-r { display: flex; align-items: center; gap: 0.1rem; } .fc-iconbtn { display: inline-flex; align-items: center; gap: 0.3rem; border: none; background: none; color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; cursor: pointer; padding: 0.4em 0.55em; border-radius: 999px; line-height: 1; } .fc-iconbtn:hover { background: var(--sage-wash); color: var(--slate-ink); } .fc-ico { display: inline-grid; place-items: center; flex: none; } .fc-ico svg { width: 16px; height: 16px; display: block; } .fc-iconbtn-label { white-space: nowrap; } /* Overflow (…) menu */ .fc-menu-wrap { position: relative; } .fc-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-dropdown); min-width: 9.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 0.3rem; display: flex; flex-direction: column; } .fc-menu[hidden] { display: none; } .fc-menu-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; border: none; background: none; text-align: left; font: inherit; font-size: 0.85rem; color: var(--ink); padding: 0.5em 0.6em; border-radius: 8px; cursor: pointer; } .fc-menu-item:hover { background: var(--sage-wash); } .fc-menu-item .fc-ico svg { width: 15px; height: 15px; } .fc-menu-danger { color: var(--ember-deep); } .fc-menu-danger:hover { background: var(--ember-wash, #f7e9e3); } /* "N more replies" link for long chains */ .fc-more { display: inline-flex; align-items: center; border: none; background: none; color: var(--slate); font-weight: 650; font-size: 0.82rem; cursor: pointer; padding: 0.35em 0; margin: 0.1rem 0 0.35rem; } .fc-more:hover { text-decoration: underline; } .fc-children.is-trimmed { display: none; } .fc-replybox:empty { display: none; } .fc-children { margin-top: 0.1rem; } /* Collapsed: only the head row stays. */ .fc.is-collapsed > .fc-main > .fc-collapsible { display: none; } /* Compact horizontal vote for comments. */ .votebox-row { flex-direction: row; gap: 0.25rem; align-items: center; } .votebox-row .vote-btn { width: 24px; height: 22px; } .votebox-row .vote-btn svg { width: 15px; height: 15px; } .votebox-row .vote-score { font-size: 0.8rem; min-width: 1.1em; } /* Responsive YouTube embed inside a post body. */ .forum-embed { position: relative; margin: 0.85rem 0; aspect-ratio: 16 / 9; width: 100%; max-width: 560px; border-radius: 12px; overflow: hidden; background: #000; } .forum-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Transient toast (share / report confirmations). */ .asa-toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem); background: var(--slate-ink); color: #fff; padding: 0.6em 1.15em; border-radius: 999px; font-size: 0.85rem; font-weight: 600; z-index: var(--z-toast); opacity: 0; transition: opacity 0.25s, transform 0.25s; box-shadow: var(--shadow-lg); pointer-events: none; } .asa-toast.is-on { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 640px) { .forum-op .card-body { padding: 1.1rem; } .fc { gap: 0.35rem; } .fc-rail { width: 13px; } .fc-rail::before { left: 5px; } /* deep threads stop indenting so they don't run off a phone screen */ .fc-children-flush > .fc > .fc-rail { width: 6px; } /* right-align the action row for thumb reach, icon-only */ .fc-actions { justify-content: flex-end; gap: 0.2rem; } .fc .fc-iconbtn-label { display: none; } .fc-iconbtn { padding: 0.45em 0.5em; } } /* New-thread image picker */ .fimg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--sp-half); margin-top: var(--sp-half); } .fimg-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--sage-wash); } .fimg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fimg-thumb .fimg-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(20,26,28,0.7); color: #fff; cursor: pointer; font-size: 0.7rem; line-height: 1; display: grid; place-items: center; } .fimg-thumb.is-uploading { opacity: 0.55; } .fimg-add { display: inline-flex; align-items: center; gap: var(--sp-xs); align-self: flex-start; } .fimg-grid:empty { display: none; } /* ── Forum image lightbox (gallery viewer, adapted from BMS) ─────────── */ .asa-lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; padding: 4rem 3.5rem 2rem; } .asa-lightbox[hidden] { display: none; } .asa-lightbox-overlay { position: absolute; inset: 0; cursor: pointer; background: rgba(20,26,28,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background 0.2s ease, backdrop-filter 0.34s cubic-bezier(0.22,1,0.36,1), -webkit-backdrop-filter 0.34s cubic-bezier(0.22,1,0.36,1); } .asa-lightbox.is-open .asa-lightbox-overlay { background: rgba(20,26,28,0.93); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); } .asa-lightbox-box { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 100%; max-height: 100%; opacity: 0; transform: scale(0.96); filter: blur(5px); transition: opacity 0.3s cubic-bezier(0.22,1,0.36,1) 0.05s, transform 0.36s cubic-bezier(0.22,1,0.36,1) 0.05s, filter 0.26s ease-out 0.05s; } .asa-lightbox.is-open .asa-lightbox-box { opacity: 1; transform: scale(1); filter: blur(0); } .asa-lightbox-img { display: block; max-width: min(94vw, 1400px); max-height: calc(100vh - 8.5rem); max-height: calc(100svh - 8.5rem); object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); } .asa-lightbox-counter { margin: 0; font-size: 0.8rem; letter-spacing: 0.06em; color: #ede3d2; opacity: 0.8; } .asa-lightbox-close { position: absolute; top: 1.1rem; right: 1.2rem; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(237,227,210,0.1); border: 1px solid rgba(237,227,210,0.3); border-radius: 50%; color: #fff; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .asa-lightbox-close:hover { background: rgba(237,227,210,0.22); border-color: rgba(237,227,210,0.6); } .asa-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; background: rgba(237,227,210,0.1); border: 1px solid rgba(237,227,210,0.3); border-radius: 50%; color: #fff; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .asa-lightbox-nav:hover { background: rgba(237,227,210,0.22); border-color: rgba(237,227,210,0.6); } .asa-lightbox-nav.prev { left: 1rem; } .asa-lightbox-nav.next { right: 1rem; } .asa-lightbox-nav[hidden], .asa-lightbox-counter[hidden] { display: none; } .forum-gallery a { cursor: zoom-in; } @media (max-width: 600px) { .asa-lightbox { padding: 3rem 0.5rem 1.5rem; } .asa-lightbox-nav { width: 40px; height: 40px; } .asa-lightbox-nav.prev { left: 0.4rem; } .asa-lightbox-nav.next { right: 0.4rem; } .asa-lightbox-close { top: 0.7rem; right: 0.7rem; } } /* ── Resource Library ───────────────────────────────────────────────── */ .opt { font-weight: 400; color: var(--ink-faint); font-size: 0.85em; } .rl-upgrade { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; background: color-mix(in srgb, var(--ember) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--ember) 28%, var(--line-soft)); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: var(--sp-xl); } .rl-upgrade strong { display: block; color: var(--ember-deep); font-size: 1.02rem; } .rl-upgrade p { color: var(--ink-soft); font-size: 0.9rem; margin: 0.2rem 0 0; } .rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; } .rl-card { display: flex; flex-direction: column; gap: var(--sp-half); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.15rem; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .rl-card:hover, .rl-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--sage); outline: none; } .rl-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-half); min-height: 1.4rem; } .rl-type { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); background: var(--sage-wash); padding: 0.18rem 0.5rem; border-radius: 999px; } .rl-lock { display: inline-flex; color: var(--ink-faint); } .rl-title { font-size: 1.05rem; line-height: 1.25; } .rl-desc { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rl-meta { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; } .rl-cat { font-size: 0.78rem; font-weight: 600; color: var(--ember-deep); } .rl-sub-line { font-size: 0.74rem; color: var(--ink-faint); } .rl-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .rl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-half); margin-top: 0.35rem; } .rl-dl { display: inline-flex; align-items: center; } .rl-locked-note { font-size: 0.74rem; color: var(--ink-faint); font-weight: 600; } .rl-more { font-size: 0.8rem; font-weight: 600; color: var(--ember-deep); } .rl-card:hover .rl-more { text-decoration: underline; } .rl-detail-head { display: flex; flex-direction: column; gap: var(--sp-xs); align-items: flex-start; } .rl-detail-head h2 { font-size: 1.4rem; line-height: 1.2; } .rl-detail-desc { color: var(--ink-soft); margin: 0.6rem 0 0.8rem; line-height: 1.5; } .rl-detail-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0 0 0.8rem; font-size: 0.9rem; } .rl-detail-facts dt { color: var(--ink-faint); font-size: 0.85rem; } .rl-detail-facts dd { margin: 0; } .rl-detail-actions { margin-top: var(--sp-sm); } .rl-detail-lock { background: var(--sage-wash); border-radius: 10px; padding: 0.85rem 1rem; } .rl-detail-lock p { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--ink-soft); } .rl-file-row { display: flex; align-items: center; gap: 0.7rem; } .rl-file-name { font-size: 0.85rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rl-subs { display: flex; flex-direction: column; gap: var(--sp-sm); } .rl-sub-row { display: flex; gap: 0.85rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 0.85rem 1rem; border: 1px solid var(--line-soft); border-radius: 10px; } .rl-sub-main { min-width: 14rem; flex: 1; display: flex; flex-direction: column; gap: 0.2rem; } .rl-sub-meta { font-size: 0.8rem; color: var(--ink-faint); } .rl-sub-feedback { font-size: 0.82rem; color: var(--ember-deep); background: color-mix(in srgb, var(--ember) 8%, transparent); border-radius: 7px; padding: 0.4rem 0.6rem; margin-top: 0.2rem; } .rl-sub-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-xs); } .rl-sub-actions { display: flex; gap: 0.3rem; } /* ── Shared filter directory (Expert Network + Resource Library) ─────── */ .ex-shop { display: grid; grid-template-columns: 230px 1fr; gap: 1.75rem; align-items: start; } .ex-filters { display: flex; flex-direction: column; gap: var(--sp-half); position: sticky; top: 1.5rem; } .ex-filters-head { display: none; align-items: center; justify-content: space-between; } .ex-filters-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--ink-soft); } .ex-filter-search { display: flex; align-items: center; gap: var(--sp-half); padding: 0 0.85rem; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-pill, 999px); color: var(--ink-faint); } .ex-filter-search input { flex: 1; min-width: 0; border: none; background: none; padding: 0.6em 0; font: inherit; color: var(--ink); } .ex-filter-search input:focus { outline: none; } .ex-facet { border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.6rem 0.85rem; background: var(--card); } .ex-facet > summary { font-weight: 650; font-size: 0.92rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .ex-facet > summary::-webkit-details-marker { display: none; } .ex-facet > summary::after { content: "+"; color: var(--ink-faint); font-size: 1.1rem; } .ex-facet[open] > summary::after { content: "\2212"; } .ex-facet[open] > summary { margin-bottom: var(--sp-half); } .ex-facet-group { margin: 0.4rem 0 0.2rem; } .ex-facet-grouplabel { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ember); margin-bottom: 0.15rem; } .ex-check { display: flex; gap: var(--sp-half); align-items: flex-start; font-size: 0.86rem; padding: 0.16rem 0; cursor: pointer; line-height: 1.35; } .ex-check input { width: auto; margin-top: 0.15rem; flex: none; } /* Faceted result counts (facet-counts.js): how many results each option yields given the other active filters. Only shown once a search/filter is active. */ .ex-facet-count { margin-left: auto; flex: none; align-self: center; font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); background: var(--paper-2); border-radius: 999px; padding: 0.05rem 0.42rem; min-width: 1.4rem; text-align: center; } .ex-facet-count[hidden] { display: none; } .ex-check.is-zero { opacity: 0.5; } .ex-check.is-zero .ex-facet-count { background: transparent; color: var(--ink-faint); } .ex-resultbar { display: flex; align-items: center; gap: 0.9rem; color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0.9rem; } .ex-resultbar strong { color: var(--slate-ink); } .ex-filter-toggle { display: none; align-items: center; gap: var(--sp-xs); } .ex-chip { display: inline-block; white-space: nowrap; font-size: 0.7rem; background: var(--sage-wash); color: var(--sage-deep); padding: 0.12rem 0.5rem; border-radius: 999px; } .ex-chip-more { background: var(--paper); color: var(--ink-faint); font-weight: 700; } .ex-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.05rem 1rem; } .ex-catgroup-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ember); margin: 0.5rem 0 0.15rem; } .ms-dd { position: relative; } .ms-dd-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-half); padding: 0.62em 0.85em; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-align: left; } .ms-dd-panel { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); left: 0; right: 0; max-height: 15rem; overflow-y: auto; padding: 0.5rem 0.7rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,26,28,0.16); } .ms-dd-panel[hidden] { display: none; } .ms-dd-search { position: sticky; top: -0.5rem; z-index: 1; display: flex; align-items: center; gap: var(--sp-xs); margin: -0.5rem -0.7rem 0.4rem; padding: 0.5rem 0.7rem; background: var(--card); border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); } .ms-dd-search input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 0.9rem; color: var(--ink); padding: 0.1rem 0; } .ms-dd-search input:focus { outline: none; } .ms-dd-empty { margin: 0.3rem 0.1rem; color: var(--ink-soft); font-size: 0.85rem; } .ms-dd-empty[hidden] { display: none; } /* Address / location lookup (GeoLookup.astro + geolookup.js). */ .geo-lookup { margin-bottom: 0.9rem; } .geo-label { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.3rem; } .geo-search { position: relative; display: flex; align-items: center; } .geo-search-ic { position: absolute; left: 0.7rem; color: var(--ink-faint); pointer-events: none; } .geo-search input { width: 100%; padding: 0.62em 0.85em 0.62em 2.1rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; } .geo-search input:focus { outline: none; border-color: var(--sage-deep); } .geo-results { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); left: 0; right: 0; max-height: 15rem; overflow-y: auto; padding: 0.3rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(20,26,28,0.16); } .geo-results[hidden] { display: none; } .geo-item { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: 0.88rem; line-height: 1.35; color: var(--ink); padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; } .geo-item:hover, .geo-item.is-active { background: var(--sage-wash); } .geo-empty { padding: var(--sp-sm); color: var(--ink-soft); font-size: 0.85rem; } /* Business-name Places search + ABN name search reuse .geo-results. */ [data-places-lookup] { position: relative; } .places-status.is-ok { color: var(--sage-deep); } .places-status.is-err { color: var(--ember-deep); } .abn-find-toggle { display: inline-block; background: none; border: none; padding: 0; margin: -0.25rem 0 0.75rem; color: var(--slate); font: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: underline; cursor: pointer; } .abn-find-toggle:hover { color: var(--ember-deep); } .abn-find { position: relative; margin: 0 0 0.85rem; } .abn-find-input { width: 100%; padding: 0.62em 0.85em; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; } .abn-find-input:focus { outline: none; border-color: var(--sage-deep); } .abn-find-item strong { display: block; font-weight: 600; } .abn-find-meta { display: block; color: var(--ink-soft); font-size: 0.8rem; margin-top: 0.1rem; } .geo-hint { color: var(--ink-faint); font-size: 0.82rem; margin: 0.35rem 0 0; } .geo-clear { margin-top: var(--sp-half); font-size: 0.85rem; } /* ABN lookup status line. */ .abn-status { font-size: 0.82rem; color: var(--ink-soft); margin: 0.1rem 0 0.6rem; min-height: 1rem; } .abn-status.is-ok { color: var(--sage-deep); font-weight: 600; } .abn-status.is-err { color: var(--ember-deep); } /* ── Accordion section card (Collapsible.astro) ────────────────────────── A vertical stack of these gives portal/admin pages a clean, scannable, single-column rhythm. */ .portal-stack { display: flex; flex-direction: column; gap: 0.85rem; } /* A readable measure for forms inside a full-width card (don't stretch inputs to 1200px). */ .acc-measure { max-width: 40rem; } /* Profile form action bar: a sticky footer that stays reachable while editing (instead of an orphaned button floating between section cards). Shows live "Unsaved changes" / "Saved." feedback next to the button. */ .profile-save { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; /* Bleed a hair past the column edges and sit flush to the viewport bottom so no scrolling content can peek beside or beneath the bar. */ margin: 1.25rem -1px -1px; padding: 0.95rem 1.35rem calc(0.95rem + env(safe-area-inset-bottom, 0px)); /* Fully opaque (no blur), so content scrolled behind it is never visible. */ background: var(--card); border: 1px solid var(--line-soft); border-bottom: none; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 28px -18px rgba(20, 26, 28, 0.45); } .profile-save .btn { flex: none; } .profile-save .form-status { margin: 0; } .profile-save .form-status:empty { display: none; } .profile-save-dirty { font-size: 0.82rem; font-weight: 600; color: var(--ember-deep); display: inline-flex; align-items: center; gap: 0.35rem; } /* The [hidden] attribute (toggled by the form's dirty-tracking JS) must win over the display above, or the indicator shows even on a clean, untouched form. */ .profile-save-dirty[hidden] { display: none; } .profile-save-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); } .profile-save-note { flex-basis: 100%; font-size: 0.78rem; color: var(--ink-faint); margin: 0; line-height: 1.45; } @media (prefers-reduced-motion: no-preference) { .profile-save { transition: box-shadow 0.2s ease; } } /* ── Portal action bar (PortalBar.astro) ───────────────────────────────── The canonical "section intro + CTA" banner at the top of each portal page (jobs, resources, support, community, experts, listing, events). One definition replaces six near-identical per-page copies, so spacing and styling stay consistent across the portal. */ .portal-bar { display: flex; align-items: center; gap: var(--sp-lg); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.1rem 1.4rem; margin-bottom: var(--sp-xl); flex-wrap: wrap; } .portal-bar-icon { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--sage-wash); display: grid; place-items: center; color: var(--sage-deep); } .portal-bar-icon svg { width: 1.55rem; height: 1.55rem; } .portal-bar-info { flex: 1; min-width: 14rem; } .portal-bar-row { display: flex; align-items: center; gap: 0.7rem; } .portal-bar-info h2 { font-size: 1.2rem; line-height: 1.2; } .portal-bar-info p { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.2rem; } /* The "keep it respectful" note now lives inside the Start a discussion bubble. */ .portal-bar .forum-note { margin: 0.55rem 0 0; } .portal-bar-hint { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-top: var(--sp-half); } .portal-bar-hint.is-good { color: var(--sage-deep); } .portal-bar-actions { display: flex; gap: var(--sp-half); flex-wrap: wrap; } .portal-bar-actions .btn { text-align: center; min-width: 0; line-height: 1.2; } /* Ember-toned variant for upsell / locked states. */ .portal-bar.is-ember .portal-bar-icon { background: color-mix(in srgb, var(--ember) 13%, transparent); color: var(--ember-deep); } @media (max-width: 640px) { .portal-bar { gap: var(--sp-md); padding: 1rem 1.1rem; } .portal-bar-actions { width: 100%; } .portal-bar-actions .btn { flex: 1; padding: 0.7em 0.8em; font-size: 0.92rem; } } .acc { background: var(--card, #fff); border: 1px solid var(--line-soft, #e7e0d4); border-radius: 16px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .acc[open] { box-shadow: 0 1px 0 rgba(20,26,28,0.02), 0 8px 28px -18px rgba(20,26,28,0.35); } .acc-head { display: flex; align-items: center; gap: 0.7rem; padding: 1.05rem 1.35rem; cursor: pointer; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent; } .acc-head::-webkit-details-marker { display: none; } /* Only on hover-capable pointers, so a tap doesn't leave a stuck hover on phones. */ @media (hover: hover) { .acc-head:hover { background: color-mix(in srgb, var(--sage) 5%, transparent); } } /* The header is a square box inside a rounded, overflow-hidden card, so an inset outline on it clips at the card corners and looks broken. Ring the rounded card itself (follows its radius, never clipped) when the header is focused. */ .acc-head:focus-visible { outline: none; } /* Green focus ring only on real pointer devices (desktop keyboard nav). On touch, tapping a summary can leave :focus-visible stuck, so the ring would linger after opening a section and read as a stuck hover/selected state. */ @media (hover: hover) { .acc:has(> summary.acc-head:focus-visible) { border-color: var(--sage-deep); box-shadow: 0 0 0 3px var(--sage-wash); } } .acc-icon { flex: none; display: inline-flex; color: var(--sage-deep); } .acc-icon svg { width: 1.2rem; height: 1.2rem; } .acc-title { font-family: var(--font-display, Newsreader, Georgia, serif); font-size: 1.18rem; font-weight: 500; color: var(--ink); margin-right: auto; line-height: 1.2; } .acc-summary { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } .acc-chevron { flex: none; color: var(--ink-faint); transition: transform 0.25s var(--ease, ease); } .acc[open] > .acc-head .acc-chevron { transform: rotate(180deg); } .acc-body { padding: 0.25rem 1.35rem 1.4rem; } .acc-lead { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.9rem; } /* ── Hybrid settings layout ───────────────────────────────────────────── Mobile (default): a plain accordion stack (the .settings-nav is hidden; the .set-sec sections collapse). Desktop (.is-desktop, set by settings.js): a two-pane of a sticky section nav + open, non-collapsible section cards. */ .settings-main { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; } .settings-shell:not(.is-desktop) .settings-nav { display: none; } .set-sec { scroll-margin-top: calc(var(--header-h, 76px) + 1rem); } /* The grouped account form is a single flex child of .settings-main, so its inner sections (Your details … Notifications) don't inherit the stack gap. Re-apply it so every accordion is spaced evenly, inside the form and out. */ #profile-form { display: flex; flex-direction: column; gap: 0.85rem; } /* A touch more breathing room between stacked accordions on phones. Placed after the base .portal-stack / .settings-main rules so it wins at equal specificity when the query matches. */ @media (max-width: 700px) { .portal-stack, .settings-main, #profile-form { gap: 1.15rem; } } .settings-shell.is-desktop { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2.5rem; align-items: start; } /* Clear the sticky site header so the first nav item isn't hidden on scroll. */ .settings-nav { position: sticky; top: calc(var(--header-h, 76px) + 1rem); display: flex; flex-direction: column; gap: 0.1rem; max-height: calc(100vh - var(--header-h, 76px) - 2rem); overflow-y: auto; } .settings-nav a { display: flex; align-items: center; gap: var(--sp-sm); padding: 0.5rem 0.8rem; border-radius: 9px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .settings-nav-ico { flex: none; display: inline-flex; color: var(--sage-deep); } .settings-nav-ico svg { width: 1.05rem; height: 1.05rem; } .settings-nav a:hover .settings-nav-ico, .settings-nav a.is-active .settings-nav-ico { color: currentColor; } .settings-nav a::after { display: none; } .settings-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--sage) 7%, transparent); } .settings-nav a.is-active { color: var(--sage-deep); background: color-mix(in srgb, var(--sage) 11%, transparent); border-left-color: var(--sage-deep); } /* On desktop the sections are open cards: no chevron, header isn't a toggle. */ .settings-shell.is-desktop .set-sec > .acc-head { cursor: default; } .settings-shell.is-desktop .set-sec > .acc-head:hover { background: none; } .settings-shell.is-desktop .set-sec .acc-chevron { display: none; } .acc[open] > .acc-body { animation: accReveal 0.22s ease; } @keyframes accReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .acc-danger { border-color: color-mix(in srgb, var(--ember) 26%, transparent); } .acc-danger .acc-title { color: var(--ember-deep); } .acc-danger .acc-icon { color: var(--ember-deep); } @media (prefers-reduced-motion: reduce) { .acc-chevron, .acc[open] > .acc-body { transition: none; animation: none; } } @media (max-width: 600px) { .acc-head { padding: 0.9rem 1rem; gap: var(--sp-half); } .acc-title { font-size: 1.08rem; } .acc-body { padding: 0.15rem 1rem 1.1rem; } .acc-summary { font-size: 0.8rem; } } /* Greyed manual-entry fields once a lookup result is applied (still submittable). */ input.is-autofilled, select.is-autofilled, textarea.is-autofilled { background: var(--paper, #f1ebdf); color: var(--ink-soft); cursor: not-allowed; border-style: dashed; } .ex-filter-backdrop[hidden] { display: none; } @media (max-width: 820px) { .ex-shop { grid-template-columns: 1fr; } .ex-filter-toggle { display: inline-flex; } .ex-filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(310px, 86vw); z-index: calc(var(--z-drawer) + 1); background: var(--paper-2, #efe9dd); padding: 1.1rem; overflow-y: auto; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 40px rgba(20,26,28,0.25); } .ex-filters.is-open { transform: translateX(0); } .ex-filters-head { display: flex; margin-bottom: 0.3rem; } .ex-filter-backdrop { position: fixed; inset: 0; z-index: var(--z-drawer); background: rgba(20,26,28,0.5); } } /* ── Notification bell ───────────────────────────────────────────────── */ .notif-wrap { position: relative; display: inline-flex; flex: none; } /* flex:none + aspect-ratio keep the bell a full 42px circle inside the header flex row, where iOS Safari otherwise shrank it into a tiny ellipse. */ .notif-bell { position: relative; flex: none; aspect-ratio: 1; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--slate); transition: border-color 0.2s, color 0.2s, background 0.2s; } .notif-bell:hover { border-color: var(--sage); color: var(--slate-ink); background: var(--sage-wash); } .notif-wrap.has-unread .notif-bell { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 40%, var(--line)); } .notif-wrap.has-unread .notif-bell svg { fill: color-mix(in srgb, var(--ember) 14%, transparent); } .notif-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--ember); color: #fff; font-size: 0.66rem; font-weight: 700; border-radius: 999px; border: 2px solid var(--paper); } .notif-count[hidden] { display: none; } .notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, 92vw); z-index: var(--z-dropdown); background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; } .notif-panel[hidden] { display: none; } .notif-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-half); padding: 0.8rem 1rem; border-bottom: 1px solid var(--line-soft); } .notif-panel-head strong { font-size: 0.95rem; } .notif-panel-actions { display: flex; gap: var(--sp-sm); } .notif-panel-actions button { background: none; border: none; padding: 0; font-size: 0.78rem; font-weight: 600; color: var(--slate); cursor: pointer; } .notif-panel-actions button:hover { color: var(--ember-deep); text-decoration: underline; } .notif-list { max-height: 60vh; overflow-y: auto; } .notif-empty { padding: 1.6rem 1rem; text-align: center; color: var(--ink-faint); font-size: 0.9rem; } .notif-item { display: flex; gap: var(--sp-sm); width: 100%; text-align: left; padding: 0.75rem 1rem; background: none; border: none; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--sage-wash); } .notif-item.is-unread { background: color-mix(in srgb, var(--ember) 5%, var(--card)); } .notif-item-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: var(--sp-xs); background: transparent; } .notif-item.is-unread .notif-item-dot { background: var(--ember); } .notif-item-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .notif-item-title { font-weight: 650; font-size: 0.88rem; color: var(--slate-ink); line-height: 1.3; } .notif-item-snip { font-size: 0.8rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif-item-time { font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.1rem; } .notif-type-tag { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ember-deep); background: color-mix(in srgb, var(--ember) 12%, transparent); padding: 0.16rem 0.5rem; border-radius: 999px; } @media (max-width: 560px) { .notif-panel { position: fixed; top: var(--header-h); right: 0.5rem; left: 0.5rem; width: auto; } } /* ── Forum compact category rows (community landing) ─────────────────── */ .forum-crows { overflow: hidden; } .forum-crow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 0.7rem 1.25rem; text-decoration: none; color: inherit; border-top: 1px solid var(--line-soft); } .forum-crow:first-child { border-top: none; } .forum-crow:hover { background: var(--sage-wash); } /* Touch devices have no real hover, so a tap leaves the :hover highlight/lift stuck on a card or row. Neutralise the forum/community hover states there. */ @media (hover: none) { .forum-cat:hover { transform: none; } .forum-row:hover, .forum-item:hover, .forum-crow:hover { background: transparent; } .forum-item:hover .forum-item-title { text-decoration: none; } } .forum-crow-main { min-width: 0; } .forum-crow-name { display: flex; align-items: center; gap: var(--sp-half); font-weight: 650; color: var(--slate-ink); font-size: 1rem; line-height: 1.25; } .forum-crow-desc { display: block; font-size: 0.83rem; color: var(--ink-soft); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forum-crow-meta { flex: none; font-size: 0.76rem; color: var(--ink-faint); white-space: nowrap; } @media (max-width: 560px) { .forum-crow { flex-direction: column; align-items: flex-start; gap: 0.15rem; } .forum-crow-desc { white-space: normal; } } /* ── Forum landing: new-activity badge + recent feed (inside its card) ── */ .forum-new-badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: var(--ember); padding: 0.12rem 0.45rem; border-radius: 999px; } .forum-recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .forum-recent li { border-top: 1px solid var(--line-soft); } .forum-recent li:first-child { border-top: none; } .forum-recent a { display: block; padding: 0.6rem 1.25rem; text-decoration: none; } .forum-recent a:hover { background: var(--sage-wash); } .forum-recent a:hover .forum-recent-title { color: var(--ember-deep); } .forum-recent-title { display: block; font-size: 0.9rem; font-weight: 600; color: var(--slate-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forum-recent-meta { display: block; font-size: 0.73rem; color: var(--ink-faint); margin-top: 0.05rem; } /* ── Committee identity, support tickets, feature requests ──────────────── */ /* ASA Committee badge: restrained, inline next to a name. */ /* Minimal: a quiet inline marker (small shield + label), no pill or uppercase. */ .committee-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.74rem; font-weight: 600; color: var(--sage-deep); line-height: 1.3; white-space: nowrap; } .committee-badge svg { flex: none; opacity: 0.8; } /* Member "online" presence dot + optional label. */ .online-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #3fae6a; box-shadow: 0 0 0 2px color-mix(in srgb, #3fae6a 25%, transparent); vertical-align: middle; } .online-label { color: #2f8f55; font-size: 0.78rem; font-weight: 600; } /* Admin-mode indicator in the admin header. */ .admin-mode { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sage-deep); background: color-mix(in srgb, var(--sage) 15%, transparent); padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; } /* Super Admin (god tier) gets a distinct ember pill so it's unmistakable. */ .admin-mode.is-super { color: var(--ember-deep); background: color-mix(in srgb, var(--ember) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ember) 36%, transparent); } /* Pill filter row (shared with existing admin list pages). */ .app-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; } .app-pills a { display: inline-flex; align-items: center; gap: var(--sp-xs); padding: 0.4rem 0.9rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; text-decoration: none; } .app-pills a:hover { border-color: var(--sage); color: var(--slate); } .app-pills a.is-active { background: var(--slate); border-color: var(--slate); color: #fff; } .app-pills a span { font-size: 0.78rem; opacity: 0.8; } .back-link { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; font-weight: 600; } .back-link:hover { color: var(--ember-deep); } /* Status badges for tickets / features. */ .status-badge.status-open { background: color-mix(in srgb, var(--ember) 16%, transparent); color: var(--ember-deep); } .status-badge.status-pending { background: color-mix(in srgb, #c9961f 18%, transparent); color: #8a6510; } /* Member support list. */ .sup-list { display: flex; flex-direction: column; gap: var(--sp-sm); } .sup-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-decoration: none; color: inherit; } .sup-row:hover { border-color: var(--sage); } .sup-row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .sup-row-main strong { color: var(--slate-ink); } .sup-row-meta { font-size: 0.82rem; color: var(--ink-faint); } /* Ticket / feature thread head. */ .sup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-half); } .sup-status-form select { padding: 0.4rem 0.7rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 0.9rem; } /* Threaded messages. */ .sup-thread { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.75rem; } .sup-msg { display: flex; gap: 0.75rem; padding: 0.95rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); } .sup-msg.is-committee { background: color-mix(in srgb, var(--sage) 7%, var(--card)); border-color: color-mix(in srgb, var(--sage) 30%, var(--line)); } .sup-msg.is-mine { background: var(--sand-soft, #fbf6ee); } .sup-msg.is-note { background: color-mix(in srgb, #c9961f 8%, var(--card)); border-color: color-mix(in srgb, #c9961f 28%, var(--line)); border-style: dashed; } .sup-msg-avatar { flex: none; width: 40px; height: 40px; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--slate); color: #fff; font-weight: 700; font-size: 0.85rem; } .sup-msg-avatar img { width: 100%; height: 100%; object-fit: cover; } .sup-msg-body { min-width: 0; flex: 1; } .sup-msg-meta { display: flex; align-items: center; gap: var(--sp-half); flex-wrap: wrap; margin-bottom: 0.3rem; } .sup-msg-meta strong { color: var(--slate-ink); font-size: 0.95rem; } .sup-msg-time { font-size: 0.78rem; color: var(--ink-faint); } .sup-msg-text { white-space: pre-wrap; line-height: 1.55; color: var(--ink); } .sup-note-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #8a6510; background: color-mix(in srgb, #c9961f 20%, transparent); padding: 0.1rem 0.42rem; border-radius: 999px; } .sup-note-hint { font-size: 0.82rem; color: var(--ink-faint); } .feat-desc { white-space: pre-wrap; line-height: 1.6; color: var(--ink); padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-top: var(--sp-half); } /* Committee identity card on the profile page. */ .cm-head { display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-md); flex-wrap: wrap; } .cm-avatar { flex: none; width: 64px; height: 64px; aspect-ratio: 1; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--slate); color: #fff; font-weight: 700; font-size: 1.1rem; } .cm-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ── Messages: iMessage-style two-pane app (list + chat) ───────────────── One screen: a scrollable conversation list on the left and the active chat fixed on the right. On phones it collapses to a single pane (list OR chat), driven by the data-mode on .pm-app. */ /* The messages screen is an app, not a document: trim the portal section chrome so the two-pane fills the viewport without the page itself scrolling. */ /* Messages aligns its header + nav with the other portal pages (top padding comes from body.portal .section); only the bottom is trimmed so the two-pane keeps its app feel. */ .section:has(.pm-app) { padding-block-end: clamp(1.25rem, 3vw, 2.25rem); } body.portal .section:has(.pm-app) .portal-content { margin-top: 1.1rem; } .pm-app { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: clamp(26rem, calc(100vh - var(--portal-pad-top, 6.8rem) - 17.25rem), 48rem); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); } /* Left pane: conversation list */ .pm-list-pane { overflow-y: auto; border-right: 1px solid var(--line-soft); background: color-mix(in srgb, var(--sage-wash) 32%, var(--card)); } .pm-list { display: flex; flex-direction: column; } .pm-list-empty { padding: 1.4rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; } .pm-list-empty a { color: var(--slate); text-decoration: underline; } /* Mobile-only large title + back-to-portal at the top of the conversation list (the global header is hidden in immersive mode). Revealed at ≤760px. */ .pm-list-head { display: none; align-items: center; gap: 0.5rem; padding: max(0.85rem, env(safe-area-inset-top)) 0.95rem 0.65rem; color: var(--ink); text-decoration: none; font-family: var(--font-display, Newsreader, Georgia, serif); font-size: 1.45rem; font-weight: 500; } .pm-list-head svg { flex: none; color: var(--slate); } .pm-row { display: flex; gap: var(--sp-sm); align-items: center; padding: 0.8rem 2.3rem 0.8rem 0.6rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-soft); position: relative; transition: background 0.12s ease; } .pm-row:hover { background: color-mix(in srgb, var(--sage) 7%, transparent); } .pm-row.is-active { background: color-mix(in srgb, var(--sage) 14%, transparent); } .pm-row.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sage-deep); } .pm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: transparent; } .pm-row.is-unread .pm-dot { background: var(--ember); } .pm-avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; background: var(--sage-wash); color: var(--sage-deep); display: grid; place-items: center; font-weight: 700; font-size: 0.92rem; } .pm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Shared member avatar (forum + elsewhere): photo or initials, size via prop. */ .m-avatar { flex: none; width: var(--m-avatar-size, 34px); height: var(--m-avatar-size, 34px); border-radius: 50%; overflow: hidden; background: var(--sage-wash); color: var(--sage-deep); display: grid; place-items: center; font-weight: 700; font-size: calc(var(--m-avatar-size, 34px) * 0.4); line-height: 1; } .m-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pm-row-main { flex: 1; min-width: 0; } .pm-row-top { display: flex; justify-content: space-between; gap: var(--sp-half); align-items: baseline; } .pm-row-top strong { font-weight: 600; color: var(--ink); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-row.is-unread .pm-row-top strong { font-weight: 700; } .pm-time { color: var(--ink-faint); font-size: 0.75rem; flex: none; } .pm-snippet { display: block; color: var(--ink-soft); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem; } .pm-row.is-unread .pm-snippet { color: var(--ink); font-weight: 600; } /* ── Conversation-list affordances: tabs, kebab menu, swipe quick-actions ── */ .pm-tabs { display: flex; gap: 0.2rem; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--sage-wash) 32%, var(--card)); } .pm-tab { flex: 1; text-align: center; padding: 0.4rem 0.5rem; border-radius: 9px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .pm-tab.is-active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } @media (hover: hover) { .pm-tab:not(.is-active):hover { background: color-mix(in srgb, currentColor 8%, transparent); } } .pm-item { position: relative; } .pm-swipe-clip { position: relative; overflow: hidden; } .pm-swipe-actions { position: absolute; inset: 0 0 0 auto; display: flex; } .pm-sa { width: 4rem; border: none; display: grid; place-items: center; color: #fff; cursor: pointer; } .pm-sa-mute { background: var(--slate); } .pm-sa-archive { background: var(--sage-deep); } .pm-sa-delete { background: var(--ember-deep); } .pm-swipe { position: relative; background: color-mix(in srgb, var(--sage-wash) 32%, var(--card)); transition: transform 0.22s var(--ease, ease); } /* In dark mode --sage-wash is translucent, so the mixed surface above was only ~74% opaque and the swipe-action buttons underneath bled through (visible on desktop, where there's no swipe). Pin an opaque sage-on-card tint so the actions stay fully hidden until a swipe reveals them. */ html[data-theme="dark"] .pm-swipe { background: color-mix(in srgb, var(--sage) 10%, var(--card)); } .pm-item.is-swiped .pm-swipe { transform: translateX(-12rem); } .pm-kebab { position: absolute; top: 50%; right: 0.3rem; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; border: none; border-radius: 8px; background: transparent; color: var(--ink-faint); display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background 0.12s ease, color 0.12s ease; } @media (hover: hover) { .pm-kebab:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: var(--ink); } } .pm-kebab:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 1px; color: var(--ink); } .pm-item.menu-open .pm-kebab { background: color-mix(in srgb, currentColor 12%, transparent); color: var(--ink); } .pm-menu { position: absolute; top: 2.7rem; right: 0.5rem; min-width: 11rem; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); padding: 0.3rem; z-index: var(--z-modal, 60); } .pm-menu:not([hidden]) { display: flex; flex-direction: column; } .pm-menu-item { display: block; width: 100%; text-align: left; padding: 0.5rem 0.65rem; border: none; background: none; border-radius: 8px; font-family: inherit; font-size: 0.88rem; font-weight: 540; color: var(--ink); cursor: pointer; text-decoration: none; } @media (hover: hover) { .pm-menu-item:hover { background: color-mix(in srgb, currentColor 8%, transparent); } } .pm-menu-item:focus-visible { outline: none; background: color-mix(in srgb, currentColor 8%, transparent); } .pm-menu-item.pm-menu-danger { color: var(--ember-deep); } .pm-menu-sep { height: 1px; background: var(--line-soft); margin: 0.3rem 0.2rem; } .pm-muted-ico { display: inline-flex; vertical-align: middle; margin-left: 0.3rem; color: var(--ink-faint); } .pm-item[data-muted="0"] .pm-muted-ico { display: none; } .pm-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(0.6rem); z-index: var(--z-modal, 60); display: flex; align-items: center; gap: 0.9rem; background: #26343d; color: #fff; padding: 0.7rem 0.7rem 0.7rem 1rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); font-size: 0.88rem; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .pm-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .pm-toast button { border: none; background: rgba(255,255,255,0.18); color: #fff; font-weight: 700; font-size: 0.84rem; padding: 0.35rem 0.7rem; border-radius: 8px; cursor: pointer; font-family: inherit; } /* Right pane: the active chat */ /* min-height:0 lets this grid item shrink to the app's fixed height so a long thread scrolls internally instead of pushing the composer past the clipped (overflow:hidden) edge of the app. */ .pm-chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--card); } .pm-chat-head { flex: none; display: flex; align-items: center; gap: var(--sp-sm); padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line-soft); } .pm-back { display: none; flex: none; width: 2rem; height: 2rem; border-radius: 50%; align-items: center; justify-content: center; color: var(--slate); border: 1px solid var(--line); background: var(--card); } .pm-back:hover { background: var(--sage-wash); } .pm-chat-avatar { width: 2.1rem; height: 2.1rem; font-size: 0.78rem; } .pm-chat-title { font-family: var(--font-display, Newsreader, Georgia, serif); font-size: 1.1rem; font-weight: 500; margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; } .pm-chat-title a { color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-chat-title a:hover { text-decoration: underline; } .pm-chat-empty { align-items: center; justify-content: center; text-align: center; } .pm-empty-inner { color: var(--ink-faint); padding: var(--sp-2xl); max-width: 22rem; } .pm-empty-inner p svg { color: var(--sage-deep, #5c7d68); flex: none; } .pm-empty-inner p { display: inline-flex; align-items: center; gap: var(--sp-half); font-family: var(--font-display, Newsreader, Georgia, serif); font-size: 1.2rem; color: var(--ink-soft); } .pm-empty-inner span { display: block; font-size: 0.88rem; margin-top: 0.35rem; } /* Thread + bubbles (fills the chat pane, scrolls internally) */ .pm-thread { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: var(--sp-half); padding: 1.1rem 1.2rem; } /* Each message is a full-width row (so the swipe/hover time aligns to a fixed right column); the bubble itself carries the width cap + left/right alignment. */ .pm-msg { position: relative; align-self: stretch; width: 100%; display: flex; flex-direction: column; align-items: flex-start; } .pm-msg.is-mine { align-items: flex-end; text-align: right; } .pm-msg.pm-pending { opacity: 0.5; } /* Received bubble uses the theme card surface (was a hardcoded #fff, which in dark mode showed light --ink text on a white bubble = unreadable). */ .pm-bubble { display: inline-block; max-width: 78%; padding: 0.6rem 0.9rem; border-radius: 16px; background: var(--card, #fff); border: 1px solid var(--line, #e7e0d4); color: var(--ink); white-space: pre-wrap; text-align: left; overflow-wrap: anywhere; } .pm-msg.is-mine .pm-bubble { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); } .pm-bubble u { text-decoration: underline; } .pm-bubble.pm-unsent { background: transparent; border-style: dashed; color: var(--ink-faint); font-style: italic; } .pm-msg.is-mine .pm-bubble.pm-unsent { background: transparent; color: var(--ink-faint); border-color: var(--line); } .pm-meta { font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.2rem; display: flex; gap: var(--sp-sm); align-items: center; } .pm-msg.is-mine .pm-meta { justify-content: flex-end; } .pm-meta:empty { display: none; } /* Day separator (iMessage-style): one centered pill per day, not a per-message time. */ .pm-day { align-self: center; margin: 0.55rem 0 0.25rem; } .pm-day span { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); background: color-mix(in srgb, var(--ink-faint) 14%, transparent); padding: 0.18rem 0.75rem; border-radius: 999px; } /* Per-message send time. Desktop (>=761px): always shown as a small static timestamp by each bubble, no hover, no sliding. Mobile (immersive, <=760px): hidden until the thread is dragged left (.pm-times), which slides mine-bubbles aside to reveal it. */ .pm-when { position: absolute; top: 0.5rem; right: 0.1rem; opacity: 0; font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; pointer-events: none; transition: opacity 0.15s ease; } .pm-msg .pm-bubble, .pm-msg .pm-meta { transition: transform 0.18s var(--ease, ease); } @media (min-width: 761px) { .pm-when { position: static; opacity: 1; margin-top: 0.15rem; padding: 0 0.1rem; } } @media (max-width: 760px) { .pm-thread.pm-times .pm-msg.is-mine .pm-bubble, .pm-thread.pm-times .pm-msg.is-mine .pm-meta { transform: translateX(-3rem); } .pm-thread.pm-times .pm-when { opacity: 1; } } /* ── Reactions (Tapbacks) ──────────────────────────────────────────────── */ .pm-reacts { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; } .pm-msg.is-mine .pm-reacts { justify-content: flex-end; } .pm-react { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.82rem; line-height: 1; padding: 0.12rem 0.4rem; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .pm-react.is-mine { border-color: var(--sage-deep); background: color-mix(in srgb, var(--sage) 18%, var(--card)); } .pm-react span { font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); } /* display only when NOT [hidden] — a bare `display: flex` would beat the [hidden] attribute (equal specificity, author rule wins) and the toolbar could never be hidden via tools.hidden = true. */ .pm-msg-tools { position: fixed; z-index: var(--z-modal, 60); gap: 3px; } .pm-msg-tools:not([hidden]) { display: flex; } .pm-tool-btn { width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line-soft); background: var(--card); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .pm-tool-btn:hover { color: var(--sage-deep); } /* ── Quoted replies ────────────────────────────────────────────────────── */ .pm-quote { display: block; max-width: 78%; margin-bottom: 0.2rem; padding: 0.3rem 0.6rem; border: none; border-left: 3px solid var(--sage-deep); border-radius: 8px; background: color-mix(in srgb, var(--sage) 12%, transparent); color: var(--ink-soft); font-size: 0.82rem; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-msg.is-mine .pm-quote { align-self: flex-end; } .pm-quote b { color: var(--ink); font-weight: 650; margin-right: 0.3rem; } .pm-quote-gone { font-style: italic; color: var(--ink-faint); cursor: default; } .pm-flash .pm-bubble { animation: pm-flash 1.3s ease; } @keyframes pm-flash { 25% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 50%, transparent); } } .pm-reply-chip { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; padding: 0.35rem 0.55rem 0.35rem 0.6rem; border-left: 3px solid var(--sage-deep); border-radius: 8px; background: color-mix(in srgb, var(--sage) 12%, transparent); font-size: 0.82rem; color: var(--ink-soft); } .pm-reply-chip[hidden] { display: none; } .pm-reply-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-reply-chip .pm-act { flex: none; font-size: 1.15rem; line-height: 1; } .pm-msg.pm-swiping-reply::before { content: "↩"; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--sage-deep); font-size: 1.15rem; opacity: 0.85; } .pm-react-pop { position: fixed; z-index: var(--z-modal, 60); background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,0.22); padding: 0.35rem; } .pm-tapbacks { display: flex; gap: 0.1rem; align-items: center; } .pm-tapbacks button { font-size: 1.35rem; line-height: 1; width: 2.4rem; height: 2.4rem; border: none; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } @media (hover: hover) { .pm-tapbacks button:hover, .pm-grid button:hover { background: color-mix(in srgb, currentColor 12%, transparent); } } .pm-tapbacks .pm-more { font-size: 1.2rem; color: var(--ink-soft); } .pm-grid { grid-template-columns: repeat(8, 1fr); gap: 0.05rem; width: 17rem; max-height: 13rem; overflow-y: auto; padding-top: 0.25rem; } .pm-grid:not([hidden]) { display: grid; } .pm-grid button { font-size: 1.25rem; line-height: 1; width: 2rem; height: 2rem; border: none; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; } .pm-actions { display: inline-flex; gap: var(--sp-sm); } .pm-edited, .pm-act { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 0.72rem; line-height: 1.2; color: var(--ink-faint); cursor: pointer; text-decoration: none; } .pm-edited:hover, .pm-act:hover { color: var(--slate); text-decoration: underline; } .pm-act[data-unsend]:hover { color: var(--ember-deep); } /* Composer bar pinned to the bottom of the chat pane */ .pm-composer-bar { flex: none; border-top: 1px solid var(--line-soft); padding: 0.75rem 1rem; background: color-mix(in srgb, var(--sage-wash) 45%, var(--card)); box-shadow: 0 -4px 10px -7px rgba(20, 26, 28, 0.12); } .pm-editing-bar { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: var(--sp-half); } .pm-composer { display: flex; gap: var(--sp-sm); align-items: flex-end; } .pm-input { flex: 1; min-height: 2.4rem; max-height: 10rem; overflow-y: auto; padding: 0.55em 0.8em; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; line-height: 1.45; text-align: left; } .pm-input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent); } .pm-input:empty::before { content: attr(data-placeholder); color: var(--ink-faint); pointer-events: none; } .pm-input u { text-decoration: underline; } .pm-hint { font-size: 0.72rem; color: var(--ink-faint); margin: 0.4rem 0 0; } /* Edit-history modal list */ .pm-history-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-half); } .pm-history-item { background: var(--sage-wash); border-radius: 10px; padding: 0.6rem 0.8rem; } .pm-history-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.25rem; } .pm-history-tag.pm-history-current { color: var(--sage-deep); } .pm-history-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; color: var(--ink); } .pm-history-loading { color: var(--ink-faint); } /* Phones: collapse to a single pane (list OR chat), iMessage-on-iPhone style. Height is sized so the whole app (incl. the composer) fits under the header + page heading without overflowing the viewport, so nothing clips on scroll. */ /* ── Immersive mobile Messages (≤760px): full-screen iMessage-style app ────── The conversation list / open chat own the whole dynamic viewport; the portal chrome is dropped and translucent "glass" bars (header + composer) sit over a thread that scrolls beneath them. The composer rises above the soft keyboard (--pm-kb, set by pm-immersive.js). Desktop two-pane is untouched. */ @media (max-width: 760px) { /* Drop the page chrome; the fixed app covers the rest of the document. */ body.portal:has(.pm-app) { overflow: hidden; } body.portal:has(.pm-app) #site-header, body.portal:has(.pm-app) .skip-link, body.portal:has(.pm-app) .site-footer { display: none; } body.portal .section:has(.pm-app) { padding: 0; } .pm-app { position: fixed; inset: 0; z-index: var(--z-nav, 50); grid-template-columns: 1fr; height: 100dvh; min-height: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; } .pm-app[data-mode="list"] .pm-chat-pane { display: none; } .pm-app[data-mode="chat"] .pm-list-pane { display: none; } .pm-back { display: inline-flex; } .pm-bubble { max-width: 85%; } /* List screen: large "Messages" title (scrolls) + glass tabs (stick). */ .pm-list-pane { position: relative; } .pm-list-head { display: flex; } .pm-tabs { position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); } /* Chat screen: glass header + composer overlay a full-bleed scrolling thread. */ .pm-chat-pane { position: relative; } .pm-chat-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: max(0.6rem, env(safe-area-inset-top)) 0.85rem 0.55rem; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 55%, transparent); background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px); } .pm-thread { position: absolute; inset: 0; flex: none; padding: calc(var(--pm-head-h, 3.6rem) + 0.5rem) 1rem calc(var(--pm-composer-h, 4rem) + var(--pm-kb, 0px) + 0.5rem); scroll-padding-bottom: calc(var(--pm-composer-h, 4rem) + var(--pm-kb, 0px) + 0.5rem); overscroll-behavior: contain; } .pm-composer-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid color-mix(in srgb, var(--line-soft) 55%, transparent); padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 75%, transparent); -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px); box-shadow: none; transform: translateY(calc(-1 * var(--pm-kb, 0px))); transition: transform 0.18s ease; } .pm-hint { display: none; } } /* ── Mobile touch targets ────────────────────────────────────────────── Real checkboxes/radios are tiny by default and fiddly to tap on a phone, so enlarge the visible control and give label rows a roomier hit area. (Visually-hidden inputs like .jchip/.bsel are opacity:0 and unaffected in practice; the accent keeps them on-brand.) */ @media (max-width: 820px) { /* Checkboxes/radios are now custom-drawn (see the global rule above), sized in em so they scale with their label , no transform needed. Bump them a touch on phones for an easier tap target. */ input[type="checkbox"], input[type="radio"] { width: 1.3em; height: 1.3em; } .ex-check { padding-block: 0.34rem; } .ex-check input { margin-top: 0.05rem; } .f-billing-toggle { padding: 0.3rem 0; } } /* ── Branded date / time picker (datetime-picker.js) ─────────────────────── A native is visually hidden and driven by this branded trigger + popover. Styled with brand tokens so dark mode adapts for free. */ .dtp { position: relative; } .dtp-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .dtp-trigger { display: inline-flex; align-items: center; gap: var(--sp-sm); width: 100%; padding: 0.6rem 0.8rem; border: 1.5px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dtp-trigger:hover { border-color: var(--sage); } .dtp-trigger:focus-visible { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px var(--sage-wash); } .dtp-trigger.is-empty .dtp-text { color: var(--ink-faint); } .dtp-ico { display: inline-flex; flex: none; color: var(--sage-deep); } .dtp-ico svg { width: 1.15rem; height: 1.15rem; } .dtp-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dtp-caret { flex: none; color: var(--ink-faint); display: inline-flex; } .dtp-pop { position: fixed; z-index: var(--z-toast); width: 296px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.7rem; display: none; font-size: 0.9rem; color: var(--ink); } .dtp-pop.is-open { display: block; animation: dtp-in 0.12s ease; } @keyframes dtp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-half); } .dtp-title { font-weight: 700; font-size: 0.98rem; color: var(--ink); } .dtp-nav { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: 9px; background: transparent; color: var(--ink-soft); cursor: pointer; } .dtp-nav:hover { background: var(--sage-wash); color: var(--slate); } .dtp-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; } .dtp-dows span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.02em; padding: 0.2rem 0; } .dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dtp-pad { aspect-ratio: 1; } .dtp-day { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer; transition: background 0.1s ease; } .dtp-day:hover { background: var(--sage-wash); } .dtp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--sage); font-weight: 700; } .dtp-day.is-selected, .dtp-day.is-selected:hover { background: var(--ember); color: #fff; font-weight: 700; box-shadow: none; } .dtp-day:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sage-deep); } .dtp-day.is-disabled { color: var(--ink-faint); opacity: 0.4; cursor: not-allowed; } .dtp-day.is-disabled:hover { background: transparent; } .dtp-time { display: flex; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--line-soft); } .dtp-time-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-right: auto; } .dtp-stepper { display: inline-flex; flex-direction: column; align-items: center; } .dtp-step { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.05rem; border: none; background: transparent; color: var(--ink-faint); cursor: pointer; border-radius: 5px; } .dtp-step:hover { color: var(--slate); background: var(--sage-wash); } .dtp-num { width: 2.4rem; text-align: center; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 700; padding: 0.18rem 0; } .dtp-num:focus-visible { outline: none; border-color: var(--sage-deep); } .dtp-colon { font-weight: 700; color: var(--ink-soft); } .dtp-ampm { display: inline-flex; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 0.3rem; } .dtp-ampm button { border: none; background: var(--card); color: var(--ink-soft); font: inherit; font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.5rem; cursor: pointer; } .dtp-ampm button.is-on { background: var(--slate); color: #fff; } .dtp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--line-soft); } .dtp-clear { border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; padding: 0.35rem 0.5rem; border-radius: 8px; } .dtp-clear:hover { color: var(--ember-deep); background: color-mix(in srgb, var(--ember) 10%, transparent); } .dtp-done { border: none; background: var(--slate); color: #fff; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; padding: 0.4rem 1rem; border-radius: var(--radius-pill); } .dtp-done:hover { background: var(--slate-deep); } /* Image upload preview (event hero, etc.). Lives here (not admin.css) so the shared EventForm renders the hero thumbnail in the member portal too, not just in the admin. The admin.css copy is harmless (identical values). */ .image-upload { display: flex; gap: var(--sp-md); align-items: flex-start; flex-wrap: wrap; } .image-preview { width: 170px; height: 115px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 0.82rem; flex: none; } .image-preview img { width: 100%; height: 100%; object-fit: cover; } /* Duplicate-listing nudge on the add-a-sauna forms (dupe-check.js). Amber warning surface, dark-mode-safe via color-mix onto --card. */ .dupe-warning { margin: 0.9rem 0; border: 1px solid color-mix(in srgb, #c9961f 45%, var(--line)); background: color-mix(in srgb, #c9961f 10%, var(--card)); border-radius: 12px; padding: 0.85rem 1rem; } .dupe-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .dupe-title { font-weight: 700; color: var(--ink); font-size: 0.95rem; } .dupe-dismiss { border: none; background: none; color: var(--slate); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; } .dupe-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .dupe-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem; } .dupe-text { min-width: 0; display: flex; flex-direction: column; } .dupe-meta { color: var(--ink-faint); font-size: 0.8rem; font-weight: 600; } .dupe-reason { color: var(--ink-soft); font-size: 0.82rem; } .dupe-cta { flex: none; font-size: 0.85rem; font-weight: 700; color: var(--sage-deep); text-decoration: none; white-space: nowrap; padding: 0.3rem 0.6rem; border: 1px solid color-mix(in srgb, var(--sage-deep) 40%, var(--line)); border-radius: 8px; } .dupe-cta:hover { background: color-mix(in srgb, var(--sage) 12%, var(--card)); } /* Marketplace (Pro Marketplace forum board): listing badges, the thread banner, and the category card grid. Dark-mode-safe via color-mix onto --card. */ .market-flair { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.2em 0.6em; border-radius: 999px; background: color-mix(in srgb, var(--slate) 14%, var(--card)); color: var(--slate); } .market-flair.flair-sale { background: color-mix(in srgb, var(--sage-deep) 16%, var(--card)); color: var(--sage-deep); } .market-flair.flair-wanted { background: color-mix(in srgb, #4b7bd6 16%, var(--card)); color: #3f6fc9; } .market-flair.flair-free { background: color-mix(in srgb, #c9961f 18%, var(--card)); color: #a9760f; } html[data-theme="dark"] .market-flair.flair-wanted { color: #9bbcf2; } html[data-theme="dark"] .market-flair.flair-free { color: #e2c479; } .market-sold { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2em 0.6em; border-radius: 999px; background: color-mix(in srgb, var(--ember) 16%, var(--card)); color: var(--ember-deep); } html[data-theme="dark"] .market-sold { color: #eaa39a; } .market-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--sage) 6%, var(--card)); } .market-banner.is-sold { background: color-mix(in srgb, var(--ember) 7%, var(--card)); } .market-banner-tags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .market-banner-price { font-size: 1.15rem; font-weight: 800; color: var(--ink); } .market-banner-actions { display: flex; gap: 0.5rem; } /* No price/type/sold yet (e.g. older listings): drop the empty banner box and just left-align the action button, instead of floating it in a void. */ .market-banner.no-tags { border: none; background: none; padding: 0; justify-content: flex-start; } .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; } .market-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); text-decoration: none; color: inherit; transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; } .market-card:hover { border-color: var(--sage); box-shadow: var(--shadow-sm); transform: translateY(-2px); } /* Touch devices have no real hover, so a tap leaves a content card stuck in its :hover lift/highlight. Neutralise those hover states here (keyboard :focus-visible keeps its own styling). Mirrors the forum block above. */ @media (hover: none) { .card-hover:hover, .ev-card:hover, .rl-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line-soft); } .market-card:hover { transform: none; box-shadow: none; border-color: var(--line); } .card-hover:hover .card-media img, .ev-card:hover .ev-card-img img { transform: none; } .rl-card:hover .rl-more { text-decoration: none; } } .market-card.is-sold { opacity: 0.72; } .market-thumb { aspect-ratio: 4 / 3; background: var(--paper-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .market-thumb img { width: 100%; height: 100%; object-fit: cover; } .market-thumb-ph { font-size: 2rem; opacity: 0.5; } .market-card-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem 0.8rem 0.85rem; } .market-card-top { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-height: 1.2rem; } .market-card-title { font-weight: 600; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .market-price { font-weight: 800; color: var(--sage-deep); } .market-card-meta { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.1rem; }