@layer properties, theme, base, default; /* layer: properties */ @layer properties{ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-border-opacity:100%;--un-text-opacity:100%;--un-bg-opacity:100%;}} @property --un-text-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-border-opacity{syntax:"";inherits:false;initial-value:100%;} @property --un-bg-opacity{syntax:"";inherits:false;initial-value:100%;} } /* layer: theme */ @layer theme{ :root, :host { --fontWeight-black: 900; --spacing: 0.25rem; --fontWeight-bold: 700; --colors-nutrition-box-content: oklch(0.3211 0 0); --colors-error-DEFAULT: red; --colors-success-DEFAULT: green; --font-sans: "Helvetica Neue", "Helvetica", "Helvetica", "Arial", "sans-serif"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); --text-xl-fontSize: 1.25rem; --text-xl-lineHeight: 1.75rem; --text-lg-fontSize: 1.125rem; --text-lg-lineHeight: 1.75rem; --colors-primary-DEFAULT: oklch(0.37 0.0642 211.98); --colors-white: #fff; --text-3xl-fontSize: 1.875rem; --text-3xl-lineHeight: 2.25rem; --text-2xl-fontSize: 1.5rem; --text-2xl-lineHeight: 2rem; --text-5xl-fontSize: 3rem; --text-5xl-lineHeight: 1; } } /* layer: base */ @layer base{ *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); font-feature-settings: var(--default-font-featureSettings, normal); font-variation-settings: var(--default-font-variationSettings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); font-feature-settings: var(--default-monoFont-featureSettings, normal); font-variation-settings: var(--default-monoFont-variationSettings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden~='until-found'])) { display: none !important; } } /* layer: default */ @layer default{ .text-\[11px\]{font-size:11px;} .text-\[2rem\]{font-size:2rem;} .text-2xl{font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight));} .text-3xl{font-size:var(--text-3xl-fontSize);line-height:var(--un-leading, var(--text-3xl-lineHeight));} .text-5xl{font-size:var(--text-5xl-fontSize);line-height:var(--un-leading, var(--text-5xl-lineHeight));} .text-lg{font-size:var(--text-lg-fontSize);line-height:var(--un-leading, var(--text-lg-lineHeight));} .text-xl{font-size:var(--text-xl-fontSize);line-height:var(--un-leading, var(--text-xl-lineHeight));} .\*\:odd\:text-lg > *:nth-child(odd){font-size:var(--text-lg-fontSize);line-height:var(--un-leading, var(--text-lg-lineHeight));} .text-error{color:color-mix(in srgb, var(--colors-error-DEFAULT) var(--un-text-opacity), transparent);} .text-nutrition-box-content{color:color-mix(in srgb, var(--colors-nutrition-box-content) var(--un-text-opacity), transparent);} .text-primary{color:color-mix(in srgb, var(--colors-primary-DEFAULT) var(--un-text-opacity), transparent);} .text-success{color:color-mix(in srgb, var(--colors-success-DEFAULT) var(--un-text-opacity), transparent);} .text-white{color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent);} .font-\[Arial\]{font-family:Arial;} .font-\[Calibri\,Helvetica\]{font-family:Calibri,Helvetica;} .font-black{--un-font-weight:var(--fontWeight-black);font-weight:var(--fontWeight-black);} .font-bold{--un-font-weight:var(--fontWeight-bold);font-weight:var(--fontWeight-bold);} .\*\:odd\:font-bold > *:nth-child(odd){--un-font-weight:var(--fontWeight-bold);font-weight:var(--fontWeight-bold);} .mx-auto{margin-inline:auto;} .ms-6{margin-inline-start:calc(var(--spacing) * 6);} .mt-2{margin-top:calc(var(--spacing) * 2);} .p-2{padding:calc(var(--spacing) * 2);} .px-2{padding-inline:calc(var(--spacing) * 2);} .py-4{padding-block:calc(var(--spacing) * 4);} .text-center{text-align:center;} .text-right{text-align:right;} .\*\:odd\:text-right > *:nth-child(odd){text-align:right;} .border-1{border-width:1px;} .border-t-1{border-top-width:1px;} .border-t-10{border-top-width:10px;} .border-t-4{border-top-width:4px;} .border-nutrition-box-content{border-color:color-mix(in srgb, var(--colors-nutrition-box-content) var(--un-border-opacity), transparent);} .border-primary{border-color:color-mix(in srgb, var(--colors-primary-DEFAULT) var(--un-border-opacity), transparent);} .bg-\[--component\]{background-color:color-mix(in oklab, var(--component) var(--un-bg-opacity), transparent);} .bg-primary{background-color:color-mix(in srgb, var(--colors-primary-DEFAULT) var(--un-bg-opacity), transparent);} .hover\:bg-primary:hover{background-color:color-mix(in srgb, var(--colors-primary-DEFAULT) var(--un-bg-opacity), transparent);} .gap-1{gap:calc(var(--spacing) * 1);} .gap-x-2{column-gap:calc(var(--spacing) * 2);} .gap-y-1{row-gap:calc(var(--spacing) * 1);} .grid{display:grid;} .col-span-full{grid-column:1/-1;} .grid-flow-col{grid-auto-flow:column;} .grid-cols-\[1fr_2fr\]{grid-template-columns:1fr 2fr;} .grid-cols-\[3fr_7fr_2fr\]{grid-template-columns:3fr 7fr 2fr;} .grid-cols-\[5fr_7fr\]{grid-template-columns:5fr 7fr;} .grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr;} .grid-cols-\[auto_auto_1fr\]{grid-template-columns:auto auto 1fr;} .grid-cols-\[auto_auto\]{grid-template-columns:auto auto;} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} .max-h-\[100px\]{max-height:100px;} .max-h-\[80px\]{max-height:80px;} .max-w-full{max-width:100%;} .w-\[800px\]{width:800px;} .w-full{width:100%;} .block{display:block;} .hidden{display:none;} .invisible{visibility:hidden;} .cursor-pointer{cursor:pointer;} .items-start{align-items:flex-start;} .items-center{align-items:center;} .justify-start{justify-content:flex-start;} .justify-center{justify-content:center;} .justify-between{justify-content:space-between;} .justify-self-end{justify-self:end;} .order-1{order:1;} .order-2{order:2;} @media print{ .print\:invisible{visibility:hidden;} } @supports (color: color-mix(in lab, red, red)){ .text-error{color:color-mix(in oklab, var(--colors-error-DEFAULT) var(--un-text-opacity), transparent);} .text-nutrition-box-content{color:color-mix(in oklab, var(--colors-nutrition-box-content) var(--un-text-opacity), transparent);} .text-primary{color:color-mix(in oklab, var(--colors-primary-DEFAULT) var(--un-text-opacity), transparent);} .text-success{color:color-mix(in oklab, var(--colors-success-DEFAULT) var(--un-text-opacity), transparent);} .text-white{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent);} .border-nutrition-box-content{border-color:color-mix(in oklab, var(--colors-nutrition-box-content) var(--un-border-opacity), transparent);} .border-primary{border-color:color-mix(in oklab, var(--colors-primary-DEFAULT) var(--un-border-opacity), transparent);} .bg-primary{background-color:color-mix(in oklab, var(--colors-primary-DEFAULT) var(--un-bg-opacity), transparent);} .hover\:bg-primary:hover{background-color:color-mix(in oklab, var(--colors-primary-DEFAULT) var(--un-bg-opacity), transparent);} } @media (min-width: 48rem){ .md\:text-center{text-align:center;} .md\:col-span-1{grid-column:span 1/span 1;} .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} .md\:order-1{order:1;} .md\:order-2{order:2;} } } @layer theme{ :root{ --component: oklch(0.683 0 0); --colors-primary-DEFAULT: oklch(0.5752 0.0977 210.4); } } /* $jsass-void: null; $breakpoint-medium: 30em; $grid-columns: 12; $gutter-size: .5rem; $max-width: 800px; $font-size: 11px; $font-family: "Calibri", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; $background-color: #FFFFFF; $body-background-color: #FFFFFF; $text-color: #333333; $link-color: #08c; $header-1-line-height: 1.2; $header-2-line-height: 1.2; $header-3-line-height: 1.2; $header-4-line-height: 1.2; $body-padding:.5rem 1rem; $product-description-color: #0B8899; $section-header-background-color: $product-description-color; $section-header-text-color: #FFFFFF; $component-section-header-background-color: #999999; $icon-background-color: $body-background-color; $icon-text-color: $product-description-color; $nutrition-box-font-size: .8rem; $nutrition-box-margin: 0 0 .5rem; @import './common/normalize'; @import './common/base'; @import './common/layout'; @import './common/nutrition-panel'; @import './common/specsheet-image-gallery'; .product-description{ color: $product-description-color; } .icon{ cursor: pointer; color: $icon-text-color; padding: .2rem 0; font-size: 3rem; background-color: $icon-background-color; border: 1px solid $icon-text-color; a{ display: block; } &:hover{ color: $icon-background-color; background-color: $icon-text-color; } } .section-header { background-color: $section-header-background-color; color: $section-header-text-color; padding: .5rem 0px .5rem .5rem; margin-bottom: .1rem; } .components .component-name { margin-top: 2rem; background-color: $component-section-header-background-color; } .footer { margin-top: 1rem; border-top: 1px solid #555; } @media print { html{ font-size: 11px; } body{ padding-top: 2rem; } .section-header{ page-break-after: avoid; } .components{ page-break-before: always; } .component-name{ page-break-after: avoid; } #nutritional-info{ page-break-before: avoid; } .nutrition-box{ font-size: .75rem !important; } }*/