/* Last Edited: Tue, Aug 26th @ 23:59 */ /* Last Edited: [Updated with Unified Palette] */ :root { --primary-gold: #c5a059; --dark-charcoal: #1a1a1a; --soft-white: #f9f9f9; /*--transition: all 0.3s ease;*/ /* ═══════════════════════════════════════════════════════════════ UNIFIED COLOR PALETTE (--color-01 through --color-40) Generated dynamically from brand color with harmonious saturation Replaces both --shade-XX and --color-XX with single palette ═══════════════════════════════════════════════════════════════ */ /* These will be dynamically generated by JavaScript */ /* Default values shown here are for initial load only */ /* Based on brand color #5855e5 */ --color-01 : #000000; --color-02 : #060607; --color-03 : #0b0a10; --color-04 : #0f0e19; --color-05 : #121223; --color-06 : #16162c; --color-07 : #1a1a35; --color-08 : #1e1d3e; --color-09 : #212148; --color-10 : #242353; --color-11 : #25245f; --color-12 : #26256b; --color-13 : #272577; --color-14 : #272585; --color-15 : #272592; --color-16 : #2624a0; --color-17 : #2522af; --color-18 : #2320be; --color-19 : #211ece; --color-20 : #1e1bde; --color-21 : #221fe7; --color-22 : #2e2be8; --color-23 : #3a37e9; --color-24 : #4542ea; --color-25 : #5553e7; --color-26 : #6765e2; --color-27 : #7876de; --color-28 : #8887da; --color-29 : #9695d9; --color-30 : #a3a2d9; --color-31 : #b0afd9; --color-32 : #bbbbdb; --color-33 : #c6c6dd; --color-34 : #d0d0e0; --color-35 : #d9d9e4; --color-36 : #e2e2e8; --color-37 : #eaeaed; --color-38 : #f1f1f3; --color-39 : #f8f8f9; --color-40 : #ffffff; /* ═══════════════════════════════════════════════════════════════ SEMANTIC COLOR MAPPINGS ═══════════════════════════════════════════════════════════════ */ --white : #FFF; --black : #000; --brand : var(--color-20); --brand-hover : var(--color-19); --brand-active : var(--color-18); --brand-light : color-mix(in srgb, var(--brand) 40%, white); --brand-light-hover : color-mix(in srgb, var(--brand) 50%, white); --brand-light-active : color-mix(in srgb, var(--brand) 60%, white); /*--cta : linear-gradient(45deg, #3454d1, #d65bee);*/ --cta : linear-gradient(45deg, var(--brand-light) 0%, var(--brand) 100%); --cta-hover : linear-gradient(45deg, var(--brand-light-hover) 0%, var(--brand-hover) 100%); --cta-active : linear-gradient(45deg, var(--brand-light-active) 0%, var(--brand-active) 100%); --header-bg : var(--color-40); --header-text : color-mix(in srgb, var(--brand) 30%, #888888); /*var(--color-27); */ --body-bg : color-mix(in srgb, var(--brand) 01%, white); /* var(--color-39); */ --body-text : var(--header-text); --border-color : color-mix(in srgb, var(--brand) 10%, white); --box-border : color-mix(in srgb, var(--brand) 05%, white); /*--box-border : var(--color-37);*/ --inputs : var(--color-35); --text : color-mix(in srgb, var(--brand) 30%, #888888); --text-active : color-mix(in srgb, var(--brand) 20%, #888888); --text-active : color-mix(in srgb, var(--brand) 10%, #888888); --button : var(--box-border); --button-hover : color-mix(in srgb, var(--brand) 10%, white); /* var(--color-35); */ --button-active : color-mix(in srgb, var(--brand) 12%, white); /* var(--color-33); */ --cluster-color : var(--brand); --bb-primary-button-background-regular : var(--brand); /* Body text - dark gray with subtle brand tint */ --text-body: color-mix(in srgb, var(--color-20) 8%, #333); /* Headings - very dark gray/near-black with brand tint */ --text-heading: color-mix(in srgb, var(--color-20) 5%, #111); /* Approach 1: Mix brand into standard text grays */ --text-body: color-mix(in srgb, var(--color-20) 12%, #444); --text-heading: color-mix(in srgb, var(--color-20) 15%, #222); /* Approach 2: Darken the brand heavily */ --text-body: color-mix(in srgb, var(--color-20) 25%, black); --text-heading: color-mix(in srgb, var(--color-20) 35%, black); /* Approach 3: Mix brand with neutral gray */ --text-body: color-mix(in srgb, var(--color-20) 10%, #555); --text-heading: color-mix(in srgb, var(--color-20) 12%, #2a2a2a); /* ═══════════════════════════════════════════════════════════════ STATUS COLORS (Independent) ═══════════════════════════════════════════════════════════════ */ --success: #2DD6A5; --success-light: color-mix(in srgb, var(--success) 30%, white); --warning: #FFC107; --warning-light: color-mix(in srgb, var(--warning) 30%, white); --error: #FF7F7F; --error-light: color-mix(in srgb, var(--error) 30%, white); /* ═══════════════════════════════════════════════════════════════ PARALLAX LAYERS (Light to Dark) ═══════════════════════════════════════════════════════════════ */ --layer-01: color-mix(in srgb, var(--brand) 4.00%, #FFF); /* Base Start */ --layer-02: color-mix(in srgb, var(--brand) 5.50%, #FFF); /* +1.5% */ --layer-03: color-mix(in srgb, var(--brand) 7.93%, #FFF); /* +2.43% */ --layer-04: color-mix(in srgb, var(--brand) 11.86%, #FFF); /* +3.93% */ --layer-05: color-mix(in srgb, var(--brand) 18.21%, #FFF); /* +6.35% */ --layer-06: color-mix(in srgb, var(--brand) 28.48%, #FFF); /* +10.27% */ --layer-07: color-mix(in srgb, var(--brand) 45.09%, #FFF); /* +16.61% */ --layer-08: color-mix(in srgb, var(--brand) 71.97%, #FFF); /* +26.88% */ --layer-09: color-mix(in srgb, var(--brand) 94.00%, #FFF); /* Tapered to stay under 100 */ --layer-10: color-mix(in srgb, var(--brand) 100%, #FFF); /* Full Brand */ /*--layer-01 : color-mix(in srgb, var(--brand) 05%, #FFF); --layer-02 : color-mix(in srgb, var(--brand) 08%, #FFF); --layer-03 : color-mix(in srgb, var(--brand) 12%, #FFF); --layer-04 : color-mix(in srgb, var(--brand) 16%, #FFF); --layer-05 : color-mix(in srgb, var(--brand) 20%, #FFF); --layer-06 : color-mix(in srgb, var(--brand) 24%, #FFF); --layer-07 : color-mix(in srgb, var(--brand) 28%, #FFF); --layer-08 : color-mix(in srgb, var(--brand) 32%, #FFF); --layer-09 : color-mix(in srgb, var(--brand) 36%, #FFF); --layer-010 : color-mix(in srgb, var(--brand) 40%, #FFF);*/ /* Footer */ --footer-text : var(--header-bg); --footer-bg : var(--layer-07); --subfooter-text : var(--footer-text); --subfooter-bg : var(--footer-bg); /* ═══════════════════════════════════════════════════════════════ THIRD-PARTY BRANDS (Independent) ═══════════════════════════════════════════════════════════════ */ --keller-williams : #B40101; --attom-brand : #E9493B; --attom-brand-accent : #AF222E; --batchleads-brand : #25376B; --batchleads-brand-accent : #3A8FBA; --eppraisal-brand : #F7BE3C; --eppraisal-brand-accent : #127CBF; --homejunction-brand : #37A0D0; --homejunction-brand-accent : #2A95D0; --zillow-brand : #89BB4B; --zillow-brand-accent : #136FFB; /* Theme Options */ --heart : var(--header-bg); --coffee : var(--header-bg); /* ═══════════════════════════════════════════════════════════════ SIZES AND DIMENSIONS ═══════════════════════════════════════════════════════════════ */ --gap : 30px; --block-margin : 30px; --border-radius : 8px; --input-size : 60px; --badge-size : calc( var(--input-size) / 2 ); --badge-radius : calc( var(--badge-size) / 2 ); --small-badge-size : calc( var(--badge-size) / 2 ); --small-badge-radius : calc( var(--small-badge-size) / 2 ); /* ═══════════════════════════════════════════════════════════════ GENERAL STYLES ═══════════════════════════════════════════════════════════════ */ --transition : all 300ms ease-in-out; /*--box-shadow : 0 2.8px 2.2px color-mix(in srgb, var(--color-25) 2%, transparent), 0 6.7px 5.3px color-mix(in srgb, var(--color-25) 3%, transparent), 0 12.5px 10px color-mix(in srgb, var(--color-25) 4%, transparent), 0 22.3px 17.9px color-mix(in srgb, var(--color-25) 5%, transparent), 0 41.8px 33.4px color-mix(in srgb, var(--color-25) 6%, transparent), 0 100px 80px color-mix(in srgb, var(--color-25) 7%, transparent);*/ /* SUBTLE BASE: Tightened offsets and lower opacity (1% to 4%) */ --box-shadow: 0 2px 5px color-mix(in srgb, var(--color-25) 0.5%, transparent), 0 5px 12px color-mix(in srgb, var(--color-25) 1%, transparent), 0 10px 22px color-mix(in srgb, var(--color-25) 1.5%, transparent), 0 18px 40px color-mix(in srgb, var(--color-25) 2%, transparent), 0 32px 70px color-mix(in srgb, var(--color-25) 2.5%, transparent), 0 60px 120px color-mix(in srgb, var(--color-25) 3%, transparent); /*0 1.4px 1.1px color-mix(in srgb, var(--color-25) 1%, transparent), 0 3.3px 2.6px color-mix(in srgb, var(--color-25) 2%, transparent), 0 6.2px 5px color-mix(in srgb, var(--color-25) 2.5%, transparent), 0 11.1px 8.9px color-mix(in srgb, var(--color-25) 3%, transparent), 0 20.9px 16.7px color-mix(in srgb, var(--color-25) 3.5%, transparent), 0 50px 40px color-mix(in srgb, var(--color-25) 4%, transparent);*/ /* HOVER: Slightly more vertical lift and higher opacity (2% to 8%) */ --box-shadow-hover: 0 2.8px 2.2px color-mix(in srgb, var(--color-25) 2%, transparent), 0 6.7px 5.3px color-mix(in srgb, var(--color-25) 3.5%, transparent), 0 12.5px 10px color-mix(in srgb, var(--color-25) 5%, transparent), 0 22.3px 17.9px color-mix(in srgb, var(--color-25) 6%, transparent), 0 41.8px 33.4px color-mix(in srgb, var(--color-25) 7%, transparent), 0 100px 80px color-mix(in srgb, var(--color-25) 8%, transparent); --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --box-shadow-up : var(--box-shadow); --box-shadow-down : var(--box-shadow); --box-shadow-left : var(--box-shadow); --box-shadow-inset : var(--box-shadow); --box-shadow-inset-dark : var(--box-shadow); --box-shadow-none : none !important; --font-family : 'Ubuntu', Ariel, Verdana, system-ui, sans-serif; --fa-font : 'Font Awesome 7 Free'; /* UI States */ --scroll-watch-color : var(--brand); --fog : saturate(180%) blur(20px) !important; --glass : saturate(180%) blur(20px) !important; --glass-text : var(--header-text); --stripes : var(--color-20); --card-active : var(--brand-light); --loading : var(--header-text); --loading-light : var(--box-border); --info : blue; --info-light : lightblue; --carousel-chevron : var(--white); --input-bg : var(--white); /* Footer Browse Tabs */ --footer-browse-tabs : rgba(0, 0, 0, .05) !important; --footer-browse-tabs-hover : rgba(0, 0, 0, .1) !important; --footer-browse-tabs-active : rgba(0, 0, 0, .15) !important; } html { font-family: var(--font-family); & * { font-family: var(--font-family); } & body { & .offcanvas-header h1 > span { background: var(--cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } & form * { font-weight: bold; } & .btn-group:has(input:nth-of-type(2):last-of-type) input, & ul.radchecks li input { & + label { /*background: var(--button-bg) !important; &:hover { background: var(--button-bg-hover) !important; }*/ &.active, &:active { background: var(--cta) !important; } } &:checked + label, &:checked + label:hover { background: var(--cta) !important; } } & .btn-group input { /* & + label { background: var(--button-bg) !important; &:hover { background: var(--button-bg-hover) !important; } &.active, &:active { background: var(--cta) !important; } }*/ &:checked + label, &:checked + label:hover { background: var(--cta) !important; } } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE (Default) ═══════════════════════════════════════════════════════════════ */ &[data-theme-mode="light"] { /* Already defined in :root, no overrides needed */ } /* ═══════════════════════════════════════════════════════════════ DARK MODE Uses darker end of unified palette (color-05 through color-15) Maintains same hue relationship as light mode ═══════════════════════════════════════════════════════════════ */ &[data-theme-mode="dark"] { --cta : linear-gradient(45deg, var(--color-22) 0%, var(--color-16) 100%); --cta-hover : linear-gradient(45deg, var(--color-20) 0%, var(--color-14) 100%); --cta-active : linear-gradient(45deg, var(--color-18) 0%, var(--color-12) 100%); --success-light : color-mix(in srgb, var(--success) 60%, black); --warning-light : color-mix(in srgb, var(--warning) 60%, black); --error-light : color-mix(in srgb, var(--error) 60%, black); --box-border : var(--color-06); --button : var(--box-border); --button-hover : var(--color-07); --button-active : var(--color-10); --text : var(--header-text); --text-hover : var(--color-31); --text-active : var(--white); --header-bg : var(--color-02); /*06*/ --header-text : var(--color-32); --body-text : var(--header-text); --body-bg : var(--color-02); --layer-01 : var(--body-bg); --layer-02 : var(--color-03); --layer-03 : var(--color-04); --layer-04 : var(--color-05); --layer-05 : var(--color-06); --layer-06 : var(--color-07); --footer-bg : var(--color-08); --footer-text : red; --subfooter-bg : var(--footer-bg); --subfooter-text : var(--footer-text); --scroll-watch-color : var(--header-text); --glass : rgba(0, 0, 0, .3) !important; --glass-text : var(--header-text); --stripes : var(--box-border); --card-active : var(--header-text); --loading : var(--header-text); --loading-light : var(--box-border); --info : var(--header-text); --info-light : var(--box-border); --carousel-chevron : var(--color-32); --input-bg : var(--box-border); /* Footer Browse Tabs */ --footer-browse-tabs : rgba(255, 255, 255, .05) !important; --footer-browse-tabs-hover : rgba(255, 255, 255, .1) !important; --footer-browse-tabs-active : rgba(255, 255, 255, .15) !important; --heart : #FC00B2; --coffee : #B07736; & * { box-shadow: none !important; scrollbar-color: var(--box-border) var(--color-07); } #map { & .full-screen-loader { background-color: var(--shade-05) !important; } & .circle { background-color: var(--shade-03); & .number { color: var(--shade-13); } } } & textarea { border: 1px solid var(--box-border); } & .hero:not(:has(.tab-content))::after, & .hero .tab-content::after, & .card-header-img::after, & div#video-layer-after { opacity: .6; } .submit { & output, & .btn-text { & i { } } & .progress-overlay { &.striped { background-image: linear-gradient( 45deg, rgba(0, 0, 0, .4) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .4) 75%, transparent 75%, transparent ); } } } &.home-page, &.landing-page { &:not(.logged-in), &:not(.is-pro-member) { & #primary-nav { & .navbar { & > .container-fluid { & li { & a.nav-link { color: var(--header-text); background-color: rgba(255, 255, 255, .1); & * { color: var(--header-text); } &:hover { background-color: rgba(255, 255, 255, .4); } &.active, &:active:not(:hover) { color: var(--header-text); background-color: var(--white); & * { color: var(--header-text); } } } } } } } } } & #primary { & section { & i.fa-star.fa-duotone:not(.warning)::after { color: var(--color-12); } & .donut-walkscore, & .donut-bikescore, & .donut-transitscore { stroke: var(--color-13); } & .donut-hole { fill: var(--color-11); } } } } /* ▗▄▄▖▗▄▄▄▖▗▄▄▄▄▖▗▄▄▄▖ ▐▌ █ ▗▞▘▐▌ ▝▀▚▖ █ ▗▞▘ ▐▛▀▀▘ ▗▄▄▞▘▗▄█▄▖▐▙▄▄▄▖▐▙▄▄▖ */ &[data-theme-size="small"] { --font-size : 12px; --input-size : 48px; } &[data-theme-size="medium"] { --font-size : 16px; /*--input-size : 60px;*/ } &[data-theme-size="large"] { --font-size : 22px; /*--input-size : 72px;*/ } /* ▗▄▄▖▗▖ ▗▖ ▗▄▖ ▗▄▄▖ ▗▄▄▄▖ ▐▌ ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌ ▝▀▚▖▐▛▀▜▌▐▛▀▜▌▐▛▀▘ ▐▛▀▀▘ ▗▄▄▞▘▐▌ ▐▌▐▌ ▐▌▐▌ ▐▙▄▄▖ */ &[data-theme-shape="square"] { --border-radius: 0px; --small-badge-radius: var(--border-radius); --badge-radius: var(--border-radius); & .progress, & .progress-bar { border-radius: var(--border-radius); } } &[data-theme-shape="rounded"] { /*--border-radius: var(--border-radius); --badge-radius: var(--badge-radius); --small-badge-radius: var(--small-badge-radius);*/ } &[data-theme-shape="round"] { --border-radius: calc(var(--input-size) / 2); --badge-radius: calc(var(--badge-size) / 2); --small-badge-radius: calc(var(--small-badge-size) / 2); & .input-group-text { border-radius: calc(var(--input-size) / 2); padding: 0px 20px 0px 25px; } & .input-group .form-floating select { padding-right: 38px; } & .fixed-tools { border-radius: calc(var(--border-radius) * 2); } & .slider-controls { & li:first-of-type, & li:last-of-type, & li.img img { border-radius: calc(var(--input-size) / 2); } } } /* ▗▄▄▄▖ ▗▄▖ ▗▖ ▗▖▗▄▄▄▖ ▐▌ ▐▌ ▐▌▐▛▚▖▐▌ █ ▐▛▀▀▘▐▌ ▐▌▐▌ ▝▜▌ █ ▐▌ ▝▚▄▞▘▐▌ ▐▌ █ */ &[data-theme-font="Inter"] { --font-family: 'Inter', sans-serif; } &[data-theme-font="Roboto"] { --font-family: 'Roboto', sans-serif; } &[data-theme-font="Open Sans"] { --font-family: 'Open Sans', sans-serif; } &[data-theme-font="Lato"] { --font-family: 'Lato', sans-serif; } &[data-theme-font="Montserrat"] { --font-family: 'Montserrat', sans-serif; } &[data-theme-font="Source Sans Pro"] { --font-family: 'Source Sans Pro', sans-serif; } &[data-theme-font="Oswald"] { --font-family: 'Oswald', sans-serif; } &[data-theme-font="Raleway"] { --font-family: 'Raleway', sans-serif; } &[data-theme-font="Nunito"] { --font-family: 'Nunito', sans-serif; } &[data-theme-font="Poppins"] { --font-family: 'Poppins', sans-serif; } &[data-theme-font="Playfair Display"] { --font-family: 'Playfair Display', serif; } &[data-theme-font="Merriweather"] { --font-family: 'Merriweather', serif; } &[data-theme-font="PT Sans"] { --font-family: 'PT Sans', sans-serif; } &[data-theme-font="Ubuntu"] { --font-family: 'Ubuntu', sans-serif; } &[data-theme-font="Noto Sans"] { --font-family: 'Noto Sans', sans-serif; } &[data-theme-font="Roboto Condensed"] { --font-family: 'Roboto Condensed', sans-serif; } &[data-theme-font="Fira Sans"] { --font-family: 'Fira Sans', sans-serif; } &[data-theme-font="Work Sans"] { --font-family: 'Work Sans', sans-serif; } &[data-theme-font="Libre Franklin"] { --font-family: 'Libre Franklin', sans-serif; } &[data-theme-font="Crimson Text"] { --font-family: 'Crimson Text', serif; } /* ▗▖ ▗▖▗▄▄▄▖▗▄▄▖ ▗▄▖ ▗▄▖ ▗▖ ▗▖▗▄▄▄ ▗▄▄▖▗▄▄▄▖▗▄▄▄ ▗▄▄▄▖▗▄▄▖ ▗▄▖ ▗▄▄▖ ▐▌ ▐▌▐▌ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌▐▛▚▖▐▌▐▌ █ ▐▌ █ ▐▌ █ ▐▌ ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌ ▐▛▀▜▌▐▛▀▀▘▐▛▀▚▖▐▌ ▐▌ ▐▛▀▜▌▐▌ ▝▜▌▐▌ █ ▝▀▚▖ █ ▐▌ █ ▐▛▀▀▘▐▛▀▚▖▐▛▀▜▌▐▛▀▚▖ ▐▌ ▐▌▐▙▄▄▖▐▌ ▐▌▝▚▄▞▘ ▐▌ ▐▌▐▌ ▐▌▐▙▄▄▀ ▗▄▄▞▘▗▄█▄▖▐▙▄▄▀ ▐▙▄▄▖▐▙▄▞▘▐▌ ▐▌▐▌ ▐▌ */ &[data-theme-sidebar-pos="right"] { & #sidebar-controls { margin-left: auto; } } &[data-theme-sidebar-pos="left"] { & section p.source { margin-right: auto; } } &[data-theme-sidebar-width="collapsed"] { --sidebar-width: 25%; } &[data-theme-sidebar-width="expanded"] { --sidebar-width: 33.3333%; } &[data-theme-sidebar="false"] { & #layout-row { grid-template-columns: 1fr; margin-top: 0; & #hero { grid-row: 1; grid-column: 1; } & #primary { grid-row: 2; grid-column: 1 / -1 !important; } & .sidebar { display: none !important; } } } &[data-theme-hero="theatre"] { & #layout-row { grid-template-columns: 1fr var(--sidebar-width, 33.3333%); & #hero { grid-row: 1; grid-column: 1 / -1; } & #primary { grid-row: 2; grid-column: 1; } & .sidebar { grid-row: 2; grid-column: 2; } } } &[data-theme-hero="theatre"][data-theme-sidebar-pos="right"] { & #layout-row { grid-template-columns: 1fr var(--sidebar-width, 33.3333%); & #hero { grid-row: 1; grid-column: 1 / -1; } & #primary { grid-row: 2; grid-column: 1; } & .sidebar { grid-row: 2; grid-column: 2; } } } &[data-theme-hero="theatre"][data-theme-sidebar-pos="left"] { & #layout-row { grid-template-columns: var(--sidebar-width, 33.3333%) 1fr; & #hero { grid-row: 1; grid-column: 1 / -1; } & #primary { grid-row: 2; grid-column: 2; } & .sidebar { grid-row: 2; grid-column: 1; } } } &[data-theme-hero="standard"] { & #layout-row { /*margin-top: 70px;*/ grid-template-columns: var(--sidebar-width, 33.3333%) 1fr; } } &[data-theme-hero="standard"][data-theme-sidebar-pos="right"] { & #layout-row { grid-template-columns: 1fr var(--sidebar-width, 33.3333%); & #hero { grid-row: 1; grid-column: 1; } & #primary { grid-row: 2; grid-column: 1; } & .sidebar { grid-row: 1 / 3; grid-column: 2; } } } &[data-theme-hero="standard"][data-theme-sidebar-pos="left"] { #layout-row { & #hero { grid-row: 1; grid-column: 2; } & #primary { grid-row: 2; grid-column: 2; } & .sidebar { grid-row: 1 / 3; grid-column: 1; } } } /* ▗▖ ▗▖ ▗▄▖ ▗▄▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖▗▖ ▗▖ ▐▛▚▞▜▌▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ ▐▌ ▐▌ ▐▌▐▛▀▜▌▐▛▀▘ ▐▌ ▐▌ █ ▐▛▀▀▘▐▌ ▐▌ ▐▌ ▐▌▐▌ ▐▌▐▌ ▝▚▞▘ ▗▄█▄▖▐▙▄▄▖▐▙█▟▌ */ /*[data-theme-hero="theatre"][data-theme-sidebar="false"]*/ &[data-theme-layout-method="mapView"] { overflow: hidden !important; height: 100vh; padding: 0 !important; margin: 0 !important; background-color: var(--header-bg); & #flex { width: 100vw !important; max-width: unset !important; padding: 0 !important; margin: 0 !important; background-color: var(--header-bg); & #layout-row { display: grid !important; grid-template-columns: 75% 25% !important; grid-template-rows: 100vh !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; width: 100vw !important; max-width: 100vw !important; min-height: 100vh; background-color: var(--header-bg); position: fixed; right: 0; & #hero { grid-row: 1 !important; grid-column: 1 !important; position: sticky; top: 0; height: calc( 100vh - 70px ); width: 100%; padding: 15px !important; margin: 0 !important; overflow: hidden; /*border-radius: 0;*/ & .hero { position: relative; height: 100%; width: 100%; padding: 0; padding-top: 20px; margin: 0; /*border-radius: 0;*/ & #map { height: 100% !important; width: 100% !important; padding: 0; margin: 0; /*border-radius: 0;*/ & canvas { height: 100% !important; width: 100% !important; /*border-radius: 0;*/ } } & #secondary-nav { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 1000; /*border-radius: 0;*/ } } } & #primary { grid-row: 1 !important; grid-column: 2 !important; height: 100vh; overflow-y: auto; overflow-x: hidden; padding: 15px 0px 85px 0px; /*padding-top: 20px;*/ margin: 0; background-color: var(--header-bg); & #query-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; padding: 0px 0px 0px 0px !important; margin: 0; background-color: var(--header-bg); & .card { display: flex; flex-direction: column; margin: 0; border-radius: var(--border-radius); & .card-header { width: 100%; aspect-ratio: 16/9; border-radius: var(--border-radius) !important; & .card-header-img { } } /* Hide card body like thumbnail view */ & .card-body { display: none; } } } } & #sidebar, & .pagination-nav { display: none !important; } } } } } } /* ▗▖ ▗▄▄▄▖ ▗▄▄▖▗▄▄▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖▗▖ ▗▖ ▐▌ █ ▐▌ █ ▐▌ ▐▌ █ ▐▌ ▐▌ ▐▌ ▐▌ █ ▝▀▚▖ █ ▐▌ ▐▌ █ ▐▛▀▀▘▐▌ ▐▌ ▐▙▄▄▖▗▄█▄▖▗▄▄▞▘ █ ▝▚▞▘ ▗▄█▄▖▐▙▄▄▖▐▙█▟▌ */ [data-theme-layout-method="listView"] { & #map .card { width: 500px; } & #query-results-grid { grid-template-columns: 1fr; & .card { flex-direction: row; &:not(.activity) .avatar-wrapper { left: -45px; } &:not(.review-card) { flex-direction: row; min-height: 200px; } &:not(.home-page) .card .card-header { border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: var(--border-radius); } & .card-header { flex: 2; } & .card-body { flex: 3; & .card-avatar { position: absolute; top: calc(50% - calc(var(--input-size) / 2)); left: unset; } & .card-info { width: 100%; text-align: left; display: flex; flex-direction: column; justify-content: space-between; } } } } } /* ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▄ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖▗▖ ▗▖ ▐▌ ▐▌ ▐▌ █ ▐▌ █ ▐▌ ▐▌ █ ▐▌ ▐▌ ▐▌ ▐▌▝▜▌▐▛▀▚▖ █ ▐▌ █ ▐▌ ▐▌ █ ▐▛▀▀▘▐▌ ▐▌ ▝▚▄▞▘▐▌ ▐▌▗▄█▄▖▐▙▄▄▀ ▝▚▞▘ ▗▄█▄▖▐▙▄▄▖▐▙█▟▌ */ [data-theme-layout-method="gridView"] { & #query-results-grid { grid-template-columns: repeat(3, 1fr); & .card { flex-direction: column; & .card-body { /*min-height: 250px; */ & .avatar-wrapper { top: -44px; } } /*& .card-header { width: 100%; }*/ } } } /* ▗▄▄▄▖▗▖ ▗▖▗▖ ▗▖▗▖ ▗▖▗▄▄▖ ▗▖ ▗▖ ▗▄▖ ▗▄▄▄▖▗▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖▗▖ ▗▖ █ ▐▌ ▐▌▐▌ ▐▌▐▛▚▞▜▌▐▌ ▐▌▐▛▚▖▐▌▐▌ ▐▌ █ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ ▐▌ █ ▐▛▀▜▌▐▌ ▐▌▐▌ ▐▌▐▛▀▚▖▐▌ ▝▜▌▐▛▀▜▌ █ ▐▌ ▐▌ ▐▌ █ ▐▛▀▀▘▐▌ ▐▌ █ ▐▌ ▐▌▝▚▄▞▘▐▌ ▐▌▐▙▄▞▘▐▌ ▐▌▐▌ ▐▌▗▄█▄▖▐▙▄▄▖ ▝▚▞▘ ▗▄█▄▖▐▙▄▄▖▐▙█▟▌ */ [data-theme-layout-method="thumbnailView"] { & #map .card { width: 300px; } & #query-results-grid { grid-template-columns: repeat(4, 1fr); & .card { flex-direction: column; &.active { padding: 10px; background-color: var(--box-color) !important; border-color: var(--box-color) !important; } /*& .card-header { width: 100%; }*/ & .card-body { display:none; } } } } }