/* * OC Market Data dashboard — editorial luxury styling. * * !important is used throughout because WordPress themes set aggressive * defaults for h2/h3/p/section/grid elements that would otherwise win the * specificity battle inside the post content. */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600&display=swap'); :root { --omd-bg: #FAF8F3; --omd-surface: #FFFFFF; --omd-border: #E8E2D3; --omd-rule: #EFEAE0; --omd-text: #1A1F2E; --omd-text-muted: #5A6478; --omd-eyebrow: #8B7355; --omd-accent: #228FCC; --omd-accent-soft: rgba(34, 143, 204, 0.08); --omd-up: #4A7C59; --omd-up-soft: rgba(74, 124, 89, 0.10); --omd-down: #B85450; --omd-down-soft: rgba(184, 84, 80, 0.10); --omd-shadow-sm: 0 1px 2px rgba(26, 31, 46, 0.04); --omd-shadow-lg: 0 12px 32px -12px rgba(26, 31, 46, 0.18); --omd-radius: 14px; --omd-radius-sm: 8px; --omd-serif: 'Cinzel', 'Playfair Display', Georgia, serif; --omd-sans: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* ──────────────────── Container ──────────────────── */ .omd-dashboard { max-width: 1080px !important; margin: 3rem auto !important; padding: 3rem 3rem 2.5rem !important; background: var(--omd-bg) !important; border-radius: var(--omd-radius) !important; color: var(--omd-text) !important; font-family: var(--omd-sans) !important; /* Force a 16px baseline so the dashboard is immune to themes that shrink font-size (a common WordPress theme pattern). Everything inside uses absolute px so visitor-perceived sizing is stable across hosts. */ font-size: 16px !important; font-feature-settings: 'tnum' on, 'lnum' on !important; box-sizing: border-box !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased !important; } .omd-dashboard *, .omd-dashboard *::before, .omd-dashboard *::after { box-sizing: border-box !important; } /* ──────────────────── Header ──────────────────── */ .omd-header { margin-bottom: 2.5rem !important; text-align: center !important; border-bottom: 1px solid var(--omd-rule) !important; padding-bottom: 2rem !important; } .omd-eyebrow { display: block !important; font-family: var(--omd-sans) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.32em !important; text-transform: uppercase !important; color: var(--omd-eyebrow) !important; margin: 0 0 14px !important; } .omd-title { font-family: var(--omd-serif) !important; font-size: clamp(32px, 5vw, 52px) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; line-height: 1.15 !important; margin: 0 0 10px !important; color: var(--omd-text) !important; } .omd-subtitle { font-family: var(--omd-sans) !important; font-size: 19px !important; font-weight: 400 !important; color: var(--omd-text-muted) !important; margin: 0 0 8px !important; letter-spacing: 0.04em !important; } .omd-updated { font-family: var(--omd-sans) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--omd-eyebrow) !important; margin: 14px 0 0 !important; } /* ──────────────────── Card grid ──────────────────── */ .omd-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; margin: 0 0 2.5rem !important; } .omd-card { position: relative !important; padding: 1.5rem 1.5rem 1.6rem !important; background: var(--omd-surface) !important; border: 1px solid var(--omd-border) !important; border-radius: var(--omd-radius) !important; box-shadow: var(--omd-shadow-sm) !important; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important; display: flex !important; flex-direction: column !important; gap: 0.55rem !important; } @media (hover: hover) { .omd-card:hover { transform: translateY(-2px) !important; box-shadow: var(--omd-shadow-lg) !important; border-color: #D6CCB1 !important; } } .omd-card-icon { position: absolute !important; top: 18px !important; right: 18px !important; width: 26px !important; height: 26px !important; color: var(--omd-accent) !important; opacity: 0.85 !important; } .omd-card-icon svg { width: 100% !important; height: 100% !important; display: block !important; } .omd-card-label { font-family: var(--omd-sans) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--omd-eyebrow) !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; margin: 0 !important; padding-right: 34px !important; /* room for the icon */ } .omd-card-value { font-family: var(--omd-serif) !important; font-size: clamp(30px, 3.5vw, 40px) !important; font-weight: 500 !important; line-height: 1.05 !important; color: var(--omd-text) !important; margin: 0 !important; letter-spacing: -0.005em !important; } .omd-card-value--small { font-size: clamp(24px, 2.8vw, 30px) !important; } .omd-card-change { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--omd-sans) !important; font-size: 15px !important; font-weight: 500 !important; padding: 6px 12px !important; border-radius: 999px !important; width: fit-content !important; letter-spacing: 0.03em !important; } .omd-card-change svg { width: 13px !important; height: 13px !important; } .omd-card-change.omd-up { color: var(--omd-up) !important; background: var(--omd-up-soft) !important; } .omd-card-change.omd-down { color: var(--omd-down) !important; background: var(--omd-down-soft) !important; } /* When a card's metric IS the change (the dedicated YoY card), the value gets a leading direction triangle in muted color. */ .omd-card--change .omd-card-value { display: inline-flex !important; align-items: baseline !important; gap: 0.45rem !important; } .omd-card--change.is-up .omd-card-value { color: var(--omd-up) !important; } .omd-card--change.is-down .omd-card-value { color: var(--omd-down) !important; } .omd-card--change .omd-card-arrow { font-size: 30px !important; line-height: 1 !important; } /* ── CTA card (Home Valuation) ───────────────────────────────────── */ .omd-card--cta { display: flex !important; flex-direction: column !important; justify-content: space-between !important; text-decoration: none !important; color: inherit !important; transition: border-color 0.2s ease, transform 0.2s ease !important; cursor: pointer !important; } @media (hover: hover) { .omd-card--cta:hover { border-color: var(--omd-brand-color, #228fcc) !important; transform: translateY(-2px) !important; } } .omd-card--cta:focus-visible { outline: 2px solid var(--omd-brand-color, #228fcc); outline-offset: 2px; } .omd-cta-button { display: inline-block !important; margin-top: 0.5rem !important; padding: 0.65rem 1rem !important; background: var(--omd-brand-color, #228fcc) !important; color: #FFFFFF !important; font-family: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; border-radius: 4px !important; text-align: center !important; min-height: 44px !important; line-height: 1.6 !important; } /* ──────────────────── Info tooltip ──────────────────── */ .omd-info { display: inline-flex !important; align-items: center !important; margin-left: 6px !important; color: var(--omd-eyebrow) !important; cursor: help !important; font-size: 14px !important; position: relative !important; outline: none !important; font-weight: 400 !important; } .omd-info:focus-visible { color: var(--omd-accent) !important; } .omd-info-tooltip { visibility: hidden !important; opacity: 0 !important; position: absolute !important; bottom: 100% !important; left: 50% !important; transform: translateX(-50%) !important; margin-bottom: 8px !important; background: #1A1F2E !important; color: #FFF !important; font-family: var(--omd-sans) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 10px 12px !important; border-radius: 6px !important; width: 240px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; transition: opacity 150ms ease, visibility 150ms !important; z-index: 10 !important; pointer-events: none !important; } .omd-info-tooltip::after { content: '' !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; border: 5px solid transparent !important; border-top-color: #1A1F2E !important; } .omd-info:hover .omd-info-tooltip, .omd-info:focus .omd-info-tooltip, .omd-info.is-open .omd-info-tooltip { visibility: visible !important; opacity: 1 !important; } @media (max-width: 480px) { .omd-info-tooltip { width: 200px !important; } } /* ──────────────────── Chart ──────────────────── */ .omd-chart-wrap { background: var(--omd-surface) !important; border: 1px solid var(--omd-border) !important; border-radius: var(--omd-radius) !important; padding: 1.75rem 1.75rem 1.5rem !important; box-shadow: var(--omd-shadow-sm) !important; margin: 0 0 2rem !important; } .omd-chart-heading { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin: 0 0 1.25rem !important; gap: 1rem !important; flex-wrap: wrap !important; } .omd-chart-title { font-family: var(--omd-serif) !important; font-size: 24px !important; font-weight: 500 !important; color: var(--omd-text) !important; margin: 0 !important; letter-spacing: 0.01em !important; } .omd-chart-caption { font-family: var(--omd-sans) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--omd-text-muted) !important; letter-spacing: 0.04em !important; margin: 0 !important; } .omd-chart-canvas { width: 100% !important; height: 240px !important; } /* ──────────────────── Responsive ──────────────────── */ /* Tablet — keep 2 columns; tighten padding. */ @media (max-width: 960px) { .omd-dashboard { margin: 1.5rem auto !important; padding: 2rem 1.5rem 1.75rem !important; } .omd-cards { grid-template-columns: 1fr 1fr !important; } .omd-header { padding-bottom: 1.5rem !important; margin-bottom: 1.75rem !important; } .omd-chart-canvas { height: 220px !important; } } /* Phone — edge-to-edge panel, 2 dense columns, compact header. */ @media (max-width: 640px) { .omd-dashboard { margin: 0 !important; padding: 1.5rem 1rem 1.25rem !important; border-radius: 0 !important; } .omd-header { padding-bottom: 1.25rem !important; margin-bottom: 1.25rem !important; } .omd-eyebrow { font-size: 12px !important; letter-spacing: 0.28em !important; margin-bottom: 10px !important; } .omd-title { font-size: clamp(26px, 6vw, 34px) !important; letter-spacing: 0.01em !important; line-height: 1.2 !important; } .omd-subtitle { font-size: 16px !important; } .omd-updated { font-size: 11px !important; letter-spacing: 0.14em !important; margin-top: 10px !important; } .omd-cards { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; margin-bottom: 1.75rem !important; } .omd-card { padding: 1.1rem 1rem 1.2rem !important; gap: 0.4rem !important; } .omd-card-icon { top: 14px !important; right: 14px !important; width: 20px !important; height: 20px !important; } .omd-card-label { font-size: 11px !important; letter-spacing: 0.12em !important; padding-right: 26px !important; } .omd-card-value { font-size: clamp(22px, 5.5vw, 28px) !important; } .omd-card-change { font-size: 13px !important; padding: 4px 10px !important; } .omd-card-change svg { width: 11px !important; height: 11px !important; } .omd-card--change .omd-card-arrow { font-size: 22px !important; } .omd-chart-wrap { padding: 1.25rem 1rem 1rem !important; } .omd-chart-heading { flex-direction: column !important; gap: 0.3rem !important; align-items: flex-start !important; margin-bottom: 1rem !important; } .omd-chart-title { font-size: 19px !important; } .omd-chart-caption { font-size: 13px !important; } .omd-chart-canvas { height: 180px !important; } } /* Single column on tiny screens (e.g. iPhone SE portrait). */ @media (max-width: 380px) { .omd-cards { grid-template-columns: 1fr !important; } .omd-card-value { font-size: 28px !important; } .omd-cta-button { font-size: 13px !important; padding: 0.6rem 0.85rem !important; } } /* ──────────────────── Reduced motion ──────────────────── */ @media (prefers-reduced-motion: reduce) { .omd-card, .omd-card--cta { transition: none !important; } .omd-card:hover, .omd-card--cta:hover { transform: none !important; } }