/* 
Davey - 5/12/2025
This is a default styling template for online ordering sites

I have split the code up into sections:
1. Colors
2. Fonts
3. Top Bar
4. Bottom Bar
5. Menu Groups
6. Menu Group Placeholders
7. Catering Headings
8. Menu Items
9. Menu Item Page - Buttons
10. Menu Item Page - Misc

You can modify this to fit new ordering sites by swaping colors, removing parts and etc.
I will attempt to make this CSS as accessible as possible with comments

This is a tool that helps you change an image's color:
https://codepen.io/sosuke/pen/Pjoqqp

For example this is code I used in billysimsbbq

/*Code for setting image colors to #f4a52f*/
/*

.button.button-positive:hover {
color: #000000;
}
.button.button-positive img {
filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(6%) hue-rotate(86deg) brightness(93%) contrast(100%);
}

(If you have no idea what im talking about then dont worry about it)

*/

/* ===========
Brand Colors - Cocina de Mino
Updated by Ali - 1/7/2026
========== */

:root {
    --Primary-Color: #65d833;    /* green - top/bottom bars, highlights */
    --Accent-Color: #7F4099;     /* purple - menu group backgrounds */
    --Secoundary-Color: #a8d8f0; /* light blue - positive buttons */
    --Highlight-Color: #F7D94C;  /* yellow - button active states */
    --Text-Color: #242424;       /* dark gray - main text color */
    --Text-Color: #ffffff;       /* white - text on dark backgrounds */
}

/*FONTS------------------------*/

@font-face {
    font-family: montserrat;
    src: url(https://taptapeat.com/css/fonts/montserrat/static/Montserrat-Regular.ttf);
}

@font-face {
    font-family: libre-baskervilleBold;
    src: url(https://taptapeat.com/css/fonts/libre-baskerville/LibreBaskerville-Bold.ttf);
}

/* Imported Google Fonts ----------------*/
@import url('https://fonts.googleapis.com/css2?family=Adamina&display=swap'); /* Adamina for descriptions */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); /* Poppins for headings */



/*----------END OF FONTS----------*/

/* All text that isnt being styled */
body {
    font-family: sans-serif;
    color: #242424;
    letter-spacing: 0.5px;

}

/* Site accents */
.positive {
    color: #65d833;
}


/* Code for aligning homepage */
#splash {
  text-align: center;
}
/* */


 /* Code for input fields - I.E. quantity num or text in the styling editor */
 /* (Note: as of 11/22/24 !important is required to overide a hard-coded color value when adding a menu item*/
 textarea,
 input[type="text"],
 input[type="password"],
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="date"],
 input[type="month"],
 input[type="time"],
 input[type="week"],
 input[type="number"],
 input[type="email"],
 input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
   color: #242424 !important;
 }
 /* */


/*TOP BAR-------------------------------------*/

/*Code for top bar*/
.bar.bar-dark {
    background-color: #65d833;
    border-color: #65d833;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*Code for titles on top bar*/
.bar.bar-dark .title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 3px;
    font-family: sans-serif;
    text-transform: uppercase;
}

/*Code for back button on header (when you click into a menu item)*/
.bar-dark .button.button-clear {
    font-weight: 700;
    font-size: 16px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/*Code for shopping cart button on header*/
.bar-dark .button.button-icon {
    /*insert color if needed*/
    color: #ffffff;
}
/*----------*/


/*BOTTOM BAR----------------------------------*/

/*Code for bottom bar*/
.tabs-striped.tabs-dark .tabs {
    background-color: #65d833;
    border-top: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/*Code for bottom bar tabs*/
.tab-item .icon {
    color: #ffffff;
}

/*Code for bottom bar tabs border when active*/
.tab-item.tab-item-active {
    border-color: #ffffff !important;
}

/*Code for font color for bottom bar tabs*/
.tabs-striped.tabs-dark .tab-item.tab-item-active {
    color: #ffffff;
}
.tabs .tab-item {
    color: #ffffff !important;
}
/*----------*/


/*MENU GROUPS----------------------------------------*/

/*Code for menu boxes*/
.MenuGroup {
    background: #7F4099;
}

/*Code for menu group names*/
.menu-group-name {
    color: #fff;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5px;
}

/*Code for menu group descprtions*/
.menu-group-description {
    color: #ffffff;
    font-family: sans-serif;
    font-size: 14px;
    padding-top: 5px;
    font-weight: 400;
    letter-spacing: .5px;
}

/*Code for arrow on menu box(if icon is wrong try .menu-group-box)*/
.menu-group-icon {
    color: #65d833;
}
/*----------*/
/*MENU PLACEHOLDERS---------------------------------*/

/* Placeholders are the headers things, we use them to order and seperate menu groups */

/*Code for menu group placeholder title and etc*/
.menuGroupPlaceholder {
  color: #222222;
  font-family: sans-serif;
  font-size: 22px;
}

/*Code for menu group placeholder descriptions*/
.menu-group-placeholder-description {
  color: #222222;
  font-size: 14px;
  font-family: sans-serif;
  padding-top: 5px;
}

/* Bad solution for dividers inside of a menugroup
/*this code applies the font color*/
.MenuItem-placeholder .ng-binding {
  color: #222222;
}
/*this code applies the background*/
.MenuItem-placeholder {
  background-color: #e7e4de;
}
/* */
/*MENU ITEM-----------------------------------------*/

/*Code for menu item name*/
.menuItemName {
    font-weight: 600;
    font-size: 18px;
    font-family: sans-serif;
    color: #242424;
    letter-spacing: .5px;
}

/*Code for menu item description*/
.MenuItemDescription {
    font-weight: 400;
    font-size: 16px !important; /*(Note: default styling overides font-size, creating a need for !important)*/
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: sans-serif;
}

/*Code for menu item cost*/
.menu-item-cost {
    font-weight: 600;
    font-size: 13px;
    color: #242424;
}
/*----------*/


/*MENU ITEM PAGES - BUTTONS-----------------------------*/

/*Code for ASSERTIVE buttons*/
.button.button-assertive {
   background-color: #242424;
   color: white;
   font-size: 14px;
}
/*When activated*/
.button.button-assertive.activated {
   background-color: #262626; /*different for effect*/
   color: white;
}
/* */


/*Code for ASSERTIVE OUTLINE buttons*/
.button.button-assertive.button-outline {
    border-color: #242424;
    color: #242424;
}
/*When activated*/
.button.button-assertive.button-outline.activated {
    background-color: #242424;
    color: #ffffff;
}
/* */


/*Code for BALANCED buttons*/
.button.button-balanced {
    background-color:#7F4099;
}
/*When activated*/
.button.button-balanced.activated {
    background-color:#F7D94C; /*different for effect*/
    color: #ffffff;
}
/* */


/*Code for BALANCED OUTLINE buttons*/
.button.button-balanced.button-outline {
    border-color: #7F4099;
    color:#7F4099;
}
/*When activated*/
.button.button-balanced.button-outline.activated {
    background-color: #F7D94C;
    color:#ffffff;
}
/* */


/*Code for POSITIVE buttons*/
.button.button-positive {
   background-color: #7F4099;
}
/*When activated*/
.button.button-positive.activated {
   background-color: #F7D94C; /*different for effect*/
   color: #ffffff;
}
/* */


/*Code for POSITIVE OUTLINE buttons*/
.button.button-positive.button-outline {
   border-color: #7F4099;
   color: #7F4099;
}
/*When activated*/
.button.button-positive.button-outline.activated {
   background-color: #F7D94C;
   color: #ffffff;
}
/* */
/*----------*/


/*MENU ITEM PAGES - MISC-----------------------------*/

/*Code for CHECKBOX before selected*/
.checkbox-square .checkbox-icon:before {
   border-color: #65d833;
}
/*After selected*/
.checkbox input:checked + .checkbox-icon:before {
   border-color: #65d833;
   background: #65d833;
}
/* */


/*NO YES XTRA Buttons*/
.button.button-small.button-stable.button-positive {
   background-color: #7F4099;
   color: #fff;
   border-color: #7F4099;
}
/* */


/*Code for RADIO BUTTON before selected*/
/* (Note: as of 11/20/24 !important is necessary to overide a !important in the inoic styling) */
.radio-positive .radio-icon:before {
   border-color: #65d833 !important;
}
/*After selected (the little dot in the middle)*/
/* (Note: as of 11/20/24 !important is necessary to overide a !important in the inoic styling) */
.radio-positive .radio-icon:after {
   background: #65d833 !important;
}
.item-radio input:checked + .radio-content .radio-icon:after {
   -webkit-transform: scale(1);
   transform: scale(1);
}
/* */


/*Code for WHOLE and HALF when selected*/
.circle-positive {
   border-color: #65d833;
   background: #65d833;
}
/*Not selected*/
.circle-negative {
   border-color: #65d833;
}
/* */
/*----------*/