/* framework/colors.css */ :root { /* Lightness */ --color-l-100: 98%; --color-l-200: 94%; --color-l-300: 88%; --color-l-400: 80%; --color-l-500: 70%; --color-l-600: 60%; --color-l-700: 45%; --color-l-800: 30%; --color-l-900: 15%; /* Colors */ --color-red-h: 0; --color-red-s: 80%; --color-red-hs: var(--color-red-h), var(--color-red-s); --color-red-boost: 3%; --color-red-l-100: calc(var(--color-l-100) + var(--color-red-boost)); --color-red-l-200: calc(var(--color-l-200) + var(--color-red-boost)); --color-red-l-300: calc(var(--color-l-300) + var(--color-red-boost)); --color-red-l-400: calc(var(--color-l-400) + var(--color-red-boost)); --color-red-l-500: calc(var(--color-l-500) + var(--color-red-boost)); --color-red-l-600: calc(var(--color-l-600) + var(--color-red-boost)); --color-red-l-700: calc(var(--color-l-700) + var(--color-red-boost)); --color-red-l-800: calc(var(--color-l-800) + var(--color-red-boost)); --color-red-l-900: calc(var(--color-l-900) + var(--color-red-boost)); --color-red-100: hsl(var(--color-red-hs), var(--color-red-l-100)); --color-red-200: hsl(var(--color-red-hs), var(--color-red-l-200)); --color-red-300: hsl(var(--color-red-hs), var(--color-red-l-300)); --color-red-400: hsl(var(--color-red-hs), var(--color-red-l-400)); --color-red-500: hsl(var(--color-red-hs), var(--color-red-l-500)); --color-red-600: hsl(var(--color-red-hs), var(--color-red-l-600)); --color-red-700: hsl(var(--color-red-hs), var(--color-red-l-700)); --color-red-800: hsl(var(--color-red-hs), var(--color-red-l-800)); --color-red-900: hsl(var(--color-red-hs), var(--color-red-l-900)); --color-orange-h: 28; --color-orange-s: 80%; --color-orange-hs: var(--color-orange-h), var(--color-orange-s); --color-orange-boost: 2.5%; --color-orange-l-100: calc(var(--color-l-100) + var(--color-orange-boost)); --color-orange-l-200: calc(var(--color-l-200) + var(--color-orange-boost)); --color-orange-l-300: calc(var(--color-l-300) + var(--color-orange-boost)); --color-orange-l-400: calc(var(--color-l-400) + var(--color-orange-boost)); --color-orange-l-500: calc(var(--color-l-500) + var(--color-orange-boost)); --color-orange-l-600: calc(var(--color-l-600) + var(--color-orange-boost)); --color-orange-l-700: calc(var(--color-l-700) + var(--color-orange-boost)); --color-orange-l-800: calc(var(--color-l-800) + var(--color-orange-boost)); --color-orange-l-900: calc(var(--color-l-900) + var(--color-orange-boost)); --color-orange-100: hsl(var(--color-orange-hs), var(--color-orange-l-100)); --color-orange-200: hsl(var(--color-orange-hs), var(--color-orange-l-200)); --color-orange-300: hsl(var(--color-orange-hs), var(--color-orange-l-300)); --color-orange-400: hsl(var(--color-orange-hs), var(--color-orange-l-400)); --color-orange-500: hsl(var(--color-orange-hs), var(--color-orange-l-500)); --color-orange-600: hsl(var(--color-orange-hs), var(--color-orange-l-600)); --color-orange-700: hsl(var(--color-orange-hs), var(--color-orange-l-700)); --color-orange-800: hsl(var(--color-orange-hs), var(--color-orange-l-800)); --color-orange-900: hsl(var(--color-orange-hs), var(--color-orange-l-900)); --color-yellow-h: 47; --color-yellow-s: 80%; --color-yellow-hs: var(--color-yellow-h), var(--color-yellow-s); --color-yellow-boost: 0%; --color-yellow-l-100: calc(var(--color-l-100) + var(--color-yellow-boost)); --color-yellow-l-200: calc(var(--color-l-200) + var(--color-yellow-boost)); --color-yellow-l-300: calc(var(--color-l-300) + var(--color-yellow-boost)); --color-yellow-l-400: calc(var(--color-l-400) + var(--color-yellow-boost)); --color-yellow-l-500: calc(var(--color-l-500) + var(--color-yellow-boost)); --color-yellow-l-600: calc(var(--color-l-600) + var(--color-yellow-boost)); --color-yellow-l-700: calc(var(--color-l-700) + var(--color-yellow-boost)); --color-yellow-l-800: calc(var(--color-l-800) + var(--color-yellow-boost)); --color-yellow-l-900: calc(var(--color-l-900) + var(--color-yellow-boost)); --color-yellow-100: hsl(var(--color-yellow-hs), var(--color-yellow-l-100)); --color-yellow-200: hsl(var(--color-yellow-hs), var(--color-yellow-l-200)); --color-yellow-300: hsl(var(--color-yellow-hs), var(--color-yellow-l-300)); --color-yellow-400: hsl(var(--color-yellow-hs), var(--color-yellow-l-400)); --color-yellow-500: hsl(var(--color-yellow-hs), var(--color-yellow-l-500)); --color-yellow-600: hsl(var(--color-yellow-hs), var(--color-yellow-l-600)); --color-yellow-700: hsl(var(--color-yellow-hs), var(--color-yellow-l-700)); --color-yellow-800: hsl(var(--color-yellow-hs), var(--color-yellow-l-800)); --color-yellow-900: hsl(var(--color-yellow-hs), var(--color-yellow-l-900)); --color-green-h: 80; --color-green-s: 60%; --color-green-hs: var(--color-green-h), var(--color-green-s); --color-green-boost: -2.5%; --color-green-l-100: calc(var(--color-l-100) + var(--color-green-boost)); --color-green-l-200: calc(var(--color-l-200) + var(--color-green-boost)); --color-green-l-300: calc(var(--color-l-300) + var(--color-green-boost)); --color-green-l-400: calc(var(--color-l-400) + var(--color-green-boost)); --color-green-l-500: calc(var(--color-l-500) + var(--color-green-boost)); --color-green-l-600: calc(var(--color-l-600) + var(--color-green-boost)); --color-green-l-700: calc(var(--color-l-700) + var(--color-green-boost)); --color-green-l-800: calc(var(--color-l-800) + var(--color-green-boost)); --color-green-l-900: calc(var(--color-l-900) + var(--color-green-boost)); --color-green-100: hsl(var(--color-green-hs), var(--color-green-l-100)); --color-green-200: hsl(var(--color-green-hs), var(--color-green-l-200)); --color-green-300: hsl(var(--color-green-hs), var(--color-green-l-300)); --color-green-400: hsl(var(--color-green-hs), var(--color-green-l-400)); --color-green-500: hsl(var(--color-green-hs), var(--color-green-l-500)); --color-green-600: hsl(var(--color-green-hs), var(--color-green-l-600)); --color-green-700: hsl(var(--color-green-hs), var(--color-green-l-700)); --color-green-800: hsl(var(--color-green-hs), var(--color-green-l-800)); --color-green-900: hsl(var(--color-green-hs), var(--color-green-l-900)); --color-aqua-h: 180; --color-aqua-s: 50%; --color-aqua-hs: var(--color-aqua-h), var(--color-aqua-s); --color-aqua-boost: 0%; --color-aqua-l-100: calc(var(--color-l-100) + var(--color-aqua-boost)); --color-aqua-l-200: calc(var(--color-l-200) + var(--color-aqua-boost)); --color-aqua-l-300: calc(var(--color-l-300) + var(--color-aqua-boost)); --color-aqua-l-400: calc(var(--color-l-400) + var(--color-aqua-boost)); --color-aqua-l-500: calc(var(--color-l-500) + var(--color-aqua-boost)); --color-aqua-l-600: calc(var(--color-l-600) + var(--color-aqua-boost)); --color-aqua-l-700: calc(var(--color-l-700) + var(--color-aqua-boost)); --color-aqua-l-800: calc(var(--color-l-800) + var(--color-aqua-boost)); --color-aqua-l-900: calc(var(--color-l-900) + var(--color-aqua-boost)); --color-aqua-100: hsl(var(--color-aqua-hs), var(--color-aqua-l-100)); --color-aqua-200: hsl(var(--color-aqua-hs), var(--color-aqua-l-200)); --color-aqua-300: hsl(var(--color-aqua-hs), var(--color-aqua-l-300)); --color-aqua-400: hsl(var(--color-aqua-hs), var(--color-aqua-l-400)); --color-aqua-500: hsl(var(--color-aqua-hs), var(--color-aqua-l-500)); --color-aqua-600: hsl(var(--color-aqua-hs), var(--color-aqua-l-600)); --color-aqua-700: hsl(var(--color-aqua-hs), var(--color-aqua-l-700)); --color-aqua-800: hsl(var(--color-aqua-hs), var(--color-aqua-l-800)); --color-aqua-900: hsl(var(--color-aqua-hs), var(--color-aqua-l-900)); --color-blue-h: 210; --color-blue-s: 65%; --color-blue-hs: var(--color-blue-h), var(--color-blue-s); --color-blue-boost: 3%; --color-blue-l-100: calc(var(--color-l-100) + var(--color-blue-boost)); --color-blue-l-200: calc(var(--color-l-200) + var(--color-blue-boost)); --color-blue-l-300: calc(var(--color-l-300) + var(--color-blue-boost)); --color-blue-l-400: calc(var(--color-l-400) + var(--color-blue-boost)); --color-blue-l-500: calc(var(--color-l-500) + var(--color-blue-boost)); --color-blue-l-600: calc(var(--color-l-600) + var(--color-blue-boost)); --color-blue-l-700: calc(var(--color-l-700) + var(--color-blue-boost)); --color-blue-l-800: calc(var(--color-l-800) + var(--color-blue-boost)); --color-blue-l-900: calc(var(--color-l-900) + var(--color-blue-boost)); --color-blue-100: hsl(var(--color-blue-hs), var(--color-blue-l-100)); --color-blue-200: hsl(var(--color-blue-hs), var(--color-blue-l-200)); --color-blue-300: hsl(var(--color-blue-hs), var(--color-blue-l-300)); --color-blue-400: hsl(var(--color-blue-hs), var(--color-blue-l-400)); --color-blue-500: hsl(var(--color-blue-hs), var(--color-blue-l-500)); --color-blue-600: hsl(var(--color-blue-hs), var(--color-blue-l-600)); --color-blue-700: hsl(var(--color-blue-hs), var(--color-blue-l-700)); --color-blue-800: hsl(var(--color-blue-hs), var(--color-blue-l-800)); --color-blue-900: hsl(var(--color-blue-hs), var(--color-blue-l-900)); --color-purple-h: 275; --color-purple-s: 60%; --color-purple-hs: var(--color-purple-h), var(--color-purple-s); --color-purple-boost: 0%; --color-purple-l-100: calc(var(--color-l-100) + var(--color-purple-boost)); --color-purple-l-200: calc(var(--color-l-200) + var(--color-purple-boost)); --color-purple-l-300: calc(var(--color-l-300) + var(--color-purple-boost)); --color-purple-l-400: calc(var(--color-l-400) + var(--color-purple-boost)); --color-purple-l-500: calc(var(--color-l-500) + var(--color-purple-boost)); --color-purple-l-600: calc(var(--color-l-600) + var(--color-purple-boost)); --color-purple-l-700: calc(var(--color-l-700) + var(--color-purple-boost)); --color-purple-l-800: calc(var(--color-l-800) + var(--color-purple-boost)); --color-purple-l-900: calc(var(--color-l-900) + var(--color-purple-boost)); --color-purple-100: hsl(var(--color-purple-hs), var(--color-purple-l-100)); --color-purple-200: hsl(var(--color-purple-hs), var(--color-purple-l-200)); --color-purple-300: hsl(var(--color-purple-hs), var(--color-purple-l-300)); --color-purple-400: hsl(var(--color-purple-hs), var(--color-purple-l-400)); --color-purple-500: hsl(var(--color-purple-hs), var(--color-purple-l-500)); --color-purple-600: hsl(var(--color-purple-hs), var(--color-purple-l-600)); --color-purple-700: hsl(var(--color-purple-hs), var(--color-purple-l-700)); --color-purple-800: hsl(var(--color-purple-hs), var(--color-purple-l-800)); --color-purple-900: hsl(var(--color-purple-hs), var(--color-purple-l-900)); --color-pink-h: 320; --color-pink-s: 70%; --color-pink-hs: var(--color-pink-h), var(--color-pink-s); --color-pink-boost: 0%; --color-pink-l-100: calc(var(--color-l-100) + var(--color-pink-boost)); --color-pink-l-200: calc(var(--color-l-200) + var(--color-pink-boost)); --color-pink-l-300: calc(var(--color-l-300) + var(--color-pink-boost)); --color-pink-l-400: calc(var(--color-l-400) + var(--color-pink-boost)); --color-pink-l-500: calc(var(--color-l-500) + var(--color-pink-boost)); --color-pink-l-600: calc(var(--color-l-600) + var(--color-pink-boost)); --color-pink-l-700: calc(var(--color-l-700) + var(--color-pink-boost)); --color-pink-l-800: calc(var(--color-l-800) + var(--color-pink-boost)); --color-pink-l-900: calc(var(--color-l-900) + var(--color-pink-boost)); --color-pink-100: hsl(var(--color-pink-hs), var(--color-pink-l-100)); --color-pink-200: hsl(var(--color-pink-hs), var(--color-pink-l-200)); --color-pink-300: hsl(var(--color-pink-hs), var(--color-pink-l-300)); --color-pink-400: hsl(var(--color-pink-hs), var(--color-pink-l-400)); --color-pink-500: hsl(var(--color-pink-hs), var(--color-pink-l-500)); --color-pink-600: hsl(var(--color-pink-hs), var(--color-pink-l-600)); --color-pink-700: hsl(var(--color-pink-hs), var(--color-pink-l-700)); --color-pink-800: hsl(var(--color-pink-hs), var(--color-pink-l-800)); --color-pink-900: hsl(var(--color-pink-hs), var(--color-pink-l-900)); /** Grays **/ --color-gray-h: 0; --color-gray-s: 0%; --color-gray-hs: var(--color-gray-h), var(--color-gray-s); --color-gray-boost: 0%; --color-gray-l-100: calc(var(--color-l-100) + var(--color-gray-boost)); --color-gray-l-200: calc(var(--color-l-200) + var(--color-gray-boost)); --color-gray-l-300: calc(var(--color-l-300) + var(--color-gray-boost)); --color-gray-l-400: calc(var(--color-l-400) + var(--color-gray-boost)); --color-gray-l-500: calc(var(--color-l-500) + var(--color-gray-boost)); --color-gray-l-600: calc(var(--color-l-600) + var(--color-gray-boost)); --color-gray-l-700: calc(var(--color-l-700) + var(--color-gray-boost)); --color-gray-l-800: calc(var(--color-l-800) + var(--color-gray-boost)); --color-gray-l-900: calc(var(--color-l-900) + var(--color-gray-boost)); --color-gray-100: hsl(var(--color-gray-hs), var(--color-gray-l-100)); --color-gray-200: hsl(var(--color-gray-hs), var(--color-gray-l-200)); --color-gray-250: #e8e8e8; --color-gray-300: hsl(var(--color-gray-hs), var(--color-gray-l-300)); --color-gray-400: hsl(var(--color-gray-hs), var(--color-gray-l-400)); --color-gray-500: hsl(var(--color-gray-hs), var(--color-gray-l-500)); --color-gray-600: hsl(var(--color-gray-hs), var(--color-gray-l-600)); --color-gray-700: hsl(var(--color-gray-hs), var(--color-gray-l-700)); --color-gray-800: hsl(var(--color-gray-hs), var(--color-gray-l-800)); --color-gray-900: hsl(var(--color-gray-hs), var(--color-gray-l-900)); /* Blaze orange */ --color-blaze-100: #FFE1CC; --color-blaze-200: #FFD1B3; --color-blaze-300: #FFC299; --color-blaze-400: #FFB380; --color-blaze-500: #FFA466; --color-blaze-600: #FF954D; --color-blaze-700: #FF8533; --color-blaze-800: #FF7619; --color-blaze-900: #FF6700; /** Shortcuts **/ --color-backdrop: rgba(0, 0, 0, 0.6); --color-black: black; --color-border: var(--color-gray-300); --color-dark: var(--color-gray-900); --color-focus: var(--color-blue-600); --color-light: var(--color-gray-200); --color-text: var(--color-black); --color-text-dimmed: var(--color-gray-700); --color-white: white; --color-blaze: var(--color-blaze-900); --color-blaze-light: var(--color-blaze-400); /** @deprecated */ --color-background: var(--color-light); --color-gray: var(--color-gray-600); --color-red: var(--color-red-600); --color-orange: var(--color-orange-600); --color-yellow: var(--color-yellow-600); --color-green: var(--color-green-600); --color-aqua: var(--color-aqua-600); --color-blue: var(--color-blue-600); --color-purple: var(--color-purple-600); --color-focus-light: var(--color-focus); --color-focus-outline: var(--color-focus); --color-negative: var(--color-red-700); --color-negative-light: var(--color-red-500); --color-negative-outline: var(--color-red-900); --color-notice: var(--color-orange-700); --color-notice-light: var(--color-orange-500); --color-positive: var(--color-green-700); --color-positive-light: var(--color-green-500); --color-positive-outline: var(--color-green-900); --color-text-light: var(--color-text-dimmed); } /* framework/variables.css */ :root { --columns-6: 1fr 1fr 1fr 1fr 1fr 1fr; --columns-5: 1fr 1fr 1fr 1fr 1fr; --columns-4: 1fr 1fr 1fr 1fr; --columns-3: 1fr 1fr 1fr; --columns-2: 1fr 1fr; --columns-1: 1fr; --font-title: Rubik, Chivo, Helvetica, Arial, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-mono: Inconsolata, "SFMono-Regular", Consolas, Liberation Mono, Menlo, Courier, monospace; --font-line: 200; --font-thin: 300; --font-normal: 400; --font-semibold: 500; --font-bold: 600; --font-heavy: 900; --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --rounded-xs: 1px; --rounded-sm: 0.125rem; --rounded: 0.25rem; --rounded-xl: 0.5rem; --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: rgba(0, 0, 0, 0.025) 0 0 10px, rgba(0, 0, 0, 0.075) 0 5px 40px, rgba(0, 0, 0, 0.075) 0 30px 100px; --shadow-outline: currentColor 0 0 0 2px; --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); --spacing-0: 0; --spacing-px: 1px; --spacing-2px: 2px; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing--4: -1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing--6: -1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; --spacing--12: -3rem; --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem; --spacing-36: 9rem; --spacing-42: 10.5rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.75rem; --text-4xl: 2.25rem; --text-5xl: 2.75rem; --text-6xl: 3.5rem; --text-h1: var(--text-4xl); } @media screen and (min-width: 22rem) { :root { --container-padding: 0 var(--spacing-6); } } @media screen and (min-width: 30rem) { :root { --container-padding: 0 var(--spacing-12); } } @media screen and (min-width: 40rem) { :root { --text-h1: var(--text-5xl); } } @media screen and (min-width: 72rem) { :root { --container-padding: 0 var(--spacing-24); } } /* framework/reset.css */ *, *::after, *::before { border-width: 0; border-style: solid; border-color: currentColor; box-sizing: border-box; margin: 0; padding: 0; } a { color: currentColor; text-decoration: none; } audio, canvas, embed, figure, iframe, img, object, svg, video { display: block; vertical-align: middle; } body { overflow-x: hidden; } button { font: inherit; background: none; color: currentColor; cursor: pointer; line-height: inherit; } button::-moz-focus-inner { padding: 0; border: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } html { font-family: var(--font-sans); line-height: var(--leading-normal); } img { max-width: 100%; width: 100%; transform-style: preserve-3d; } input { font: inherit; } ol, ul { list-style: none; } strong, b { font-weight: var(--font-bold); } summary { cursor: pointer; } summary:focus { outline: 0; } summary:focus-visible { outline: solid; outline: 5px auto -webkit-focus-ring-color; } table { font-variant-numeric: tabular-nums; border-spacing: 0; width: 100%; } th, td { text-align: left; vertical-align: top; } mark { background: var(--color-yellow-300); } /* framework/buttons.css */ :root { --btn-bg: var(--color-black); --btn-color: var(--color-black); --btn-filled-bg: var(--color-black); --btn-filled-color: var(--color-white); } button { overflow: hidden; text-overflow: ellipsis; } .btn { display: inline-flex; padding: 0.5rem 1.5rem; align-items: center; justify-content: center; font-size: var(--text-lg); color: var(--btn-color); cursor: pointer; border: 1px solid transparent; border-radius: var(--rounded); font-family: var(--font-mono); white-space: nowrap; background: none; } .btn svg { margin-right: 0.75rem; min-width: 1rem; } .btn--outlined { border-color: var(--color-gray-400); } .btn--outlined.btn--white { border-color: var(--color-white); color: var(--color-white); } .btn--filled { border-color: var(--btn-filled-bg); background: var(--btn-filled-bg); color: var(--btn-filled-color) !important; } .btn--filled svg { color: var(--color-yellow-600); } .btn--cta { text-decoration: none; font-size: var(--text-2xl); font-weight: var(--font-semibold); border-color: var(--btn-cta-bg); background: var(--btn-cta-bg); color: var(--btn-cta-color) !important; } .btn--cta:hover { background: var(--btn-cta-bg-hover); } .btn--cta:after { content: "→"; margin-left: var(--spacing-4); } .btn--cta svg { color: var(--color-green-600); } .btn--offer { text-decoration: none; font-size: var(--text-xl); font-weight: var(--font-bold); text-transform: ; font-family: var(--font-sans); border-color: var(--btn-offer-bg); background: var(--btn-offer-bg); color: var(--btn-offer-color) !important; } .btn--offer:hover { background: var(--btn-offer-bg-hover); } .btn--offer:after { content: "→"; margin-left: var(--spacing-4); } .btn--offer svg { color: var(--btn-offer-bg-hover); } .btn--menu { text-decoration: none; font-size: var(--text-lg); font-weight: var(--font-semibold); font-family: var(--font-sans); border-color: var(--btn-menu-bg); background: var(--btn-menu-bg); color: var(--btn-menu-color) !important; } .btn--menu:hover { background: var(--btn-menu-bg-hover); } /*.btn--menu:after { content: "→"; margin-left: var(--spacing-4); }*/ .btn--menu svg { color: var(--color-green-600); } .btn--cta { text-decoration: none; font-size: var(--text-2xl); font-weight: var(--font-semibold); border-color: var(--btn-cta-bg); background: var(--btn-cta-bg); color: var(--btn-cta-color) !important; } .btn--cta:hover { background: var(--btn-cta-bg-hover); } .btn--cta:after { content: "→"; margin-left: var(--spacing-4); } .btn--cta svg { color: var(--color-green-600); } .btn--call { text-decoration: none; font-size: var(--text-2xl); /* text-transform: uppercase;*/ font-weight: var(--font-heavy); border-color: var(--btn-cta-bg); background: var(--btn-cta-bg); color: var(--btn-cta-color) !important; } .btn--call:hover { background: var(--btn-cta-bg-hover); } .btn--call:before { content: "📞"; padding-right: var(--spacing-4); } .btn--call:after { /* content: "→"; margin-left: var(--spacing-4);*/ } .btn--call svg { color: var(--color-green-600); } .btn--box { text-decoration: none; font-size: var(--text-2xl); font-weight: var(--font-semibold); border-color: var(--btn-box-bg); background: var(--btn-box-bg); color: var(--btn-box-color) !important; box-shadow: 0 -2px 0 0 rgba(0,0,0,.1) inset; } .btn--box:hover { background: var(--btn-box-bg-hover); } .btn--box:after { content: "→"; margin-left: var(--spacing-4); } .btn--box svg { color: var(--color-green-600); } .btn--box-call { text-decoration: none; font-size: var(--text-2xl); font-weight: var(--font-semibold); background: var(--color-call-btn-bg); color: var(--color-call-btn-text) !important; border-bottom: 0px solid var(--color-call-btn-border); box-shadow: 0 -2px 0 0 rgba(0,0,0,.1) inset; } .btn--box-call:hover { background: var(--color-call-btn-bg); } .btn--box-call:after { content: "→"; margin-left: var(--spacing-4); } .btn--box-call svg { color: var(--color-call-btn-bg); } /* framework/grid.css */ :root { --container: 82rem; --container-padding: var(--spacing-4); --container-prose: 100%; --columns: 1fr 1fr 1fr 1fr; } @media screen and (min-width: 72rem) { :root { --container-prose: 768px; } } .sidebar { width: 100%; } .grid { display: grid; grid-template-columns: 1fr; } .columns { display: grid; grid-template-columns: 1fr; grid-gap: var(--spacing-8); } @media screen and (min-width: 40rem) { .grid { display: grid; grid-template-columns: 1fr; } .columns { grid-template-columns: var(--columns); } } @media screen and (min-width: 72rem) { .grid { display: grid; grid-template-columns: var(--container-prose) 1fr; grid-gap: var(--spacing-16); } } /* framework/headings.css */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); font-weight: var(--font-bold); } h1 { font-size: var(--text-5xl); margin-top: var(--spacing-0); margin-bottom: var(--spacing-8); line-height: var(--leading-tight); } h2 { font-size: var(--text-4xl); margin-top: var(--spacing-16); margin-bottom: var(--spacing-4); } h5 { font-family: var(--font-title); font-size: var(--text-xl); margin-top: var(--spacing-16); margin-bottom: var(--spacing-4); } /* framework/prose.css */ :root { --prose-code-bg: rgba(0, 0, 0, 0.1); --prose-pre-bg: var(--color-black); --prose-size: var(--text-lg); --prose-color-text: var(--color-gray-700); --prose-color-highlight: var(--color-black); } .prose { font-size: var(--prose-size); line-height: var(--leading-normal); margin: var(--spacing-10) 0; color: var(--prose-color-text); } .prose p { font-family: var(--font-sans); font-weight: var(--font-normal); font-size: var(--text-xl); line-height: var(--leading-normal); } .prose ul li, .prose ol li { font-family: var(--font-sans); font-size: var(--text-xl); line-height: var(--leading-normal); } /* Links */ .prose a { color: var(--prose-color-highlight); max-width: 100%; word-break: break-word; } /* Special elements */ .prose abbr { text-decoration: none; } .prose abbr a { text-decoration-color: var(--color-gray-500); text-decoration-style: dotted; cursor: help; } .prose strong { font-weight: var(--font-semibold); } /* Highlight elements */ .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose .intro, .prose strong, .prose em, .prose b { color: var(--prose-color-highlight); } /* Margins */ .prose > :first-child { padding-top: 0; margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose * + blockquote, .prose * + .box, .prose * + .code, .prose * + .columns, .prose * + .filesystem, .prose * + h4, .prose * + h5, .prose * + hr, .prose * + nav, .prose * + p, .prose * + ol, .prose * + ul, .prose > * + details, .prose * + .screencast, .prose * + .since, .prose * + .table { margin-top: 1em; } .prose > details[open] summary { margin-bottom: 0.75rem; } /* Lists */ .prose li::marker { color: var(--prose-color-highlight); } .prose ul { margin-left: 1em; } .prose ol { margin-left: 1.5em; } .prose ol p, .prose ul p { margin-top: 0; } .prose ol ol, .prose ol ul, .prose ul ol, .prose ul ul { margin-top: 0; } .prose ol > li { list-style: decimal-leading-zero; padding-left: 0.25em; } .prose ol > li::marker { font-variant-numeric: tabular-nums; font-weight: var(--font-bold); font-size: var(--text-xs); font-family: var(--font-mono); } .prose ul > li { list-style: disc; } .prose ul ul > li { list-style: circle; } /** Headings **/ .prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a { color: inherit; text-decoration: none; } .prose h2, .prose h3 { scroll-margin-top: var(--spacing-6); } .prose h1 { font-size: var(--text-3xl); } .prose h2 { /* font-size: 1.75em;*/ font-size: var(--text-3xl); line-height: 1.15em; } .prose * + h2 { margin-top: 2.5em; } .prose h3 { font-size: 1.25em; } .prose * + h3 { margin-top: 2.25em; } .prose h2 + h3 { margin-top: 1em; } .prose h4 { font-size: 1em; font-weight: var(--font-normal); } .prose * + h4 { margin-top: 2em; } .prose h4 + * { margin-top: var(--spacing-3); } /** Code **/ .prose :not(pre) > code { font-family: var(--font-mono); display: inline-flex; font-size: 0.825em; max-width: 100%; padding-inline: 0.375rem; border-radius: 3px; background: var(--prose-code-bg); color: var(--prose-color-highlight); white-space: nowrap; overflow-y: hidden; overflow-x: auto; } .prose code a { text-decoration: none; color: inherit; } /** Codeblocks **/ /** Blockquotes **/ .prose > blockquote { margin: 3em 0; } .prose > blockquote p { border-left: 2px solid #000; padding-left: 0.75rem; max-width: 20em; font-size: 1.2em; line-height: var(--leading-snug); color: var(--prose-color-highlight); } .prose li > blockquote { margin: 0.5em 0; font-size: 0.85em; padding-left: 0.75rem; border-left: 2px solid var(--color-gray-300); } /** Horizontal Rule **/ .hr { height: var(--spacing-2px); background: currentColor; width: var(--spacing-4); } /** Definition Lists **/ .prose dt { font-weight: var(--font-bold); } .prose p, .prose ul, .prose ol, .prose blockquote, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose .box, .prose .code, .prose .filesystem, .prose .tabs { max-width: var(--container-prose); } /** Images **/ .prose figure { margin: var(--spacing-20) 0; } .prose img { width: auto; height: auto; max-width: 100%; } .prose figure:is(.image, .video) { margin-block: 2.5rem; } .prose .image a { display: inline-block; } .prose .image img { box-shadow: var(--shadow-2xl); background: var(--color-gray-200); } .prose .image figcaption { font-size: var(--text-sm); padding-top: var(--spacing-3); } /* Video */ .prose figure.video video { width: auto; height: auto; max-width: 100%; box-shadow: var(--shadow-xl); border-radius: var(--rounded); } /* Intro */ .prose .intro { line-height: var(--leading-tight); font-size: var(--text-2xl); } /* since */ .since { position: relative; padding-bottom: 1.5rem; } .since::before, .since::after { content: ""; position: absolute; } .since::before { top: calc(0.75rem - 1px); left: -1.5rem; bottom: 0; border: 1px solid var(--color-gray-300); border-right: none; width: 1.5rem; } .since[open]::after { bottom: -0.5rem; left: 0; width: 1px; margin-top: -1px; height: 1rem; background: var(--color-gray-300); } .since:not([open])::after { content: "• • •"; bottom: -0.825rem; color: var(--color-gray-300); left: 0; } .since summary { position: relative; z-index: 1; font-family: var(--font-mono); font-size: var(--text-xs); display: inline-block; padding: var(--spacing-2px) var(--spacing-3); background: var(--color-light); border: 1px solid var(--color-gray-300); border-radius: 3rem; margin-left: -0.75rem; } .since summary.new { background: var(--color-yellow-400); border: 1px solid var(--color-yellow-500); } .since summary a { text-decoration: none; } .since > div { margin-top: var(--spacing-6); } /* framework/table.css */ table { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--rounded); font-variant-numeric: tabular-nums; margin: var(--spacing-6) 0 var(--spacing-12) 0; } table table { color: inherit; min-width: 25rem; } table th, table td { padding: .75em 1em; border-bottom: 1px solid var(--color-gray-300); vertical-align: baseline; font-size: .825em; line-height: var(--leading-normal); font-family: var(--font-sans); } table th { background: var(--color-black); font-weight: var(--font-bold); white-space: nowrap; color: var(--color-white); } table tr:last-child td { border-bottom: 0; } table tr:nth-child(odd) { } table tr:nth-child(even) { background: var(--color-gray-100); } @media screen and (max-width: 40rem) { table { border-collapse: collapse; display: inline-flex; } table thead { display: none; } table tbody { } table td { display: flex; } table tbody tr { border-bottom: 2px solid grey; } } /* DEPRECATED TABLES */ /*table { width: 100%; text-align: left; border: 1px #d1d8e0 solid; border-radius: 3px; font-family: var(--font-mono); font-size: 0.9rem; margin: 3rem 1rem 5rem 1rem; box-shadow: 1px 1px 3px #d1d8e0; } tr, th, td { padding: 1rem; } th{ background: #ED4C67; color: white; border-radius: 3px; border: none; }*/ /* END TABLES */ /* framework/forms.css */ .contact-form { /* font-size: var(--text-2xl);*/ line-height: var(--leading-normal); color: var(--prose-color-text); align-items: start; } input:not([type="radio"]), textarea { display: block; } label.required:after { content: '*'; color: red; } .uniform__potty { position: absolute; left: -9999px; } .error { border: 1px solid red; } .error-text { color: red; } .contact-form form { display: grid; grid-template-columns: 1fr; align-items: end; grid-gap: var(--spacing-5); } @media screen and (min-width: 40rem) { .contact-form form { grid-template-columns: 1fr 1fr; } .contact-form .form-full { grid-column: 1 / 3; } } .contact-form label { font-size: var(--text-lg); font-weight: var(--font-semibold); } .contact-form .box { margin-top: var(--var-spacing-5); padding: var(--var-spacing-2); } input, textarea, select { width: 100%; padding: var(--spacing-2); margin-top: var(--spacing-5); } input.btn { /* margin-top: var(--spacing-0);*/ } textarea { height: 150px; } /* site/variables.css */ :root { /* TRANSITION MAP */ --color-brand: var(--color-menu-bg); --color-cta: var(--color-cta-bg); --menu-color: var(--color-menu-text); /* FALLBACK VARIABLES */ --color-menu-bg: var(--color-black); --color-menu-text: var(--color-white); --color-highlight: var(--color-blaze); --color-link: var(--color-yellow); --color-cta-bg: var(--color-blaze); --color-cta-hover-bg: var(--color-blaze-600); --color-cta-text: var(--color-white); /* CTA Callouts */ --color-cta-box-bg: var(--color-blue-300); --color-box-bg: var(--color-blue-700); --color-box-text: var(--color-white); --color-call-box-bg: #d1f2df; --color-call-btn-bg: #1abd5e; --color-call-btn-border: #1abd5e; --color-call-btn-text: var(--color-white); --logo-width: 280px; --logo-width-mobile: 280px; /* HEADER */ --menu-dropdown-color: var(--color-white); --menu-dropdown-border: 1px solid rgba(255,255,255,0.1); /* HEADER & FOOTER */ --menu-dropdown-bg: var(--color-menu-bg); --menu-dropdown-bg-mobile: var(--color-menu-bg); --menu-dropdown-color: var(--color-menu-text); --footer-bg: var(--color-menu-bg); --footer-color: var(--color-menu-text); --footer-columns: var(--columns-4); /* BUTTONS */ --btn-cta-bg: var(--color-cta-bg); --btn-cta-color: var(--color-cta-text); --btn-offer-bg: var(--color-cta-bg); --btn-offer-color: var(--color-cta-text); --btn-menu-bg: var(--color-cta-bg); --btn-menu-color: var(--color-cta-text); --btn-box-bg: var(--color-box-bg); --btn-box-color: var(--color-box-text); /* manage hover states with opacity instead of colors? */ --btn-cta-bg-hover: var(--color-cta-hover-bg); --btn-offer-bg-hover: var(--color-cta-hover-bg); --btn-menu-bg-hover: var(--color-cta-hover-bg); --btn-box-bg-hover: var(--color-cta-hover-bg); } /* site/boxes.css */ :root { --box-default: var(--color-light); --box-alert: var(--color-red-400); --box-info: var(--color-blue-400); --box-success: var(--color-green-400); --box-warning: var(--color-orange-400); } .box { position: relative; --bg: var(--box-default); background: var(--bg); border-radius: var(--rounded); overflow: hidden; } .box .box-text { color: var(--color-black); padding: var(--spacing-6); margin-right: var(--spacing-6); } .box .box-icon { color: var(--bg); position: absolute; top: 0; right: 0; } .box--alert { --bg: var(--box-alert); } .box--info { --bg: var(--box-info); } .box--success { --bg: var(--box-success); } .box--warning { --bg: var(--box-warning); } /* site/header.css */ :root { --header-bg: var(--color-menu-bg); } header { background: var(--header-bg); padding: var(--spacing-4) 0; position: sticky; top: 0; z-index: 99 !important; margin: 0 auto; max-width: 100%; margin-bottom: 0; } .header { display: grid; max-width: var(--container); grid-template-columns: 1fr; align-items: start; padding: 0 var(--container-padding); } .header .menu { text-align: left; /* margin: 0 auto;*/ /* display: none;*/ padding: var(--spacing-4) 0; } .logo { width: 100%; max-width: var(--logo-width-mobile); text-align: center; } .logo a img { margin: 0 auto; } /* HAMBURGER TOGGLE */ .menu { display: none; } .menu.show { display: block; clear: both; -webkit-animation: slide-down .2s ease-out; -moz-animation: slide-down .2s ease-out; } @-webkit-keyframes slide-down { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes slide-down { 0% { opacity: 0; -moz-transform: translateY(-100%); } 100% { opacity: 1; -moz-transform: translateY(0); } } .hamburger { position: absolute; right: 0; padding-bottom: 1.125em; padding-right: 1.125em; top: 0.5625em; } .hamburger:focus { outline: none; } @media screen and (min-width: 40rem) { } @media screen and (min-width: 72rem) { header { } .header { display: grid; grid-template-columns: 1fr 2fr; max-width: var(--container); align-items: center; padding: 0 var(--container-padding); margin: 0 auto; } .header .menu { display: block; text-align: right; grid-column: 3; align-self: center; padding: 0; } .logo { max-width: var(--logo-width); width: var(--logo-width); } .menuToggle { display: none; } .menu { display: block; } } @media screen and (min-width: 72rem) { } /* site/footer.css */ footer { background: var(--footer-bg); } .footer { display: grid; max-width: var(--container); grid-template-columns: var(--footer-columns); grid-gap: var(--spacing-12); margin: 0 auto; padding: var(--spacing-16) var(--container-padding); } .footer .center { text-align: center; } footer img.small { height: 18px; } ul.footer-menu { list-style-type: none; padding: 0; } footer p, footer a { font-family: var(--font-sans); color: var(--footer-color); font-size: var(--text-base); } .footer h3 { font-family: var(--font-title); color: var(--footer-color); font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--spacing-3); margin-top: 0; } footer h4 { font-family: var(--font-sans); color: var(--footer-color); margin: var(--spacing-4) 0; } footer a { text-decoration: none; } footer a:hover { color: var(--color-highlight); } footer .copyright { margin: 0 auto; padding: var(--spacing-4) 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.15); } @media all and (max-width: 48em) { .footer { margin: 0 auto; display: grid; grid-template-columns: 1fr; padding-top: var(--spacing-12); text-align: left; } .footer .center { text-align: left; } } /* site/leader.css */ :root { --leader-height: 600px; } @media screen and (min-width: 40rem) { :root { --leader-height: 600px; } } .leader { margin-top: 0; padding-top: 0; height: var(--leader-height); position: relative; text-align: left; overflow: hidden; color: white; background-color: var(--color-black); display: block; } .leader figure { margin: 0; width: 100%; } .leader img { width: 100%; height: var(--leader-height); overflow: hidden; object-fit: cover; /* -webkit-mask-image:-webkit-gradient(linear, center 0%, center 90%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.2))); mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.2));*/ -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.4) 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.4) 100%); } .leader-text-container { max-width: var(--container); margin: 0 auto; /* height: var(--leader-height);*/ padding: var(--container-padding); } .leader-text { max-width: var(--container-prose); position: absolute; top: 50%; transform: translate(0, -50%); } /* OLD WORKING LEADER TEXT CSS */ /*.leader-text { height: var(--leader-height); max-width: var(--container); padding: var(--container-padding); transform: translate(0, -0%); margin: 0 auto; margin-top: calc(-1 * var(--leader-height)); }*/ /*.leader .grid { align-items: center; }*/ .leader-text h1 { font-family: var(--font-title); line-height: var(--leading-none); font-size: var(--text-4xl); text-shadow: 4px 4px 4px var(--color-black); margin-bottom: 0; } .leader-text h2 { font-family: var(--font-title); text-shadow: 2px 2px 2px var(--color-gray-900); margin: var(--spacing-4) 0; } .leader-text h3 { font-family: var(--font-title); font-size: var(--text-xl); font-weight: var(--font-thin); color: white; text-shadow: 2px 2px 2px var(--color-gray-900); margin: var(--spacing-4) 0; } .leader-text p { font-family: var(--font-sans); font-size: var(--text-2xl); line-height: var(--leading-tight); margin: var(--spacing-6) 0 var(--spacing-8) 0; text-shadow: 2px 2px 2px var(--color-black); /* font-weight: var(--font-semibold);*/ } .leader-text p .btn { text-shadow: none; box-shadow: 2px 2px 2px var(--color-gray-900); } @media screen and (min-width: 40rem) { .leader .grid { padding: 0; } .leader { text-align: left; } .leader-text-container { /* display: grid; grid-template-columns: 2fr 1fr;*/ } .leader-text { max-width: var(--container-prose); position: absolute; top: 50%; transform: translate(0, -50%); } .leader img { -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 1) 100%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 1) 100%); } .leader-text h1 { font-size: var(--text-6xl); } .leader-text h3 { font-family: var(--font-title); font-size: var(--text-2xl); } } /* site/sidebar.css */ /* START SIDEBAR */ .sidebar { display: none; max-width: 100%; } .sticky { position: -webkit-sticky; /* Safari */ position: sticky; margin-top: 1rem; top: 3rem; display: block; z-index: 98; padding-top: var(--spacing-20); } .sidebar figure { width: 70%; margin: 0 auto; } .sidebar figure img { text-align: center; } /* SIDEBAR OFFER BOX STYLING */ .sidebar-offer { max-width: 100%; text-align: center; background: var(--color-yellow-400); margin: 0; padding: var(--spacing-8) var(--spacing-4); border: 1px solid var(--color-yellow); } .sidebar-offer h2 { font-size: var(--text-2xl); margin-top: 0; } .sidebar-offer p { font-size: var(--text-base); } .sidebar-offer a.btn { margin-top: var(--spacing-8); white-space: unset; /* font-size: var(--text-xl);*/ } @media screen and (min-width: 40rem) { .sidebar-offer { /* margin: var(--spacing-24) 0; padding: var(--spacing-16);*/ } } @media screen and (min-width: 72rem) { .sidebar { display: block; } } /* site/menu.css */ /* MAIN MENU */ .menu ul { list-style: none; margin: 0; padding-left: 0; } .menu li { display: block; /* float: left;*/ position: relative; padding: var(--spacing-2) var(--spacing-2); transition-duration: 0.5s; } li.menu-item { /* display: inline-block;*/ } /* SUBMENU */ .menu ul li ul { background: var(--menu-dropdown-bg-mobile);; visibility: hidden; opacity: 0; min-width: 11rem; position: relative; transition: all 0.5s ease; margin-top: var(--spacing-0); display: none; text-align: left; } .menu ul li ul li a { font-size: var(--text-base); } .menu ul li:hover > ul, .menu ul li ul:hover { visibility: visible; opacity: 1; display: block; } .menu ul li ul li { clear: both; width: 100%; border-top: var(--menu-dropdown-border); } /* SUBMENU ACCESSIBILITY TAB NAVIGATION */ ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } /* MENU LINK STYLING */ li.menu-item a { font-family: var(--font-sans); color: var(--color-menu-text); font-size: var(--text-lg); text-decoration: none; font-weight: var(--font-semibold); /* padding: var(--spacing-2) 0;*/ padding: var(--spacing-2) var(--spacing-4); display: inline-flex; align-items: center; justify-content: center; /* font-size: var(--text-sm);*/ /* color: var(--btn-color);*/ cursor: pointer; /* border: 1px solid transparent;*/ /* border-radius: var(--rounded);*/ /* font-family: var(--font-mono);*/ white-space: nowrap; /* background: none;*/ } li.menu-item a.btn { /* padding: var(--spacing-2) var(--spacing-4);*/ /* padding-left: 0*/ } li.menu-item a:hover { color: var(--color-link); /* border-bottom: 2px solid var(--color-yellow-500);*/ } li.menu-item a.active { color: var(--color-link); /* border-bottom: 2px solid var(--color-yellow-400);*/ } li.menu-item a.hasSubmenu:after { content: "\25BE"; padding-left: var(--spacing-2); } li.menu-item a.call-cta { padding:; font-family: var(--font-mono); font-size: var(--text-xl); text-transform: uppercase; font-weight: var(--font-heavy); } li.menu-item a.call-cta:before { content: "📞"; padding-right: var(--spacing-2); } @media screen and (min-width: 40rem) { .menu li { display: inline-block; float: left; padding: 0; } li.menu-item:first-of-type a { padding-left: 0; } } @media screen and (min-width: 72rem) { .menu ul li ul { background: var(--menu-dropdown-bg);; min-width: 11rem; position: absolute; transition: all 0.5s ease; margin-top: var(--spacing-0); left: 0; text-align: left; } li.menu-item a { /* padding: var(--spacing-2) var(--spacing-4);*/ } li.menu-item:first-of-type a { padding: var(--spacing-2) var(--spacing-4); } } /* site/toc.css */ .toc { margin: var(--spacing-24) 0; } .toc .badge { border-radius: var(--rounded-sm); border-end-start-radius: 0; } .toc ol { padding-top: var(--spacing-4); padding-left: var(--spacing-12); border-left: 2px solid var(--color-black); font-size: var(--text-xl); } .toc li { list-style: decimal-leading-zero; padding-left: 0.25em; } .toc li::marker { font-variant-numeric: tabular-nums; font-weight: var(--font-bold); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-black); } .toc a { display: inline-flex; } .toc h2#toc-heading { font-size: var(--text-xs); line-height: var(--leading-none); color: var(--color-white); } .toc ol { margin: 0; } /* site/links.css */ .filters a[aria-current], .prose a:where(:not(.btn)), .toc a, .sidebar ul a[aria-current], .playground-header-menu a[aria-current], .reference-entries a[aria-current] h4, .link { text-decoration: underline; text-decoration-color: var(--color-link); text-decoration-thickness: 2px; } .link:hover, .prose a:hover, .toc a:hover, .sidebar ul a:hover { text-decoration-color: var(--color-link); } /* site/offer.css */ .offer-box { max-width: var(--container-prose); text-align: center; background: var(--color-yellow-200); margin: var(--spacing-12) 0; padding: var(--spacing-8) var(--spacing-4); } .offer-box span { margin-bottom: var(--spacing-10); } .offer-box a.btn--offer, .offer-box a.btn--call { margin-top: var(--spacing-5); white-space: unset; } .cta-subtext { display: block; margin-top: var(--spacing-4); line-height: var(--leading-normal); font-size: var(--text-sm); font-weight: var(--font-thin); } .cta-subtext span:before { content: ""; display: inline-block; background: url('/assets/images/check-50.png') no-repeat left center; background-size: 18px; width: 18px; height: 18px; margin-bottom: -5px; margin-right: 6px; } @media screen and (min-width: 40rem) { .offer-box { margin: var(--spacing-24) 0; padding: var(--spacing-16); } } .cta-box { display: grid; grid-template-columns: 1fr; background: var(--color-cta-box-bg); align-items: center; grid-gap: var(--spacing-5); margin: var(--spacing-10) 0; padding: var(--spacing-8) var(--spacing-10); } .cta-box h3 { font-weight: bold; text-align: center; font-size: var(--text-lg); color: var(--color-gray-900); } .cta-box.call { background: var(--color-call-box-bg); } @media screen and (min-width: 40rem) { .cta-box { grid-template-columns: 3fr 1fr; grid-gap: var(--spacing-20); } .cta-box h3 { text-align: left; } } /* STICKY OFFER */ .sticky-footer { width: 100%; max-width: 100%; display: block; } .sticks { --bottom: 0; position: fixed; bottom: var(--bottom); } .sticky-footer .sticks { width: 100%; position: -webkit-fixed; /* Safari */ position: fixed; margin-bottom: 0; display: block; z-index: 98; /* padding-top: var(--spacing-20);*/ } .sticky-offer { max-width: 100%; text-align: center; margin: 0; } .sticky-offer h2 { font-size: var(--text-xl); margin-top: 0; } .sticky-offer p { font-size: var(--text-base); } .sticky-offer a.btn { margin-top: var(--spacing-0); white-space: nowrap; font-size: var(--text-xl); display: block; border-radius: 0px; margin-left: var(--spacing--4); } @media screen and (min-width: 72rem) { .sticky-footer { display: none; max-width: 100%; } .sticky-offer { max-width: 100%; text-align: center; background: var(--color-yellow-400); margin: 0; /* padding: var(--spacing-4) 0;*/ border: 1px solid var(--color-yellow); } } /* site/forms.css */ .contact-form form { background: var(--color-blue-900); padding: var(--spacing-8) var(--spacing-10); border-radius: var(--rounded); } .contact-form form label { color: white; } @media screen and (min-width: 72rem) { .container .contact-form { margin-top: -10rem !important; } .contact-grid .contact-form { margin-top: 0 !important; } } /* site/contact-section.css */ /* CONTACT SECTION */ section.contact { background: var(--color-yellow-200); padding: var(--spacing-20) 0; } .contact-grid { display: grid; grid-template-columns: 1fr; grid-gap: var(--spacing-10); } .contact h2 { margin-top: 0; } .contact p { margin-bottom: var(--spacing-6); } .contact-map { margin-top: var(--spacing-6); position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .contact-form { } @media screen and (min-width: 72rem) { .contact-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--spacing-20); } } /* site/facebook-like.css */ .facebook-share-container, .facebook-like-container { background: var(--color-yellow); border: 5px dashed var(--color-yellow-800); margin: 0; padding: var(--spacing-8); text-align: left; font-family: var(--font-sans); } .facebook-share-cta { margin-bottom: var(--spacing-4); font-size: var(--text-xl); } .facebook-like-cta { margin-right: var(--spacing-4); font-size: var(--text-l); } /* site/hamburger.css */ .hamburger { padding: var(--spacing-3) var(--spacing-6); display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #ced6e0; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #ced6e0; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * 3DX */ .hamburger--3dx .hamburger-box { perspective: 80px; } .hamburger--3dx .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { perspective: 80px; } .hamburger--3dx-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { perspective: 80px; } .hamburger--3dy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { perspective: 80px; } .hamburger--3dy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { perspective: 80px; } .hamburger--3dxy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-270deg); transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 2px; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 10px; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-135deg); transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(270deg); transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -80px; top: -80px; transform: translate3d(80px, 80px, 0) rotate(45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -80px; top: -80px; transform: translate3d(-80px, 80px, 0) rotate(-45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic-r.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -80px; top: 80px; transform: translate3d(80px, -80px, 0) rotate(-45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -80px; top: 80px; transform: translate3d(-80px, -80px, 0) rotate(45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { transform: rotate(45deg) translate3d(5.71429px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { transform: translate3d(0, -20px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transform: rotate(-225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { transform: rotate(90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand-r .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { transform: rotate(-90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex.is-active .hamburger-inner { transform: rotate(765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex-r.is-active .hamburger-inner { transform: rotate(-765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* site/utilities.css */ html { background: var(--color-gray-100); background: linear-gradient( to right, var(--color-white), var(--color-gray-100), #fbf8f4 ); } img { transform: translate3d(0, 0, 0); } .badge { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-black); color: var(--color-white); padding: var(--spacing-2px) var(--spacing-3); display: inline-flex; white-space: nowrap; margin-bottom: 0; } .bg-light { background: var(--color-light); } .bg-dark { background: var(--color-dark); } .bg-yellow { background: var(--color-yellow-400); } .border { position: relative; border: 1px solid var(--color-border); } .border-top { border-top: 1px solid var(--color-border); } .color-gray-400 { color: var(--color-gray-400); } .color-gray-500 { color: var(--color-gray-500); } .color-gray-600 { color: var(--color-gray-600); } .color-gray-700 { color: var(--color-gray-700); } .dimmed { background: var(--color-black); } .dimmed img { opacity: 0.8; } .h-3 { height: 3rem; } .iconbox { --size: 2rem; width: var(--size); height: var(--size); display: grid; place-items: center; border-radius: var(--rounded-sm); flex-shrink: 0; } .iconbox a { width: 100%; height: 100%; display: grid; place-items: center; } .input { background: var(--color-white); padding: var(--spacing-2) var(--spacing-3); width: 100%; border-radius: var(--rounded-sm); } .max-w-xs { max-width: 20rem; } .max-w-xl { max-width: 36rem; } .rounded-xl { border-radius: var(--spacing-2); } .shadow-2xl { box-shadow: var(--shadow-2xl); } .tabular-nums { font-variant-numeric: tabular-nums; } /* site/elements.css */ /* KIRBYTAG-ELEMENTS */ aside.element .services, aside.element .service-locations { background: var(--color-yellow-200); padding: var(--spacing-10) var(--spacing-5); margin: var(--spacing-12) auto; } aside.element h2 { margin-top: 0; margin-bottom: var(--spacing-4); } aside.element .services, aside.element .service-locations-list { display: grid; grid-template-columns: 1fr; grid-gap: var(--spacing-6); margin-top: var(--spacing-8); } aside.element .services a.btn { margin-top: var(--spacing-8); } aside.element .services-list { display: grid; grid-gap: var(--spacing-2); } aside.element .service:before { content: "🏠"; } aside.element .service-location:before { content: "📍"; } aside.element .service h4, aside.element .service-location h4 { margin-top: 0; display: inline-block; padding-left: var(--spacing-2); font-size: var(--text-xl); font-weight: var(--font-normal); } aside.element .service h4 a, aside.element .service-location h4 a { text-decoration: none; text-decoration-color: var(--color-link); text-decoration-thickness: 2px; } aside.element .service:after, aside.element .service-location:after{ content: "→"; color: var(--color-gray); font-weight: var(--font-line); } aside.element .service h4 a:hover, aside.element .service-location h4 a:hover { margin-right: 2px; transition: 0.05s; } @media screen and (min-width: 72rem) { aside.element .services, aside.element .service-locations { padding: var(--spacing-10); } aside.element .services, aside.element .service-locations-list { display: grid; grid-template-columns: 4fr 5fr; grid-gap: var(--spacing-4); } } /* framework/utilities.css */ .absolute { position: absolute; } .auto-rows-fr { grid-auto-rows: 1fr; } .bg-black { background: var(--color-black); } .bg-white { background: var(--color-white); } .block { display: block; } .color-black { color: var(--color-black); } .color-white { color: var(--color-white); } .container { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 var(--container-padding); } .fixed { position: fixed; } .flex { --gap: 0; display: flex; } .flex > * + * { margin-left: var(--gap); } .flex-wrap { flex-wrap: wrap; } .flex-column { flex-direction: column; } .flex-grow { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .font-bold { font-weight: var(--font-bold); } .font-mono { font-family: var(--font-mono); } .font-normal { font-weight: var(--font-normal); } .font-sans { font-family: var(--font-sans); } .font-thin { font-weight: var(--font-thin); } .grid { display: grid; } .hidden { display: none !important; } .inline-flex { display: inline-flex; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .invisible { visibility: hidden; } .italic { font-style: italic; } .items-start { align-items: flex-start; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .leading-snug { line-height: var(--leading-snug); } .leading-tight { line-height: var(--leading-tight); } .list-none { list-style: none; } .list-none > summary::-webkit-details-marker { display: none; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-1); } .mb-3 { margin-bottom: var(--spacing-3); } .mb-6 { margin-bottom: var(--spacing-6); } .mb-12 { margin-bottom: var(--spacing-12); } .mb-24 { margin-bottom: var(--spacing-24); } .mb-36 { margin-bottom: var(--spacing-36); } .mb-42 { margin-bottom: var(--spacing-42); } .ml-auto { margin-left: auto; } .mr-1 { margin-right: var(--spacing-1); } .mr-3 { margin-right: var(--spacing-3); } .mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); } .mx-auto { margin-left: auto; margin-right: auto; } .overflow-hidden { overflow: hidden; } .place-items-center { display: grid; place-items: center; align-content: center; } .p-container { padding: var(--container-padding); } .p-1 { padding: var(--spacing-1); } .p-3 { padding: var(--spacing-3); } .p-6 { padding: var(--spacing-6); } .p-12 { padding: var(--spacing-12); } .p-24 { padding: var(--spacing-24); } .pt-1 { padding-top: var(--spacing-1); } .pt-3 { padding-top: var(--spacing-3); } .pt-6 { padding-top: var(--spacing-6); } .pt-12 { padding-top: var(--spacing-12); } .px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); } .px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); } .px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); } .px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); } .py-1 { padding-bottom: var(--spacing-1); padding-top: var(--spacing-1); } .py-3 { padding-bottom: var(--spacing-3); padding-top: var(--spacing-3); } .py-6 { padding-bottom: var(--spacing-6); padding-top: var(--spacing-6); } .py-12 { padding-bottom: var(--spacing-12); padding-top: var(--spacing-12); } .relative { position: relative; } .rounded { border-radius: var(--rounded); } .shadow { box-shadow: var(--shadow); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @media screen and (min-width: 30rem) { /* .sticky { --top: 0; position: sticky; top: var(--top); }*/ } .text-center { text-align: center; } .text-right { text-align: right; } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); line-height: 1.175em; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .underline { text-decoration: underline; } .w-100\% { width: 100%; } .w-auto { width: auto; } .w-full { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .whitespace-nowrap { white-space: nowrap; } .z-1 { z-index: 1; }