generated from westfarn/web_django_template
Initial commit
This commit is contained in:
ai_ml_operations
@@ -0,0 +1,35 @@
|
||||
/* Address autocomplete dropdown (public + portal). */
|
||||
.address-ac-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.address-ac-list {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100% + 2px);
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
list-style: none;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.address-ac-item {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
color: #111827;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.address-ac-item:hover,
|
||||
.address-ac-item:focus {
|
||||
background: #f3f4f6;
|
||||
outline: none;
|
||||
}
|
||||
+6
File diff suppressed because one or more lines are too long
Executable
+18
File diff suppressed because one or more lines are too long
@@ -0,0 +1,692 @@
|
||||
:root {
|
||||
--monica-primary: #00626c;
|
||||
--monica-primary-light: #008898;
|
||||
--monica-ink: #212121;
|
||||
--monica-muted: #6b7280;
|
||||
--monica-surface: #f4f7f7;
|
||||
--monica-border: #d9e3e4;
|
||||
--monica-ok: #1a7f4b;
|
||||
--monica-warn: #b45309;
|
||||
--monica-danger: #b91c1c;
|
||||
--portal-sidebar: 240px;
|
||||
--exit-dark: #080808;
|
||||
--exit-teal: #00626c;
|
||||
--exit-teal-bright: #008898;
|
||||
}
|
||||
|
||||
/* Portal shell */
|
||||
body.portal {
|
||||
margin: 0;
|
||||
background: var(--monica-surface);
|
||||
font-family: "Work Sans", sans-serif;
|
||||
color: var(--monica-ink);
|
||||
}
|
||||
.portal-shell { display: flex; min-height: 100vh; }
|
||||
.portal-sidebar {
|
||||
width: var(--portal-sidebar);
|
||||
background: #080808;
|
||||
color: #cbd5e1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.portal-brand {
|
||||
padding: 16px 18px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
font-family: Poppins, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.portal-brand img {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
.portal-brand span { color: #7dd3da; font-size: 12px; letter-spacing: 0.04em; }
|
||||
.portal-nav { padding: 12px 0; flex: 1; }
|
||||
.portal-nav a {
|
||||
display: block;
|
||||
padding: 10px 18px;
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.portal-nav a:hover { color: #fff; background: rgba(255,255,255,0.04); }
|
||||
.portal-nav a.active { color: #fff; background: rgba(0,98,108,0.28); border-left-color: #00a0ab; }
|
||||
.portal-nav .nav-section {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #64748b;
|
||||
padding: 16px 18px 6px;
|
||||
}
|
||||
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.portal-topbar {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--monica-border);
|
||||
padding: 14px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.portal-topbar h1 { margin: 0; font-size: 20px; font-family: Poppins, sans-serif; font-weight: 600; }
|
||||
.portal-content { padding: 24px; flex: 1; }
|
||||
.portal-user { font-size: 13px; color: var(--monica-muted); }
|
||||
.portal-user strong { color: var(--monica-ink); }
|
||||
|
||||
/* Portal widgets */
|
||||
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
||||
.analytics-overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(140px, 1fr) 4fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.analytics-overview .stat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.analytics-overview .panel { margin-bottom: 0; }
|
||||
@media (max-width: 800px) {
|
||||
.analytics-overview { grid-template-columns: 1fr; }
|
||||
}
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--monica-border);
|
||||
padding: 18px;
|
||||
}
|
||||
.stat-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--monica-muted); }
|
||||
.stat-card .value { font-size: 28px; font-weight: 700; font-family: Poppins, sans-serif; margin-top: 4px; }
|
||||
.stat-card .delta { font-size: 12px; margin-top: 4px; color: var(--monica-ok); }
|
||||
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid var(--monica-border);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.panel-h {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--monica-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.panel-h h2 { margin: 0; font-size: 15px; font-family: Poppins, sans-serif; font-weight: 600; }
|
||||
.panel-b { padding: 18px; }
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 9px 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
}
|
||||
.btn-primary { background: var(--monica-primary); color: #fff; }
|
||||
.btn-primary:hover { background: #004e56; color: #fff; text-decoration: none; }
|
||||
.btn-ghost { background: transparent; border: 1px solid var(--monica-border); color: var(--monica-ink); }
|
||||
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
||||
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.table th {
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--monica-muted);
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--monica-border);
|
||||
font-weight: 600;
|
||||
}
|
||||
.table td { padding: 12px; border-bottom: 1px solid var(--monica-border); vertical-align: middle; }
|
||||
.table tr:hover td { background: #f8fafc; }
|
||||
.table a { color: var(--monica-primary); text-decoration: none; font-weight: 500; }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.badge-new { background: #d0eef0; color: #00626c; }
|
||||
.badge-contacted { background: #fef3c7; color: #92400e; }
|
||||
.badge-won { background: #d1fae5; color: #065f46; }
|
||||
.badge-lost { background: #fee2e2; color: #991b1b; }
|
||||
.badge-sent { background: #d0eef0; color: #00626c; }
|
||||
.badge-scheduled { background: #ede9fe; color: #5b21b6; }
|
||||
.badge-delivered { background: #d1fae5; color: #065f46; }
|
||||
.badge-opened { background: #dbeafe; color: #1e40af; }
|
||||
.badge-clicked { background: #ede9fe; color: #5b21b6; }
|
||||
.badge-failed { background: #fee2e2; color: #991b1b; }
|
||||
.badge-optin { background: #d1fae5; color: #065f46; }
|
||||
.badge-optout { background: #f3f4f6; color: #4b5563; }
|
||||
.badge-draft { background: #f3f4f6; color: #4b5563; }
|
||||
.badge-completed { background: #d1fae5; color: #065f46; }
|
||||
.badge-cancelled { background: #f3f4f6; color: #4b5563; }
|
||||
.badge-sending { background: #d0eef0; color: #00626c; }
|
||||
.badge-queued { background: #ede9fe; color: #5b21b6; }
|
||||
.badge-bounced { background: #fee2e2; color: #991b1b; }
|
||||
.badge-published { background: #d1fae5; color: #065f46; }
|
||||
.badge-publishing { background: #d0eef0; color: #00626c; }
|
||||
|
||||
.form-grid { display: grid; gap: 16px; }
|
||||
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
|
||||
@media (max-width: 700px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }
|
||||
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #374151; }
|
||||
.field input, .field select, .field textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--monica-border);
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.field textarea { min-height: 100px; resize: vertical; }
|
||||
.field .hint { font-size: 12px; color: var(--monica-muted); margin-top: 4px; }
|
||||
|
||||
.channel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--monica-border); margin-bottom: 18px; }
|
||||
.channel-tabs a {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--monica-muted);
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.channel-tabs a.active { color: var(--monica-primary); border-bottom-color: var(--monica-primary); }
|
||||
|
||||
.chart-placeholder {
|
||||
height: 220px;
|
||||
background: linear-gradient(180deg, #e8f4f5 0%, #fff 100%);
|
||||
border: 1px dashed #a8d8dc;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
padding: 24px 16px 12px;
|
||||
}
|
||||
.chart-placeholder > .bar {
|
||||
flex: 1;
|
||||
background: var(--monica-primary);
|
||||
opacity: 0.75;
|
||||
border-radius: 2px 2px 0 0;
|
||||
min-height: 8px;
|
||||
}
|
||||
.chart-placeholder .chart-bar-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-placeholder .chart-bar-col .bar {
|
||||
width: 100%;
|
||||
background: var(--monica-primary);
|
||||
opacity: 0.75;
|
||||
border-radius: 2px 2px 0 0;
|
||||
min-height: 8px;
|
||||
transition: height 0.25s ease;
|
||||
}
|
||||
.chart-placeholder .chart-bar-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
.chart-placeholder .chart-bar-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.chart-placeholder .chart-bar-label {
|
||||
font-size: 11px;
|
||||
color: var(--monica-muted);
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.consent-pills { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.preview-pane {
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--monica-border);
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
min-height: 160px;
|
||||
}
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.calendar-grid .dow { text-align: center; color: var(--monica-muted); font-weight: 600; padding: 6px; }
|
||||
.calendar-grid .day {
|
||||
aspect-ratio: 1;
|
||||
border: 1px solid var(--monica-border);
|
||||
background: #fff;
|
||||
padding: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.calendar-grid .day.has-post { background: #e8f4f5; }
|
||||
.calendar-grid .day .dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--monica-primary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(160deg, #080808, #00626c 60%, #e8f4f5 60%);
|
||||
padding: 24px;
|
||||
}
|
||||
.login-card {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 36px 32px;
|
||||
border: 1px solid var(--monica-border);
|
||||
}
|
||||
.login-card h1 { font-family: Poppins, sans-serif; font-size: 22px; margin: 0 0 6px; }
|
||||
.login-card .sub { color: var(--monica-muted); font-size: 14px; margin-bottom: 24px; }
|
||||
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
@media (max-width: 900px) {
|
||||
.portal-shell { flex-direction: column; }
|
||||
.portal-sidebar { width: 100%; }
|
||||
.portal-nav { display: flex; flex-wrap: wrap; padding: 8px; }
|
||||
.portal-nav .nav-section { display: none; }
|
||||
.portal-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
|
||||
.portal-nav a.active { border-bottom-color: #00a0ab; }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Public brand — EXIT Realty logo from exitrealtywheaton.com */
|
||||
.page .rd-navbar-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.page .rd-navbar-brand img {
|
||||
display: block !important;
|
||||
height: 44px;
|
||||
width: auto;
|
||||
max-width: 160px;
|
||||
}
|
||||
.page .rd-navbar-brand::before,
|
||||
.page .rd-navbar-brand::after { content: none !important; display: none !important; }
|
||||
.page .rd-navbar-brand .brand-site {
|
||||
font-family: Poppins, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.04em;
|
||||
color: #00626c;
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.page .rd-navbar-brand .brand-site span {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Shared extras */
|
||||
.muted { color: var(--monica-muted); font-size: 12px; }
|
||||
.text-warn { color: var(--monica-warn); font-size: 12px; }
|
||||
.hint-block { font-size: 13px; color: var(--monica-muted); margin: 12px 0 0; }
|
||||
.plain-list { margin: 0 0 12px; padding-left: 18px; }
|
||||
.plain-list li { margin-bottom: 6px; }
|
||||
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.check-row.account-pick { align-items: flex-start; }
|
||||
.account-pick-copy {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
.account-pick-copy strong { display: block; font-weight: 600; }
|
||||
.account-rename {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.account-rename input[type="text"] {
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
max-width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--monica-border);
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.row-warn td { background: #fffbeb; }
|
||||
.auth-alert {
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fdba74;
|
||||
color: #9a3412;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.auth-alert a { color: #9a3412; font-weight: 600; }
|
||||
|
||||
/* Social accounts */
|
||||
.connect-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.connect-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.connect-card {
|
||||
display: flex; gap: 14px; align-items: flex-start; text-align: left;
|
||||
padding: 14px; border: 1px solid var(--monica-border); background: #fff;
|
||||
cursor: pointer; font: inherit; width: 100%;
|
||||
}
|
||||
.connect-card:hover { border-color: var(--monica-primary); }
|
||||
.connect-card.is-active { border-color: var(--monica-primary); box-shadow: inset 0 0 0 1px var(--monica-primary); }
|
||||
.connect-card p { margin: 4px 0 0; font-size: 13px; color: var(--monica-muted); }
|
||||
.connect-form-panel {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--monica-border);
|
||||
}
|
||||
.connect-steps {
|
||||
margin: 0 0 16px;
|
||||
padding-left: 18px;
|
||||
font-size: 13px;
|
||||
color: var(--monica-muted);
|
||||
}
|
||||
.connect-steps li { margin-bottom: 8px; }
|
||||
.connect-steps a { color: var(--monica-primary); }
|
||||
.platform-icon {
|
||||
width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center;
|
||||
justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; font-size: 14px;
|
||||
}
|
||||
.platform-icon.meta { background: #1877f2; }
|
||||
.platform-icon.ig { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); font-size: 12px; }
|
||||
.platform-icon.li { background: #0a66c2; }
|
||||
.platform-pill {
|
||||
display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
|
||||
color: #fff; border-radius: 2px;
|
||||
}
|
||||
.platform-pill.meta { background: #1877f2; }
|
||||
.platform-pill.ig { background: #dd2a7b; }
|
||||
.platform-pill.li { background: #0a66c2; }
|
||||
|
||||
/* Import wizard */
|
||||
.steps {
|
||||
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
|
||||
}
|
||||
.step {
|
||||
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--monica-muted);
|
||||
padding: 8px 12px; background: #fff; border: 1px solid var(--monica-border);
|
||||
}
|
||||
.step span {
|
||||
width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #374151;
|
||||
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
|
||||
}
|
||||
.step.active { border-color: var(--monica-primary); color: var(--monica-ink); }
|
||||
.step.active span { background: var(--monica-primary); color: #fff; }
|
||||
.dropzone {
|
||||
border: 2px dashed var(--monica-border); padding: 32px; text-align: center; background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Designer shared layout */
|
||||
.designer-layout {
|
||||
display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start;
|
||||
}
|
||||
.designer-layout.with-ai {
|
||||
grid-template-columns: minmax(260px, 340px) minmax(240px, 320px) 1fr;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.designer-layout.with-ai { grid-template-columns: 1fr 1fr; }
|
||||
.designer-layout.with-ai .designer-preview-col { grid-column: 1 / -1; }
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.designer-layout,
|
||||
.designer-layout.with-ai { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* PCM Integrations embedded designer */
|
||||
.pcm-iframe-wrap {
|
||||
padding: 0 !important;
|
||||
min-height: 70vh;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.pcm-iframe-wrap iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: min(80vh, 900px);
|
||||
border: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.pcm-designer .table tr.is-active td {
|
||||
background: #e8f4f5;
|
||||
}
|
||||
|
||||
/* Size picker */
|
||||
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.size-option {
|
||||
border: 1px solid var(--monica-border); background: #fff; padding: 10px 12px;
|
||||
text-align: left; cursor: pointer; font: inherit; color: inherit;
|
||||
}
|
||||
.size-option:hover { border-color: var(--monica-primary); }
|
||||
.size-option.active {
|
||||
border-color: var(--monica-primary); background: #e8f4f5;
|
||||
box-shadow: inset 3px 0 0 var(--monica-primary);
|
||||
}
|
||||
.size-option .sz-name { font-weight: 700; font-size: 13px; font-family: Poppins, sans-serif; }
|
||||
.size-option .sz-meta { font-size: 11px; color: var(--monica-muted); margin-top: 2px; }
|
||||
.size-option .sz-badge {
|
||||
display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.04em; color: var(--monica-primary);
|
||||
}
|
||||
|
||||
/* Media library */
|
||||
.media-library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.media-tile {
|
||||
position: relative; aspect-ratio: 4 / 3; border: 2px solid transparent;
|
||||
background-size: cover; background-position: center; background-color: #e5e7eb;
|
||||
cursor: pointer; padding: 0; overflow: hidden;
|
||||
}
|
||||
.media-tile.active { border-color: var(--monica-primary); }
|
||||
.media-tile .media-label {
|
||||
position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px;
|
||||
background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 10px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.media-tile.upload-tile {
|
||||
border: 2px dashed var(--monica-border); background: #f8fafc;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 4px; color: var(--monica-muted); font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.media-tile.upload-tile:hover { border-color: var(--monica-primary); color: var(--monica-primary); }
|
||||
.media-tile.upload-tile span { font-size: 22px; line-height: 1; color: var(--monica-primary); }
|
||||
.dropzone.compact { padding: 16px; font-size: 13px; cursor: pointer; }
|
||||
.dropzone.compact:hover { border-color: var(--monica-primary); }
|
||||
.library-hint { font-size: 12px; color: var(--monica-muted); margin: 8px 0 0; }
|
||||
|
||||
/* AI chat assist */
|
||||
.ai-chat {
|
||||
display: flex; flex-direction: column; height: min(640px, 75vh);
|
||||
background: #fff; border: 1px solid var(--monica-border);
|
||||
}
|
||||
.ai-chat-h {
|
||||
padding: 12px 14px; border-bottom: 1px solid var(--monica-border);
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||||
}
|
||||
.ai-chat-h h2 { margin: 0; font-size: 15px; font-family: Poppins, sans-serif; font-weight: 600; }
|
||||
.ai-pill {
|
||||
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
|
||||
background: #e8f4f5; color: var(--monica-primary); padding: 3px 8px;
|
||||
}
|
||||
.ai-chat-messages {
|
||||
flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #fff 40%);
|
||||
}
|
||||
.ai-msg { max-width: 92%; font-size: 13px; line-height: 1.45; }
|
||||
.ai-msg.bot { align-self: flex-start; }
|
||||
.ai-msg.user { align-self: flex-end; }
|
||||
.ai-msg .bubble {
|
||||
padding: 10px 12px; border: 1px solid var(--monica-border); background: #fff;
|
||||
}
|
||||
.ai-msg.user .bubble {
|
||||
background: var(--monica-primary); color: #fff; border-color: var(--monica-primary);
|
||||
}
|
||||
.ai-msg .who {
|
||||
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
|
||||
color: var(--monica-muted); margin-bottom: 4px;
|
||||
}
|
||||
.ai-msg.user .who { text-align: right; color: var(--monica-primary); }
|
||||
.ai-draft {
|
||||
margin-top: 8px; padding: 10px; background: #f8fafc; border: 1px dashed #a8d8dc;
|
||||
white-space: pre-wrap; font-size: 12px; color: var(--monica-ink);
|
||||
}
|
||||
.ai-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.ai-chat-prompts {
|
||||
padding: 8px 12px; border-top: 1px solid var(--monica-border);
|
||||
display: flex; flex-wrap: wrap; gap: 6px; background: #fafbfc;
|
||||
}
|
||||
.chip {
|
||||
border: 1px solid var(--monica-border); background: #fff; font: inherit;
|
||||
font-size: 11px; font-weight: 600; padding: 5px 10px; cursor: pointer; color: var(--monica-ink);
|
||||
}
|
||||
.chip:hover { border-color: var(--monica-primary); color: var(--monica-primary); }
|
||||
.ai-chat-input {
|
||||
border-top: 1px solid var(--monica-border); padding: 10px 12px;
|
||||
display: flex; gap: 8px; align-items: flex-end;
|
||||
}
|
||||
.ai-chat-input textarea {
|
||||
flex: 1; min-height: 44px; max-height: 100px; resize: vertical;
|
||||
border: 1px solid var(--monica-border); padding: 8px 10px; font: inherit; font-size: 13px;
|
||||
}
|
||||
.ai-chat-input .btn { flex-shrink: 0; }
|
||||
|
||||
/* Postcard */
|
||||
.postcard {
|
||||
width: 100%; max-width: 420px; aspect-ratio: 6 / 4; position: relative; overflow: hidden;
|
||||
background: #111; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25); color: #fff;
|
||||
transition: max-width 0.2s, aspect-ratio 0.2s;
|
||||
}
|
||||
.postcard.size-4x6 { max-width: 420px; aspect-ratio: 6 / 4; }
|
||||
.postcard.size-6x9 { max-width: 480px; aspect-ratio: 9 / 6; }
|
||||
.postcard.size-6x11 { max-width: 520px; aspect-ratio: 11 / 6; }
|
||||
.postcard.size-square { max-width: 400px; aspect-ratio: 1 / 1; }
|
||||
.postcard-media {
|
||||
position: absolute; inset: 0; background-size: cover; background-position: center;
|
||||
}
|
||||
.postcard-overlay { position: absolute; inset: 0; pointer-events: none; }
|
||||
.postcard-overlay.ov-dark { background: linear-gradient(transparent 35%, rgba(0,0,0,.75)); }
|
||||
.postcard-overlay.ov-light { background: linear-gradient(transparent 50%, rgba(255,255,255,.92)); }
|
||||
.postcard-overlay.ov-none { background: none; }
|
||||
.postcard-overlay.ov-light ~ .postcard-copy,
|
||||
.ov-light + .postcard-copy { color: #111; }
|
||||
.postcard-copy {
|
||||
position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
|
||||
}
|
||||
.postcard-headline {
|
||||
font-family: Poppins, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.04em;
|
||||
border-left: 4px solid #00626c; padding-left: 10px; line-height: 1.1;
|
||||
}
|
||||
.postcard-sub { margin-top: 8px; font-size: 14px; opacity: 0.95; }
|
||||
.postcard-back { background: #fafafa; color: #212121; }
|
||||
.postcard-back-grid { display: grid; grid-template-columns: 1.2fr 1fr; height: 100%; }
|
||||
.postcard-back-msg { padding: 16px; display: flex; flex-direction: column; gap: 10px; border-right: 1px dashed #cbd5e1; }
|
||||
.postcard-back-body { font-size: 12px; white-space: pre-wrap; flex: 1; line-height: 1.45; }
|
||||
.postcard-agent { font-size: 11px; font-weight: 600; color: #00626c; }
|
||||
.postcard-qr {
|
||||
width: 48px; height: 48px; background: #111; color: #fff; font-size: 10px;
|
||||
display: flex; align-items: center; justify-content: center; letter-spacing: 0.05em;
|
||||
}
|
||||
.postcard-back-mail { padding: 12px; position: relative; }
|
||||
.stamp {
|
||||
width: 44px; height: 52px; border: 2px dashed #94a3b8; float: right;
|
||||
font-size: 9px; color: #94a3b8; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.addr-block {
|
||||
margin-top: 48px; font-size: 12px; line-height: 1.4;
|
||||
border-bottom: 1px solid #e2e8f0; padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Social live preview */
|
||||
.platform-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.toggle-pill {
|
||||
border: 1px solid var(--monica-border); padding: 8px 12px; font-size: 13px;
|
||||
background: #fff; display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.toggle-pill.warn { border-color: #fdba74; background: #fff7ed; }
|
||||
.social-phone {
|
||||
width: 100%; max-width: 360px; background: #fff; border: 1px solid #d1d5db;
|
||||
box-shadow: 0 8px 30px rgba(15,23,42,.12); overflow: hidden; font-size: 14px;
|
||||
}
|
||||
.social-phone.ig { max-width: 340px; }
|
||||
.soc-header {
|
||||
display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative;
|
||||
}
|
||||
.soc-avatar {
|
||||
width: 40px; height: 40px; background: #00626c; color: #fff; display: flex;
|
||||
align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
|
||||
}
|
||||
.soc-avatar.round { border-radius: 50%; background: linear-gradient(45deg, #f58529, #dd2a7b); }
|
||||
.soc-avatar.sq { border-radius: 4px; background: #0a66c2; }
|
||||
.soc-name { font-weight: 700; font-size: 13px; }
|
||||
.soc-meta { font-size: 11px; color: #6b7280; }
|
||||
.soc-more { margin-left: auto; color: #6b7280; }
|
||||
.soc-caption { padding: 0 14px 12px; white-space: pre-wrap; line-height: 1.4; font-size: 13px; }
|
||||
.soc-image {
|
||||
height: 200px; background-size: cover; background-position: center; background-color: #e5e7eb;
|
||||
}
|
||||
.soc-image.square { height: 340px; }
|
||||
.soc-actions {
|
||||
padding: 10px 14px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #4b5563; font-weight: 600;
|
||||
}
|
||||
.ig-act { font-size: 18px; border-top: none; padding-top: 8px; }
|
||||
|
||||
|
||||
|
||||
/* Portal logout button in topbar */
|
||||
.portal-user form { display: inline; margin: 0; }
|
||||
.portal-user button.linkish {
|
||||
background: none; border: 0; padding: 0; color: var(--monica-primary);
|
||||
font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline;
|
||||
}
|
||||
.portal-flash { list-style: none; margin: 0 0 16px; padding: 0; }
|
||||
.portal-flash li {
|
||||
padding: 10px 14px; background: #e8f4f5; border-left: 3px solid var(--monica-primary);
|
||||
margin-bottom: 8px; font-size: 14px;
|
||||
}
|
||||
.portal-flash li.error { background: #fee2e2; border-left-color: #b91c1c; }
|
||||
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
|
||||
.toolbar-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
||||
.toolbar-filters input, .toolbar-filters select {
|
||||
padding: 8px 10px; border: 1px solid var(--monica-border); font: inherit; font-size: 13px; background: #fff;
|
||||
}
|
||||
.empty-state { padding: 24px; color: var(--monica-muted); font-size: 14px; }
|
||||
@@ -0,0 +1,211 @@
|
||||
:root {
|
||||
--bg: #1a2332;
|
||||
--bg-2: #243044;
|
||||
--ink: #f3efe6;
|
||||
--muted: #b7c0ce;
|
||||
--accent: #c4a574;
|
||||
--accent-2: #7ea08a;
|
||||
--danger: #c97b7b;
|
||||
--radius: 2px;
|
||||
--font-display: "Fraunces", Georgia, serif;
|
||||
--font-body: "Source Sans 3", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(1200px 600px at 10% -10%, #2c3d55 0%, transparent 55%),
|
||||
radial-gradient(900px 500px at 100% 0%, #3a2f28 0%, transparent 45%),
|
||||
var(--bg);
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
.site-header, .site-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
|
||||
.brand {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.4rem;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
}
|
||||
main { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
|
||||
.hero {
|
||||
min-height: 70vh;
|
||||
display: grid;
|
||||
align-content: end;
|
||||
gap: 0.75rem;
|
||||
padding: 2rem 0 3rem;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.4rem, 6vw, 4.2rem);
|
||||
margin: 0;
|
||||
max-width: 14ch;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.hero p { max-width: 42ch; color: var(--muted); font-size: 1.1rem; }
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: var(--accent);
|
||||
color: #1a2332;
|
||||
padding: 0.7rem 1.2rem;
|
||||
border: 0;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--muted); }
|
||||
.flash { list-style: none; padding: 0 1.5rem; }
|
||||
.flash li { background: var(--bg-2); padding: 0.6rem 0.9rem; margin: 0.4rem 0; }
|
||||
.form-grid { display: grid; gap: 0.8rem; max-width: 32rem; }
|
||||
.form-grid label { display: grid; gap: 0.3rem; color: var(--muted); }
|
||||
.form-grid input, .form-grid textarea, .form-grid select {
|
||||
background: var(--bg-2);
|
||||
border: 1px solid #3a4a63;
|
||||
color: var(--ink);
|
||||
padding: 0.6rem 0.7rem;
|
||||
font: inherit;
|
||||
}
|
||||
.portal-shell { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; min-height: 70vh; }
|
||||
.portal-nav {
|
||||
background: rgba(36, 48, 68, 0.85);
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
align-content: start;
|
||||
}
|
||||
.portal-nav a { color: var(--ink); }
|
||||
.portal-logout { margin: 0; }
|
||||
.portal-logout button {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.portal-logout button:hover { text-decoration: underline; }
|
||||
.brand-mini { font-family: var(--font-display); margin: 0 0 0.5rem; color: var(--accent); }
|
||||
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; }
|
||||
.stat {
|
||||
background: rgba(36, 48, 68, 0.9);
|
||||
padding: 1rem;
|
||||
}
|
||||
.stat strong { display: block; font-size: 1.6rem; font-family: var(--font-display); }
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th, .table td { text-align: left; padding: 0.55rem 0.4rem; border-bottom: 1px solid #33455f; }
|
||||
.holding {
|
||||
min-height: 80vh;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
max-width: 36rem;
|
||||
}
|
||||
.holding h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
|
||||
.muted { color: var(--muted); }
|
||||
.error { color: var(--danger); }
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer-meta { display: grid; gap: 0.25rem; }
|
||||
.footer-meta p { margin: 0; color: var(--muted); }
|
||||
.footer-links { margin: 0; }
|
||||
.footer-link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.footer-link-btn:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cookie-consent-banner {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1100;
|
||||
padding: 1rem;
|
||||
background: rgba(26, 35, 50, 0.97);
|
||||
border-top: 1px solid rgba(196, 165, 116, 0.35);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.cookie-consent-content {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.cookie-consent-text {
|
||||
flex: 1 1 420px;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
}
|
||||
.cookie-consent-text-short { display: none; }
|
||||
.cookie-consent-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cookie-consent-banner {
|
||||
padding: 0.625rem 0.75rem;
|
||||
padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
.cookie-consent-content {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
.cookie-consent-text-short { display: inline; }
|
||||
.cookie-consent-text-full { display: none; }
|
||||
.cookie-consent-text {
|
||||
flex: none;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.cookie-consent-actions { width: 100%; }
|
||||
.cookie-consent-actions .btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.portal-shell { grid-template-columns: 1fr; }
|
||||
}
|
||||
Executable
+239
File diff suppressed because one or more lines are too long
@@ -0,0 +1,373 @@
|
||||
/* EXIT Realty / MKDRealtor public brand overrides on Real Estate theme */
|
||||
|
||||
:root {
|
||||
--monica-primary: #00626c;
|
||||
--monica-primary-light: #008898;
|
||||
--monica-ink: #212121;
|
||||
--monica-muted: #6b7280;
|
||||
--monica-surface: #f4f7f7;
|
||||
--monica-border: #d9e3e4;
|
||||
}
|
||||
|
||||
.footer-brand-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.footer-brand-row img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.about-subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--monica-muted);
|
||||
}
|
||||
|
||||
.page .button-primary,
|
||||
.page .button-primary:focus,
|
||||
.page .button-primary:active,
|
||||
.cookie-consent-banner .button-primary,
|
||||
.cookie-consent-banner .button-primary:focus,
|
||||
.cookie-consent-banner .button-primary:active {
|
||||
background-color: var(--monica-primary) !important;
|
||||
border-color: var(--monica-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.page .button-primary:hover,
|
||||
.cookie-consent-banner .button-primary:hover {
|
||||
background-color: var(--monica-primary-light) !important;
|
||||
border-color: var(--monica-primary-light) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* Theme default blue (#0045b6) → EXIT Realty teal on public chrome */
|
||||
html .page .text-primary {
|
||||
color: var(--monica-primary) !important;
|
||||
}
|
||||
.page .breadcrumbs-custom-path a,
|
||||
.page a.link-default {
|
||||
color: var(--monica-primary);
|
||||
}
|
||||
.page a.link-default:hover {
|
||||
color: var(--monica-primary-light);
|
||||
}
|
||||
|
||||
.page .button-gray-bordered:hover,
|
||||
.page .button-gray-bordered:active,
|
||||
.page .button-default:hover,
|
||||
.page .button-default:active,
|
||||
.page .button-accent-outline:hover,
|
||||
.page .button-accent-outline:active,
|
||||
.page .button-primary-outline:hover,
|
||||
.page .button-primary-outline:active,
|
||||
.page .button-primary-white:hover,
|
||||
.page .button-primary-white:active,
|
||||
.page .button.button-primary-lighten,
|
||||
.page .button.button-primary-lighten:focus {
|
||||
background-color: var(--monica-primary) !important;
|
||||
border-color: var(--monica-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.page .button.button-primary-lighten:hover,
|
||||
.page .button.button-primary-lighten:active {
|
||||
background-color: var(--monica-ink) !important;
|
||||
border-color: var(--monica-ink) !important;
|
||||
}
|
||||
.page .button-accent-outline,
|
||||
.page .button-accent-outline:focus {
|
||||
border-color: var(--monica-primary) !important;
|
||||
}
|
||||
.page .button-video:hover {
|
||||
color: var(--monica-primary) !important;
|
||||
}
|
||||
.page .btn-primary,
|
||||
.page .btn-primary:active,
|
||||
.page .btn-primary:focus {
|
||||
background: var(--monica-primary) !important;
|
||||
border-color: var(--monica-primary) !important;
|
||||
}
|
||||
.page .box-chloe__icon,
|
||||
.page .box-light-icon,
|
||||
.page .box-minimal-icon .box-chloe__icon {
|
||||
color: var(--monica-primary);
|
||||
}
|
||||
|
||||
/* Mobile drawer active/hover — theme uses #0045b6 */
|
||||
.rd-navbar-fixed .rd-nav-item:hover .rd-nav-link,
|
||||
.rd-navbar-fixed .rd-nav-item.focus .rd-nav-link,
|
||||
.rd-navbar-fixed .rd-nav-item.active .rd-nav-link,
|
||||
.rd-navbar-fixed .rd-nav-item.opened .rd-nav-link {
|
||||
background: var(--monica-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* Scroll-to-top (injected outside .page) */
|
||||
.ui-to-top {
|
||||
background: var(--monica-primary) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 98, 108, 0.35);
|
||||
}
|
||||
.ui-to-top:hover,
|
||||
.ui-to-top:focus {
|
||||
background: var(--monica-primary-light) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* Django flash messages */
|
||||
.flash {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
.flash li {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 8px;
|
||||
padding: 12px 16px;
|
||||
background: #e8f4f5;
|
||||
border-left: 3px solid #00626c;
|
||||
color: #0d4a52;
|
||||
font-size: 14px;
|
||||
}
|
||||
.flash li.error,
|
||||
.flash li.danger {
|
||||
background: #fee2e2;
|
||||
border-left-color: #b91c1c;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* Form field errors */
|
||||
.form-wrap .errorlist {
|
||||
list-style: none;
|
||||
margin: 6px 0 0;
|
||||
padding: 0;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Cookie consent — match public EXIT Realty teal brand */
|
||||
.cookie-consent-banner {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 11000;
|
||||
padding: 1rem 1.25rem;
|
||||
background: rgba(17, 24, 28, 0.96);
|
||||
border-top: 2px solid var(--monica-primary);
|
||||
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
|
||||
font-family: "Work Sans", sans-serif;
|
||||
}
|
||||
.cookie-consent-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.cookie-consent-text {
|
||||
flex: 1 1 420px;
|
||||
color: #d7dee3;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.45;
|
||||
margin: 0;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
.cookie-consent-text-short {
|
||||
display: none;
|
||||
}
|
||||
.cookie-consent-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cookie-consent-banner .button {
|
||||
min-width: 10rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
.footer-link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: #7dd3da;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-link-btn:hover {
|
||||
text-decoration: underline;
|
||||
color: #a8e8ed;
|
||||
}
|
||||
|
||||
.cookie-consent-link {
|
||||
color: #7dd3da;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.cookie-consent-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.legal-prose {
|
||||
max-width: 42rem;
|
||||
}
|
||||
.legal-prose .legal-lead {
|
||||
font-size: 1.05rem;
|
||||
color: var(--monica-ink);
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
.legal-prose h2 {
|
||||
font-size: 1.35rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.legal-prose p {
|
||||
margin-bottom: 1rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.legal-prose .legal-updated {
|
||||
margin-top: 2.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--monica-muted);
|
||||
}
|
||||
|
||||
/* Contact form — breathe on narrow viewports */
|
||||
@media (max-width: 767.98px) {
|
||||
.contact-form-section > .container {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
.contact-form-section .section-lg {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
.contact-form-section h3 {
|
||||
margin-bottom: 1.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.contact-message-form .form-wrap {
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.contact-message-form .form-label-outside {
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.contact-message-form .row-10 {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.contact-message-form .row-10 > [class*="col-"] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-aside-copy {
|
||||
text-align: right;
|
||||
}
|
||||
.footer-aside-copy .rights {
|
||||
margin: 0;
|
||||
}
|
||||
.footer-made-by {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
}
|
||||
.footer-made-by a {
|
||||
color: #d1d5db;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer-made-by a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.footer-minimal .footer-made-by {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.footer-minimal-inner {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pref-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
color: var(--monica-ink);
|
||||
cursor: pointer;
|
||||
}
|
||||
.pref-check input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cookie-consent-banner {
|
||||
padding: 0.625rem 0.75rem;
|
||||
padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
.cookie-consent-content {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
.cookie-consent-text-short {
|
||||
display: inline;
|
||||
}
|
||||
.cookie-consent-text-full {
|
||||
display: none;
|
||||
}
|
||||
.cookie-consent-text {
|
||||
flex: none;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.cookie-consent-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Keep hero slide-2 heading visually aligned with slide-1 h1 (SEO: one h1). */
|
||||
.swiper-slider-minimal .jumbotron-classic-content h1.font-weight-bold,
|
||||
.swiper-slider-minimal .jumbotron-classic-content h2.font-weight-bold {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.swiper-slider-minimal .jumbotron-classic-content h1.font-weight-bold,
|
||||
.swiper-slider-minimal .jumbotron-classic-content h2.font-weight-bold {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.swiper-slider-minimal .jumbotron-classic-content h1.font-weight-bold,
|
||||
.swiper-slider-minimal .jumbotron-classic-content h2.font-weight-bold {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user