/* fonts.css */ /* # agdasima-lato-meg - Do Not Remove */ :root { --fnt-t: 'Rubik', sans-serif; --fnt-m: 'Ubuntu', sans-serif; --fnt-t-tt: none; /* Title Big (Display) */ --fnt-t-big-ff: var(--fnt-t); /* { friendly: 'Title Big (Display) Font Family' } */ --fnt-t-big-ls: -0.05em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Display Letter Spacing' } */ --fnt-t-big-w: 700; /* { friendly: 'Title Big (Display) Font Weight' } */ --fnt-t-big-tt: var(--fnt-t-tt); /* { friendly: 'Title Big (Display) Case' } */ --fnt-t-big-fs: normal; /* { friendly: 'Title Big Font Style' } */ /* Callout */ --fnt-t-co-ff: var(--fnt-t); /* { friendly: 'Callout Font Family' } */ --fnt-t-co-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Callout Letter Spacing' } */ --fnt-t-co-w: 700; /* { friendly: 'Callout Font Weight' } */ --fnt-t-co-tt: var(--fnt-t-tt); /* { friendly: 'Callout Case' } */ --fnt-t-co-fs: normal; /* { friendly: 'Callout Font Style' } */ /* Kicker */ --fnt-t-k-ff: var(--fnt-t); /* { friendly: 'Kicker Font Family' } */ --fnt-t-k-ls: 0.7em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Kicker Letter Spacing' } */ --fnt-t-k-w: 700; /* { friendly: 'Kicker Font Weight' } */ --fnt-t-k-tt: var(--fnt-t-tt); /* { friendly: 'Kicker Case' } */ --fnt-t-k-fs: normal; /* { friendly: 'Kicker Font Style' } */ /* Title 1 (h1) */ --fnt-t-1-ff: var(--fnt-t); /* { friendly: 'Title 1 (h1) Font Family' } */ --fnt-t-1-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Title 1 (h1) Letter Spacing' } */ --fnt-t-1-w: 700; /* { friendly: 'Title 1 (h1) Font Weight' } */ --fnt-t-1-tt: var(--fnt-t-tt); /* { friendly: 'Title 1 (h1) Case' } */ --fnt-t-1-fs: normal; /* { friendly: 'Title 1 Font Style' } */ /* Title 2 (h2) */ --fnt-t-2-ff: var(--fnt-t); /* { friendly: 'Title 2 (h2) Font Family' } */ --fnt-t-2-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Title 2 (h2) Letter Spacing' } */ --fnt-t-2-w: 700; /* { friendly: 'Title 2 (h2) Font Weight' } */ --fnt-t-2-tt: var(--fnt-t-tt); /* { friendly: 'Title 2 (h2) Case' } */ --fnt-t-2-fs: normal; /* { friendly: 'Title 2 Font Style' } */ /* Title 3 (h3) */ --fnt-t-3-ff: var(--fnt-m); /* { friendly: 'Title 3 (h3) Font Family' } */ --fnt-t-3-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Title 3 (h3) Letter Spacing' } */ --fnt-t-3-w: 700; /* { friendly: 'Title 3 (h3) Font Weight' } */ --fnt-t-3-tt: var(--fnt-t-tt); /* { friendly: 'Title 3 (h3) Case' } */ --fnt-t-3-fs: normal; /* { friendly: 'Title 3 Font Style' } */ /* Title 4 (h4) */ --fnt-t-4-ff: var(--fnt-m); /* { friendly: 'Title 4 (h4) Font Family' } */ --fnt-t-4-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Title 4 (h4) Letter Spacing' } */ --fnt-t-4-w: 700; /* { friendly: 'Title 4 (h4) Font Weight' } */ --fnt-t-4-tt: var(--fnt-t-tt); /* { friendly: 'Title 4 (h4) Case' } */ --fnt-t-4-fs: normal; /* { friendly: 'Title 4 Font Style' } */ /* Title 5 (h5) */ --fnt-t-5-ff: var(--fnt-m); /* { friendly: 'Title 5 (h5) Font Family' } */ --fnt-t-5-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Title 5 (h5) Letter Spacing' } */ --fnt-t-5-w: 400; /* { friendly: 'Title 5 (h5) Font Weight' } */ --fnt-t-5-tt: var(--fnt-t-tt); /* { friendly: 'Title 5 (h5) Case' } */ --fnt-t-5-fs: normal; /* { friendly: 'Title 5 Font Style' } */ /* Title 6 (h6) */ --fnt-t-6-ff: var(--fnt-t); /* { friendly: 'Title 6 (h6) Font Family' } */ --fnt-t-6-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Title 6 (h6) Letter Spacing' } */ --fnt-t-6-w: 700; /* { friendly: 'Title 6 (h6) Font Weight' } */ --fnt-t-6-tt: var(--fnt-t-tt); /* { friendly: 'Title 6 (h6) Case' } */ --fnt-t-6-fs: normal; /* { friendly: 'Title 6 Font Style' } */ /* Primary Nav */ --fnt-nv-pry-ff: var(--fnt-m); /* { friendly: 'Primary Nav Link Font Family' } */ --fnt-nv-pry-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Primary Nav Link Letter Spacing' } */ --fnt-nv-pry-w: 700; /* { friendly: 'Primary Nav Link Font Weight' } */ --fnt-nv-pry-tt: none; /* { friendly: 'Primary Nav Link Case' } */ --fnt-nv-pry-fs: normal; /* { friendly: 'Primary Nav Link Style' } */ /* Secondary Nav */ --fnt-nv-sec-ff: var(--fnt-m); /* { friendly: 'Secondary Nav Link Font Family' } */ --fnt-nv-sec-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Secondary Nav Link Letter Spacing' } */ --fnt-nv-sec-w: 700; /* { friendly: 'Secondary Nav Link Font Weight' } */ --fnt-nv-sec-tt: none; /* { friendly: 'Secondary Nav Link Case' } */ --fnt-nv-sec-fs: normal; /* { friendly: 'Secondary Nav Link Style' } */ /* Quote */ --fnt-qte-ff: var(--fnt-t); /* { friendly: 'Quote Font Family' } */ --fnt-qte-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Quote Line Height' } */ --fnt-qte-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Quote Letter Spacing' } */ --fnt-qte-w: 700; /* { friendly: 'Quote Font Weight' } */ --fnt-qte-tt: none; /* { friendly: 'Quote Case' } */ --fnt-qte-fs: normal; /* { friendly: 'Quote Font Style' } */ /* Author */ --fnt-atr-ff: var(--fnt-m); /* { friendly: 'Author Font Family' } */ --fnt-atr-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Author Line Height' } */ --fnt-atr-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Author Letter Spacing' } */ --fnt-atr-w: 700; /* { friendly: 'Author Font Weight' } */ --fnt-atr-tt: none; /* { friendly: 'Author Case' } */ --fnt-atr-fs: normal; /* { friendly: 'Author Font Style' } */ /* Phone */ --fnt-phn-ff: var(--fnt-t); /* { friendly: 'Phone Font Family' } */ --fnt-phn-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Phone Line Height' } */ --fnt-phn-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Phone Letter Spacing' } */ --fnt-phn-w: 700; /* { friendly: 'Phone Font Weight' } */ --fnt-phn-fs: normal; /* { friendly: 'Phone Font Style' } */ /* Coupon Value */ --fnt-t-cpn-ff: var(--fnt-t); /* { friendly: 'Coupon Value Font Family' } */ --fnt-t-cpn-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Coupon Value Line Height' } */ --fnt-t-cpn-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Coupon Value Letter Spacing' } */ --fnt-t-cpn-w: 700; /* { friendly: 'Coupon Value Font Weight' } */ --fnt-t-cpn-tt: uppercase; /* { friendly: 'Coupon Value Case' } */ --fnt-t-cpn-fs: normal; /* { friendly: 'Coupon Value Font Style' } */ /* Item Title */ --fnt-t-itm-ff: var(--fnt-m); /* { friendly: 'Item Title Font Family' } */ --fnt-t-itm-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Item Title Line Height' } */ --fnt-t-itm-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Item Title Letter Spacing' } */ --fnt-t-itm-w: 700; /* { friendly: 'Item Title Font Weight' } */ --fnt-t-itm-tt: none; /* { friendly: 'Item Title Case' } */ --fnt-t-itm-fs: normal; /* { friendly: 'Item Title Font Style' } */ /* Note */ --fnt-t-nt-ff: var(--fnt-m); /* { friendly: 'Note Font Family' } */ --fnt-t-nt-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Note Line Height' } */ --fnt-t-nt-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Note Letter Spacing' } */ --fnt-t-nt-w: 400; /* { friendly: 'Note Font Weight' } */ --fnt-t-nt-tt: none; /* { friendly: 'Note Case' } */ --fnt-t-nt-fs: normal; /* { friendly: 'Note Font Style' } */ /* Tag */ --tag-ff: var(--fnt-m); /* { friendly: 'Tag Font Family' } */ --tag-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Tag Letter Spacing' } */ --tag-w: 700; /* { friendly: 'Tag Font Weight' } */ --tag-tt: none; /* { friendly: 'Tag Case' } */ --tag-fs: normal; /* { friendly: 'Tag Font Style' } */ /* Button */ --btn-ff: var(--fnt-t); /* { friendly: 'Button Font Family' } */ --btn-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Button Line Height' } */ --btn-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Button Letter Spacing' } */ --btn-w: 700; /* { friendly: 'Button Font Weight' } */ --btn-tt: uppercase; /* { friendly: 'Button Case' } */ --btn-fs: normal; /* { friendly: 'Button Font Style' } */ /* Form Label */ --fnt-frm-ff: var(--fnt-m); /* { friendly: 'Form Label Font Family' } */ --fnt-frm-lh: 1.2; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Form Label Line Height' } */ --fnt-frm-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Form Label Letter Spacing' } */ --fnt-frm-w: 400; /* { friendly: 'Form Label Font Weight' } */ --fnt-frm-tt: none; /* { friendly: 'Form Label Case' } */ --fnt-frm-fs: normal; /* { friendly: 'Form Font Style' } */ } /* font-declaration.css */ /* Variable Declarations */ :root { --fnt-cnt-s: 1rem; --fnt-cnt-lh: 1.5; --fnt-pl-s: 1.11rem; /* Title Big (Display) */ --fnt-t-big-s: 2.5rem; /* { friendly: 'Title Big (Display) Font Size - Mobile' } */ --fnt-t-big-s-d: 8.29rem; /* { friendly: 'Title Big (Display) Font Size - Desktop' } */ --fnt-t-big-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Title Big (Display) Line Height' } */ --fnt-t-big-sml-s: 2.3rem; /* { friendly: 'Title Big (Display) Font Size Small - Mobile' } */ --fnt-t-big-sml-s-d: 6.6rem; /* { friendly: 'Title Big (Display) Font Size Small - Desktop' } */ --fnt-t-big-smlr-s: 2.1rem; /* { friendly: 'Title Big (Display) Font Size Smaller - Mobile' } */ --fnt-t-big-smlr-s-d: 5rem; /* { friendly: 'Title Big (Display) Font Size Smaller - Desktop' } */ /* Callout */ --fnt-t-co-s: 2rem; /* { friendly: 'Callout Font Size' } */ --fnt-t-co-s-d: 3.1rem; /* { friendly: 'Callout Font Size' } */ --fnt-t-co-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Callout Line Height' } */ /* Kicker */ --fnt-t-k-s: 1.222rem; /* { friendly: 'Kicker Font Size' } */ --fnt-t-k-s-d: 2.111rem; /* { friendly: 'Kicker Font Size' } */ --fnt-t-k-lh: normal; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Kicker Line Height' } */ --fnt-t-k-sml-s: 1.1rem; /* { friendly: 'Kicker Font Size Small - Mobile' } */ --fnt-t-k-sml-s-d: 1.7rem; /* { friendly: 'Kicker Font Size Small - Desktop' } */ --fnt-t-k-smlr-s: 1rem; /* { friendly: 'Kicker Font Size Smaller - Mobile' } */ --fnt-t-k-smlr-s-d: 1.4rem; /* { friendly: 'Kicker Font Size Smaller - Desktop' } */ /* Title 1 (h1) */ --fnt-t-1-s: 2rem; /* { friendly: 'Title 1 (h1) Font Size' } */ --fnt-t-1-s-d: 4.044rem; /* { friendly: 'Title 1 (h1) Font Size' } */ --fnt-t-1-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Title 1 (h1) Line Height' } */ --fnt-t-1-sml-s: 1.85rem; /* { friendly: 'Title 1 (h1) Font Size Small - Mobile' } */ --fnt-t-1-sml-s-d: 3.5rem; /* { friendly: 'Title 1 (h1) Font Size Small - Desktop' } */ --fnt-t-1-smlr-s: 1.7rem; /* { friendly: 'Title 1 (h1) Font Size Smaller - Mobile' } */ --fnt-t-1-smlr-s-d: 3rem; /* { friendly: 'Title 1 (h1) Font Size Smaller - Desktop' } */ /* Title 2 (h2) */ --fnt-t-2-s: 1.37rem; /* { friendly: 'Title 2 (h2) Font Size' } */ --fnt-t-2-s-d: 1.778rem; /* { friendly: 'Title 2 (h2) Font Size' } */ --fnt-t-2-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Title 2 (h2) Line Height' } */ --fnt-t-2-sml-s: 1.35rem; /* { friendly: 'Title 2 (h2) Font Size Small - Mobile' } */ --fnt-t-2-sml-s-d: 1.55rem; /* { friendly: 'Title 2 (h2) Font Size Small - Desktop' } */ /* Title 3 (h3) */ --fnt-t-3-s: 1.37rem; /* { friendly: 'Title 3 (h3) Font Size' } */ --fnt-t-3-s-d: 1.333rem; /* { friendly: 'Title 3 (h3) Font Size' } */ --fnt-t-3-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Title 3 (h3) Line Height' } */ /* Title 4 (h4) */ --fnt-t-4-s: 1.25rem; /* { friendly: 'Title 4 (h4) Font Size' } */ --fnt-t-4-s-d: 1.22rem; /* { friendly: 'Title 4 (h4) Font Size' } */ --fnt-t-4-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Title 4 (h4) Line Height' } */ /* Title 5 (h5) */ --fnt-t-5-s: 1.25rem; /* { friendly: 'Title 5 (h5) Font Size' } */ --fnt-t-5-s-d: 1.111rem; /* { friendly: 'Title 5 (h5) Font Size' } */ --fnt-t-5-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Title 5 (h5) Line Height' } */ /* Title 6 (h6) */ --fnt-t-6-s: 1.125rem; /* { friendly: 'Title 6 (h6) Font Size' } */ --fnt-t-6-s-d: 1rem; /* { friendly: 'Title 6 (h6) Font Size' } */ --fnt-t-6-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Title 6 (h6) Line Height' } */ /* Primary Nav */ --fnt-nv-pry-s: 1rem; /* { friendly: 'Primary Nav Link Font Size' } */ --fnt-nv-pry-s-d: 1rem; /* { friendly: 'Primary Nav Link Font Size' } */ --fnt-nv-pry-ls: 0em; /* { min: -0.05, max: 0.5, step: 0.01, friendly: 'Primary Nav Link Letter Spacing' } */ /* Secondary Nav */ --fnt-nv-sec-s: 0.875rem; /* { friendly: 'Secondary Nav Link Font Size' } */ --fnt-nv-sec-s-d: 0.889rem; /* { friendly: 'Secondary Nav Link Font Size' } */ /* Quote */ --fnt-qte-s: 1.5rem; /* { friendly: 'Quote Font Size' } */ --fnt-qte-s-d: 1.78rem; /* { friendly: 'Quote Font Size' } */ --fnt-qte-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Quote Line Height' } */ /* Author */ --fnt-atr-s: 1rem; /* { friendly: 'Author Font Size' } */ --fnt-atr-s-d: 1rem; /* { friendly: 'Author Font Size' } */ --fnt-atr-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Author Line Height' } */ /* Phone */ --fnt-phn-s: 1.125rem; /* { friendly: 'Phone Font Size' } */ --fnt-phn-s-d: 1.333rem; /* { friendly: 'Phone Font Size' } */ --fnt-phn-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Phone Line Height' } */ /* Coupon Value */ --fnt-t-cpn-s: 2rem; /* { friendly: 'Coupon Value Font Size - Mobile' } */ --fnt-t-cpn-s-d: 2.67rem; /* { friendly: 'Coupon Value Font Size - Desktop' } */ --fnt-t-cpn-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Coupon Value Line Height' } */ /* Item Title */ --fnt-t-itm-s: 1.25rem; /* { friendly: 'Item Title Font Size' } */ --fnt-t-itm-s-d: 1.333rem; /* { friendly: 'Item Title Font Size' } */ --fnt-t-itm-lh: 1.5; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Item Title Line Height' } */ /* Note */ --fnt-t-nt-s: 1rem; /* { friendly: 'Note Font Size' } */ --fnt-t-nt-s-d: 0.889rem; /* { friendly: 'Note Font Size' } */ --fnt-t-nt-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Note Line Height' } */ /* Tag */ --tag-s: 0.75rem; /* { friendly: 'Tag Font Size' } */ --tag-s-d: 0.667rem; /* { friendly: 'Tag Font Size' } */ /* Button */ --btn-s: .889rem; /* { friendly: 'Button Font Size' } */ --btn-s-d: .889rem; /* { friendly: 'Button Font Size' } */ --btn-lh: 1; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Button Line Height' } */ /* Form Label */ --fnt-frm-lh: 1.2; /* { min: .8, max: 2.2, step: 0.05, type: 'range', friendly: 'Form Label Line Height' } */ } /* Body & Content */ body { font-family: var(--fnt-m); line-height: var(--fnt-cnt-lh); text-wrap: pretty; } li { line-height: var(--fnt-cnt-lh); } .cnt-stl { font-size: var(--fnt-cnt-s); } .fnt_pl { font-size: var(--fnt-pl-s); line-height: 1.6; } small i { font-weight: 300; } [class*="fnt_"] { display: block; font-style: normal; } section header em { font-style: normal; } section header > strong, section header > a > strong, section header > b, section header > a > b { display: block; } /* Type Classes */ .fnt_t-big { font-family: var(--fnt-t-big-ff); font-size: var(--fnt-t-big-s); letter-spacing: var(--fnt-t-big-ls); line-height: var(--fnt-t-big-lh); font-weight: var(--fnt-t-big-w); text-transform: var(--fnt-t-big-tt); font-style: var(--fnt-t-big-fs); text-wrap: balance; > :is(strong, b) { display: block; } } .fnt_t-big-sml { font-size: var(--fnt-t-big-sml-s); } .fnt_t-big-smlr { font-size: var(--fnt-t-big-smlr-s); } .fnt_t-co { font-family: var(--fnt-t-co-ff); font-size: var(--fnt-t-co-s); letter-spacing: var(--fnt-t-co-ls); line-height: var(--fnt-t-co-lh); font-weight: var(--fnt-t-co-w); text-transform: var(--fnt-t-co-tt); font-style: var(--fnt-t-co-fs); text-wrap: balance; } .fnt_t-k { font-family: var(--fnt-t-k-ff); font-size: var(--fnt-t-k-s); letter-spacing: var(--fnt-t-k-ls); line-height: var(--fnt-t-k-lh); font-weight: var(--fnt-t-k-w); text-transform: var(--fnt-t-k-tt); font-style: var(--fnt-t-k-fs); } .fnt_t-k-sml { letter-spacing: calc(var(--fnt-t-k-ls) * .75); font-size: var(--fnt-t-k-sml-s); } .fnt_t-k-smlr { letter-spacing: calc(var(--fnt-t-k-ls) * .5); font-size: var(--fnt-t-k-smlr-s); } h1, .fnt_t-1, section header > :first-child:not( a, [class*='fnt_t'] ), section .cnt-stl:not(.xpnd) > :first-child:is( h1, h2, h3, h4, h5, h6 ) { font-family: var(--fnt-t-1-ff); font-size: var(--fnt-t-1-s); letter-spacing: var(--fnt-t-1-ls); line-height: var(--fnt-t-1-lh); font-weight: var(--fnt-t-1-w); text-transform: var(--fnt-t-1-tt); font-style: var(--fnt-t-1-fs); text-wrap: balance; > :is(strong, b) { display: block; font-weight: inherit; } } .fnt_t-1-sml { font-size: var(--fnt-t-1-sml-s); } .fnt_t-1-smlr { font-size: var(--fnt-t-1-smlr-s); } h2, .fnt_t-2, section header > *:nth-child(2):not(p, [class*='fnt_t'], .flr_hd, svg), section header > *:nth-child(2):is(.flr_hd) + :nth-child(3):is( h1, h2, h3, h4, h5, h6 ), section .cnt-stl > :nth-child(2):is( h1, h2, h3, h4, h5, h6 ) { font-family: var(--fnt-t-2-ff); font-size: var(--fnt-t-2-s); letter-spacing: var(--fnt-t-2-ls); line-height: var(--fnt-t-2-lh); font-weight: var(--fnt-t-2-w); text-transform: var(--fnt-t-2-tt); font-style: var(--fnt-t-2-fs); } /* Title 2 Small — applied when a preceding Title 1 (or Title Big) sibling was auto-shrunk by title-fit.js (signaled via [data-fit]). Flair element between the two is tolerated. */ section header > [data-fit]:first-child ~ *:nth-child(2):not(p, [class*='fnt_t'], .flr_hd, svg), section header > [data-fit]:first-child ~ .flr_hd + *:nth-child(3):is( h1, h2, h3, h4, h5, h6 ), section .cnt-stl > [data-fit]:first-child ~ *:nth-child(2):is( h1, h2, h3, h4, h5, h6 ), section .cnt-stl > [data-fit]:first-child ~ *:nth-child(3):is( h1, h2, h3, h4, h5, h6 ) { font-size: var(--fnt-t-2-sml-s); } h3, .fnt_t-3, aside header > *:first-child:not(a, [class*='fnt_t']) { font-family: var(--fnt-t-3-ff); font-size: var(--fnt-t-3-s); letter-spacing: var(--fnt-t-3-ls); line-height: var(--fnt-t-3-lh); font-weight: var(--fnt-t-3-w); text-transform: var(--fnt-t-3-tt); font-style: var(--fnt-t-3-fs); } .fnt_t-4, .cnt-stl h4 { font-family: var(--fnt-t-4-ff); font-size: var(--fnt-t-4-s); letter-spacing: var(--fnt-t-4-ls); line-height: var(--fnt-t-4-lh); font-weight: var(--fnt-t-4-w); text-transform: var(--fnt-t-4-tt); font-style: var(--fnt-t-4-fs); } .fnt_t-5, .cnt-stl h5 { font-family: var(--fnt-t-5-ff); font-size: var(--fnt-t-5-s); letter-spacing: var(--fnt-t-5-ls); line-height: var(--fnt-t-5-lh); font-weight: var(--fnt-t-5-w); text-transform: var(--fnt-t-5-tt); font-style: var(--fnt-t-5-fs); } .fnt_t-6, .cnt-stl h6 { font-family: var(--fnt-t-6-ff); font-size: var(--fnt-t-6-s); letter-spacing: var(--fnt-t-6-ls); line-height: var(--fnt-t-6-lh); font-weight: var(--fnt-t-6-w); text-transform: var(--fnt-t-6-tt); font-style: var(--fnt-t-6-fs); } /* Primary Nav */ .fnt_nv-pry { font-family: var(--fnt-nv-pry-ff); font-size: var(--fnt-nv-pry-s); letter-spacing: var(--fnt-nv-pry-ls); font-weight: var(--fnt-nv-pry-w); text-transform: var(--fnt-nv-pry-tt); font-style: var(--fnt-nv-pry-fs); } /* Secondary Nav */ .fnt_nv-sec { font-family: var(--fnt-nv-sec-ff); font-size: var(--fnt-nv-sec-s); letter-spacing: var(--fnt-nv-sec-ls); font-weight: var(--fnt-nv-sec-w); text-transform: var(--fnt-nv-sec-tt); font-style: var(--fnt-nv-sec-fs); } /* Quote */ .fnt_qte { font-family: var(--fnt-qte-ff); font-size: var(--fnt-qte-s); letter-spacing: var(--fnt-qte-ls); line-height: var(--fnt-qte-lh); font-weight: var(--fnt-qte-w); text-transform: var(--fnt-qte-tt); font-style: var(--fnt-qte-fs); } .fnt_atr { font-family: var(--fnt-atr-ff); font-size: var(--fnt-atr-s); letter-spacing: var(--fnt-atr-ls); line-height: var(--fnt-atr-lh); font-weight: var(--fnt-atr-w); text-transform: var(--fnt-atr-tt); font-style: var(--fnt-atr-fs); } /* Phone */ .fnt_phn { font-family: var(--fnt-phn-ff); font-size: var(--fnt-phn-s); letter-spacing: var(--fnt-phn-ls); line-height: var(--fnt-phn-lh); font-weight: var(--fnt-phn-w); font-style: var(--fnt-phn-fs); } /* Coupon Value */ .fnt_t-cpn { font-family: var(--fnt-t-cpn-ff); font-size: var(--fnt-t-cpn-s); letter-spacing: var(--fnt-t-cpn-ls); line-height: var(--fnt-t-cpn-lh); font-weight: var(--fnt-t-cpn-w); text-transform: var(--fnt-t-cpn-tt); font-style: var(--fnt-t-cpn-fs); text-wrap: balance; } /* Item */ .fnt_t-itm { font-family: var(--fnt-t-itm-ff); font-size: var(--fnt-t-itm-s); letter-spacing: var(--fnt-t-itm-ls); line-height: var(--fnt-t-itm-lh); font-weight: var(--fnt-t-itm-w); text-transform: var(--fnt-t-itm-tt); font-style: var(--fnt-t-itm-fs); } /* Note */ .fnt_t-nt { font-family: var(--fnt-t-nt-ff); font-size: var(--fnt-t-nt-s); letter-spacing: var(--fnt-t-nt-ls); line-height: var(--fnt-t-nt-lh); font-weight: var(--fnt-t-nt-w); text-transform: var(--fnt-t-nt-tt); font-style: var(--fnt-t-nt-fs); } /* Tag */ .tag { font-family: var(--tag-ff); font-size: var(--tag-s); letter-spacing: var(--tag-ls); font-weight: var(--tag-w); text-transform: var(--tag-tt); font-style: var(--tag-fs); line-height: 1; } /* Buttons */ .btn { font-family: var(--btn-ff); font-size: var(--btn-s); letter-spacing: var(--btn-ls); line-height: var(--btn-lh); font-weight: var(--btn-w); text-transform: var(--btn-tt); font-style: var(--btn-fs); } /* Form Inputs */ fieldset li label:not([class*="fnt_"]) { font-family: var(--fnt-frm-ff); letter-spacing: var(--fnt-frm-ls); line-height: var(--fnt-frm-lh); font-weight: var(--fnt-frm-w); text-transform: var(--fnt-frm-tt); font-style: var(--fnt-frm-fs); } /* 1280px Responsive (min-width) */ @media screen and (width >= 1280px) { :root { --fnt-t-big-s: var(--fnt-t-big-s-d); --fnt-t-big-sml-s: var(--fnt-t-big-sml-s-d); --fnt-t-big-smlr-s: var(--fnt-t-big-smlr-s-d); --fnt-t-co-s: var(--fnt-t-co-s-d); --fnt-t-k-s: var(--fnt-t-k-s-d); --fnt-t-k-sml-s: var(--fnt-t-k-sml-s-d); --fnt-t-k-smlr-s: var(--fnt-t-k-smlr-s-d); --fnt-t-1-s: var(--fnt-t-1-s-d); --fnt-t-1-sml-s: var(--fnt-t-1-sml-s-d); --fnt-t-1-smlr-s: var(--fnt-t-1-smlr-s-d); --fnt-t-2-s: var(--fnt-t-2-s-d); --fnt-t-2-sml-s: var(--fnt-t-2-sml-s-d); --fnt-t-3-s: var(--fnt-t-3-s-d); --fnt-t-4-s: var(--fnt-t-4-s-d); --fnt-t-5-s: var(--fnt-t-5-s-d); --fnt-t-6-s: var(--fnt-t-6-s-d); --fnt-qte-s: var(--fnt-qte-s-d); --fnt-phn-s: var(--fnt-phn-s-d); --fnt-t-itm-s: var(--fnt-t-itm-s-d); --fnt-t-nt-s: var(--fnt-t-nt-s-d); --fnt-t-cpn-s: var(--fnt-t-cpn-s-d); --fnt-btn-s: var(--fnt-btn-s-d); } } /* color-structure.css */ @layer reset, tokens, utilities, components; @layer tokens { :root { --valid-color: #8AC74C; /* { readonly: true } */ --invalid-color: #F34039; /* { readonly: true } */ --highlight-color: #0066EE; /* { readonly: true } */ --black: #000000; /* -- Backward-compat aliases ------------------------------------------- */ /* Used by make.css, buttons.css hover states, and other inherited rules */ --main-bg: var(--lt-bg); --main-bg-alt: var(--dk-bg); --inner-bg: var(--lt-alt-bg); --inner-bg-alt: var(--dk-alt-bg); --text: var(--lt-txt); --text-alt: var(--dk-btn-pry-txt); /* white — used for btn text & hover */ --link-alt: var(--dk-lnk); --buttons: var(--lt-btn-pry); /* -- Shape Colors ------------------------------------------------------ */ /* References contextual palette vars; scopes override per theme context */ --shape-clr-1-dyn: var(--lt-accent); --shape-clr-2-dyn: var(--lt-callout); --shape-clr-1-alt: #ffffff; } /* ══════════════════════════════════════════════════════════════════════ */ /* Light Colors */ /* ══════════════════════════════════════════════════════════════════════ */ @scope ( [data-colors="primary-light"], [data-colors="alternate-light"] .lk-bg, [data-colors="primary-dark"] .ulk-bg ) { :scope { /* Palette identity */ --pal-id: var(--lt-id); --pal-name: var(--lt-name); --pal-creative: var(--lt-creative); /* Backgrounds */ --background: var(--lt-bg); --inner-theme: var(--lt-alt-bg); /* Text */ --text-color: var(--lt-txt); --link-color: var(--lt-lnk); --link-hover: var(--lt-lnk-hov); /* Headings */ --fnt-t-big: var(--lt-h1); --fnt-t-co: var(--lt-callout); --fnt-t-k: var(--lt-callout); --fnt-t-1: var(--lt-h1); --fnt-t-2: var(--lt-h2); --fnt-t-3: var(--lt-h3); --fnt-t-4: var(--lt-h4); --fnt-t-5: var(--lt-h5); --fnt-t-6: var(--lt-h5); --fnt-t-itm: var(--lt-h1); --fnt-t-nt: var(--lt-txt); --fnt-qte: var(--lt-lnk); --fnt-atr: var(--lt-txt); --fnt-phn: var(--lt-h1); /* Accent & callout */ --accent: var(--lt-accent); --callout: var(--lt-callout); /* Buttons */ --btn-pry: var(--lt-btn-pry); --btn-pry-txt: var(--lt-btn-pry-txt); --btn-sec: var(--lt-btn-sec); --btn-sec-txt: var(--lt-btn-sec-txt); --btn-trt-txt: var(--lt-btn-trt-txt); /* Button Hover */ --btn-hvr-pry: var(--dk-bg); --btn-hvr-pry-txt: var(--dk-txt); /* Compat — buttons.css / make.css */ --buttons: var(--lt-btn-pry); --btn-bg-clr-lt: var(--lt-btn-pry); --btn-txt-clr-lt: var(--lt-btn-pry-txt); --btn-bg-clr-lt-alt: var(--dk-btn-pry); --btn-txt-clr-lt-alt: var(--dk-btn-pry-txt); --main-bg: var(--lt-bg); --main-bg-alt: var(--dk-bg); --text-alt: var(--dk-btn-pry-txt); /* Border */ --bdr-clr: var(--lt-bdr); --bg-bx-bdr-clr: var(--lt-txt); /* Shapes */ --shape-clr-1-dyn: var(--lt-accent); --shape-clr-2-dyn: var(--lt-callout); --shape-clr-1-alt: #ffffff; /* Flair */ --flr-hdr-clr: var(--lt-btn-pry); } &.lk-bg, &.ulk-bg { --background: var(--lt-alt-bg); --inner-theme: var(--lt-bg); } .btn-clr { --background: var(--buttons); --text-color: var(--text-alt); &.active { --background: var(--main-bg-alt); --text-color: var(--text-alt); } @media (hover: hover) and (pointer: fine) { &:is(a:hover,a:focus-visible), &:is(button:hover,button:focus-visible), a:is(:hover,:focus-visible) { --background: var(--main-bg-alt); --text-color: var(--text-alt); --link-hover: var(--text-color); } } } .clr-pry { --text-color: var(--fnt-t-1); } .clr-sec { --text-color: var(--fnt-t-2); } .clr-acc { --text-color: var(--accent); } .clr-lnk { --text-color: var(--link-color); } .clr-blk { --text-color: var(--black); } } /* ══════════════════════════════════════════════════════════════════════ */ /* Light Colors */ /* ══════════════════════════════════════════════════════════════════════ */ @scope ( [data-colors="alternate-light"], [data-colors="primary-light"] .lk-bg, [data-colors="alternate-dark"] .ulk-bg ) { :scope { --pal-id: var(--lt-alt-id); --pal-name: var(--lt-alt-name); --pal-creative: var(--lt-alt-creative); --background: var(--lt-alt-bg); --inner-theme: var(--lt-bg); --text-color: var(--lt-alt-txt); --link-color: var(--lt-alt-lnk); --link-hover: var(--lt-alt-lnk-hov); --fnt-t-big: var(--lt-alt-h1); --fnt-t-co: var(--lt-alt-callout); --fnt-t-k: var(--lt-alt-callout); --fnt-t-1: var(--lt-alt-h1); --fnt-t-2: var(--lt-alt-h2); --fnt-t-3: var(--lt-alt-h3); --fnt-t-4: var(--lt-alt-h4); --fnt-t-5: var(--lt-alt-h5); --fnt-t-6: var(--lt-alt-h5); --fnt-t-itm: var(--lt-alt-h1); --fnt-t-nt: var(--lt-alt-txt); --fnt-qte: var(--lt-alt-lnk); --fnt-atr: var(--lt-alt-txt); --fnt-phn: var(--lt-alt-h1); --accent: var(--lt-alt-accent); --callout: var(--lt-alt-callout); --btn-pry: var(--lt-alt-btn-pry); --btn-pry-txt: var(--lt-alt-btn-pry-txt); --btn-sec: var(--lt-alt-btn-sec); --btn-sec-txt: var(--lt-alt-btn-sec-txt); --btn-trt-txt: var(--lt-alt-btn-trt-txt); --btn-hvr-pry: var(--dk-alt-bg); --btn-hvr-pry-txt: var(--dk-alt-txt); /* Compat - review this!! */ --buttons: var(--lt-alt-btn-pry); --btn-bg-clr-dk: var(--lt-alt-btn-pry); --btn-txt-clr-dk: var(--lt-alt-btn-pry-txt); --btn-bg-clr-dk-alt: var(--dk-alt-bg); --btn-txt-clr-dk-alt: var(--dk-alt-btn-pry-txt); --main-bg: var(--lt-alt-bg); --main-bg-alt: var(--dk-alt-bg); --text-alt: var(--dk-alt-txt); --bdr-clr: var(--lt-alt-bdr); --bg-bx-bdr-clr: var(--lt-alt-txt); --shape-clr-1-dyn: var(--lt-alt-accent); --shape-clr-2-dyn: var(--lt-alt-callout); --shape-clr-1-alt: #ffffff; --flr-hdr-clr: var(--lt-alt-btn-pry); } &.lk-bg { --background: var(--lt-bg); --inner-theme: var(--lt-alt-bg); } .btn-clr { --background: var(--buttons); --text-color: var(--text-alt); &.active { --background: var(--main-bg-alt); --text-color: var(--text-alt); } @media (hover: hover) and (pointer: fine) { &:is(a:hover,a:focus-visible), &:is(button:hover,button:focus-visible), a:is(:hover,:focus-visible) { --background: var(--main-bg-alt); --text-color: var(--text-alt); --link-hover: var(--text-color); } } } .clr-pry { --text-color: var(--fnt-t-1); } .clr-sec { --text-color: var(--fnt-t-2); } .clr-acc { --text-color: var(--accent); } .clr-lnk { --text-color: var(--link-color); } .clr-blk { --text-color: var(--black); } } /* ══════════════════════════════════════════════════════════════════════ */ /* Dark Colors */ /* ══════════════════════════════════════════════════════════════════════ */ @scope ( [data-colors="primary-dark"], [data-colors="alternate-dark"] .lk-bg, [data-colors="primary-light"] .ulk-bg ) { :scope { /* Palette identity */ --pal-id: var(--dk-id); --pal-name: var(--dk-name); --pal-creative: var(--dk-creative); /* Backgrounds */ --background: var(--dk-bg); --inner-theme: var(--dk-alt-bg); /* Text */ --text-color: var(--dk-txt); --link-color: var(--dk-lnk); --link-hover: var(--dk-lnk-hov); /* Headings */ --fnt-t-big: var(--dk-h1); --fnt-t-co: var(--dk-callout); --fnt-t-k: var(--dk-callout); --fnt-t-1: var(--dk-h1); --fnt-t-2: var(--dk-h2); --fnt-t-3: var(--dk-h3); --fnt-t-4: var(--dk-h4); --fnt-t-5: var(--dk-h5); --fnt-t-6: var(--dk-h5); --fnt-t-itm: var(--dk-h4); --fnt-t-nt: var(--dk-txt); --fnt-qte: var(--dk-lnk); --fnt-atr: var(--dk-txt); --fnt-phn: var(--dk-h1); /* Accent & callout */ --accent: var(--dk-accent); --callout: var(--dk-callout); /* Buttons */ --btn-pry: var(--dk-btn-pry); --btn-pry-txt: var(--dk-btn-pry-txt); --btn-sec: var(--dk-btn-sec); --btn-sec-txt: var(--dk-btn-sec-txt); --btn-trt-txt: var(--dk-btn-trt-txt); /* Button Hover */ --btn-hvr-pry: var(--lt-bg); --btn-hvr-pry-txt: var(--lt-txt); /* Compat - review this!! */ --buttons: var(--dk-btn-pry); --btn-bg-clr-dk: var(--dk-btn-pry); --btn-txt-clr-dk: var(--dk-btn-pry-txt); --btn-bg-clr-dk-alt: var(--lt-bg); --btn-txt-clr-dk-alt: var(--lt-btn-pry-txt); --main-bg: var(--dk-bg); --main-bg-alt: var(--lt-bg); --text-alt: var(--lt-txt); /* Border */ --bdr-clr: var(--dk-bdr); --bg-bx-bdr-clr: var(--dk-bdr); /* Shapes */ --shape-clr-1-dyn: var(--dk-accent); --shape-clr-2-dyn: var(--dk-callout); --shape-clr-1-alt: #ffffff; /* Review this */ /* Flair */ --flr-hdr-clr: var(--shape-clr-1-dyn); } &.lk-bg, &.ulk-bg { --background: var(--dk-alt-bg); --inner-theme: var(--dk-bg); } /* Review all of this */ .ulk-bg, .alt-bg { .btn-clr { @media (hover: hover) and (pointer: fine) { &:is(a:hover,a:focus-visible), a:is(:hover,:focus-visible) { --background: var(--main-bg-alt); --text-color: var(--dk-txt); --link-hover: var(--text-color); } } } } .btn-clr { --background: var(--btn-pry); --text-color: var(--btn-pry-txt); &.active { --background: var(--main-bg-alt); --text-color: var(--lt-txt); } @media (hover: hover) and (pointer: fine) { &:is(a:hover,a:focus-visible), &:is(button:hover,button:focus-visible), a:is(:hover,:focus-visible) { --background: var(--main-bg-alt); --text-color: var(--lt-txt); --link-hover: var(--text-color); } } } } /* ══════════════════════════════════════════════════════════════════════ */ /* Dark Colors */ /* ══════════════════════════════════════════════════════════════════════ */ @scope ( [data-colors="alternate-dark"], [data-colors="primary-dark"] .lk-bg, [data-colors="alternate-light"] .ulk-bg ) { :scope { --pal-id: var(--dk-alt-id); --pal-name: var(--dk-alt-name); --pal-creative: var(--dk-alt-creative); --background: var(--dk-alt-bg); --inner-theme: var(--dk-bg); --text-color: var(--dk-alt-txt); --link-color: var(--dk-alt-lnk); --link-hover: var(--dk-alt-lnk-hov); --fnt-t-big: var(--dk-alt-h1); --fnt-t-co: var(--dk-alt-callout); --fnt-t-k: var(--dk-alt-callout); --fnt-t-1: var(--dk-alt-h1); --fnt-t-2: var(--dk-alt-h2); --fnt-t-3: var(--dk-alt-h3); --fnt-t-4: var(--dk-alt-h4); --fnt-t-5: var(--dk-alt-h5); --fnt-t-6: var(--dk-alt-h5); --fnt-t-itm: var(--dk-alt-h4); --fnt-t-nt: var(--dk-alt-txt); --fnt-qte: var(--dk-alt-lnk); --fnt-atr: var(--dk-alt-txt); --fnt-phn: var(--dk-alt-h1); --accent: var(--dk-alt-accent); --callout: var(--dk-alt-callout); --btn-pry: var(--dk-alt-btn-pry); --btn-pry-txt: var(--dk-alt-btn-pry-txt); --btn-sec: var(--dk-alt-btn-sec); --btn-sec-txt: var(--dk-alt-btn-sec-txt); --btn-trt-txt: var(--dk-alt-btn-trt-txt); --btn-hvr-pry: var(--lt-alt-bg); --btn-hvr-pry-txt: var(--lt-alt-txt); /* Compat - review this!! */ --buttons: var(--dk-alt-btn-pry); --btn-bg-clr-dk: var(--dk-alt-btn-pry); --btn-txt-clr-dk: var(--dk-alt-btn-pry-txt); --btn-bg-clr-dk-alt: var(--lt-alt-bg); --btn-txt-clr-dk-alt: var(--lt-alt-btn-pry-txt); --main-bg: var(--dk-alt-bg); --main-bg-alt: var(--lt-alt-bg); --text-alt: var(--lt-alt-txt); --bdr-clr: var(--dk-alt-bdr); --bg-bx-bdr-clr: var(--dk-alt-bdr); --shape-clr-1-dyn: var(--dk-alt-accent); --shape-clr-2-dyn: var(--dk-alt-callout); --shape-clr-1-alt: #ffffff; --flr-hdr-clr: var(--shape-clr-1-dyn); } &.lk-bg { --background: var(--dk-bg); --inner-theme: var(--dk-alt-bg); } /* Review all of this */ .ulk-bg, .alt-bg { .btn-clr { @media (hover: hover) and (pointer: fine) { &:is(a:hover,a:focus-visible), a:is(:hover,:focus-visible) { --background: var(--main-bg-alt); --text-color: var(--dk-txt); --link-hover: var(--text-color); } } } } .btn-clr { --background: var(--btn-pry); --text-color: var(--btn-pry-txt); &.active { --background: var(--main-bg-alt); --text-color: var(--lt-txt); } @media (hover: hover) and (pointer: fine) { &:is(a:hover,a:focus-visible), &:is(button:hover,button:focus-visible), a:is(:hover,:focus-visible) { --background: var(--main-bg-alt); --text-color: var(--lt-txt); --link-hover: var(--text-color); } } } } /* ══════════════════════════════════════════════════════════════════════ */ /* Two-flip overrides */ /* When a .bg-bx has two nested flip classes in its ancestry within a */ /* [data-colors] root, it lands at a cumulative destination palette. */ /* Two semantics combined here: */ /* * Interleave (ulk + lk in either order): diagonal of starting palette*/ /* * Same-class double (ulk² or lk²): equivalent to a single flip of */ /* the opposite class (ulk² = lk, lk² = ulk) */ /* Each block below lands its element directly at the terminal palette, */ /* beating the one-flip scopes above by source order and specificity. */ /* No re-flip block — already at the destination. */ /* ══════════════════════════════════════════════════════════════════════ */ /* All paths landing at alternate-light (A_L): */ /* primary-dark > ulk/lk > lk/ulk (interleave / diagonal) */ /* primary-light > ulk > ulk (ulk² = lk) */ /* alternate-dark > lk > lk (lk² = ulk) */ @scope ( [data-colors="primary-dark"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="primary-light"] .ulk-bg .ulk-bg, [data-colors="alternate-dark"] .lk-bg .lk-bg ) { :scope { --pal-id: var(--lt-alt-id); --pal-name: var(--lt-alt-name); --pal-creative: var(--lt-alt-creative); --background: var(--lt-alt-bg); --inner-theme: var(--lt-bg); --text-color: var(--lt-alt-txt); --link-color: var(--lt-alt-lnk); --link-hover: var(--lt-alt-lnk-hov); --fnt-t-big: var(--lt-alt-h1); --fnt-t-co: var(--lt-alt-callout); --fnt-t-k: var(--lt-alt-callout); --fnt-t-1: var(--lt-alt-h1); --fnt-t-2: var(--lt-alt-h2); --fnt-t-3: var(--lt-alt-h3); --fnt-t-4: var(--lt-alt-h4); --fnt-t-5: var(--lt-alt-h5); --fnt-t-6: var(--lt-alt-h5); --fnt-t-itm: var(--lt-alt-h1); --fnt-t-nt: var(--lt-alt-txt); --fnt-qte: var(--lt-alt-lnk); --fnt-atr: var(--lt-alt-txt); --fnt-phn: var(--lt-alt-h1); --accent: var(--lt-alt-accent); --callout: var(--lt-alt-callout); --btn-pry: var(--lt-alt-btn-pry); --btn-pry-txt: var(--lt-alt-btn-pry-txt); --btn-sec: var(--lt-alt-btn-sec); --btn-sec-txt: var(--lt-alt-btn-sec-txt); --btn-trt-txt: var(--lt-alt-btn-trt-txt); --btn-hvr-pry: var(--dk-alt-bg); --btn-hvr-pry-txt: var(--dk-alt-txt); --buttons: var(--lt-alt-btn-pry); --btn-bg-clr-dk: var(--lt-alt-btn-pry); --btn-txt-clr-dk: var(--lt-alt-btn-pry-txt); --btn-bg-clr-dk-alt: var(--dk-alt-bg); --btn-txt-clr-dk-alt: var(--dk-alt-btn-pry-txt); --main-bg: var(--lt-alt-bg); --main-bg-alt: var(--dk-alt-bg); --text-alt: var(--dk-alt-txt); --bdr-clr: var(--lt-alt-bdr); --bg-bx-bdr-clr: var(--lt-alt-txt); --shape-clr-1-dyn: var(--lt-alt-accent); --shape-clr-2-dyn: var(--lt-alt-callout); --shape-clr-1-alt: #ffffff; --flr-hdr-clr: var(--lt-alt-btn-pry); } } /* All paths landing at primary-light (P_L): */ /* alternate-dark > ulk/lk > lk/ulk (interleave / diagonal) */ /* alternate-light > ulk > ulk (ulk² = lk) */ /* primary-dark > lk > lk (lk² = ulk) */ @scope ( [data-colors="alternate-dark"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="alternate-light"] .ulk-bg .ulk-bg, [data-colors="primary-dark"] .lk-bg .lk-bg ) { :scope { --pal-id: var(--lt-id); --pal-name: var(--lt-name); --pal-creative: var(--lt-creative); --background: var(--lt-bg); --inner-theme: var(--lt-alt-bg); --text-color: var(--lt-txt); --link-color: var(--lt-lnk); --link-hover: var(--lt-lnk-hov); --fnt-t-big: var(--lt-h1); --fnt-t-co: var(--lt-callout); --fnt-t-k: var(--lt-callout); --fnt-t-1: var(--lt-h1); --fnt-t-2: var(--lt-h2); --fnt-t-3: var(--lt-h3); --fnt-t-4: var(--lt-h4); --fnt-t-5: var(--lt-h5); --fnt-t-6: var(--lt-h5); --fnt-t-itm: var(--lt-h1); --fnt-t-nt: var(--lt-txt); --fnt-qte: var(--lt-lnk); --fnt-atr: var(--lt-txt); --fnt-phn: var(--lt-h1); --accent: var(--lt-accent); --callout: var(--lt-callout); --btn-pry: var(--lt-btn-pry); --btn-pry-txt: var(--lt-btn-pry-txt); --btn-sec: var(--lt-btn-sec); --btn-sec-txt: var(--lt-btn-sec-txt); --btn-trt-txt: var(--lt-btn-trt-txt); --btn-hvr-pry: var(--dk-bg); --btn-hvr-pry-txt: var(--dk-txt); --buttons: var(--lt-btn-pry); --btn-bg-clr-lt: var(--lt-btn-pry); --btn-txt-clr-lt: var(--lt-btn-pry-txt); --btn-bg-clr-lt-alt: var(--dk-btn-pry); --btn-txt-clr-lt-alt: var(--dk-btn-pry-txt); --main-bg: var(--lt-bg); --main-bg-alt: var(--dk-bg); --text-alt: var(--dk-btn-pry-txt); --bdr-clr: var(--lt-bdr); --bg-bx-bdr-clr: var(--lt-txt); --shape-clr-1-dyn: var(--lt-accent); --shape-clr-2-dyn: var(--lt-callout); --shape-clr-1-alt: #ffffff; --flr-hdr-clr: var(--lt-btn-pry); } } /* All paths landing at alternate-dark (A_D): */ /* primary-light > ulk/lk > lk/ulk (interleave / diagonal) */ /* primary-dark > ulk > ulk (ulk² = lk) */ /* alternate-light > lk > lk (lk² = ulk) */ @scope ( [data-colors="primary-light"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="primary-dark"] .ulk-bg .ulk-bg, [data-colors="alternate-light"] .lk-bg .lk-bg ) { :scope { --pal-id: var(--dk-alt-id); --pal-name: var(--dk-alt-name); --pal-creative: var(--dk-alt-creative); --background: var(--dk-alt-bg); --inner-theme: var(--dk-bg); --text-color: var(--dk-alt-txt); --link-color: var(--dk-alt-lnk); --link-hover: var(--dk-alt-lnk-hov); --fnt-t-big: var(--dk-alt-h1); --fnt-t-co: var(--dk-alt-callout); --fnt-t-k: var(--dk-alt-callout); --fnt-t-1: var(--dk-alt-h1); --fnt-t-2: var(--dk-alt-h2); --fnt-t-3: var(--dk-alt-h3); --fnt-t-4: var(--dk-alt-h4); --fnt-t-5: var(--dk-alt-h5); --fnt-t-6: var(--dk-alt-h5); --fnt-t-itm: var(--dk-alt-h4); --fnt-t-nt: var(--dk-alt-txt); --fnt-qte: var(--dk-alt-lnk); --fnt-atr: var(--dk-alt-txt); --fnt-phn: var(--dk-alt-h1); --accent: var(--dk-alt-accent); --callout: var(--dk-alt-callout); --btn-pry: var(--dk-alt-btn-pry); --btn-pry-txt: var(--dk-alt-btn-pry-txt); --btn-sec: var(--dk-alt-btn-sec); --btn-sec-txt: var(--dk-alt-btn-sec-txt); --btn-trt-txt: var(--dk-alt-btn-trt-txt); --btn-hvr-pry: var(--lt-alt-bg); --btn-hvr-pry-txt: var(--lt-alt-txt); --buttons: var(--dk-alt-btn-pry); --btn-bg-clr-dk: var(--dk-alt-btn-pry); --btn-txt-clr-dk: var(--dk-alt-btn-pry-txt); --btn-bg-clr-dk-alt: var(--lt-alt-bg); --btn-txt-clr-dk-alt: var(--lt-alt-btn-pry-txt); --main-bg: var(--dk-alt-bg); --main-bg-alt: var(--lt-alt-bg); --text-alt: var(--lt-alt-txt); --bdr-clr: var(--dk-alt-bdr); --bg-bx-bdr-clr: var(--dk-alt-bdr); --shape-clr-1-dyn: var(--dk-alt-accent); --shape-clr-2-dyn: var(--dk-alt-callout); --shape-clr-1-alt: #ffffff; --flr-hdr-clr: var(--shape-clr-1-dyn); } } /* All paths landing at primary-dark (P_D): */ /* alternate-light > ulk/lk > lk/ulk (interleave / diagonal) */ /* alternate-dark > ulk > ulk (ulk² = lk) */ /* primary-light > lk > lk (lk² = ulk) */ @scope ( [data-colors="alternate-light"] :is(.ulk-bg .lk-bg, .lk-bg .ulk-bg), [data-colors="alternate-dark"] .ulk-bg .ulk-bg, [data-colors="primary-light"] .lk-bg .lk-bg ) { :scope { --pal-id: var(--dk-id); --pal-name: var(--dk-name); --pal-creative: var(--dk-creative); --background: var(--dk-bg); --inner-theme: var(--dk-alt-bg); --text-color: var(--dk-txt); --link-color: var(--dk-lnk); --link-hover: var(--dk-lnk-hov); --fnt-t-big: var(--dk-h1); --fnt-t-co: var(--dk-callout); --fnt-t-k: var(--dk-callout); --fnt-t-1: var(--dk-h1); --fnt-t-2: var(--dk-h2); --fnt-t-3: var(--dk-h3); --fnt-t-4: var(--dk-h4); --fnt-t-5: var(--dk-h5); --fnt-t-6: var(--dk-h5); --fnt-t-itm: var(--dk-h4); --fnt-t-nt: var(--dk-txt); --fnt-qte: var(--dk-lnk); --fnt-atr: var(--dk-txt); --fnt-phn: var(--dk-h1); --accent: var(--dk-accent); --callout: var(--dk-callout); --btn-pry: var(--dk-btn-pry); --btn-pry-txt: var(--dk-btn-pry-txt); --btn-sec: var(--dk-btn-sec); --btn-sec-txt: var(--dk-btn-sec-txt); --btn-trt-txt: var(--dk-btn-trt-txt); --btn-hvr-pry: var(--lt-bg); --btn-hvr-pry-txt: var(--lt-txt); --buttons: var(--dk-btn-pry); --btn-bg-clr-dk: var(--dk-btn-pry); --btn-txt-clr-dk: var(--dk-btn-pry-txt); --btn-bg-clr-dk-alt: var(--lt-bg); --btn-txt-clr-dk-alt: var(--lt-btn-pry-txt); --main-bg: var(--dk-bg); --main-bg-alt: var(--lt-bg); --text-alt: var(--lt-txt); --bdr-clr: var(--dk-bdr); --bg-bx-bdr-clr: var(--dk-bdr); --shape-clr-1-dyn: var(--dk-accent); --shape-clr-2-dyn: var(--dk-callout); --shape-clr-1-alt: #ffffff; --flr-hdr-clr: var(--shape-clr-1-dyn); } } } /* end @layer tokens */ /* -- Apply It ------------------------------------------------------------- */ [data-colors] { --blt-clr: var(--buttons); background-color: var(--background); color: var(--text-color); .bg-bx { color: var(--text-color); &:not(.no-bg, .bdr-bg) { background-color: var(--inner-theme); } .bg-bx { --inner-theme: var(--background); } } a, button { color: var(--link-color); } a.clr-swp, button.clr-swp { color: var(--text-color); } .flr_hd { color: var(--flr-hdr-clr); } :is( h1, h2, h3, h4, h5, h6, [class*='fnt_']:not(a), header > *:first-child:not(a) ) { color: var(--title-color); } .fnt_t-big { --title-color: var(--fnt-t-big); } .fnt_t-co { --title-color: var(--fnt-t-co); } :where(h1 > em, .fnt_t-k) { --title-color: var(--fnt-t-k); } h1, .fnt_t-1, header > *:first-child:not( a, [class*='fnt_t'] ), .cnt-stl:not(.xpnd) > :first-child:is( h1, h2, h3, h4, h5, h6 ) { --title-color: var(--fnt-t-1); } h2, .fnt_t-2, header > *:nth-child(2):not(p, [class*='fnt_t'], .flr_hd), .cnt-stl > :nth-child(2):is( h1, h2, h3, h4, h5, h6 ) { --title-color: var(--fnt-t-2); } h3, .fnt_t-3 { --title-color: var(--fnt-t-3); } h4, .fnt_t-4 { --title-color: var(--fnt-t-4); } h5, .fnt_t-5 { --title-color: var(--fnt-t-5); } h6, .fnt_t-6 { --title-color: var(--fnt-t-6); } .fnt_t-itm { --title-color: var(--fnt-t-itm); } .fnt_t-nt { --title-color: var(--fnt-t-nt); } .fnt_qte { --title-color: var(--fnt-qte); } .fnt_atr { --title-color: var(--fnt-atr); } [href^=tel]:not([class*="btn"]) { --link-color: var(--fnt-phn); --link-hover: var(--fnt-phn); } .btn-clr { background-color: var(--background); color: var(--text-color); transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s; } [data-role="arrows"] button { color: var(--link-color); } @media (hover: hover) and (pointer: fine) { a:is(:hover, :focus-visible):not(.btn), button:is(:hover, :focus-visible), [data-role="arrows"] button:is(:hover, :focus-visible) { color: var(--link-hover); } a.clr-swp:is(:hover, :focus-visible):not(.btn), button.clr-swp:is(:hover, :focus-visible):not(.btn) { color: var(--link-color); } } select option { color: var(--text-color); } } /* make.css */ :root:is(html) { --bdr-stl: solid; /* { friendly: 'Border Style', group: 'Borders' } */ --bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Border Width', group: 'Borders' } */ --bdr-clr-o: 1; /* { min: 0.05, max: 1, step: 0.05, friendly: 'Border Opacity', group: 'Borders' } */ --bg-bx-o: 1; /* { min: .2, max: 1, step: 0.05, friendly: 'Like/Unlike Box Opacity', group: 'Calculations' } */ --img-fg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Foreground Imagery', group: 'Images' } */ --img-fg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Foreground Imagery', group: 'Images' } */ --img-fg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Foreground Imagery', group: 'Images' } */ --img-fg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Foreground Imagery', group: 'Images' } */ --img-fg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Foreground Imagery', group: 'Images' } */ --img-fg-o: 1; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Foreground Imagery', group: 'Images' } */ --img-bg-o: 0.2; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Background Imagery', group: 'Images' } */ --img-bg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Background Imagery', group: 'Images' } */ --img-bg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Background Imagery', group: 'Images' } */ --img-bg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Background Imagery', group: 'Images' } */ --img-bg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Background Imagery', group: 'Images' } */ --img-bg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Background Imagery', group: 'Images' } */ --dk-ptrn-bg: url("/media/patterns/light-pattern.png"); /* { readonly: true } */ --dk-ptrn-o: 1; /* { readonly: true } */ --dk-ptrn-blnd: unset; /* { readonly: true } */ --lt-ptrn-bg: url("/media/patterns/dark-pattern.png"); /* { readonly: true } */ --lt-ptrn-o: 1; /* { readonly: true } */ --lt-ptrn-blnd: unset; /* { readonly: true } */ --mstg-img-bg-o: 0.2; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Mainstage Background Imagery', group: 'Images' } */ --mstg-img-bg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Mainstage Background Imagery', group: 'Images' } */ --mstg-img-bg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Mainstage Background Imagery', group: 'Images' } */ --mstg-img-bg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Mainstage Background Imagery', group: 'Images' } */ --mstg-img-bg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Mainstage Background Imagery', group: 'Images' } */ --mstg-img-bg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Mainstage Background Imagery', group: 'Images' } */ --vid-bg-o: .4; /* { min: .2, max: 1, step: 0.05, friendly: 'Video Background Opacity', group: 'Calculations' } */ --btn-txt-clr-lt: var(--text-alt); /* { friendly: 'Light Theme - Button V1 Text Color', group: 'Colors' } */ --btn-bg-clr-lt: var(--buttons); /* { friendly: 'Light Theme - Button V1 BG Color', group: 'Colors' } */ --btn-txt-clr-lt-alt: var(--text-alt); /* { friendly: 'Light Theme - Button V1 Alt Text Color', group: 'Colors' } */ --btn-bg-clr-lt-alt: var(--main-bg-alt); /* { friendly: 'Light Theme - Button V1 Alt BG Color', group: 'Colors' } */ --btn-txt-clr-dk: var(--text-alt); /* { friendly: 'Dark Theme - Button V1 Text Color', group: 'Colors' } */ --btn-bg-clr-dk: var(--buttons); /* { friendly: 'Dark Theme - Button V1 BG Color', group: 'Colors' } */ --btn-txt-clr-dk-alt: var(--text); /* { friendly: 'Dark Theme - Button V1 Alt Text Color', group: 'Colors' } */ --btn-bg-clr-dk-alt: var(--main-bg); /* { friendly: 'Dark Theme - Button V1 Alt BG Color', group: 'Colors' } */ --frm-bdr-stl: solid; /* { friendly: 'Form Input Border Style', group: 'Borders' } */ --frm-bdr-w: 2px; /* { min: 1, max: 4, step: 1, friendly: 'Form Input Border Width', group: 'Borders' } */ --frm-bdr-rds: 0.44rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Form Input Border Radius', group: 'Borders' } */ --flx-gap: 3.556rem; /* { min: 4, max: 9, step: 0.1, friendly: 'Flex Gap Amount',group: 'Spacing' } */ --g-cnt-k-ttl-m: 0.8rem; /* { min: 0.2, max: 2, step: 0.05, friendly: 'Kicker + Title Margin', group: 'Spacing' } */ --g-cnt-ttl-ttl-m: 0.55rem; /* { min: 0.2, max: 1, step: 0.05, friendly: 'Title Margin', group: 'Spacing' } */ --g-cnt-ttl-cnt-m: 1rem; /* { min: 0.5, max: 1.5, step: 0.05, friendly: 'Content Margin', group: 'Spacing' } */ --g-cnt-full-img-m: 1.5rem; /* { min: 1, max: 3, step: 0.05, friendly: 'Full Content Image Top/Bottom Margin', group: 'Spacing' } */ --g-trn-sp: .3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Default Transition Speed', group: 'Other' } */ --g-trn-tf: ease; /* { friendly: 'Default Transition Timing Function', group: 'Other' } */ --grd-sp: 1.778rem; /* { min: 1, max: 2.5, step: 0.001, friendly: 'Grid Display Item Spacing', group: 'Spacing' } */ --grd-sml-mpt: .5; /* { min: 0.1, max: 1, step: 0.1, friendly: 'Grid Small Multiplier', group: 'Spacing' } */ --grd-lrg-mpt: 1.5; /* { min: 1, max: 2, step: 0.1, friendly: 'Grid Large Multiplier', group: 'Spacing' } */ --grd-sp-sml: calc(var(--grd-sp) * var(--grd-sml-mpt)); /* { readonly: true } */ --grd-sp-lrg: calc(var(--grd-sp) * var(--grd-lrg-mpt)); /* { readonly: true } */ --grd-sp-dyn: var(--grd-sp); /* { readonly: true } */ --mn-t: 60rem; /* { min: 15, max: 100, step: 1, friendly: 'Main Thin Value', group: 'Other' } */ --mn-w: 80rem; /* { min: 15, max: 100, step: 1, friendly: 'Main Wide Value', group: 'Other' } */ --mn-f: 22.5rem; /* { min: 15, max: 100, step: .1, friendly: 'Main Full Value', group: 'Other' } */ --mn_ch-w: 72ch; /* { readonly: true } */ --mn-sys: var(--mn-t); /* { readonly: true } */ --mn_min: calc(var(--vw_) * 0.7); /* { readonly: true } */ --mn_min-t: calc(var(--vw_) * 0.41); /* { readonly: true } */ --mn_max: calc(var(--vw_) * 0.849); /* { readonly: true } */ --st-w: 1920px; /* { friendly: 'Site Outer Max Width', group: 'Other' } */ --vw_: min(100vw, var(--st-w)); /* { readonly: true } */ --py-i-s: 1.4rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Payment Icon Font Size', group: 'Calculations' } */ --rvw-str-clr: #FFD80A; /* { friendly: 'Review Star Colors', group: 'Colors' } */ --rvw-str-s: 1rem; /* { min: 1, max: 4, step: 0.1, friendly: 'Review Star Font Size', type: 'range' } */ --rvw-str-o: .5; /* { min: .2, max: .9, step: 0.001, friendly: 'Review Opacity For Inactive Stars' } */ --sl-trn-sp: .6s; /* { min: .3, max: 2, step: 0.1, friendly: 'Scrolling List Transition Speed', group: 'Other' } */ --sl-trn-tf: ease; /* { friendly: 'Scrolling List Timing Function', group: 'Other' } */ --sl-sa-s: 1.2rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Scrolling Arrows Font Size', group: 'Calculations' } */ --so-i-s: 1.4rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Social Media Icon Font Size', group: 'Calculations' } */ --sp-hp: 2rem; /* { min: 60, max: 120, step: 1, friendly: 'Horizontal Padding Desktop', group: 'Spacing' } */ --sp-vp: 3.5rem; /* { min: 60, max: 125, step: 1, friendly: 'Vertical Padding Desktop', group: 'Spacing' } */ --sp-qk: 1rem; /* { min: 0.5, max: 1.5, step: 0.25, friendly: 'Quick Spacing', group: 'Spacing' } */ --sp-vm: 45; /* { min: 30, max: 60, step: 1, friendly: 'Vertical Margin Desktop', group: 'Spacing' } */ --sp-vm-mbl: 30; /* { min: 20, max: 40, step: 1, friendly: 'Vertical Margin Mobile', group: 'Spacing' } */ --sp-vp-min: 6.4%; /* { readonly: true } */ --sp-vp-max: 10%; /* { readonly: true } */ --sp-vp-mn: 6.4; /* { readonly: true } */ --sp-vp-mx: 10; /* { readonly: true } */ --sp-hp-min: 8%; /* { readonly: true } */ --sp-hp-max: 10%; /* { readonly: true } */ --sp-hp-mn: 8%; /* { readonly: true } */ --sp-hp-mx: 10%; /* { readonly: true } */ --sp-vp-mmc: clamp(calc(var(--sp-vp-mn) * 1vw), var(--sp-vp), calc(var(--sp-vp-mx) * 1vw)); /* { readonly: true } */ --sp-vm-clc: calc((var(--sp-vm-mbl) * 1px) + (var(--sp-vm) - var(--sp-vm-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ --tag-pd-v: 0.4em ; /* { min: 0.3, max: 1, step: 0.1, friendly: 'Tag Vertical Padding', group: 'Calculations' } */ --tag-pd-h: 1em; /* { min: 0.3, max: 1.5, step: 0.1, friendly: 'Tag Horizontal Padding', group: 'Calculations' } */ --tag-bdr-rds: 5em; /* { min: 0, max: 5, step: 0.1, friendly: 'Tag Border Radius', group: 'Calculations' } */ --bg-bx-bdr-thc: 4px; /* { min: 1, max: 20, step: 1, friendly: 'BG Box Border Width' } */ --bg-bx-bdr-clr-o: 1; /* { min: 0.1, max: 1, step: .1, friendly: 'BG Box Border Opacity' } */ --three-8ths: 36.4%; /* Override to match Design */ } main:has( > section:last-child:is([data-colors="primary-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="alternate-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="primary-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="primary-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="alternate-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="primary-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child{ padding-top: 0; } /* Waiting on PR */ .tag:not(:has(a)), .tag a { border: var(--bdr-stl) var(--bdr-w) hsl(from var(--text-color) h s l / var(--bdr-clr-o)); } /* END Waiting on PR */ :where(.sd-zn, .cnt-zn) > * + * { margin-top: calc(var(--sp-vm-clc)* 1.6); } .grd:has(> [data-item="nr"]) { --itm-val: 100 !important; + div { display: none; } } .pg-nv.start.end { display: none; } .bg-bx.pattern-bg { background-color: transparent; &::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--bg-bx-pattern-img); opacity: .5; background-size: 200px 200px; background-position: top left; background-repeat: repeat; mix-blend-mode: multiply; z-index: -1; } &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--inner-theme); z-index: -2; } } @media screen and (width >= 700px) { :root { --fnt-s-mtp: 1 !important; } } @media screen and (width >= 1280px) { :root { --mn_min: calc(var(--vw_) * 0.6); /* { readonly: true } */ } /* Sets up system module widths to be easier to change */ [class*="mn_"].sys_w { max-width: clamp(var(--mn_min), var(--mn-sys), var(--mn_max)); } /* normal */ [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) + [data-colors="primary-light"][class*="pd_v"]:not(.bg-image), [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) + [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image), [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) + [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image), [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) + [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) { padding-top: 0; } /* plus a form */ [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) + form [data-colors="primary-light"][class*="pd_v"]:not(.bg-image), [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) + form [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image), [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) + form [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image), [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) + form [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) { padding-top: 0; } /* form plus (Doesn't work in FF) */ form:has( [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ) + [data-colors="primary-light"][class*="pd_v"]:not(.bg-image), form:has( [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) ) + [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image), form:has( [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ) + [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image), form:has( [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) ) + [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) { padding-top: 0; } /* form plus form (Doesn't work in FF) */ form:has( [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="primary-light"][class*="pd_v"]:not(.bg-image) , form:has( [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="alternate-light"][class*="pd_v"]:not(.bg-image), form:has( [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) , form:has( [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) ) + form > [data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) { padding-top: 0; } } @media screen and (width < 1280px) { :root { --sp-vp-max-mbl: 16%; /* { readonly: true } */ } /* Footer padding if last panel is full-mbl */ main:has( > section:last-child:is([data-colors="primary-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="alternate-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="primary-light"].wht-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"].wht-bg[class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="primary-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="alternate-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child, main:has( > section:last-child:is([data-colors="primary-dark"].blk-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"].blk-bg[class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="primary-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="alternate-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="primary-light"].wht-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"].wht-bg[class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="primary-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="alternate-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child, main:has( > form:last-child > section:is([data-colors="primary-dark"].blk-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"].blk-bg[class*="pd_v"]:not(.bg-image):first-child { padding-top: var(--pd-v); } } /* ── Gutter pattern (visible past 1920px cap) ── */ body, html { background-color: #999999; color: #fff; } @media (min-width: 1920px) { html::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: url(/media/brand/logo-gutter-tile.png); background-size: 320px 520px; background-repeat: repeat; filter: grayscale(1) opacity(.18); pointer-events: none; } } /* global.css */ :root { --full: 100%; /* { readonly: true } */ --half: 50%; /* { readonly: true } */ --third: 33.333%; /* { readonly: true } */ --fourth: 25%; /* { readonly: true } */ --fifth: 20%; /* { readonly: true } */ --sixth: 16.666%; /* { readonly: true } */ --seventh: 14.285%; /* { readonly: true } */ --two-3rds: 66.666%; /* { readonly: true } */ --three-4ths: 75%; /* { readonly: true } */ --three-8ths: 37.5%; /* { readonly: true } */ --five-8ths: 62.5%; /* { readonly: true } */ --forty-five: 45%; /* { readonly: true } */ --fifty-five: 55%; /* { readonly: true } */ --four-5ths: 80%; /* { readonly: true } */ --min-fnt-s: 0.938rem; /* { readonly: true } */ --max-fnt-s: 1rem; /* { readonly: true } */ --clp-rng-1: 0.7520rem; /* { readonly: true } */ --clp-rng-2: calc(var(--vw_) * 0.007936); /* { readonly: true } */ --clp-rng: calc(var(--clp-rng-1) + var(--clp-rng-2) ); /* { readonly: true } */ --mn_wth: clamp(var(--mn_min), var(--mn-f), var(--mn_max)); /* { readonly: true } */ --mn_ch-w: 67ch; /* { readonly: true } */ --shf-off-a: calc(((var(--vw_) - clamp(var(--mn_min), var(--mn-f), var(--mn_max)) ) / 2)); /* { readonly: true } */ --black: #000000; /* { readonly: true } */ --white: #FFFFFF; /* { readonly: true } */ --hdr-lg-mx-ht: 180; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Height Desktop', group: 'Calculations' } */ --hdr-lg-mx-ht-mbl: 100; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Height Mobile', group: 'Calculations' } */ --hdr-lg-mx-wd: 398; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Width Desktop', group: 'Calculations' } */ --hdr-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Width Mobile', group: 'Calculations' } */ --vid-bg-o: 0.3; /* { min: .2, max: 1, step: 0.05, friendly: 'Video Background Opacity', group: 'Images' } */ --mstg-img-bg-o: 0.3; /* { min: .2, max: 1, step: 0.05, friendly: 'Mainstage Background Opacity', group: 'Images' } */ --bnr-img-bg-o: 0.3; /* { min: .2, max: 1, step: 0.05, friendly: 'Banner Background Image Opacity', , group: 'Images' } */ --img-bg-o: 0.3; /* { min: .2, max: 1, step: 0.05, friendly: 'Background Imagery', group: 'Images' } */ --awd-mx-wd: 280; /* { min: 50, max: 500, step: 10, friendly: 'Awards Max Width Desktop', group: 'Images' } */ --awd-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Awards Max Width Mobile', group: 'Images' } */ --awd-mx-wd-clc: calc((var(--awd-mx-wd-mbl) * 1px) + (var(--awd-mx-wd) - var(--awd-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ --awd-mx-ht: 180; /* { min: 50, max: 500, step: 10, friendly: 'Awards Max Height Desktop', group: 'Images' } */ --awd-mx-ht-mbl: 100; /* { min: 10, max: 300, step: 1, friendly: 'Awards Max Height Mobile', group: 'Images' } */ --awd-mx-ht-clc: calc((var(--awd-mx-ht-mbl) * 1px) + (var(--awd-mx-ht) - var(--awd-mx-ht-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ } html { font-size: clamp(var(--min-fnt-s), var(--clp-rng), var(--max-fnt-s)); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--main-bg, #fff); } *, *:before, *:after { box-sizing: border-box; } .hd, .ninja, html[data-flr="0"] [class*="flr_"], .no-flr [class*="flr_"] { display: none !important; } body { font-size: 100%; margin: 0 auto; max-width: var(--st-w); overflow-x: clip; } ol, ul { list-style: none; padding: 0; margin: 0; } dl, dd { margin: 0; } sup { font-size: .5em; } a[href^=tel] { cursor: default; } address { font-style: normal; } img { max-width: 100%; } figure, blockquote { margin: 0; } video { display: block; width: 100%; &[poster] { object-fit: cover; } } .rlt { position: relative; } .abs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blk { display: block; } .nln-blk { display: inline-block; } .hdn { overflow: hidden; } .blk-bg { background-color: var(--black); } .psu-bfr, .psu-aft { z-index: 1; position: relative; } .psu-bfr::before, .psu-aft::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; pointer-events: none; } .m-ato { margin-left: auto; margin-right: auto; display: block; } .disabled, [disabled] { pointer-events: none; opacity: .7; } [aria-hidden="true"] { visibility: hidden; } header:empty { display: none; } :where(div, header) > br:only-child { display: none; } [data-role="btn"] { cursor: pointer; } [class*="gp_sp"] { gap: var(--grd-sp-dyn); &[class*="-sml"] { --grd-sp-dyn: var(--grd-sp-sml); } &[class*="-lrg"] { --grd-sp-dyn: var(--grd-sp-lrg); } > .half { width: calc(var(--half) - (var(--grd-sp-dyn) * 0.5 )); } > .third { width: calc(var(--third) - (var(--grd-sp-dyn) * 0.667 )); } > .fourth { width: calc(var(--fourth) - (var(--grd-sp-dyn) * 0.75 )); } } /* Icon Defaults */ svg { height: 1em; width: 1em; &:not(.flr_hd &) { fill: currentColor; overflow: visible; [style*="stroke-width"], [stroke-width] { /* stroke: currentColor; Temp removal for now */ } [style*="stroke-width"]:not([fill]), [stroke-width]:not([fill]) { fill: none; } } use { opacity: 0; &:empty { display:none; } } * { pointer-events: none; } } /* Remove Transitions for People who Prefer Reduced Motion */ @media (prefers-reduced-motion: reduce) { body *, body *:before, body *:after { transition: none !important; } } /* Fixes Animation Bug */ [class*='prlx'], [class*='anm_'] { will-change: transform, opacity; } /* Lazy Load Styles */ .loading:where(img,video,source) { filter: blur(3px); opacity: 0; transition: none; } img, video, source { transition: filter var(--g-trn-sp) var(--g-trn-tf) .3s, opacity var(--g-trn-sp) var(--g-trn-tf) .3s; } /* General - layout */ section { position: relative; overflow-x: clip; } [class*="mn_"] { width: 100%; max-width: var(--mn_wth); margin-inline: auto; position: relative; } /* Widths */ .full { width: var(--full); } .half { width: var(--half); } .third { width: var(--third); } .two-thirds { width: var(--two-3rds); } .fourth { width: var(--fourth); } .fifth { width: var(--fifth); } .three-8ths { width: var(--three-8ths); } .five-8ths { width: var(--five-8ths); } .forty-five { width: var(--forty-five); } .fifty-five { width: var(--fifty-five); } .max-cnt { width: max-content; max-width: 100%; } /* Link & Button Styles */ a { text-decoration: none; transition: color var(--g-trn-sp) var(--g-trn-tf) 0s; } button { border: none; text-align: inherit; font-family: inherit; font-size: inherit; line-height: inherit; outline: none; cursor: pointer; margin: 0; padding: 0; background-color: transparent; color: inherit; } /* Show/Hide Utilities */ [class*="sw-"], [class*='flx-at-'][class*="sw-"] { display: none; } [class*="hd-"] { display: block; } /* Logo & Watermark Display */ .dk-lg, .lt-lg, .wtr-mrk, [data-colors$="-light"] .bg-bx:not(.lk-bg, .no-bg, .bdr-bg) :is(.dk-lg, .dk-mrk), [data-colors$="-dark"] .bg-bx:not(.lk-bg, .no-bg, .bdr-bg) :is(.lt-lg, .lt-mrk) { display: none; } [data-colors$="-light"] :is(.dk-lg, .dk-mrk), [data-colors$="-dark"] :is(.lt-lg, .lt-mrk), [data-colors$="-light"] :is(.ulk-bg, .alt-bg) :is(.lt-lg, .lt-mrk), [data-colors$="-dark"] :is(.ulk-bg, .alt-bg) :is(.dk-lg, .dk-mrk) { display: block; } /* Images General Styles */ img { display: block; } picture { display: block; source { width: 0; } img { width: 100%; } } picture:not([data-usc5]) { img:where([src*=".jpg"],[src*=".webp"]), img.static-map { object-fit: cover; } img[src*=".png"]:not(.static-map), img[src*=".webp"].png { object-fit: contain; } } picture[data-usc5] { img[src*=".png"] { --opacity: 1; object-fit: contain; } &.bg img, img:not([src*=".png"]) { object-fit: cover; } } .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; img { position: relative; left: 50%; top: 50%; width: calc(100% + 2px); height: calc(100% + 2px); transform: translate(-50%,-50%); } } :is(section, aside):not(.bg-image) > .bg, :is(section, aside):not(.bg-image) .bg-wrp .bg { display: none; } /* BG Boxes */ .bg-bx { position: relative; z-index: 1; &.no-bg { box-shadow: none !important; border-radius: unset !important; padding: 0; &.grd { gap: var(--grd-sp-dyn); > [class*='pd_'] { padding-block: 0; } } > [class*='pd_'] { padding-inline: 0; &:first-child { padding-block-start: 0; } &:last-child { padding-block-end: 0; } } } &.bdr-bg { border: solid var(--bg-bx-bdr-thc, 4px) hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bg-bx-bdr-clr-o, 0.4)); } } [data-role="list"]:has(.crd:is(.no-bg,.bdr-bg)) { filter: none; } /* BG Pattern Styles */ .bg-pattern > .bg { display: none; } .bg-pattern { &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } &.bg-bx::before { z-index: -1; } } .lt-bg.bg-pattern::before { opacity: var(--lt-ptrn-o); background-image: var(--lt-ptrn-bg); background-blend-mode: var(--lt-ptrn-blnd); } .dk-bg.bg-pattern::before { opacity: var(--dk-ptrn-o); background-image: var(--dk-ptrn-bg); background-blend-mode: var(--dk-ptrn-blnd); } .bg-bx.bg-pattern::before { opacity: var(--lt-inr-ptrn-o); background-image: var(--lt-inr-ptrn-bg); mix-blend-mode: var(--lt-inr-ptrn-blnd); } .bg-bx.alt-bg.bg-pattern::before { opacity: var(--alt-inr-ptrn-o); background-image: var(--alt-inr-ptrn-bg); background-blend-mode: var(--alt-inr-ptrn-blnd); } .dk-bg .lk-bg.bg-pattern::before, .lt-bg .ulk-bg.bg-pattern::before { opacity: var(--dk-inr-ptrn-o); background-image: var(--dk-inr-ptrn-bg); background-blend-mode: var(--dk-inr-ptrn-blnd); } /* Social Media & Payment Icon Styles */ .so-lk svg { font-size: var(--so-i-s); } .py-lk svg { font-size: var(--py-i-s); } /* Text Alignment */ [class*="ta_"] { text-align: center; } :where(img, svg)[class*="ta_"] { margin-left: auto; margin-right: auto; } /* Tag */ .tag:not(:has(a)), .tag a { display: inline-block; padding: var(--tag-pd-v) var(--tag-pd-h); border-radius: var(--tag-bdr-rds); border: var(--bdr-stl) var(--bdr-w) hsl(from var(--text-color) h s l / var(--bdr-clr-o)); transition: background-color var(--g-trn-sp) var(--g-trn-tf) 0s, color var(--g-trn-sp) var(--g-trn-tf) 0s; } /* Dialpad Fix */ .sw-phone:not([class*="hd"]) { display: inline-block !important; } [class*="flx"].sw-phone { display: flex !important; } html body a[href].btn.sw-phone:not(:hover) { color: var(--text-alt) !important; } :where(.lt-bg,.dk-bg) { [href^=dialpad]:not([class*="btn"]) { --link-color: var(--fnt-phn); --link-hover: var(--fnt-phn); } } /* 700px Responsive (min-width) */ @media screen and (min-width:700px) { :root { --fnt-s-mtp: .9375; /* { min: .9375, max: 1, step: .005, type: 'range', friendly: 'Site Font Size Multiplier (700px - 1919px)' } */ --min-fnt-s: calc(1rem * var(--fnt-s-mtp)); /* { readonly: true } */ --max-fnt-s: calc(1.063rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-1: calc(0.5590rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-2: calc(var(--vw_) * 0.010080 * var(--fnt-s-mtp)); /* { readonly: true } */ } .sw-700[class*="flx-at-700"]{ display: flex; } .sw-700:not([class*="flx-at-700"]) { display: block; } .hd-700 { display: none !important; } .ta_l-700 { text-align: left; } .ta_r-700 { text-align: right; } :where(img, svg).ta_r-700 { margin-left: auto; margin-right: 0; } :where(img, svg).ta_l-700 { margin-right: auto; margin-left: 0; } } /* 1280px Responsive (min-width) */ @media screen and (min-width:1280px) { :root { --min-fnt-s: calc(0.938rem * var(--fnt-s-mtp)); /* { readonly: true } */ --max-fnt-s: calc(1.063rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-1: calc(0.2107rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-2: calc(var(--vw_) * 0.009091 * var(--fnt-s-mtp)); /* { readonly: true } */ --mn_wth: var(--mn_max); /* { readonly: true } */ } .mn_wd { max-width: clamp(var(--mn_min), var(--mn-w), var(--mn_max)); } .mn_tn { max-width: clamp(var(--mn_min-t), var(--mn-t), var(--mn_max)); } .mn_ch { max-width: var(--mn_ch-w); } .sw-1280[class*="flx-at-1280"] { display: flex; } .sw-1280:not([class*="flx-at-1280"]) { display: block; } .hd-1280 { display: none; } .ta_l-1280 { text-align: left; } .ta_r-1280 { text-align: right; } :where(img, svg).ta_r-1280 { margin-left: auto; margin-right: 0; } :where(img, svg).ta_l-1280 { margin-right: auto; margin-left: 0; } :where(.sd-zn, .cnt-zn) > * + * { margin-top: calc(var(--sp-vm-clc) * 1.6); } .stcky { position: sticky; top: var(--pd-v); align-self: flex-start; } } /* 1500px Responsive (min-width) */ @media screen and (min-width:1500px) { :root { --min-fnt-s: calc(1rem * var(--fnt-s-mtp)); /* { readonly: true } */ --max-fnt-s: calc(1.063rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-1: calc(0.0550rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-2: calc(var(--vw_) * 0.010080 * var(--fnt-s-mtp)); /* { readonly: true } */ } } /* 1920px Responsive (min-width) */ @media screen and (min-width:1920px) { :root { --fnt-s-mtp: 1; /* { min: .89, max: 1, step: .01, type: 'range', friendly: 'Site Font Size Multiplier (1920px & Above)' } */ --min-fnt-s: calc(1.125rem * var(--fnt-s-mtp)); /* { readonly: true } */ --max-fnt-s: calc(1.375rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-1: calc(-0.3295rem * var(--fnt-s-mtp)); /* { readonly: true } */ --clp-rng-2: calc(var(--vw_) * 0.012121 * var(--fnt-s-mtp)); /* { readonly: true } */ } .sw-1920[class*="flx-"]{ display: flex; } .sw-1920:not([class*="flx-"]) { display: block; } .ta_l-1920 { text-align: left; } .ta_r-1920 { text-align: right; } :where(img, svg).ta_r-1920 { margin-left: auto; margin-right: 0; } :where(img, svg).ta_l-1920 { margin-right: auto; margin-left: 0; } } @media screen and (max-width:1279px) { .cms-content .hdr .mbl-mnu { translate: 0; opacity: 1; } section.full-mbl { padding-block: 0; .mbl-fx, &:has([class*="mn_"] > .full-mbl.no-bg:only-child) { padding-block: var(--sp-vp-mmc); } .full-mbl { width: calc(var(--vw_) + 1px); left: 50%; transform: translateX(-50%); > [class*="pd_h"], &[class*="pd_h"] { padding-left: var(--shf-off-a); padding-right: var(--shf-off-a); } > img { position: relative; left: 50%; transform: translateX(-50%); width: calc(var(--vw_) + 1px) !important; max-width: none; } &.bg > img { transform: translate(-50%,-50%); } &.no-bg:not(:only-child) { > [class*="pd_v"], &[class*="pd_v"] { padding-bottom: var(--sp-vp-mmc); } } } aside { .full-mbl.bg-bx { > [class*="pd_v"], &[class*="pd_v"] { padding-bottom: var(--sp-vp-mmc); } } } } .sd-zn { > *:has(.full-mbl) + *:has(.full-mbl) { margin-top: 0; } } [class*="flx"].ta_l-1280, .ta_l-1280 [class*="flx"], [class*="flx"].ta_r-1280, .ta_r-1280 [class*="flx"] { justify-content: center; } @supports not (animation-timeline: scroll()) { [class*="anm_"].full-mbl { transform: translateX(-50%) !important; } } } @media screen and (max-width:699px) { [class*="flx"].ta_l-700, .ta_l-700 [class*="flx"], [class*="flx"].ta_r-700, .ta_r-700 [class*="flx"] { justify-content: center; } } @supports not (animation-timeline: scroll()) { [class*='anm_'], [class*='anm_lst'] > * { animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; } } /* theme.css */ /* -- figma-theme-converter output --------------------------------------------- */ /* Theme: Edge X */ /* Source: edge-x.json */ :root { /* -- Border Radius -------------------------------------------------------- */ --bdr-rds: 0rem; --bdr-tl-rds: 1; --bdr-tr-rds: 1; --bdr-br-rds: 1; --bdr-bl-rds: 1; /* -- Card Border Radius --------------------------------------------------- */ --bdr-rds-crd: 0rem; --bdr-tl-rds-crd: 1; --bdr-tr-rds-crd: 1; --bdr-br-rds-crd: 1; --bdr-bl-rds-crd: 1; /* -- Box Shadow ----------------------------------------------------------- */ --bx-sdw-x: 0rem; --bx-sdw-y: 0rem; --bx-sdw-blr: 0rem; --bx-sdw-o: 0; /* -- Desktop Box Shadow --------------------------------------------------- */ --bx-sdw-dsk-x: 0rem; --bx-sdw-dsk-y: 0rem; --bx-sdw-dsk-blr: 0rem; --bx-sdw-dsk-o: 0; /* -- Card Box Shadow ------------------------------------------------------ */ --bx-sdw-crd-x: 0rem; --bx-sdw-crd-y: 0rem; --bx-sdw-crd-blr: 0rem; --bx-sdw-crd-o: 0; /* -- Button V1 Padding ---------------------------------------------------- */ --btn-v1-pd-t: 1.125rem; --btn-v1-pd-b: 1.125rem; --btn-v1-pd-l: 1.5rem; --btn-v1-pd-r: 1.5rem; --btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l); /* -- Button V1 Border Radius ---------------------------------------------- */ --btn-v1-bdr-rds-tl: 0rem; --btn-v1-bdr-rds-tr: 0rem; --btn-v1-bdr-rds-br: 0rem; --btn-v1-bdr-rds-bl: 0rem; --btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl); /* -- Button V1 Box Shadow ------------------------------------------------- */ --btn-v1-bx-sdw-x: 0rem; --btn-v1-bx-sdw-y: 0rem; --btn-v1-bx-sdw-blr: 0rem; --btn-v1-bx-sdw-o: 0; /* -- Button V1 Border (Alt Variant) --------------------------------------- */ --btn-v1-bdr-w: 1px; --btn-v1-bdr-stl: solid; --btn-v2-pd-t: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Top' } */ --btn-v2-pd-b: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Bottom' } */ --btn-v2-pd-l: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Left' } */ --btn-v2-pd-r: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Right' } */ --btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true } */ /* -- Button V2 Border Radius ---------------------------------------------- */ --btn-v2-bdr-rds-tl: .44rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Left' } */ --btn-v2-bdr-rds-tr: .44rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Right' } */ --btn-v2-bdr-rds-br: .44rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right' } */ --btn-v2-bdr-rds-bl: .44rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Left' } */ --btn-v2-bdr-rds: var(--btn-v2-bdr-rds-tl) var(--btn-v2-bdr-rds-tr) var(--btn-v2-bdr-rds-br) var(--btn-v2-bdr-rds-bl); /* { readonly: true } */ /* -- Button V2 Box Shadow ------------------------------------------------- */ --btn-v2-bx-sdw-x: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'X\' Position' } */ --btn-v2-bx-sdw-y: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'Y\' Position' } */ --btn-v2-bx-sdw-blr: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V1 Box Shadow Blur' } */ --btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */ --btn-v2-bdr-w: 1px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V1 Border Width' } */ --btn-v2-bdr-stl: solid; /* { friendly: 'Button V1 Border Style' } */ /* -- Button Transitions --------------------------------------------------- */ --btn-trn-sp: 0.3s; --btn-trn-tf: ease; /* -- Flair (Shapes & Decorative) ------------------------------------------ */ --flr-bx-w: 297; --flr-bx-w-mbl: 162; --flr-bx-w-clc: calc((var(--flr-bx-w-mbl) * 1px) + (var(--flr-bx-w) - var(--flr-bx-w-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); --flr-mrg-tp: 1rem; --flr-mrg-bt: 1rem; --shape-opacity: 0.05; /* -- Containers & Cards Border -------------------------------------------- */ --crd-bdr-w: 2px; --bg-bx-bdr-thc: 8px; --bg-bx-bdr-clr-o: 1; /* -- Dividers & Separators ------------------------------------------------ */ --bdr-stl: solid; --bdr-w: 1px; --bdr-clr-o: 0.3; } .bg-bx.pattern-bg { border-top: var(--crd-bdr-w) solid var(--text-color); border-bottom: var(--crd-bdr-w) solid var(--text-color); &::before { display: none; } } .btn.v1 { position: relative; background-color: transparent !important; &::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: var(--btn-bg); z-index: -1; transition: background 0.3s ease 0s; transform: skew(-25deg, 0deg); pointer-events: none; } svg * { transition: 0.3s ease 0s !important; } &.alt { border-color: transparent !important; &::after { background-color: transparent; border-color: var(--btn-clr); border-width: var(--btn-v1-bdr-w); border-style: var(--btn-v1-bdr-stl); } &:is(a:hover, a:focus-visible)::after { background-color: var(--btn-bg) !important; } } } .btn.v2 { position: relative; border-color: transparent !important; background-color: transparent !important; &::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: var(--btn-bg); z-index: -1; transition: background 0.3s ease 0s; transform: skew(-25deg, 0deg); pointer-events: none; background-color: transparent; border-color: var(--btn-clr); border-width: var(--btn-v1-bdr-w); border-style: var(--btn-v1-bdr-stl); } &:is(a:hover, a:focus-visible)::after { background-color: var(--btn-bg) !important; } svg * { transition: 0.3s ease 0s !important; } } .cnt-stl li { position: relative; padding-left: 1.2rem; &::before { content: '' !important; position: absolute !important; top: .45rem !important; left: 0 !important; width: 0.85em !important; height: 0.75em !important; background-color: var(--buttons) !important; clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%) !important; background-image: none !important; } } .fnt_t-k { position: relative; margin-inline: auto; display: inline-flex; padding-inline: 8%; padding-block: .44rem; &::before { content: ''; position: absolute; inset: 0; border-color: var(--text-color); border-width: 2px; border-style: solid; transform: skew(-25deg, 0deg); pointer-events: none; } @media screen and (min-width: 1280px) { & { padding-inline: 2rem; } [class*="ta_"] & { margin-inline: auto; } .ta_l-1280 & { margin-inline-start: 1rem; } } @media screen and (max-width: 1279px) { & { padding-block: .25em; } } } /* theme-structure.css */ /* -- Border Radius ------------------------------------------------------------ */ [class*="bdr-rds"] { border-radius: calc(var(--bdr-rds) * var(--bdr-tl-rds)) calc(var(--bdr-rds) * var(--bdr-tr-rds)) calc(var(--bdr-rds) * var(--bdr-br-rds)) calc(var(--bdr-rds) * var(--bdr-bl-rds)); .bg { border-radius: inherit; } } .crd { border-radius: calc(var(--bdr-rds-crd) * var(--bdr-tl-rds-crd)) calc(var(--bdr-rds-crd) * var(--bdr-tr-rds-crd)) calc(var(--bdr-rds-crd) * var(--bdr-br-rds-crd)) calc(var(--bdr-rds-crd) * var(--bdr-bl-rds-crd)); overflow: hidden; } @media screen and (width < 1280px) { .bdr-rds-dsk { border-radius: 0; } } /* -- Box Shadow --------------------------------------------------------------- */ .bx-sdw { box-shadow: var(--bx-sdw-x) var(--bx-sdw-y) var(--bx-sdw-blr) hsl(from var(--black) h s l / var(--bx-sdw-o)); } [data-role="list"]:has(.crd) { filter: drop-shadow(var(--bx-sdw-crd-x) var(--bx-sdw-crd-y) var(--bx-sdw-crd-blr) hsl(from var(--black) h s l / var(--bx-sdw-crd-o))); .crd { box-shadow: none !important; } } .crd { box-shadow: var(--bx-sdw-crd-x) var(--bx-sdw-crd-y) var(--bx-sdw-crd-blr) hsl(from var(--black) h s l / var(--bx-sdw-crd-o)); } @media screen and (min-width: 1280px) { .bx-sdw-dsk:not([src*=".png"]) { box-shadow: var(--bx-sdw-dsk-x) var(--bx-sdw-dsk-y) var(--bx-sdw-dsk-blr) hsl(from var(--black) h s l / var(--bx-sdw-dsk-o)); } } /* -- Buttons ------------------------------------------------------------------ */ [data-colors="primary-light"] { .btn.v1 { --btn-bg: var(--btn-pry); --btn-clr: var(--btn-pry-txt); } .btn.v2 { --btn-bg: var(--btn-sec); --btn-clr: var(--btn-sec-txt); border-color: var(--bdr-clr); } .ulk-bg, .alt-bg { .btn.v1 { --btn-bg: var(--btn-bg-clr-dk); --btn-clr: var(--btn-txt-clr-dk); } .btn.v2 { --btn-clr: var(--btn-bg-clr-dk-alt); border-color: var(--btn-clr); } [popover].pop [data-colors="primary-light"] .btn.v1 { --btn-clr: var(--text); } } } [data-colors="alternate-light"] { .btn.v1 { --btn-bg: var(--btn-pry); --btn-clr: var(--btn-pry-txt); } .btn.v2 { --btn-bg: var(--btn-sec); --btn-clr: var(--btn-sec-txt); border-color: var(--bdr-clr); } .ulk-bg { .btn.v1 { --btn-bg: var(--btn-bg-clr-dk); --btn-clr: var(--btn-txt-clr-dk); } .btn.v2 { --btn-clr: var(--btn-bg-clr-dk-alt); border-color: var(--btn-clr); } [popover].pop [data-colors="primary-light"] .btn.v1 { --btn-clr: var(--text); } } } /* Dark Theme */ [data-colors="primary-dark"] { .btn.v1 { --btn-bg: var(--btn-pry); --btn-clr: var(--btn-pry-txt); } .btn.v2 { --btn-bg: var(--btn-sec); --btn-clr: var(--btn-sec-txt); border-color: var(--bdr-clr); } .ulk-bg, .alt-bg { .btn.v1 { --btn-bg: var(--btn-bg-clr-lt); --btn-clr: var(--btn-txt-clr-lt); } .btn.v2 { --btn-clr: var(--btn-bg-clr-lt-alt); border-color: var(--btn-clr); } } } [data-colors="alternate-dark"] { .btn.v1 { --btn-bg: var(--btn-pry); --btn-clr: var(--btn-pry-txt); } .btn.v2 { --btn-bg: var(--btn-sec); --btn-clr: var(--btn-sec-txt); border-color: var(--bdr-clr); } .ulk-bg { .btn.v1 { --btn-bg: var(--btn-bg-clr-lt); --btn-clr: var(--btn-txt-clr-lt); } .btn.v2 { --btn-clr: var(--btn-bg-clr-lt-alt); border-color: var(--btn-clr); } } } /* Buttons */ .btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; column-gap: 0.5em; text-align: center; &.v1 { background-color: var(--btn-bg); color: var(--btn-clr) !important; padding: var(--btn-v1-pd); border-radius: var(--btn-v1-bdr-rds); box-shadow: var(--btn-v1-bx-sdw-x) var(--btn-v1-bx-sdw-y) var(--btn-v1-bx-sdw-blr) hsl(from var(--black) h s l / var(--btn-v1-bx-sdw-o)); transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, border-color var(--btn-trn-sp) var(--btn-trn-tf) 0s; &.sml { --btn-v1-pd-v-mtp: 0.5; /* { min: 0.2, max: 0.8, step: 0.05, friendly: 'Button V1 Small Vertical Padding Multiplier' } */ --btn-v1-pd-h-mtp: 0.5; /* { min: 0.2, max: 0.8, step: 0.05, friendly: 'Button V1 Small Horizontal Padding Multiplier' } */ --btn-v1-pd: calc(var(--btn-v1-pd-t) * var(--btn-v1-pd-v-mtp)) calc(var(--btn-v1-pd-r) * var(--btn-v1-pd-h-mtp)) calc(var(--btn-v1-pd-b) * var(--btn-v1-pd-v-mtp)) calc(var(--btn-v1-pd-l) * var(--btn-v1-pd-h-mtp)); /* { readonly: true } */ } svg { font-size: 1.22rem; } } &.v2 { background-color: transparent; color: var(--btn-clr); border-color: var(--btn-bg); border-width: var(--btn-v2-bdr-w); border-style: var(--btn-v2-bdr-stl); padding: var(--btn-v2-pd); border-radius: var(--btn-v2-bdr-rds); box-shadow: var(--btn-v2-bx-sdw-x) var(--btn-v2-bx-sdw-y) var(--btn-v2-bx-sdw-blr) hsl(from var(--black) h s l / var(--btn-v2-bx-sdw-o)); transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, border-color var(--btn-trn-sp) var(--btn-trn-tf) 0s; svg { font-size: 1.22rem; } } &.v3 { --btn-v3-pd-t: 0rem !important; --btn-v3-pd-b: 0rem !important; --btn-v3-pd-l: 0rem !important; --btn-v3-pd-r: 0rem !important; --btn-v3-pd: var(--btn-v3-pd-t) var(--btn-v3-pd-r) var(--btn-v3-pd-b) var(--btn-v3-pd-l); column-gap: 0.89rem; color: var(--btn-trt-txt); padding: var(--btn-v3-pd); transition: color var(--btn-trn-sp) var(--btn-trn-tf) 0s; svg { font-size: 1.22rem; } } } /* V1 Hovers */ @media (hover: hover) and (pointer: fine) { /* Light Theme */ [data-colors="primary-light"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); background-color: var(--btn-bg); color: var(--btn-clr); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } .ulk-bg { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } [popover].pop [data-colors="primary-light"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--main-bg-alt); --btn-clr: var(--text-alt); } } } } [data-colors="alternate-light"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); background-color: var(--btn-bg); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } .ulk-bg { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } [popover].pop [data-colors="primary-light"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--main-bg-alt); --btn-clr: var(--text-alt); } } } } /* Dark Theme [Hovers] */ [data-colors="primary-dark"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); background-color: var(--btn-bg); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } .ulk-bg { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } [popover].pop [data-colors="primary-light"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--main-bg-alt); --btn-clr: var(--text-alt); } } } } [data-colors="alternate-dark"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); background-color: var(--btn-bg); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } .ulk-bg { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); } &:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) { --btn-bg: var(--btn-hvr-pry); --btn-clr: var(--btn-hvr-pry-txt); border-color: var(--btn-bg); background-color: var(--btn-bg); } [popover].pop [data-colors="primary-light"] { &:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) { --btn-bg: var(--main-bg-alt); --btn-clr: var(--text-alt); } } } } } /* V2 Hovers */ @media (hover: hover) and (pointer: fine) { &:is(button:hover, button:focus-visible) .btn.v3, button:is(:hover, :focus-visible) .btn.v3, &:is(a:hover, a:focus-visible) .btn.v3, a:is(:hover, :focus-visible) .btn.v3, .btn.v3:is(:hover, :focus-visible) { color: var(--link-color); } } /* -- Flair (Shapes & Decorative) ---------------------------------------------- */ .flr_hd { width: var(--flr-bx-w-clc); overflow: hidden; line-height: 1; margin-top: var(--flr-mrg-tp); margin-bottom: var(--flr-mrg-bt); max-width: 100%; } [class*="ta_"] .flr_hd, .flr_hd[class*="ta_"] { margin-left: auto; margin-right: auto; } .flr_hd > svg { font-size: var(--flr-bx-w-clc); width: auto; height: auto; } @media screen and (min-width: 700px) { .flr_hd.ta_r-700, .ta_r-700 .flr_hd { margin-left: auto; margin-right: 0; } .flr_hd.ta_l-700, .ta_l-700 .flr_hd { margin-right: auto; margin-left: 0; } } @media screen and (min-width: 1280px) { .flr_hd.ta_r-1280, .ta_r-1280 .flr_hd { margin-left: auto; margin-right: 0; } .flr_hd.ta_l-1280, .ta_l-1280 .flr_hd { margin-right: auto; margin-left: 0; } } /* -- Hex Clip (Shapes & Decorative) ------------------------------------------- */ /* -- Containers & Cards Border ------------------------------------------------- */ .bg-bx.bdr-bg { border: var(--bg-bx-bdr-thc) solid hsl(from var(--bg-bx-bdr-clr) h s l / var(--bg-bx-bdr-clr-o)); } .crd-bdr { border: var(--crd-bdr-w) solid hsl(from var(--bg-bx-bdr-clr) h s l / var(--bg-bx-bdr-clr-o)); } .crd-bdr-thc { border: var(--bg-bx-bdr-thc) solid hsl(from var(--bg-bx-bdr-clr) h s l / var(--bg-bx-bdr-clr-o)); } /* -- Dividers & Separators ----------------------------------------------------- */ .tag:not(:has(a)), .tag a { border: var(--bdr-stl) var(--bdr-w) hsl(from var(--text-color) h s l / var(--bdr-clr-o)); } /* image-styles.css */ :root { --opacity: var(--img-fg-o); --filter: saturate(var(--img-fg-sat)) sepia(var(--img-fg-sep)) brightness(var(--img-fg-brt)) contrast(var(--img-fg-con)) blur(var(--img-fg-blr)); } picture img { opacity: var(--opacity); filter: var(--filter); } .bg-image, .ovrly { --opacity: var(--img-bg-o); --filter: saturate(var(--img-bg-sat)) sepia(var(--img-bg-sep)) brightness(var(--img-bg-brt)) contrast(var(--img-bg-con)) blur(var(--img-bg-blr)); } .mstg-tls { --opacity: var(--mstg-img-fg-o); --filter: saturate(var(--mstg-img-fg-sat)) sepia(var(--mstg-img-fg-sep)) brightness(var(--mstg-img-fg-brt)) contrast(var(--mstg-img-fg-con)) blur(var(--mstg-img-fg-blr)); &.bg-image, .ovrly { --opacity: var(--mstg-img-bg-o); --filter: saturate(var(--mstg-img-bg-sat)) sepia(var(--mstg-img-bg-sep)) brightness(var(--mstg-img-bg-brt)) contrast(var(--mstg-img-bg-con)) blur(var(--mstg-img-bg-blr)); } } .bnr-tls { --opacity: var(--bnr-img-fg-o); --filter: saturate(var(--bnr-img-fg-sat)) sepia(var(--bnr-img-fg-sep)) brightness(var(--bnr-img-fg-brt)) contrast(var(--bnr-img-fg-con)) blur(var(--bnr-img-fg-blr)); &.bg-image, .ovrly { --opacity: var(--bnr-img-bg-o); --filter: saturate(var(--bnr-img-bg-sat)) sepia(var(--bnr-img-bg-sep)) brightness(var(--bnr-img-bg-brt)) contrast(var(--bnr-img-bg-con)) blur(var(--bnr-img-bg-blr)); } } li picture:not(.ovrly) img, .bg-image picture:not(.bg) img { opacity: 1 !important; filter: none !important; } section:has(picture.wtr-mrk img) { --wtr-mrk-tp: 20%; /* { min: -50, max: 50, step: 1, type: 'range', friendly: 'Watermark Top Position', group: 'Images' } */ --wtr-mrk-lt: 0%; /* { min: -30, max: 30, step: 1, type: 'range', friendly: 'Watermark Left Position', group: 'Images' } */ --wtr-mrk-w: 40%; /* { min: 0, max: 100, step: 1, type: 'range', friendly: 'Watermark Width', group: 'Images' } */ --wtr-mrk-o: 1; /* { min: 0, max: 100, step: 1, type: 'range', friendly: 'Watermark Opacity', group: 'Images' } */ picture.wtr-mrk { > img { position: absolute; top: var(--wtr-mrk-tp); left: var(--wtr-mrk-lt); opacity: var(--wtr-mrk-o); max-width: var(--wtr-mrk-w); height: max-content; transform: none; } } &.f_rev { picture.wtr-mrk img { left: auto; right: var(--wtr-mrk-lt); } } } /* frosted-bg.css */ /* Frosted Glass — frst-bg * * Apply alongside bg-bx to replace the solid inner-theme background with * a semi-transparent frosted glass surface. * * Works in any color context — the glass tint derives from --text-color, * so it automatically adapts when used with lk-bg or ulk-bg. * * Overrideable vars (set on the element or a parent): * --frst-bg-clr — color channel source (default: --text-color) * --frst-bg-o — background opacity (default: 0.07) * --frst-bdr-o — border opacity (default: 0.15) * --frst-blur — backdrop blur amount (default: 12px) */ [data-colors] { .bg-bx.frst-bg { --frst-bg-clr: var(--inner-theme); --frst-bg-o: 0.5; --frst-blur: 12px; background-color: hsl(from var(--frst-bg-clr) h s l / var(--frst-bg-o)); border: 1px solid hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o)); backdrop-filter: blur(var(--frst-blur)); -webkit-backdrop-filter: blur(var(--frst-blur)); &.blk-bg { --frst-bg-clr: var(--black); } } } /* review-stars.css */ :root { --rvw-str-gp: 3px; /* readonly: true */ --rvw-str-clr: #FFD80A; /* readonly: true */ --rvw-str-s: 1.5rem; /* { min: 1, max: 4, step: 0.1, friendly: 'Review Star Font Size', group: 'Calculations' } */ --rvw-str-o: 0.5; /* { min: 0, max: 0.9, step: 0.01, friendly: 'Opacity For Inactive Review Stars', group: 'Calculations' } */ } /* Review Stars */ .strs { gap: var(--rvw-str-gp); font-size: var(--rvw-str-s); color: var(--rvw-str-clr); &[class*='rt-1'] { &:is(.rt-1, .rt-1-0) > :nth-child(n + 2), &:not( :is(.rt-1, .rt-1-0) ) > :nth-child(n + 3) { opacity: var(--rvw-str-o); } &:not( :is(.rt-1, .rt-1-0) ) > svg:nth-child(2), &:not( :is(.rt-1, .rt-1-0) ) > :nth-child(2) svg { fill: url(#StarsGradient); } } &[class*='rt-2'] { &:is(.rt-2, .rt-2-0) > :nth-child(n + 3), &:not( :is(.rt-2, .rt-2-0) ) > :nth-child(n + 4) { opacity: var(--rvw-str-o); } &:not( :is(.rt-2, .rt-2-0) ) > svg:nth-child(3), &:not( :is(.rt-2, .rt-2-0) ) > :nth-child(3) svg { fill: url(#StarsGradient); } } &[class*='rt-3'] { &:is(.rt-3, .rt-3-0) > :nth-child(n + 4), &:not( :is(.rt-3, .rt-3-0) ) > :nth-child(n + 5) { opacity: var(--rvw-str-o); } &:not( :is(.rt-3, .rt-3-0) ) > svg:nth-child(4), &:not( :is(.rt-3, .rt-3-0) ) > :nth-child(4) svg { fill: url(#StarsGradient); } } &[class*='rt-4'] { &:is(.rt-4, .rt-4-0) > :nth-child(n + 5) { opacity: var(--rvw-str-o); } &:not( :is(.rt-4, .rt-4-0) ) > svg:nth-child(5), &:not( :is(.rt-4, .rt-4-0) ) > :nth-child(5) svg { fill: url(#StarsGradient); } } } /* scrolling-list.css */ [data-role="scroller"] { &:not(.start.end) [data-role="list"] { justify-content: flex-start; will-change: scroll-position; } &:not(.msr){ [data-role="list"] { scroll-snap-type: x mandatory; } [data-direction="vertical"] [data-role="list"] { scroll-snap-type: y mandatory; } } [data-role="list"] { overflow-x: auto; scroll-behavior: smooth; flex-wrap: nowrap !important; will-change: scroll-position; &.instant { scroll-behavior: auto; } &::-webkit-scrollbar { display: none; } } [data-direction="vertical"] [data-role="list"] { flex-wrap: wrap !important; overscroll-behavior: contain; } [data-role="item"] { scroll-snap-align: start; } &.start.end [data-role="arrows"], &:not(.s-active) [data-role="arrows"], &.tabbing [data-role="arrows"] { display: none !important; } &.start [data-action="Prev"], &.end [data-action="Next"] { opacity: 0.5; pointer-events: none; } } [data-role="arrows"] { gap: var(--sp-qk); pointer-events: none; button { pointer-events: auto; } button svg.icn { font-size: var(--sl-sa-s); transition: color var(--g-trn-sp) var(--g-trn-tf) 0s; } } /* scrolling-list-side-arrows.css */ @media screen and (min-width:1280px) { [data-role="scroller"] { --sl-sa-pd-mtp: 1.5; /*{ min: 1, max: 2.5, step: 0.1, type: 'range', friendly: 'Side Scrolling Arrows Padding' }*/ .sl_sa-edg { position: relative; padding-left: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp) ); padding-right: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp) ); [data-role="container"] { z-index: 2; } [data-role="arrows"] { position: absolute; width: 100%; top: 50%; left: 0; z-index: 1; margin-top: 0; justify-content: space-between; transform: translateY(-50%); } } } } /* ui-scroll.css */ /* Scroll Bar */ :root { --ui-scroll-brd-rds: 12px; /* { readonly: true } */ --ui-scroll-w: 0.278rem; /* { readonly: true } */ } .ui-scroll { overflow: auto; &::-webkit-scrollbar { width: var(--ui-scroll-w) !important; height: calc(var(--ui-scroll-w) * 2) !important; } &::-webkit-scrollbar-thumb { background-color: var(--text-color); border-radius: var(--ui-scroll-brd-rds); border: 0; } &::-webkit-scrollbar-track { background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o)); border-radius: var(--ui-scroll-brd-rds); box-shadow: none; opacity: .3; } &[class*="ht-"] { --ui-height: auto; max-height: var(--ui-height); } &.ht-10 { --ui-height: 10rem; } &.ht-15 { --ui-height: 15rem; } &.ht-20 { --ui-height: 20rem; } } /* pop-up.css */ /* Pop-up General */ [popover].pop { width: 100%; border: none; padding: 0; opacity: 0; transform: scale(0.8); background-color: transparent; transition-property: opacity, transform, overlay, display; transition-duration: var(--g-trn-sp); transition-behavior: allow-discrete; position: fixed; &::backdrop { opacity: 0; backdrop-filter: blur(0.5rem); background: hsl(from var(--black) h s l / 0.7); transition: opacity var(--g-trn-sp) var(--g-trn-tf); } &:popover-open { opacity: 1; transform: scale(1); &::backdrop { opacity: 1; } @starting-style { opacity: 0; transform: scale(0.8); &::backdrop { opacity: 0; } } } [popovertargetaction="hide"] { margin-left: auto; color: var(--link-alt); svg { margin: 4px; font-size: 1.5rem; transition: var(--g-trn-sp) var(--g-trn-tf) 0s; } &:is(:hover, :focus-visible) svg { transform: rotate(90deg) scale(1.1,1.1); } } .ui-scroll { max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); } } /* video-bg.css */ .vid-bg-tls { .bg { video { object-fit: cover; opacity: var(--vid-bg-o, 1); height: 100%; visibility: visible; } ul, .ctrls { position: absolute; bottom: 1rem; left: 0; width: 100%; z-index: 1; a, button { font-size: 1.75rem; padding: .4rem; transition: color var(--g-trn-sp) var(--g-trn-tf) 0s; } &.cms-disabled { display: none; } } video[src=""], picture:has(img[src=""]), video[src*="/"] + picture, &:has(> video[src=""]) .ctrls, &:not(:has(video)) .ctrls { display: none; } } } .cms-content .vid-bg-tls { .bg { position: relative; video { display: none; } } [popover]:not(:popover-open) { transform: none; opacity: 1; position: relative !important; visibility: visible; display: block; } } /* content.css */ /* Title Styles */ h1, h2, h3, h4, h5, h6 { margin: 0; } h1 > :where(b,strong), section header > *:first-child:not(a) > :where(b,strong) { display: inline-block; } section header > *:first-child + :where(p, h2, h3, h4, h5, strong) { margin-top: var(--g-cnt-ttl-ttl-m); } .cnt-stl { :where(h1,h2,h3,h4,h5,h6) { margin-block: var(--g-cnt-ttl-ttl-m); } :is(p, ol, ul) { margin-block: var(--g-cnt-ttl-cnt-m); } :is(ul) { list-style-type: none; padding: 0; li { position: relative; padding: .1em 0 .1em 1.5em; } ul, ol { margin-top: .25em; margin-bottom: 0; } } :is(ol) { list-style-type: decimal; padding: 0 0 0 1.5em; li { position: relative; padding: .1em 0; &:has(> :is(strong,b):first-child)::marker { font-weight: bold; } } ol, ul { margin-top: .25em; margin-bottom: 0; } } :not(.spl-lst) :is(ul,ol):not(.el-tab-box) li + li { margin-top: .3em; } :is(ol):not(.spl-lst) li + li { margin-top: 0.3em; } .spl-lst li { margin-top: .5em; } /* Content Styles */ > *:first-child { margin-top: 0; } > *:last-child { margin-bottom: 0; } figure.image { margin: var(--g-cnt-full-img-m) auto; } img:is(.media-right, .media-left) { margin-bottom: 1rem; } .media-small { width: 25%; } .media-medium { width: 50%; } .media-large { width: 100%; } :is(.media-right, figure.image-style-side) { float: right; margin-left: 1rem; margin-top: 0; max-width: 50%; } .media-left { float: left; margin-right: 1rem; } .txt-hlt { --txt-hlt-bg: var(--dk-bg); --txt-hlt-txt: var(--dk-txt); [data-colors="alternate-light"] & { --txt-hlt-bg: var(--dk-alt-bg); --txt-hlt-txt: var(--dk-alt-txt); } [data-colors="primary-dark"] & { --txt-hlt-bg: var(--lt-bg); --txt-hlt-txt: var(--lt-txt); } [data-colors="alternate-dark"] & { --txt-hlt-bg: var(--lt-alt-bg); --txt-hlt-txt: var(--lt-alt-txt); } &.v1 { padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70)); padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5)); background-color: var(--inner-theme); border-radius: var(--bdr-rds-crd); } &.v2 { padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70)); padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5)); background-color: var(--txt-hlt-bg); border-radius: var(--bdr-rds-crd); color: var(--txt-hlt-txt); } &.v3 { padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70)); padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5)); border-radius: var(--bdr-rds-crd); border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o)); border-width: 1px; border-style: solid; } &.v4 { padding-block: calc(var(--sp-qk) * var(--sp-t-mpt-70)); border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o)); border-width: 0; border-style: solid; border-top-width: 1px; border-bottom-width: 1px; } &.v5 { padding-inline: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5)); border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o)); border-width: 0; border-style: solid; border-left-width: 1px; border-right-width: 1px; } } @media screen and (max-width:1279px) { figure.image img, img[class*="media-"] { width: 100%; } } } .cnt-stl { @media screen and (min-width: 700px) { .spl-lst { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--grd-sp-sml); } .spl-lst li { width: calc(var(--half) - (var(--grd-sp-sml) / 2)); } } } /* Bullet color override inside alt-bg boxes */ :is(.lt-bg,.dk-bg) .bg-bx.alt-bg ul li::before { background-color: var(--buttons); } /* skip-to-content.css */ .skip-to-content { position: absolute; top: 0; left: 0; z-index: 10000; transform: translateY(-110%); transition: transform 0.15s ease-out; padding: 0.75rem 1.25rem; background: #000; color: #fff; font: inherit; text-decoration: none; border: 0; border-radius: 0 0 0.25rem 0; cursor: pointer; } .skip-to-content:focus, .skip-to-content:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: -4px; } /* coupon-print.css */ body.is-printing-coupon { *:not(:has(.cpn--printing), .cpn--printing, .cpn--printing *) { display: none !important; } *:has(.cpn--printing) { width: 100%; } .cpn--printing { width: 100%; &, * { background-color: white !important; color: black !important; } .act { display: none !important; } } } @media (pointer: fine) { .cpn-act-share { display: none !important; } } @media (pointer: coarse) { .cpn-act-download { display: none !important; } } /* flex.css */ /* General Flex Styles */ [class*='flx'] { align-items: stretch; align-content: space-around; display: flex; &[class*='flx-at-']:not([class*="sw-"]) { display: block; } &:is(.f_gp) > :is(:not([data-columns],.fit), :only-child), .ato { flex: 1 1 auto; } .fit { flex: 0 0 auto; } .str { align-self: stretch; } } .f_c { justify-content: center; } .f_r { justify-content: flex-end; } .f_sb { justify-content: space-between; } .f_sa { justify-content: space-around; } .f_gp { column-gap: var(--flx-gap); > .half { width: calc(var(--half) - (var(--flx-gap) / 2 )); } > .third { width: calc(var(--third) - (var(--flx-gap) / 2 )); } > .two-thirds { width: calc(var(--two-3rds) - (var(--flx-gap) / 2 )); } > .three-8ths { width: calc(var(--three-8ths) - (var(--flx-gap) / 2 )); } > .five-8ths { width: calc(var(--five-8ths) - (var(--flx-gap) / 2 )); } > .forty-five { width: calc(var(--forty-five) - (var(--flx-gap) / 2 )); } > .fifty-five { width: calc(var(--fifty-five) - (var(--flx-gap) / 2 )); } } .f_m { align-items: center; } .f_t { align-items: flex-start; } .f_b { align-items: flex-end; } .f_bl { align-items: baseline; } .f_wrp { flex-wrap: wrap; } .f_rev { flex-direction: row-reverse; } .f_clm { flex-direction: column; } .f_nln { display: inline-flex; } .flx-at-700 { --show-in-aether: 1; } /* 700px Responsive (min-width) */ @media screen and (min-width:700px) { [class*='flx'][class*="-at-700"]:not([class*="sw-"]) { display: flex; > * { margin-block: 0 !important; } } } /* 1280px Responsive (min-width) */ @media screen and (min-width: 1280px) { [class*='flx'][class*="-at-1280"]:not([class*="sw-"]) { display: flex; > * { margin-block: 0 !important; } } } /* 1500px Responsive (min-width) */ @media screen and (min-width:1500px) { [class*='flx'][class*="-at-1500"]:not([class*="sw-"]) { display: flex; > * { margin-block: 0 !important; } } } /* 1499px Responsive */ @media screen and (max-width:1499px) { [class*='flx'][class*="-at-1500"] { &[class*="gp_sp"] > * + * { margin-top: var(--grd-sp-dyn); } > :not(svg, .full-mbl, .btn, .max-cnt) { width: 100% !important; max-width: 100% !important; margin-inline: 0; } } } /* 1279px Responsive */ @media screen and (max-width:1279px) { [class*='flx'][class*="-at-1280"] { &[class*="gp_sp"] > * + * { margin-top: var(--grd-sp-dyn); } > :not(svg, .full-mbl, .btn, .max-cnt) { width: 100% !important; max-width: 100% !important; margin-inline: 0; } } } /* 699px Responsive */ @media screen and (max-width:699px) { [class*='flx'][class*="-at-700"] { &[class*="gp_sp"] > * + * { margin-top: var(--grd-sp-dyn); } > :not(svg, .full-mbl, .btn, .max-cnt) { width: 100% !important; max-width: 100% !important; margin-inline: 0; } } } /* grid.css */ :has( > .grd ) { container-type: inline-size; } .grd { --itm-val: 100; --itm-w: calc(var(--itm-val) * 1%); --itm-grw: 1; display: flex; flex-wrap: wrap; &[class*="gp_sp"] { --itm-w: calc( var(--itm-val) * 1% - ( var(--grd-sp-dyn) * ( (100 - var(--itm-val)) * .01 ) ) ); } &.ato-fit { --itm-grw: 0; } &.mx-6, &.mx-7 { --itm-val: 50; } > * { flex: var(--itm-grw) 0 var(--itm-w); } @container (width >= 35rem) { &:not([class*="mx-"]) { --itm-val: 50; } &.mx-6 { --itm-val: 33.333; } &.mx-7 { --itm-val: 25; } } @container (width >= 50rem) { &.mx-2, &.mx-3, &.mx-4 { --itm-val: 50; } &:not([class*="mx-"]) { --itm-val: 33.333; } &.mx-6 { --itm-val: 25; } } @container (width >= 78rem) { &.mx-3 { --itm-val: 33.333; } &.mx-4 { --itm-val: 25; } &:not([class*="mx-"]) { --itm-val: 20; } &.mx-6 { --itm-val: 16.66667; } &.mx-7 { --itm-val: 14.285; } } } /* spacings.css */ /* General - Spacing */ :root { --sp-t-mpt-10: .2; /* { readonly: true } */ --sp-t-mpt-20: .4; /* { readonly: true } */ --sp-t-mpt-30: .6; /* { readonly: true } */ --sp-t-mpt-40: .8; /* { readonly: true } */ --sp-t-mpt-60: 1.2; /* { readonly: true } */ --sp-t-mpt-70: 1.4; /* { readonly: true } */ --sp-t-mpt-80: 1.6; /* { readonly: true } */ --sp-t-mpt-90: 1.8; /* { readonly: true } */ } [class*="pd_v"] { --pd-v: clamp(var(--sp-vp-min), var(--sp-vp), var(--sp-vp-max)); padding-block: var(--pd-v); &[class*="v-70"] { --pd-v: clamp(calc(var(--sp-vp-min) * 1.5), var(--sp-vp), calc(var(--sp-vp-max) * 1.5) ); } @media screen and (min-width:700px) { &[class*="v-30"] { --pd-v: clamp(calc(var(--sp-vp-min) * 0.5), var(--sp-vp), calc(var(--sp-vp-max) * 0.5) ); } } } [class*="pd_h"] { --pd-h: clamp(var(--sp-hp-min), var(--sp-hp), var(--sp-hp-max)); padding-inline: var(--pd-h); &[class*="h-70"] { --pd-h: clamp(calc(var(--sp-hp-min) * 1.5), var(--sp-hp), calc(var(--sp-hp-max) * 1.5) ); } &[class*="h-30"] { --pd-h: clamp(calc(var(--sp-hp-min) * 0.5), var(--sp-hp), calc(var(--sp-hp-max) * 0.5) ); } } .pd_lt-0 { padding-left: 0; } .pd_rt-0 { padding-right: 0; } .mrg_tp { margin-top: var(--sp-vm-clc); } .mrg_tp-0 { margin-top: 0; } .mrg_tp-10 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-10)); } .mrg_tp-20 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-20)); } .mrg_tp-30 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-30)); } .mrg_tp-40 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-40)); } .mrg_tp-60 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-60)); } .mrg_tp-70 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-70)); } .mrg_tp-80 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-80)); } .mrg_tp-90 { margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-90)); } .mrg_bt { margin-bottom: var(--sp-vm-clc); } .mrg_bt-0 { margin-bottom: 0; } .mrg_bt-10 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-10)); } .mrg_bt-20 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-20)); } .mrg_bt-30 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-30)); } .mrg_bt-40 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-40)); } .mrg_bt-60 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-60)); } .mrg_bt-70 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-70)); } .mrg_bt-80 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-80)); } .mrg_bt-90 { margin-bottom: calc(var(--sp-vm-clc) * var(--sp-t-mpt-90) ); } /* Quick - Spacings */ .pd_tp { padding-top: var(--sp-qk); } .pd_tp-0 { padding-top: 0; } .pd_tp-10 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-10)); } .pd_tp-20 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-20)); } .pd_tp-30 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-30)); } .pd_tp-40 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-40)); } .pd_tp-60 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-60)); } .pd_tp-70 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-70)); } .pd_tp-80 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-80)); } .pd_tp-90 { padding-top: calc(var(--sp-qk) * var(--sp-t-mpt-90)); } .pd_bt { padding-bottom: var(--sp-qk); } .pd_bt-0 { padding-bottom: 0; } .pd_bt-10 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-10)); } .pd_bt-20 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-20)); } .pd_bt-30 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-30)); } .pd_bt-40 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-40)); } .pd_bt-60 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-60)); } .pd_bt-70 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-70)); } .pd_bt-80 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-80)); } .pd_bt-90 { padding-bottom: calc(var(--sp-qk) * var(--sp-t-mpt-90)); } .mrg_lt { margin-left: var(--sp-qk); } .mrg_lt-10 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-10)); } .mrg_lt-20 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-20)); } .mrg_lt-30 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-30)); } .mrg_lt-40 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-40)); } .mrg_lt-60 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-60)); } .mrg_lt-70 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-70)); } .mrg_lt-80 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-80)); } .mrg_lt-90 { margin-left: calc(var(--sp-qk) * var(--sp-t-mpt-90)); } .mrg_rt { margin-right: var(--sp-qk); } .mrg_rt-10 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-10)); } .mrg_rt-20 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-20)); } .mrg_rt-30 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-30)); } .mrg_rt-40 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-40)); } .mrg_rt-60 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-60)); } .mrg_rt-70 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-70)); } .mrg_rt-80 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-80)); } .mrg_rt-90 { margin-right: calc(var(--sp-qk) * var(--sp-t-mpt-90)); } /* animation.css */ /* panels fade-up */ @keyframes anim-fade-up { 0% { opacity: 0; transform: translateY(32px) } to { opacity: 1; transform: translateY(0) } } section:not(.cnt) [class*="mn_"] { animation: anim-fade-up 0.5s ease-out both; animation-timeline: view(); animation-range: entry 25% entry 60%; /* Animation properties create a new stacking context; this z-index keeps descendants from falling behind siblings with z-index: 0. */ position: relative; z-index: 1; } /* mainstage-animation.css */ :root { --animation-mainstage-id: 'rotate-in'; } /* mainstages rotate-in */ @keyframes anim-rotate-in { 0% { opacity: 0; transform: rotate(-12deg) scale(.9) } to { opacity: 1; transform: rotate(0) scale(1) } } .mstg [class*="mn_"] { animation: anim-rotate-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* basic-hovers.css */ :root { --hvr-trns: transform var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s, filter var(--g-trn-sp) var(--g-trn-tf) 0s; --hvr-y-amt: 2rem; } /* Opacity Out */ .hvr_op-out { opacity: 1; transition: var(--hvr-trns); } @media (hover: hover) and (pointer: fine) { a:is(:hover, :focus-visible) .hvr_op-out, .hvr_op-out:is(:hover, :focus-visible) { opacity: .55; } } /* Opacity In */ .hvr_op-in { opacity: 0; transition: var(--hvr-trns); } .hvr_op-in.abs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } @media (hover: hover) and (pointer: fine) { a:is(:hover, :focus-visible) .hvr_op-in, .hvr_op-in:is(:hover, :focus-visible) { opacity: 1; } } /* Opacity List */ .hvr_op-lst { transition: var(--hvr-trns); } @media (hover: hover) and (pointer: fine) { ul:has(.hvr_op-lst:is(:hover,:focus-visible)) .hvr_op-lst:not(:is(:hover,:focus-visible)) { opacity: 0.5; } } /* Scale Down List */ .hvr_scl-lst { transition: var(--hvr-trns); } @media (hover: hover) and (pointer: fine) { ul:has(.hvr_scl-lst:is(:hover,:focus-visible)) .hvr_scl-lst:not(:is(:hover,:focus-visible)) { transform: scale(0.9); } } /* Blur List */ .hvr_blr-lst { transition: var(--hvr-trns); } @media (hover: hover) and (pointer: fine) { ul:has(.hvr_blr-lst:is(:hover,:focus-visible)) .hvr_blr-lst:not(:is(:hover,:focus-visible)) { filter: blur(3px); } } /* Grayscale List */ .hvr_gry-lst img { transition: var(--hvr-trns); } @media (hover: hover) and (pointer: fine) { ul:has(.hvr_gry-lst:is(:hover,:focus-visible)) .hvr_gry-lst:not(:is(:hover,:focus-visible)) img { filter: grayscale(1); } } /* Grayscale */ .hvr_gry { transition: var(--hvr-trns); @media (hover: hover) and (pointer: fine) { &:is(:hover,:focus-visible) { filter: grayscale(1); } } } /* Scale Up */ .hvr_scl-up { transition: var(--hvr-trns); } @media (hover: hover) and (pointer: fine) { a:is(:hover, :focus-visible) .hvr_scl-up, .hvr_scl-up:is(:hover, :focus-visible) { transform: scale(1.05,1.05); } } /* Scale Down */ .hvr_scl-dwn { transition: var(--hvr-trns); @media (hover: hover) and (pointer: fine) { &:is(:hover,:focus-visible) { transform: scale(0.9); } } } /* translateY - Up */ .hvr_trn-up { --hvr-y-amt: 1rem; transition: var(--hvr-trns); @media (hover: hover) and (pointer: fine) { &:is(:hover,:focus-visible) { transform: translateY(calc(-1 * var(--hvr-y-amt))); } } } /* translateY - Down */ .hvr_trn-dwn { transition: var(--hvr-trns); @media (hover: hover) and (pointer: fine) { &:is(:hover,:focus-visible) { transform: translateY(var(--hvr-y-amt)); } } } ul:has([class*="hvr_trn"]) { padding-block: var(--hvr-y-amt); } /* Shift Image */ .hvr_shf { overflow: hidden; img { width: calc(100% + var(--hvr-y-amt)); max-width: none; transform: translateX(calc(-.5 * var(--hvr-y-amt))); transition: var(--hvr-trns); } @media (hover: hover) and (pointer: fine) { &:is(:hover,:focus-visible) img { transform: translateX(0); } } } /* Underline */ .hvr_und { position: relative; &::before { content: ''; position: absolute; width: 100%; height: var(--bdr-w); bottom: 0; left: 0; background-color: var(--text-color); transform: scaleX(0.65); opacity: 0; transform-origin: 0 50%; transition: var(--hvr-trns); } &.clr-swp::before { background-color: var(--link); } } @media (hover: hover) and (pointer: fine) { a:is(:hover, :focus-visible, .active, .selected) .hvr_und:before, .hvr_und:is(:hover, :focus-visible, .active, .selected):before { opacity: 1; transform: scaleX(1); } } /* colors.css */ :root { /* ── Palette: Primary Dark ───────────────────────────────────────── */ --dk-id: "primary-dark"; --dk-name: "Primary Dark"; --dk-creative: "Midnight Signal"; --dk-h1: #f7fbff; --dk-h2: #a9c8ff; --dk-h3: #d9e6ff; --dk-h4: #f2f4ff; --dk-h5: #e6ecff; --dk-accent: #c48a3c; --dk-callout: #ffcf7a; --dk-btn-pry: #3570d4; --dk-btn-pry-txt: #ffffff; --dk-btn-sec: #c48a3c; --dk-btn-sec-txt: #ffffff; --dk-btn-trt-txt: #f2f4ff; --dk-bg: #1a1e2e; --dk-txt: #f2f4ff; --dk-lnk: #ffd591; --dk-lnk-hov: #ffecbc; --dk-bdr: #3b4463; /* ── Palette: Alternate Dark ─────────────────────────────────────── */ --dk-alt-id: "alternate-dark"; --dk-alt-name: "Alternate Dark"; --dk-alt-creative: "Electric Crest"; --dk-alt-h1: #ffffff; --dk-alt-h2: #ffdf9c; --dk-alt-h3: #ffecc2; --dk-alt-h4: #fdfdfd; --dk-alt-h5: #ffffff; --dk-alt-accent: #ffffff; --dk-alt-callout: #ffffff; --dk-alt-btn-pry: #ffffff; --dk-alt-btn-pry-txt: #163a7a; --dk-alt-btn-sec: #0b1733; --dk-alt-btn-sec-txt: #fdfdfd; --dk-alt-btn-trt-txt: #ffffff; --dk-alt-bg: #3570d4; --dk-alt-txt: #fdfdfd; --dk-alt-lnk: #ffffff; --dk-alt-lnk-hov: #ffffff; --dk-alt-bdr: #fdfdfd; /* ── Palette: Primary Light ──────────────────────────────────────── */ --lt-id: "primary-light"; --lt-name: "Primary Light"; --lt-creative: "Ivory Ledger"; --lt-h1: #1e2433; --lt-h2: #283147; --lt-h3: #31405c; --lt-h4: #22283a; --lt-h5: #283147; --lt-accent: #8b5c18; --lt-callout: #0b1733; --lt-btn-pry: #c48a3c; --lt-btn-pry-txt: #111111; --lt-btn-sec: #1e2433; --lt-btn-sec-txt: #fdfdfd; --lt-btn-trt-txt: #22283a; --lt-bg: #ffffff; --lt-txt: #22283a; --lt-lnk: #8b5c18; --lt-lnk-hov: #865e29; --lt-bdr: #d4d7e2; /* ── Palette: Alternate Light ────────────────────────────────────── */ --lt-alt-id: "alternate-light"; --lt-alt-name: "Alternate Light"; --lt-alt-creative: "Harbor Mist"; --lt-alt-h1: #0b1733; --lt-alt-h2: #1a2742; --lt-alt-h3: #223255; --lt-alt-h4: #1a243a; --lt-alt-h5: #223255; --lt-alt-accent: #765324; --lt-alt-callout: #275db9; --lt-alt-btn-pry: #c48a3c; --lt-alt-btn-pry-txt: #111111; --lt-alt-btn-sec: #0b1733; --lt-alt-btn-sec-txt: #fdfdfd; --lt-alt-btn-trt-txt: #1a243a; --lt-alt-bg: #e5edf7; --lt-alt-txt: #1a243a; --lt-alt-lnk: #223255; --lt-alt-lnk-hov: #275db9; --lt-alt-bdr: #c1d0ea; } /* flair.css */ :root { --flr-bx-w: 395; --flr-bx-w-mbl: 293; --flr-mrg-tp: 1.78rem; --flr-mrg-bt: 1.78rem; --flr-bx-w-clc: calc((var(--flr-bx-w-mbl) * 1px) + (var(--flr-bx-w) - var(--flr-bx-w-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); --flr-hdr-clr: var(--buttons) !important; } .flr_hd { width: var(--flr-bx-w-clc); overflow: hidden; line-height: 1; margin-top: var(--flr-mrg-tp); margin-bottom: var(--flr-mrg-bt); } [class*="ta_"] .flr_hd, .flr_hd[class*="ta_"] { margin-left: auto; margin-right: auto; } .flr_hd > svg { font-size: var(--flr-bx-w-clc); width: auto; height: auto; } /* 700px Responsive (min-width) */ @media screen and (min-width:700px) { .flr_hd.ta_r-700, .ta_r-700 .flr_hd { margin-left: auto; margin-right: 0; } .flr_hd.ta_l-700, .ta_l-700 .flr_hd { margin-right: auto; margin-left: 0; } } /* 1280px Responsive (min-width) */ @media screen and (min-width:1280px) { .flr_hd.ta_r-1280, .ta_r-1280 .flr_hd { margin-left: auto; margin-right: 0; } .flr_hd.ta_l-1280, .ta_l-1280 .flr_hd { margin-right: auto; margin-left: 0; } } /* header-tools.css */ :root { --hdr-mnu-btn-s: 2.2rem; /* { min: 1.5, max: 3, step: .1, friendly: 'Mobile | Header Menu Button Size', group: 'Calculations' } */ --hdr-phn-icn-s: 1.3rem; /* { min: 1, max: 2, step: .1, friendly: 'Mobile | Header Phone Icon Size', group: 'Calculations' } */ --hdr-lg-mx-wd: 280; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Width Desktop', group: 'Calculations' } */ --hdr-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Width Mobile', group: 'Calculations' } */ --hdr-lg-mx-wd-clc: calc((var(--hdr-lg-mx-wd-mbl) * 1px) + (var(--hdr-lg-mx-wd) - var(--hdr-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ --hdr-lg-mx-ht: 180; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Height Desktop', group: 'Calculations' } */ --hdr-lg-mx-ht-mbl: 100; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Height Mobile', group: 'Calculations' } */ --hdr-lg-mx-ht-clc: calc((var(--hdr-lg-mx-ht-mbl) * 1px) + (var(--hdr-lg-mx-ht) - var(--hdr-lg-mx-ht-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ --hdr-lg-sp: 100; /* { min: 50, max: 500, step: 10, friendly: 'Logo Margin Desktop', group: 'Calculations' } */ --hdr-lg-sp-lpt: 50; /* { min: 10, max: 300, step: 1, friendly: 'Logo Margin Laptop', group: 'Calculations' } */ --hdr-lg-sp-clc: calc((var(--hdr-lg-sp-lpt) * 1px) + (var(--hdr-lg-sp) - var(--hdr-lg-sp-lpt)) * ((var(--vw_) - 1280px) / (1920 - 1280))); /* { readonly: true } */ --hdr-nv-sp: 35; /* { min: 50, max: 500, step: 10, friendly: 'Top Nav Link Spacing Desktop', group: 'Calculations' } */ --hdr-nv-sp-lpt: 20; /* { min: 10, max: 300, step: 1, friendly: 'Top Nav Link Spacing Laptop', group: 'Calculations' } */ --hdr-nv-sp-clc: calc((var(--hdr-nv-sp-lpt) * 1px) + (var(--hdr-nv-sp) - var(--hdr-nv-sp-lpt)) * ((var(--vw_) - 1280px) / (1920 - 1280))); /* { readonly: true } */ --hdr-bnr-icn-sz: 1.2em; /* { readonly: true } */ --hdr-tb-arw-s: 0.9rem; /* { readonly: true } */ --ovlp-hdr-bg-o: 0; /* { min: 0, max: 0.9, step: 0.05, friendly: 'Overlap Header BG Opacity', group: 'Calculations' } */ } #HeaderZone { z-index: 10; position: relative; } .hdr { .tp-lg { max-width: var(--hdr-lg-mx-wd-clc); img { max-height: var(--hdr-lg-mx-ht-clc); } } .nv .el-tab, .nv .el-sec-tab { outline: none; font-size: var(--hdr-tb-arw-s); margin-left: var(--hdr-tb-arw-s); } .nv .el-tab:is(:hover, :focus), nav li.selected > a { color: var(--link-hover); } /* Menu Button Styles */ .mnu-btn { position: relative; cursor: pointer; font-size: var(--hdr-mnu-btn-s); min-width: 2.778rem; } .btn-tp { top: 0; right: 0; z-index: 4; position: fixed; padding: 1.222rem; visibility: hidden; transform: translateX(100%); transition: transform var(--btn-trn-sp) var(--btn-trn-tf) 0s, background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, visibility var(--btn-trn-sp) var(--btn-trn-tf) 0s; transition-behavior: allow-discrete; } .nt-bnr svg { font-size: var(--hdr-bnr-icn-sz); } .srch { font-size: 1.5rem; } @media screen and (min-width:1280px) { .tp-lg { margin-right: var(--hdr-lg-sp-clc); } .nv > ul:not(.mnu-nv) > li + li { margin-left: var(--hdr-nv-sp-clc); } .nv:last-child > ul li:last-child { margin-right: 0; } .fly-nv { max-width: 25rem; min-width: 15rem; width: max-content; max-height: calc(100dvh - 20rem); position: absolute; left: 0; top: 100%; opacity: 0; overflow-y: auto; visibility: hidden; display: block; transition: visibility var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s; transition-behavior: allow-discrete; ul li a:not(:only-child) { max-width: calc(100% - (var(--hdr-tb-arw-s) * 2 )); } } li:is(:hover,:focus-visible) > .fly-nv, li:has(a:is(:hover,:focus-visible)) > .fly-nv, .fly-nv:has(a:is(:hover,:focus-visible)) { opacity: 1; visibility: visible; } } @media screen and (max-width:1279px) { .mbl-mnu { width: 83%; height: 100dvh; left: 0; right: auto; overflow: auto; padding-top: 0.811rem; padding-bottom: 4rem; translate: -100% 0; border: none; position: fixed; transition: translate var(--g-trn-sp) var(--g-trn-tf), display var(--g-trn-sp) var(--g-trn-tf) allow-discrete, overlay var(--g-trn-sp) var(--g-trn-tf) allow-discrete; &::backdrop { opacity: 0; background: hsl(from var(--black) h s l / var(--bx-sdw-o)); transition: opacity var(--g-trn-sp) var(--g-trn-tf); backdrop-filter: blur(3px); } &:popover-open { translate: 0 0; &::backdrop { opacity: 1; } @starting-style { translate: -100% 0; &::backdrop { opacity: 0; } } } .mbl-mnu { width: 75%; } .mbl-nv { flex: 1 1 auto; } .chld-arw { padding: 0.7rem; padding-right: 0; } } .phn-icn { font-size: var(--hdr-phn-icn-s); border-radius: 50%; padding: 0.922rem; } .input-text { border: none; } .lg-bx { width: 100%; } &.lt-bg .nv { background-color: var(--inner-bg); } &.dk-bg .nv { background-color: var(--inner-bg-alt); } } } .overlap #HeaderZone { position: absolute; width: 100%; top: 0; left: 0; .hdr { background-color: hsl(from var(--background) h s l / var(--ovlp-hdr-bg-o)); } } /* To Top Button Styles */ .scrolled-down .btn-tp { visibility: visible; transform: translateX(0); } @media screen and (min-width:1921px) { :root { --hdr-nv-sp-clc: calc(var(--hdr-nv-sp) * 1px); } } @media screen and (max-width:1279px) { .mnu-opn .hdr .nv { transform: translateX(0); opacity: 1; visibility: visible; } } @media screen and (max-width:700px) { .cms-content .hdr .nv { position: relative; transform: none; opacity: 1; width: 20rem; max-height: 20rem; } } /* banner-tools.css */ /* Banner Tools */ .bnr-tls { --bnr-tls-pd-v-tp: 165; /* { readonly: true } */ --bnr-tls-pd-v-tp-mbl: 75; /* { readonly: true } */ --bnr-tls-pd-v-bt: 165; /* { readonly: true } */ --bnr-tls-pd-v-bt-mbl: 75; /* { readonly: true } */ --bnr-tls-pd-v-tp-clc: calc((var(--bnr-tls-pd-v-tp-mbl) * 1px) + (var(--bnr-tls-pd-v-tp) - var(--bnr-tls-pd-v-tp-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ --bnr-tls-pd-v-bt-clc: calc((var(--bnr-tls-pd-v-bt-mbl) * 1px) + (var(--bnr-tls-pd-v-bt) - var(--bnr-tls-pd-v-bt-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ padding-top: var(--bnr-tls-pd-v-tp-clc); padding-bottom: var(--bnr-tls-pd-v-bt-clc); .cms-content & { [field="Title"] [data-sysheader] { display: none; } [field="Title"] if[p-hide='true'] { display: block; } } } .overlap { .bnr-tls [class*="mn_"] { padding-top: var(--bnr-tls-pd-v-tp-clc); } } /* borders.css */ /* Borders */ [class*="bdr_"] { border-color: hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o)); border-style: var(--bdr-stl); border-width: 0; } .bdr_a { border-width: var(--bdr-w); } .bdr_tp { border-top-width: var(--bdr-w); } .bdr_bt { border-bottom-width: var(--bdr-w); } .bdr_rt { border-right-width: var(--bdr-w); } .bdr_lt { border-left-width: var(--bdr-w); } .bdr_a-thc { border-width: var(--bdr-w-thc, var(--bg-bx-bdr-thc)); } .bdr_tp-thc { border-top-width: var(--bdr-w-thc, var(--bg-bx-bdr-thc)); } .bdr_bt-thc { border-bottom-width: var(--bdr-w-thc, var(--bg-bx-bdr-thc)); } .bdr_rt-thc { border-right-width: var(--bdr-w-thc, var(--bg-bx-bdr-thc)); } .bdr_lt-thc { border-left-width: var(--bdr-w-thc, var(--bg-bx-bdr-thc)); } /* services-tools.css */ main { --srv-tls-icn-s: 2.5rem; } .srv-icn { font-size: var(--srv-tls-icn-s); } /* forms.css */ /* Form Styles */ fieldset { min-inline-size: auto; border: none; padding: 0; margin: 0; legend { padding: 0; } ul { flex-wrap: wrap; } } label { display: block; text-align: left; transition: color var(--g-trn-sp) var(--g-trn-tf) 0s; } small { font-size: .778rem; } /* Form Input Styles */ input, textarea, select { border: 0; width: 100%; outline: none; color: inherit; font-size: inherit; font-weight: normal; font-family: inherit; line-height: inherit; text-transform: none; background-color: transparent; line-height: var(--fnt-frm-lh); } select, input[type='search'] { appearance: none; } textarea { resize: none; overflow: auto; min-height: 4.5rem; } :invalid { box-shadow: none; } .inp-mrk, .input-text { position: relative; } .input-text #Consent + small { text-wrap: balance; } [class*="ta_"] { .input-text #Consent + small { text-align: center; } @media screen and (min-width:1280px) { &[class*="l-1280"] { .input-text #Consent + small { text-align: left; } } &[class*="r-1280"] { .input-text #Consent + small { text-align: right; } } } } .input-text { text-align: left; font-size: 1rem; background-clip: padding-box !important; :is(input, select, textarea) { border-width: var(--frm-bdr-w); border-style: var(--frm-bdr-stl); border-radius: var(--frm-bdr-rds); transition: border-color var(--g-trn-sp) var(--g-trn-tf) 0s; padding: 1em; } &:has( > svg ) :is(input, select, textarea) { padding-right: 3em; } select { option { background-color: var(--background); color: var(--text-color); } } label { &.abs { top: 1em; left: 1em; pointer-events: none; transform: scale(1); transform-origin: 0 50%; transition: transform var(--g-trn-sp) var(--g-trn-tf) 0s, top var(--g-trn-sp) var(--g-trn-tf) 0s; } } > svg { bottom: calc(50% - .5em); right: 1em; position: absolute; pointer-events: none; color: var(--link-color); } } :is(.focused, .filled) { .input-text { label { &.abs { top: 0; transform: scale(0.7); } } } } /* Form Checkbox Styles */ .inp-mrk { .input-text { border: 0; padding: 0; } input { position: absolute; opacity: 0; top: 0; left: 0; margin: 0; padding: 0; cursor: pointer; -webkit-appearance: none; z-index: 3; &:checked + label.replace:before { opacity: 1; transform: none; } &[type=radio] + label.replace { border-radius: 50%; } } label { user-select: none; -moz-user-select: none; -ms-user-select: none; &.toggle, &.replace { flex: 0 0 auto; cursor: pointer; + label { margin: 0; line-height: 1.55; position: relative; padding-left: .625em; } } &.replace { margin: 0; width: 1.5em; height: 1.5em; border-width: 1px; position: relative; border-style: solid; transition: border-color var(--g-trn-sp) var(--g-trn-tf) 0s; &::before { content: ''; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; position: absolute; transform: scale(.7); border-radius: inherit; transition: background-color var(--g-trn-sp) var(--g-trn-tf) 0s, transform var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s; } } } } /* Ui-Condidional */ html:not(.cms-content) .ui-conditional-panel:not(.active) { display: none; visibility: hidden; } /* Form Colors */ @scope (form) to (.inp-mrk) { .input-text { /* --text-color: var(--text); --background: var(--white); */ :is(input, select, textarea) { color: var(--text-color); border-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o)); background: var(--background); } label.abs { color: var(--text-color); } } .focused .input-text :is(input, select, textarea) { border-color: var(--highlight-color) !important; } .invalid .input-text :is(input, select, textarea) { border-color: var(--invalid-color) !important; } .valid .input-text :is(input, select, textarea) { border-color: var(--valid-color); } } .inp-mrk label.replace { border-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o)); } .inp-mrk input:checked + label.replace { border-color: var(--link-color); } .inp-mrk label.replace.disabled, .inp-mrk input:disabled + label.replace { background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o)); } .inp-mrk label.replace.disabled::before, .inp-mrk input:disabled + label.replace::before { background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o)); } .inp-mrk label.replace::before { background-color: hsl(from var(--text-color) h s l / var(--bdr-clr-o)); } .inp-mrk input:checked + label.replace::before { background-color: var(--link-color); } .inp-mrk label.replace + label, .inp-mrk label.toggle + label { color: var(--text-color); } .inp-mrk label.replace.disabled + label, .inp-mrk input:disabled + label.replace + label { color: hsl(from var(--text-color) h s l / var(--bdr-clr-o)); } /* footer-tools.css */ /* Footer Panel Tools */ :root { --ftr-lg-mx-wd: 188; /* { min: 50, max: 500, step: 10, friendly: 'Footer Logo Max Width Desktop', group: 'Calculations' } */ --ftr-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Footer Logo Max Width Mobile', group: 'Calculations' } */ --ftr-mct-tp-ovlp: 1rem; /* { min: 0, max: 12, step: 0.5, type: 'range', friendly: 'Footer Mascot Top Overlap Amount'} */ --ftr-mct-mx-w: 30%; /* { min: 0, max: 100, step: 1, type: 'range', friendly: 'Footer Mascot Max Width'} */ --ftr-lg-mx-wd-clc: calc((var(--ftr-lg-mx-wd-mbl) * 1px) + (var(--ftr-lg-mx-wd) - var(--ftr-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */ } .ftr { .ftr-lg { max-width: var(--ftr-lg-mx-wd-clc); } div:has( + picture.mct) { z-index: 1; } picture.mct { margin-top: calc(-1 * var(--ftr-mct-tp-ovlp)); max-width: var(--ftr-mct-mx-w); > img { width: auto; } } @media screen and (max-width: 1279px) { .ta_l-1280 .ftr-lg { margin-inline: auto; } } @media screen and (max-width: 699px) { .ta_l-700 .ftr-lg { margin-inline: auto; } } } /* scorpion-footers.css */ /* Scorpion Footers */ .scp-ftr { --scp-ftr-lt-bg: #FFFFFF; /* { readonly: true } */ --scp-ftr-dk-txt: #86898F; /* { readonly: true } */ --scp-ftr-dk-bg: #191919; /* { readonly: true } */ --scp-ftr-lt-txt: #191919; /* { readonly: true } */ --scp-ftr-nav-d: block; /* { friendly: 'SiteMap / Privacy Display' } */ background: var(--background) !important; } .scp-ftr .nv-dsp { display: var(--scp-ftr-nav-d); } .scp-ftr.lt-bg { --background: var(--scp-ftr-lt-bg); --text-color: var(--scp-ftr-lt-txt); --link-color: var(--scp-ftr-lt-txt); } .scp-ftr.dk-bg { --background: var(--scp-ftr-dk-bg); --text-color: var(--scp-ftr-dk-txt); --link-color: var(--scp-ftr-dk-txt); } .cms-content .scp-ftr if[field="IndustryType"][p-hide="true"] { display: none; } @media screen and (min-width:1280px) { .scp-ftr { &[class*="pd_v"] { padding-top: var(--pd-v) !important; } .inf.ta_l-1280 { width: 66%; } } } @media screen and (min-width:700px) { .scp-ftr .inf.ta_l-700 { width: 66%; } } @media screen and (max-width:699px) { html:has(#help_center_widget_con) .scp-ftr { padding-bottom: 5rem; } } /* header-v1.css */ /* -- Header v1 ------------------------------------------------ */ :root:has(.hdr.v1) { --hdr-lg-sp: 80; --hdr-lg-sp-lpt: 30; --hdr-nv-sp: 40; --hdr-nv-sp-lpt: 10; } .hdr.v1 { .third.itm:not(:has(> *)) { display: none; } /* Allow logo to overflow below the header bottom edge */ overflow: visible; .lg-bx { overflow: visible; /* Remove bottom padding so logo controls its own bottom spacing */ padding-bottom: 0; } .tp-lg { padding-bottom: 0; position: relative; z-index: 2; } .ann-bnr { .ann-cta-lbl { font-weight: 400; } li { strong { font-weight: 700; } a { text-decoration: underline; opacity: .8; } } .sl_sa-edg { --sl-sa-pd-mtp: 1.5; position: relative; padding-left: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp)); padding-right: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp)); } [data-role="arrows"] { position: absolute; width: calc(100% - ((calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp)) * 2) - 1rem)); top: 50%; left: calc((var(--sl-sa-s) * var(--sl-sa-pd-mtp)) - .5rem); z-index: 1; margin-top: 0; justify-content: space-between; transform: translateY(-50%); } } &.no-ovp .tp-lg { margin-block: 0; } @media screen and (width >= 1280px) { .tp-lg { /* Pull the logo down past the header's bottom edge */ margin-block: -2.05rem -1.89rem; } /* Align last flyout to the right to prevent overflow */ .nv > ul > li:last-child .fly-nv { left: auto; right: 0; } .ann-bnr { .alt-itm { min-width: 29%; } } } @media screen and (max-width:1279px) { & { .ann-bnr { .fit.itm { margin-top: 0 !important; } } } } } /* banner-v2.css */ .bnr.v2 { --bnr-tls-pd-v-tp: 165; --bnr-tls-pd-v-tp-mbl: 75; --bnr-tls-pd-v-bt: 197; --bnr-tls-pd-v-bt-mbl: 75; --bnr-img-bg-o: 0.4; --fnt-t-k-ls: 0.61rem; } /* services-v6.css */ .srv.v6 { --bdr-clr-o: .2; --srv-v6-icn-s: 2.5rem; --srv-v6-icn-path-1: var(--white); --srv-v6-icn-path-2: var(--buttons); .srv-icn { font-size: var(--srv-v6-icn-s); flex: 0 0 auto; } .services-v6-header { display: grid; gap: 1.5rem; @media screen and (min-width: 1280px) { grid-template-columns: 1fr 1fr; align-items: end; } } li { .bg-bx { background-color: hsl(from var(--text-color) h s l / .06); border: 1px solid hsl(from var(--bdr-clr) h s l / .08); padding: 1.78rem; } p { color: hsl(from var(--text-color) h s l / .6); } .btn-bx { align-self: flex-end; } &:not(:has(p)) { .btn-bx { align-self: center; } a.bg-bx, div.bg-bx { align-items: center; } } .btn svg { > path:first-child { fill: var(--srv-v6-icn-path-1); opacity: 1; } > path:nth-child(2) { fill: var(--srv-v6-icn-path-2); } } } .fnt_pl { font-family: var(--fnt-t); } } /* contact-v2.css */ .ctc.v2 { --flr-bx-w: 293; --flr-bx-w-mbl: 293; --flr-mrg-tp: 1.5rem; --flr-mrg-bt: 1.5rem; --flr-bx-w-clc: calc((var(--flr-bx-w-mbl) * 1px) + (var(--flr-bx-w) - var(--flr-bx-w-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); --pd-v: clamp(calc(var(--sp-vp-min) * 0.6), var(--sp-vp), calc(var(--sp-vp-max) * 0.6) ); .flr_hd { svg { width: 100%; height: auto; } } picture.bg img { mix-blend-mode: luminosity; opacity: 0.3; } .input-text { label.abs { opacity: 0; pointer-events: none; } :is(input, select, textarea)::placeholder { color: var(--text-color); } :is(input, select, textarea) { background: transparent; border-color: var(--text-color); border-width: 2px; border-radius: 0.444rem; } } } /* footer-v6.css */ .ftr.v6 { --bdr-clr-o: .1; /* -- Row 1: Nav Bar ------------------------------------ */ .ftr-v6-nav { padding: 2.78rem 0; } .ftr-v6-nav-lst { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; } /* -- Row 2: Contact Info Strip ------------------------- */ .ftr-v6-contact { padding: .89rem 0; .flx-at-1280 { @media screen and (min-width:1280px) { & { gap: 0; } } } } .ftr-v6-block { gap: 1rem; flex: 1; padding-block: .89rem; svg { font-size: 2.67rem; } } .ftr-v6-lbl { font-size: 0.75rem; opacity: 0.6; } .ftr-v6-val { font-size: 1.25rem; font-weight: 600; } .ftr-v6-div { background-color: hsl(from var(--text-color) h s l / 0.1); @media screen and (min-width: 1280px) { width: 1px; align-self: stretch; margin: 0 3.556rem; &:first-of-type { margin-left: 0; } &:last-of-type { margin-right: 0; } } @media screen and (max-width:1279px) { & { width: 100%; height: 1px; margin: 2rem 0; } } } /* -- Row 3: Bottom Bar --------------------------------- */ .ftr-v6-btm { padding: 1.33rem 0; } .ftr-v6-follow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; } /* -- Social Icon Circles ------------------------------- */ .so-lk { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: hsl(from var(--text-color) h s l / 0.1); svg { font-size: 0.875rem; } } /* -- Responsive: Stack nav on mobile ------------------- */ @media screen and (max-width: 1279px) { .ftr-v6-nav .flx-at-1280 { text-align: center; } .ftr-v6-nav-lst { flex-wrap: wrap; justify-content: center; margin-top: 1rem; margin-bottom: 1rem; } } } /* scorpion-footer-v1.css */ .scp-ftr.v1 { --background: var(--black); font-family: 'Host Grotesk', sans-serif; .icn { font-size: 2rem; } } .scp-ftr.v1 nav a, .scp-ftr.v1 small { font-size: 14px; } .scp-ftr.v1 .crtd-by { font-size: 10px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 4px; text-transform: uppercase; }