@font-face {
  font-family: "Belanosima-Regular";
  src: url("/wp-content/uploads/fonts/Belanosima-Regular.ttf")
    format("opentype");
  font-style: normal;
}

@font-face {
  font-family: "Belanosima-SemiBold";
  src: url("/wp-content/uploads/fonts/Belanosima-SemiBold.ttf")
    format("opentype");
  font-style: normal;
}

@font-face {
  font-family: "Belanosima-Bold";
  src: url("/wp-content/uploads/fonts/Belanosima-Bold.ttf") format("opentype");
  font-style: normal;
}

:root {
  /* Fonts */
  --font-base: Belanosima-Regular, sans-serif;
  --font-base-weight: 300;
  --font-accent: Belanosima-SemiBold, sans-serif;
  --font-accent-weight: 600;

  --line-height: 1.2;
  --font-size: 16px;

  /* Border Radius */
  --button-primary-border-radius: 10em;
  --button-secondary-border-radius: 10em;
  --button-cta-border-radius: 10em;
  --button-control-border-radius: 50%;
  --container-border-radius: 5px;

  /* Transition */
  --button-hover-transition:
    background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;

  /* Paddings */
  --container-padding: 10px;
  --form-padding: 2em;

  /* Colors */
  /* Branding & Constants */
  --color-brand-primary: #0C1A23;
  --color-brand-primary-20: #0C1A23;
  --color-brand-secondary: #ED1A2D;
  --color-brand-accent: var(--color-white);
  --color-black: #000000;
  --color-black-transparent: #00000080;
  --color-white: #ffffff;
  --color-white-transparent: #ffffff80;
  --color-gray-dark: #444;
  --color-gray-dark-dark: #222;
  --color-gray-light: silver;
  --color-red: #cc0000;
  --color-green: #fb2024;

  /* Body */
  --body-bg: var(--color-black);
  --body-text: var(--color-white);
  --body-hr: var(--color-white-transparent);

  /* Headers */
  --heading-h1: var(--body-text);
  --heading-h2: var(--body-text);
  --heading-h3: var(--body-text);
  --heading-h4: var(--body-text);

  /* Blinds */
  --blinds-bg: var(--body-bg);
  --blinds-opacity: 1;

  /* Left Column Gradient */
  --left-column-gradient-start: #000000aa;
  --left-column-gradient-end: #00000000;

  /* Links */
  --link-normal: var(--body-text);
  --link-hover: var(--color-brand-secondary);

  /* Switcher */
  --switcher-bg: var(--color-black);
  --switcher-shadow: 0 0 0 2px #ffffff40;
  --switcher-shadow-hover: 0 0 0 4px var(--color-white-transparent);
  --switcher-item-text: var(--body-text);
  --switcher-item--active-bg: var(--color-brand-secondary);
  --switcher-item--active-text: var(--switcher-item-text);

  /* Buttons Primary */
  --button-hover-shadow: 0 0 0 3px var(--color-white-transparent);
  --button-primary-border: var(--color-white-transparent);
  --button-primary-bg: var(--color-brand-secondary);
  --button-primary-text: var(--color-white);
  --button-primary-hover-bg: var(--color-brand-secondary);
  --button-primary-hover-text: var(--color-white);

  /* Buttons Secondary */
  --button-secondary-bg: var(--color-brand-secondary);
  --button-secondary-border: var(--button-primary-border);
  --button-secondary-text: var(--color-white);
  --button-secondary-hover-bg: var(--color-brand-secondary);
  --button-secondary-hover-text: var(--color-white);

  /* Buttons CTA */
  --button-cta-bg: var(--button-primary-bg);
  --button-cta-border: var(--button-primary-border);
  --button-cta-text: var(--button-primary-text);
  --button-cta-hover-bg: var(--button-primary-hover-bg);
  --button-cta-hover-text: var(--button-primary-hover-text);

  /* Buttons Control */
  --button-control-border: var(--button-primary-border);
  --button-control-bg: var(--color-brand-primary);
  --button-control-text: var(--button-primary-text);
  --button-control-hover-bg: var(--button-primary-hover-bg);
  --button-control-hover-text: var(--button-primary-hover-text);

  /* Popup & Gallery */
  --popup-bg: var(--color-black-transparent);
  --popup-text: var(--color-white);
  --popup-backdrop: var(--color-black-transparent);
  --popup-border: #ffffff20;
  --popup-backdrop-filter: blur(30px);

  /* Floorplan */
  --floorplan-bg: #000000;
  --floorplan-text: #888;
  --floorplan-text-active: var(--color-white);
  --floorplan-values: var(--color-white);
  --floorplan-values-hover-bg: #ffffff20;
  --floorplan-values-border: var(--color-gray-dark);

  --floorplan-overlay-bg: var(--popup-bg);
  --floorplan-overlay-backdrop-filter: var(--popup-backdrop-filter);

  /* Menu */
  --menu-bg: var(--color-brand-primary);
  --menu-text: var(--color-white);
  --menu-item-active-bg: var(--color-brand-secondary);
  --menu-item-active-text: var(--menu-text);
  --menu-item-hover-bg: var(--color-brand-secondary);
  --menu-item-hover-text: var(--color-white);
  --menu-header-bg: var(--color-gray-dark-dark);
  --menu-footer-bg: var(--menu-header-bg);
  --menu-footer-text: var(--color-white);
  --menu-footer-links: var(--link-normal);
  --menu-footer-links-hover: var(--link-hover);

  /* Slide Navigator */
  --slide-navigator-item-bg: #ffffff20;
  --slide-navigator-item-outline: var(--color-white-transparent);
  --slide-navigator-item-text: var(--color-white);
  --slide-navigator-item-active: var(--color-brand-accent);
  --slide-navigator-item-hover: var(--color-brand-primary);
  --slide-navigator-item-visited: var(--color-gray-dark-dark);

  /* Header Project Title */
  --header-project-title-text: var(--body-text);
  --header-slide-number-text: var(--color-brand-secondary);

  /* Tooltips */
  --tooltip-bg: var(--color-white);
  --tooltip-text: var(--color-black);

  /* Property Details */
  --property-details-bg: var(--color-black-transparent);
  --property-details-bg: #00000020;
  --property-details-text: var(--body-text);
  --property-details-backdrop-filter: var(--popup-backdrop-filter);

  /* Modules */

  /* Start */
  --start-button-bg: var(--color-brand-secondary);
  --start-button-text: var(--color-white);
  --start-button-border: var(--color-white);
  --start-button-hover-bg: var(--color-brand-secondary);
  --start-button-hover-text: var(--start-button-text);
  --start-button-hover-border: rgba(255, 255, 255, 0.2);
  --start-tagline-text: var(--color-brand-accent);
  --start-hr: var(--color-brand-secondary);

  /* Panoramas */
  --hotspot-unset: var(--color-brand-accent);

  /* Masterplan */
  --masterplan-hotspot-size: 15px;
  --masterplan-hotspot-text-size: 12px;
  --masterplan-hotspot-text: transparent;
  --masterplan-hotspot-shadow: 0 0 0 1px #ffffffe0, 0 0 0 4px #ffffff40;
  --masterplan-hotspot-shadow-hover: 0 0 0 1px #ffffffa0, 0 0 0 4px #ffffff80;
  --unit-popup-bg: var(--color-brand-primary);
  --unit-popup-text-property: var(--color-white-transparent);
  --unit-popup-text-value: var(--color-brand-accent);
  --unit-row-divider: #ffffff20;
  --masterplan-disclaimer-text: var(--body-text);

  /* Inventory */
  --inventory-table-backdrop-filter: var(--popup-backdrop-filter);
  --inventory-table-bg: #ffffff20;
  --inventory-table-text: var(--body-text);
  --inventory-table-header-bg: var(--color-brand-secondary);
  --inventory-table-header-text: var(--inventory-table-text);
  --inventory-table-row-divider: #ffffff20;
  --inventory-disclaimer-text: var(--body-text);

  /* Site Summary */
  --site-summary-stroke: var(--color-white);
  --site-summary-stroke-hover: var(--site-summary-stroke);
  --site-summary-stroke-width: 3px;
  --site-summary-fill: var(--color-black);
  --site-summary-fill-hover: var(--site-summary-fill);
  --site-summary-fill-opacity: 0.3;
  --site-summary-fill-opacity-hover: 0.7;

  /* Contacts */
  --contact-card-photo-border: var(--color-white-transparent);
  --contact-card-bg: var(--color-black-transparent);
  --contact-card-border: var(--color-brand-secondary);

  /* Forms */
  --form-backdrop: var(--popup-backdrop);
  --form-bg: var(--color-white);
  --form-text: var(--color-black);
  --form-title: var(--color-brand-primary);
  --form-subtitle: var(--color-gray-dark);
  --form-backdrop-filter: var(--popup-backdrop-filter);
  --form-border: var(--color-brand-secondary);

  /* Inputs */
  --input-border: var(--color-gray-light);

  /* Controls (checkbox/radio) */
  --control-border: var(--color-brand-accent);
  --control-bg: var(--color-black-transparent);
  --control-shadow: var(--color-brand-primary);

  --control-checked-bg: var(--color-brand-secondary);
  --control-checked-border: var(--color-brand-secondary);

  --control-disabled-bg: var(--color-gray-light);
  --control-disabled-border: var(--color-black);

  --control-checked-mark: var(--color-white);

  /* Site Location */
  --map-type-switcher-bg: var(--color-gray-light);
  --map-type-switcher-active-bg: var(--color-green);
  --map-type-switcher-thumb: var(--color-white);
  --map-type-switcher-text: var(--body-text);

  --map-circle-label-color: var(--color-white);
  --map-circle-label-bg: #000000d0;
  --map-circle-fill-color: #000000;
  --map-circle-fill-opacity: 0;
  --map-circle-stroke-opacity: 0.5;
  --map-circle-stroke-color: var(--color-white);
  --map-circle-stroke-weight: 1px;

  --map-poi-size: 30px;
  --pano-poi-size: var(--map-poi-size);
  --map-poi-poject-site-size: 60px;
  --pano-poi-poject-site-size: var(--map-poi-poject-site-size);

  --pano-callout-height: 50px;
  --pano-callout-bg: #00000080;
  --pano-callout-text: var(--color-white);
  --pano-callout-line: var(--color-white);

  --poi-icon-size: 60%;

  --poi-default-bg: #000000;

  --poi-default-hover-bg: var(--color-brand-secondary);
  --poi-border: #ffffff80;

  --poi-popup-bg: var(--color-brand-primary);
  --poi-popup-text: var(--color-white);
  --poi-popup-distance-text: var(--color-brand-secondary);

  --poi-type-recreation: #93a83c;
  --poi-type-transit: #457c5b;
  --poi-type-education: #8031bd;
  --poi-type-shopping: #c7883f;
  --poi-type-medical: #3f65c7;
  --poi-type-arterials: #87480e;
  --poi-type-employers: #0e8780;
  --poi-type-logistics: #e9b200;
  --poi-type-petrol: #c74e3f;
  --poi-type-fb: #fe60a7;
  --poi-type-port: #006bf7;
  --poi-type-airport: #34b2d1;
  --poi-type-suburbs: #374eaf;
  --poi-type-site-location: var(--poi-default-bg);

  /* Status Filters */
  --status-filter-bg: none;
  --status-filter-backdrop-filter: none;
  --status-filter-text: var(--body-text);
  --inventory-status-filter-bg: var(--color-brand-primary);
  --inventory-status-filter-text: var(--inventory-table-text);

  /* Statuses */
  --status-all: #cacaca;
  --status-unset: rgb(114, 114, 114);
  --status-available: rgb(64, 205, 58);
  --status-reserved: #ffae00;
  --status-sold: #df0000;
  --status-leased: #ee0000;
  --status-under-contract: #4b40e9;
  --status-withdrawn: #9900ff;
  --status-future-release: #5f77ff;
  --status-stage_2: #617a8f;
}

/* Legasy */
* {
  --footerHeight: 60px;
  --headerHeight: 60px;
}
