/* ====================================================================== File: /assets/styles.css Purpose: StartLocal – Modern Newspaper theme (site-wide) Notes: Printed-paper texture is on (no ::before z-index issues) ====================================================================== */ /* -------------------- Tokens -------------------- */ :root{ --bg:#fdfdfc; --panel:#ffffff; --ink:#111111; --muted:#5f6b7a; --rule:#e5e7eb; --accent:#374151; --accent-ink:#ffffff; --maxw:1100px; --baseline:24px; --open:#15803d; --closed:#b91c1c; --open-rgb:21,128,61; --spot-accent:#0f766e; --spot-accent-ink:#ffffff; /* Paper texture controls */ --texture-scale: 1; /* 0.75–1.5 to resize dots */ --dot1: .06; /* main dot opacity */ --dot2: .035; /* secondary dot opacity */ --grain: .014; /* vertical grain opacity */ } /* Optional presets (toggle on ) */ body.texture-subtle{ --dot1:.045; --dot2:.028; --grain:.010; --texture-scale:.9; } body.texture-strong{ --dot1:.08; --dot2:.05; --grain:.018; --texture-scale:1.1; } /* -------------------- Base / Reset -------------------- */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background-color:var(--bg); line-height:1.5; overflow-x:hidden; /* prevent accidental horizontal scroll */ /* Printed-paper texture on body */ background-image: radial-gradient(rgba(0,0,0,var(--dot1)) 18%, transparent 19%), radial-gradient(rgba(0,0,0,var(--dot2)) 16%, transparent 17%), repeating-linear-gradient( 90deg, rgba(0,0,0,var(--grain)) 0, rgba(0,0,0,var(--grain)) 1px, transparent 1px, transparent 4px ); background-size: calc(4px * var(--texture-scale)) calc(4px * var(--texture-scale)), calc(5px * var(--texture-scale)) calc(5px * var(--texture-scale)), 8px 100%; background-blend-mode: multiply; background-attachment: fixed; /* keeps paper steady on scroll */ } h1,h2,h3,h4,h5,h6{ font-family:'Merriweather', Georgia, serif; color:var(--ink); } .muted{ color: var(--muted); } .hidden{ display:none !important; } /* Guardrails: never allow media or form controls to overflow their containers */ img, video, canvas, svg, iframe{ max-width:100%; height:auto; } input, select, textarea{ max-width:100%; box-sizing:border-box; } /* -------------------- Layout -------------------- */ .container{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto; } .section{ padding: 3rem 0; } /* -------------------- Header shell -------------------- */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--rule); } .site-header .container{ display:flex; align-items:center; gap:.75rem; justify-content:space-between; padding:.65rem 0; } /* -------------------- Buttons & links -------------------- */ .btn{ background:var(--accent); color:var(--accent-ink); padding:.58rem .9rem; border-radius:8px; font-weight:800; transition:transform .05s ease, background .2s ease; display:inline-block; text-decoration:none; } .btn:hover{ background:#4b5563; } .btn:active{ transform: translateY(1px); } .button{ display:inline-block; text-decoration:none; } .button--outline{ border:1px solid var(--rule); padding:.58rem .9rem; border-radius:8px; color:var(--ink); background:#fff; } .button--outline:hover{ background:#f8fafc; } /* -------------------- Hero -------------------- */ .hero{ padding:72px 0 48px; border-bottom:1px solid var(--rule); background:linear-gradient(#fff, #fafbfc); } .hero-inner{ text-align:center; } .hero h1{ font-size:clamp(2rem,4vw + .5rem,3rem); margin:0 0 .5rem; font-weight:700; } .hero p{ color:var(--muted); margin:0 0 1.25rem; } /* City selected: trim hero fluff */ body.city-selected .hero h1, body.city-selected .hero p, body.city-selected .quick-help{ display:none; } body.city-selected .hero{ padding:16px 0 12px; } /* -------------------- Search -------------------- */ .search{ display:grid; grid-template-columns: 1.2fr .9fr .6fr auto; gap:.5rem; justify-content:center; margin:1rem auto 0; max-width:920px; } .search input, .search select{ padding:.85rem 1rem; border-radius:8px; border:1px solid var(--rule); background:#fff; color:var(--ink); } .search button{ padding:.85rem 1rem; border-radius:8px; border:1px solid var(--rule); background:var(--accent); color:var(--accent-ink); font-weight:900; transition:background .2s ease; } .search button:hover{ background:#4b5563; } @media (max-width:820px){ .search{ grid-template-columns: 1fr 1fr; } .search button{ grid-column: 1 / -1; } } .boot-check{ margin-top:.75rem; font-size:.95rem; color:var(--muted); } /* -------------------- Info grid (About) -------------------- */ .frontgrid{ display:grid; gap:1rem; } @media (min-width: 900px){ .frontgrid{ grid-template-columns: 1.5fr 1fr 1fr; } } .box{ background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:1rem; } /* Step list */ .step-list{ list-style:none; padding:0; margin:.25rem 0 0 0; } .step-list li{ display:flex; gap:.6rem; padding:.6rem 0; border-top:1px dashed var(--rule); } .step-list li:first-child{ border-top:0; } /* -------------------- Chips -------------------- */ .chip-wrap{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; } .chip-btn{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--rule); border-radius:9999px; padding:.55rem .9rem; text-decoration:none; } .chip-btn:hover{ background:#f8fafc; } .chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; } .chip{ display:inline-flex; align-items:center; gap:.5rem; background:#fdfdfd; color:#222; border:1px solid #ddd; padding:.35rem .65rem; border-radius:6px; font-size:.82rem; font-weight:600; } .chip-ico{ opacity:.8; } /* -------------------- Results grid layout -------------------- */ /* IMPORTANT: site.css uses a flex-wrap layout for `.results-grid` so the right rail can drop under results on small screens. This file previously set `.results-grid { display:grid; }`, which overrides site.css (because styles.css is loaded after it on index.html) and can make the results column shrink on mobile. Keep the layout model consistent with site.css. */ .results-grid{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start; max-width:100%; overflow-x:hidden; } .results-grid .cards{ flex:1 1 560px; min-width:0; } .results-grid > #right-rail{ flex:0 1 360px; min-width:0; } @media (max-width: 899px){ .results-grid{ flex-direction:column; } .results-grid .cards{ flex:1 1 auto; width:100%; } .results-grid > #right-rail{ width:100%; } } /* -------------------- Spotlight -------------------- */ .spotlight-box{ background:#fff; border:1px solid #ddd; border-radius:12px; padding:1rem; } .spotlight-image-wrap{ position:relative; height:120px; background:#f9f9f9; border:1px solid #ddd; border-radius:12px; overflow:hidden; margin:.25rem 0 .25rem; } .spotlight-image-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; filter:grayscale(25%) contrast(1.1) brightness(1.05); } .spotlight-title{ margin:0; font-size:1.7rem; line-height:1.2; display:flex; align-items:center; gap:.5rem; border-bottom:1px solid #ddd; padding-bottom:.3rem; } .spotlight-blurb{ color:#333; margin:.25rem 0 1rem; font-size:1rem; line-height:1.6; } .spotlight-subhead{ margin:.2rem 0 .6rem; font-size:1.05rem; font-weight:700; text-transform:uppercase; border-bottom:1px solid #ddd; padding-bottom:.25rem; } .spotlight-list{ margin:.25rem 0 0; padding-left:1.1rem; } .spotlight-list li{ margin:.25rem 0; color:#333; } .kv{ margin:.25rem 0 0 0; } .grid2{ display:grid; grid-template-columns:auto 1fr; gap:.25rem .75rem; align-items:center; } .cta-row{ display:flex; gap:.5rem; margin-top:.5rem; } .cta-row .btn{ background:#333; color:#fff; border:1px solid #333; border-radius:6px; padding:.55rem 1rem; } .cta-row .btn:hover{ background:#222; } .cta-row .button--outline{ background:#fff; color:#333; border:1px solid #aaa; border-radius:6px; padding:.55rem 1rem; } .cta-row .button--outline:hover{ background:#f8f8f8; } /* -------------------- Weather -------------------- */ .weather-card{ border:1px solid #ddd; background:#fafafa; border-radius:8px; padding:.9rem; } .weather-card.hidden{ display:none !important; } .weather-row{ display:flex; align-items:center; gap:1rem; } .weather-now{ display:flex; flex-direction:column; align-items:flex-start; } .weather-temp{ font-weight:700; line-height:1; } #weather-temp-big{ font-size:1.9rem; } .weather-desc, #weather-desc-big{ color:#444; font-weight:600; } .weather-meta{ display:grid; gap:.25rem; font-size:.9rem; color:#444; } .weather-meta strong{ font-weight:700; } /* -------------------- Cards (visual styling only; layout via Tailwind) -------------------- */ .cards{ display:grid; /* Tailwind controls columns & responsive behavior */ align-items:stretch; gap:1rem; /* matches Tailwind gap-4 */ } .card{ background:var(--panel); border:1px solid var(--rule); border-radius:6px; transition:border-color .15s ease, box-shadow .15s ease, transform .04s ease; display:flex; flex-direction:column; position:relative; height:100%; cursor:pointer; } .card:hover{ border-color:#d5d8df; box-shadow:0 2px 14px rgba(0,0,0,.06); } .card:active{ transform: translateY(1px); } .card.is-hidden{ display:none; } .city-ribbon{ position:absolute; inset:0 0 auto 0; height:26px; background:var(--accent); color:var(--accent-ink); font-family:'Bebas Neue', sans-serif; font-weight:700; letter-spacing:.5px; display:none; align-items:center; justify-content:center; border-radius:6px 6px 0 0; z-index:3; font-size:.95rem; } .card-row{ display:grid; grid-template-columns: 64px 1fr; gap:1rem; align-items:center; padding:24px 18px 12px; } /* If :has() support is a concern, toggle a .no-logo class via JS instead. */ .card-row:not(:has(.card-logo)){ grid-template-columns: 1fr; } .card-logo{ width:64px; height:64px; border-radius:4px; background:#f0f2f5; object-fit:cover; border:1px solid var(--rule); } .card-main{ display:flex; flex-direction:column; gap:.25rem; min-width:0; } .line-name{ font-family:'Merriweather',serif; font-weight:800; font-size:1.08rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .line-business{ font-family:'Inter',sans-serif; margin:0; font-size:.92rem; line-height:1.25; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .line-role{ font-family:'Inter',sans-serif; margin:0; font-size:.88rem; line-height:1.25; color:var(--muted); font-style:italic; } .line-combined{ font-family:'Inter',sans-serif; margin:0; font-size:.92rem; line-height:1.3; color:var(--muted); } /* Status badge */ .status-badge{ position:absolute; top:10px; right:10px; z-index:2; padding:.28rem .6rem; border:1px solid var(--rule); border-radius:9999px; font-size:.70rem; font-weight:800; line-height:1; background:#fff; color:var(--muted); box-shadow:0 6px 18px rgba(0,0,0,.08); display:inline-flex; align-items:center; gap:.4rem; user-select:none; } .status-badge::before{ content:""; width:9px; height:9px; border-radius:50%; background: currentColor; } .status-badge.open{ background:#f0fdf4; color:var(--open); border-color:#bbf7d0; } .status-badge.closed{ background:#fef2f2; color:var(--closed); border-color:#fecaca; } @keyframes pulse-open{ 0%{ box-shadow:0 0 0 0 rgba(var(--open-rgb), .45); } 70%{ box-shadow:0 0 0 10px rgba(var(--open-rgb), 0); } 100%{ box-shadow:0 0 0 0 rgba(var(--open-rgb),0); } } .status-badge.open::before{ animation:pulse-open 1.8s ease-out infinite; } /* Card footer */ .card-footer{ margin-top:auto; padding:10px 18px 14px; border-top:1px solid var(--rule); display:grid; gap:.35rem; background:#fff; border-radius:0 0 6px 6px; } .card-footer .meta-line{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; line-height:1.3; } .meta-ico{ width:18px; height:18px; flex:0 0 18px; fill:#9aa3ae; } .meta-text{ color:var(--ink); text-decoration:none; font-size:.80rem; } .meta-text:hover{ text-decoration:underline; } address.meta-text{ font-style:normal; text-decoration:none; } .copy-btn{ margin-left:.25rem; padding:.25rem .45rem; border:1px solid var(--rule); background:#fff; color:var(--muted); border-radius:4px; font-size:.72rem; cursor:pointer; } .copy-btn:hover{ background:#f8f8fc; } /* -------------------- Footer -------------------- */ .site-footer{ border-top:1px solid var(--rule); padding:2rem 0; color:#6b7280; background:#fff; } /* -------------------- Harmonized borders -------------------- */ .card, .section { border-color: rgba(0, 0, 0, 0.16) !important; } @media (prefers-color-scheme: dark) { .card, .section { border-color: rgba(255,255,255,.18) !important; } } .card, .section, .feature { border-color: rgba(0,0,0,.17) !important; } .card-logo, .profile-logo { border-color: rgba(0,0,0,.17) !important; } .card-footer, .site-footer, .site-header { border-color: rgba(0,0,0,0.15) !important; } /* Classic newspaper headline + body tuning */ h1, h2, h3, .headline { font-family: "Merriweather", Georgia, "Times New Roman", serif; font-weight: 900; letter-spacing: -0.01em; } /* Optional “deck” / subhead style */ .subhead, .dek { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.01em; color: #374151; } /* Small caps nav (already partly there, this sharpens it) */ .small-caps { font-variant-caps: small-caps; letter-spacing: .06em; } /* Fine hairline rules like news columns */ .rule-x { border-bottom: 1px solid rgba(0,0,0,.12); } .rule-y > * + * { border-top: 1px solid rgba(0,0,0,.12); } /* Slightly denser body copy to read like print */ body { font-feature-settings: "liga","kern","onum","pnum"; } /* ========================= Holographic Gold Card — visual layers Requires: the card's inner HTML wrapped in .card-content (main.js already does this) ========================= */ /* Base card safety: create a stacking context */ .card { position: relative; overflow: hidden; } /* When enabled, we add two absolutely-positioned layers under .card-content */ .card--holo-gold { /* Slightly shinier border to sell the effect even if motion is reduced */ border-color: #e9d5ff; /* soft iridescent line */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 6px 18px rgba(0,0,0,0.12); } /* Layer order: sweep (bottom), film (above), then content (top) */ .card .holo-sweep, .card .holo-film { position: absolute; inset: 0; pointer-events: none; /* don’t block clicks */ border-radius: inherit; mix-blend-mode: soft-light; /* lets it “hug” the card color */ opacity: 0.85; z-index: 0; transform: translateZ(0); /* promote to its own layer */ } /* Ensure the real content stays on top of the layers */ .card .card-content { position: relative; z-index: 1; } /* --- Film: static iridescent texture */ .card--holo-gold .holo-film { /* Subtle noise + repeating prism bands */ background: /* fine noise for realism */ radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,0.25), rgba(255,255,255,0) 60%) , repeating-linear-gradient( 115deg, rgba(255, 250, 220, 0.25) 0%, rgba(255, 220, 240, 0.25) 7%, rgba(220, 255, 255, 0.25) 14%, rgba(255, 250, 220, 0.25) 21% ); filter: saturate(1.1) contrast(1.05); } /* --- Sweep: animated light pass */ .card--holo-gold .holo-sweep { background: conic-gradient( from 0deg at 30% 0%, rgba(255, 255, 255, 0.00) 0deg, rgba(255, 255, 255, 0.35) 35deg, rgba(255, 255, 255, 0.00) 70deg ), linear-gradient(135deg, rgba(255, 215, 0, 0.20), rgba(186, 85, 211, 0.12), rgba(135, 206, 250, 0.12)); background-blend-mode: screen; animation: holoSweep 5.5s linear infinite; will-change: transform, opacity; } /* Motion tuning */ @keyframes holoSweep { 0% { transform: translateX(-30%) translateY(-10%) rotate(0.001deg); opacity: 0.55; } 35% { opacity: 0.9; } 70% { opacity: 0.6; } 100% { transform: translateX(30%) translateY(10%) rotate(0.001deg); opacity: 0.55; } } /* Reduce motion: keep the gold vibe without animation */ @media (prefers-reduced-motion: reduce) { .card--holo-gold .holo-sweep { animation: none; opacity: 0.6; } } /* Dark mode friendly (optional): nudge blends a bit stronger */ @media (prefers-color-scheme: dark) { .card--holo-gold .holo-film, .card--holo-gold .holo-sweep { mix-blend-mode: screen; opacity: 0.9; } } /* Print fallback: no animation, crisp border */ @media print { .card--holo-gold .holo-sweep { display: none; } .card--holo-gold { border: 2px solid #d4af37; /* gold */ box-shadow: none; } } /* ---------- Card typography tweaks (match what main.js emits) ---------- */ .line-person{ margin:.05rem 0 0; font:600 .95rem/1.35 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: rgba(0,0,0,.82); } /* ---------- Modifier: no-logo, centered stack ---------- */ .card--no-logo .card-row{ grid-template-columns: 1fr; } .card--no-logo .card-logo{ display:none; } .card--no-logo .card-main{ align-items:center; text-align:center; } .card--no-logo .line-name{ font-size:1.18rem; } .card--no-logo .line-role{ font-style:normal; opacity:.9; } .card--no-logo .card-footer{ margin-top:auto; /* pins footer to bottom */ text-align:left; /* keep meta left-aligned */ justify-items:start; } /* Optional: stronger center look on small screens */ @media (max-width: 520px){ .card--no-logo .line-name{ font-size:1.22rem; } } /* ---------- Compact density toggle ---------- */ .card--sm{ padding:14px 16px; } .card--sm .card-row{ grid-template-columns:72px 1fr; gap:.65rem; } .card--sm .card-logo{ width:72px; height:72px; } /* ---------- Flat / listy directory look (pairs with existing .card--directory) ---------- */ .card--flat{ box-shadow:none; border-color: rgba(0,0,0,.14); background: linear-gradient(#fff, #fbfbfb); } /* ---------- Footer emphasis: phone + city “bottom-left” ---------- */ /* Phone is already first in your footer; ensure it feels anchored */ .card .card-footer .meta-line:first-child .meta-text{ font-weight:700; text-decoration:underline; text-underline-offset:2px; } .card .card-footer .meta-line:nth-child(2) .meta-text, .card .card-footer address.meta-text{ font-weight:600; opacity:.92; } /* ---------- Optional: verified/paid tags row ---------- */ .chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem; } .chip-sm { display:inline-flex; align-items:center; gap:.35rem; border:1px solid rgba(0,0,0,.14); border-radius:999px; padding:.18rem .5rem; font:600 .75rem/1.1 Inter,system-ui,sans-serif; background:#fff; color:#1f2937; } .chip-sm .dot { width:6px; height:6px; border-radius:999px; background:#10b981; } /* Toolbar that sits at top of the calendar card */ .cal-toolbar{ margin: -0.5rem -0.75rem 0.5rem; /* pull edge-to-edge inside the card */ padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule, #e5e7eb); background: var(--paper, #f7f7f7); border-radius: 8px 8px 0 0; } /* (Optional) if your .spotlight-box has big inner padding, tighten it */ #spotlight-calendar.spotlight-box { padding-top: .5rem; } /* ====================================================================== StartLocal Card Compatibility + Flip (paste at END of styles.css) - Makes new .sl-card__* markup look like your existing .card-* design - Fixes “text overwritten” via z-index rules (esp. holo layers) - Adds flip styles + show-more buttons (when flip markup exists) ====================================================================== */ /* ---------- 1) Fix “text overwritten” by visual layers (holo/etc.) ---------- */ /* If you don't wrap card contents in .card-content, this keeps content above holo layers */ .card--holo-gold > :not(.holo-sweep):not(.holo-film) { position: relative; z-index: 1; } /* Safety: ensure clickable UI elements sit above overlays */ .card .status-badge, .card .city-ribbon, .card .like-btn { position: relative; z-index: 4; } /* ---------- 2) Map NEW main.js markup (.sl-card__*) to your existing card styling ---------- */ .sl-card__row{ display:grid; grid-template-columns: 1fr 64px; /* text then logo (matches your new JS placing logo right) */ gap:1rem; align-items:center; padding:24px 18px 12px; } /* If card has no logo, make it single column */ .card.no-logo .sl-card__row, .sl-card.no-logo .sl-card__row{ grid-template-columns: 1fr; } .sl-card__body{ display:flex; flex-direction:column; gap:.25rem; min-width:0; } .sl-card__title{ font-family:'Merriweather',serif; font-weight:800; font-size:1.08rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Stacked meta lines emitted by main.js: .meta-person / .meta-role / .meta-desc */ .sl-card__meta{ display:grid; gap:.18rem; min-width:0; } .sl-card__meta > span{ font-family:'Inter',sans-serif; margin:0; color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sl-card__meta .meta-person{ font-weight:700; color: rgba(0,0,0,.82); font-size:.92rem; } .sl-card__meta .meta-role{ font-size:.88rem; font-style:italic; } .sl-card__meta .meta-desc{ font-size:.92rem; line-height:1.25; } /* Logo column (your main.js uses .sl-card__media + img.sl-card__logo) */ .sl-card__media{ display:flex; justify-content:flex-end; } .sl-card__logo{ width:64px; height:64px; border-radius:4px; background:#f0f2f5; object-fit:cover; border:1px solid var(--rule); } /* Footer mapping */ .sl-card__footer{ margin-top:auto; padding:10px 18px 14px; border-top:1px solid var(--rule); display:grid; gap:.35rem; background:#fff; border-radius:0 0 6px 6px; } /* Your existing .meta-line/.meta-ico/.meta-text rules already apply. This just ensures they also apply inside .sl-card__footer. */ .sl-card__footer .meta-line{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; line-height:1.3; } .sl-card__footer .meta-ico{ width:18px; height:18px; flex:0 0 18px; fill:#9aa3ae; } .sl-card__footer .meta-text{ color:var(--ink); text-decoration:none; font-size:.80rem; } .sl-card__footer .meta-text:hover{ text-decoration:underline; } .sl-card__footer address.meta-text{ font-style:normal; text-decoration:none; } /* Optional: make the chosen "front" line feel emphasized */ .sl-card__footer .meta-front .meta-text{ font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* ---------- 3) Flip Card + Show More buttons (only active if you use flip markup) ---------- */ /* Expected structure (example):

...

*/ .sl-card--flip{ perspective: 1100px; } .sl-flip{ position:relative; } .sl-flip__inner{ position:relative; transform-style:preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1); } /* flip trigger: set data-flipped="1" on the article */ .sl-card--flip[data-flipped="1"] .sl-flip__inner{ transform: rotateY(180deg); } .sl-flip__face{ backface-visibility:hidden; transform-style:preserve-3d; position:relative; } .sl-flip__back{ position:absolute; inset:0; transform: rotateY(180deg); } /* Make sure both faces are full-height cards */ .sl-flip__front, .sl-flip__back{ min-height: 100%; } /* Show more button (works on both faces) */ .sl-more{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; margin: 10px 18px 14px; padding:.55rem .85rem; border-radius:8px; border:1px solid var(--rule); background:#fff; color:var(--ink); font-weight:800; cursor:pointer; user-select:none; } .sl-more:hover{ background:#f8fafc; } .sl-more:active{ transform: translateY(1px); } /* If you want the button visually pinned at bottom: */ .sl-flip__face .sl-more{ position: absolute; left: 0; right: 0; bottom: 0; } /* Ensure content doesn’t hide behind pinned button */ .sl-card--flip .sl-card__footer, .sl-card--flip .card-footer{ padding-bottom: 58px; /* room for pinned button */ } /* ===================================================================== Accordion (Home events list grouped by service) ===================================================================== */ .sl-accordion{ display:block; } .sl-accordion__summary{ display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: 1rem; cursor:pointer; user-select:none; } .sl-accordion__summary::-webkit-details-marker{ display:none; } .sl-accordion__summary::marker{ content:''; } .sl-accordion__meta{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; } .sl-acc-arrow{ display:inline-block; line-height:1; transform: rotate(0deg); transition: transform .15s ease; } .sl-accordion[open] .sl-acc-arrow{ transform: rotate(180deg); } .sl-accordion__summary:focus-visible{ outline: 2px solid rgba(0,0,0,.25); outline-offset: 3px; border-radius: 12px; }