|
|
body { |
|
|
padding: 2rem; |
|
|
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 16px; |
|
|
margin-top: 0; |
|
|
} |
|
|
|
|
|
p { |
|
|
color: rgb(107, 114, 128); |
|
|
font-size: 15px; |
|
|
margin-bottom: 10px; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.card { |
|
|
max-width: 620px; |
|
|
margin: 0 auto; |
|
|
padding: 16px; |
|
|
border: 1px solid lightgray; |
|
|
border-radius: 16px; |
|
|
} |
|
|
|
|
|
#mobile-menu { |
|
|
transition: all 0.3s ease; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
right: 0; |
|
|
background: white; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
z-index: 50; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
#mobile-menu:not(.hidden) { |
|
|
max-height: calc(100vh - 64px); |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
|
|
|
#mobile-menu [id$="-dropdown"] { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease; |
|
|
padding-left: 1rem; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
#mobile-menu [id$="-dropdown"]:not(.hidden) { |
|
|
max-height: 1000px; |
|
|
} |
|
|
|
|
|
|
|
|
#mobile-menu a { |
|
|
display: block; |
|
|
padding: 0.75rem 1rem; |
|
|
color: #374151; |
|
|
border-radius: 0.375rem; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
#mobile-menu a:hover { |
|
|
background-color: #f3f4f6; |
|
|
color: #1f2937; |
|
|
} |
|
|
|
|
|
|
|
|
#mobile-menu button[onclick^="toggleMobileDropdown"] { |
|
|
width: 100%; |
|
|
text-align: left; |
|
|
padding: 0.75rem 1rem; |
|
|
color: #374151; |
|
|
border-radius: 0.375rem; |
|
|
transition: background-color 0.2s; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
#mobile-menu button[onclick^="toggleMobileDropdown"]:hover { |
|
|
background-color: #f3f4f6; |
|
|
color: #1f2937; |
|
|
} |
|
|
|
|
|
|
|
|
#mobile-menu .bg-\\[\\#002060\\] { |
|
|
margin: 1rem; |
|
|
text-align: center; |
|
|
} |
|
|
.card p:last-child { |
|
|
margin-bottom: 0; |
|
|
} |
|
|
|