/* ==========================================================================
JF Garden Tour Map — Mobile-First Styles
All selectors scoped under .jf-garden-tour-app
========================================================================== */
/* ── CSS Custom Properties ──────────────────────────────────────────────── */
.jf-garden-tour-app {
--jf-brand: #B51846;
--jf-brand-dark: #8F1238;
--jf-brand-bg: rgba(181,24,70,0.06);
--jf-lilac-purple: #8E6AAE;
--jf-lilac-light: #C7B5D8;
--jf-lilac-bg: #F8F4F6;
--jf-lilac-hover: #A88CBD;
--jf-garden-green: #7C9A7A;
--jf-light-green: #91AD8E;
--jf-green-bg: #EEF4EE;
--jf-cream: #F8F4F6;
--jf-cream-dark: #FCFAFD;
--jf-soft-pink: #FCFAFD;
--jf-border: #D8C7D9;
--jf-border-light: #E1D3EA;
--jf-text: #332630;
--jf-heading: #20161D;
--jf-text-med: #4C3A47;
--jf-muted: #7B6A78;
--jf-shadow-sm: 0 1px 4px rgba(0,0,0,.07);
--jf-shadow-md: 0 4px 16px rgba(0,0,0,.10);
--jf-shadow-lg: 0 8px 32px rgba(0,0,0,.14);
--jf-radius-sm: 8px;
--jf-radius-md: 14px;
--jf-radius-lg: 20px;
--jf-radius-xl: 28px;
--jf-nav-height: 68px;
--jf-transition: 0.22s ease;
}
/* ── Reset / Base ───────────────────────────────────────────────────────── */
.jf-garden-tour-app *,
.jf-garden-tour-app *::before,
.jf-garden-tour-app *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.jf-garden-tour-app {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--jf-text);
background: #F8F4F6;
position: relative;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.jf-garden-tour-app button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
.jf-garden-tour-app a {
color: var(--jf-brand);
text-decoration: none;
}
.jf-garden-tour-app a:hover {
color: var(--jf-brand-dark);
}
.jf-garden-tour-app img {
display: block;
max-width: 100%;
}
.jf-garden-tour-app ul {
list-style: none;
}
/* ── App Shell — full-width on mobile ───────────────────────────────────── */
.jf-garden-tour-app {
width: 100%;
min-height: 720px;
display: flex;
flex-direction: column;
}
/* ── Visibility helpers ─────────────────────────────────────────────────── */
.jfgt-desktop-only { display: none !important; }
.jfgt-mobile-only { display: block; }
.jfgt-botanical-bg,
.jfgt-welcome-panel,
.jfgt-side-panel,
.jf-desktop-grid {
display: block;
}
.jfgt-app-top {
flex-shrink: 0;
}
.jfgt-welcome-panel {
display: none;
}
.jf-map-column {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
}
.jf-story-column {
display: flex;
flex-direction: column;
min-height: 0;
position: relative;
}
.jfgt-side-panel {
display: none;
flex: 1;
overflow: hidden;
min-height: 0;
}
.jfgt-side-panel:not([hidden]) {
display: flex;
flex-direction: column;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.jfgt-side-panel-inner {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
background: rgba(255,255,255,0.72);
backdrop-filter: blur(6px);
border-radius: var(--jf-radius-md);
border: 1px solid #E1D3EA;
box-shadow: var(--jf-shadow-sm);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.jfgt-side-close {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.92);
display: flex;
align-items: center;
justify-content: center;
color: var(--jf-brand);
box-shadow: var(--jf-shadow-sm);
z-index: 3;
}
.jfgt-side-close svg {
width: 16px;
height: 16px;
}
.jfgt-side-panel .jfgt-detail-hero-side,
.jfgt-side-panel .jfgt-detail-hero-placeholder.jfgt-detail-hero-side {
height: 180px;
}
.jfgt-side-panel .jfgt-detail-name {
font-size: 20px;
}
.jfgt-welcome-panel {
flex: 1;
display: none;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 24px 22px;
background: rgba(255,255,255,0.72);
backdrop-filter: blur(6px);
border-radius: var(--jf-radius-md);
border: 1px solid #E1D3EA;
box-shadow: var(--jf-shadow-sm);
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.jfgt-welcome-panel:not([hidden]) {
display: flex;
}
.jfgt-welcome-badge {
display: inline-block;
align-self: flex-start;
background: #EEF4EE;
color: #5F805D;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 10px;
border: 1px solid rgba(124,154,122,.28);
}
.jfgt-welcome-legend {
margin-top: 20px;
padding: 14px 16px;
background: var(--jf-cream);
border-radius: var(--jf-radius-sm);
border: 1px solid var(--jf-border-light);
display: flex;
flex-direction: column;
gap: 8px;
}
.jfgt-welcome-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--jf-text-med);
}
.jfgt-welcome-legend-item svg {
width: 14px;
height: 14px;
color: var(--jf-muted);
}
.jfgt-welcome-tips {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--jf-border-light);
}
.jfgt-welcome-tips-title {
font-size: 13px;
font-weight: 800;
color: var(--jf-text);
margin-bottom: 10px;
}
.jfgt-welcome-tips-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.jfgt-welcome-tips-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--jf-text-med);
}
.jfgt-welcome-tips-list svg {
width: 15px;
height: 15px;
color: var(--jf-brand);
flex-shrink: 0;
}
.jfgt-welcome-tips-list .jfgt-flower-bullet {
width: 15px;
height: 15px;
}
.jfgt-welcome-lock-msg {
margin-top: auto;
padding-top: 16px;
font-size: 12.5px;
color: var(--jf-muted);
display: flex;
align-items: center;
gap: 6px;
font-style: italic;
border-top: 1px solid var(--jf-border-light);
}
.jfgt-welcome-lock-msg svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.jfgt-admin-map-notice {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
z-index: 12;
background: rgba(255, 243, 220, .96);
border: 1px solid #dba617;
color: #6b4f00;
font-size: 12px;
font-weight: 600;
padding: 8px 12px;
border-radius: var(--jf-radius-sm);
box-shadow: var(--jf-shadow-sm);
}
.jfgt-fallback-preview-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 6;
background: rgba(255,255,255,.94);
color: var(--jf-brand);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(181,24,70,.2);
box-shadow: var(--jf-shadow-sm);
}
.jfgt-fallback-map-preview {
background: linear-gradient(160deg, #F8F4F6 0%, #F2ECF7 100%);
}
.jfgt-fallback-map-live {
background: linear-gradient(160deg, #F8F4F6 0%, #EEF4EE 100%);
}
.jfgt-welcome-accent {
margin-bottom: 16px;
}
.jfgt-welcome-lilac {
width: 64px;
height: 64px;
object-fit: contain;
}
.jfgt-welcome-title {
font-size: 26px;
font-weight: 800;
color: var(--jf-heading);
line-height: 1.15;
margin-bottom: 8px;
}
.jfgt-welcome-sub {
font-size: 14px;
color: #8E6AAE;
font-style: italic;
margin-bottom: 12px;
}
.jfgt-welcome-copy {
font-size: 14px;
color: var(--jf-text-med);
line-height: 1.6;
margin-bottom: 20px;
max-width: 36ch;
}
/* ── Header ─────────────────────────────────────────────────────────────── */
.jfgt-header {
background: #FCFAFD;
padding: 22px 24px 18px;
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
flex-shrink: 0;
border: 1px solid #D8C7D9;
}
.jfgt-header::before {
content: '';
position: absolute;
left: 24px;
right: 24px;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(181,24,70,.28), transparent);
pointer-events: none;
}
.jfgt-header-botanical {
flex-shrink: 0;
}
.jfgt-lilac-svg {
width: 58px;
height: 58px;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(181,24,70,.12));
}
.jfgt-header-text {
flex: 1;
}
.jfgt-header-org {
font-size: 10px;
font-weight: 800;
letter-spacing: .13em;
color: #B51846;
text-transform: uppercase;
margin-bottom: 4px;
}
.jfgt-header-title {
font-size: 36px;
font-weight: 500;
color: var(--jf-heading);
line-height: 1;
letter-spacing: 0;
}
.jfgt-header-tagline {
font-size: 12px;
color: var(--jf-text-med);
margin-top: 8px;
font-style: italic;
}
@media (max-width: 380px) {
.jfgt-header {
padding: 20px 18px 16px;
gap: 12px;
}
.jfgt-lilac-svg {
width: 50px;
height: 50px;
}
.jfgt-header-title {
font-size: 30px;
}
}
/* ── Notice Card ─────────────────────────────────────────────────────────── */
.jfgt-notice-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
margin: 12px 14px;
border-radius: var(--jf-radius-md);
font-size: 13px;
flex-shrink: 0;
}
.jfgt-notice-preview {
background: var(--jf-lilac-bg);
border: 1px solid var(--jf-lilac-light);
color: var(--jf-brand-dark);
}
.jfgt-notice-live {
background: var(--jf-green-bg);
border: 1px solid #7C9A7A;
color: var(--jf-garden-green);
}
.jfgt-notice-icon {
flex-shrink: 0;
margin-top: 1px;
color: currentColor;
}
.jfgt-notice-icon svg,
.jfgt-lock-badge {
width: 22px;
height: 22px;
display: block;
}
.jfgt-notice-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.jfgt-notice-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.jfgt-notice-msg {
font-size: 12.5px;
opacity: .85;
}
/* ── Main Content ────────────────────────────────────────────────────────── */
.jfgt-main {
flex: 1;
position: relative;
overflow: hidden;
min-height: 0;
}
/* ── Views ───────────────────────────────────────────────────────────────── */
.jfgt-view {
position: absolute;
inset: 0;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: calc(var(--jf-nav-height) + 8px);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity var(--jf-transition), transform var(--jf-transition);
-webkit-overflow-scrolling: touch;
}
.jfgt-view-active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* ── Screen Headers (Gardens / Tour / Info) ──────────────────────────────── */
.jfgt-screen-header {
padding: 18px 18px 10px;
border-bottom: 1px solid var(--jf-border-light);
background: var(--jf-cream);
position: sticky;
top: 0;
z-index: 2;
}
.jfgt-screen-title {
font-size: 20px;
font-weight: 800;
color: var(--jf-heading);
letter-spacing: -.02em;
}
.jfgt-screen-sub {
font-size: 12.5px;
color: var(--jf-muted);
margin-top: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
MAP VIEW
═════════════════════════════════════════════════════════════════════════*/
.jfgt-view-map {
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: 0;
}
.jfgt-map-wrap {
flex: 1;
position: relative;
background: #F2ECF7;
overflow: hidden;
min-height: 340px;
}
.jfgt-map-canvas {
width: 100%;
height: 100%;
min-height: 340px;
}
/* Google Maps iframe/div fill */
.jfgt-map-canvas > div {
width: 100% !important;
height: 100% !important;
}
/* ── Fallback illustrated map ─────────────────────────────────────────────── */
.jfgt-fallback-map {
width: 100%;
height: 100%;
min-height: 340px;
position: relative;
background: #F2ECF7;
overflow: hidden;
}
.jfgt-fallback-map-svg {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
.jfgt-fallback-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 65%, rgba(250,247,242,.25) 100%);
pointer-events: none;
}
/* ── Map legend ───────────────────────────────────────────────────────────── */
.jfgt-map-legend {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
border-radius: var(--jf-radius-sm);
padding: 7px 10px;
font-size: 11.5px;
color: var(--jf-muted);
display: flex;
align-items: center;
gap: 10px;
box-shadow: var(--jf-shadow-sm);
}
.jfgt-map-legend svg {
width: 12px;
height: 12px;
color: #aaa;
flex-shrink: 0;
}
.jfgt-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.jfgt-legend-dot-live { background: var(--jf-garden-green); }
.jfgt-legend-dot-preview { background: var(--jf-brand); }
/* ── Map pins ─────────────────────────────────────────────────────────────── */
.jfgt-pin {
position: absolute;
transform: translate(-50%, -100%);
width: 72px;
height: 72px;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
z-index: 5;
transition: transform .18s ease, filter .18s ease;
}
.jfgt-pin:hover,
.jfgt-pin:focus,
.jfgt-pin.is-active {
transform: translate(-50%, -100%) scale(1.06);
outline: none;
filter: drop-shadow(0 8px 18px rgba(168,140,189,.45));
}
.jfgt-pin:hover .jf-pin-bloom,
.jfgt-pin:focus .jf-pin-bloom,
.jfgt-pin.is-active .jf-pin-bloom {
opacity: 1;
transform: scale(1);
}
.jfgt-pin:hover .jf-pin-core,
.jfgt-pin:focus .jf-pin-core,
.jfgt-pin.is-active .jf-pin-core {
transform: translateY(-4px) scale(1.05);
}
.jf-pin-bloom {
position: absolute;
inset: 0;
transform: scale(0.75);
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
filter: drop-shadow(0 8px 14px rgba(168, 140, 189, 0.34));
}
.jf-pin-bloom svg,
.jf-pin-core svg {
display: block;
}
.jf-pin-core {
position: absolute;
left: 14px;
top: 8px;
z-index: 2;
transition: transform 0.2s ease;
}
.jfgt-pin:hover .jf-pin-core path,
.jfgt-pin:focus .jf-pin-core path,
.jfgt-pin.is-active .jf-pin-core path {
fill: #B51846;
}
.jfgt-pin:hover .jf-pin-core text,
.jfgt-pin:focus .jf-pin-core text,
.jfgt-pin.is-active .jf-pin-core text {
fill: #B51846;
}
[data-status="live"] .jf-pin-bloom svg ellipse {
fill: #C7B5D8;
stroke: #B51846;
}
[data-status="live"] .jf-pin-bloom {
filter: drop-shadow(0 8px 16px rgba(168, 140, 189, 0.38));
}
.jfgt-pin-svg {
width: 44px;
height: 54px;
display: block;
}
.jfgt-pin-icon {
font-size: 15px;
}
/* ── Explore button ───────────────────────────────────────────────────────── */
.jfgt-btn-explore {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: calc(100% - 32px);
margin: 12px 16px;
padding: 14px;
background: var(--jf-brand);
color: white;
font-size: 15px;
font-weight: 700;
border-radius: 10px;
box-shadow: var(--jf-shadow-md);
transition: background var(--jf-transition), transform .12s ease;
flex-shrink: 0;
}
.jfgt-btn-explore:hover { background: #8F1238; }
.jfgt-btn-explore:active { transform: scale(.98); }
/* ── Bottom sheet ─────────────────────────────────────────────────────────── */
.jfgt-sheet {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #FCFAFD;
border-radius: var(--jf-radius-lg) var(--jf-radius-lg) 0 0;
box-shadow: 0 -4px 24px rgba(0,0,0,.14);
z-index: 20;
transform: translateY(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
max-height: 60%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.jfgt-sheet.jfgt-sheet-open {
transform: translateY(0);
}
.jfgt-sheet-handle {
width: 40px;
height: 4px;
background: #ddd;
border-radius: 2px;
margin: 10px auto 6px;
flex-shrink: 0;
}
.jfgt-sheet-close {
position: absolute;
top: 8px;
right: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--jf-muted);
background: var(--jf-cream);
}
.jfgt-sheet-close svg {
width: 16px;
height: 16px;
}
.jfgt-sheet-body {
padding: 0 16px 20px;
overflow-y: auto;
flex: 1;
}
.jfgt-sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.3);
z-index: 19;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.jfgt-sheet-backdrop.jfgt-backdrop-visible {
opacity: 1;
pointer-events: auto;
}
/* ── Sheet Card content ───────────────────────────────────────────────────── */
.jfgt-sheet-card {
display: flex;
gap: 14px;
align-items: flex-start;
padding-top: 6px;
}
.jfgt-sheet-thumb {
width: 72px;
height: 72px;
border-radius: var(--jf-radius-sm);
object-fit: cover;
flex-shrink: 0;
background: var(--jf-cream-dark);
}
.jfgt-sheet-thumb-placeholder {
width: 72px;
height: 72px;
border-radius: var(--jf-radius-sm);
background: linear-gradient(135deg, var(--jf-lilac-bg), var(--jf-green-bg));
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.jfgt-placeholder-accent {
width: 48px;
height: 48px;
object-fit: contain;
}
.jfgt-sheet-info {
flex: 1;
min-width: 0;
}
.jfgt-sheet-number {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #7C9A7A;
margin-bottom: 2px;
}
.jfgt-sheet-name {
font-size: 16px;
font-weight: 800;
line-height: 1.2;
color: var(--jf-heading);
}
.jfgt-sheet-gardener {
font-size: 12.5px;
color: var(--jf-muted);
margin-top: 2px;
}
.jfgt-sheet-cat {
display: inline-block;
background: #EEF4EE;
color: #5F805D;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
margin-top: 5px;
}
.jfgt-sheet-location {
font-size: 12px;
color: var(--jf-muted);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.jfgt-sheet-actions {
display: flex;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--jf-border-light);
}
.jfgt-sheet-locked {
font-size: 12px;
color: var(--jf-muted);
margin-top: 10px;
display: flex;
align-items: center;
gap: 5px;
font-style: italic;
}
.jfgt-sheet-location svg,
.jfgt-gc-location svg,
.jfgt-tour-loc svg,
.jfgt-detail-address svg,
.jfgt-sheet-locked svg,
.jfgt-detail-locked svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
GARDENS LIST VIEW
═════════════════════════════════════════════════════════════════════════*/
.jfgt-garden-cards {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.jfgt-garden-card {
background: #FCFAFD;
border-radius: var(--jf-radius-md);
box-shadow: var(--jf-shadow-sm);
border: 1px solid #E1D3EA;
overflow: hidden;
display: flex;
cursor: pointer;
transition: box-shadow var(--jf-transition), transform .12s ease;
}
.jfgt-garden-card:hover { box-shadow: var(--jf-shadow-md); }
.jfgt-garden-card:active { transform: scale(.99); }
.jfgt-gc-img-wrap {
width: 90px;
flex-shrink: 0;
position: relative;
}
.jfgt-gc-img {
width: 90px;
height: 100%;
min-height: 100%;
object-fit: cover;
}
.jfgt-gc-img-placeholder {
width: 90px;
min-height: 90px;
height: 100%;
background: linear-gradient(145deg, var(--jf-lilac-bg) 0%, var(--jf-green-bg) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.jfgt-gc-pin-badge {
position: absolute;
top: 6px;
left: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--jf-garden-green);
color: white;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
[data-status="preview"] .jfgt-gc-pin-badge { background: var(--jf-lilac-purple); }
.jfgt-gc-body {
flex: 1;
padding: 12px 12px 12px 12px;
min-width: 0;
}
.jfgt-gc-number {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: #7C9A7A;
margin-bottom: 2px;
}
[data-status="live"] .jfgt-gc-number { color: var(--jf-garden-green); }
.jfgt-gc-name {
font-size: 15px;
font-weight: 800;
color: var(--jf-heading);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jfgt-gc-gardener {
font-size: 12px;
color: var(--jf-muted);
margin-top: 2px;
}
.jfgt-gc-cat {
display: inline-block;
background: #EEF4EE;
color: #5F805D;
font-size: 10.5px;
font-weight: 600;
padding: 2px 7px;
border-radius: 20px;
margin-top: 6px;
}
[data-status="live"] .jfgt-gc-cat {
background: var(--jf-green-bg);
color: var(--jf-garden-green);
}
.jfgt-gc-location {
font-size: 11.5px;
color: var(--jf-muted);
margin-top: 4px;
display: flex;
align-items: center;
gap: 3px;
}
.jfgt-gc-arrow {
margin-left: auto;
padding-left: 8px;
color: #ccc;
display: flex;
align-items: center;
align-self: center;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
TOUR VIEW
═════════════════════════════════════════════════════════════════════════*/
.jfgt-tour-list {
padding: 14px;
display: flex;
flex-direction: column;
gap: 0;
}
.jfgt-tour-stop {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 0;
cursor: pointer;
position: relative;
}
.jfgt-tour-stop + .jfgt-tour-stop {
border-top: 1px solid var(--jf-border-light);
}
.jfgt-tour-step {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
margin-top: 2px;
}
.jfgt-tour-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--jf-garden-green);
color: white;
font-size: 13px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--jf-shadow-sm);
flex-shrink: 0;
}
[data-status="preview"] .jfgt-tour-num { background: var(--jf-lilac-purple); }
.jfgt-tour-line {
width: 2px;
flex: 1;
min-height: 20px;
background: var(--jf-border);
margin-top: 6px;
}
.jfgt-tour-stop:last-child .jfgt-tour-line { display: none; }
.jfgt-tour-content { flex: 1; }
.jfgt-tour-name {
font-size: 15px;
font-weight: 700;
color: var(--jf-text);
line-height: 1.2;
}
.jfgt-tour-gardener {
font-size: 12px;
color: var(--jf-muted);
margin-top: 2px;
}
.jfgt-tour-loc {
font-size: 12px;
color: var(--jf-muted);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.jfgt-tour-footer {
padding: 0 14px 14px;
}
/* ═══════════════════════════════════════════════════════════════════════════
INFO VIEW
═════════════════════════════════════════════════════════════════════════*/
.jfgt-info-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
.jfgt-card {
background: #FCFAFD;
border-radius: var(--jf-radius-md);
border: 1px solid #E1D3EA;
padding: 16px;
box-shadow: var(--jf-shadow-sm);
}
.jfgt-card-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.jfgt-card-head h3 {
font-size: 15px;
font-weight: 800;
color: var(--jf-heading);
}
.jfgt-card-emoji {
display: none;
}
.jfgt-card-icon {
width: 18px;
height: 18px;
color: #8E6AAE;
flex-shrink: 0;
}
.jfgt-tips-list {
display: flex;
flex-direction: column;
gap: 9px;
}
.jfgt-tips-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--jf-text-med);
}
.jfgt-tip-bullet {
color: var(--jf-lilac-purple);
width: 16px;
height: 16px;
flex-shrink: 0;
line-height: 1;
}
.jfgt-flower-bullet {
display: block;
object-fit: contain;
}
.jfgt-contact-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.jfgt-contact-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--jf-brand);
padding: 8px 10px;
border-radius: var(--jf-radius-sm);
background: #F8F4F6;
transition: background var(--jf-transition), color var(--jf-transition);
}
.jfgt-contact-row:hover { background: #EEF4EE; color: #5F805D; }
.jfgt-contact-row svg {
width: 18px;
height: 18px;
color: #7C9A7A;
flex-shrink: 0;
}
.jfgt-event-date {
font-size: 15px;
font-weight: 600;
color: var(--jf-garden-green);
}
/* ═══════════════════════════════════════════════════════════════════════════
DETAIL VIEW
═════════════════════════════════════════════════════════════════════════*/
.jfgt-view-detail {
background: #FCFAFD;
padding-bottom: calc(var(--jf-nav-height) + 16px);
}
#jfgt-detail-body {
display: flex;
flex-direction: column;
}
.jfgt-detail-hero {
width: 100%;
height: 220px;
object-fit: cover;
flex-shrink: 0;
}
.jfgt-detail-hero-placeholder {
width: 100%;
height: 220px;
background: linear-gradient(135deg, #B51846 0%, #C7B5D8 55%, #7C9A7A 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
flex-shrink: 0;
}
.jfgt-detail-hero-bar {
position: relative;
margin-top: -1px;
}
.jfgt-detail-back {
position: absolute;
top: -200px;
left: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.85);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
color: var(--jf-brand);
box-shadow: var(--jf-shadow-md);
z-index: 5;
transition: background var(--jf-transition), color var(--jf-transition);
}
.jfgt-detail-back:hover { background: white; color: var(--jf-brand-dark); }
.jfgt-detail-back svg {
width: 18px;
height: 18px;
}
.jfgt-detail-body-inner {
padding: 18px 18px 10px;
}
.jfgt-detail-number {
font-size: 11px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--jf-lilac-purple);
margin-bottom: 4px;
}
[data-status="live"] .jfgt-detail-number { color: var(--jf-garden-green); }
.jfgt-detail-name {
font-size: 22px;
font-weight: 900;
line-height: 1.15;
color: var(--jf-heading);
letter-spacing: -.02em;
}
.jfgt-detail-gardener {
font-size: 13px;
color: var(--jf-muted);
margin-top: 4px;
}
.jfgt-detail-cat {
display: inline-flex;
align-items: center;
background: #EEF4EE;
color: #5F805D;
font-size: 11.5px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
margin-top: 8px;
}
[data-status="live"] .jfgt-detail-cat {
background: var(--jf-green-bg);
color: var(--jf-garden-green);
}
.jfgt-detail-desc {
font-size: 14px;
color: var(--jf-text-med);
line-height: 1.6;
margin-top: 14px;
}
.jfgt-detail-address {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--jf-muted);
margin-top: 10px;
}
.jfgt-detail-section {
padding: 0 18px 16px;
border-top: 1px solid var(--jf-border-light);
margin-top: 16px;
padding-top: 16px;
}
.jfgt-detail-section-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--jf-muted);
margin-bottom: 10px;
}
.jfgt-highlights-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.jfgt-highlights-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--jf-text-med);
}
.jfgt-highlight-bullet {
width: 16px;
height: 16px;
flex-shrink: 0;
object-fit: contain;
}
.jfgt-detail-actions {
padding: 0 18px 18px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.jfgt-detail-locked {
flex-shrink: 0;
font-size: 13px;
color: var(--jf-muted);
display: flex;
align-items: center;
gap: 6px;
font-style: italic;
background: var(--jf-lilac-bg);
margin: 0 18px 18px;
padding: 10px 14px;
border-radius: var(--jf-radius-sm);
}
/* ── Shared buttons ───────────────────────────────────────────────────────── */
.jfgt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 18px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
transition: background var(--jf-transition), transform .1s ease, box-shadow var(--jf-transition);
cursor: pointer;
}
.jfgt-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.jfgt-btn:active { transform: scale(.97); }
.jfgt-btn-primary {
background: var(--jf-brand);
color: white;
box-shadow: var(--jf-shadow-sm);
}
.jfgt-btn-primary:hover { background: #8F1238; }
.jfgt-btn-outline {
background: transparent;
color: var(--jf-brand);
border: 2px solid var(--jf-brand);
}
.jfgt-btn-outline:hover { background: #E8DDF1; }
.jfgt-btn-ghost {
background: rgba(181,24,70,0.06);
color: var(--jf-brand);
font-size: 13px;
padding: 10px 14px;
}
.jfgt-btn-ghost:hover { background: #EEF4EE; color: #5F805D; }
.jfgt-btn-full { width: 100%; }
/* ── Detail Open button inside sheet ─────────────────────────────────────── */
.jfgt-btn-open-detail {
flex: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════
BOTTOM NAVIGATION
═════════════════════════════════════════════════════════════════════════*/
.jfgt-bottom-nav {
display: flex;
align-items: stretch;
background: #FCFAFD;
border-top: 1px solid var(--jf-border);
border-bottom: 1px solid var(--jf-border);
height: var(--jf-nav-height);
flex-shrink: 0;
position: static;
z-index: 100;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.jfgt-nav-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 4px 10px;
color: #7B6A78;
cursor: pointer;
transition: color var(--jf-transition), background var(--jf-transition);
position: relative;
}
.jfgt-nav-btn::after {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 2px;
border-radius: 0 0 3px 3px;
background: var(--jf-brand);
opacity: 0;
transition: opacity var(--jf-transition);
}
.jfgt-nav-btn.jfgt-nav-active {
color: #B51846;
background: rgba(181,24,70,0.06);
}
.jfgt-nav-btn.jfgt-nav-active::after {
opacity: 1;
}
.jfgt-nav-btn:hover { background: rgba(181,24,70,0.06); color: #8E6AAE; }
.jfgt-nav-icon svg {
display: block;
width: 22px;
height: 22px;
}
.jfgt-nav-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.jfgt-view,
.jfgt-sheet,
.jfgt-pin,
.jfgt-btn,
.jfgt-nav-btn,
.jfgt-garden-card {
transition: none !important;
animation: none !important;
}
}
/* ── Mobile top-tab shell ────────────────────────────────────────────────── */
@media (max-width: 767px) {
.jf-garden-tour-app {
height: auto;
min-height: 100svh;
border-radius: 0;
overflow: visible;
display: flex;
flex-direction: column;
--jf-mobile-map-min: calc(100svh - 180px);
}
.jfgt-desktop-only,
.jfgt-welcome-panel,
.jfgt-side-panel {
display: none !important;
}
.jfgt-botanical-bg {
display: none;
}
.jfgt-app-top {
display: block;
flex-shrink: 0;
}
.jf-desktop-grid {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
overflow: visible;
}
.jf-map-column {
flex: 1;
display: none;
min-height: 0;
}
.jf-garden-tour-app[data-active-view="map"] .jf-map-column {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: var(--jf-mobile-map-min);
}
.jf-garden-tour-app[data-active-view="map"] .jfgt-map-wrap {
flex: 1 1 auto;
min-height: var(--jf-mobile-map-min);
}
.jf-garden-tour-app[data-active-view="map"] .jfgt-map-canvas,
.jf-garden-tour-app[data-active-view="map"] .jfgt-fallback-map {
min-height: var(--jf-mobile-map-min);
}
.jf-garden-tour-app[data-active-view="map"] .jfgt-map-canvas > div {
min-height: var(--jf-mobile-map-min) !important;
}
.jfgt-btn-explore {
flex-shrink: 0;
margin: 8px 16px 10px;
width: calc(100% - 32px);
}
.jf-story-column {
flex: 1;
display: none;
min-height: 0;
}
.jf-garden-tour-app:not([data-active-view="map"]) .jf-story-column {
display: flex;
flex: 0 0 auto;
min-height: auto;
}
.jfgt-main {
flex: 0 0 auto;
position: relative;
overflow: visible;
}
.jfgt-view {
position: static;
display: none;
overflow: visible;
padding-bottom: 18px;
opacity: 1;
pointer-events: none;
transform: none;
transition: none;
}
.jfgt-view-active {
display: block;
pointer-events: auto;
}
.jfgt-bottom-nav {
position: sticky;
top: 0;
bottom: auto;
margin-top: 0;
flex-shrink: 0;
z-index: 1;
}
.jfgt-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: min(420px, 70svh);
z-index: 1000;
}
.jfgt-sheet-backdrop {
position: fixed;
inset: 0;
z-index: 999;
}
}
/* ── Utility: visually hidden ─────────────────────────────────────────────── */
.jfgt-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
/* ── Loading state ────────────────────────────────────────────────────────── */
.jfgt-map-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
color: var(--jf-muted);
font-size: 13px;
background: #F2ECF7;
}
.jfgt-spinner {
width: 28px;
height: 28px;
border: 3px solid var(--jf-border);
border-top-color: var(--jf-lilac-purple);
border-radius: 50%;
animation: jfgt-spin .8s linear infinite;
}
@keyframes jfgt-spin { to { transform: rotate(360deg); } }
/* ═══════════════════════════════════════════════════════════════════════════
TABLET — 768px to 1023px
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
.jf-garden-tour-app {
--jf-nav-height: 56px;
max-width: 720px;
margin: 24px auto 40px;
border-radius: var(--jf-radius-xl);
box-shadow: var(--jf-shadow-lg), 0 0 0 1px var(--jf-border);
overflow: hidden;
min-height: auto;
padding-bottom: 0;
display: flex;
flex-direction: column;
}
.jfgt-app-top {
order: 1;
}
.jf-app-tabs {
order: 2;
}
.jf-desktop-grid {
order: 3;
}
.jfgt-mobile-only {
display: none !important;
}
.jfgt-desktop-only {
display: inline-flex !important;
}
.jfgt-botanical-bg {
display: block;
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 92% 8%, rgba(181,24,70,.06) 0%, transparent 28%),
radial-gradient(circle at 4% 92%, rgba(45,90,39,.05) 0%, transparent 24%);
}
.jfgt-app-top,
.jf-app-tabs,
.jf-desktop-grid {
position: relative;
z-index: 1;
}
.jfgt-app-top {
display: flex;
align-items: stretch;
gap: 16px;
padding: 18px 20px 0;
}
.jfgt-header {
flex: 1;
border-radius: var(--jf-radius-md);
margin: 0;
}
.jfgt-notice-card {
flex: 0 0 240px;
margin: 0;
align-self: center;
}
.jfgt-bottom-nav {
position: static;
height: var(--jf-nav-height);
box-shadow: none;
border-top: none;
border-bottom: 1px solid var(--jf-border);
margin: 0 20px;
border-radius: var(--jf-radius-md) var(--jf-radius-md) 0 0;
background: #F2ECF7;
}
.jfgt-nav-btn::after {
top: auto;
bottom: 0;
border-radius: 3px 3px 0 0;
}
.jf-desktop-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 16px 20px 24px;
min-height: 520px;
}
.jf-map-column {
min-height: 520px;
border-radius: var(--jf-radius-md);
overflow: hidden;
border: 1px solid var(--jf-border-light);
box-shadow: var(--jf-shadow-sm);
background: #F2ECF7;
}
.jfgt-map-wrap {
min-height: 520px;
flex: 1;
}
.jfgt-map-canvas,
.jfgt-fallback-map {
min-height: 520px;
}
.jf-story-column {
min-height: 520px;
max-height: 520px;
}
.jfgt-welcome-panel {
height: 100%;
}
.jfgt-side-panel {
height: 100%;
max-height: 520px;
}
.jfgt-main {
flex: 1;
position: relative;
overflow: hidden;
min-height: 0;
background: #FCFAFD;
border-radius: var(--jf-radius-md);
border: 1px solid var(--jf-border-light);
box-shadow: var(--jf-shadow-sm);
}
.jfgt-main[hidden] {
display: none !important;
}
.jfgt-view {
position: absolute;
inset: 0;
padding-bottom: 0;
transform: none;
opacity: 0;
}
.jfgt-view-active {
opacity: 1;
}
.jfgt-view-map {
display: none !important;
}
.jfgt-view-detail {
display: none !important;
}
.jfgt-garden-cards {
padding: 12px;
}
.jf-map-column .jfgt-map-legend {
display: none;
}
.jf-story-column {
height: 100%;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
DESKTOP — 1024px and above
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
.jf-garden-tour-app {
--jf-desktop-body-height: clamp(430px, calc(100svh - 300px), 620px);
max-width: 1240px;
margin: 32px auto 48px;
border-radius: var(--jf-radius-xl);
min-height: 0;
}
.jfgt-app-top {
padding: 20px 28px 12px;
align-items: center;
gap: 20px;
}
.jfgt-header {
padding: 20px 24px 16px;
border-radius: var(--jf-radius-md);
}
.jfgt-header-title {
font-size: 40px;
}
.jfgt-header-tagline {
margin-top: 6px;
}
.jfgt-notice-card {
flex: 0 0 320px;
padding: 14px 16px;
margin: 0;
}
.jfgt-bottom-nav {
margin: 0 28px;
padding: 0 12px;
background: #FCFAFD;
border: 1px solid var(--jf-border-light);
border-radius: var(--jf-radius-md);
}
.jfgt-nav-btn {
flex-direction: row;
gap: 8px;
padding: 12px 18px;
border-radius: var(--jf-radius-sm);
}
.jfgt-nav-btn.jfgt-nav-active {
color: #B51846;
background: rgba(181,24,70,0.06);
}
[data-status="live"] .jfgt-nav-btn.jfgt-nav-active {
color: #B51846;
background: rgba(181,24,70,0.06);
}
[data-status="live"] .jfgt-nav-btn::after {
background: var(--jf-brand);
}
.jfgt-nav-label {
font-size: 12px;
}
.jf-desktop-grid {
grid-template-columns: minmax(0, 65%) minmax(320px, 35%);
gap: 22px;
padding: 16px 28px 28px;
height: var(--jf-desktop-body-height);
min-height: 0;
align-items: stretch;
overflow: hidden;
}
.jf-map-column {
min-height: 0;
height: 100%;
}
.jfgt-map-wrap,
.jfgt-map-canvas,
.jfgt-fallback-map {
min-height: 0;
}
.jf-story-column {
min-height: 0;
max-height: none;
height: 100%;
display: flex;
flex-direction: column;
}
.jfgt-welcome-panel,
.jfgt-side-panel:not([hidden]) {
flex: 1;
min-height: 0;
max-height: 100%;
}
.jfgt-side-panel {
max-height: 100%;
}
.jfgt-main {
flex: 1;
min-height: 0;
max-height: 100%;
}
.jfgt-welcome-panel {
padding: 28px 26px;
}
.jfgt-welcome-title {
font-size: 28px;
}
.jfgt-side-panel .jfgt-detail-hero-side,
.jfgt-side-panel .jfgt-detail-hero-placeholder.jfgt-detail-hero-side {
height: 200px;
}
.jfgt-garden-cards {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
}
.jfgt-map-legend.jfgt-desktop-hide {
display: none;
}
}
Succulent Boutonniere by Studley's - Studley Flower Gardens
Succulent Boutonniere by Studley’s
The Succulent Boutonniere by Studley’s adds unique flair to your look! Our designers select a petite succulent bloom. Next we add a deep purple accent flower. Finally, we include glossy green foliage. Accent your suit with this perfect boutonniere! Visit us at 82 Wakefield Street to see more options for customizing your boutonniere! SP2614 This item is available for Pick Up and Local Delivery only.