/* Theme: SplashSquad */ :root { /* -- Border Radius -------------------------------------------------------- */ --bdr-rds: 0.1875rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Border Radius', group: 'Calculations' } */ --bdr-tl-rds: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Border Radius - Top Left Corner', group: 'Calculations' } */ --bdr-tr-rds: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Border Radius - Top Right Corner', group: 'Calculations' } */ --bdr-br-rds: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Border Radius - Bottom Right Corner', group: 'Calculations' } */ --bdr-bl-rds: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Border Radius - Bottom Left Corner', group: 'Calculations' } */ /* -- Card Border Radius --------------------------------------------------- */ --bdr-rds-crd: 0.1875rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Card Border Radius', group: 'Calculations' } */ --bdr-tl-rds-crd: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Card Border Radius - Top Left Corner', group: 'Calculations' } */ --bdr-tr-rds-crd: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Card Border Radius - Top Right Corner', group: 'Calculations' } */ --bdr-br-rds-crd: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Right Corner', group: 'Calculations' } */ --bdr-bl-rds-crd: 1; /* { min: 0, max: 1, step: 0.25, friendly: 'Card Border Radius - Bottom Left Corner', group: 'Calculations' } */ /* -- Box Shadow ----------------------------------------------------------- */ --bx-sdw-x: 0em; /* { min: 0, max: 4, step: 0.1, friendly: 'Box Shadow \'X\' Position', group: 'Box Shadow' } */ --bx-sdw-y: 0.9375em; /* { min: 0, max: 4, step: 0.1, friendly: 'Box Shadow \'Y\' Position', group: 'Box Shadow' } */ --bx-sdw-blr: 1.375em; /* { min: 0, max: 4, step: 0.1, friendly: 'Box Shadow Blur', group: 'Box Shadow' } */ --bx-sdw-o: 0.3; /* { min: 0, max: 1, step: 0.05, friendly: 'Box Shadow Opacity', group: 'Box Shadow' } */ /* -- Desktop Box Shadow ------------------- mirrors General; no own token -- */ --bx-sdw-dsk-x: 0em; /* { min: 0, max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'X\' Position', group: 'Box Shadow' } */ --bx-sdw-dsk-y: 0.9375em; /* { min: 0, max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow \'Y\' Position', group: 'Box Shadow' } */ --bx-sdw-dsk-blr: 1.375em; /* { min: 0, max: 4, step: 0.1, friendly: 'Desktop Only Box Shadow Blur', group: 'Box Shadow' } */ --bx-sdw-dsk-o: 0.3; /* { min: 0, max: 1, step: 0.05, friendly: 'Desktop Only Box Shadow Opacity', group: 'Box Shadow' } */ /* -- Card Box Shadow ------------------------------------------------------ */ --bx-sdw-crd-x: 0em; /* { min: 0, max: 4, step: 0.1, friendly: 'Card Box Shadow \'X\' Position', group: 'Box Shadow' } */ --bx-sdw-crd-y: 0.25em; /* { min: 0, max: 4, step: 0.1, friendly: 'Card Box Shadow \'Y\' Position', group: 'Box Shadow' } */ --bx-sdw-crd-blr: 0.625em; /* { min: 0, max: 4, step: 0.1, friendly: 'Card Box Shadow Blur', group: 'Box Shadow' } */ --bx-sdw-crd-o: 0.3; /* { min: 0, max: 1, step: 0.05, friendly: 'Card Box Shadow Opacity', group: 'Box Shadow' } */ /* -- Button V1 Padding --------- from Figma Button Component: 24px / 32px - */ --btn-v1-pd-t: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Top' } */ --btn-v1-pd-b: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Bottom' } */ --btn-v1-pd-l: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Left' } */ --btn-v1-pd-r: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Right' } */ --btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l); /* { readonly: true } */ /* -- Button V1 Small Variant --- from Figma small button: 8px / 32px ------ */ --btn-v1-pd-v-mtp: 0.333; /* { min: 0.2, max: 0.8, step: 0.05, friendly: 'Button V1 Small Vertical Padding Multiplier' } */ --btn-v1-pd-h-mtp: 1; /* { min: 0.2, max: 1, step: 0.05, friendly: 'Button V1 Small Horizontal Padding Multiplier' } */ /* design keeps full 32px horizontal padding on small buttons */ /* -- Button V1 Border Radius ---------------------------------------------- */ --btn-v1-bdr-rds-tl: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Left' } */ --btn-v1-bdr-rds-tr: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Right' } */ --btn-v1-bdr-rds-br: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right' } */ --btn-v1-bdr-rds-bl: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Left' } */ --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); /* { readonly: true } */ /* -- Button V1 Box Shadow ------ from Figma: buttons carry no shadow ------- */ --btn-v1-bx-sdw-x: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'X\' Position' } */ --btn-v1-bx-sdw-y: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'Y\' Position' } */ --btn-v1-bx-sdw-blr: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V1 Box Shadow Blur' } */ --btn-v1-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */ /* -- Button V1 Border (Alt Variant) --- from Figma: 2px stroke on filled buttons in dark palettes -- */ --btn-v1-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V1 Border Width' } */ --btn-v1-bdr-stl: solid; /* { friendly: 'Button V1 Border Style' } */ /* -- Button V2 Padding --------- from Figma Button Component: 24px / 32px - */ --btn-v2-pd-t: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Top' } */ --btn-v2-pd-b: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Bottom' } */ --btn-v2-pd-l: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Left' } */ --btn-v2-pd-r: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 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: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Border Radius Top Left' } */ --btn-v2-bdr-rds-tr: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Border Radius Top Right' } */ --btn-v2-bdr-rds-br: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Border Radius Bottom Right' } */ --btn-v2-bdr-rds-bl: 0.1875rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 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 + Border --- from Figma: no shadow; outline buttons stroke 3px -- */ --btn-v2-bx-sdw-x: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'X\' Position' } */ --btn-v2-bx-sdw-y: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V2 Box Shadow \'Y\' Position' } */ --btn-v2-bx-sdw-blr: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V2 Box Shadow Blur' } */ --btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V2 Box Shadow Opacity' } */ --btn-v2-bdr-w: 3px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V2 Border Width' } */ --btn-v2-bdr-stl: solid; /* { friendly: 'Button V2 Border Style' } */ /* -- Button Transitions --- motion is not specified in the static design; adopted standard -- */ --btn-trn-sp: 0.3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Button Transition Speed' } */ --btn-trn-tf: ease; /* { friendly: 'Button Transition Timing Function' } */ /* -- Flair (Shapes & Decorative) --- widths match the brand wave artwork; margins per site flair.css -- */ --flr-bx-w: 395; /* { min: 100, max: 800, step: 1, friendly: 'Flair Width Desktop', group: 'Shapes & Decorative' } */ --flr-bx-w-mbl: 293; /* { min: 100, max: 600, step: 1, friendly: 'Flair Width Mobile', group: 'Shapes & Decorative' } */ --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))); /* { readonly: true } */ --flr-mrg-tp: 1.78rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Top', group: 'Shapes & Decorative' } */ --flr-mrg-bt: 1.78rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Flair Margin Bottom', group: 'Shapes & Decorative' } */ --shape-opacity: 0.1; /* { min: 0, max: 1, step: 0.05, friendly: 'Shape Opacity', group: 'Shapes & Decorative' } */ /* no decorative watermark shapes appear in the design; adopted default */ /* -- Containers & Cards Border --- from Figma: coupon bg box stroke 2px @ 0.4; cards 1px -- */ --bg-bx-bdr-thc: 2px; /* { min: 1, max: 20, step: 1, friendly: 'BG Box Border Width' } */ --bg-bx-bdr-clr-o: 0.3; /* { min: 0.1, max: 1, step: 0.1, friendly: 'BG Box Border Opacity' } */ --crd-bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Card Border Width', group: 'Containers & Cards Border' } */ /* -- Dividers & Separators --- from Figma: divider lines 2px @ 40% opacity -- */ --bdr-stl: solid; /* { friendly: 'Border Style', group: 'Borders' } */ --bdr-w: 2px; /* { min: 1, max: 4, step: 1, friendly: 'Border Width', group: 'Borders' } */ --bdr-clr-o: 0.3; /* { min: 0.05, max: 1, step: 0.05, friendly: 'Border Opacity', group: 'Borders' } */ }