Created page with "→Lore buttons — match the landing page's homebtn style, adapted for Cosmos: .lore-btn, a.lore-btn, .formlink-button .lore-btn, button.lore-btn { display: inline-block; border: 3px solid #45360f; color: #45360f; background-color: transparent; border-radius: 0; padding: 15px 30px; font-size: 22px; text-transform: uppercase; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; transition: ba..." |
No edit summary |
||
| Line 6: | Line 6: | ||
button.lore-btn { | button.lore-btn { | ||
display: inline-block; | display: inline-block; | ||
box-sizing: border-box; | |||
width: 100%; | |||
border: 3px solid #45360f; | border: 3px solid #45360f; | ||
color: #45360f; | color: #45360f; | ||
background-color: transparent; | background-color: transparent; | ||
border-radius: 0; | border-radius: 0; | ||
padding: 15px | padding: 15px 20px; | ||
font-size: 22px; | font-size: 22px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
| Line 33: | Line 35: | ||
.lore-btn-wrapper { | .lore-btn-wrapper { | ||
display: inline-block; | display: inline-block; | ||
width: 260px; | |||
margin: 15px; | margin: 15px; | ||
text-align: center; | text-align: center; | ||
| Line 43: | Line 46: | ||
color: #45360f; | color: #45360f; | ||
margin-top: 8px; | margin-top: 8px; | ||
width: 100%; | |||
text-transform: none; | text-transform: none; | ||
font-weight: normal; | font-weight: normal; | ||
| Line 49: | Line 52: | ||
.lore-buttons { | .lore-buttons { | ||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
align-items: flex-start; | |||
gap: 10px; | |||
margin: 30px 0; | margin: 30px 0; | ||
} | } | ||
Latest revision as of 11:40, 12 August 2026
/* Lore buttons — match the landing page's homebtn style, adapted for Cosmos */
.lore-btn,
a.lore-btn,
.formlink-button .lore-btn,
button.lore-btn {
display: inline-block;
box-sizing: border-box;
width: 100%;
border: 3px solid #45360f;
color: #45360f;
background-color: transparent;
border-radius: 0;
padding: 15px 20px;
font-size: 22px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.lore-btn:hover,
a.lore-btn:hover,
.formlink-button .lore-btn:hover,
button.lore-btn:hover {
border: 3px solid #45360f;
background-color: #45360f;
color: #e3dac3;
text-decoration: none;
}
/* Button wrappers on the main page */
.lore-btn-wrapper {
display: inline-block;
width: 260px;
margin: 15px;
text-align: center;
vertical-align: top;
}
.lore-btn-count {
display: block;
font-size: 14px;
color: #45360f;
margin-top: 8px;
width: 100%;
text-transform: none;
font-weight: normal;
}
.lore-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 10px;
margin: 30px 0;
}
.lore-intro {
text-align: left;
margin-bottom: 20px;
}
.lore-welcome {
margin: 10px 0;
}
/* Form button (PageForms formlink) styling */
.formlink-button a,
.formlink-button button {
border: 3px solid #45360f;
color: #45360f;
background-color: transparent;
border-radius: 0;
padding: 12px 25px;
font-size: 18px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.formlink-button a:hover,
.formlink-button button:hover {
background-color: #45360f;
color: #e3dac3;
text-decoration: none;
}
