@charset "utf-8"; /* ************************************************** */ /* ************************************************** */ /* REM (root em) scales from the element, offering predictability, whereas EM scales from its direct parent Use rem for: Global Typography: Base font sizes, headings, paragraphs. Consistent Spacing: Margins, padding for overall layout. Predictable Scaling: Easier to manage global changes by altering just the root font size. Use em for: Component-Specific Scaling: Sizing elements like icons or padding inside a button relative to that button's font size. Modular Design: When a component's internal spacing needs to adapt to its own font size. */ /* Descendant combinator (space) Child combinator (>) Next sibling combinator (+) Subsequent-sibling combinator (~) */ :root { /* 1rem = 16px */ font-size: 62.5%; /* 1rem = (16px x 62.5%) == 10px*/ color:rgb(248, 58, 0); /* design variables */ --brdr-radO: 100vw; /* extreme curve for circle*/ --brdr-rad1: .5rem; /* Border radius 25% of normal */ --brdr-rad2: 1rem; /* Border radius normal*/ --brdr-rad3: 1.5rem; /* extreme curve */ --brdr-rad4: 2rem; /* extreme curve */ --nav-height: 6rem; /* height for man nav */ --edge-margin: 2rem; /* man nav edge positioning */ --page-max-width: 90%; /* max width for page content */ --base-fnt-size: 1.8rem; /* Base font size */ --inpt-fnt-size: calc(1.3 * var(--base-fnt-size)); /* input font size - slightly larger */ --base-preview-centge:30vh; /* anchor for card calculations */ --base-screen-centge:68vh; /* anchor for card calculations */ --card-width:calc((var(--base-screen-centge)/3)*2); /* max width for cards */ --max-card-height: var(--base-screen-centge); /* max height for cards */ --card-flap-anchor:calc(var(--base-screen-centge)/2); /* Animation point for cards */ --use-aspect: 10/15; /* aspect ratio for cards - 2:3 */ --max-scrn-width: 96vw; /* for smaller screens */ /* ***** PALETTE DEFINITIONS *********************** */ --pal-bg: rgb(255, 255, 255); /* Background - slight pink*/ --pal-000: rgb(0, 0, 0); /* Black */ --pal-FFF: rgb(255, 255, 255); /* White */ --brdr-hilt: rgba(255, 58, 58, 0) ; /* border highlight */ --pal-hvr: #ff4561; /* Earthy pink */ --pal-err: #c90000; /* Error panel */ /* Core palette - coolors.co - Earthy Tones */ --pal-01: #EDAFB8; /* Earthy pink */ --pal-02: #f7e1d7; /* Fleshtone */ --pal-03: #DEDBD2; /* green-grey */ --pal-03a: light-dark(#DEDBD2, #f1f1f1); /* green-grey */ --pal-04: #B0C4B1; /* pastel green */ --pal-04a: #c7d4c8; /* pastel green */ --pal-05: #4A5759; /* camouflage green */ --pal-05a: light-dark(#4A5759, #dddcd3); /* camouflage green */ /* End core palette *********************** */ --primary: var(--pal-01); --secondary: var(--pal-04); --background: var(--pal-03); --feature: var(--pal-02); --highlight: #ffda79; /* Theme color */ --theme: var(--pal-05); --pal-06: #414141; /* Grey - Base font colour */ --pal-07: #6b3d44; /* H1/H2 colour */ --pal-08: #526853; /* Shout panel */ --pal-09: #f8e99c; /* Shout panel/border */ --pal-09tnt: #f3e6a286; /* Shout panel/border */ --pal-10: #d6dbf1; /* form background color */ --pal-10tnt: #d6dbf165; /* form background color */ --pal-11: #def0ec; /* form background color :focus state */ /* Card management Action colours */ --pal-12: #E89E59; /* #e77000; Edit the card */ --pal-12tnt: #eca25c; /* Edit the card */ --pal-13:#59B846; /* #5fb84d; /* Go to checkout */ --pal-13tnt: #5fb84d5b; /* Go to checkout */ --pal-14: #B55f45; /* #b63e19; See contributions */ --pal-15: #2C5C73; /* #024f74; Send the card */ --pal-16: #9b51e0; /* Send the card */ /* Comparison chart colors --col-01: rgb(237 175 184); --col-02: rgb(233 176 184); --col-03:rgb(225 179 183); --col-04:rgb(220 181 182); --col-05:rgb(215 183 181); --col-06:rgb(207 185 181); --col-07:rgb(198 188 180); --col-08:rgb(190 191 179); --col-09:rgb(182 194 178); --col-10: rgb(176 196 177);*/ /* Comparison chart colors */ --col-01: rgb(220 231 184); --col-02: rgb(198 229 180); --col-03:rgb(152 203 159); --col-04:rgb(154 210 206); --col-05:rgb(156 216 241); --col-06:rgb(165 188 222); --col-07:rgb(161 152 197); --col-08:rgb(210 170 205); --col-09:rgb(245 182 237); --col-10: rgba(255, 237, 44, 0.8); /* Card background colors */ --env-01: rgb(255, 240, 245); --env-02: rgb(231, 250, 220); --env-03:rgb(247, 245, 231); --env-04:rgb(255, 220, 255); --env-05:rgb(230, 230, 230); --env-06:rgb(216, 232, 253); --env-07:rgb(249, 227, 252); --env-08:rgb(245, 243, 212); --env-09:rgb(243, 243, 243); --env-10: rgb(234, 255, 217); --env-11: rgb(215, 246, 247); --card-back: rgb(243, 243, 243); --plinth-grey: #ecebe8; /* green-grey */ } /* END ROOT */ .coodles_svg { width: 40%; margin:0 auto; background-color: transparent; aspect-ratio: 150/59; background-image: url('assets/coodles_logo.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: .4; } .coodles_svg_w { width:10rem; background-color: transparent; aspect-ratio: 20/7; background-image: url('assets/coodles_logo_w2.svg'); background-position: center; background-repeat: no-repeat; background-size: contain; } /* ******************************************************************************* */ /* ******************************************************************************* */ /* Body Control */ body { font-family: 'noto', 'trebuchet ms', arial, tahoma, helvetica, sans-serif; background-color: var(--pal-bg); font-style: normal; color: var(--pal-06); font-size: var(--base-fnt-size); } #head_wrapperXXX { top:0; width: auto; display: block; margin:0; padding: 0; text-align: center; border: 1px solid var(--brdr-hilt); } #screen_wrapper { width: auto; display: flex; flex-direction: column; justify-content:center; align-items:center; margin:0; text-align: center; border: 1px solid var(--brdr-hilt); } #foot_wrapper { width: auto; display: flex; flex-direction: column; justify-content:center; align-items:center; margin-top: 5rem; text-align: center; background: transparent; border: 1px solid var(--brdr-hilt); } .cookieWrapper{ position: fixed; bottom:5rem; max-width:90vw; width:35rem; right:-500rem; background: var(--pal-FFF); border-radius: var(--brdr-rad2); border: 1px solid var(--pal-05); padding: 1.5rem 2rem 2.5rem; transition: all 0.3s ease; } .cookieWrapper.show { right:4rem; } .cookieHeader{ display: flex; align-items:center; column-gap:2rem; } .cookieDate{ margin-top:2rem; } .buttonWrapper{ margin-top:1rem; width:100%; display:flex; align-items: center; justify-content: space-between; } .buttonWrapper button { width: calc(100%/2 - 1rem); color: var(--pal-FFF); border-radius: var(--brdr-rad1); background-color: var(--pal-05); border: none; cursor: pointer; transition: all 0.3s ease; } .buttonWrapper button:hover { background-color: var(--pal-08); } #header_shell { /* position:sticky; top:0; */ z-index: 100; width:100%; padding:0; /*max-width: 1024px; -@media var */ display: flex; justify-content:center; align-items:center; background: var(--pal-04); border: 1px solid var(--brdr-hilt); } .inner_shell { width:100%; padding:0; max-width: 1024px; /*-@media var */ display: grid; justify-content:center; align-content:flex-start; overflow-x: hidden; border: 1px solid var(--brdr-hilt); } .inner_plinth { width:100%; padding:1rem; margin-bottom: 1rem; max-width: 1024px; /*-@media var */ display: grid; justify-content:center; align-content:flex-start; background-color: var(--plinth-grey); border-radius: var(--brdr-rad2); border: 1px solid var(--brdr-hilt); } #footer_shell { width:100%; padding:0 5rem; max-width: 1024px; /*-@media var */ display: grid; gap:2rem; justify-content:center; align-items:center; background: transparent; border: 1px solid var(--brdr-hilt); } #header { width: 100%; max-width: 1024px; /*-@media var */ display: flex; align-items: center; justify-content: center; background: var(--pal-04); height: auto; } #welcome { width: 100%; max-width: 1024px; /*-@media var */ display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--brdr-hilt); > a, p { margin:1rem 0; /* font-size: calc(1rem + var(--base-fnt-size)); */ font-size: calc((var(--base-fnt-size))*1.2); font-family: 'chewy',sans-serif; text-decoration: none; color: var(--pal-08); } } #welcome a:link { color: var(--pal-08);text-decoration: none} #welcome a:active { color: var(--pal-08);text-decoration: none} #welcome a:visited { color: var(--pal-08);text-decoration: none} #welcome a:hover { color: var(--pal-08);text-decoration: none;} .clearAll { width:99%; height:1rem; margin: .2rem auto; background-color:transparent; border: 1px solid var(--brdr-hilt); } .clearAllLine { width:minmax(99%,100%); height:4rem; margin: 1rem auto; background-color:transparent; border: 1px solid var(--brdr-hilt); border-bottom: 1rem solid var(--pal-04); } #footerspace { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align:left; background:transparent; border: 1px solid var(--brdr-hilt); gap:2rem; } #footersub1, #footersub2 { width: 100%; border: 1px solid var(--brdr-hilt); } #footersub1 { display: flex; flex-direction:column; justify-content:flex-start; } .copyWindow, .copyWindow_C, .copyWindow_R, .copyWindow_R_thin, .homeCopyWindow { display: grid; width: 100%; margin: 1rem 0; padding: 0 2rem; border: 1px solid var(--brdr-hilt); } .copyWindow { text-align:left; justify-content: flex-start; } .copyWindow_C { justify-content: center; } .copyWindow_R { justify-content: flex-end; } .copyWindow_R_thin { margin:0; padding:0; justify-content: flex-end; } .copyWindow_R_thin h5 { margin:inherit; padding:inherit; font-weight: 500; } .homeCopyWindow { padding: 0 3rem; } .copyContainer { text-align:left; max-width: 90vw; margin: 0 auto; justify-content: flex-start; border: 1px solid var(--brdr-hilt); } .copyContainerTC { text-align:left; max-width: 90vw; margin: 3rem; border: 1px solid var(--brdr-hilt); > h1, h2 { margin-top:2rem; } > p { margin-bottom:1.5rem; } } .copyHolderL { margin: 2rem 3rem; display: flex; flex-direction: column; text-align: left; } .nameWindow { width: var(--page-max-width); margin: 1rem auto; border: 1px solid var(--brdr-hilt); } .nameWindow p { font-family: 'chewy'; color: var(--pal-04); } .featureWindow { width: var(--page-max-width); margin: 1rem auto 3rem auto; border: 1px solid var(--brdr-hilt); } .featureWindow h1{ font-family: 'Englebert'; font-size: calc(var(--base-fnt-size)*4.4); /* 8rem; */ line-height: calc(var(--base-fnt-size)*3.8); /* 7rem */ color: var(--pal-04); max-width: 80%; margin: 0 auto; } .featureWindow h2{ font-family: 'Englebert'; font-size: calc(var(--base-fnt-size)*2.5); /* 4.5rem; */ line-height: calc(var(--base-fnt-size)*2.8); /* 5rem */ color: var(--pal-05); } .gradient-txt { background: linear-gradient(270deg, var(--pal-05a) 10%, var(--pal-03a) 100%); background-clip: text; color: transparent; } /* google recaptcha badge hidden */ /* .grecaptcha-badge { visibility: hidden; } */ *, ::before, ::after { padding: 0; margin: 0; box-sizing:border-box; } div.stickyItem { position: sticky; top: 0; border-bottom: 1px solid var(--brdr-hilt); } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ********* FONT DEFINITIONS ************** */ ul,ol { } ul{list-style:none;} li {list-style:none;} ul, li { margin: 0; padding: 0; } H1{ display:block; font-weight: normal; font-style: normal; font-variant: normal; } H2, .displayName { font-weight: normal; font-style: normal; font-variant: normal; } /* H2 variants */ H2 STRONG { font-weight: bold; } /* H1 variants */ .displayName { display:block; font-weight: bold; } H3, UL, OL, LI, P { font-weight: normal; font-style: normal; font-variant: normal; } H4 { font-weight: normal; font-style: normal; font-variant: normal; } /* H4 variants */ H5, H5 LI { display:inline; font-weight: normal; font-style: normal; font-variant: normal; } /* H5 variants */ H6 { font-weight: normal; font-variant: normal; } .register_message{ font-weight: normal; font-variant: normal; font-style: italic; } .edit_confirm { font-weight: normal; font-style: normal; } .copyright_text { font-weight: normal; font-variant: normal; margin:.3rem; } /* #m_username, #m_email, #m_password { font-weight: normal; background-color:var(--pal-07); } */ h1 {font-family: 'Englebert', 'trebuchet ms', tahoma, sans-serif;} /* h1 {font-size: 3rem; line-height: 3.2rem; margin:.5rem 0; color: var(--pal-07);} */ h1 {font-size: calc(var(--base-fnt-size)*1.7); line-height: calc((var(--base-fnt-size)*1.7) + .2rem); margin:.5rem 0; color: var(--pal-07);} h2 {font-family: 'Gabarito', 'Englebert', 'trebuchet ms', sans-serif;} /* h2 {font-size: 2.4rem; line-height: 2.6rem; margin:.5rem 0; color: var(--pal-07);} */ h2 {font-size: calc(var(--base-fnt-size)*1.5); line-height: calc((var(--base-fnt-size)*1.4) + .2rem); margin:.5rem 0; color: var(--pal-07);} h3 {font-family: 'Gabarito', 'Englebert', 'trebuchet ms', sans-serif;} /* h3 {font-size: 2rem; line-height: 2.2rem; margin:.5rem 0; color: var(--pal-06);} */ h3 {font-size: calc(var(--base-fnt-size)*1.1); line-height: calc((var(--base-fnt-size)*1.3) + .2rem); margin:.5rem 0; color: var(--pal-06);} h4 {font-size: var(--base-fnt-size); line-height: calc(var(--base-fnt-size) + .4rem); margin:.5rem 0; color: var(--pal-06);} /* h5 {font-size: 1.2rem; line-height: 1.4rem; margin:.5rem 0; color: var(--pal-06);} */ h5 {font-size: calc(var(--base-fnt-size)*.66); line-height: calc(var(--base-fnt-size)*.75); margin:.5rem 0; color: var(--pal-06);} /* h6 {font-size: 1rem; line-height: 1.2rem; margin:.5rem 0; color: var(--pal-06);} */ h6 {font-size: calc(var(--base-fnt-size)*.55); line-height: calc(var(--base-fnt-size)*.66); margin:.5rem 0; color: var(--pal-06);} .displayName {font-size: 2.4rem; line-height: 2.6rem; margin:.5rem 0; color: var(--pal-06);} .register_message { font-size: var(--base-fnt-size); line-height: 2.1rem; color: var(--pal-06);} .edit_confirm { font-size: 1.4rem; line-height: 1.8rem; color: var(--pal-06);} .edit_confirm STRONG {color: var(--pal-06);} .copyright_text {font-size: .9rem; line-height: 1.2rem; color: var(--pal-06);} /* #m_username, #m_email, #m_password {font-size : .9rem; color: var(--pal-06);} */ p {font-size: var(--base-fnt-size); line-height: calc(var(--base-fnt-size)*1.3); margin:.5rem 0; margin-block-start: 0px; margin-block-end: 0px; text-wrap: pretty; color: var(--pal-06);} h1, h2, h3 { text-wrap: balance;} /* base link behaviours */ a:link { color: var(--pal-06);text-decoration: none} a:active { color: var(--pal-06);text-decoration: none} a:visited { color: var(--pal-06);text-decoration: none} a:hover { color: var(--pal-hvr);text-decoration: none} H1 option { color: var(--pal-000)} H1 a:link { color: var(--pal-000); background: transparent; text-decoration: none} H1 a:active { color: var(--pal-000); background: transparent; text-decoration: none} H1 a:visited { color: var(--pal-000); background: transparent; text-decoration: none} H1 a:hover { color: var(--pal-hvr); background: transparent; text-decoration: none} H2 option { color: var(--pal-000)} H2 a:link { color: var(--pal-000); background: transparent; text-decoration: none} H2 a:active { color: var(--pal-000); background: transparent; text-decoration: none} H2 a:visited { color: var(--pal-000); background: transparent; text-decoration: none} H2 a:hover { color: var(--pal-hvr); background: transparent; text-decoration: none} H3 option { color: var(--pal-14); font-weight: bold; } H3 a:link { color: var(--pal-14); background: transparent; font-weight: bold; text-decoration: none} H3 a:active { color: var(--pal-14); background: transparent; font-weight: bold; text-decoration: none} H3 a:visited { color: var(--pal-14); background: transparent; font-weight: bold; text-decoration: none} H3 a:hover { color: var(--pal-hvr); background: transparent; font-weight: bold; text-decoration: none} H4 option { color: var(--pal-08); font-weight: bold; } H4 a:link { color: var(--pal-08); background: transparent; font-weight: bold; text-decoration: none} H4 a:active { color: var(--pal-08); background: transparent; font-weight: bold; text-decoration: none} H4 a:visited { color: var(--pal-08); background: transparent; font-weight: bold; text-decoration: none} H4 a:hover { color: var(--pal-hvr); background: transparent; font-weight: bold; text-decoration: none} H6 option { color: var(--pal-05); font-weight: normal; } H6 a:link { color: var(--pal-05); background: transparent; font-weight: normal; text-decoration: none} H6 a:active { color: var(--pal-05); background: transparent; font-weight: normal; text-decoration: none} H6 a:visited { color: var(--pal-05); background: transparent; font-weight: normal; text-decoration: none} H6 a:hover { color: var(--pal-hvr); background: transparent; font-weight: normal; text-decoration: none} .navbar li a, .navbar .logo a, .reveal_navbar .logo a, .navbar .links a, .dropdown_menu li a {color: #fff;text-decoration: none} .navbar .li a, .navbar .links a, .dropdown_menu li a {font-size: var(--base-fnt-size);} .navbar .logo a, .reveal_navbar .logo a {font-family:'chewy';} /* END FONT DEFINITIONS */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* GRID ROW LEVEL CONTROLS */ /* CONTAINER LEVEL CONTROLS */ .gridContainer { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto; gap:.8em; border: 1px solid var(--brdr-hilt); } /* grid container */ .gridRow { border: 1px solid var(--brdr-hilt); margin: 0; } .contentG { height: 15rem; width: 15rem; padding: 2em; border-radius: var(--brdr-rad2); background-color: var(--pal-03); border: 1px solid var(--brdr-hilt); }/* grid content */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* FLEX ROW LEVEL CONTROLS */ .flexRow { display: flex; justify-content: center; align-items: center; gap: 1em; border: 1px solid var(--brdr-hilt); margin: 0; } /* CONTAINER LEVEL CONTROLS */ .containerF { min-height:10vh; border: 1px solid var(--brdr-hilt); margin: .6rem .6rem; } /* flex container */ /* CONTENT CONTROLS */ .contentF { border: 1px solid var(--brdr-hilt); flex-grow: 1; min-height: 10rem; width: 15rem; color: fff; background-color: rgb(214, 214, 214); border-radius: var(--brdr-rad2); } /* flex content */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* THREE COLUMN ROWS - PLINTH */ .howToContainer { display: grid; grid-template-columns: repeat(auto-fit,minmax(24rem,1fr)); gap:2rem; justify-items: center; align-items: center; justify-content: center; align-content: center; border: 1px solid var(--brdr-hilt); } .howTo_Cnt { display: flex; flex-direction: column; width:100%; aspect-ratio: 6/5; border: 1px solid var(--brdr-hilt); > p { font-weight: 600; } } .howTo_1, .howTo_2, .howTo_3, .howTo_4, .howTo_5, .howTo_6, .howTo_7, .howTo_8, .howTo_9, .howTo_10, .howTo_11, .howTo_12, .howTo_13 { aspect-ratio: 6/5; background-position: center; background-repeat: no-repeat; background-size: cover; } .howTo_1 {background-image: url('assets/frame1_c.jpg');} .howTo_2 {background-image: url('assets/frame2_c.jpg');} .howTo_3 {background-image: url('assets/frame3_c.jpg');} .howTo_4 {background-image: url('assets/frame4_c.jpg');} .howTo_5 {background-image: url('assets/frame5_c.jpg');} .howTo_6 {background-image: url('assets/frame6_c.jpg');} .howTo_7 {background-image: url('assets/frame7_c.jpg');} .howTo_8 {background-image: url('assets/frame8_c.jpg');} .howTo_9 {background-image: url('assets/frame9_c.jpg');} .howTo_10 {background-image: url('assets/frame10_c.jpg');} .howTo_11 {background-image: url('assets/frame11_c.jpg');} .howTo_12 {background-image: url('assets/frame12.jpg');} .howTo_13 {background-image: url('assets/frame13.jpg');} /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* TWO COLUMN ROWS - PLINTH */ .gridContainer-x2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap:1rem; justify-items: center; align-items: center; justify-content: center; align-content: center; margin: .5rem 2rem; border: 1px solid var(--brdr-hilt); } .gridRow-x2 { width: 100%; min-height: 12rem; align-content:center; border-radius: var(--brdr-rad2); background-color: var(--pal-02); border: 1px solid var(--brdr-hilt); } .cont-G-x2 { margin: 1rem 2rem; } .gridContainer-x2s { display: grid; grid-template-columns: repeat(2, auto); /* grid-auto-rows: 1fr; */ gap:1rem; justify-items: center; align-items:flex-start; justify-content: center; align-content: center; margin: .5rem 2rem; border: 1px solid var(--brdr-hilt); } .gridRow-x2s { width: 100%; min-height: 12rem; align-content:center; border-radius: var(--brdr-rad2); background-color: transparent; border: 1px solid var(--brdr-hilt); text-align: left; } .cont-G-x2s { margin: 1rem 2rem; } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ONE COLUMN ROWS - PLINTH */ .gridContainer-x1 { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap:1rem; justify-items: center; align-items: center; justify-content: center; align-content: center; margin: .5rem; border: 1px solid var(--brdr-hilt); } .gridRow-x1 { width: 80%; max-width: 50rem; min-height: 10rem; align-content:center; border-radius: var(--brdr-rad2); background-color: var(--pal-02); border: 1px solid var(--brdr-hilt); } .cont-G-x1 { margin: 1rem 2rem; border: 1px solid var(--brdr-hilt); } .paymt-G-x1 { margin: 1rem 2rem; border: 1px solid var(--brdr-hilt); display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0.5em; } .div01, .div02 { display:flex; align-items: center; } .div03 { display:flex; flex-direction: column; align-items: center; justify-content: center; align-content: center; gap: 1rem; } .div01 h2{ font-family: 'Englebert'; font-weight: 600; color: var(--pal-07); } .gridContainer-x1a { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; justify-items: center; align-items: center; justify-content: center; align-content: center; /* margin: .5rem; */ border: 1px solid var(--brdr-hilt); background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gridContainer 15s ease infinite; } .gridRow-x1a { width: 80%; max-width: 50rem; min-height: 10rem; align-content:center; background-color: transparent; } .cont-G-x1a { margin: 1rem 2rem; border: 1px solid var(--brdr-hilt); > h1, h2, h3 { color: var(--pal-FFF); } } @keyframes gridContainer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gridContainer-x1b { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; justify-items: center; align-items: center; justify-content: center; align-content: center; background-color: var(--pal-05); border: 1px solid var(--brdr-hilt); } .gridRow-x1b { width: 80%; max-width: 50rem; min-height: 6rem; align-content:center; background-color: transparent; } .cont-G-x1b { margin: .5rem 2rem; border: 1px solid var(--brdr-hilt); > h1, h2, h3, p { color: var(--pal-FFF); } } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* BENTO - GRID */ .gridContainer-Ben1 { display: grid; grid-auto-columns: repeat(4, 1fr); /* grid-auto-rows: 1fr; */ grid-auto-rows: 25rem; grid-gap:2rem; grid-template-areas: "box-1 box-2 box-2 box-3" "box-1 box-4 box-4 box-5"; margin: 2rem 6rem; border: 1px solid var(--brdr-hilt); } .gridContainer-Ben2 { display: grid; grid-auto-columns: repeat(3, 1fr); /* override grid layout */ grid-auto-rows: 25rem; grid-gap:2rem; grid-template-areas: "box-1 box-2 box-2" "box-3 box-3 box-4"; margin: 2rem 6rem; border: 1px solid var(--brdr-hilt); } .gridRow-Ben1, .gridRow-Ben2 { align-content:center; border-radius: var(--brdr-rad4); background-color: var(--pal-06); color: var(--pal-07); border: 1px solid var(--brdr-hilt); } .cont-G-Ben1, .cont-G-Ben2 { margin: 1rem 2rem; } #box-1.gridRow-Ben2 { grid-area: box-1; background-color: var(--pal-bg); display:flex; justify-content:center; align-items: end; overflow:hidden; background-position: center; background-repeat: no-repeat; background-size: cover; } #box-1.gridRow-Ben2 p { color: var(--pal-FFF); font-weight: bold; font-size: calc(.5rem + var(--base-fnt-size)); text-shadow: #290141 .2rem .1rem .8rem; margin:1rem 1rem 2rem 1rem; } #box-2.gridRow-Ben2 { grid-area: box-2; background-color: var(--pal-02); } #box-3.gridRow-Ben2 { grid-area: box-3; background-color: var(--pal-03); } #box-4.gridRow-Ben2 { grid-area: box-4; background-color: var(--pal-04); } /* .gridContainer-Ben1 .gridRow-Ben1 { background-color: var(--pal-01); } */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* COMPARISON TABLE - GRID */ .gridContainer-aComp { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr; grid-auto-rows: 1fr; grid-gap:1rem; margin: .5rem 6rem; border: 1px solid var(--brdr-hilt); } .gridRow-aComp { border-radius: var(--brdr-rad2); background-color: var(--col-01); color: var(--pal-09); border: 1px solid var(--brdr-hilt); } .gridRow-aCompK { border-radius: var(--brdr-rad2); background-color: var(--pal-bg); text-align: left; color: var(--pal-08); border: 1px solid var(--brdr-hilt); } .cont-G-aComp { margin: 1rem 2rem; } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* COMPARISON TABLE - BENTO */ .gridContainer-bComp { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; grid-gap:1rem; grid-template-areas: "box-1 box-1 box-1 box-2 box-3 box-4"; margin: .5rem 6rem; border: 1px solid var(--brdr-hilt); } .gridRow-bComp { display: flex; justify-content: center; align-items: center; border-radius: var(--brdr-rad2); background-color: var(--col-01); color: var(--pal-09); height: auto; border: 1px solid var(--brdr-hilt); } .cont-G-bComp { margin: 1rem 2rem; } .grid_style1 {background-color: var(--col-01);} .grid_style2 {background-color: var(--col-02);} .grid_style3 {background-color: var(--col-03);} .grid_style4 {background-color: var(--col-04);} .grid_style5 {background-color: var(--col-05);} .grid_style6 {background-color: var(--col-06);} .grid_style7 {background-color: var(--col-07);} .grid_style8 {background-color: var(--col-08);} .grid_style9 {background-color: var(--col-09);} .grid_style10 {background-color: var(--col-10);} .gridRow-bCompK { display: flex; justify-content: start; align-items:flex-end; text-align: left; border-radius: var(--brdr-rad2); background-color: transparent; color: var(--pal-08); height: auto; border: 1px solid var(--brdr-hilt); } .gridRow-bCompK p { font-weight: 800; } .tick { height:5rem; aspect-ratio: 1/1; background-image: url('assets/tick.svg'); background-position: center; background-repeat: no-repeat; background-size: cover; margin: auto; } .cpyIcon{ height:3rem; aspect-ratio: 1/1; background-image: url('assets/copy.svg'); background-repeat: no-repeat; } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* CARD CAROUSEL*/ .carousel-ShowPx { width: auto; overflow:hidden; background-color: transparent; padding: 2rem 0; margin:2rem 1rem; border: 1px solid var(--brdr-hilt); } .carouselRow-ShowPx { width: 100%; display: flex; justify-items: center; align-items: start; overflow-x: scroll; overflow-y: hidden ; scroll-snap-type: x mandatory; /* padding: 1rem 4rem; */ background-color: transparent; border: 1px solid var(--brdr-hilt); } @keyframes appear { from { opacity: 0; scale: 0.5; /* transform: translateY(-6rem);*/ } to { opacity: 1; scale: 1; /* transform: translateY(0rem);*/ }} .cardx-1 { flex: 0 0 auto; width: 14rem; margin: 0 2.5rem; justify-items: center; align-items: center; justify-content: center; align-content: center; color: var(--pal-04); font-weight: normal; background-color: transparent; } .cardx-img { width: 100%; aspect-ratio: 10/15; border-radius: var(--brdr-rad2); background-color: var(--pal-000); } .carousel-F-ShowPx { margin: .4rem 0 0 0; } .carousel-F-ShowPx p {color: var(--pal-000); font-size: 1.6rem; line-height: 1.8rem; margin:0;} /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* CARD SHOP WINDOW & SHOW WINDOW DISPLAY ARE A SINGLE ITEM */ /* CARD SHOP WINDOW */ #card_Select { position: sticky; top:0rem; width: auto; display: flex; align-items: center; column-gap: 1rem; overflow-x: scroll; scroll-snap-type: x mandatory; padding: 1rem 4rem; background-color: transparent; border: 1px solid var(--brdr-hilt); } .card_SelectButton{ display: flex; width:auto; justify-items: center; align-items: center; max-height: 4rem; border-radius: var(--brdr-rad2); background-color: var(--pal-08); } ::-webkit-scrollbar {width: 2rem; height: var(--brdr-rad1);} ::-webkit-scrollbar-track {border-radius: var(--brdr-rad1);} ::-webkit-scrollbar-thumb {background: #b4b4b4; border-radius: var(--brdr-rad1);} .card_SelectButton p {font-size: 1.6rem; margin: 1rem 2rem; white-space:nowrap;color: var(--pal-09);} /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* CARD SHOP WINDOW DISPLAY */ #shopWindow { width: auto; overflow:hidden; background-color: transparent; margin:1rem; border: 1px solid var(--brdr-hilt); } .displayShell{ width: 100%; border: 1px solid var(--brdr-hilt); } .shopDisplay { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, clamp(18rem, 25vw, 22rem)); grid-gap: 2rem; justify-content: center; justify-items:center; align-items: start; color: var(--pal-02); border: 1px solid var(--brdr-hilt); } .shopx-1 { width: 90%; display: grid; justify-items: center; align-items: start; color: var(--pal-04); font-weight: normal; background-color: transparent; border: 1px solid var(--brdr-hilt); /* animation: slide-fade-in linear; animation-timeline:view(); animation-range: entry 0% cover 10% */ } .shopx-img { width: 100%; aspect-ratio: 10/12; display: flex; justify-items: center; align-items: center; border-radius: var(--brdr-rad2); background-color: transparent; border: 1px solid var(--brdr-hilt); } .shopx-img img { width: 100%; height: auto; } .text-F-shopx { margin: .5rem 0; } .text-F-shopx p {color: var(--pal-000); font-size: 1.6rem; line-height: 1.8rem; margin:0;} /* CARD SHOP WINDOW & SHOW WINDOW DISPLAY ARE A SINGLE ITEM */ /* .shopx-1 scroll animation */ @keyframes slide-fade-in { from { opacity: 0; scale: 0.5; } to { opacity: 1; scale: 1; } } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* WAYFINDING NAVIGATION BUTTONS */ .navHolder, .wayfindNavHolder { width: 100%; display: flex; justify-content: center; height: auto; border: 1px solid var(--brdr-hilt); margin:5rem 0rem; } .wayfindNavHolder { margin:2rem 0rem; } .wayfinding { /* width: auto; */ width:100%; /* max-width: 80rem; margin:0 2rem; */ display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; align-items: center; /* padding: 1rem 4rem; */ background-color: transparent; border: 1px solid var(--brdr-hilt); } .wayfindingBack { width:100%; max-width: 1024px; /*-@media var */ display: flex; height:fit-content; justify-content: flex-start; align-items: center; padding: 1rem 2rem; background-color: transparent; border: 1px solid var(--brdr-hilt); } .wayfindingWide { /* width: auto; */ display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; justify-items: center; align-items: center; justify-content: center; align-content: center; gap: 4rem; background-color: transparent; border: 1px solid var(--brdr-hilt); } .backButton, .nxtButton, .trshButton, .penButton, .closeButton, .cardButton, .cartButton, .bagButton, .homeButton { display: flex; height:fit-content; width:fit-content; justify-items: center; align-items: center; border-radius:100vw; color: var(--pal-08); /* background-color: var(--pal-09); border:.2rem solid var(--pal-000); */ text-align:center; } .backButton + * {margin: 0 auto;} .backButton::after {content: url('assets/arrow-left-o.svg');} .nxtButton { position: absolute; margin-top:1rem; margin-left:1rem; } .nxtButton + * {margin: 0 auto;} .nxtButton::after {content: url('assets/arrow-right-o.svg');} .trshButton + * {margin: 0 auto;} .trshButton::after {content: url('assets/trash.svg');opacity:.2;} .penButton + * {margin: 0 auto;} .penButton::after {content: url('assets/pen.svg');opacity:.2;} .cardButton, .cartButton, .bagButton {display:inline;position:relative;top:.8rem;} .cardButton + * {margin: 0 auto;} .cardButton::after {content: url('assets/credit-card.svg');opacity:.2;} .cartButton + * {margin: 0 auto;} .cartButton::after {content: url('assets/shopping-cart.svg');opacity:.2;} .bagButton + * {margin: 0 auto;} .bagButton::after {content: url('assets/shopping-bag.svg');opacity:.2;} .closeButton + * {margin: 0 auto;} .closeButton::after {content: url('assets/close.svg');scale: .8;} .homeButton + * {margin: 0 auto;} .homeButton::after {content: url('assets/home.svg');scale: .8;} .backButton, .homeButton { margin: 0 1.5rem 0 0;} .cookieIcon { height:3rem; width:3rem; background-image: url('assets/cookie.png'); background-repeat: no-repeat; background-size: contain; } button { display: block; width: fit-content; color: var(--pal-08); font-family: inherit; font-size: var(--base-fnt-size); padding: 0 4rem; font-weight: 600; white-space:nowrap; min-height: 4rem; border-radius: var(--brdr-rad1); background-color: var(--pal-FFF); border: 1px solid var(--pal-08); cursor:pointer; } .baseButton { /* overwrites standard button look/feel */ color: var(--pal-FFF); min-width: 22rem; background-color: var(--pal-05); } .newButton { display: block; /* width: fit-content; */ width: fit-content; padding: 0 2rem; color: var(--pal-FFF); font-family: inherit; font-size: var(--base-fnt-size); font-weight: 600; white-space:nowrap; min-height: 4rem; border-radius: var(--brdr-rad1); background-color:var(--pal-04); border: 1px solid var(--pal-04); margin: 1.5rem 0; cursor:pointer; } .msgButton { display: block; /* width: fit-content; */ width: fit-content; padding: 0 2rem; color: var(--pal-FFF); font-family: inherit; font-size: var(--base-fnt-size); font-weight: 600; white-space:nowrap; min-height: 4rem; border-radius: var(--brdr-rad2); background-color:var(--pal-12tnt); border: 1px solid var(--pal-12tnt); margin: 1.5rem 0; cursor:pointer; } .sendButton { display: block; width: fit-content; padding: 0.6rem 2rem 0.8rem 2rem; color: var(--pal-FFF); font-family: inherit; font-size: var(--base-fnt-size); font-weight: 600; white-space:nowrap; min-height: 4rem; border-radius: var(--brdr-rad2); background-color: var(--pal-16); border: 1px solid var(--brdr-hilt); cursor:pointer; } /* base link behaviours */ button a:link { color: var(--pal-08);text-decoration: none} button a:active { color: var(--pal-08);text-decoration: none} button a:visited { color: var(--pal-08);text-decoration: none} button a:hover { color: var(--pal-08);text-decoration: none} /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* **************** PAGE NAVIGATION ************************* */ /* **************** START ************************* */ .reveal_navbar { width: 100%; height: var(--nav-height); margin: 0 2rem; display: flex; align-items: center; justify-content:center; } .reveal_navbar .logo a { font-size: 3.4rem; font-weight: bold; } .navbar { width: 100%; height: var(--nav-height); margin: 0 2rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--brdr-hilt); } .navbar .logo a { font-size: 3rem; font-weight: bold; } .navbar .links { display: flex; gap: 2rem; } .navbar .toggle_btn { color: #fff; font-size: 2rem; cursor: pointer; display: none; } .action_btn { background-color: var(--pal-05); color: #fff; padding: 1rem 2rem; border: none; outline: none; border-radius: var(--brdr-rad3); font-size: 1.6rem; font-weight: bold; cursor: pointer; transition: scale 0.2 ease; } .action_btn:hover { scale: 1.05; color: var(--pal-09); text-decoration: none; } .action_btn:active { scale: 0.95; } .action_btn:link, .action_btn:active, .action_btn:visited { color:var(--pal-FFF);text-decoration: none} .buy_btn { color: #fff; padding: 1.5rem 3rem; border: none; outline: none; border-radius: var(--brdr-rad3); font-size: 2rem; font-weight: bold; cursor: pointer; transition: scale 0.2 ease; margin:.5rem auto; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gridContainer 15s ease infinite; } .buy_btn:hover { scale: 1.05; color: var(--pal-05); text-decoration: none; } .buy_btn:active { scale: 0.95; } .buy_btn:link, .buy_btn:active, .buy_btn:visited { color:var(--pal-FFF);text-decoration: none} /* Dropdown menu */ .dropdown_menu { position: absolute; right: 2rem; top: calc(var(--nav-height) + 1rem); height: 0; width: 35rem; background: var(--pal-04); backdrop-filter: blur(1.5rem); border-radius: var(--brdr-rad4); overflow: hidden; transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .dropdown_menu.open { height: auto; } .dropdown_menu li { padding: 0.7rem; display: flex; align-items: center; justify-content: center; margin: 1rem 0; } .dropdown_menu .action_btn { width: 90%; display: flex; justify-content: center; margin: 0 .6rem; } .toggle_btn { display: flex; background-color: transparent; } .ham-menu { height:3rem; width:3rem; margin-left: auto; position: relative; } .ham-menu span { height:.4rem; width:100%; background-color: var(--pal-FFF); border-radius: var(--brdr-rad1); position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%); transition: .3s ease; } .ham-menu span:nth-child(1){ top:25%; } .ham-menu span:nth-child(3){ top:75%; } .ham-menu.active span:nth-child(1){ top:50%; transform: translate(-50%, -50%) rotate(45deg); } .ham-menu.active span:nth-child(2){ opacity: 0; } .ham-menu.active span:nth-child(3){ top:50%; transform: translate(-50%, 50%) rotate(-45deg); } /* **************** PAGE NAVIGATION ************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ***************** FORMS *********************************** */ /* ***************** INPUT FIELDS TYPE 1 *********************************** */ .payPalformHolder { display: grid; width:100%; min-width: 34rem; max-width: 44rem; margin: 0 auto; align-items: center; border: 1px solid var(--brdr-hilt); } .payPalformHolder_row { width:100%; min-width: 34rem; max-width: 44rem; text-align: left; margin: 0 0 2.5rem 0; color:var(--pal-06); /* default text color */ border: 1px solid var(--brdr-hilt); } .newform { display: grid; width:100%; /* min-width: 38rem; */ max-width: 44rem; margin: 0 auto; justify-content: center; align-items: center; /*border: 1px solid var(--brdr-hilt); */ border: 1px solid var(--brdr-hilt); > img { object-fit:contain; width:100%; max-height: var(--base-preview-centge); object-position: center; } } fieldset { border:none; } form { width: 100%; } .newform_row { /* width:100%; */ /* min-width: 38rem; */ max-width: 44rem; text-align: left; margin: 0 0 2.5rem 0; color:var(--pal-06); /* default text color */ border: 1px solid var(--brdr-hilt); } .newform_row input { width:100%; height:fit-content; border: 2px solid var(--pal-05); border-radius: var(--brdr-rad1); font-family: inherit; font-size: var(--base-fnt-size); color:var(--pal-06); outline: none; padding: 0.6rem 1rem; background-color:var(--pal-09tnt); } .newform_row textarea { width:100%; margin:0px 0px 0px 0px; padding: 0.6rem 1rem; display:block; border: 2px solid var(--pal-05); border-radius: var(--brdr-rad1); background-color:var(--pal-09tnt); /* color:var(--pal-06); */ text-align: center; white-space: pre-line; } .txtarea { font-family: inherit; font-size: var(--base-fnt-size); line-height:auto; } .newform_row input:hover{ border-color: var(--pal-09); } .newform_row input:focus{ border-color: var(--pal-04); background-color:var(--pal-11); } .newform_row textarea:hover{ border-color: var(--pal-09); } .newform_row textarea:focus{ border-color: var(--pal-04); background-color:var(--pal-11); } .newform_row label { position: relative; left: -.2rem; top: -.6rem; padding:0 0.5rem; color:var(--pal-06); font-family: 'quicksand', sans-serif; font-weight: bold; font-size: calc(var(--base-fnt-size)-0.4rem); } .newform_row input[type="file"] { display: none; } .newform_row.centerFix { text-align: center; } .newform_row label.styleUpload { position:unset; display: inline-block; padding: 0.6rem; width: 50%; margin: 0 auto; border: 1px dashed var(--pal-14); border-radius: var(--brdr-rad1); font-family: inherit; font-size: var(--base-fnt-size); color:var(--pal-06); background-color:var(--pal-09tnt); cursor: pointer; } .newform_row label.newform_mandatory::before { color:red; content: '* '; } .newform_select { position: relative; left: -18rem; top: .8rem; } .newform_select ~ label { position: relative; left: 7.5rem; top: -1.8rem; } .inputform_rowShort{ width: 90%; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 3rem; gap:2rem; padding:.2rem; margin:1.5rem auto; vertical-align:top; border: 1px solid var(--brdr-hilt); } .inputform_fieldcolShort{ width: 2fr; min-width:9rem; height: auto; display: flex; justify-content: start; align-items: center; margin:0; border: 1px solid var(--brdr-hilt); } .inputform_textcolShort{ min-width: 7rem; font-weight:normal; display: flex; justify-content: right; align-items: center; border: 1px solid var(--brdr-hilt); border-radius: var(--brdr-rad1); } /* ONE COLUMN ROWS - PLINTH */ .newform_err, .newform_suxs{ border-radius: var(--brdr-rad2); display: flex; width:100%; min-width: 38rem; max-width: 44rem; margin: 0 auto; justify-content: center; align-items: center; color: var(--pal-FFF); margin: 1.5rem 0; border: 1px solid var(--brdr-hilt); } .gridRow-x1-err, .gridRow-x1-sucs { align-content:center; height: fit-content; padding: 1rem 2rem; border: 1px solid var(--brdr-hilt); * > p, h4, h5 { color: var(--pal-FFF); } } .newform_err { background-color: var(--pal-err); } .newform_suxs { background-color: var(--pal-13); } input.ad_report { height:fit-content; width:5rem; display:inline; margin:0rem; margin-left:1rem; border: 2px solid transparent; border-radius: var(--brdr-rad1); font-family: inherit; font-size: calc(var(--base-fnt-size) - .6rem); color: var(--pal-06); outline: none; padding: 0.6rem 1rem; background-color:transparent; } .hide_me {display: none;} input.ad_report + h6 { color: var(--pal-04); display: inline; font-size: 1.2rem; margin: 0rem;} .fontShow { gap:1rem; width:30rem; border-radius: var(--brdr-rad2); border: 2px solid var(--pal-04); padding: 3rem 0; margin:auto; } /* https://www.youtube.com/watch?v=DNXEORSk4GU&t=630s - kevin Powell */ .fontShow:popover-open { display: flex; flex-direction: column; } .fnts { align-items: center; border: 1px solid var(--brdr-hilt); text-align:center; margin: .1rem 0; /* > p, span { color: var(--pal-06); } */ } .fontShow button { border:none; } .fntT-1 { font-family: 'AkayaKanadaka', serif; font-size: var(--inpt-fnt-size); } .fntT-2 { font-family: 'gabarito', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-3 { font-family: 'chewy', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-4 { font-family: 'birthstone', serif; font-size: calc(.5rem + var(--inpt-fnt-size)); } .fntT-5 { font-family: 'englebert', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-6 { font-family: 'gabriela', serif; font-size: var(--inpt-fnt-size); } .fntT-7 { font-family: 'national park', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-8 { font-family: 'quicksand', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-9 { font-family: 'reenie beanie', sans-serif; font-size: calc(.7rem + var(--inpt-fnt-size));} .fntT-10 { font-family: 'quintessential', serif; font-size: var(--inpt-fnt-size); } .fntT-11 { font-family: 'noto', sans-serif; font-size: var(--inpt-fnt-size);} .fntT-1larger { font-family: 'AkayaKanadaka', serif; font-size: var(--inpt-fnt-size); } .fntT-2larger { font-family: 'gabarito', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-3larger { font-family: 'chewy', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-4larger { font-family: 'birthstone', serif; font-size: calc(.5rem + var(--inpt-fnt-size)); } .fntT-5larger { font-family: 'englebert', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-6larger { font-family: 'gabriela', serif; font-size: var(--inpt-fnt-size); } .fntT-7larger { font-family: 'national park', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-8larger { font-family: 'quicksand', sans-serif; font-size: var(--inpt-fnt-size); } .fntT-9larger { font-family: 'reenie beanie', sans-serif; font-size: calc(.7rem + var(--inpt-fnt-size));} .fntT-10larger { font-family: 'quintessential', serif; font-size: var(--inpt-fnt-size); } .fntT-11larger { font-family: 'noto', sans-serif; font-size: var(--inpt-fnt-size);} .fntT-1smaller { font-family: 'AkayaKanadaka', serif; font-size: var(--base-fnt-size); } .fntT-2smaller { font-family: 'gabarito', sans-serif; font-size: var(--base-fnt-size); } .fntT-3smaller { font-family: 'chewy', sans-serif; font-size: var(--base-fnt-size); } .fntT-4smaller { font-family: 'birthstone', serif; font-size: calc(.6rem + var(--base-fnt-size)); } .fntT-5smaller { font-family: 'englebert', sans-serif; font-size: var(--base-fnt-size); } .fntT-6smaller { font-family: 'gabriela', serif; font-size: var(--base-fnt-size); } .fntT-7smaller { font-family: 'national park', sans-serif; font-size: var(--base-fnt-size); } .fntT-8smaller { font-family: 'quicksand', sans-serif; font-size: var(--base-fnt-size); } .fntT-9smaller { font-family: 'reenie beanie', sans-serif; font-size: calc(.7rem + var(--base-fnt-size));} .fntT-10smaller { font-family: 'quintessential', serif; font-size: var(--base-fnt-size); } .fntT-11smaller { font-family: 'noto', sans-serif; font-size: var(--base-fnt-size);} .plinthStyle1, .inputform_textcolShort.fntT-1smaller, .inputform_textcolShort.fntT-1, .fntT-1smaller, .fntT-1larger { color: #9b0814} .plinthStyle2, .inputform_textcolShort.fntT-2smaller, .inputform_textcolShort.fntT-2, .fntT-2smaller, .fntT-2larger { color: #22588d} .plinthStyle3, .inputform_textcolShort.fntT-3smaller, .inputform_textcolShort.fntT-3, .fntT-3smaller, .fntT-3larger { color: #2f8b1d} .plinthStyle4, .inputform_textcolShort.fntT-4smaller, .inputform_textcolShort.fntT-4, .fntT-4smaller, .fntT-4larger { color: #77188f} .plinthStyle5, .inputform_textcolShort.fntT-5smaller, .inputform_textcolShort.fntT-5, .fntT-5smaller, .fntT-5larger { color: #bea14e} .plinthStyle6, .inputform_textcolShort.fntT-6smaller, .inputform_textcolShort.fntT-6, .fntT-6smaller, .fntT-6larger { color: #c0b300} .plinthStyle7, .inputform_textcolShort.fntT-7smaller, .inputform_textcolShort.fntT-7, .fntT-7smaller, .fntT-7larger { color: #e000a8} .plinthStyle8, .inputform_textcolShort.fntT-8smaller, .inputform_textcolShort.fntT-8, .fntT-8smaller, .fntT-8larger { color: #f3f5f7; text-shadow: 1px 1px 4px #000000;} .plinthStyle9, .inputform_textcolShort.fntT-9smaller, .inputform_textcolShort.fntT-9, .fntT-9smaller, .fntT-9larger { color: #0e1011} .plinthStyle10, .inputform_textcolShort.fntT-10smaller, .inputform_textcolShort.fntT-10, .fntT-10smaller, .fntT-10larger { color: #4cff46; text-shadow: 1px 1px 4px #000000;} .plinthStyle11, .inputform_textcolShort.fntT-11smaller, .inputform_textcolShort.fntT-11, .fntT-11smaller, .fntT-11larger { color: #0097a1; } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* **************** CHECKBOXES AND RADIO BUTTONS ************************* */ .checkbox-container, .radio-container { display: flex; align-items: center; margin-bottom:1.2rem; border: 1px solid var(--brdr-hilt); } .checkbox-container label, .radio-container label { cursor: pointer; display: flex; } .checkbox-container input[type='checkbox'] { cursor: pointer; width:30rem; opacity: 0; position: absolute; } .checkbox-container label::before { content: ''; width: 1.4em; height: 1.4em; border-radius: .15em; margin-right: .5em; border: 2px solid var(--pal-05); } .radio-container input[type='radio'] { cursor: pointer; width:30rem; opacity: 0; position: absolute; } .radio-container label::before { content: ''; width: 1em; height: 1em; border-radius: 50%; margin-right: .5em; border: 2px solid var(--pal-05); } .checkbox-container label:hover::before, .checkbox-container input[type='checkbox']:hover + label::before { background-color:var(--pal-08); } .checkbox-container input[type='checkbox']:checked + label::before { content: '\002714'; /* tick mark */ background-color:var(--pal-08); display:flex; justify-content: center; align-items: center; color: white; } .radio-container label:hover::before, .radio-container input[type='radio']:hover + label::before { background-color:var(--pal-08); } .radio-container input[type='radio']:checked + label::before { content: '\0025CF'; /* filled circle */ background-color:var(--pal-08); display:flex; justify-content: center; align-items: center; color: white; } /* ***************** FORMS *********************************** */ /* **************** END ************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* Card hero - blocked out space between header and and base of display */ #stage_shell { width: var(--card-width); max-height: var(--max-card-height); aspect-ratio: var(--use-aspect); border: 1px solid var(--brdr-hilt); padding:0; margin: 0 auto; } #stack { width: var(--card-width); max-height: var(--max-card-height); aspect-ratio: var(--use-aspect); /* max-width: 100%; */ overflow: hidden; display: grid; justify-content:center; align-items:start; background-color:transparent; border: 1px solid var(--brdr-hilt); transform:scale(.99); > * { grid-area: 1/1; } } #envBg, #theCard, #envPocket, #envPocket_Red, #envPocket_Grn, #envPocket_Bge, #envPocket_Pnk, #envPocket_Blk, #envPocket_Blu, #envPocket_Bur, #envPocket_Gld, #envPocket_Wht, #envPocket_Lim, #envPocket_Tel, #envPocket, #envSeal_holder, #envFlap, #envFlap_Red, #envFlap_Grn, #envFlap_Bge, #envFlap_Pnk, #envFlap_Blk, #envFlap_Blu, #envFlap_Bur, #envFlap_Gld, #envFlap_Wht, #envFlap_Lim, #envFlap_Tel { aspect-ratio: var(--use-aspect); width:100%; max-height: var(--max-card-height); max-width: 100%; overflow: hidden; } #envBg { /* base layer */ background-color: var(--pal-bg); /* see .eB_animate{} for animation */ } .eB_animate{ animation: slideOut .5s 1.5s ease-out 1 forwards; } #theCard { /* card image layer */ width: var(--card-width); max-width: 98%; min-height: 42vh; aspect-ratio: var(--use-aspect); overflow: hidden; border-radius: var(--brdr-rad1); /* background-color: var(--pal-05); */ display: grid; place-items:center; /* > * { grid-area: 1/2; apply grid stacking to all direct child elements of #theCard }*/ > img { object-fit:contain; width:100%; object-position: center; } } #navLayer { /* card image layer */ background-color: transparent; display: flex; align-content: center; justify-content: center; align-items: end; opacity: 0; /* see .nL_animate{} for animation */ } #navLayer .seeInside { width:100%; color: var(--pal-FFF); background-color: var(--pal-04); border: 1px solid var(--brdr-hilt); border-radius: var(--brdr-rad2); padding: 0.6rem 2rem 0.8rem 2rem; } .nL_animate { animation: fadeUpLayer .3s linear 2s 1 forwards; } @keyframes fadeUpLayer { 0% {opacity: 0;} 100% {opacity: 1;} } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ********* ENVELOPE POCKET ************************************************* */ #envPocket_Red, #envPocket_Grn, #envPocket_Bge, #envPocket_Pnk, #envPocket_Blk, #envPocket_Blu, #envPocket_Bur, #envPocket_Gld, #envPocket_Wht, #envPocket_Lim, #envPocket_Tel, #envPocket { /* envelope pocket layer */ background-position: center; background-repeat: no-repeat; /* see .eP_animate{} for animation */ } #envPocket_Red {background-image: url('assets/Envelope_pocket-Red.svg');} /* envelope pocket layer */ #envPocket_Grn {background-image: url('assets/Envelope_pocket-Green.svg');} /* envelope pocket layer */ #envPocket_Bge {background-image: url('assets/Envelope_pocket-Beige.svg');} /* envelope pocket layer */ #envPocket_Pnk {background-image: url('assets/Envelope_pocket-Pink.svg');} /* envelope pocket layer */ #envPocket_Blk {background-image: url('assets/Envelope_pocket-Black.svg');} /* envelope pocket layer */ #envPocket_Blu {background-image: url('assets/Envelope_pocket-Blue.svg');} /* envelope pocket layer */ #envPocket_Bur {background-image: url('assets/Envelope_pocket-Burgundy.svg');} /* envelope pocket layer */ #envPocket_Gld {background-image: url('assets/Envelope_pocket-Gold.svg');} /* envelope pocket layer */ #envPocket_Wht {background-image: url('assets/Envelope_pocket-White.svg');} /* envelope pocket layer */ #envPocket_Lim {background-image: url('assets/Envelope_pocket-Lime.svg');} /* envelope pocket layer */ #envPocket_Tel {background-image: url('assets/Envelope_pocket-Teal.svg');} /* envelope pocket layer */ #envPocket {background-image: url('assets/Envelope_pocket-W.svg');} /* envelope pocket layer */ .eP_animate{ animation: slideOut .5s 1.5s ease-out 1 forwards; } @keyframes slideOut { 0% {transform: translateX(0vh);} 100% {transform: translateX(-60vh);} } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ********* ENVELOPE FLAP ************************************************* */ #envFlap_Grn, #envFlap_Red, #envFlap_Bge, #envFlap_Pnk, #envFlap_Blk, #envFlap_Blu, #envFlap_Bur, #envFlap_Gld, #envFlap_Wht, #envFlap_Lim, #envFlap_Tel, #envFlap { /* envelope flap layer */ background-position: center; background-repeat: no-repeat; display: grid; justify-content:center; align-items:center; /* see .eF_animate{} for animation */ } #envFlap_Grn {background-image: url('assets/Envelope_flap-Green.svg');} /* envelope Flap layer */ #envFlap_Red {background-image: url('assets/Envelope_flap-Red.svg');} /* envelope Flap layer */ #envFlap_Bge {background-image: url('assets/Envelope_flap-Beige.svg');} /* envelope Flap layer */ #envFlap_Pnk {background-image: url('assets/Envelope_flap-Pink.svg');} /* envelope Flap layer */ #envFlap_Blk {background-image: url('assets/Envelope_flap-Black.svg');} /* envelope Flap layer */ #envFlap_Blu {background-image: url('assets/Envelope_flap-Blue.svg');} /* envelopeFlapn layer */ #envFlap_Bur {background-image: url('assets/Envelope_flap-Burgundy.svg');} /* envelope Flap layer */ #envFlap_Gld {background-image: url('assets/Envelope_flap-Gold.svg');} /* envelope Flap layer */ #envFlap_Wht {background-image: url('assets/Envelope_flap-White.svg');} /* envelope Flap layer */ #envFlap_Lim {background-image: url('assets/Envelope_flap-Lime.svg');} /* envelope Flap layer */ #envFlap_Tel {background-image: url('assets/Envelope_flap-Teal.svg');} /* envelope Flap layer */ #envFlap {background-image: url('assets/Envelope_flap-W.svg');} /* envelope Flap layer */ .cardBase_Grn{background-color:var(--env-02) !important; } .cardBase_Red{background-color:var(--env-01) !important; } .cardBase_Bge{background-color:var(--env-03) !important; } .cardBase_Pnk{background-color:var(--env-04) !important; } .cardBase_Blk{background-color:var(--env-05) !important; } .cardBase_Blu{background-color:var(--env-06) !important; } .cardBase_Bur{background-color:var(--env-07) !important; } .cardBase_Gld{background-color:var(--env-08) !important; } .cardBase_Wht{background-color:var(--env-09) !important; } .cardBase_Lim{background-color:var(--env-10) !important; } .cardBase_Tel{background-color:var(--env-11) !important; } .eF_animate { animation: openEnv .4s 1s ease-in 1 forwards; } @keyframes openEnv { 0% {transform: translateX(0vh); opacity: 100; } 1% {transform: rotateY(10deg) translateX(.8vh);} 2% {transform: rotateY(20deg) translateX(2vh);} 3% {transform: rotateY(30deg) translateX(4.7vh);} 7% {transform: rotateY(40deg) translateX(9vh);} 15% {transform: rotateY(50deg) translateX(16.5vh);} 30% {transform: rotateY(60deg) translateX(30vh);} 50% {transform: rotateY(65deg) translateX(40.5vh);} 70% {transform: rotateY(70deg) translateX(57vh);} 89% {transform: rotateY(72deg) translateX(66vh); opacity: 100; } 94% {transform: rotateY(75deg) translateX(85vh);} 100% {transform: rotateY(80deg) translateX(142vh); opacity: .01; } } #envSeal_holder { display: grid; justify-content: center; align-items: center; border: 1px solid var(--brdr-hilt); } #envSeal { /* width: 16rem; */ aspect-ratio: 1/1; border-radius:100%; margin-top:-2vh; margin-left: -8vh; background-image: url('assets/wax_seal2.svg'); background-position: center; background-repeat: no-repeat; background-size: cover; display: grid; justify-content: center; align-items: center; color:transparent; /* see .eS_animate{} for animation */ } .newform_row #envSeal { /* preview variant */ width: 9rem; margin-top:-1vh; margin-left: -4vh; } .eS_animate{ animation: fadeButton .3s .5s ease-out 1 forwards; } /* #envSeal::after { content: 'open'; } */ #envSeal a {font-family: 'chewy', sans-serif; text-decoration: none; font-size: 4.6rem; /* text-shadow: 1px 0 16px #290141; */ } .newform_row #envSeal a {font-family: 'chewy', sans-serif; /* preview variant */ font-size: 3rem; } #envSeal a:link { color:transparent;text-decoration: none} #envSeal a:active { color:transparent;text-decoration: none} #envSeal a:visited { color:transparent;text-decoration: none} #envSeal a:hover { color:transparent;text-decoration: none;} .seal_gradient { /* background: linear-gradient(270deg, #b96459ee 10%, #830137ea 100%); background-clip: text; */ color: transparent; } @keyframes fadeButton { 0% {opacity: 1;} 100% {opacity: 0;} } .hidden { display:none; } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* card messages sections */ /* CARD GREETINGS */ .greetHolder-0msg, .greetHolder-1msg { /* generic container for card greeting */ /* variation for one message cards */ width: var(--card-width); /* max-height: var(--max-card-height); */ /* aspect-ratio: var(--use-aspect); */ aspect-ratio: 10/min(15,500); /* aspect ratio for message container - allows for more messages without shrinking text too much */ /* see .greetHolder_back{} for card back variation */ max-width: 60vh; display: flex; justify-content: center; align-items: center; border: 1px solid var(--brdr-hilt); } .greetHolder-1msg { /* page variation for single message view*/ flex-direction:column; gap: 3rem; } .card-Greeting { /* card greeting */ width: 60%; border: 1px solid var(--brdr-hilt); white-space: pre-line; text-align: center; } .greetHolder, .greetHolder_back { /* generic container for card messages */ /* variations for multiple messages */ display: grid; grid-template-columns: repeat(auto-fit,minmax(18rem,1fr)); gap: 1rem; width: var(--card-width); /* width: clamp(280px, var(--card-width), 98%); */ margin: 1rem auto; padding:2rem 1rem; justify-items: center; align-items: center; border: 1px solid var(--brdr-hilt); } .greetHolder_back { aspect-ratio: var(--use-aspect); max-height: var(--max-card-height); background-color: var(--card-back); border: 1px solid var(--brdr-hilt); } .greetHolder { aspect-ratio: 10/min(15,500); /* aspect ratio for message container - allows for more messages without shrinking text too much */ /* see .greetHolder_back{} for card back variation */ } #stage_shell_greetings { max-width:44rem; border: 1px solid var(--brdr-hilt); margin: 1rem 1rem 0rem 1rem; } .oneMsg{ /* Container for individual messages*/ /* holds .MsgShell */ display: flex; flex-direction:column; justify-content: center; align-items: center; border: 1px solid var(--brdr-hilt); } .editTools{ display:flex; gap: 2rem; } .editIcon { width: fit-content; border: 1px solid var(--brdr-hilt); } .MsgShell{ /* Shell container for image and optional pic */ /* holds .Msg-Pix & .Msg-Copy */ min-height: 6rem; display: flex; flex-direction:column; border: 1px solid var(--brdr-hilt); text-align: center; } .Msg-Pix { /* object-fit:contain; */ margin: 0 auto; > img { max-width: 18rem; } } .Msg-Copy { max-width: 100%; height: fit-content; white-space: pre-line; padding: .5rem; margin-bottom:3rem; } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* Card manager Controls card management tools are controlled from this panel -- Note the three states */ .cardMangr { width: var(--page-max-width); min-width: 40rem; max-width: 60rem; display: flex; flex-direction: column; justify-content:center; align-items: center; height:fit-content; padding:1rem; background-color: var(--pal-03); margin: 1rem auto; border-radius: var(--brdr-rad3); } .gridContainer-cardMangr, .gridContainer-cardMangr1, .gridContainer-cardMangr2, .gridContainer-cardMangr3 { width:100%; display: grid; grid-auto-columns: repeat(3, 1fr); /* grid-auto-rows: 1fr; */ grid-auto-rows: 6rem; gap:1rem; text-align: left; cursor: pointer; border: 1px solid var(--brdr-hilt); } .gridContainer-cardMangr { /* FULL SET */ grid-template-areas: "box-1 box-1 box-1" "box-2 box-2 box-2" "box-3 box-4 box-4" "box-5 box-5 box-6" "box-7 box-7 box-7" "box-8 box-8 box-9"; } .gridContainer-cardMangr1 { /* PRE CHECKOUT SET */ grid-template-areas: "box-1 box-1 box-1" "box-2 box-2 box-2" "box-3 box-4 box-4"; } .gridContainer-cardMangr2 { /* CARD EDIT MODE */ grid-template-areas: "box-1 box-1 box-1" "box-2 box-2 box-2" "box-5 box-5 box-6" "box-7 box-7 box-7"; } .gridContainer-cardMangr3 { /* CARD POST-SEND */ grid-template-areas: /* "box-1 box-1 box-1" */ "box-2 box-2 box-2" "box-7 box-7 box-7" "box-8 box-8 box-9"; } .cardMangr_title, .cardMangr_editor, .cardMangr_checkout, .cardMangr_checkoutMsg, .cardMangr_cardPreview, .cardMangr_cardSend, .cardMangr_shareLink, .cardMangr_resendMsg, .cardMangr_resendLnk { display: flex; width:100%; justify-content: flex-start; align-items: center; overflow: hidden; border-radius: .5rem; gap:1rem; background-color: var(--pal-04); color: var(--pal-FFF); border: 1px solid var(--brdr-hilt); p { margin: 0rem 1rem; font-weight: 400; color: var(--pal-FFF); } } .cardMangr_title { font-family:'Englebert', 'trebuchet ms', tahoma, sans-serif; color: var(--pal-05); font-size: 2.6rem; } .cardMangr_shareLink p, .cardMangr_checkoutMsg p, .cardMangr_resendMsg p { color: var(--pal-05); font-size: 1.4rem; line-height: 1.8rem; } .cardMangr_resendMsg p { font-weight: bold; } .cardMangr_shareLink a { color: var(--pal-15); font-weight: 600; font-size: 1.4rem; line-height: 1.8rem; } /* message containers have background color and padding */ .cardMangr_title, .cardMangr_checkoutMsg, .cardMangr_shareLink, .cardMangr_resendMsg { background-color: var(--pal-03); } .countDisk { display: flex; width:3.4rem; height:3.4rem; aspect-ratio: 1/1; background:transparent; justify-content: center; align-items: center; overflow: hidden; margin-left: 2rem; > P { font-size: 3rem; font-weight: 800; color: var(--pal-09); } } .cardMangr_editor { background-color: var(--pal-12);} .cardMangr_checkout { background-color: var(--pal-13);} .cardMangr_cardPreview { background-color: var(--pal-14);} .cardMangr_cardSend { background-color: var(--pal-15);} .cardMangr_resendLnk { background-color: var(--pal-16);} .gridContainer-cardMangr3 .cardMangr_editor { background-color: var(--pal-08); } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* share Links functionality */ .shareContainer { display: flex; border: 1px solid var(--brdr-hilt); height: fit-content; } .eMailShare, .linkShare, .whatsAppShare, .genericAppShare { aspect-ratio: 1/1; width:4.5rem; margin: 1rem; border-radius: var(--brdr-rad2); border: 1px solid var(--brdr-hilt); display: flex; justify-items: center; align-items: center; cursor: pointer; background-position: center; background-repeat: no-repeat; color: var(--pal-FFF); > p { font-weight:600; color: var(--pal-FFF); } } .eMailShare { background-color: rgb(24, 107, 213); background-image: url('data:image/svg+xml,'); } .linkShare { background-color: var(--pal-12); background-image: url('data:image/svg+xml,'); } .whatsAppShare { background-color: rgb(59, 180, 117); background-image: url('data:image/svg+xml,'); } .genericAppShare { background-color: transparent; background-image: url('data:image/svg+xml,'); } .infoIcon { background-color: transparent; background-image: url('data:image/svg+xml,'); } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* CSS Accordion */ /* Core styles/functionality */ .tab { position: relative; } .tab input { position: absolute; opacity: 0; z-index: -1; } .tab__content { max-height: 0; overflow: hidden; transition: all 0.35s; } .tab input:checked ~ .tab__content { max-height: fit-content; } /* Visual styles */ .accordion { color: var(--theme); border: 2px solid; border-radius: 0.5rem; overflow: hidden; margin:1rem 0rem; } .tab__label, .tab__close { display: flex; color: white; background: var(--theme); cursor: pointer; } .tab__label { justify-content: space-between; padding: 1rem; } .tab__label::after { content: "\276F"; width: 1em; height: 1em; text-align: center; transform: rotate(90deg); transition: all 0.35s; } .tab input:checked + .tab__label::after { transform: rotate(270deg); } .tab__content p { margin: 0; padding: 1rem; } .tab__close { justify-content: flex-end; padding: 0.5rem 1rem; font-size: 1.2rem; } .accordion--radio { --theme: var(--secondary); } /* Arrow animation */ .tab input:not(:checked) + .tab__label:hover::after { animation: bounce .5s infinite; } @keyframes bounce { 25% { transform: rotate(90deg) translate(.25rem); } 75% { transform: rotate(90deg) translate(-.25rem); } } details { margin: 1rem 0 0 0; } summary { font-weight: 600; margin: 1rem 0; } ::marker { color: var(--pal-04); } /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* CARD CAROUSEL*/ /*https://www.youtube.com/watch?v=gmI5nvzv170&t=26s*/ .displayCarousel{ overflow-x: auto; margin: 1rem auto; display: flex; gap: 1rem; border: 1px solid var(--brdr-hilt); scroll-behavior: smooth; anchor-name:--carousel; scroll-snap-type: x mandatory; /* scroll-marker-group: after; */ width: 90%; } .displayCarousel::scroll-marker-group { display: flex; justify-content: center; gap: .5em; } .displayCarousel::-webkit-scrollbar { display: none; }.XXdisplayCarousel::scroll-button(right), .XXdisplayCarousel::scroll-button(left){ content: '\276F'; border: none; background-color: var(--pal-04); font-family: 'noto'; font-size: 3rem; color: white; height:40px; width:40px; border-radius: 50%; cursor: pointer; position: fixed; position-anchor: --carousel; position-area: right center; translate: -50%; }.XXdisplayCarousel::scroll-button(left){ content: '\276E'; position-area: left center; translate: 50%; } .XXdisplayCarousel::scroll-button(right):disabled, .XXdisplayCarousel::scroll-button(left):disabled{ background-color: var(--pal-04a); opacity: 50%; cursor:auto; } .group { /* carousel animator */ display: flex; align-items: center; justify-content: center; gap: 1em; animation: spin 20s infinite linear; } .dcCard { scroll-snap-align: start; flex: 0 0 14em; height:24rem; background-color: transparent; padding: .5em; justify-content: center; justify-items: center; align-content: center; align-items: center; border-radius: var(--brdr-rad2); border: 1px solid var(--brdr-hilt); } .dcCard::scroll-marker { content: ''; height: .8em; width: .8em; background-color: var(--pal-05); border-radius: 50%; }.dcCard::scroll-marker:target-current { background-color: var(--pal-04); } .dcCntnt { justify-items: center; align-items: center; text-align: center; background-color: transparent; border: 1px solid var(--brdr-hilt); > img { height:22rem; object-fit:scale-down; object-position: center; } } /* CARD CAROUSEL ANIMATOR */ /* https://www.youtube.com/watch?v=KD1Yo8a_Qis */ @keyframes spin { from {translate: 0;} to {translate: -100%;} } /* @media(max-width: 420px){ // removed as it conflicted with carousel animation .dcCard { flex: 0 0 90%;} } */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* ******************************************************************************* */ /* RESPONSIVE ADJUSTMENTS FOR GRID CONTAINERS */ /* Adjust grid layouts for different screen sizes */ .cont-G-x3 h1, .cont-G-x2 h1, .cont-G-x1 h1 {color: var(--pal-05);} .cont-G-x3 h2, .cont-G-x2 h2, .cont-G-x1 h2 {color: var(--pal-06);} @media screen and (max-width: 1200px){ /*-@media var lg */ :root { /* 1rem = 16px */ font-size: 50%; /* 1rem = (16px x 50%) == 8px*/ } .navbar .li a, .navbar .links a, .dropdown_menu li a {font-size: 1.5rem;} .dropdown_menu {display: none;} #envSeal { margin-top:-2vh; margin-left: -8vh; } #envSeal a {font-size: 6rem; /* text-shadow: 1px 0 16px #290141; */ } } @media screen and (max-width: 1024px){ /*-@media var md */ :root { /* 1rem = 16px */ font-size: 50%; /* 1rem = (16px x 50%) == 8px*/ } .navbar .li a, .navbar .links a, .dropdown_menu li a {font-size: 1.5rem;} .dropdown_menu {display: none;} } @media screen and (max-width: 768px){ /*-@media var sm */ .inner_shell, #header_shell {margin: 0rem;width:100%;} .gridContainer-x3 { display: grid; grid-template-columns: repeat(2, 1fr); } .newform_row, .newform {width:100%; /* min-width: 34rem; */ max-width: 40rem;} .gridRow-x1{width:80%;} .gridContainer-Ben1 { grid-auto-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap:1rem; grid-template-areas: "box-1 box-1 box-3" "box-2 box-2 box-3" "box-4 box-5 box-5"; margin: 1.5rem 4rem;} .gridContainer-Ben2 { grid-auto-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-gap:1rem; grid-template-areas: "box-1 box-2" "box-1 box-3" "box-4 box-3"; margin: 1.5rem 4rem;} .gridContainer-bComp { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap:1rem; grid-template-areas: "box-1 box-1 box-1" "box-2 box-3 box-4"; margin: .5rem 6rem; border: 1px solid var(--brdr-hilt);} /* carousel */ .carousel-ShowPx { margin:1rem .5rem; } .carouselRow-ShowPx { animation: scroll 5s linear infinite; } .carousel-F-ShowPx p {color: var(--pal-000); font-size: 1.6rem; line-height: 1.8rem; margin:0;} /* nav controls */ .navbar .links, .navbar .action_btn {display:none;} .navbar .toggle_btn {display: block;} .dropdown_menu {display: block;} #layer6 {width:12vh;font-size:4.4rem;margin-left:-8vh;} } @media screen and (max-width: 576px){ /*-@media var xs */ :root { /* 1rem = 16px */ font-size: 50%; /* 1rem = (16px x 50%) == 8px*/ } #footer_shell { padding:0 3rem;} .gridContainer-x3 { display: grid; grid-template-columns: repeat(1, 1fr); } .gridContainer-x2 { display: grid; grid-template-columns: repeat(1, 1fr); } .gridRow-x1{width:90%;} .gridContainer-Ben1 { grid-auto-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-gap:1rem; grid-template-areas: "box-1 box-2" "box-3 box-3" "box-4 box-5"; margin: 1rem 3rem;} .gridContainer-Ben2 { margin: 1.5rem 2rem;} .cardx-1 { width: 25rem; margin: 0 2.5rem; font-weight: normal; } /* nav controls */ .dropdown_menu {left:2rem;width: unset;} .dropdown_menu li a {font-size: 2.2rem;} .navbar .logo a {font-size: 3.4rem;} .reveal_navbar .logo a {font-size: 3.8rem;} #layer6 {width: 11vh;font-size: 4rem;} .backButton{height:2.6rem;width:2.6rem;border-radius:100vw;} /* .backButton::after {font-size: 2rem;content: "\276E ";position:relative; left:-.5rem;top:-.1rem;} */ .backButton::after {content: url('assets/arrow-left-o.svg');position:relative; left:-.5rem;top:-.1rem;} } @media screen and (max-width: 480px){ /*-@media var xs */ /* only for extreme adjustments to very small screens <480px; */ #footer_shell { padding:0 2rem;} #envSeal { width: 14rem; margin-top:-2vh; margin-left: -8vh; } #envSeal a {font-size: 5rem; /* text-shadow: 1px 0 16px #290141; */} .homeCopyWindow {padding: 0 4rem;} } .showHide { /* show/hide elements-Show only on smaller screens*/ display:none; }