:root{ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT PRODUCTS ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT PRODUCTS TITLE STARS MAX LINES ------ USELESS ? -------------------------- */ --Product-Title-Stars-Max-Lines-1: 2; --Product-Title-Stars-Max-Lines-2: 1; --Product-Title-Stars-Max-Lines: var(--Product-Title-Stars-Max-Lines-1); /* ROOT PRODUCTS DESCRIPTION STARS MAX LINES ------------------------------------- */ --Product-Descrisption-Stars-Max-Lines-1: 6; --Product-Descrisption-Stars-Max-Lines-2: 5; --Product-Descrisption-Stars-Max-Lines: var(--Product-Descrisption-Stars-Max-Lines-1); /* ROOT PRODUCT CONTROLS FULL CONTAINER STARS HEIGHT ----------------------------- */ --Controls-Full-Container-Stars-Height: var(--Controls-Gold-Container-Height); /* ROOT PRODUCT INFOS MAIN CONTAINER STARS TOP ---------------------------------- */ --Product-Infos-Main-Container-Stars-Top: calc(445px + (var(--Product-Principal-Container-Gap-1)) + (var(--Controls-Full-Container-Stars-Height)) + (var(--Product-Principal-Container-Gap-2))); /* ROOT PRODUCT INFOS DESCRIPTION CONTAINER STARS HEIGHT ------------------------ */ --Product-Infos-Description-Container-Stars-Height: calc((var(--Product-Descrisption-Stars-Max-Lines)) * (var(--Product-Description-Collection-Line-Height))); /* ROOT PRODUCT INFOS MAIN CONTAINER STARS HEIGHT ------------------------------- */ --Product-Infos-Main-Container-Stars-Height: calc((var(--Product-Title-Collection-Height)) + (var(--Product-Principal-Container-Gap-3)) + (var(--Product-Price-Collection-Height)) + (var(--Product-Principal-Container-Gap-4)) + (var(--Product-Infos-Description-Container-Stars-Height))); /* ROOT PRODUCTS PRINCIPAL CONTAINER STARS HEIGHT ------------------------------- */ --Product-Principal-Container-Stars-Height: calc((var(--Product-Infos-Main-Container-Stars-Top)) + (var(--Product-Infos-Main-Container-Stars-Height)) + (var(--Product-Principal-Container-Gap-5)) + 50px); /* --Product-Principal-Container-Stars-Height: calc(445px + (var(--Product-Principal-Container-Gap-1)) + 27px); */ /* ROOT PRODUCTS GLOBAL CONTAINER STARS HEIGHT ---------------------------------- */ --Product-Global-Container-Stars-Height: var(--Product-Principal-Container-Stars-Height); /* ROOT PRODUCTS ULTRA CONTAINER STARS HEIGHT ----------------------------------- */ --Product-Ultra-Container-Stars-Height: var(--Product-Principal-Container-Stars-Height); /* ROOT PRODUCTS MASSIVE CONTAINER STARS HEIGHT ------------------------------------------ */ --Product-Massive-Container-Stars-Height-1: calc((var(--Product-Ultra-Container-Stars-Height)) + (var(--Scroll-Gap-Short))); --Product-Massive-Container-Stars-Height-2: calc((var(--Ios-Prdcts-Ultra-Container-Height)) + (var(--Scroll-Gap-Short))); --Product-Massive-Container-Stars-Height: var(--Product-Massive-Container-Stars-Height-1); /* --Ios-Prdcts-Ultra-Container-Height */ /* ---------- ------------------------------------------------------------------- */ /* ---------- ------------------------------------------------------------------- */ /* ROOT INTRO ------------------------------------------------------------------- */ /* ---------- ------------------------------------------------------------------- */ /* ---------- ------------------------------------------------------------------- */ /* ROOT COLLECTION STARS INTRO NB LINES ----------------------------------------- */ --Stars-Intro-Nb-Lines-1: 5; /* XTRA - 1601 */ --Stars-Intro-Nb-Lines-2: 7; /* 1600 - 1071 */ --Stars-Intro-Nb-Lines-3: 9; /* 1070 - 0601 */ --Stars-Intro-Nb-Lines-4: 10; /* 0600 - 0501 */ --Stars-Intro-Nb-Lines-5: 6; /* 0500 - 0421 */ --Stars-Intro-Nb-Lines-6: 7; /* 0420 - 0361 */ --Stars-Intro-Nb-Lines-7: 8; /* 0360 - xxxx */ --Stars-Intro-Nb-Lines: var(--Stars-Intro-Nb-Lines-1); /* ROOT COLLECTION STARS INTRO HEIGHT ------------------------------------------- */ --Stars-Intro-Height: calc((var(--Stars-Intro-Nb-Lines)) * (var(--Lh-Courant-1))); /* ROOT COLLECTION INTRO CONTAINER HEIGHT --------------------------------------- */ --Collection-Stars-Intro-Container-Height: var(--Stars-Intro-Height); /* ROOT COLLECTION INTRO MAIN CONTAINER HEIGHT ---------------------------------- */ --Collection-Stars-Intro-Main-Container-Height-1: calc((var(--Collection-Stars-Intro-Container-Height)) + (2 * (var(--Scroll-Gap-Large)))); --Collection-Stars-Intro-Main-Container-Height-2: calc((var(--Collection-Stars-Intro-Container-Height)) + (2 * (var(--Scroll-Gap-Short)))); --Collection-Stars-Intro-Main-Container-Height: var(--Collection-Stars-Intro-Main-Container-Height-1); /* ----------------------- ------------------------------------------------------ */ /* ----------------------- ------------------------------------------------------ */ /* ROOT INFO SECTION STARS ------------------------------------------------------ */ /* ----------------------- ------------------------------------------------------ */ /* ----------------------- ------------------------------------------------------ */ /* ROOT COLLECTION STARS INFO GLOBAL CONTAINER TOP ------------------------------ */ --Collection-Stars-Info-Global-Container-Top: var(--Collection-Stars-Intro-Main-Container-Height); /* ROOT COLLECTION STARS INFO GLOBAL CONTAINER HEIGHT --------------------------- */ /* --Collection-Stars-Info-Global-Container-Height: var(); */ /* ROOT COLLECTION STARS INFO TEXT 1 NB LINES ----------------------------------- */ --Collection-Stars-Info-Text-1-Nb-Lines-1: 5; /* XTRA - 1601 */ --Collection-Stars-Info-Text-1-Nb-Lines-2: 6; /* 1600 - 1301 */ --Collection-Stars-Info-Text-1-Nb-Lines-3: 8; /* 1300 - 0961 */ --Collection-Stars-Info-Text-1-Nb-Lines-4: 12; /* 0960 - 0601 */ --Collection-Stars-Info-Text-1-Nb-Lines-5: 11; /* 0600 - 0501 */ --Collection-Stars-Info-Text-1-Nb-Lines-6: 8; /* 0500 - xxxx */ --Collection-Stars-Info-Text-1-Nb-Lines: var(--Collection-Stars-Info-Text-1-Nb-Lines-1); /* ROOT COLLECTION STARS INFO TEXT 2 NB LINES ---------------------------------- */ --Collection-Stars-Info-Text-2-Nb-Lines-1: 4; /* XTRA - 1601 */ --Collection-Stars-Info-Text-2-Nb-Lines-2: 5; /* 1600 - 1301 */ --Collection-Stars-Info-Text-2-Nb-Lines-3: 6; /* 1300 - 0961 */ --Collection-Stars-Info-Text-2-Nb-Lines-4: 10; /* 0960 - 0601 */ --Collection-Stars-Info-Text-2-Nb-Lines-5: 9; /* 0600 - 0501 */ --Collection-Stars-Info-Text-2-Nb-Lines-6: 6; /* 0500 - xxxx */ --Collection-Stars-Info-Text-2-Nb-Lines: var(--Collection-Stars-Info-Text-2-Nb-Lines-1); /* ROOT COLLECTION STARS INFO CONTAINER 1 HEIGHT ---------------------------------- */ --Collection-Stars-Info-Container-1-Height-1: calc(1.12 * (var(--Collection-Info-Container-Width))); --Collection-Stars-Info-Container-1-Height-2: var(--Collection-Stars-Info-Container-2-Height-2); --Collection-Stars-Info-Container-1-Height-3: calc(1.12 * (var(--Collection-Info-Container-Width))); --Collection-Stars-Info-Container-1-Height: var(--Collection-Stars-Info-Container-1-Height-1); /* ROOT COLLECTION STARS INFO CONTAINER 2 HEIGHT ---------------------------------- */ --Collection-Stars-Info-Container-2-Height-1: var(--Collection-Stars-Info-Container-1-Height-1); --Collection-Stars-Info-Container-2-Height-2: calc((var(--Collection-Info-Text-Gap)) + ((var(--Lh-Courant-2)) * (var(--Collection-Stars-Info-Text-1-Nb-Lines)))); --Collection-Stars-Info-Container-2-Height-3: calc((var(--Lh-Courant-2)) * (var(--Collection-Stars-Info-Text-1-Nb-Lines))); --Collection-Stars-Info-Container-2-Height: var(--Collection-Stars-Info-Container-2-Height-1); /* ROOT COLLECTION STARS INFO CONTAINER 3 HEIGHT ---------------------------------- */ --Collection-Stars-Info-Container-3-Height-1: var(--Collection-Stars-Info-Container-1-Height-1); --Collection-Stars-Info-Container-3-Height-2: calc((var(--Collection-Info-Text-Gap)) + ((var(--Lh-Courant-2)) * (var(--Collection-Stars-Info-Text-2-Nb-Lines)))); --Collection-Stars-Info-Container-3-Height-3: calc((var(--Lh-Courant-2)) * (var(--Collection-Stars-Info-Text-2-Nb-Lines))); --Collection-Stars-Info-Container-3-Height: var(--Collection-Stars-Info-Container-3-Height-1); /* ROOT COLLECTION STARS INFO CONTAINER 4 HEIGHT ---------------------------------- */ --Collection-Stars-Info-Container-4-Height-1: var(--Collection-Stars-Info-Container-1-Height-1); --Collection-Stars-Info-Container-4-Height-2: var(--Collection-Stars-Info-Container-3-Height-2); --Collection-Stars-Info-Container-4-Height-3: var(--Collection-Stars-Info-Container-1-Height-3); --Collection-Stars-Info-Container-4-Height: var(--Collection-Stars-Info-Container-4-Height-1); /* ROOT COLLECTION INFO MAIN CONTAINER 1 HEIGHT ----------------------------------- */ /* --Collection-Stars-Info-Main-Container-1-Height: var(--Collection-Info-Container-Height); */ --Collection-Stars-Info-Main-Container-1-Height-1: var(--Collection-Stars-Info-Container-1-Height); --Collection-Stars-Info-Main-Container-1-Height-2: calc((var(--Collection-Stars-Info-Container-1-Height)) + (var(--Collection-Stars-Info-Container-2-Height)) + (var(--Collection-Info-Text-Gap))); /* --Collection-Stars-Info-Main-Container-1-Height-3: var(--Collection-Info-Container-Height); */ --Collection-Stars-Info-Main-Container-1-Height: var(--Collection-Stars-Info-Main-Container-1-Height-1); /* ROOT COLLECTION INFO MAIN CONTAINER 2 HEIGHT ----------------------------------- */ /* --Collection-Stars-Info-Main-Container-2-Height: var(--Collection-Info-Container-Height); */ --Collection-Stars-Info-Main-Container-2-Height-1: var(--Collection-Stars-Info-Container-4-Height); --Collection-Stars-Info-Main-Container-2-Height-2: calc((var(--Collection-Stars-Info-Container-4-Height)) + (var(--Collection-Stars-Info-Container-3-Height)) + (var(--Collection-Info-Text-Gap))); /* --Collection-Stars-Info-Main-Container-2-Height-3: var(--Collection-Info-Container-Height); */ --Collection-Stars-Info-Main-Container-2-Height: var(--Collection-Stars-Info-Main-Container-2-Height-1); /* ROOT COLLECTION INFO FULL CONTAINER 1 HEIGHT ----------------------------------- */ --Collection-Stars-Info-Full-Container-1-Height: var(--Collection-Stars-Info-Main-Container-1-Height); /* --Collection-Stars-Info-Full-Container-1-Height-1: var(--Collection-Stars-Info-Main-Container-1-Height); */ /* --Collection-Stars-Info-Full-Container-1-Height-2: var(--Collection-Stars-Info-Main-Container-1-Height); */ /* --Collection-Stars-Info-Full-Container-1-Height: var(--Collection-Stars-Info-Full-Container-1-Height-1); */ /* ROOT COLLECTION INFO FULL CONTAINER 2 HEIGHT ----------------------------------- */ --Collection-Stars-Info-Full-Container-2-Height: var(--Collection-Stars-Info-Main-Container-2-Height); /* --Collection-Stars-Info-Full-Container-2-Height-1: var(--Collection-Stars-Info-Main-Container-2-Height); */ /* --Collection-Stars-Info-Full-Container-2-Height-2: var(--Collection-Stars-Info-Main-Container-2-Height); */ /* --Collection-Stars-Info-Full-Container-2-Height: var(--Collection-Stars-Info-Full-Container-2-Height-1); */ /* ROOT COLLECTION INFO PRINCIPAL CONTAINER HEIGHT -------------------------------- */ /* --Collection-Stars-Info-Principal-Container-Height: calc(2 * (var(--Collection-Info-Container-Height))); */ --Collection-Stars-Info-Principal-Container-Height-1: calc((var(--Collection-Stars-Info-Full-Container-1-Height)) + (var(--Collection-Stars-Info-Full-Container-2-Height))); --Collection-Stars-Info-Principal-Container-Height-2: calc((var(--Collection-Stars-Info-Full-Container-1-Height)) + (var(--Collection-Stars-Info-Full-Container-2-Height)) + (var(--Collection-Info-Text-Gap))); --Collection-Stars-Info-Principal-Container-Height: var(--Collection-Stars-Info-Principal-Container-Height-1); /* ROOT COLLECTION INFO GLOBAL CONTAINER HEIGHT ----------------------------------- */ --Collection-Stars-Info-Global-Container-Height-1: calc((var(--Scroll-Gap-Large)) + (var(--Collection-Stars-Info-Principal-Container-Height))); --Collection-Stars-Info-Global-Container-Height-2: calc((var(--Scroll-Gap-Short)) + (var(--Collection-Stars-Info-Principal-Container-Height))); --Collection-Stars-Info-Global-Container-Height: var(--Collection-Stars-Info-Global-Container-Height-1); /* ------------------------ ----------------------------------------------------- */ /* ------------------------ ----------------------------------------------------- */ /* ROOT FIRST SECTION STARS ----------------------------------------------------- */ /* ------------------------ ----------------------------------------------------- */ /* ------------------------ ----------------------------------------------------- */ /* --Collection-Stars-First-Section-Height: calc((var(--Collection-Stars-Intro-Main-Container-Height)) + (var(--Collection-Stars-Info-Global-Container-Height))); */ --Collection-Stars-First-Section-Height: calc((var(--Collection-Stars-Intro-Main-Container-Height)) + (var(--Collection-Stars-Info-Global-Container-Height))); /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT SECOND SECTION STARS ---------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT COLLECTION STARS ACCROCHE MAIN CONTAINER NB LINES ------------------------ */ --Collection-Stars-Accroche-Main-Container-Nb-Lines-1: 2; --Collection-Stars-Accroche-Main-Container-Nb-Lines-2: 3; --Collection-Stars-Accroche-Main-Container-Nb-Lines-3: 4; --Collection-Stars-Accroche-Main-Container-Nb-Lines: var(--Collection-Stars-Accroche-Main-Container-Nb-Lines-1); /* ROOT COLLECTION STARS ACCROCHE MAIN CONTAINER HEIGHT -------------------------- */ /* --Collection-Stars-Accroche-Main-Container-Height: 476px; */ /* --Collection-Stars-Accroche-Main-Container-Height-1: 476px; */ /* --Collection-Stars-Accroche-Main-Container-Height-1: calc(((var(--Collection-Stars-Accroche-Main-Container-Nb-Lines)) * (var(--Lh-Accroche-Txt))) + (2 * (var(--Scroll-Gap-Short)))); */ /* --Collection-Stars-Accroche-Main-Container-Height: var(--Collection-Stars-Accroche-Main-Container-Height-1); */ --Collection-Stars-Accroche-Main-Container-Height: calc(((var(--Collection-Stars-Accroche-Main-Container-Nb-Lines)) * (var(--Lh-Accroche-Txt))) + (2 * (var(--Scroll-Gap-Short)))); /* ROOT COLLECTION STARS ACCROCHE PRINCIPAL CONTAINER HEIGHT --------------------- */ /* --Collection-Stars-Accroche-Principal-Container-Height: calc((var(--Collection-Stars-First-Section-Height)) + (var(--Collection-Accroche-Main-Container-Height)) - (var(--Collection-Second-Section-Global-Container-Top))); */ --Collection-Stars-Accroche-Principal-Container-Height: calc((var(--Collection-Stars-First-Section-Height)) + (var(--Collection-Stars-Accroche-Main-Container-Height)) - (var(--Collection-Second-Section-Global-Container-Top))); /* ROOT COLLECTION STARS ACCROCHE FULL CONTAINER TOP ----------------------------- */ --Collection-Stars-Accroche-Full-Container-Top: calc((var(--Collection-Stars-Accroche-Principal-Container-Height)) - 100vh); /* ROOT COLLECTION STARS BANNER PRINCIPAL CONTAINER TOP -------------------------- */ /* --Collection-Stars-Banner-Principal-Container-Top: calc((var(--Collection-Stars-Accroche-Principal-Container-Height)) + (var(--Collection-Accroche-Principal-Container-Top))); */ --Collection-Stars-Banner-Principal-Container-Top: var(--Collection-Stars-Accroche-Principal-Container-Height); /* ROOT COLLECTION STARS SECOND SECTION GLOBAL CONTAINER HEIGHT ------------------ */ --Collection-Stars-Second-Section-Global-Container-Height: calc((var(--Collection-Stars-Accroche-Principal-Container-Height)) + (var(--Collection-Banner-Principal-Container-Height))); /* ROOT COLLECTION STARS SECOND SECTION HEIGHT ----------------------------------- */ --Collection-Stars-Second-Section-Height: calc((var(--Collection-Stars-Second-Section-Global-Container-Height)) + ((var(--Collection-Second-Section-Global-Container-Top)))); /* ------------------ ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ /* ROOT THIRD SECTION STARS ----------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ --Collection-Stars-Third-Section-Height: calc((var(--Product-Massive-Container-Stars-Height)) + (var(--Collection-Stars-Second-Section-Height))); --Collection-Stars-Third-Section-Height-1: calc((var(--Product-Massive-Container-Stars-Height)) + (var(--Collection-Stars-Second-Section-Height))); --Collection-Stars-Third-Section-Height-2: calc((var(--Product-Massive-Container-Stars-Height)) + (var(--Collection-Stars-Second-Section-Height)) - (var(--Ios-Prdcts-Ultra-Container-Height)) + (var(--Ios-Prdcts-Stars-Ultra-Container-Height))); --Collection-Stars-Third-Section-Height: var(--Collection-Stars-Third-Section-Height-1); --Product-Max-Container-Stars-Height: calc((var(--Collection-Stars-Third-Section-Height)) - (var(--Scroll-Gap-Large))); /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS -------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS STARS ULTRA CONTAINER HEIGHT ---------------------------------- */ /* --Ios-Prdcts-Ultra-Container-Height: calc((2 * (var(--Ios-Prdcts-Global-Container-Height))) + (var(--Ios-Prdcts-Ultra-Gap-Height))); */ --Ios-Prdcts-Stars-Ultra-Container-Height: var(--Ios-Prdcts-Global-Container-Height); /* ROOT IOS PRDCTS STARS ULTRA CONTAINER TOP ------------------------------------- */ --Ios-Prdcts-Stars-Ultra-Container-Top: calc((var(--Product-Ultra-Container-Top)) + (var(--Ios-Prdcts-Ultra-Container-Height)) - (var(--Ios-Prdcts-Stars-Ultra-Container-Height))); /* ROOT IOS PRDCTS STARS MAX CONTAINER HEIGHT ------------------------------------ */ --Ios-Prdcts-Stars-Max-Container-Height: 10px; /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT FOURTH SECTION STARS ---------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ --Collection-Stars-Fourth-Section-Top: calc((var(--Collection-Stars-Third-Section-Height)) + (var(--Collection-Third-Section-Top))); --Collection-Stars-Fourth-Section-Top-1: calc((var(--Collection-Stars-Third-Section-Height)) + (var(--Collection-Third-Section-Top)) + (2 * (var(--Scroll-Gap-Short)))); --Collection-Stars-Fourth-Section-Top-2: calc((var(--Collection-Stars-Third-Section-Height)) + (var(--Collection-Third-Section-Top)) + (var(--Scroll-Gap-Short))); /* --Collection-Stars-Fourth-Section-Top-1: calc((var(--Collection-Stars-Third-Section-Height)) + (var(--Collection-Third-Section-Top)) + (2 * (var(--Scroll-Gap-Short)))); */ /* --Collection-Stars-Fourth-Section-Top-2: calc((var(--Collection-Stars-Third-Section-Height)) + (var(--Collection-Third-Section-Top)) + (var(--Scroll-Gap-Short))); */ --Collection-Stars-Fourth-Section-Top: var(--Collection-Stars-Fourth-Section-Top-1); /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT BASIC STARS ------------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT FOOTER PRINCIPAL CONTAINER LARGE STARS TOP ------------------------------ */ --Footer-Principal-Container-Large-Stars-Top: calc((var(--Collection-Stars-Fourth-Section-Top)) + (var(--Collection-Fourth-Section-Height))); /* ROOT FOOTER PRINCIPAL CONTAINER SMALL STARS TOP ------------------------------ */ --Footer-Principal-Container-Small-Stars-Top: calc((var(--Collection-Stars-Fourth-Section-Top)) + (var(--Collection-Fourth-Section-Height))); /* ROOT Stars BODY HEIGHT ------------------------------------------------------- */ --Stars-Body-Height-1: calc((var(--Collection-Stars-Fourth-Section-Top)) + (var(--Collection-Fourth-Section-Height)) + 911px); --Stars-Body-Height-2: calc((var(--Collection-Stars-Fourth-Section-Top)) + (var(--Collection-Fourth-Section-Height)) + 612px); --Stars-Body-Height: var(--Stars-Body-Height-1); }