/* ==========================================================================
Adriana's Traffic School - style.css
Restores legacy rendering (global.css / register.css) on pages that also
load the Tailwind v4 build (39rn-fix0gvd9_3ZeV.css).
LOAD ORDER: tailwind build -> global.css -> register.css -> style.css
WHY THIS WORKS
Every rule below is placed inside Tailwind's own `base` layer, so it:
- beats Tailwind's Preflight reset (same layer, higher specificity),
- still loses to Tailwind utilities (later layer), so the Tailwind
header/footer are untouched,
- still loses to global.css / register.css (unlayered), so every rule
you already wrote keeps winning.
`revert` hands each property back to the browser default, which is what
the legacy sheets were written against.
SCOPE
Only elements inside the legacy containers below are affected. If a legacy
page uses a wrapper not listed, add class="legacy" to it.
========================================================================== */
@layer base {
/* 1. Container text: Tailwind sets html line-height 1.5 and body color
#1e293b; legacy pages expect "normal" and black. */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) {
line-height: normal;
color: #000;
}
/* 2. Box model + borders: Preflight forces border-box and `border: 0 solid`
on everything. Legacy widths (e.g. .contact_field 250px + 5px padding)
assume content-box, and native controls/tables need their borders. */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content),
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) *,
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) *::before,
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) *::after {
box-sizing: content-box;
border-width: revert;
border-style: revert;
border-color: revert;
}
/* 3. Form controls: Preflight makes buttons/inputs transparent, borderless,
square and font-inherited. This is what turned "Continue" into plain
text. Restores the native button/field look. */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) :is(button, input, select, optgroup, textarea) {
font: revert;
letter-spacing: revert;
color: revert;
background-color: revert;
border-radius: revert;
appearance: revert;
opacity: revert;
}
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) :is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
cursor: pointer;
}
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) ::placeholder {
color: revert;
opacity: revert;
}
/* 4. Lists: Preflight removes bullets/numbers (FAQ, course_desc, errors). */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) :is(ol, ul, menu) {
list-style: revert;
}
/* 5. Headings: Preflight flattens h1-h6 to body size/weight. global.css
restyles h1-h3; this restores h4-h6 (and any heading it misses). */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) :is(h1, h2, h3, h4, h5, h6) {
font-size: revert;
font-weight: revert;
}
/* 6. Images: Preflight makes images block-level, which breaks inline
envelope/payment icons and centered logos inside text. */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) img {
display: revert;
vertical-align: revert;
}
/* 7. Tables: legacy tables (#menu_table, #crossroads) rely on cellspacing
and the default separate border model. */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) table {
border-collapse: revert;
border-color: revert;
text-indent: revert;
}
/* 8. Rules: Preflight turns
into a 1px currentColor line. */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) hr {
height: revert;
color: revert;
}
/* 9. Small text: Preflight sets 80%; browser default is "smaller". */
html :where(.legacy, #content, .content, #aff_content, .aff_content, #login_container, #registration_container, #receipt_container, #postage_container, #contact_container, #payment_container, #course_content) small {
font-size: revert;
}
}
/* ==========================================================================
PART 2 - LAYOUT FIXES + MOBILE STACKING
These rules are deliberately NOT layered: they must beat global.css,
register.css and the inline