/** * Bahria Enclave Portal v3 — "Enclave Premium" design system * * Light + dark themes via [data-theme] on (JS-persisted, falls back * to prefers-color-scheme). Display font: Plus Jakarta Sans; body: Inter. */ /* ───────────────────────────────────────────── 1. Design tokens ───────────────────────────────────────────── */ :root { /* Brand */ --be-primary: #047857; --be-primary-strong: #065F46; --be-primary-ink: #064E3B; --be-primary-soft: #ECFDF5; --be-primary-soft-2: #D1FAE5; --be-accent: #B45309; --be-accent-bright: #D97706; --be-accent-soft: #FEF3C7; --be-danger: #DC2626; --be-danger-soft: #FEF2F2; --be-whatsapp: #16A34A; /* Surfaces */ --be-bg: #F5F8F6; --be-bg-alt: #EDF3EF; --be-surface: #FFFFFF; --be-surface-2: #F8FAF9; --be-glass: rgba(255, 255, 255, 0.82); --be-text: #10201A; --be-text-soft: #33443D; --be-text-muted: #5D6F67; --be-border: #DFE8E3; --be-border-strong: #C9D6CF; /* Hero (stays dark in both themes) */ --be-hero-bg-1: #05382B; --be-hero-bg-2: #064E3B; --be-hero-bg-3: #0B6E54; --be-hero-text: #F2F7F5; --be-hero-muted: rgba(242, 247, 245, 0.72); /* Effects */ --be-radius-sm: 10px; --be-radius: 14px; --be-radius-lg: 20px; --be-radius-xl: 26px; --be-shadow-xs: 0 1px 2px rgba(8, 30, 22, 0.05); --be-shadow: 0 1px 2px rgba(8, 30, 22, 0.05), 0 6px 20px -6px rgba(8, 30, 22, 0.08); --be-shadow-hover: 0 2px 4px rgba(8, 30, 22, 0.06), 0 16px 34px -10px rgba(8, 30, 22, 0.16); --be-shadow-pop: 0 24px 60px -16px rgba(8, 30, 22, 0.28); --be-ring: 0 0 0 3px rgba(4, 120, 87, 0.28); /* Type */ --be-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --be-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; /* Layout */ --be-container: 1200px; --be-header-h: 66px; --be-ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light; } html[data-theme="dark"] { --be-primary: #10B981; --be-primary-strong: #34D399; --be-primary-ink: #A7F3D0; --be-primary-soft: rgba(16, 185, 129, 0.12); --be-primary-soft-2: rgba(16, 185, 129, 0.2); --be-accent: #F0B24A; --be-accent-bright: #F5C462; --be-accent-soft: rgba(240, 178, 74, 0.14); --be-danger: #F87171; --be-danger-soft: rgba(248, 113, 113, 0.12); --be-bg: #0A100E; --be-bg-alt: #0E1613; --be-surface: #121B17; --be-surface-2: #17211D; --be-glass: rgba(14, 22, 19, 0.82); --be-text: #E9F0ED; --be-text-soft: #C2CFC9; --be-text-muted: #8DA098; --be-border: #223029; --be-border-strong: #31443B; --be-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --be-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.5); --be-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px -12px rgba(0, 0, 0, 0.6); --be-shadow-pop: 0 24px 60px -16px rgba(0, 0, 0, 0.7); --be-ring: 0 0 0 3px rgba(16, 185, 129, 0.35); color-scheme: dark; } /* ───────────────────────────────────────────── 2. Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.be-portal-theme { font-family: var(--be-font); font-size: 1rem; color: var(--be-text); background: var(--be-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; margin: 0; transition: background 0.3s ease, color 0.3s ease; } .be-portal-theme #page { min-height: 100vh; display: flex; flex-direction: column; } .be-portal-theme .site-content { flex: 1; } .be-portal-theme h1, .be-portal-theme h2, .be-portal-theme h3, .be-portal-theme h4 { font-family: var(--be-font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--be-text); line-height: 1.25; } .be-portal-theme a { color: var(--be-primary); } .be-portal-theme ::selection { background: var(--be-primary); color: #fff; } .be-container { width: min(100% - 2.5rem, var(--be-container)); margin-inline: auto; } .be-text-muted { color: var(--be-text-muted); } /* Hide parent Newsmatic chrome */ .be-portal-theme .site-header:not(.be-header), .be-portal-theme .newsmatic-header, .be-portal-theme .site-footer:not(.be-footer) { display: none !important; } /* Focus */ .be-portal-theme :focus-visible { outline: none; box-shadow: var(--be-ring); border-radius: 6px; } /* ───────────────────────────────────────────── 3. Buttons, badges, chips, inputs ───────────────────────────────────────────── */ .be-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--be-font); font-weight: 600; font-size: 0.9rem; line-height: 1.2; padding: 0.68rem 1.25rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.18s var(--be-ease), box-shadow 0.18s var(--be-ease), background 0.18s, color 0.18s, border-color 0.18s; } .be-btn:hover { transform: translateY(-1px); } .be-btn:active { transform: translateY(0); } .be-btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex-shrink: 0; } .be-btn-primary { background: linear-gradient(135deg, var(--be-primary), var(--be-primary-strong)); color: #fff; box-shadow: 0 6px 16px -6px rgba(4, 120, 87, 0.55); } html[data-theme="dark"] .be-btn-primary { color: #06281E; } .be-btn-primary:hover { box-shadow: 0 10px 22px -6px rgba(4, 120, 87, 0.65); color: #fff; } html[data-theme="dark"] .be-btn-primary:hover { color: #06281E; } .be-btn-secondary { background: var(--be-surface); color: var(--be-text-soft); border-color: var(--be-border-strong); } .be-btn-secondary:hover { border-color: var(--be-primary); color: var(--be-primary); background: var(--be-primary-soft); } .be-btn-emergency { background: linear-gradient(135deg, #E5484D, #C62A2F); color: #fff; box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.5); } .be-btn-emergency:hover { color: #fff; box-shadow: 0 10px 24px -6px rgba(220, 38, 38, 0.6); } .be-btn-call { background: var(--be-primary-soft); color: var(--be-primary-strong); border-color: transparent; } .be-btn-call:hover { background: var(--be-primary); color: #fff; } html[data-theme="dark"] .be-btn-call:hover { color: #06281E; } .be-btn-whatsapp { background: rgba(22, 163, 74, 0.12); color: #15803D; border-color: transparent; } html[data-theme="dark"] .be-btn-whatsapp { color: #4ADE80; } .be-btn-whatsapp:hover { background: var(--be-whatsapp); color: #fff; } .be-btn-dark { background: #10201A; color: #fff; border-color: rgba(255, 255, 255, 0.14); } .be-btn-dark:hover { background: #1C3128; color: #fff; } .be-btn-outline-light { background: transparent; color: var(--be-hero-text); border-color: rgba(255, 255, 255, 0.4); } .be-btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .be-btn-text { background: none; border: none; padding: 0.2rem 0; color: var(--be-primary); font-weight: 600; border-radius: 4px; } .be-btn-text:hover { color: var(--be-primary-strong); transform: none; text-decoration: underline; text-underline-offset: 3px; } .be-btn-sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; } .be-btn-lg { padding: 0.85rem 1.7rem; font-size: 1rem; } .be-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.28rem 0.7rem; border-radius: 999px; background: var(--be-primary-soft); color: var(--be-primary-strong); text-decoration: none; border: 1px solid transparent; } a.be-badge:hover { border-color: var(--be-primary); } .be-badge-accent { background: var(--be-accent-soft); color: var(--be-accent); } .be-badge-muted { background: var(--be-surface-2); color: var(--be-text-muted); border-color: var(--be-border); } .be-badge-delivery { background: var(--be-primary-soft); color: var(--be-primary-strong); } .be-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.95rem; border-radius: 999px; border: 1px solid var(--be-border-strong); background: var(--be-surface); color: var(--be-text-soft); font-size: 0.85rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.16s var(--be-ease); } .be-chip:hover { border-color: var(--be-primary); color: var(--be-primary); } .be-chip.is-active { background: var(--be-primary); border-color: var(--be-primary); color: #fff; } html[data-theme="dark"] .be-chip.is-active { color: #06281E; } .be-input, .be-portal-theme input[type="search"], .be-portal-theme input[type="text"].be-input { font-family: var(--be-font); font-size: 0.95rem; color: var(--be-text); background: var(--be-surface); border: 1px solid var(--be-border-strong); border-radius: var(--be-radius-sm); padding: 0.68rem 1rem; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; } .be-input:focus, .be-portal-theme input[type="search"]:focus { outline: none; border-color: var(--be-primary); box-shadow: var(--be-ring); } /* ───────────────────────────────────────────── 4. Header ───────────────────────────────────────────── */ .be-header { position: sticky; top: 0; z-index: 1000; background: var(--be-glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--be-border); transition: box-shadow 0.25s ease, background 0.25s ease; } .be-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(8, 30, 22, 0.2); } .be-header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--be-header-h); } .be-branding-link { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; flex-shrink: 0; } .be-logo-wrap .custom-logo, .be-logo-wrap img { display: block; height: 40px; width: auto; max-width: 48px; object-fit: contain; border-radius: 8px; } .be-logo-fallback { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--be-hero-bg-2), var(--be-hero-bg-3)); color: #fff; font-family: var(--be-font-display); font-weight: 800; font-size: 0.9rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); } .be-branding-text { display: flex; flex-direction: column; line-height: 1.2; } .be-brand-name { font-family: var(--be-font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--be-text); } .be-brand-sub { font-size: 0.72rem; color: var(--be-text-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } /* Primary nav */ .be-primary-nav { flex: 1; min-width: 0; } .be-primary-nav .be-nav-list { display: flex; flex-wrap: nowrap; gap: 0.15rem; list-style: none; margin: 0; padding: 0; justify-content: center; align-items: stretch; } .be-nav-item { position: relative; display: flex; align-items: center; } .be-nav-parent-row { display: flex; align-items: center; } .be-nav-link { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--be-text-soft); text-decoration: none; font-weight: 550; font-size: 0.85rem; padding: 0.5rem 0.7rem; border-radius: 999px; transition: color 0.15s, background 0.15s; white-space: nowrap; border: none; background: none; position: relative; } .be-nav-link:hover { color: var(--be-primary); background: var(--be-primary-soft); } .be-nav-link.is-active { color: var(--be-primary-strong); background: var(--be-primary-soft); font-weight: 650; } .be-nav-submenu-toggle { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: -0.35rem; padding: 0; background: none; border: none; border-radius: 50%; cursor: pointer; color: var(--be-text-muted); transition: background 0.15s, color 0.15s, transform 0.2s var(--be-ease); } .be-nav-submenu-toggle:hover { background: var(--be-primary-soft); color: var(--be-primary); } .be-nav-chevron { width: 16px; height: 16px; fill: currentColor; transition: transform 0.2s var(--be-ease); } /* Dropdown. The 12px visual offset lives INSIDE the hoverable box (padding-top on a full-bleed wrapper) so the cursor never crosses a dead gap, and closing is delayed 250ms so diagonal mouse travel doesn't kill the menu. */ .be-nav-submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); padding-top: 12px; min-width: 230px; background: transparent; border: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s var(--be-ease) 0.25s, transform 0.18s var(--be-ease) 0.25s, visibility 0s 0.43s; z-index: 1001; } .be-nav-submenu-list { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); box-shadow: var(--be-shadow-pop); padding: 0.4rem; } .be-nav-item--has-children:hover .be-nav-submenu, .be-nav-item--has-children:focus-within .be-nav-submenu, .be-nav-item--has-children.is-submenu-open .be-nav-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s, 0s, 0s; } .be-nav-item--has-children:hover .be-nav-chevron, .be-nav-item--has-children.is-submenu-open .be-nav-chevron { transform: rotate(180deg); } .be-nav-submenu-list { list-style: none; margin: 0; padding: 0; } .be-nav-sublink { display: block; padding: 0.5rem 0.85rem; font-size: 0.85rem; font-weight: 500; color: var(--be-text-soft); text-decoration: none; border-radius: 9px; transition: background 0.12s, color 0.12s; } .be-nav-sublink:hover { background: var(--be-primary-soft); color: var(--be-primary-strong); } .be-nav-submenu-item.is-active .be-nav-sublink { color: var(--be-primary-strong); font-weight: 600; } /* Header actions */ .be-header-actions { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .be-search-toggle, .be-theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--be-border); background: var(--be-surface); color: var(--be-text-soft); cursor: pointer; transition: all 0.16s var(--be-ease); } .be-search-toggle:hover, .be-theme-toggle:hover { border-color: var(--be-primary); color: var(--be-primary); transform: translateY(-1px); } .be-search-toggle svg, .be-theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } .be-theme-toggle .be-icon-sun { display: none; } .be-theme-toggle .be-icon-moon { display: block; } html[data-theme="dark"] .be-theme-toggle .be-icon-sun { display: block; } html[data-theme="dark"] .be-theme-toggle .be-icon-moon { display: none; } /* Search panel (fallback, non-JS) */ .be-header-search-panel { border-top: 1px solid var(--be-border); background: var(--be-surface); padding: 0.9rem 0; } .be-search-form { display: flex; gap: 0.6rem; align-items: center; } .be-search-form input[type="search"] { flex: 1; } /* Mobile nav toggle */ .be-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; background: none; border: 1px solid var(--be-border); border-radius: 10px; cursor: pointer; margin-left: auto; } .be-nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--be-text); border-radius: 2px; transition: transform 0.25s var(--be-ease), opacity 0.2s; } .be-nav-toggle[aria-expanded="true"] .be-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .be-nav-toggle[aria-expanded="true"] .be-nav-toggle-bar:nth-child(2) { opacity: 0; } .be-nav-toggle[aria-expanded="true"] .be-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ───────────────────────────────────────────── 5. Command palette ───────────────────────────────────────────── */ .be-palette { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: min(14vh, 130px) 1rem 1rem; background: rgba(5, 20, 14, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.2s var(--be-ease), visibility 0.2s; } .be-palette.is-open { opacity: 1; visibility: visible; } .be-palette-panel { width: min(640px, 100%); background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius-lg); box-shadow: var(--be-shadow-pop); overflow: hidden; transform: translateY(10px) scale(0.98); transition: transform 0.22s var(--be-ease); } .be-palette.is-open .be-palette-panel { transform: translateY(0) scale(1); } .be-palette-input-row { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--be-border); } .be-palette-input-row svg { width: 20px; height: 20px; fill: var(--be-text-muted); flex-shrink: 0; } .be-palette-input { flex: 1; border: none !important; background: none !important; box-shadow: none !important; font-size: 1.05rem; font-family: var(--be-font); color: var(--be-text); padding: 0; } .be-palette-input:focus { outline: none; box-shadow: none !important; } .be-palette-esc { font-size: 0.7rem; font-weight: 600; color: var(--be-text-muted); border: 1px solid var(--be-border-strong); border-radius: 6px; padding: 0.15rem 0.45rem; background: var(--be-surface-2); } .be-palette-results { max-height: min(46vh, 420px); overflow-y: auto; padding: 0.6rem; } .be-palette-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--be-text-muted); padding: 0.6rem 0.7rem 0.3rem; } .be-palette-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 10px; text-decoration: none; color: var(--be-text); font-size: 0.92rem; font-weight: 500; cursor: pointer; } .be-palette-item svg { width: 17px; height: 17px; fill: var(--be-text-muted); flex-shrink: 0; } .be-palette-item:hover, .be-palette-item.is-selected { background: var(--be-primary-soft); color: var(--be-primary-strong); } .be-palette-item:hover svg, .be-palette-item.is-selected svg { fill: var(--be-primary); } .be-palette-item-type { margin-left: auto; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--be-text-muted); } .be-palette-empty { text-align: center; color: var(--be-text-muted); padding: 1.6rem 1rem; font-size: 0.9rem; } .be-palette-footer { display: flex; gap: 1rem; padding: 0.55rem 1.2rem; border-top: 1px solid var(--be-border); background: var(--be-surface-2); font-size: 0.72rem; color: var(--be-text-muted); } .be-palette-footer kbd { font-family: var(--be-font); font-size: 0.68rem; border: 1px solid var(--be-border-strong); border-radius: 5px; padding: 0.05rem 0.35rem; background: var(--be-surface); } .be-kbd-hint { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--be-text-muted); border: 1px solid var(--be-border-strong); border-radius: 7px; padding: 0.14rem 0.5rem; background: var(--be-surface-2); pointer-events: none; } /* ───────────────────────────────────────────── 6. Hero ───────────────────────────────────────────── */ .be-hero { position: relative; color: var(--be-hero-text); background: radial-gradient(900px 420px at 85% -10%, rgba(217, 119, 6, 0.22), transparent 60%), radial-gradient(700px 380px at -10% 110%, rgba(20, 184, 166, 0.16), transparent 55%), linear-gradient(150deg, var(--be-hero-bg-1) 0%, var(--be-hero-bg-2) 55%, var(--be-hero-bg-3) 100%); overflow: hidden; padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.4rem, 5vw, 3.6rem); } .be-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 30%, transparent 78%); pointer-events: none; } .be-hero-inner { position: relative; display: flex; flex-direction: column; gap: 2.2rem; } .be-hero-content { max-width: 720px; } /* Floating ambient blobs */ .be-hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; animation: be-hero-float 16s ease-in-out infinite; } .be-hero-blob-1 { width: 380px; height: 380px; background: rgba(245, 185, 74, 0.32); top: -140px; right: 4%; } .be-hero-blob-2 { width: 300px; height: 300px; background: rgba(20, 184, 166, 0.35); bottom: -120px; left: 2%; animation-delay: -8s; } @keyframes be-hero-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(28px) scale(1.07); } } .be-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.8rem; text-wrap: balance; line-height: 1.12; } .be-hero-glow { background: linear-gradient(92deg, #F5C462 0%, #FBE3A8 45%, #6EE7B7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .be-hero-subtitle { color: var(--be-hero-muted); font-size: clamp(0.98rem, 1.6vw, 1.12rem); margin: 0 0 1.6rem; max-width: 58ch; text-wrap: pretty; } /* Staggered entrance */ @keyframes be-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .be-hero h1 { animation: be-rise 0.6s var(--be-ease) both; } .be-hero-subtitle { animation: be-rise 0.6s var(--be-ease) 0.1s both; } .be-search-form-hero { animation: be-rise 0.6s var(--be-ease) 0.2s both; } .be-hero-actions { animation: be-rise 0.6s var(--be-ease) 0.3s both; } .be-quick-actions { animation: be-rise 0.7s var(--be-ease) 0.42s both; } .be-search-form-hero { position: relative; display: flex; align-items: center; gap: 0; background: rgba(255, 255, 255, 0.98); border-radius: 999px; padding: 0.35rem 0.4rem 0.35rem 1.1rem; max-width: 560px; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.45); } .be-search-form-hero .be-search-icon { display: grid; place-items: center; margin-right: 0.5rem; } .be-search-form-hero .be-search-icon svg { width: 19px; height: 19px; fill: #6B7280; } .be-search-form-hero input[type="search"] { flex: 1; border: none; background: none; box-shadow: none; font-size: 0.98rem; color: #111827; padding: 0.55rem 0.4rem; } .be-search-form-hero input[type="search"]:focus { outline: none; box-shadow: none; } .be-search-form-hero input::placeholder { color: #9CA3AF; } .be-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; } /* Quick actions inside hero */ .be-quick-actions { position: relative; } .be-action-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; text-align: center; text-decoration: none; padding: 1.1rem 0.75rem; border-radius: var(--be-radius); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--be-hero-text); transition: all 0.2s var(--be-ease); } .be-action-card:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-3px); color: #fff; } .be-action-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, 0.12); transition: transform 0.2s var(--be-ease); } .be-action-icon svg { width: 22px; height: 22px; fill: var(--be-accent-bright); } .be-action-card:hover .be-action-icon { transform: scale(1.12) rotate(-4deg); } .be-action-title { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; } /* Each quick action has its own colour identity */ .be-action-card--emergency .be-action-icon { background: rgba(229, 72, 77, 0.28); } .be-action-card--emergency .be-action-icon svg { fill: #FF9B9E; } .be-action-card--services .be-action-icon { background: rgba(110, 231, 183, 0.2); } .be-action-card--services .be-action-icon svg { fill: #6EE7B7; } .be-action-card--property .be-action-icon { background: rgba(245, 196, 98, 0.22); } .be-action-card--property .be-action-icon svg { fill: #F5C462; } .be-action-card--forms .be-action-icon { background: rgba(96, 165, 250, 0.24); } .be-action-card--forms .be-action-icon svg { fill: #93C5FD; } .be-action-card--noc .be-action-icon { background: rgba(167, 139, 250, 0.24); } .be-action-card--noc .be-action-icon svg { fill: #C4B5FD; } .be-action-card--updates .be-action-icon { background: rgba(251, 146, 60, 0.24); } .be-action-card--updates .be-action-icon svg { fill: #FDBA74; } .be-action-card--bazaar .be-action-icon { background: rgba(244, 114, 182, 0.24); } .be-action-card--bazaar .be-action-icon svg { fill: #F9A8D4; } /* ───────────────────────────────────────────── 7. Sections & generic cards ───────────────────────────────────────────── */ .be-section { padding: clamp(1.6rem, 3.4vw, 2.6rem) 0; } .be-section:first-of-type { padding-top: clamp(1.8rem, 4vw, 3rem); } .be-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .be-section-title { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 0; position: relative; padding-left: 0.9rem; } .be-section-title::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--be-accent-bright), var(--be-primary)); } .be-section-link { font-size: 0.88rem; font-weight: 600; color: var(--be-primary); text-decoration: none; white-space: nowrap; } .be-section-link:hover { text-decoration: underline; text-underline-offset: 3px; } .be-section-desc { color: var(--be-text-muted); margin: -0.5rem 0 1.2rem; max-width: 70ch; } .be-card { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); box-shadow: var(--be-shadow-xs); padding: 1.3rem; transition: transform 0.22s var(--be-ease), box-shadow 0.22s var(--be-ease), border-color 0.22s; } .be-card:hover { box-shadow: var(--be-shadow-hover); border-color: var(--be-border-strong); } .be-card-grid { display: grid; gap: 1rem; } .be-card-grid-2 { grid-template-columns: repeat(2, 1fr); } .be-card-grid-3 { grid-template-columns: repeat(3, 1fr); } .be-card-grid-4 { grid-template-columns: repeat(4, 1fr); } .be-card-grid-6 { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); } .be-card-title { font-size: 1.02rem; margin: 0 0 0.35rem; } .be-card-title a { color: inherit; text-decoration: none; } .be-card-title a:hover { color: var(--be-primary); } .be-card-desc, .be-card-meta { color: var(--be-text-muted); font-size: 0.88rem; margin: 0 0 0.6rem; } .be-card-row { font-size: 0.86rem; color: var(--be-text-soft); margin: 0.2rem 0; } .be-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; } .be-card-meta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; color: var(--be-text-muted); font-size: 0.84rem; } .be-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; } .be-card-link { font-weight: 600; font-size: 0.88rem; color: var(--be-primary); margin-top: auto; } .be-last-updated { display: block; font-size: 0.75rem; color: var(--be-text-muted); margin-top: 0.6rem; } /* Scroll reveal */ .be-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--be-ease), transform 0.6s var(--be-ease); } .be-reveal.is-visible { opacity: 1; transform: none; } /* ───────────────────────────────────────────── 8. Homepage sections ───────────────────────────────────────────── */ /* Alert strip */ .be-alert-strip { background: linear-gradient(90deg, var(--be-danger), #B91C1C); color: #fff; padding: 0.55rem 0; font-size: 0.88rem; } .be-alert-inner { display: flex; align-items: center; gap: 0.7rem; } .be-alert-label { font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; } .be-alert-link { color: #fff; font-weight: 600; } /* Important update */ .be-important-update .be-update-card { position: relative; border-left: 4px solid var(--be-accent-bright); overflow: hidden; } .be-important-update .be-update-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 200px at 100% 0%, var(--be-accent-soft), transparent 65%); pointer-events: none; } .be-update-card-body { position: relative; z-index: 1; } .be-update-card-title { font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0.7rem 0 0.3rem; } .be-update-card-title a { color: inherit; text-decoration: none; } .be-update-card-title a:hover { color: var(--be-primary); } .be-update-card-meta { color: var(--be-text-muted); font-size: 0.84rem; margin-bottom: 0.5rem; } .be-update-card-excerpt { color: var(--be-text-soft); max-width: 85ch; margin: 0 0 0.7rem; } /* Emergency preview cards */ .be-emergency-card { display: flex; flex-direction: column; } .be-emergency-card .be-badge { align-self: flex-start; margin-bottom: 0.55rem; } .be-emergency-card .be-card-actions { margin-top: auto; padding-top: 0.8rem; } /* Service guide cards */ .be-service-card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); box-shadow: var(--be-shadow-xs); padding: 1.4rem; text-decoration: none; color: inherit; transition: transform 0.22s var(--be-ease), box-shadow 0.22s var(--be-ease), border-color 0.22s; } a.be-service-card:hover { transform: translateY(-4px); box-shadow: var(--be-shadow-hover); border-color: var(--be-primary); } .be-service-card h3 { font-size: 1.05rem; margin: 0; } .be-service-card p { color: var(--be-text-muted); font-size: 0.88rem; margin: 0; flex: 1; } .be-service-icon, .be-service-card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--be-primary-soft); flex-shrink: 0; } .be-service-icon svg, .be-service-card-icon svg { width: 23px; height: 23px; fill: var(--be-primary); } /* Per-category icon accents (Service Guides) */ .be-service-icon--emergency { background: rgba(220, 38, 38, 0.1); } .be-service-icon--emergency svg { fill: #DC2626; } .be-service-icon--medical { background: rgba(37, 99, 235, 0.1); } .be-service-icon--medical svg { fill: #2563EB; } .be-service-icon--maintenance { background: rgba(217, 119, 6, 0.12); } .be-service-icon--maintenance svg { fill: #D97706; } .be-service-icon--grocery { background: rgba(22, 163, 74, 0.12); } .be-service-icon--grocery svg { fill: #16A34A; } .be-service-icon--school { background: rgba(124, 58, 237, 0.1); } .be-service-icon--school svg { fill: #7C3AED; } html[data-theme="dark"] .be-service-icon--emergency { background: rgba(248, 113, 113, 0.14); } html[data-theme="dark"] .be-service-icon--emergency svg { fill: #F87171; } html[data-theme="dark"] .be-service-icon--medical { background: rgba(96, 165, 250, 0.14); } html[data-theme="dark"] .be-service-icon--medical svg { fill: #60A5FA; } html[data-theme="dark"] .be-service-icon--maintenance { background: rgba(245, 196, 98, 0.14); } html[data-theme="dark"] .be-service-icon--maintenance svg { fill: #F5C462; } html[data-theme="dark"] .be-service-icon--grocery { background: rgba(74, 222, 128, 0.14); } html[data-theme="dark"] .be-service-icon--grocery svg { fill: #4ADE80; } html[data-theme="dark"] .be-service-icon--school { background: rgba(167, 139, 250, 0.14); } html[data-theme="dark"] .be-service-icon--school svg { fill: #A78BFA; } article.be-service-card { flex-direction: row; gap: 1rem; } .be-service-card-body { flex: 1; min-width: 0; } /* Post cards */ .be-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .be-post-card { display: flex; flex-direction: column; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); overflow: hidden; box-shadow: var(--be-shadow-xs); transition: transform 0.22s var(--be-ease), box-shadow 0.22s var(--be-ease), border-color 0.22s; } .be-post-card:hover { transform: translateY(-4px); box-shadow: var(--be-shadow-hover); border-color: var(--be-border-strong); } .be-post-card-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--be-bg-alt); } .be-post-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--be-ease); } .be-post-card:hover .be-post-card-image img { transform: scale(1.05); } .be-post-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.2rem; } .be-post-card-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--be-text-muted); margin-bottom: 0.5rem; } .be-post-card-title { font-size: 1.02rem; margin: 0 0 0.4rem; } .be-post-card-title a { color: inherit; text-decoration: none; } .be-post-card-title a:hover { color: var(--be-primary); } .be-post-card-excerpt { color: var(--be-text-muted); font-size: 0.87rem; margin: 0 0 0.6rem; flex: 1; } /* List view (archives) */ .be-post-grid.be-archive-view-list { grid-template-columns: 1fr; } .be-post-grid.be-archive-view-list .be-post-card { flex-direction: row; } .be-post-grid.be-archive-view-list .be-post-card-image { width: 260px; flex-shrink: 0; aspect-ratio: auto; } /* Property cards (NOC posts) */ .be-property-card { display: flex; flex-direction: column; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); overflow: hidden; box-shadow: var(--be-shadow-xs); transition: transform 0.22s var(--be-ease), box-shadow 0.22s var(--be-ease); } .be-property-card:hover { transform: translateY(-4px); box-shadow: var(--be-shadow-hover); } .be-property-card-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--be-bg-alt); } .be-property-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .be-property-card-body { padding: 1.1rem 1.2rem; } /* Business cards */ .be-business-card { display: flex; gap: 0.9rem; } .be-business-card-logo { width: 52px; height: 52px; border-radius: 12px; background: var(--be-primary-soft); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } .be-business-card-logo img { width: 100%; height: 100%; object-fit: cover; } .be-business-card-body { flex: 1; min-width: 0; } /* Featured live listings (fetched from /properties/) */ .be-listings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.2rem; } .be-listing-card { display: flex; flex-direction: column; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--be-shadow-xs); transition: transform 0.22s var(--be-ease), box-shadow 0.22s var(--be-ease), border-color 0.22s; } .be-listing-card:hover { transform: translateY(-4px); box-shadow: var(--be-shadow-hover); border-color: var(--be-primary); } /* Card = wrapper div; main link fills it, seller-contact bar sits below. */ .be-listing-main { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } .be-listing-actions { display: flex; gap: 0.45rem; padding: 0.65rem 0.8rem 0.8rem; border-top: 1px solid var(--be-border); background: var(--be-surface); } .be-listing-act { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 38px; padding: 0 0.85rem; border-radius: 9px; font-size: 0.82rem; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none !important; border: 1.5px solid transparent; transition: transform 0.15s var(--be-ease), box-shadow 0.15s, background 0.15s, filter 0.15s; } .be-listing-act:hover { transform: translateY(-1px); } .be-listing-act:focus-visible { outline: 2px solid var(--be-primary); outline-offset: 2px; } .be-listing-act svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; } .be-listing-act-mail { width: 38px; padding: 0; flex: none; color: var(--be-text-muted) !important; border-color: var(--be-border); background: var(--be-surface); } .be-listing-act-mail:hover { color: var(--be-primary) !important; border-color: var(--be-primary); } .be-listing-act-wa { flex: 1; color: #1da851 !important; border-color: rgba(37, 211, 102, 0.65); background: var(--be-surface); } .be-listing-act-wa:hover { background: rgba(37, 211, 102, 0.1); } .be-listing-act-call { flex: 1.15; color: #fff !important; background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 2px 8px rgba(4, 120, 87, 0.35); } .be-listing-act-call:hover { filter: brightness(1.06); box-shadow: 0 4px 12px rgba(4, 120, 87, 0.4); } [data-theme="dark"] .be-listing-act-wa { color: #34d399 !important; background: transparent; } [data-theme="dark"] .be-listing-act-wa:hover { background: rgba(37, 211, 102, 0.14); } [data-theme="dark"] .be-listing-act-mail { background: transparent; } .be-listing-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--be-bg-alt), var(--be-surface-2)); overflow: hidden; } .be-listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .be-listing-badge { position: absolute; top: 0.7rem; left: 0.7rem; background: rgba(6, 78, 59, 0.88); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.26rem 0.66rem; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .be-listing-price { position: absolute; bottom: 0.7rem; left: 0.7rem; background: rgba(255, 255, 255, 0.94); color: #064E3B; font-family: var(--be-font-display); font-weight: 800; font-size: 0.95rem; padding: 0.3rem 0.75rem; border-radius: 10px; } .be-listing-body { padding: 1rem 1.1rem 1.1rem; } .be-listing-title { font-size: 0.98rem; font-weight: 650; margin: 0 0 0.4rem; color: var(--be-text); } .be-listing-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; font-size: 0.8rem; color: var(--be-text-muted); } /* Skeleton shimmer while listings load */ .be-skeleton { border-radius: var(--be-radius); border: 1px solid var(--be-border); overflow: hidden; background: var(--be-surface); } .be-skeleton-media, .be-skeleton-line { background: linear-gradient(90deg, var(--be-bg-alt) 25%, var(--be-surface-2) 50%, var(--be-bg-alt) 75%); background-size: 200% 100%; animation: be-shimmer 1.4s infinite; } .be-skeleton-media { aspect-ratio: 16 / 10; } .be-skeleton-line { height: 13px; border-radius: 6px; margin: 0.55rem 1.1rem; } .be-skeleton-line:last-child { width: 55%; margin-bottom: 1.1rem; } @keyframes be-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Properties promo */ .be-properties-promo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: radial-gradient(600px 280px at 90% -20%, rgba(217, 119, 6, 0.18), transparent 60%), linear-gradient(140deg, var(--be-hero-bg-1), var(--be-hero-bg-3)); color: var(--be-hero-text); border-radius: var(--be-radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); overflow: hidden; } .be-properties-promo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 75%); pointer-events: none; } .be-properties-promo-content { position: relative; } .be-properties-promo-content h2, .be-properties-promo-content .be-section-title { color: #fff; padding-left: 0; } .be-properties-promo-content .be-section-title::before { display: none; } .be-properties-promo-content p { color: var(--be-hero-muted); max-width: 55ch; } .be-properties-promo-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; } .be-properties-promo .be-btn-secondary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: #fff; } .be-properties-promo .be-btn-secondary:hover { background: rgba(255, 255, 255, 0.2); } .be-properties-promo-aside { position: relative; text-align: right; flex-shrink: 0; } .be-properties-promo-aside .be-text-muted { color: var(--be-hero-muted); margin-bottom: 0.3rem; } .be-properties-promo-aside .be-section-link { color: var(--be-accent-bright); } /* Stat pills */ .be-stat-pill { display: inline-flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--be-radius); padding: 0.7rem 1.2rem; } .be-stat-num { font-family: var(--be-font-display); font-weight: 800; font-size: 1.3rem; color: #fff; } .be-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--be-hero-muted); } /* Categories strip */ .be-categories-section .be-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .be-category-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius-sm); text-decoration: none; color: var(--be-text-soft); font-weight: 550; font-size: 0.88rem; transition: all 0.16s var(--be-ease); } .be-category-card:hover { border-color: var(--be-primary); color: var(--be-primary); transform: translateY(-2px); } .be-category-icon { display: grid; place-items: center; } .be-category-icon svg { width: 18px; height: 18px; fill: var(--be-primary); } /* App promo */ .be-app-promo { padding-bottom: clamp(2.4rem, 5vw, 4rem); } .be-app-promo-inner { display: flex; align-items: center; gap: 2.5rem; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius-lg); padding: clamp(1.6rem, 4vw, 2.8rem); box-shadow: var(--be-shadow); } .be-app-content { flex: 1; } .be-app-content h2 { margin-top: 0; } .be-app-content p { color: var(--be-text-muted); max-width: 55ch; } .be-app-buttons { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; } /* App promo sits on a light card — outline-light buttons need dark text here */ .be-app-promo-inner .be-btn-outline-light, .be-portal-theme .be-app-promo-inner a.be-btn-outline-light, .be-portal-theme .be-app-promo-inner a.be-btn-outline-light:hover { color: var(--be-text) !important; border-color: var(--be-border-strong); } .be-app-promo-inner .be-btn-outline-light:hover { background: var(--be-primary-soft); border-color: var(--be-primary); color: var(--be-primary) !important; } .be-app-visual { flex-shrink: 0; } .be-app-mockup { width: 150px; height: 300px; border-radius: 28px; background: linear-gradient(160deg, var(--be-hero-bg-2), var(--be-hero-bg-3)); border: 6px solid var(--be-text); position: relative; box-shadow: var(--be-shadow-hover); } .be-app-mockup::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 46px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); } /* ───────────────────────────────────────────── 9. Forms hub ───────────────────────────────────────────── */ .be-forms-hub-section { padding-bottom: clamp(2rem, 4vw, 3rem); } .be-forms-hub-header { max-width: 760px; } .be-forms-hub-intro { color: var(--be-text-muted); } .be-forms-hub-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; } /* Stat pills sit on light page background here (hero styling doesn't apply) */ .be-forms-hub-stats .be-stat-pill { background: var(--be-surface); border: 1px solid var(--be-border); box-shadow: var(--be-shadow-xs); } .be-forms-hub-stats .be-stat-num { color: var(--be-primary-strong); } .be-forms-hub-stats .be-stat-label { color: var(--be-text-muted); } .be-forms-hub-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 1.2rem 0; } .be-forms-search { position: relative; display: block; width: 100%; max-width: 340px; } .be-forms-search .be-search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; } .be-forms-search input[type="search"] { padding-left: 2.5rem; } .be-forms-filter-chips, .be-filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .be-forms-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .be-form-hub-card { display: flex; flex-direction: column; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius); padding: 1.3rem; box-shadow: var(--be-shadow-xs); transition: transform 0.22s var(--be-ease), box-shadow 0.22s var(--be-ease), border-color 0.22s; } .be-form-hub-card:hover { transform: translateY(-3px); box-shadow: var(--be-shadow-hover); border-color: var(--be-border-strong); } .be-form-hub-card.is-hidden { display: none; } .be-form-hub-card-top { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.6rem; } .be-form-hub-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--be-primary-soft); flex-shrink: 0; } .be-form-hub-icon svg { width: 22px; height: 22px; fill: var(--be-primary); } .be-form-hub-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.6rem; } .be-form-hub-meta { font-size: 0.82rem; color: var(--be-text-muted); display: grid; gap: 0.2rem; margin-bottom: 0.7rem; } .be-form-hub-reqs { margin: 0 0 0.8rem; } .be-form-hub-reqs-label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--be-text-muted); display: block; margin-bottom: 0.3rem; } .be-form-hub-reqs ul, .be-checklist { list-style: none; margin: 0; padding: 0; } .be-form-hub-reqs li, .be-checklist li { position: relative; padding-left: 1.4rem; font-size: 0.85rem; color: var(--be-text-soft); margin: 0.25rem 0; } .be-form-hub-reqs li::before, .be-checklist li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--be-primary-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23047857'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E"); background-size: 65%; background-position: center; background-repeat: no-repeat; } .be-form-hub-steps { counter-reset: bestep; list-style: none; margin: 0 0 0.9rem; padding: 0; } .be-form-hub-steps li { counter-increment: bestep; position: relative; padding-left: 1.9rem; font-size: 0.85rem; color: var(--be-text-soft); margin: 0.35rem 0; } .be-form-hub-steps li::before { content: counter(bestep); position: absolute; left: 0; top: 0.1em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--be-primary-soft); color: var(--be-primary-strong); font-size: 0.78em; font-weight: 700; display: grid; place-items: center; } .be-form-hub-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; } .be-forms-hub-empty { text-align: center; color: var(--be-text-muted); padding: 2rem 1rem; } .be-forms-hub-help { margin-top: 1.6rem; } .be-forms-help-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--be-primary-soft); border: 1px solid var(--be-primary-soft-2); border-radius: var(--be-radius); padding: 1.2rem 1.4rem; } .be-forms-help-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* ───────────────────────────────────────────── 10. Emergency page ───────────────────────────────────────────── */ .be-emergency-header { margin-bottom: 1.2rem; } .be-emergency-toolbar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-bottom: 1.2rem; position: sticky; top: calc(var(--be-header-h) + 8px); z-index: 50; background: var(--be-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 0.7rem; border-radius: var(--be-radius); border: 1px solid var(--be-border); box-shadow: var(--be-shadow-xs); } .be-emergency-toolbar .be-input { max-width: 320px; } .be-emergency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .be-emergency-item.is-hidden { display: none; } .be-emergency-faq { margin-top: 2rem; } .be-faq-heading { color: var(--be-primary-strong); } /* ───────────────────────────────────────────── 11. Content pages, single posts, archives ───────────────────────────────────────────── */ .be-page, .be-single-post, .be-archive, .be-search-page { padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3rem); } .be-breadcrumbs { font-size: 0.82rem; color: var(--be-text-muted); margin-bottom: 1rem; } .be-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; } .be-breadcrumbs li { display: flex; align-items: center; gap: 0.35rem; } .be-breadcrumbs li + li::before { content: "/"; color: var(--be-border-strong); } .be-breadcrumbs a { color: var(--be-text-muted); text-decoration: none; } .be-breadcrumbs a:hover { color: var(--be-primary); } .be-page-header { margin-bottom: 1.4rem; max-width: 860px; } .be-page-header h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 0.4rem; } .be-page-content-wrap { display: block; } .be-page-content, .be-article-content { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-radius-lg); box-shadow: var(--be-shadow-xs); padding: clamp(1.4rem, 3.4vw, 2.6rem); max-width: 900px; font-size: 1.02rem; color: var(--be-text-soft); } .be-page-content h2, .be-article-content h2 { font-size: 1.45rem; margin: 1.8em 0 0.6em; } .be-page-content h3, .be-article-content h3 { font-size: 1.18rem; margin: 1.5em 0 0.5em; } .be-page-content a, .be-article-content a { color: var(--be-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .be-page-content img, .be-article-content img { max-width: 100%; height: auto; border-radius: var(--be-radius-sm); } /* Gutenberg tables — LOP/NOC & shuttle pages */ .be-page-content .wp-block-table, .be-article-content .wp-block-table { overflow-x: auto; margin: 1.4em 0; } .be-page-content table, .be-article-content table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--be-border); border-radius: var(--be-radius-sm); overflow: hidden; font-size: 0.92rem; } .be-page-content table th, .be-article-content table th { background: var(--be-primary-soft); color: var(--be-primary-ink); font-weight: 650; text-align: left; padding: 0.7rem 0.9rem; } .be-page-content table td, .be-article-content table td { padding: 0.65rem 0.9rem; border-top: 1px solid var(--be-border); } .be-page-content table tr:nth-child(even) td, .be-article-content table tr:nth-child(even) td { background: var(--be-surface-2); } /* File / PDF blocks */ .be-page-content .wp-block-file, .be-article-content .wp-block-file { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; background: var(--be-primary-soft); border: 1px solid var(--be-primary-soft-2); border-radius: var(--be-radius-sm); padding: 0.9rem 1.1rem; margin: 1.2em 0; } .be-page-content .wp-block-file a.wp-block-file__button, .be-article-content .wp-block-file a.wp-block-file__button { background: var(--be-primary); color: #fff; border-radius: 999px; padding: 0.5rem 1.1rem; text-decoration: none; font-weight: 600; font-size: 0.85rem; } .be-page-content .wp-block-file object, .be-article-content .wp-block-file object { border-radius: var(--be-radius-sm); } .be-callout { border-left: 4px solid var(--be-accent-bright); background: var(--be-accent-soft); border-radius: 0 var(--be-radius-sm) var(--be-radius-sm) 0; padding: 0.9rem 1.2rem; margin: 1.2em 0; } /* Single article */ .be-single-layout { max-width: 900px; } .be-article-header { margin-bottom: 1.3rem; } .be-article-header h1 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); margin: 0.4rem 0; text-wrap: balance; } .be-article-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; color: var(--be-text-muted); font-size: 0.86rem; } .be-article-featured { margin: 0 0 1.4rem; } .be-article-featured img { width: 100%; height: auto; border-radius: var(--be-radius-lg); box-shadow: var(--be-shadow); } .be-article-footer { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .be-share { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--be-text-muted); } .be-share-btn { display: inline-flex; padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-decoration: none; border: 1px solid var(--be-border-strong); color: var(--be-text-soft); transition: all 0.15s; } .be-share-whatsapp:hover { background: var(--be-whatsapp); border-color: var(--be-whatsapp); color: #fff; } .be-share-facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; } .be-share-x:hover { background: #111; border-color: #111; color: #fff; } .be-related-posts { margin-top: 2.2rem; } .be-related-posts h2 { font-size: 1.35rem; } .be-post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; } /* Archive tools */ .be-archive-header { margin-bottom: 1.4rem; } .be-archive-desc { color: var(--be-text-muted); max-width: 70ch; } .be-archive-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .be-view-toggle { display: flex; gap: 0.3rem; } .be-view-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--be-border-strong); background: var(--be-surface); color: var(--be-text-muted); cursor: pointer; } .be-view-btn.is-active { background: var(--be-primary-soft); border-color: var(--be-primary); color: var(--be-primary); } .be-view-btn svg { width: 17px; height: 17px; fill: currentColor; } .be-pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 2rem; } .be-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 0.6rem; border-radius: 10px; border: 1px solid var(--be-border-strong); background: var(--be-surface); color: var(--be-text-soft); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .be-pagination .page-numbers.current { background: var(--be-primary); border-color: var(--be-primary); color: #fff; } .be-pagination .page-numbers:hover:not(.current) { border-color: var(--be-primary); color: var(--be-primary); } /* Search page */ .be-search-hero { margin-bottom: 1.6rem; } .be-search-inline { max-width: 560px; display: flex; gap: 0.6rem; } /* Generic search-icon guard (hero variant overrides below/above) */ .be-portal-theme .be-search-icon { display: inline-grid; place-items: center; flex-shrink: 0; } .be-portal-theme .be-search-icon svg { width: 19px; height: 19px; fill: var(--be-text-muted); } /* Directory grid */ .be-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* ───────────────────────────────────────────── 12. Footer ───────────────────────────────────────────── */ .be-footer { margin-top: auto; background: linear-gradient(170deg, var(--be-hero-bg-1), #032018 80%); color: rgba(242, 247, 245, 0.82); padding: clamp(2.2rem, 5vw, 3.6rem) 0 1.4rem; position: relative; overflow: hidden; } .be-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 90% 0%, rgba(217, 119, 6, 0.1), transparent 60%); pointer-events: none; } .be-footer-grid { position: relative; display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 2rem; margin-bottom: 2rem; } .be-footer-logo-text { font-family: var(--be-font-display); font-weight: 800; font-size: 1.25rem; color: #fff; margin: 0; } .be-footer-tagline { color: var(--be-accent-bright); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin: 0.2rem 0 0.8rem; } .be-footer-about { font-size: 0.86rem; line-height: 1.7; color: rgba(242, 247, 245, 0.6); max-width: 34ch; } .be-footer-col h3 { color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.9rem; } .be-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .be-footer-col a { color: rgba(242, 247, 245, 0.72); text-decoration: none; font-size: 0.88rem; transition: color 0.15s, padding-left 0.2s var(--be-ease); } .be-footer-col a:hover { color: var(--be-accent-bright); padding-left: 4px; } .be-footer-bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.2rem; font-size: 0.8rem; color: rgba(242, 247, 245, 0.5); display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: space-between; } .be-footer-widget { margin-bottom: 1rem; } /* ───────────────────────────────────────────── 13. Floating elements ───────────────────────────────────────────── */ .be-sticky-emergency { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 900; display: none; align-items: center; gap: 0.45rem; background: linear-gradient(135deg, #E5484D, #C62A2F); color: #fff; font-weight: 700; font-size: 0.85rem; text-decoration: none; padding: 0.75rem 1.2rem; border-radius: 999px; box-shadow: 0 12px 30px -8px rgba(220, 38, 38, 0.6); animation: be-pulse 2.6s infinite; } .be-sticky-emergency svg { width: 17px; height: 17px; fill: #fff; } @keyframes be-pulse { 0%, 100% { box-shadow: 0 12px 30px -8px rgba(220, 38, 38, 0.6), 0 0 0 0 rgba(220, 38, 38, 0.35); } 50% { box-shadow: 0 12px 30px -8px rgba(220, 38, 38, 0.6), 0 0 0 12px rgba(220, 38, 38, 0); } } .be-back-top { position: fixed; right: 1.2rem; bottom: 4.6rem; z-index: 890; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--be-border-strong); background: var(--be-surface); color: var(--be-text-soft); cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.25s var(--be-ease); box-shadow: var(--be-shadow); } .be-back-top.is-visible { opacity: 1; visibility: visible; transform: none; } .be-back-top:hover { color: var(--be-primary); border-color: var(--be-primary); } .be-back-top svg { width: 18px; height: 18px; fill: currentColor; } /* ───────────────────────────────────────────── 14. Responsive ───────────────────────────────────────────── */ @media (max-width: 1080px) { .be-card-grid-4 { grid-template-columns: repeat(2, 1fr); } .be-nav-link { font-size: 0.8rem; padding: 0.45rem 0.5rem; } .be-footer-grid { grid-template-columns: repeat(3, 1fr); } .be-footer-brand { grid-column: 1 / -1; } } @media (max-width: 900px) { .be-card-grid-3, .be-post-grid, .be-forms-hub-grid, .be-emergency-grid, .be-directory-grid, .be-listings-grid { grid-template-columns: repeat(2, 1fr); } .be-properties-promo { flex-direction: column; align-items: flex-start; } .be-properties-promo-aside { text-align: left; } .be-app-promo-inner { flex-direction: column; text-align: center; } .be-app-buttons { justify-content: center; } } @media (max-width: 768px) { :root { --be-header-h: 60px; } .be-nav-toggle { display: flex; order: 3; } .be-header-actions { order: 2; margin-left: auto; } .be-branding { order: 1; } .be-header-inner { flex-wrap: wrap; } .be-primary-nav { order: 4; flex-basis: 100%; display: none; border-top: 1px solid var(--be-border); margin: 0 -1.25rem; padding: 0.5rem 1.25rem 1rem; max-height: calc(100vh - var(--be-header-h)); overflow-y: auto; background: var(--be-surface); } .be-primary-nav.is-open { display: block; } .be-primary-nav .be-nav-list { flex-direction: column; align-items: stretch; gap: 0; } .be-nav-item { flex-direction: column; align-items: stretch; } .be-nav-parent-row { justify-content: space-between; } .be-nav-link { font-size: 0.95rem; padding: 0.7rem 0.4rem; border-radius: 8px; width: 100%; } .be-nav-submenu-toggle { width: 38px; height: 38px; } .be-nav-submenu { position: static; transform: none; opacity: 1; visibility: hidden; pointer-events: auto; box-shadow: none; border: none; border-left: 2px solid var(--be-border); border-radius: 0; margin-left: 0.8rem; padding: 0; display: none; min-width: 0; transition: none; } .be-nav-submenu-list { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; } .be-nav-item--has-children:hover .be-nav-submenu { visibility: hidden; } .be-nav-item--has-children.is-submenu-open .be-nav-submenu { display: block; visibility: visible; transform: none; } .be-nav-sublink { padding: 0.55rem 0.8rem; font-size: 0.9rem; } .be-btn-emergency span { display: none; } .be-btn-emergency { padding: 0.45rem 0.6rem; } .be-kbd-hint { display: none; } .be-hero { padding: 2.4rem 0 2rem; } .be-hero-actions .be-btn { flex: 1; justify-content: center; min-width: 130px; } .be-search-form-hero { border-radius: var(--be-radius); flex-wrap: wrap; padding: 0.5rem; } .be-search-form-hero input[type="search"] { min-width: 0; flex-basis: 100%; padding: 0.6rem 0.5rem; } .be-search-form-hero .be-btn { flex-basis: 100%; margin-top: 0.4rem; } .be-section-head { flex-wrap: wrap; } .be-post-grid.be-archive-view-list .be-post-card { flex-direction: column; } .be-post-grid.be-archive-view-list .be-post-card-image { width: 100%; aspect-ratio: 16/10; } .be-sticky-emergency { display: inline-flex; } .be-back-top { bottom: 5.2rem; } .be-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .be-emergency-toolbar { position: static; } } @media (max-width: 560px) { .be-card-grid-2, .be-card-grid-3, .be-card-grid-4, .be-post-grid, .be-forms-hub-grid, .be-emergency-grid, .be-directory-grid, .be-listings-grid { grid-template-columns: 1fr; } .be-card-grid-6 { grid-template-columns: repeat(2, 1fr); } .be-card-grid-6 .be-action-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .be-footer-grid { grid-template-columns: 1fr; } article.be-service-card { flex-direction: column; } /* Hero CTAs: full-width stacked — text can never clip */ .be-hero-actions { flex-direction: column; align-items: stretch; gap: 0.55rem; } .be-hero-actions .be-btn { width: 100%; justify-content: center; min-width: 0; } /* 16px inputs prevent iOS focus-zoom */ .be-portal-theme input[type="search"], .be-portal-theme input[type="text"], .be-input, .be-palette-input, .be-forms-search input { font-size: 16px !important; } /* Single-row compact header on phones */ .be-container { width: min(100% - 1.6rem, var(--be-container)); } .be-header-inner { flex-wrap: nowrap; gap: 0.4rem; } .be-branding { min-width: 0; } .be-branding-link { gap: 0.45rem; } .be-brand-sub { display: none; } .be-brand-name { font-size: 0.92rem; white-space: nowrap; } .be-logo-wrap .custom-logo, .be-logo-wrap img { height: 32px; max-width: 36px; } .be-logo-fallback { width: 32px; height: 32px; } .be-header-actions { gap: 0.3rem; } .be-search-toggle, .be-theme-toggle { width: 34px; height: 34px; } .be-nav-toggle { width: 38px; height: 38px; padding: 9px; flex-shrink: 0; } .be-primary-nav { margin: 0 -0.8rem; padding: 0.5rem 0.8rem 1rem; } } /* ───────────────────────────────────────────── 15. Parent-theme override guard Newsmatic ships aggressive link-color rules that beat class selectors on elements; pin the critical colors. ───────────────────────────────────────────── */ .be-portal-theme a.be-btn-primary, .be-portal-theme a.be-btn-primary:hover, .be-portal-theme a.be-btn-emergency, .be-portal-theme a.be-btn-emergency:hover, .be-portal-theme a.be-btn-dark, .be-portal-theme a.be-btn-dark:hover { color: #fff !important; } html[data-theme="dark"] .be-portal-theme a.be-btn-primary, html[data-theme="dark"] .be-portal-theme a.be-btn-primary:hover { color: #06281E !important; } .be-portal-theme a.be-btn-secondary { color: var(--be-text-soft) !important; } .be-portal-theme a.be-btn-secondary:hover { color: var(--be-primary) !important; } .be-portal-theme a.be-btn-call { color: var(--be-primary-strong) !important; } .be-portal-theme a.be-btn-call:hover { color: #fff !important; } html[data-theme="dark"] .be-portal-theme a.be-btn-call:hover { color: #06281E !important; } .be-portal-theme a.be-btn-whatsapp { color: #15803D !important; } html[data-theme="dark"] .be-portal-theme a.be-btn-whatsapp { color: #4ADE80 !important; } .be-portal-theme a.be-btn-whatsapp:hover { color: #fff !important; } .be-portal-theme a.be-btn-outline-light, .be-portal-theme a.be-btn-outline-light:hover { color: var(--be-hero-text) !important; } .be-portal-theme a.be-btn-text { color: var(--be-primary) !important; } .be-portal-theme .be-action-card, .be-portal-theme .be-action-card:hover, .be-portal-theme .be-action-card .be-action-title { color: var(--be-hero-text) !important; } .be-portal-theme .be-nav-link { color: var(--be-text-soft) !important; } .be-portal-theme .be-nav-link:hover, .be-portal-theme .be-nav-link.is-active { color: var(--be-primary-strong) !important; } .be-portal-theme .be-nav-sublink { color: var(--be-text-soft) !important; } .be-portal-theme .be-nav-sublink:hover { color: var(--be-primary-strong) !important; } .be-portal-theme .be-footer-col a { color: rgba(242, 247, 245, 0.72) !important; } .be-portal-theme .be-footer-col a:hover { color: var(--be-accent-bright) !important; } .be-portal-theme a.be-sticky-emergency { color: #fff !important; } .be-portal-theme a.be-section-link { color: var(--be-primary) !important; } .be-portal-theme a.be-card-link { color: var(--be-primary) !important; } .be-portal-theme .be-properties-promo a.be-btn-secondary, .be-portal-theme .be-properties-promo a.be-btn-secondary:hover { color: #fff !important; } .be-portal-theme .be-properties-promo-aside a.be-section-link { color: var(--be-accent-bright) !important; } .be-portal-theme a.be-listing-main .be-listing-title { color: var(--be-text); } .be-portal-theme a.be-badge { color: var(--be-primary-strong) !important; } .be-portal-theme a.be-chip { color: var(--be-text-soft) !important; } .be-portal-theme a.be-chip.is-active { color: #fff !important; } /* ───────────────────────────────────────────── 16. Motion preferences & print ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .be-reveal { opacity: 1; transform: none; } } @media print { .be-header, .be-footer, .be-sticky-emergency, .be-back-top, .be-hero-actions, .be-quick-actions, .be-palette { display: none !important; } body.be-portal-theme { background: #fff; color: #000; } }