@charset "UTF-8";

/*  ===================================================================  VARIABLES  ====================================================================================  */

:root {
  scroll-behavior: smooth;
}
  
/* ====================================================================== FONTS ========================================================================================  */
  
:root {

  --font-brand: 'OladraFont', sans-serif;
  --font-heading1: 'SatoshiBlack', sans-serif;
  --font-heading1: 'OladraFont', sans-serif;
  --font-heading: 'Playfair', serif;
  --font-light: 'SatoshiLight', sans-serif;
  --font-regular: 'SatoshiRegular', sans-serif;
  --font-medium: 'SatoshiMedium', sans-serif;
  --font-bold: 'SatoshiBold', sans-serif;
  --font-black: 'SatoshiBlack', sans-serif;
  --font-body: var(--font-light);
  --logo-word: url("https://antipodes.audio/images/logo-word.png");
}


/*  ==============================================================  USER ADJUSTABLE FONT-SIZING  ===========================================================================  */
                          /*  This section allows you to change the fonts used in the website, and it is safe to change these settings.  */

:root {

  --h1-desktop: 56px;
  --h2-desktop: 36px;
  --h3-desktop: 24px;
  --h4-desktop: 22px;
  --p1-desktop: 22px;
  --p2-desktop: 18px;
  --p3-desktop: 16px;
  --p4-desktop: 14px;
  --h1-tablet: 52px;
  --h2-tablet: 34px;
  --h3-tablet: 24px;
  --h4-tablet: 22px;
  --p1-tablet: 22px;
  --p2-tablet: 18px;
  --p3-tablet: 16px;
  --p4-tablet: 14px;
  --h1-sm-tablet: 44px;
  --h2-sm-tablet: 30px;
  --h3-sm-tablet: 22px;
  --h4-sm-tablet: 20px;
  --p1-sm-tablet: 20px;
  --p2-sm-tablet: 16px;
  --p3-sm-tablet: 14px;
  --p4-sm-tablet: 12px;
  --h1-mobile: 30px;
  --h2-mobile: 24px;
  --h3-mobile: 20px;
  --h4-mobile: 18px;
  --p1-mobile: 18px;
  --p2-mobile: 14px;
  --p3-mobile: 12px;
  --p4-mobile: 10px;
  
  --h1l-desktop: 66px;
  --h2l-desktop: 46px;
  --h3l-desktop: 34px;
  --h4l-desktop: 28px;
  --p1l-desktop: 36px;
  --p2l-desktop: 30px;
  --p3l-desktop: 28px;
  --p4l-desktop: 24px;
  --h1l-tablet: 64px;
  --h2l-tablet: 44px;
  --h3l-tablet: 34px;
  --h4l-tablet: 28px;
  --p1l-tablet: 34px;
  --p2l-tablet: 28px;
  --p3l-tablet: 26px;
  --p4l-tablet: 20px;
  --h1l-sm-tablet: 60px;
  --h2l-sm-tablet: 42px;
  --h3l-sm-tablet: 30px;
  --h4l-sm-tablet: 28px;
  --p1l-sm-tablet: 32px;
  --p2l-sm-tablet: 26px;
  --p3l-sm-tablet: 24px;
  --p4l-sm-tablet: 20px;
  --h1l-mobile: 50px;
  --h2l-mobile: 36px;
  --h3l-mobile: 28px;
  --h4l-mobile: 26px;
  --p1l-mobile: 32px;
  --p2l-mobile: 26px;
  --p3l-mobile: 24px;
  --p4l-mobile: 20px;
}
  

/*  ==============================================================  USER ADJUSTABLE COLOURS  ===========================================================================  */
              /*  This section allows you to change the colours used in the website, and it is safe to change these settings within the value limits stated.  */
  
:root {

  --page-bg: #181818;
  --light-bg: #efefef;
  --dark-text: #111111;
  --primary-brand: #5c002a;
  --primary-bg: #6c103a;
  --primary-highlight: #7a0038;
  --primary-highlight-text: #da0098;
  --menu-bg: #252525;
  --section-bg: #262626;
  --card-bg: #262626;
  --divider: #303030;
  --highlight-bg: #262626;
  --primary-border: #555555;
  --panel-border: #2f2f2f;
  --muted-text: #999999;
  --semi-muted-text: #b1b1b1;
  --body-text: #bfbfbf;
  --heading-text: #f5f5f5;
  --highlight-text: #eeeeee;
  --button-text: #f5f5f5;
  --button-hover-text: #ffffff;
  --page-contrast: #000000;
  --text-contrast: #ffffff;
  --cta-text: #5c002a;
  --link-text: #cccccc;
  --luxe-bg: hsl(43, 22%, 41%);
  --luxe-text: hsl(43, 22%, 41%);
  --cta-accent: #9B0650;
  --link-accent: #ffffff;
  --luxe-accent: hsl(43, 22%, 51%);
  --luxe-highlight: hsl(43, 22%, 51%);
  --slick-dot: #999999;
  --slick-dot-active: #eeeeee;
  --cta-gradient: linear-gradient(72deg,rgba(92, 0, 42, 1) 0%, rgba(120, 0, 55, 1) 100%);
  --primary-gradient: linear-gradient(28deg,var(--primary-brand) 0%, var(--primary-highlight) 100%);
  --luxe-gradient: linear-gradient(28deg,var(--luxe-accent) 0%, var(--luxe-highlight) 100%);
  --equipment-gradient: linear-gradient(0deg,var(--page-bg) 0%, var(--menu-bg) 100%);
  --backdrop: #000000cc;
  --shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.4);
  --shadow-large: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
  --brand-image: url('/images/camerata-logo-light.png');
  --brand-logo: url('/images/camerata-logo-light.png');
  --frontstrip: url('/images/frontstrip-presence-light.png');

}





/* =========================================== MENUS ============================================== */
   /*  You can set the menu colour schemes here.  */
   /*  The colour variables you can change are shown below as 'var(variable)', with the allowable variables found and defined in the COLOURS section below.  */

:root {

  --bg-menu: var(--page-bg);                           /* background color of the main menu */
  --border-menu: var(--page-bg);                        /* menu bottom-border colour */
  --txt-menu: var(--link-text);                            /* text color of the main menu items */
  --active-menu: var(--text-contrast);                       /* text color of main menu on hover and when active */
  --bg-sub: var(--page-bg);                            /* background color of the sub-menus */
  --head-sub: var(--highlight-text);                          /* text color of the sub-menu headings */
  --txt-sub: var(--link-text);                             /* text color of the sub menu items */
  --header-bg: var(--page-bg);                          /* background colour of the header section */
  --header-txt: var(--heading-text);                          /* text colour of the header section */
  --panel-bg: var(--highlight-bg);                          /* background colour of the header section */
  --panel-txt: var(--body-text);                          /* text colour of the header section */
  --mob-txt-menu: var(--link-text);                        /* text color for mobile menu */
  --mob-bg-menu: transparent;                       /* background color for mobile menu */
  --mob-active-txt: var(--heading-text);                    /* text color of hover or active menu items on mobile */
  
}

/*  ========================================= MENU DIMENSIONS ================================================ */
    /* This section is used to set the height of the main menu and sub-menu width */
    
:root {

  --menu-height: 72px;                                                      /* set the height of the main menu bar */
  --menu-opacity-on-scroll: 1;                                           /* set the menu opacity for desktop on scroll */
  --mob-menu-padding: 0px;                                                 /* set the padding of the mobile menu */
  --logo-height: 45px;                                                      /* enter the image height so that it can be automatically vertically centered in the main menu */
  --logo-left-padding: 20px;                                                 /* sets the left padding of the logo */
  --sub-width: 250px;                                                       /* set the maximum width of sub-menus in deskptop for narrow-menu class */
  --menuitem-spacing: 10px;                                                 /* space between main menu items */
  --onscroll-padding-top: 0px;                                            /* align sub-menu with main menu on scroll */
  --menuitem-padding-sides: 2px;                                           /* left and right padding of main menu items */
  
}

/*  ========================================= JUMP ADJUSTMENT ================================================ */
    /* This section is used to set the scroll offset when navigating to a specific part of a web page */

:root {
  /* Tune to your actual sticky header height; add a small buffer */
  --nav-offset: 100px;
  scroll-behavior: smooth;           /* optional: smooth jump */
}

/* If your mobile header is shorter, adjust at a breakpoint */
@media (max-width: 1024px) {
  :root { --nav-offset: 72px; }
}


/*  ========================================= ANIMATIONS ================================================ */
    /* This section is used to set the delay and duration of on-scroll animations */

:root {
    
  --animation-delay: 0.35s;
  --animation-duration: 1.65s;
  
}


/* =========================================  CALCULATED VARIABLES  =================================================== */
                    /*  This section automatically generates all of the remaining variables  */
                  /*  This section should not normally be adjusted, and should be managed above */

:root {
  /* === Desktop (default) === */
  --h1: var(--h1-desktop);
  --h2: var(--h2-desktop);
  --h3: var(--h3-desktop);
  --h4: var(--h4-desktop);
  --p1: var(--p1-desktop);
  --p2: var(--p2-desktop);
  --p3: var(--p3-desktop);
  --p4: var(--p4-desktop);

  --h1l: var(--h1l-desktop);
  --h2l: var(--h2l-desktop);
  --h3l: var(--h3l-desktop);
  --h4l: var(--h4l-desktop);
  --p1l: var(--p1l-desktop);
  --p2l: var(--p2l-desktop);
  --p3l: var(--p3l-desktop);
  --p4l: var(--p4l-desktop);
}

/* === Tablet (max-width: 1024px) === */
@media (max-width: 1024px) {
  :root {
    --h1: var(--h1-tablet);
    --h2: var(--h2-tablet);
    --h3: var(--h3-tablet);
    --h4: var(--h4-tablet);
    --p1: var(--p1-tablet);
    --p2: var(--p2-tablet);
    --p3: var(--p3-tablet);
    --p4: var(--p4-tablet);

    --h1l: var(--h1l-tablet);
    --h2l: var(--h2l-tablet);
    --h3l: var(--h3l-tablet);
    --h4l: var(--h4l-tablet);
    --p1l: var(--p1l-tablet);
    --p2l: var(--p2l-tablet);
    --p3l: var(--p3l-tablet);
    --p4l: var(--p4l-tablet);
  }
}

/* === Small Tablet (max-width: 768px) === */
@media (max-width: 768px) {
  :root {
    --h1: var(--h1-sm-tablet);
    --h2: var(--h2-sm-tablet);
    --h3: var(--h3-sm-tablet);
    --h4: var(--h4-sm-tablet);
    --p1: var(--p1-sm-tablet);
    --p2: var(--p2-sm-tablet);
    --p3: var(--p3-sm-tablet);
    --p4: var(--p4-sm-tablet);

    --h1l: var(--h1l-sm-tablet);
    --h2l: var(--h2l-sm-tablet);
    --h3l: var(--h3l-sm-tablet);
    --h4l: var(--h4l-sm-tablet);
    --p1l: var(--p1l-sm-tablet);
    --p2l: var(--p2l-sm-tablet);
    --p3l: var(--p3l-sm-tablet);
    --p4l: var(--p4l-sm-tablet);
  }
}

/* === Mobile (max-width: 480px) === */
@media (max-width: 480px) {
  :root {
    --h1: var(--h1-mobile);
    --h2: var(--h2-mobile);
    --h3: var(--h3-mobile);
    --h4: var(--h4-mobile);
    --p1: var(--p1-mobile);
    --p2: var(--p2-mobile);
    --p3: var(--p3-mobile);
    --p4: var(--p4-mobile);

    --h1l: var(--h1l-mobile);
    --h2l: var(--h2l-mobile);
    --h3l: var(--h3l-mobile);
    --h4l: var(--h4l-mobile);
    --p1l: var(--p1l-mobile);
    --p2l: var(--p2l-mobile);
    --p3l: var(--p3l-mobile);
    --p4l: var(--p4l-mobile);
  }
}


/*  ===========================================  END OF VARIABLES ============================================================== */