/* /assets/site.css — universal grayscale “newspaper” theme + components */ /* Base */ :root { color-scheme: light; --ink:#111; } html { scroll-behavior: smooth; } /* Prevent sideways page drag from accidental horizontal overflow. IMPORTANT: applying overflow rules to can lock vertical scrolling on some mobile browsers. Keep it on only. */ body{ max-width:100%; overflow-x:hidden; } .small-caps { font-variant-caps: all-small-caps; letter-spacing:.06em; } .rule-x { box-shadow: inset 0 -1px 0 rgba(0,0,0,.1); } .rule-y { position:relative; } .rule-y:before{ content:""; position:absolute; left:-1rem; top:0; bottom:0; width:1px; background:rgba(0,0,0,.08); } .lift{ transition: transform .2s, box-shadow .2s; } .lift:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); } .bg-newsprint{ background:#F5F5F5; background-image: radial-gradient(rgba(17,17,17,.06) .8px, transparent .8px), radial-gradient(rgba(17,17,17,.025) 1px, transparent 1px); background-size:22px 22px,44px 44px; background-position:0 0,11px 11px; } /* Hide home sections when a city/state is active */ html[data-city-mode] #browse, html[data-city-mode] #featured { display:none !important; } /* City/search state (site-wide) */ html[data-searching] #search-tagline, html[data-city-mode] #search-tagline { display:none!important; } html[data-searching] #hero h1, html[data-city-mode] #hero h1, html[data-searching] #hero .lg\:col-span-2 > p:first-of-type, html[data-city-mode] #hero .lg\:col-span-2 > p:first-of-type { display:none!important; } html[data-city-mode] #quick-picks { display:none!important; } html[data-searching] #city-welcome, html[data-city-mode] #city-welcome { display:block!important; } /* Results grid and right rail */ #results{ padding:2rem 0; } /* Use a wrapping flex layout so the right rail naturally drops below when there isn’t enough horizontal space (no mobile-only breakpoints). This prevents the whole page from sliding sideways on phones. */ .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; display:grid; gap:1.1rem; max-width:100%; overflow-x:hidden; } #right-rail{ flex:0 1 360px; min-width:0; display:grid; gap:1rem; position:sticky; top:1rem; } /* Mobile/tablet: always stack the rail under results. Without this, flexbox can keep the rail beside the cards by shrinking the cards column down too far (making cards look "super undersized"). */ @media (max-width: 900px){ .results-grid{ flex-direction:column; } .results-grid .cards{ flex:1 1 auto; width:100%; } #right-rail{ position:static; width:100%; top:auto; } } /* When the rail wraps under, sticky no longer makes sense */ .results-grid > #right-rail{ align-self:flex-start; } /* Spotlight box */ .spotlight-box{ background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:14px; padding:1.25rem; } .spotlight-hero{ display:grid; grid-template-columns:220px 1fr; gap:1rem 1.25rem; align-items:start; } .spotlight-image-wrap{ position:relative; border-radius:12px; overflow:hidden; width:220px!important; } .spotlight-image-wrap img{ width:100%; height:auto; display:block; } .spotlight-title{ margin:.25rem 0; font-weight:800; display:flex; gap:.6rem; align-items:center; font-size:1.05rem; } .spotlight-blurb{ line-height:1.55; color:rgba(0,0,0,.75); } .chip-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; } .chip{ display:inline-grid; grid-auto-flow:column; gap:.4rem; align-items:center; border:1px solid rgba(0,0,0,.15); border-radius:999px; padding:.32rem .55rem; font-size:.85rem; } /* ========================================================= Business card (universal) ========================================================= */ /* Base card frame */ .card, .sl-card{ position:relative; background:#fff; border:1px solid rgba(12,12,13,.18); border-radius:16px; padding:18px 20px; display:grid; grid-template-rows:auto 1fr auto; gap:.8rem; min-height:176px; aspect-ratio:7/4; overflow:hidden; transition: transform .18s, box-shadow .18s, border-color .18s; box-shadow: 0 10px 28px rgba(0,0,0,.14), 0 2px 0 rgba(255,255,255,.65) inset; } /* Card hover-lift (all devices; unified) */ .card:hover, .sl-card:hover, .sl-card:focus-within{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.18); border-color:rgba(12,12,13,.28); } /* Legacy .card-row keeps 2-column grid */ .card-row{ display:grid; grid-template-columns:1fr 92px; gap:.85rem; align-items:flex-start; } /* New .sl-card layout */ .sl-card__row{ display:block; } .sl-card.has-logo{ padding-right:120px; } .sl-card__media{ position:absolute; top:18px; right:20px; display:flex; align-items:flex-start; justify-content:center; } .card-logo, .sl-card__logo{ width:92px; height:92px; border-radius:12px; object-fit:contain; object-position:center; border:1px solid rgba(0,0,0,.08); background:linear-gradient(180deg, rgba(0,0,0,.05), transparent); } .card-main, .sl-card__body{ min-width:0; display:grid; grid-template-rows:auto auto 1fr; } .line-name, .sl-card__title{ font-family:Merriweather, Georgia, serif; font-weight:900; font-size:1.12rem; line-height:1.25; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; overflow:hidden; } .sl-card__meta{ margin-top:.2rem; display:flex; flex-direction:column; gap:.05rem; } .line-person, .meta-person{ margin:.2rem 0 0; font:600 .98rem/1.3 Georgia,'Times New Roman',serif; color:rgba(0,0,0,.85); } .line-role, .line-combined, .meta-role, .meta-desc{ margin:.1rem 0 0; font:400 .95rem/1.35 Georgia,'Times New Roman',serif; color:rgba(0,0,0,.8); } .card-footer, .sl-card__footer{ display:grid; gap:.45rem; margin-top:.25rem; } .meta-line{ display:flex; align-items:center; gap:.55rem; min-width:0; } .meta-ico{ width:18px; height:18px; opacity:.75; flex:0 0 18px; } .meta-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; } .phone-link{ text-decoration:underline; text-underline-offset:2px; } /* No-logo layout */ .card--no-logo, .sl-card.no-logo{ padding:18px 20px; } .sl-card.no-logo{ padding-right:20px; } .card--no-logo .card-row, .sl-card.no-logo .sl-card__media{ display:none!important; } /* Ribbon + like button */ .city-ribbon{ position:absolute; bottom:12px; right:60px; top:auto; left:auto; height:28px; padding:0 .65rem; display:flex; align-items:center; border:1px solid rgba(0,0,0,.12); border-radius:999px; background:#fff; font:600 12px/1 Inter,system-ui,sans-serif; z-index:2; } .like-btn{ position:absolute; bottom:12px; right:12px; top:auto; width:34px; height:34px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.65) inset; z-index:2; transition:transform .12s, box-shadow .12s, background-color .12s, border-color .12s; } .like-btn svg{ width:18px; height:18px; } .like-btn[aria-pressed="true"]{ background:#111827; border-color:#111827; color:#fff; } .like-btn[aria-pressed="true"] .heart-empty{ display:none; } .like-btn[aria-pressed="false"] .heart-full{ display:none; } .like-btn:active{ transform:scale(.94); box-shadow:0 0 0 rgba(0,0,0,0); } /* Holographic gold */ .card--holo-gold, .sl-card--holo-gold{ position:relative; isolation:isolate; border:1px solid rgba(12,12,13,.28); box-shadow:0 14px 36px rgba(0,0,0,.22), 0 2px 0 rgba(255,255,255,.65) inset; } .card--holo-gold::after, .sl-card--holo-gold::after{ content:""; position:absolute; inset:0; border-radius:16px; padding:1px; background:linear-gradient(135deg,#8a8a8a,#d6d6d6,#f0f0f0,#b5b5b5,#8a8a8a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .card--holo-gold .holo-film, .sl-card--holo-gold .holo-film{ position:absolute; inset:-40% -40%; background:conic-gradient(from 0deg,#f0f0f0 0%,#d9d9d9 25%,#c2c2c2 50%,#ececec 75%,#f0f0f0 100%); filter:saturate(1) blur(10px); mix-blend-mode:multiply; opacity:.42; border-radius:32px; animation:holoSpin 16s linear infinite; transform-origin:50% 50%; pointer-events:none; z-index:0; } .card--holo-gold .holo-sweep, .sl-card--holo-gold .holo-sweep{ position:absolute; inset:-20%; background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%); transform:translateX(-40%) rotate(8deg); border-radius:32px; opacity:0; transition:opacity .2s, transform .8s; mix-blend-mode:screen; pointer-events:none; z-index:1; } .card--holo-gold:hover .holo-sweep, .card--holo-gold:focus-within .holo-sweep, .sl-card--holo-gold:hover .holo-sweep, .sl-card--holo-gold:focus-within .holo-sweep{ opacity:.85; transform:translateX(40%) rotate(8deg); } .card .card-content, .sl-card .card-content{ position:relative; z-index:2; } @keyframes holoSpin { to { transform:rotate(360deg); } } /* Mini calendar */ .cal{ display:grid; gap:.8rem; } .cal-head{ display:flex; align-items:center; justify-content:space-between; } .cal-title{ font-weight:800; font-size:1.05rem; margin:0; } .cal-nav{ border:1px solid rgba(0,0,0,.18); background:#fff; border-radius:8px; width:32px; height:32px; line-height:30px; text-align:center; cursor:pointer; } .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; } .cal-dow{ text-align:center; font:600 .8rem/1 Inter,system-ui,sans-serif; color:rgba(0,0,0,.65); } .cal-day{ position:relative; min-height:38px; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:.35rem .4rem; font:600 .9rem/1 Inter,system-ui,sans-serif; } .cal-day.muted{ color:rgba(0,0,0,.45); background:linear-gradient(#fff,#fafafa); } /* Prevent long URLs/text from forcing horizontal overflow */ .slVal, .slVal a, .slLine, .slLink, .slTagline{ overflow-wrap:anywhere; word-break:break-word; }