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