/* ==========================================================================
listing-card.css
This file mirrors the My Feline app's business detail card. It is a visual
replica, not an independent design. Whenever the app card changes, this file
must be updated to match, otherwise a business previewing its listing on the
Ghost form pages will be shown something the app will not render.
Authoritative source for every value here:
docs/Implementations/listing-card-spec.md
which was extracted from the Flutter code at ~/projects/MyFeline. Where the
design system document disagrees with that spec, the spec wins.
Deliberate departures from the app, all agreed rather than accidental:
1. Section gaps sit on the section, so an empty section leaves no dead
space. The app puts them outside, which leaves 48px of blank page when
the Contact section is empty (spec 5.10, app-side issue 3).
2. The "Get directions" label uses Quicksand rather than falling through to
the system font (spec 12.7).
3. Negative "No" rows are never rendered. The app shows some of them
because a few yes/no fields are configured as plain text (spec 12.5).
Structure: this file is visual only. It is the theme copy, loaded on the five
business update form pages via {{asset "css/listing-card.css"}}. The markup is
partials/listing-preview.hbs and the renderer is assets/js/listing-preview.js.
Both @import rules from the standalone version are gone. default.hbs already
loads Plus Jakarta Sans and Quicksand at the weights the card needs, and the
Material Symbols subset is a on the form pages so it does not have to
queue behind this stylesheet.
========================================================================== */
/* Material Symbols Outlined, subset to only the icons this card uses.
The five category icons are NOT here: they are Font Awesome (spec 7.1) and are
inlined as an SVG sprite in the markup, so there is no second font request.
The what3words row also uses Font Awesome (location-crosshairs, solid), so it
is in the sprite too. No substitutions remain.
icon_names must be in alphabetical order, or Google Fonts returns 400. */
:root {
/* ---- Colours (spec 2.2) ---------------------------------------------- */
--mf-white: #FFFFFF;
--mf-text: #1C1A12; /* primaryText: titles, values */
--mf-text-2: #2D2F28; /* secondaryText: descriptions, labels, icons */
--mf-bg: #FBFAF5; /* page and detail background */
--mf-brand: #4D5045; /* links, ticks, buttons, category text */
--mf-brand-400: #797E6D;
--mf-grey-200: #F6F5ED; /* icon tiles */
--mf-grey-300: #EBE9DD; /* app bar bottom border */
--mf-grey-500: #AEA88C; /* chevron on tappable rows */
--mf-error: #FF5963;
--mf-badge-fill: rgba(77, 80, 69, 0.1);
--mf-liked-fill: rgba(255, 89, 99, 0.1);
/* Not from the app palette. The app has no disclaimer, so there is no colour
to copy. Sits between secondaryText and grey500: quiet enough to recede,
dark enough to stay legible on the page background. */
--mf-muted: #6B6858;
/* ---- Spacing (spec 2.1) ---------------------------------------------- */
--mf-space-1: 4px;
--mf-space-2: 8px;
--mf-space-3: 12px;
--mf-space-4: 16px;
--mf-space-6: 24px;
/* ---- Radii ------------------------------------------------------------ */
--mf-radius-sm: 10px; /* icon tiles, distance pill */
--mf-radius-md: 18px; /* cards, detail category badge, buttons */
--mf-radius-lg: 24px;
--mf-radius-sheet: 32px;
/* ---- Elevation -------------------------------------------------------- */
--mf-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
/* ---- Type ------------------------------------------------------------- */
--mf-font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mf-font-secondary: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mf-size-title: 24px; /* detail title, Plus Jakarta Sans 600 */
--mf-size-heading: 20px; /* section heading, Plus Jakarta Sans 600 */
--mf-size-body: 16px; /* descriptions, values, link rows */
--mf-size-caption: 14px; /* field labels, category badge text */
--mf-size-small: 12px;
/* Flutter sets no explicit line height, so it uses the font's own metrics.
These are the deterministic equivalents (spec 11.1). */
--mf-leading-primary: 1.26;
--mf-leading-secondary: 1.25;
/* ---- Component sizes -------------------------------------------------- */
--mf-tile-size: 40px; /* icon tile on every detail row */
--mf-icon-size: 20px; /* icon inside that tile */
--mf-chevron-size: 24px;
--mf-badge-icon: 14px; /* category icon in the detail badge */
--mf-yesno-pad: 10px; /* centres a single-line label against the tile */
--mf-content-pad: 16px; /* detail screen content padding */
--mf-section-gap: 24px; /* between sections */
--mf-heading-gap: 12px; /* heading to its first row */
/* ---- Map preview (spec 5.2) ------------------------------------------- */
--mf-map-height: 200px;
--mf-marker-size: 40px;
--mf-marker-icon: 20px;
/* ---- Phone frame ------------------------------------------------------
Frame furniture, not app design.
The frame grows with the card rather than scrolling inside a fixed screen.
This page is read mostly on a desktop, where a business needs the whole
listing at a glance; a scroll box inside a phone outline hides most of it
and invites nobody to scroll. The frame stays only to say "this is the app",
not to simulate a device.
Set this to 844px to get the fixed phone-screen height back, with the card
scrolling inside it. */
--mf-frame-height: auto;
--mf-frame-bezel: 12px;
--mf-frame-radius: 44px;
--mf-screen-radius: 32px;
--mf-frame-colour: #1C1A12;
}
/* ==========================================================================
Phone frame
Deliberately plain: a bezel and a rounded screen, no bodywork, no buttons, no
status bar. Its only job is to stop the card reading as a web page. None of
this is app design, so it is grouped separately and can be dropped wholesale
when the card is embedded in the Ghost form pages.
========================================================================== */
.mf-phone {
max-width: calc(430px + (var(--mf-frame-bezel) * 2));
margin: 0 auto;
padding: var(--mf-frame-bezel);
border-radius: var(--mf-frame-radius);
background: var(--mf-frame-colour);
box-shadow: 0 18px 40px rgba(28, 26, 18, 0.28);
}
.mf-phone__screen {
position: relative;
border-radius: var(--mf-screen-radius);
overflow: hidden;
background: var(--mf-bg);
}
.mf-phone__scroll {
height: var(--mf-frame-height);
overflow-y: auto;
overscroll-behavior: contain;
/* Clearance for the home indicator, which overlays the screen, so content
never sits underneath it. Stands in for the device safe area. */
padding-bottom: var(--mf-space-6);
}
/* Home indicator. One line, and the only concession to looking like a handset. */
.mf-phone__indicator {
position: absolute;
left: 50%;
bottom: 8px;
transform: translateX(-50%);
width: 134px;
height: 5px;
border-radius: 3px;
background: rgba(28, 26, 18, 0.32);
pointer-events: none;
}
/* ==========================================================================
App bar (spec 5.1)
Sticks to the top of the screen while the content scrolls, as it does in the
app. The heart is static furniture here: liking is a per-user action that a
business previewing its own listing cannot perform.
========================================================================== */
.mf-appbar {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mf-space-2) var(--mf-space-2) var(--mf-space-3);
background: var(--mf-bg);
border-bottom: 1px solid var(--mf-grey-300);
}
.mf-appbar .mf-icon {
font-size: var(--mf-chevron-size);
color: var(--mf-text);
}
/* ==========================================================================
Map preview (spec 5.2)
A static image rather than live tiles, so the page makes no per-load external
request and survives being printed to PDF. Full width, 200px tall, square
corners, marker centred.
========================================================================== */
/* The slot paints grey200 immediately and the image arrives on top whenever it
is ready. The map is only ever an source, so it can never hold up the
form or the card, and an image that never arrives leaves a neutral panel
rather than a gap or a broken icon.
In production the src is the get-listing-map endpoint:
/functions/v1/get-listing-map?bid={id}&bt={type}
which redirects to a stored image, generating it on the first request. Every
failure, including Geoapify being down or rate limiting, redirects to a blank
panel of this same colour, so the card degrades to looking mapless. */
.mf-map {
position: relative;
height: var(--mf-map-height);
overflow: hidden;
background: var(--mf-grey-200);
}
.mf-map__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hide the marker when there is no map under it. The pin is meaningless over a
blank panel, and worse, it asserts a location we are not showing. */
.mf-map--empty .mf-map__marker { display: none; }
/* Marker drawn here rather than baked into the image, so it stays exactly to
spec whichever service generates the tiles. */
.mf-map__marker {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--mf-marker-size);
height: var(--mf-marker-size);
border-radius: 50%;
background: var(--mf-error);
border: 2px solid var(--mf-white);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: grid;
place-items: center;
}
.mf-map__marker svg {
width: var(--mf-marker-icon);
height: var(--mf-marker-icon);
fill: var(--mf-white);
}
/* No attribution overlay here. Geoapify bakes its own bar into every generated
image, "Powered by Geoapify | (c) OpenStreetMap contributors", which cannot be
removed on the free plan and satisfies both its own and OpenStreetMap's
requirements. A second overlay would simply duplicate it. The app shows no
attribution at all, which is a gap in the app rather than something to copy
(spec 11.4). */
/* ==========================================================================
Detail card
========================================================================== */
.mf-detail {
background: var(--mf-bg);
color: var(--mf-text);
font-family: var(--mf-font-secondary);
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
}
.mf-detail *,
.mf-detail *::before,
.mf-detail *::after {
box-sizing: border-box;
}
.mf-detail__body {
padding: var(--mf-content-pad);
}
/* ---- Category badge (spec 5.5) ----------------------------------------- */
.mf-badge {
display: inline-flex;
align-items: center;
gap: var(--mf-space-2);
padding: var(--mf-space-2) var(--mf-space-3);
border-radius: var(--mf-radius-md);
background: var(--mf-badge-fill);
font-family: var(--mf-font-secondary);
font-size: var(--mf-size-caption);
font-weight: 600;
line-height: var(--mf-leading-secondary);
color: var(--mf-brand);
}
/* Category icon, Font Awesome, inlined as SVG. The five glyphs have different
viewBox widths, so height is fixed and width follows the aspect ratio, which
is how the app sizes them too (a font glyph sized by its em box).
The markup must repeat the symbol's viewBox on the outer