:root { /** FONT FAMILY **********************************************/ --font-family-1: "Inter", Arial, sans-serif; --font-family-2: Arial, sans-serif; --font-family-3: Arial, sans-serif; /** FONT SIZES **********************************************/ --font-size-1: 0.667rem; /* 12px */ --font-size-2: 0.778rem; /* 14px */ --font-size-3: 0.889rem; /* 16px */ --font-size-4: 1rem; /* 18px */ --font-size-5: 1.167rem; /* 21px */ --font-size-6: 1.333rem; /* 24px */ --font-size-7: 1.611rem; /* 29px */ --font-size-8: 2.111rem; /* 38px */ --font-size-9: 2.667rem; /* 48px */ --font-size-10: 3.333rem; /* 60px */ --font-size-base: 16px; /* dont list in "Style buliding blocks", used on element to set base */ /** FONT WEIGHT **********************************************/ --font-weight-1: 300; --font-weight-2: 400; --font-weight-3: 600; --font-weight-4: 700; --font-weight-5: 800; /** LINE HEIGHT **********************************************/ --line-height-1: 0.667rem; /* 12px */ --line-height-2: 0.778rem; /* 14px */ --line-height-3: 0.889rem; /* 16px */ --line-height-4: 1rem; /* 18px */ --line-height-5: 1.167rem; /* 21px */ --line-height-6: 1.333rem; /* 24px */ --line-height-7: 1.611rem; /* 29px */ --line-height-8: 2.111rem; /* 38px */ --line-height-9: 2.667rem; /* 48px */ --line-height-10: 3.333rem; /* 60px */ /** LETTER SPACING **********************************************/ --letter-spacing-1: 0.5px; --letter-spacing-2: 0.6px; --letter-spacing-3: 0.7px; --letter-spacing-4: 0.8px; --letter-spacing-5: 0.9px; --letter-spacing-6: 1px; --letter-spacing-7: 1.1px; --letter-spacing-8: 1.2px; --letter-spacing-9: 1.3px; --letter-spacing-10: 1.4px; --letter-spacing-11: 1.5px; /** ABSOLUTE POSITION SIZE *******************************************/ --absolute-position-size-1: -40px; --absolute-position-size-2: -25px; --absolute-position-size-3: -10px; --absolute-position-size-4: -5px; --absolute-position-size-5: 0; --absolute-position-size-6: 5px; --absolute-position-size-7: 10px; --absolute-position-size-8: 15px; --absolute-position-size-9: 25px; --absolute-position-size-10: 40px; /** SIZES: Padding/Margin/Gaps ***********************************/ --size-1: 10px; /* .7rem */ --size-2: 15px; /* .8rem */ --size-3: 20px; /* 1rem */ --size-4: 25px; /* 1.2rem */ --size-5: 30px; /* 1.5rem */ --size-6: 40px; /* 2rem */ --size-7: 60px; /* 3rem */ --size-8: 80px; /* 4rem */ --button-padding: var(--size-2) var(--size-5); /** BORDER RADIUS *******************************************/ --radius-size-1: 5px; --radius-size-2: 20px; --radius-size-3: 27px; --radius-size-4: 36px; --radius-size-5: 45px; /** BORDER SIZE ************************************/ --border-size-1: 1px; --border-size-2: 2px; --border-size-3: 3px; --border-size-4: 5px; --border-size-5: 8px; /** SITE WIDTH - Min/Max-Width ***********************************/ --site-width-gutter: 15px; --site-width-size-1: 500px; --site-width-size-2: 700px; --site-width-size-3: 900px; --site-width-size-4: 1100px; --site-width-size-5: 1400px; /** COLUMN LAYOUT **********************************************/ --container-col-count: 12; --item-col-count: var(--container-col-count); --gap-size: var(--size-5); /** COLORS **************************************************/ /** Brand Colors - Semantic Tokens **/ --color-brand-primary: var( --color-blue-4 ); /* Main brand color for high emphasis elements */ --color-brand-secondary: var( --color-blue-3 ); /* Secondary brand color for less prominent elements */ --color-brand-accent: var(--color-teal-3); /* Highlights, CTAs, badges */ --color-brand-surface: var( --color-blue-1 ); /* Background surfaces, cards, panels */ --color-brand-border: var(--color-blue-6); /* Default border color */ --dynamic-theme-color: unset; /* Dynamic Theme color set on page-level for buttons, accent borders, etc. */ /** Color Palettes - Primitive Tokens **/ /** Cyan **/ --color-cyan-1: #f0fafc; /** Lagoon (10%) **/ --color-cyan-2: #b2e5f0; /** Lagoon (50%) **/ --color-cyan-3: #66cbe1; /** Lagoon **/ --color-cyan-4: #387a89; /** Lagoon (AA) **/ --color-cyan-5: #1c4a54; /** Lagoon (AAA) **/ /** Blue **/ --color-blue-1: #f1f6fb; /** Glacier Blue (50%) **/ --color-blue-2: #9cc7e6; /** Snowmelt Blue **/ --color-blue-3: #2a7fbd; /** Travelex White Site link hover **/ --color-blue-4: #003d6e; /** Travel Guard Navy **/ --color-blue-5: #302261; /** Night Sky **/ --color-blue-6: #e4edf8; /** Glacier Blue **/ --color-blue-7: #037092; /** Travelex White Site link **/ /** Yellow **/ --color-yellow-1: #f8f6c1; /** Morning Yellow **/ --color-yellow-2: #f3e862; /** Sunflare **/ --color-yellow-3: #ffc709; /** Amber **/ --color-yellow-4: #fba819; /** Amber (AA) **/ --color-yellow-5: #b2641d; /** Amber (AAA) **/ /** Orange **/ --color-orange-1: #faece9; /** Terracotta (10%) **/ --color-orange-2: #e69e93; /** Terracotta (50%) **/ --color-orange-3: #ce3d27; /** Terracotta **/ --color-orange-4: #9f2f1e; /** Terracotta (AA) **/ --color-orange-5: #852819; /** Terracotta (AAA) **/ /** Green **/ --color-green-1: #f9fcf5; /** Jungle (25%) **/ --color-green-2: #d2e7b4; /** Jungle (50%) **/ --color-green-3: #a5d069; /** Jungle **/ --color-green-4: #437a1f; /** Jungle (AA) **/ --color-green-5: #2b640c; /** Jungle (AAA) **/ /** Red **/ --color-red-1: #fbeef3; /** Watermelon (10%) **/ --color-red-2: #edacc4; /** Watermelon (50%) **/ --color-red-3: #db5989; /** Watermelon **/ --color-red-4: #c53058; /** Watermelon (AA) **/ --color-red-5: #af0827; /** Watermelon (AAA) **/ /** Purple **/ --color-purple-1: #f5f0f7; /** Lavender Mist (50%) **/ --color-purple-2: #f3edf5; /** Soft Lavender **/ --color-purple-3: #d6c4e0; /** Lavender Mist **/ --color-purple-4: #726394; /** Lavender Mist (Dark) **/ --color-purple-5: #302261; /** Night Sky **/ /** Teal **/ --color-teal-1: #e8f6f5; /** Seafoam (50%) **/ --color-teal-2: #d6e6e2; /** Morning Dew **/ --color-teal-3: #64c5b9; /** Seafoam **/ --color-teal-4: #32928e; /** Seafoam (Dark) **/ --color-teal-5: #005f62; /** Deep Sea Green **/ /** gray-Neutral **/ --color-gray-1: #e8e9ea; /** Midnight (10%) **/ --color-gray-2: #c6c8cb; /** Midnight (25%) **/ --color-gray-3: #a4a8ab; /** Midnight (40%) **/ --color-gray-4: #8d9296; /** Midnight (50%) **/ --color-gray-5: #555b62; /** Midnight (75%) **/ --color-gray-6: #333b43; /** Midnight (90%) **/ --color-gray-7: #1c252e; /** Midnight **/ /** gray-Warm **/ /* Consolidated: -1/-2/-3 were all #faf9f7 (Sand), -4/-5 were all #ede8de (Warm Gray), -6/-7 were all #b6a99b (Stone) */ /* Fixed typo: --color-grey-warm-6 renamed to --color-gray-warm-6 */ --color-gray-warm-1: #faf9f7; /** Sand **/ --color-gray-warm-2: var(--color-gray-warm-1); /** Sand (alias) **/ --color-gray-warm-3: var(--color-gray-warm-1); /** Sand (alias) **/ --color-gray-warm-4: #ede8de; /** Warm Gray **/ --color-gray-warm-5: var(--color-gray-warm-4); /** Warm Gray (alias) **/ --color-gray-warm-6: #b6a99b; /** Stone (was --color-grey-warm-6, typo fixed) **/ --color-grey-warm-6: var( --color-gray-warm-6 ); /** Stone (deprecated alias, use --color-gray-warm-6) **/ --color-gray-warm-7: var(--color-gray-warm-6); /** Stone (alias) **/ /** gray-Blue **/ /* Consolidated: -1 through -5 were all #f1f6fb (Light Steel), -6/-7 were all #809eb6 (Dark Steel) */ --color-gray-blue-1: #f1f6fb; /** Light Steel **/ --color-gray-blue-2: var(--color-gray-blue-1); /** Light Steel (alias) **/ --color-gray-blue-3: var(--color-gray-blue-1); /** Light Steel (alias) **/ --color-gray-blue-4: var(--color-gray-blue-1); /** Light Steel (alias) **/ --color-gray-blue-5: var(--color-gray-blue-1); /** Light Steel (alias) **/ --color-gray-blue-6: #809eb6; /** Dark Steel **/ --color-gray-blue-7: var(--color-gray-blue-6); /** Dark Steel (alias) **/ /** informational colors **/ --color-error-1: #ffeaee; --color-error-2: #f39897; --color-error-3: #f54c4a; --color-error-4: #eb2d2d; --color-error-5: #be0012; --color-warning-1: #fffaeb; --color-warning-2: #fedf89; --color-warning-3: #f79009; --color-warning-4: #dc6803; --color-warning-5: #7a2e0e; --color-success-1: #ecfdf3; --color-success-2: #a6f4c5; --color-success-3: #32d583; --color-success-4: #039855; --color-success-5: #054f31; /** Misc **/ --color-black-5: #000; /** pure black **/ --color-white-1: #fff; /** pure white **/ --color-transparent: transparent; /** Transparent **/ /** DROP SHADOW COLORS **************************************************/ --color-drop-shadow-gray-1: #7f7f7f1a; /* Gray @10% */ --color-drop-shadow-gray-2: #7f7f7f4d; /* Gray @30% */ --color-drop-shadow-gray-3: #7f7f7fcc; /* Gray @80% */ --color-drop-shadow-black-1: #0000001a; /* Black @10% */ --color-drop-shadow-black-2: #0000004d; /* Black @30% */ --color-drop-shadow-black-3: #000000cc; /* Black @80% */ --color-drop-shadow-white-1: #ffffff80; /* White @50% */ --color-drop-shadow-white-2: #ffffffb3; /* White @70% */ --color-drop-shadow-white-3: #ffffffe6; /* White @90% */ --color-drop-shadow-brand1-1: #1352de1a; /* Blue-3 @10% */ --color-drop-shadow-brand1-2: #1352de4d; /* Blue-3 @30% */ --color-drop-shadow-brand1-3: #1352decc; /* Blue-3 @80% */ --color-drop-shadow-brand2-1: #0018711a; /* Blue-4 @10% */ --color-drop-shadow-brand2-2: #0018714d; /* Blue-4 @30% */ --color-drop-shadow-brand2-3: #001871cc; /* Blue-4 @80% */ /** TEXT SHADOW COLORS **************************************************/ --color-text-shadow-black-1: #0000004d; /* Black @30% */ --color-text-shadow-black-2: #000000cc; /* Black @80% */ --color-text-shadow-white-1: #ffffffcc; /* White @80% */ --color-text-shadow-brand1-1: #1352de4d; /* Blue-3 @30% */ --color-text-shadow-brand1-2: #1352de80; /* Blue-3 @50% */ --color-text-shadow-brand2-1: #0018714d; /* Blue-4 @30% */ --color-text-shadow-brand2-2: #001871cc; /* Blue-4 @80% */ /** TEXT GRADIENT COLORS **************************************************/ --gradient-direction: to bottom; --color-gradient-black-1: linear-gradient( to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100% ); /* 80% Black to Transparent, L to R */ --color-gradient-black-2: linear-gradient( to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100% ); /* 40% Black to Transparent, L to R */ --color-gradient-black-3: linear-gradient( to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100% ); /* 80% Black to Transparent, T to B */ --color-gradient-black-4: linear-gradient( to bottom, rgba(20, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100% ); /* 40% Black to Transparent, T to B */ --color-gradient-white-1: linear-gradient( to right, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100% ); /* 80% White to Transparent, L to R */ --color-gradient-white-2: linear-gradient( to right, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100% ); /* 40% White to Transparent, L to R */ --color-gradient-white-3: linear-gradient( to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100% ); /* 80% White to Transparent, T to B */ --color-gradient-white-4: linear-gradient( to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100% ); /* 40% White to Transparent, T to B */ --color-gradient-brand-1: linear-gradient( var(--gradient-direction), #003d6e 0%, #0076be 100% ); /* Deep Sky */ --color-gradient-brand-2: linear-gradient( var(--gradient-direction), #66cbe1 0%, #64c5b9 100% ); /* Tropics */ --color-gradient-brand-3: linear-gradient( var(--gradient-direction), #f15f40 0%, #ffc709 100% ); /* Golden Hour */ --color-gradient-brand-4: linear-gradient( var(--gradient-direction), #003d6e 0%, #db5989 100% ); /* Dusk */ --color-gradient-brand-5: linear-gradient( var(--gradient-direction), #005f62 0%, #a5d069 100% ); /* Woodland */ --color-gradient-brand-6: linear-gradient( to right, rgba(99, 219, 244, 0.4) 0%, rgba(250, 251, 255, 0) 100% ); /* 40% Blue-1 to Transparent, L to R */ --color-gradient-brand-7: linear-gradient( to bottom, rgba(99, 219, 244, 1) 0%, rgba(250, 251, 255, 0) 100% ); /* 100% Blue-1 to Transparent, T to B */ --color-gradient-brand-8: linear-gradient( to bottom, rgba(99, 219, 244, 0.4) 0%, rgba(250, 251, 255, 0) 100% ); /* 40% Blue-1 to Transparent, T to B */ /** CSS filter COLORS **************************************************/ --color-filter-cyan-4: brightness(0) saturate(100%) invert(45%) sepia(26%) saturate(6384%) hue-rotate(169deg) brightness(103%) contrast(101%); /** Cyan **/ --color-filter-blue-1: brightness(0) saturate(100%) invert(83%) sepia(20%) saturate(299%) hue-rotate(177deg) brightness(102%) contrast(91%); /** Pale Blue **/ --color-filter-blue-2: brightness(0) saturate(100%) invert(71%) sepia(15%) saturate(916%) hue-rotate(186deg) brightness(102%) contrast(90%); /** Pale Cobalt (Custom 60%) **/ --color-filter-blue-3: brightness(0) saturate(100%) invert(40%) sepia(93%) saturate(5637%) hue-rotate(218deg) brightness(85%) contrast(104%); /** Cobalt **/ --color-filter-blue-4: brightness(0) saturate(100%) invert(10%) sepia(62%) saturate(4768%) hue-rotate(225deg) brightness(85%) contrast(113%); /** Core **/ --color-filter-blue-5: brightness(0) saturate(100%) invert(9%) sepia(82%) saturate(2658%) hue-rotate(219deg) brightness(84%) contrast(114%); /** Dark Blue (Custom 30%) **/ --color-filter-red-4: brightness(0) saturate(100%) invert(28%) sepia(88%) saturate(7445%) hue-rotate(340deg) brightness(95%) contrast(91%); /** Red **/ --color-filter-yellow-4: brightness(0) saturate(100%) invert(96%) sepia(10%) saturate(6184%) hue-rotate(324deg) brightness(101%) contrast(101%); /** Yellow **/ --color-filter-orange-4: brightness(0) saturate(100%) invert(60%) sepia(57%) saturate(3934%) hue-rotate(359deg) brightness(101%) contrast(105%); /** Orange **/ --color-filter-green-4: brightness(0) saturate(100%) invert(59%) sepia(26%) saturate(6862%) hue-rotate(119deg) brightness(95%) contrast(101%); /** Green **/ --color-filter-purple-4: brightness(0) saturate(100%) invert(68%) sepia(84%) saturate(6813%) hue-rotate(248deg) brightness(90%) contrast(87%); /** Purple **/ --color-filter-teal-4: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(585%) hue-rotate(133deg) brightness(98%) contrast(101%); /** Teal **/ --color-filter-gray-7: brightness(0) saturate(100%) invert(19%) sepia(12%) saturate(709%) hue-rotate(188deg) brightness(96%) contrast(89%); /** Dark Gray**/ --color-filter-white-1: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(342deg) brightness(109%) contrast(108%); /** pure white **/ --color-filter-black-5: brightness(0) saturate(100%) invert(0%) sepia(89%) saturate(45%) hue-rotate(126deg) brightness(90%) contrast(100%); /** pure black **/ /** Progress Navigation Step Size **************************************************/ --step-size: 36px; } /** Travelex White Label Partner Themes **********************************************/ /* Theme overrides live in tokens layer so components can reference them */ [style-theme="mvw"] { --theme-primary-color: #14295d; --theme-secondary-color: #7ca3dc; --theme-text-color: black; } [style-theme="costco"] { --theme-primary-color: #003054; --theme-secondary-color: #3572a1; --theme-text-color: white; } [style-theme="worldmark"] { --theme-primary-color: #01426a; --theme-secondary-color: #0072cf; --theme-text-color: white; } [style-theme="clubwyndham"] { --theme-primary-color: #06038d; --theme-secondary-color: #0072cf; --theme-text-color: white; } [style-theme="rci"] { --theme-primary-color: #d5ede6; --theme-secondary-color: #ffcc45; --theme-text-color: black; .help-message-svg .info-icon-question-circle, .help-message-svg .info-icon-i-circle { fill: black; } .help-message-svg .info-icon-outer-circle { fill: black; } .btn-dynamic-theme button, .btn-dynamic-theme > a { border: 1px solid black; } } [style-theme="airnz"] { --theme-primary-color: #262429; --theme-secondary-color: #398190; --theme-text-color: white; } [style-theme="travelkore"] { --theme-primary-color: #ff671b; --theme-secondary-color: #14295d; --theme-text-color: white; } /** VARIABLE FONTS **********************************************/ /* @font-face must live outside layers to be available globally */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; src: url(/content/dam/config/branding-stylesheets/travelex/fonts/Inter-VariableFont_opsz,wght.ttf) format("truetype-variations"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; src: url(/content/dam/config/branding-stylesheets/travelex/fonts/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype-variations"); } /** BASE STYLES **********************************************/ html { font-size: var(--font-size-base); font-family: var(--font-family-1); color: var(--color-gray-6); line-height: 1.4; font-weight: var(--font-weight-2); letter-spacing: normal; height: 100%; /* full site height fix */ scroll-behavior: smooth; } body { font-size: inherit; font-family: inherit; color: var(--color-gray-7); line-height: 1.4; font-weight: var(--font-weight-2); letter-spacing: normal; height: 100%; } /** **********************************************/ h1, h2, h3, h4, h5, h6 { color: var(--color-black-5); font-weight: var(--font-weight-2); margin: 0 0 var(--size-4) 0; padding: 0; line-height: 1.3; } h1 { font-size: var(--font-size-8); line-height: 1.25; text-align: center; } h2 { font-size: var(--font-size-7); line-height: 1.25; } @media screen and (min-width: 576px) { h1 { font-size: var(--font-size-9); } h2 { font-size: var(--font-size-8); } } h3 { font-size: var(--font-size-7); line-height: 1.25; } h4 { font-size: var(--font-size-6); } h5 { font-size: var(--font-size-5); } h6 { font-size: var(--font-size-3); } /** **********************************************/ sup, sub { font-size: 0.7em; } h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup, h1 sub, h2 sub, h3 sub, h4 sub, h5 sub, h6 sub { font-size: 0.55em; } /** **********************************************/ a { color: var(--color-blue-7); text-decoration: underline; word-break: break-word; } a:hover { color: var(--color-blue-3); text-decoration: none; } a:focus, button:focus { color: var(--color-blue-3); text-decoration: none; outline: 2px solid var(--color-purple-4); outline-offset: 2px; border-radius: var(--radius-size-1); } button { cursor: pointer; font-family: inherit /* fixes odd bug w being overwritten by browser agentstylesheet */; } a, button { transition: background-color 0.3s ease-in; } /* ============================================================ Base Button Styles Shared base — all variants inherit these via :is() selector. Each variant then only declares what makes it unique. ============================================================ */ :is( .btn-primary, .btn-secondary, .btn-tertiary, .btn-primary-inverse, .btn-secondary-inverse, .btn-tertiary-inverse, .btn-disabled, .btn-dynamic-theme ) :is(button, a) { display: inline-block; text-decoration: none; font-size: var(--font-size-3); font-weight: var(--font-weight-3); padding: var(--button-padding); border-radius: var(--radius-size-3); border: none; cursor: pointer; } /* Normal Variants ------------------------------------------ */ .btn-primary :is(button, a) { background-color: var(--color-brand-primary); color: var(--color-white-1); &:hover { background-color: var(--color-brand-secondary); } } .btn-secondary :is(button, a) { background-color: var(--color-teal-3); color: var(--color-blue-4); &:hover { background-color: var(--color-cyan-2); } } .btn-tertiary :is(button, a) { background-color: var(--color-white-1); color: var(--color-brand-primary); border: 1px solid var(--color-brand-primary); &:hover { color: var(--color-brand-secondary); border-color: var(--color-brand-secondary); } } /* Inverse Variants ----------------------------------------- */ .btn-primary-inverse :is(button, a) { background-color: var(--color-white-1); color: var(--color-brand-primary); &:hover { background-color: var(--color-blue-2); } } .btn-secondary-inverse :is(button, a) { background-color: var(--color-teal-3); color: var(--color-blue-4); &:hover { background-color: var(--color-teal-1); } } .btn-tertiary-inverse :is(button, a) { background-color: var(--color-transparent); color: var(--color-white-1); border: 1px solid var(--color-white-1); &:hover { color: var(--color-blue-2); border-color: var(--color-blue-2); } } /* Special Variants ----------------------------------------- */ .btn-disabled :is(button, a) { background-color: var(--color-gray-1); color: var(--color-gray-4); &:hover { cursor: not-allowed; } } .btn-dynamic-theme :is(button, a) { background-color: var(--theme-secondary-color); color: var(--theme-text-color); &:hover { background-color: color-mix( in oklab, var(--theme-secondary-color), black 7% ); } } /** **********************************************/ /** note: use custom px for left/right declarations to keep list-item bullets consistent and not impacted by variable changes **/ p { padding: 0 0 var(--size-2) 0; margin: 0; } ul, ol { margin: 0; padding: 0; } ol { padding: 0 0 0 40px; } ul { list-style: none; line-height: 1.33; position: relative; /* bullet alignment */ } ol > li { padding: 0 0 var(--size-2) 9px; list-style: decimal; /* iOS fix */ } ol > li ol > li { list-style: lower-alpha; } ul > li { padding: 0 0 var(--size-2) 50px; } ul > li:before { content: "\2022"; /* default circle icon */ color: var(--color-black-5); font-size: 18px; font-weight: 1000; display: inline-block; line-height: 1; position: absolute; left: 0; width: 50px; /*set to get hinge bible 50px width*/ text-align: center; padding-left: 13px; /*push to right to get hinge bible 15px right gutter space*/ } hr { margin: var(--size-3) 0; border: 0; border-top: 1px solid var(--color-gray-1); } /** **********************************************/ blockquote { padding: var(--size-1) var(--size-2) var(--size-1) var(--size-5); margin: 0 0 var(--size-3); font-size: var(--font-size-8); border-left: var(--border-size-3) solid var(--color-blue-1); font-style: italic; font-weight: var(--font-weight-1); color: var(--color-blue-4); } byline { padding: var(--size-2) 0 0 0; margin: 0; font-size: var(--font-size-2); font-style: normal; font-weight: var(--font-weight-4); } /** **********************************************/ .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget { font-family: inherit; } input, select, textarea { padding: var(--size-1); margin: 0; font-family: inherit; /* fixes odd bug w being overwritten by browser agentstylesheet */ font-size: var(--font-size-4); background-color: var(--color-white-1); border: 1px solid #a7a7a7; color: var(--color-gray-7); line-height: 1.6; border-radius: 3px; width: 100%; } textarea { min-height: 200px; } select { appearance: none; background: #fff url(/content/dam/config/branding-stylesheets/master/icons/down-angle.svg) no-repeat; background-size: 15px; background-position: calc(100% - 20px) center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 37px; cursor: pointer; } input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], input[type="file"], input[type="image"] { width: auto; } input::placeholder, select::placeholder, textarea::placeholder, select:invalid { color: color-mix(in srgb, var(--color-gray-4), black 20%); /* 20% darker */ } /* Firefox opacity fix no longer needed — ::placeholder opacity defaults to 1 in all modern browsers */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { /* hide up/down arrows in type=number inputs */ appearance: none; margin: 0; } input[readonly], input[disabled] { color: var(--color-gray-7); } select[readonly], select[disabled] { color: var(--color-black-5); } .inputField { width: stretch; position: absolute; border: 0; } .inputField:focus { border: 0; } input[type="number"] { appearance: textfield; } /* hide up/down arrows in type=number inputs */ select:focus option { background: #fff; color: var(--color-gray-7); } input:focus, select:focus, textarea:focus { border: 1px solid var(--color-blue-3); background-color: var(--color-white-1); color: var(--color-gray-7); } label, .Tokenize .cmp-tokenize-frame label { font-weight: var(--font-weight-2); font-size: var(--font-size-2); line-height: 1.6; margin: 0; color: var(--color-gray-7); display: inline-block; cursor: pointer; margin-bottom: 5px; } label p, legend p { padding-bottom: 0; } legend { width: 100%; } /*fix for display:block not default, float:right of content inside can't go far right otherwise */ /** TOKENIZE COMPONENT *****/ /** **********************************************/ /* customize tokenization component and base.less on per-brand basis */ .Tokenize .fldErr .iframe-element { outline: 1px solid var(--color-red-4); outline-offset: -1px; max-height: 51px; background-color: var(--color-red-1); } .Tokenize .iframe-element, .Tokenize .fldErr .iframe-element { /* customize iframe height of tokenization component on per-brand basis */ max-height: 48px; border-radius: var(--radius-size-1); } .Tokenize .iframe-element iframe { /* customize iframe height of tokenization component on per-brand basis */ max-height: 51px; } .fldErr .customErr, .Tokenize .cmp-tokenize-frame .tokenErr, .fldErr .not_valid, .customErr { padding: 5px 7px; font-size: var(--font-size-2); color: var(--color-error-5); margin-top: 10px; align-items: center; background: var(--color-error-1); border-radius: var(--radius-size-1); gap: var(--size-1); display: grid; grid-template-columns: 1fr; } .fldErr .customErr:before, .fldErr .not_valid:before, .customErr:before { width: 1.5rem; height: 1.5rem; background-size: contain; margin: 0; display: none !important; /* Hide the error icon for Travelex WLS */ } .cmp-tokenize-frame .tokenErr:before { /* tokenize error msg */ content: ""; width: 22px; height: 22px; margin-right: 5px; display: inline-block; background: transparent url("/content/dam/config/branding-stylesheets/master/icons/error-icon.svg") no-repeat; background-position: left 0 top; background-size: 22px; } .Tokenize .cmp-tokenize-frame .tokenErr p { margin: 0; padding: 0; } /** ****************************/ input[type="checkbox"] { margin: 0 10px 0 0; appearance: none; background-color: var(--color-white-1); border: 1px solid var(--color-gray-6); padding: 9px; border-radius: var(--radius-size-1); display: inline-block; position: relative; vertical-align: middle; cursor: pointer; } input[type="checkbox"]:checked { background-color: var(--color-blue-3); border: 1px solid var(--color-blue-3); color: var(--color-white-1); } input[type="checkbox"]:checked:after { content: "\2714\fe0e"; /* iOS does color properly '\2714' */ font-size: 14px; position: absolute; top: -2px; left: 3px; color: var(--color-white-1); } input[type="checkbox"]:focus { outline: 1px solid var(--color-blue-3); outline-offset: 2px; } .inputIsDisabled input[type="checkbox"]:checked { background: var(--color-gray-5); border-color: var(--color-gray-6); } .inputIsDisabled input[type="checkbox"]:checked:after { color: var(--color-white-1); } /** ****************************/ input[type="radio"] { margin: 0 10px 0 0; appearance: none; background-color: var(--color-white-1); border: 1px solid var(--color-gray-6); padding: 9px; border-radius: 10px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; } input[type="radio"]:checked { background-color: var(--color-blue-3); border: 1px solid var(--color-blue-3); color: var(--color-white-1); } input[type="radio"]:checked:after { content: " "; font-size: 14px; position: absolute; top: 0; left: 0; border: 2px solid #fff; border-radius: 10px; height: 100%; width: 100%; } input[type="radio"]:focus { outline: 1px solid var(--color-blue-3); outline-offset: 2px; } .inputIsDisabled input[type="radio"]:checked { background: var(--color-gray-5); border-color: var(--color-gray-6); } .inputIsDisabled input[type="radio"]:checked:after { color: var(--color-white-1); } /** ****************************/ .inputIsDisabled label { cursor: not-allowed; } input[readonly], input[disabled], select[readonly], select[disabled], input[readonly]:focus, input[disabled]:focus, select[readonly]:focus, select[disabled]:focus, input[readonly].datePickerIcon, input[disabled].datePickerIcon { background-color: var(--color-gray-1); border-color: var(--color-gray-6); color: var(--color-gray-6); cursor: not-allowed !important; } /** ****************************/ .cmp-form-options.cmp-form-options--checkbox > legend, .cmp-form-options.cmp-form-options--radio > legend { font-weight: var(--font-weight-4); font-size: var(--font-size-4); line-height: 1.6; margin: 0; padding: 0 0 calc(var(--size-1) - 6px) 0; color: var(--color-gray-7); } .cmp-form-options.cmp-form-options--checkbox > label, .cmp-form-options.cmp-form-options--radio > label { padding-left: 36px; /* left alignment offset*/ font-weight: var(--font-weight-2); line-height: 1; margin: 0 var(--size-6) 0 0; } .cmp-form-options.cmp-form-options--checkbox > label > input, .cmp-form-options.cmp-form-options--radio > label > input { margin-left: -36px; /* left alignment offset correction */ float: left; /* fix for random

in RTE of radio/checkboxes */ } /** **********************************************/ .text .cmp-form-text .rte-wrap { display: inline-block; } /** **********************************************/ img { max-width: 100%; margin-bottom: -4px; } svg { max-width: 100%; } /** TEXT COMPONENT > RTE **********************************************/ .font-orange, .font-orange a { color: var(--color-orange-5); } .font-purple, .font-purple a { color: var(--color-purple-4); } .font-red, .font-red a { color: var(--color-red-4); } .font-green, .font-green a { color: var(--color-green-5); } .font-blue-medium, .font-blue-medium a { color: var(--color-blue-3); } .font-blue-dark, .font-blue-dark a { color: var(--color-blue-4); } .font-blue-darker, .font-blue-darker a { color: var(--color-blue-5); } .font-white, .font-white a { color: var(--color-white-1); } .font-white a:focus { outline-color: var(--color-white-1); } .font-gray-light, .font-gray-light a { color: var(--color-gray-5); } .font-gray-medium, .font-gray-medium a { color: var(--color-gray-6); } .font-gray-dark, .font-gray-dark a { color: var(--color-gray-7); } .font-blue-cyan-dark, .font-blue-cyan-dark a { color: var(--color-cyan-5); } .font-size-x-small, .font-size-x-small a { font-size: var(--font-size-2); } .font-size-small, .font-size-small a { font-size: var(--font-size-3); } .font-size-normal, .font-size-normal a { font-size: var(--font-size-4); } .font-size-large, .font-size-large a { font-size: var(--font-size-6); } .font-size-x-large, .font-size-x-large a { font-size: var(--font-size-7); } .font-size-xx-large, .font-size-xx-large a { font-size: var(--font-size-8); } .font-size-xxx-large, .font-size-xxx-large a { font-size: var(--font-size-9); } .font-weight-narrow { font-weight: var(--font-weight-1); } .font-weight-regular { font-weight: var(--font-weight-2); } .font-weight-semi-bold { font-weight: var(--font-weight-3); } .font-weight-bold { font-weight: var(--font-weight-4); } .font-float-right { float: right; } .font-float-left { float: left; } .icon-dismiss:before { border: 1px solid var(--color-red-4); color: var(--color-red-4); font-weight: var(--font-weight-3); font-size: var(--font-size-2); } .icon-dismiss:hover:before { background: var(--color-red-4); border-color: var(--color-red-4); } /** *ACCORDION STYLES - Travelex WLS FAQ Section on Homepage *********************************************/ #faq-section.cmp-accordion .cmp-accordion__button { font-size: var(--font-size-4); color: var(--theme-text-color); font-weight: var(--font-weight-2); padding: var(--size-2); border-bottom: 1px solid var(--color-blue-1); background-color: var(--theme-secondary-color); border-radius: 5px; display: flex; align-items: center; } #faq-section .cmp-accordion__item { padding: 0; margin-bottom: 10px; border: none; } #faq-section .cmp-accordion__button::before { content: ""; flex-shrink: 0; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background-image: url(/content/dam/config/branding-stylesheets/travelex/icons/add.svg); background-size: cover; background-repeat: no-repeat; transform: rotate(0deg); transition: transform 0.3s; position: relative; top: inherit; right: inherit; } #faq-section .cmp-accordion__button.cmp-accordion__button--expanded::before { content: ""; background-image: url(/content/dam/config/branding-stylesheets/travelex/icons/sub.svg); transform: rotate(180deg); } .cmp-accordion .cmp-accordion__panel { display: grid !important; grid-template-rows: 0fr; padding-top: 0px; transition: all 0.35s ease; } .cmp-accordion .cmp-accordion__panel--expanded { grid-template-rows: 1fr; padding-top: 30px; } .cmp-accordion .cmp-accordion__panel > * { overflow: hidden; } /** *CUSTOM ACCORDION STYLES (old styles? managed services) *********************************************/ .cmp-customAccordion-panel .cmp-customAccordion-button { background-color: var(--color-white-1); color: var(--color-black-1); font-weight: var(--font-weight-3); cursor: pointer; padding: var(--size-2) var(--size-3) var(--size-2) var(--size-3); width: 100%; text-align: left; border: 0; outline: 0; transition: 0.4s; /*margin-top:var(--size-1);*/ border-bottom: 1px solid var(--color-blue-1); } .cmp-customAccordion-panel .cmp-customAccordion-item { padding: var(--size-3); background-color: var(--color-white-1); overflow: hidden; margin-top: 2px; } .cmp-customAccordion-panel .cmp-customAccordion-button .circle { border-radius: var(--radius-size-5); display: inline-block; margin-right: var(--size-2); width: 34px; height: 34px; padding: 2px; background-color: var(--color-white-1); border: var(--border-size-2) solid var(--color-blue-4); color: var(--color-black-1); text-align: center; font-family: var(--font-family-3); font-size: var(--font-size-4); font-weight: var(--font-weight-3); } .cmp-customAccordion-panel .cmp-customAccordion-button .checkmark { display: none; border-radius: var(--radius-size-5); margin-right: var(--size-2); width: 34px; height: 34px; padding: var(--absolute-position-size-6); background-color: var(--color-blue-4); color: var(--color-white-1); text-align: center; font-family: var(--font-family-3); font-size: var(--font-size-4); } .cmp-customAccordion-panel { border: 1px solid; border-color: var(--color-blue-1); margin-top: var(--size-1); border-radius: 5px; } .cmp-customAccordion-panel .cmp-customAccordion-button label { font-weight: var(--font-weight-3); font-size: var(--font-size-6); color: var(--color-blue-4); } /** *UTILITY NAV COMPONENT FIXES *********************************************/ div.utilityprimarynav.site-width-large .utilitybar, div.utilityprimarynav.site-width-large .logo-Nav .row, div.utilityprimarynav.site-width-large .primary_navigation { max-width: var(--site-width-size-5) !important; margin: 0 auto; padding: 0 var(--site-width-gutter); width: 100%; /* flex breaks this otherwise */ } /* Hamburger Menu */ div.logo-Nav div.menu_right button#nav-collapse-button { padding: 6px 10px; border: 0 !important; outline-color: var(--color-blue-3); } .logo-Nav .icon-bar { background-color: var(--color-blue-3) !important; } div.logo-Nav div.menu_right button#nav-collapse-button:focus { background-color: var(--color-blue-3); } div.logo-Nav div.menu_right button#nav-collapse-button:focus .icon-bar { background-color: #fff !important; } .navbar-toggle { margin: 8px 0; } /* Utility Nav */ .utility_nav { padding-bottom: 4px; font-size: var(--font-size-1); } ul.leftnav-list li a, ul.rightnav-list li a { padding: 2px 3px 3px 3px; } div.utilityprimarynav .utilitybar .rightnav-list, div.utilityprimarynav .utilitybar .leftnav-list { overflow: initial; } /* fix outline cutoff */ .utility_nav img { vertical-align: middle; } .utilityprimarynav.utility-width-50 .utilitybar .left_Navbar { width: auto; flex-grow: 0; } /* make sure right column grows */ .utilityprimarynav.utility-width-50 .utilitybar .right_Navbar { width: auto; flex-grow: 1; } .utilityprimarynav.utility-width-50 .utilitybar a:focus { outline-color: var(--color-blue-3); } .navbar_logo-Nav .logo_left a:focus { outline: 2px solid var(--color-purple-4); } /* give tg logo purple outline on focus */ /* Primary Nav */ @media (min-width: 767px) { ul.nav.navbar-nav { display: flex; flex-wrap: wrap; justify-content: center; } /* center nav on 767-1184 */ .dropdown.primaryNavLinks { background: transparent !important; border-bottom: 0 !important; text-align: center !important; } } @media (min-width: 1184px) { ul.nav.navbar-nav { justify-content: normal; } } /* left align nav on 1184+ */ .dropdown.primaryNavLinks > a:focus { background-color: var(--color-blue-3) !important; outline-color: transparent !important; color: #fff !important; border-radius: 0; text-decoration-color: #fff !important; } .dropdown.primaryNavLinks .dropdown-menu > li > a:focus { background: var(--color-blue-4) !important; } /* Secondary Nav */ .dropdown-menu li { border: none !important; } .primary_navigation .dropdown.primaryNavLinks > a:hover, .primary_navigation .dropdown.primaryNavLinks > a:focus, .primary_navigation .dropdown.primaryNavLinks.open > a { background-color: var(--color-blue-4) !important; color: #fff !important; border-radius: 0; } .dropdown.primaryNavLinks ul.dropdown-menu li { border-bottom: 1px solid #fff !important; } .dropdown.primaryNavLinks ul.dropdown-menu li:last-of-type { border-bottom: none !important; } .dropdown.primaryNavLinks ul.dropdown-menu li > a:focus { outline-color: transparent !important; border-radius: 0; } /* ************************************************** */ /* Multi Select Dropdown Componenet */ .drop { position: relative; user-select: none; &:has(+ .customErr) { border: 1px solid var(--color-error-4); } } .drop.open { z-index: 100; border: 1px solid var(--color-blue-3); } .drop.open .inputField { border: 0; } .drop.open .drop-screen { z-index: 100; display: block; } .drop.open .drop-options { border: 1px solid var(--color-gray-4); z-index: 200; max-height: 200px; border-radius: 0 0 var(--radius-size-1) var(--radius-size-1); box-shadow: 0 0 6px #d8d8d8; } .drop.open .drop-display { z-index: 200; } .drop select { display: none; } .drop .drop-screen { position: fixed; width: 100%; height: 100%; background: var(--color-black-1); top: 0; left: 0; opacity: 0; display: none; z-index: 1; } .drop { border: 1px solid var(--color-gray-6); color: var(--color-gray-7); line-height: 1.6; border-radius: var(--radius-size-1); } .drop .drop-display { position: relative; padding: 0 20px 5px 5px; width: 100%; background: var(--color-white-1); z-index: 1; margin: 0; font-size: var(--font-size-3); min-height: 46px; display: flex; overflow: hidden; border-radius: var(--radius-size-1); } .drop .drop-display:hover:after { opacity: 0.75; } .drop .drop-display:after { position: absolute; right: var(--size-4); top: var(--size-4); font-size: var(--font-size-6); color: var(--color-black-1); } .drop .drop-display .item { position: relative; display: inline-block; border: 1px solid var(--color-blue-3); margin: 5px 5px -5px 0; background-color: var(--color-blue-1); padding: 0 var(--size-4) 0 var(--size-1); overflow: hidden; height: 34px; line-height: 32px; border-radius: var(--radius-size-1); } .drop .drop-display .item .btnclose { color: var(--color-black-1); position: absolute; font-size: var(--font-size-1); right: 9px; top: 0; cursor: pointer; font-style: normal; font-weight: var(--font-weight-4); } .drop .drop-display .item .btnclose:hover { opacity: 0.75; } .drop .drop-display .item.remove { animation: removeSelected 0.2s, hide 1s infinite; animation-delay: 0, 0.2s; display: none; } .drop .drop-display .item.add { animation: addSelected 0.2s; } .drop .drop-display .item.hide { display: none; } .drop .drop-options { background: var(--color-white-1); position: absolute; width: 100%; max-height: 0; overflow-y: auto; transition: all 0.25s linear; z-index: 1; } .drop .drop-options a { display: block; line-height: 40px; padding: 0 var(--size-3); color: #000; position: relative; max-height: 50px; transition: all 1s; overflow: hidden; text-decoration: none; border-bottom: 1px solid var(--color-gray-3); } .drop .drop-options a:hover { background: var(--color-gray-1); cursor: pointer; } .drop .drop-options a:focus { outline-offset: 0; border: 2px solid; outline: 0; } .drop .drop-options a.remove { animation: removeOption 0.2s; max-height: 0; display: none; } .drop .drop-options a.add { animation: addOption 0.2s; } .drop .drop-options a.hide { display: none; } #opt:focus { border: 2px solid deepskyblue; background-color: lightblue; } #optadd:focus { border: 2px solid deepskyblue; background-color: lightblue; } @keyframes pop { from { transform: scale(0); } to { transform: scale(1); } } @keyframes removeOption { from { max-height: 40px; } to { max-height: 0; } } @keyframes addOption { from { max-height: 0; } to { max-height: 40px; } } @keyframes removeSelected { from { transform: scale(1); } to { transform: scale(0); } } @keyframes addSelected { from { transform: scale(0); } to { transform: scale(1); } } @keyframes hide { from, to { max-height: 0; max-width: 0; padding: 0; margin: 0; border-width: 0; } } /** *TOOLTIP STYLES *********************************************/ a.cmp-form-options__help-message:before, a.cmp-form-text__help-block:before { line-height: 0.9; background: var(--theme-secondary-color); content: "\ea33"; } span.customTooltip { display: none; position: absolute; border: 1px solid #ccc; background: #fff; padding: 20px; border-radius: 8px; width: 300px; font-size: var(--font-size-2); font-weight: 400; z-index: 2; color: #343741; box-shadow: 2px 2px 5px 0 var(--color-drop-shadow-gray-2); left: 50%; top: 40px; transform: translateX(calc(-50%)); } @media screen and (max-width: 767px) { a.cmp-form-options__help-message, a.cmp-form-text__help-block { position: initial; } .cmp-form-options, .cmp-form-text, .product-display .cmp-text { position: relative; } span.customTooltip { left: 0; right: 0; top: 100%; transform: none; width: 100%; } } a.cmp-form-options__help-message, a.cmp-form-text__help-block { margin: 0 0 0 5px; } /* Tooltip Modal / Updated Tooltip Icon CSS */ .help-message-svg .info-icon-question-circle, .help-message-svg .info-icon-i-circle { fill: var(--theme-secondary-color); } .help-message-svg .info-icon-question-fill, .help-message-svg .info-icon-i-fill { fill: white; } .help-message-svg .info-icon-outer-circle { fill: var(--theme-secondary-color); } #custom-help-message-tooltip-modal .tooltip-header p { font-weight: var(--font-weight-3); padding: 0; } input.hasDatepicker { background: #fff url(/content/dam/config/branding-stylesheets/travelex/icons/calendar-WLS.svg) no-repeat; background-position: right 20px center; } .fldErr input.hasDatepicker { background: #fbe7eb url(/content/dam/config/branding-stylesheets/travelex/icons/calendar-WLS.svg) no-repeat; background-position: right 20px center; } .fldErr input, .fldErr select, .fldErr textarea, .fldErr input[type="checkbox"], .fldErr input[type="radio"] { background-color: white !important; } .cmp-form-text__help-block:before { width: 21px; line-height: 1; } /* Repeatable Add/Remove Buttons */ .cmp-repeatable-container-buttons { margin: var(--size-1) 0; } .container .cmp-container .cmp-repeatable-container-buttons .cmp-repeatable-container--removeButton:before { border-radius: 20px; content: "\EA45"; font-family: "Hinge Icons"; font-size: 1rem; background: var(--color-blue-4); color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; } .container .cmp-container .cmp-repeatable-container-buttons .cmp-repeatable-container--addButton:before { border-radius: 20px; content: "\EA24"; font-family: "Hinge Icons"; font-size: 1rem; background: var(--color-blue-4); color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; } .container .cmp-container .cmp-repeatable-container-buttons button { color: var(--color-blue-4); align-items: center; } /* API Error Message -------------------------------------------------- */ #api-error { display: block; padding: var(--size-3); border: 1px solid var(--color-error-4); border-radius: var(--radius-size-1); margin: var(--size-3) 0; background: var(--color-error-1); color: var(--color-error-4); } /* Tabs COMPONENT -------------------------------------------------- */ .cmp-tabs__tab { color: var(--color-blue-3); } .cmp-tabs__tab:hover { border-color: var(--color-blue-3); } .cmp-tabs__tab.cmp-tabs__tab--active { border-color: var(--color-blue-4); color: var(--color-blue-4); } /* Datepicker -------------------------------------------------- */ .ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon:before { color: var(--color-blue-3); } .ui-datepicker .ui-datepicker-header .ui-datepicker-title { color: var(--color-blue-4); } .ui-datepicker .ui-datepicker-calendar .ui-state-default { color: var(--color-blue-4); } .ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-hover { background-color: var(--color-blue-4); } .ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-active { background-color: var(--color-blue-3); } .ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-highlight { background-color: var(--color-blue-2); } .ui-datepicker .ui-datepicker-calendar thead span { color: var(--color-blue-3); } /* Progress Navigation -------------------------------------------------- */ #progressNav ol { display: flex; justify-content: space-between; padding: 0; margin: 0; list-style: none; counter-reset: step; } #progressNav li { flex: 1; text-align: center; position: relative; counter-increment: step; list-style: none; padding: 0; } #progressNav li a { text-decoration: none; } /* Step circles */ #progressNav li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 auto 0.5rem; border-radius: 50%; background: var(--color-gray-1); color: var(--color-gray-3); font-weight: bold; position: relative; z-index: 1; } /* Connecting line */ #progressNav li::after { content: ""; position: absolute; top: 1.25rem; left: 50%; width: 100%; height: 4px; background: var(--color-gray-1); } #progressNav li:last-child::after { display: none; } /* Current step */ @keyframes pulse-shadow { 0% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--theme-secondary-color), transparent 80%); } 50% { box-shadow: 0 0 0 8px color-mix(in oklch, var(--theme-secondary-color), transparent 100%); } 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--theme-secondary-color), transparent 80%); } } #progressNav li.current::before { background: var(--theme-secondary-color); color: #fff; animation: pulse-shadow 2s infinite; } /* Completed steps (auto via :has) */ #progressNav li:not(.current):has(~ .current)::before { background: var(--theme-secondary-color); color: #fff; content: "\ea54"; font-family: "Hinge Icons"; } #progressNav li:not(.current):has(~ .current)::after { background: var(--theme-secondary-color); } /* TSEP Payment Component -------------------------------------------------- */ .TSEP, .TSEP > iframe { width: 100%; } .TSEP-Frame { display: flex; gap: var(--gap-size); } .TSEP-Frame fieldset { flex-grow: 1; } .TSEP-Frame + .button { text-align: right; margin-top: var(--size-1); } #tsep-reload { color: var(--color-blue-7); } /* Hide remove button when add button is present for WLS prequote */ .cmp-repeatable-container-buttons:has(.cmp-repeatable-container--addButton) .cmp-repeatable-container--removeButton { display: none !important; }