/* ---------------------------------------------------------------------------- DO NOT EDIT DIRECTLY This is nativestartCSS by Sanico Software. Please override global values in a file called base.css, refer to the docs. Version: v1.0.1 ---------------------------------------------------------------------------- */ @layer reset, theme, base, components; /* ---------------------------------------------------------------------------- Recommended Media Queries break-sm-x1: 40rem (640px) - @media (width >= 40rem) { ... } break-md: 48rem (768px) - @media (width >= 48rem) { ... } break-lg-x1: 64rem (1024px) - @media (width >= 64rem) { ... } break-lg-x2: 80rem (1280px) - @media (width >= 80rem) { ... } ---------------------------------------------------------------------------- */ @layer theme { :root { /* -------------------------------------------------- Fonts and Typography ----------------------------------------------------- */ /* font family */ --default-font-header: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif; --default-font-body: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif; --default-font-size: clamp(1rem, calc(15px + 0.390625vw), 1.8rem); --font-size-sm-x3: 70%; --font-size-sm-x2: 80%; --font-size-sm-x1: 90%; --font-size-md: 100%; --font-size-lg-x1: 115%; --font-size-lg-x2: 130%; --font-size-lg-x3: 145%; --font-size-lg-x4: 160%; --font-size-lg-x5: 175%; --default-font-weight: var(--font-weight-normal); --font-weight-lighter: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-semi-bold: 500; --font-weight-bold: 700; --font-weight-bolder: 800; --font-weight-boldest: 900; --font-weight-full: 1000; --default-line-height: var(--line-height-normal); --line-height-tightest: 1.1; --line-height-tighter: 1.25; --line-height-tight: 1.375; --line-height-normal: 1.5; --line-height-loose: 1.65; --line-height-looser: 1.7; --line-height-loosest: 2; --letter-spacing-tightest: -0.1em; --letter-spacing-tighter: -0.05em; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; --underline-offset-0: 0px; --underline-offset-1: 1px; --underline-offset-2: 2px; --underline-offset-3: 4px; --underline-offset-4: 8px; /* -------------------------------------------------- Colors ----------------------------------------------------- */ /* shades with lch values */ --shade-0: 97% calc(c / 16) h; --shade-1: 94% calc(c / 4) h; --shade-2: 88% c h; --shade-3: 70% c h; --shade-4: 60% c h; --shade-5: 50% c h; --shade-6: 40% c h; --shade-7: 30% c h; --shade-8: 22% calc(c / 1.5) h; --shade-9: 18% calc(c / 2) h; /* source colors */ --default-color-neutral: oklch(80% 0.01 300deg); --default-color-primary: oklch(0.5754 0.0574 244.63); --default-color-secondary: oklch(0.7986 0.0581 92.91); /* common colors */ --color-white: oklch(1 0 0); --color-black: oklch(0 0 0); --color-neutral-0: oklch(from var(--default-color-neutral) var(--shade-0)); --color-neutral-1: oklch(from var(--default-color-neutral) var(--shade-1)); --color-neutral-2: oklch(from var(--default-color-neutral) var(--shade-2)); --color-neutral-3: oklch(from var(--default-color-neutral) var(--shade-3)); --color-neutral-4: oklch(from var(--default-color-neutral) var(--shade-4)); --color-neutral-5: oklch(from var(--default-color-neutral) var(--shade-5)); --color-neutral-6: oklch(from var(--default-color-neutral) var(--shade-6)); --color-neutral-7: oklch(from var(--default-color-neutral) var(--shade-7)); --color-neutral-8: oklch(from var(--default-color-neutral) var(--shade-8)); --color-neutral-9: oklch(from var(--default-color-neutral) var(--shade-9)); --color-primary-0: oklch(from var(--default-color-primary) var(--shade-0)); --color-primary-1: oklch(from var(--default-color-primary) var(--shade-1)); --color-primary-2: oklch(from var(--default-color-primary) var(--shade-2)); --color-primary-3: oklch(from var(--default-color-primary) var(--shade-3)); --color-primary-4: oklch(from var(--default-color-primary) var(--shade-4)); --color-primary-5: oklch(from var(--default-color-primary) var(--shade-5)); --color-primary-6: oklch(from var(--default-color-primary) var(--shade-6)); --color-primary-7: oklch(from var(--default-color-primary) var(--shade-7)); --color-primary-8: oklch(from var(--default-color-primary) var(--shade-8)); --color-primary-9: oklch(from var(--default-color-primary) var(--shade-9)); --color-secondary-0: oklch( from var(--default-color-secondary) var(--shade-0) ); --color-secondary-1: oklch( from var(--default-color-secondary) var(--shade-1) ); --color-secondary-2: oklch( from var(--default-color-secondary) var(--shade-2) ); --color-secondary-3: oklch( from var(--default-color-secondary) var(--shade-3) ); --color-secondary-4: oklch( from var(--default-color-secondary) var(--shade-4) ); --color-secondary-5: oklch( from var(--default-color-secondary) var(--shade-5) ); --color-secondary-6: oklch( from var(--default-color-secondary) var(--shade-6) ); --color-secondary-7: oklch( from var(--default-color-secondary) var(--shade-7) ); --color-secondary-8: oklch( from var(--default-color-secondary) var(--shade-8) ); --color-secondary-9: oklch( from var(--default-color-secondary) var(--shade-9) ); /* default colors used in website */ --default-color-text: var(--color-black); --default-color-bg: var(--color-white); --default-color-bg-dark: var(--color-neutral-8); --default-lch-shadow: 0.2679 0.003 264.51; /* --------------------------------------------------------------------------- borders --------------------------------------------------------------------------- */ --border-radius-1: 2px; --border-radius-2: 5px; --border-radius-3: 1rem; --border-radius-4: 2rem; --border-radius-5: 4rem; --border-radius-round: 9999px; --border-width-1: 1px; --border-width-2: 2px; --border-width-3: 5px; --border-width-4: 10px; --border-width-5: 25px; /* -------------------------------------------------- Shadows ----------------------------------------------------- */ --default-shadow-strength: 1%; --default-shadow-strength-3: calc(var(--default-shadow-strength) + 2%); --default-shadow-strength-4: calc(var(--default-shadow-strength) + 3%); --default-shadow-strength-5: calc(var(--default-shadow-strength) + 4%); --default-shadow-strength-6: calc(var(--default-shadow-strength) + 5%); --default-shadow-strength-7: calc(var(--default-shadow-strength) + 6%); --default-shadow-strength-8: calc(var(--default-shadow-strength) + 7%); --default-shadow-strength-10: calc(var(--default-shadow-strength) + 9%); --shadow-1: 0 1px 2px -1px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-10)); --shadow-2: 0 3px 5px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)), 0 7px 14px -5px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)); --shadow-3: 0 -1px 3px 0 oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)), 0 1px 2px -5px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)), 0 2px 5px -5px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)), 0 4px 12px -5px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)), 0 12px 15px -5px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8)); --shadow-4: 0 -2px 5px 0 oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)), 0 1px 1px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)), 0 2px 2px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)), 0 5px 5px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)), 0 9px 9px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)), 0 16px 16px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-7)); --shadow-5: 0 -1px 2px 0 oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)), 0 2px 1px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)), 0 5px 5px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)), 0 10px 10px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)), 0 20px 20px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)), 0 40px 40px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8)); --shadow-6: 0 -1px 2px 0 oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)), 0 3px 2px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)), 0 7px 5px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)), 0 12px 10px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)), 0 22px 18px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)), 0 41px 33px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-7)), 0 100px 80px -2px oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8)); /* -------------------------------------------------- Lengths and Containers ----------------------------------------------------- */ --length-0: 0rem; --length-0-5: 0.125rem; --length-1: 0.25rem; --length-1-5: 0.375rem; --length-2: 0.5rem; --length-2-5: 0.625rem; --length-3: 0.75rem; --length-3-5: 0.875rem; --length-4: 1rem; --length-5: 1.25rem; --length-6: 1.5rem; --length-7: 1.75rem; --length-8: 2rem; --length-9: 2.25rem; --length-10: 2.5rem; --length-11: 2.75rem; --length-12: 3rem; --length-14: 3.5rem; --length-16: 4rem; --length-20: 5rem; --length-24: 6rem; --length-28: 7rem; --length-32: 8rem; --length-36: 9rem; --length-40: 10rem; --length-44: 11rem; --length-48: 12rem; --length-52: 13rem; --length-56: 14rem; --length-60: 15rem; --length-64: 16rem; --length-72: 18rem; --length-80: 20rem; --length-96: 24rem; --max-reach-sm-x4: 16rem; --max-reach-sm-x3: 18rem; --max-reach-sm-x2: 20rem; --max-reach-sm-x1: 24rem; --max-reach-md: 28rem; --max-reach-lg-x1: 32rem; --max-reach-lg-x2: 36rem; --max-reach-lg-x3: 42rem; --max-reach-lg-x4: 48rem; --max-reach-lg-x5: 56rem; --max-reach-lg-x6: 64rem; --max-reach-lg-x7: 72rem; --max-reach-lg-x8: 80rem; /* -------------------------------------------------- General ----------------------------------------------------- */ --space-sm-x4: 0.2em; --space-sm-x3: 0.4em; --space-sm-x2: 0.6em; --space-sm-x1: 0.8em; --space-md: 1em; --space-lg-x1: 1.5em; --space-lg-x2: 2em; --space-lg-x3: 3em; --space-lg-x4: 4em; --space-lg-x5: 5em; --z-0: 0; --z-1: 1; --z-2: 2; --z-3: 3; --z-4: 4; --z-5: 5; --z-important: 2147483647; /* -------------------------------------------------- Animations ----------------------------------------------------- */ --ease-1: cubic-bezier(0.25, 0, 0.5, 1); --ease-2: cubic-bezier(0.25, 0, 0.4, 1); --ease-3: cubic-bezier(0.25, 0, 0.3, 1); --ease-4: cubic-bezier(0.25, 0, 0.2, 1); --ease-5: cubic-bezier(0.25, 0, 0.1, 1); --ease-in-1: cubic-bezier(0.25, 0, 1, 1); --ease-in-2: cubic-bezier(0.5, 0, 1, 1); --ease-in-3: cubic-bezier(0.7, 0, 1, 1); --ease-in-4: cubic-bezier(0.9, 0, 1, 1); --ease-in-5: cubic-bezier(1, 0, 1, 1); --ease-out-1: cubic-bezier(0, 0, 0.75, 1); --ease-out-2: cubic-bezier(0, 0, 0.5, 1); --ease-out-3: cubic-bezier(0, 0, 0.3, 1); --ease-out-4: cubic-bezier(0, 0, 0.1, 1); --ease-out-5: cubic-bezier(0, 0, 0, 1); --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1); --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1); --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1); --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1); --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1); --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5); --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5); --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5); --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5); --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5); --animation-fade-in: fade-in 0.5s var(--ease-3); --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); --animation-fade-out: fade-out 0.5s var(--ease-3); --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); --animation-scale-up: scale-up 0.5s var(--ease-3); --animation-scale-down: scale-down 0.5s var(--ease-3); --animation-slide-out-up: slide-out-up 0.5s var(--ease-3); --animation-slide-out-down: slide-out-down 0.5s var(--ease-3); --animation-slide-out-right: slide-out-right 0.5s var(--ease-3); --animation-slide-out-left: slide-out-left 0.5s var(--ease-3); --animation-slide-in-up: slide-in-up 0.5s var(--ease-3); --animation-slide-in-down: slide-in-down 0.5s var(--ease-3); --animation-slide-in-right: slide-in-right 0.5s var(--ease-3); --animation-slide-in-left: slide-in-left 0.5s var(--ease-3); --animation-shake-x: shake-x 0.75s var(--ease-out-5); --animation-shake-y: shake-y 0.75s var(--ease-out-5); --animation-shake-z: shake-z 1s var(--ease-in-out-3); --animation-spin: spin 2s linear infinite; --animation-ping: ping 5s var(--ease-out-3) infinite; --animation-blink: blink 1s var(--ease-out-3) infinite; --animation-float: float 3s var(--ease-in-out-3) infinite; --animation-bounce: bounce 2s var(--ease-elastic-in-out-2) infinite; --animation-pulse: pulse 2s var(--ease-out-3) infinite; } @media (min-width: 48em) { :root { --font-size-lg-x2: 175%; --font-size-lg-x3: 200%; --font-size-lg-x4: 225%; --font-size-lg-x5: 250%; } } @keyframes fade-in { to { opacity: 1; } } @keyframes fade-in-bloom { 0% { opacity: 0; filter: brightness(1) blur(20px); } 10% { opacity: 1; filter: brightness(2) blur(10px); } 100% { opacity: 1; filter: brightness(1) blur(0); } } @keyframes fade-out { to { opacity: 0; } } @keyframes fade-out-bloom { 100% { opacity: 0; filter: brightness(1) blur(20px); } 10% { opacity: 1; filter: brightness(2) blur(10px); } 0% { opacity: 1; filter: brightness(1) blur(0); } } @keyframes scale-up { to { transform: scale(1.25); } } @keyframes scale-down { to { transform: scale(0.75); } } @keyframes slide-out-up { to { transform: translateY(-100%); } } @keyframes slide-out-down { to { transform: translateY(100%); } } @keyframes slide-out-right { to { transform: translateX(100%); } } @keyframes slide-out-left { to { transform: translateX(-100%); } } @keyframes slide-in-up { from { transform: translateY(100%); } } @keyframes slide-in-down { from { transform: translateY(-100%); } } @keyframes slide-in-right { from { transform: translateX(-100%); } } @keyframes slide-in-left { from { transform: translateX(100%); } } @keyframes shake-x { 0%, 100% { transform: translateX(0%); } 20% { transform: translateX(-5%); } 40% { transform: translateX(5%); } 60% { transform: translateX(-5%); } 80% { transform: translateX(5%); } } @keyframes shake-y { 0%, 100% { transform: translateY(0%); } 20% { transform: translateY(-5%); } 40% { transform: translateY(5%); } 60% { transform: translateY(-5%); } 80% { transform: translateY(5%); } } @keyframes shake-z { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-2deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } } @keyframes spin { to { transform: rotate(1turn); } } @keyframes ping { 90%, 100% { transform: scale(2); opacity: 0; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes float { 50% { transform: translateY(-25%); } } @keyframes bounce { 25% { transform: translateY(-20%); } 40% { transform: translateY(-3%); } 0%, 60%, 100% { transform: translateY(0); } } @keyframes pulse { 50% { transform: scale(0.9, 0.9); } } } @layer base { html { font-size: 16px; } body { background-color: var(--default-color-bg); color: var(--default-color-text); display: flex; flex-direction: column; font-style: normal; font-family: var(--default-font-body); font-weight: var(--default-font-weight); font-size: var(--default-font-size); line-height: var(--default-line-height); position: relative; min-height: 100vh; min-height: 100dvh; } h1, h2, h3, h4, h5, h6 { font-family: var(--default-font-header); } } @layer reset { /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } html, body, div, span, applet, button, input, select, textarea, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { background: transparent; border: 0; font: inherit; font-size: 100%; margin: 0; min-width: 0; outline: 0; padding: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1; } ol, ul, menu { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role="list"], ol[role="list"] { list-style: none; } img, svg { display: block; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } video { height: auto; max-width: 100%; width: 100%; } table { border-collapse: collapse; border-spacing: 0; } /* Balance text wrapping on headings */ h1, h2, h3, h4 { text-wrap: balance; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /* Reset link */ a { color: inherit; text-decoration: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } }