forked from izu/student-web-if-development-kit
Dodo
124 lines
2.9 KiB
CSS
124 lines
2.9 KiB
CSS
/* ===========================================
|
|
Base / Reset — scoped under .tapops-doc-root
|
|
Prevents contaminating Tailwind nav/footer.
|
|
=========================================== */
|
|
|
|
.tapops-doc-root *,
|
|
.tapops-doc-root *::before,
|
|
.tapops-doc-root *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Font is set on the root only (inherited), NOT on `*`.
|
|
A universal `.tapops-doc-root *` rule would tie Font Awesome's
|
|
`.fas` font-family in specificity and—loading later—override it,
|
|
blanking every icon. Inheritance loses to FA's explicit rule, so
|
|
icons render while normal text still gets Roboto. */
|
|
.tapops-doc-root {
|
|
font-family: 'Roboto', sans-serif;
|
|
color: var(--text-dark);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Form controls don't inherit font-family by default — opt them in.
|
|
These elements never hold Font Awesome glyphs, so this is icon-safe. */
|
|
.tapops-doc-root input,
|
|
.tapops-doc-root select,
|
|
.tapops-doc-root textarea,
|
|
.tapops-doc-root button {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.tapops-doc-root a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.tapops-doc-root img {
|
|
display: block;
|
|
}
|
|
|
|
/* --- Shared Section Styles --- */
|
|
|
|
.tapops-doc-root .section-header {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.tapops-doc-root .section-tag {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: 2px;
|
|
background-color: var(--secondary-gold);
|
|
color: var(--primary-blue);
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
text-transform: uppercase;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.tapops-doc-root .section-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: var(--primary-blue);
|
|
letter-spacing: -1px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
/* --- Shared Button Styles --- */
|
|
|
|
.tapops-doc-root .btn-join,
|
|
.tapops-doc-root .btn-outline {
|
|
padding: 17px 30px;
|
|
font-weight: 800;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 1px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tapops-doc-root .btn-join {
|
|
background-color: var(--secondary-gold);
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.tapops-doc-root .btn-outline {
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
color: white;
|
|
}
|
|
|
|
.tapops-doc-root .btn-join:hover,
|
|
.tapops-doc-root .btn-outline:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.tapops-doc-root .btn-join:hover {
|
|
background-color: #fff;
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.tapops-doc-root .btn-outline:hover {
|
|
border-color: var(--secondary-gold);
|
|
color: var(--secondary-gold);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tapops-doc-root .btn-join,
|
|
.tapops-doc-root .btn-outline {
|
|
padding: 14px 24px;
|
|
font-size: 0.82rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tapops-doc-root .btn-join,
|
|
.tapops-doc-root .btn-outline {
|
|
padding: 12px 20px;
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
}
|