fix: merge conflicts
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 747 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
@@ -0,0 +1,89 @@
|
||||
.experience-card {
|
||||
background: var(--main);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
margin: 0 0 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.experience-card:hover {
|
||||
border-color: var(--border-hover);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.experience-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #64748b;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.experience-avatar-inner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.experience-skills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.skill-chip {
|
||||
/* width: 24px; */
|
||||
padding: 2px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border: 1px solid var(--border);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skill-chip:hover {
|
||||
transform: scale(1.1);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.experience-item {
|
||||
padding: 0 60px; /* Add padding to bring cards closer to center */
|
||||
}
|
||||
|
||||
.experience-card-container {
|
||||
width: calc(
|
||||
50% - 30px
|
||||
) !important; /* Reduce width to bring closer to center */
|
||||
}
|
||||
|
||||
.timeline-spacer {
|
||||
flex: 0 0 20% !important; /* Reduce spacer size from 50% to 20% */
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
}
|
||||
@@ -31,11 +31,11 @@
|
||||
--code-operator-light: #016464;
|
||||
--link-dark: #2563eb;
|
||||
--link-light: #3b82f6;
|
||||
--dark-0-60: rgba(0, 0, 0, .6);
|
||||
--light-0-60: rgba(255, 255, 255, .6);
|
||||
--dark-0-60: rgba(0, 0, 0, 0.6);
|
||||
--light-0-60: rgba(255, 255, 255, 0.6);
|
||||
--text-f: "Inter";
|
||||
--title-f: "Inter";
|
||||
overflow-y:scroll;
|
||||
overflow-y: scroll;
|
||||
color-scheme: light;
|
||||
--main: var(--light-0);
|
||||
--main-close: var(--light-00);
|
||||
@@ -62,12 +62,16 @@
|
||||
--code-function: var(--code-function-light);
|
||||
--code-constant: var(--code-constant-light);
|
||||
--code-operator: var(--code-operator-light);
|
||||
--link: var(--link-dark)
|
||||
--link: var(--link-dark);
|
||||
}
|
||||
|
||||
.content .mb6t29 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
}
|
||||
.card.d1441skb {
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
var(--main) 0%,
|
||||
var(--main) 60%,
|
||||
var(--main-60) 100%
|
||||
),
|
||||
no-repeat right 40% / 40% var(--bg-img);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@media (min-width: 640px) {
|
||||
/* @media (min-width: 640px) {
|
||||
.container {
|
||||
max-width:640px
|
||||
}
|
||||
@@ -26,8 +26,12 @@
|
||||
.container {
|
||||
max-width:1536px
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
}
|
||||
/*
|
||||
=======
|
||||
} */
|
||||
>>>>>>> 6ac0b89 (feature: initial portfolio template)
|
||||
/*
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:grid-cols-2 {
|
||||
@@ -218,4 +222,4 @@
|
||||
.lg\:text-\[4em\] {
|
||||
font-size:4em
|
||||
}
|
||||
} */
|
||||
} */
|
||||
|
||||
@@ -10,7 +10,11 @@
|
||||
z-index: 10;
|
||||
padding: 0 10px;
|
||||
height: 50px;
|
||||
background-color:var(--main)
|
||||
background-color: var(--main);
|
||||
}
|
||||
|
||||
.nav-menu .jdc7ud:hover {
|
||||
background-color: var(--main-hover);
|
||||
}
|
||||
|
||||
.nav-menu-item .jdc7ud {
|
||||
@@ -24,12 +28,12 @@
|
||||
}
|
||||
|
||||
.nav-menu-item-label .jdc7ud {
|
||||
margin-left:10px
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.nav-menu-item .jdc7ud:hover {
|
||||
/* .nav-menu-item .jdc7ud:hover {
|
||||
background-color:var(--main-hover)
|
||||
}
|
||||
} */
|
||||
|
||||
.nav-menu-mobile .jdc7ud {
|
||||
z-index: -1;
|
||||
@@ -41,52 +45,261 @@
|
||||
top: 51px;
|
||||
transform: translateY(-100vh);
|
||||
transition-property: transform opacity;
|
||||
transition: .4s ease;
|
||||
opacity:0
|
||||
transition: 0.4s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-menu-mobile-open .jdc7ud {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
.nav-bar-mobile-btn {
|
||||
width: 36px;
|
||||
height:36px
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.nav-bar-mobile-btn:before, .nav-bar-mobile-btn:after {
|
||||
.nav-bar-mobile-btn:before,
|
||||
.nav-bar-mobile-btn:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 20px;
|
||||
background-color: var(--secondary-text);
|
||||
transition:transform .2s ease
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-bar-mobile-btn:hover:before, .nav-bar-mobile-btn:hover:after {
|
||||
background-color:auto
|
||||
.nav-bar-mobile-btn:hover:before,
|
||||
.nav-bar-mobile-btn:hover:after {
|
||||
background-color: auto;
|
||||
}
|
||||
|
||||
.nav-bar-mobile-btn:before {
|
||||
transform:translateY(-5px) rotate(0)
|
||||
transform: translateY(-5px) rotate(0);
|
||||
}
|
||||
|
||||
.nav-bar-mobile-btn:after {
|
||||
transform:translateY(4px) rotate(0)
|
||||
transform: translateY(4px) rotate(0);
|
||||
}
|
||||
|
||||
.nav-bar-mobile-btn-expanded:before {
|
||||
transform:translateY(2px) rotate(45deg)
|
||||
transform: translateY(2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.nav-bar-mobile-btn-expanded:after {
|
||||
transform:translateY(0) rotate(-45deg)
|
||||
transform: translateY(0) rotate(-45deg);
|
||||
}
|
||||
|
||||
@media (max-width: 950px) {
|
||||
.nav-menu-item-label .jdc7ud {
|
||||
display:none
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropdown Menu Styles */
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Bottom Sheet Menu Styles */
|
||||
.quick-menu-button {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 106;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to right, #60a5fa, #2563eb);
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 1.75rem;
|
||||
box-shadow:
|
||||
0 10px 25px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.quick-menu-button:hover {
|
||||
box-shadow:
|
||||
0 20px 35px -10px rgba(0, 0, 0, 0.2),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
.quick-menu-hamburger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
.quick-menu-hamburger-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: white;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 4px 0 white,
|
||||
0 -4px 0 white;
|
||||
}
|
||||
|
||||
.bottom-sheet-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 100;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.bottom-sheet-menu {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-top-left-radius: 1.25rem;
|
||||
border-top-right-radius: 1.25rem;
|
||||
box-shadow: 0px -9px 50px -30px black;
|
||||
z-index: 105;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-family:
|
||||
"Montserrat",
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.bottom-sheet-menu.hidden {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.bottom-sheet-menu.visible {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.menu-handle::after {
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 0.625rem;
|
||||
background: #1f2937;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.menu-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: #4b5563;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.menu-close-icon {
|
||||
width: 1rem;
|
||||
height: 2px;
|
||||
background: white;
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.menu-close-icon::before {
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 1rem;
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.menu-links {
|
||||
display: flex;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: bold;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.75rem 0.5rem;
|
||||
color: #1f2937;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-radius: 0.375rem;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.menu-link:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.menu-contact {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.menu-contact-item {
|
||||
flex: 1 1 33.333333%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem;
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #f3f4f6;
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.menu-contact-item:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.menu-contact-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,822 @@
|
||||
/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */
|
||||
@layer properties;
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
--spacing: 0.25rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--font-weight-extralight: 200;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-black: 900;
|
||||
--tracking-wider: 0.05em;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--default-transition-duration: 150ms;
|
||||
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid;
|
||||
}
|
||||
html, :host {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
tab-size: 4;
|
||||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
font-feature-settings: var(--default-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-font-variation-settings, normal);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
code, kbd, samp, pre {
|
||||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
||||
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
||||
font-size: 1em;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
}
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
button, input, select, optgroup, textarea, ::file-selector-button {
|
||||
font: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup {
|
||||
font-weight: bolder;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup option {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
::file-selector-button {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||
::placeholder {
|
||||
color: currentcolor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
||||
appearance: button;
|
||||
}
|
||||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.bottom-0 {
|
||||
bottom: calc(var(--spacing) * 0);
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (width >= 40rem) {
|
||||
max-width: 40rem;
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@media (width >= 64rem) {
|
||||
max-width: 64rem;
|
||||
}
|
||||
@media (width >= 80rem) {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@media (width >= 96rem) {
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.m-\[2\.5px\] {
|
||||
margin: 2.5px;
|
||||
}
|
||||
.my-\[10px\] {
|
||||
margin-block: 10px;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: calc(var(--spacing) * 5);
|
||||
}
|
||||
.mt-10 {
|
||||
margin-top: calc(var(--spacing) * 10);
|
||||
}
|
||||
.mb-7 {
|
||||
margin-bottom: calc(var(--spacing) * 7);
|
||||
}
|
||||
.ml-0 {
|
||||
margin-left: calc(var(--spacing) * 0);
|
||||
}
|
||||
.ml-2 {
|
||||
margin-left: calc(var(--spacing) * 2);
|
||||
}
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.h-\[1px\] {
|
||||
height: 1px;
|
||||
}
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.w-\[0\.5px\] {
|
||||
width: 0.5px;
|
||||
}
|
||||
.w-\[20px\] {
|
||||
width: 20px;
|
||||
}
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.gap-1 {
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-3 {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.gap-5 {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap-7 {
|
||||
gap: calc(var(--spacing) * 7);
|
||||
}
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
.self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.rounded-\[15px\] {
|
||||
border-radius: 15px;
|
||||
}
|
||||
.rounded-\[20px\] {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.rounded-lg {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-1 {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-\[1px\] {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-none {
|
||||
--tw-border-style: none;
|
||||
border-style: none;
|
||||
}
|
||||
.border-solid {
|
||||
--tw-border-style: solid;
|
||||
border-style: solid;
|
||||
}
|
||||
.border-\[var\(--border\)\] {
|
||||
border-color: var(--border);
|
||||
}
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
.bg-\[var\(--border\)\] {
|
||||
background-color: var(--border);
|
||||
}
|
||||
.bg-\[var\(--main\)\] {
|
||||
background-color: var(--main);
|
||||
}
|
||||
.bg-\[var\(--main-hover\)\] {
|
||||
background-color: var(--main-hover);
|
||||
}
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.p-5 {
|
||||
padding: calc(var(--spacing) * 5);
|
||||
}
|
||||
.p-15 {
|
||||
padding: calc(var(--spacing) * 15);
|
||||
}
|
||||
.px-2 {
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
.px-\[15px\] {
|
||||
padding-inline: 15px;
|
||||
}
|
||||
.px-\[20px\] {
|
||||
padding-inline: 20px;
|
||||
}
|
||||
.py-2 {
|
||||
padding-block: calc(var(--spacing) * 2);
|
||||
}
|
||||
.py-4 {
|
||||
padding-block: calc(var(--spacing) * 4);
|
||||
}
|
||||
.py-\[5px\] {
|
||||
padding-block: 5px;
|
||||
}
|
||||
.py-\[10px\] {
|
||||
padding-block: 10px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
.text-\[0\.9em\] {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.text-\[1\.2em\] {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.text-\[1\.15em\] {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
.font-\[var\(--title-f\)\] {
|
||||
--tw-font-weight: var(--title-f);
|
||||
font-weight: var(--title-f);
|
||||
}
|
||||
.font-black {
|
||||
--tw-font-weight: var(--font-weight-black);
|
||||
font-weight: var(--font-weight-black);
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.font-extralight {
|
||||
--tw-font-weight: var(--font-weight-extralight);
|
||||
font-weight: var(--font-weight-extralight);
|
||||
}
|
||||
.font-light {
|
||||
--tw-font-weight: var(--font-weight-light);
|
||||
font-weight: var(--font-weight-light);
|
||||
}
|
||||
.font-medium {
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.tracking-\[4px\] {
|
||||
--tw-tracking: 4px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.tracking-wider {
|
||||
--tw-tracking: var(--tracking-wider);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
}
|
||||
.text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.\!text-\[var\(--secondary-text\)\] {
|
||||
color: var(--secondary-text) !important;
|
||||
}
|
||||
.text-\[inherit\] {
|
||||
color: inherit;
|
||||
}
|
||||
.text-\[var\(--main-close\)\] {
|
||||
color: var(--main-close);
|
||||
}
|
||||
.text-\[var\(--secondary-text\)\] {
|
||||
color: var(--secondary-text);
|
||||
}
|
||||
.text-\[var\(--tertiary-text\)\] {
|
||||
color: var(--tertiary-text);
|
||||
}
|
||||
.text-\[var\(--text\)\] {
|
||||
color: var(--text);
|
||||
}
|
||||
.text-inherit {
|
||||
color: inherit;
|
||||
}
|
||||
.grayscale-65 {
|
||||
--tw-grayscale: grayscale(65%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.duration-300 {
|
||||
--tw-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.duration-\[150ms\] {
|
||||
--tw-duration: 150ms;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.hover\:z-5 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:border-\[var\(--border-hover\)\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-\[color\:var\(--main-hover\)\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--main-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-\[var\(--main-hover\)\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--main-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:grayscale-0 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-grayscale: grayscale(0%);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
}
|
||||
.sm\:flex-row {
|
||||
@media (width >= 40rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.sm\:items-center {
|
||||
@media (width >= 40rem) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.sm\:gap-5 {
|
||||
@media (width >= 40rem) {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.sm\:px-4 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:py-8 {
|
||||
@media (width >= 40rem) {
|
||||
padding-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
}
|
||||
.sm\:text-\[3em\] {
|
||||
@media (width >= 40rem) {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
.md\:ml-\[20px\] {
|
||||
@media (width >= 48rem) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.md\:flex {
|
||||
@media (width >= 48rem) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.md\:hidden {
|
||||
@media (width >= 48rem) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.md\:inline {
|
||||
@media (width >= 48rem) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.md\:flex-1 {
|
||||
@media (width >= 48rem) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-2 {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.md\:flex-col {
|
||||
@media (width >= 48rem) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.md\:flex-row {
|
||||
@media (width >= 48rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.md\:items-start {
|
||||
@media (width >= 48rem) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.md\:justify-start {
|
||||
@media (width >= 48rem) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.md\:gap-0 {
|
||||
@media (width >= 48rem) {
|
||||
gap: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.md\:gap-1 {
|
||||
@media (width >= 48rem) {
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
.md\:gap-3 {
|
||||
@media (width >= 48rem) {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.md\:px-6 {
|
||||
@media (width >= 48rem) {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.md\:py-12 {
|
||||
@media (width >= 48rem) {
|
||||
padding-block: calc(var(--spacing) * 12);
|
||||
}
|
||||
}
|
||||
.md\:text-left {
|
||||
@media (width >= 48rem) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.md\:text-\[3\.5em\] {
|
||||
@media (width >= 48rem) {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
}
|
||||
.lg\:flex {
|
||||
@media (width >= 64rem) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.lg\:inline {
|
||||
@media (width >= 64rem) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.lg\:w-auto {
|
||||
@media (width >= 64rem) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.lg\:grid-cols-3 {
|
||||
@media (width >= 64rem) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.lg\:flex-row {
|
||||
@media (width >= 64rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.lg\:items-center {
|
||||
@media (width >= 64rem) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.lg\:gap-5 {
|
||||
@media (width >= 64rem) {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.lg\:text-\[4em\] {
|
||||
@media (width >= 64rem) {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-rotate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-skew-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-tracking {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-blur {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-brightness {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-contrast {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-grayscale {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-hue-rotate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-invert {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-opacity {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-saturate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-sepia {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-drop-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-drop-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-drop-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-drop-shadow-size {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-duration {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-rotate-x: initial;
|
||||
--tw-rotate-y: initial;
|
||||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-border-style: solid;
|
||||
--tw-font-weight: initial;
|
||||
--tw-tracking: initial;
|
||||
--tw-blur: initial;
|
||||
--tw-brightness: initial;
|
||||
--tw-contrast: initial;
|
||||
--tw-grayscale: initial;
|
||||
--tw-hue-rotate: initial;
|
||||
--tw-invert: initial;
|
||||
--tw-opacity: initial;
|
||||
--tw-saturate: initial;
|
||||
--tw-sepia: initial;
|
||||
--tw-drop-shadow: initial;
|
||||
--tw-drop-shadow-color: initial;
|
||||
--tw-drop-shadow-alpha: 100%;
|
||||
--tw-drop-shadow-size: initial;
|
||||
--tw-duration: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||