/* ========================================================================== /shared/odoo-agency-reset.css - Atlas Agency on Odoo 19 (website "Atlas Agency") Loaded LAST in by the chrome view (build/chrome.xml), after Odoo's web.assets_frontend bundle and after the original agency CSS (/shared/atlas.css, /theme/style.css, /theme/inner-pages.css on inner pages, /assets/fonts/home-fonts.css + /theme/home-mountains.css on the homepage). Job: undo what Odoo's shared frontend bundle (Bootstrap 5 reboot + website CSS) adds on top of the agency design, so the page renders like the WordPress original. Everything is scoped under html.atlas-agency-site (set by the chrome view on this website only). Rules of three kinds: A. scroll model - Odoo makes the scroll container (html,body {height:100%} + body{overflow-x:hidden}); atlas.js listens to window scroll (progress bar, back-to-top), so the document must scroll. Skipped in edit mode (.editor_enable). B. element reboot - Bootstrap reboot/Odoo set margins, fonts, list padding, vertical-align ... on bare elements. The agency CSS relied on browser defaults there, so those properties are set back with `revert` (= browser default) at element-level specificity wrapped in :where(), so every agency class rule still wins. Only properties the agency CSS never sets on the bare element are reverted (checked against atlas.css / style.css / inner-pages.css / home-mountains.css). C. class clashes - agency class names that Bootstrap also styles (.btn, .btn-primary, .btn-lg, .card, .lead, .container, small) plus Odoo layout leftovers (#wrap .container::before, section{position:relative}, header#top z-index ...). Measured with a computed-style diff against the live site (see DESIGN.md). ========================================================================== */ /* ---------- A. scroll model: the document scrolls, not ------------- */ html.atlas-agency-site:has(> body:not(.editor_enable)), html.atlas-agency-site > body:not(.editor_enable) { height: auto; width: auto; position: static; } html.atlas-agency-site > body:not(.editor_enable) > #wrapwrap { display: block; /* Odoo: flex column (breaks margin collapsing) */ min-height: 0; overflow: visible !important; /* Odoo adds overflow-x:hidden/clip !important for animations; a clipped #wrapwrap also breaks the sticky .site-header */ } /* ---------- B. element reboot -> what the original page had --------------- */ /* B1. both page types: properties no agency stylesheet sets on the bare element */ :where(html.atlas-agency-site) body { font-weight: revert; text-align: revert; -webkit-tap-highlight-color: revert; } :where(html.atlas-agency-site) :is(h1, h2, h3, h4, h5, h6) { font-size: revert; } :where(html.atlas-agency-site) :is(ul, ol) { list-style-type: revert; } :where(html.atlas-agency-site) dt { font-weight: revert; } :where(html.atlas-agency-site) blockquote { border-left: revert; border-color: revert; font-style: revert; } :where(html.atlas-agency-site) figcaption { color: revert; } :where(html.atlas-agency-site) hr { color: revert; border: revert; border-top: revert; opacity: revert; } :where(html.atlas-agency-site) :is(b, strong) { font-weight: revert; } :where(html.atlas-agency-site) small { font-size: revert; } :where(html.atlas-agency-site) :is(sub, sup) { position: revert; font-size: revert; line-height: revert; vertical-align: revert; top: revert; bottom: revert; } :where(html.atlas-agency-site) mark { color: revert; background-color: revert; } :where(html.atlas-agency-site) abbr[title] { text-decoration: revert; cursor: revert; text-decoration-skip-ink: revert; } :where(html.atlas-agency-site) address { font-style: revert; line-height: revert; } :where(html.atlas-agency-site) :is(pre, code, kbd, samp) { font-family: revert; font-size: revert; color: revert; background-color: revert; border: revert; border-radius: revert; white-space: revert; overflow: revert; word-wrap: revert; display: revert; } :where(html.atlas-agency-site) :is(img, svg) { vertical-align: revert; } :where(html.atlas-agency-site) iframe { border: revert; } :where(html.atlas-agency-site) table { caption-side: revert; border-collapse: revert; } :where(html.atlas-agency-site) caption { color: revert; text-align: revert; } :where(html.atlas-agency-site) th { text-align: revert; } :where(html.atlas-agency-site) :is(thead, tbody, tfoot, tr, td, th) { border-color: revert; border-style: revert; border-width: revert; } :where(html.atlas-agency-site) label { display: revert; } :where(html.atlas-agency-site) :is(button, input, select, optgroup, textarea) { font-family: revert; font-size: revert; line-height: revert; } :where(html.atlas-agency-site) :is(button, select) { text-transform: revert; } :where(html.atlas-agency-site) button { border-radius: revert; } :where(html.atlas-agency-site) :is(button, [type=button], [type=reset], [type=submit]) { -webkit-appearance: revert; appearance: revert; } :where(html.atlas-agency-site) button:focus:not(:focus-visible) { outline: revert; } :where(html.atlas-agency-site) select { word-wrap: revert; } :where(html.atlas-agency-site) textarea { resize: revert; } :where(html.atlas-agency-site) fieldset { min-width: revert; border: revert; } :where(html.atlas-agency-site) legend { float: revert; width: revert; font-size: revert; line-height: revert; } :where(html.atlas-agency-site) summary { cursor: revert; } /* B2. inner pages: box model back to browser defaults (atlas.css only zeroes h1-h5 margins, which it sets itself and therefore still wins) */ :where(html.atlas-agency-inner) h6 { font-weight: revert; line-height: revert; color: revert; font-family: revert; margin-top: revert; margin-bottom: revert; } :where(html.atlas-agency-inner) :is(p, ul, ol, dl) { margin-top: revert; margin-bottom: revert; } :where(html.atlas-agency-inner) :is(ul, ol) { padding-left: revert; } :where(html.atlas-agency-inner) dd { margin-bottom: revert; margin-left: revert; } :where(html.atlas-agency-inner) :is(blockquote, hr, fieldset) { margin: revert; padding: revert; } :where(html.atlas-agency-inner) :is(pre, address) { margin-top: revert; margin-bottom: revert; padding: revert; } :where(html.atlas-agency-inner) :is(mark, kbd, legend, caption) { padding: revert; margin-bottom: revert; } :where(html.atlas-agency-inner) :is(button, input, select, optgroup, textarea) { margin: revert; } /* B3. homepage: home-mountains.css starts with `*{margin:0;padding:0}` and has no heading rules, so headings take browser weight and inherit line-height, colour and font; every Odoo element margin/padding goes back to 0 */ :where(html.atlas-agency-home) :is(h1, h2, h3, h4, h5, h6) { font-weight: revert; line-height: revert; color: revert; font-family: revert; } :where(html.atlas-agency-home) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, blockquote, figure, hr, pre, address, legend, fieldset, caption, mark, kbd, button, input, select, optgroup, textarea) { margin: 0; padding: 0; } /* Odoo: `section, section > * {position:relative}` (shape/parallax helpers) */ :where(html.atlas-agency-site) :is(section, section > *) { position: revert; } :where(html.atlas-agency-site) section { height: revert; } /* WordPress core printed these (zero-specificity) rules on every inner page; inline style="border-color:..." chips rely on them */ :where(html.atlas-agency-inner) :where([style*=border-color]) { border-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-top-color]) { border-top-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-right-color]) { border-right-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-bottom-color]) { border-bottom-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-left-color]) { border-left-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-width]) { border-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-top-width]) { border-top-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-right-width]) { border-right-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-bottom-width]) { border-bottom-style: solid; } :where(html.atlas-agency-inner) :where([style*=border-left-width]) { border-left-style: solid; } /* links: Odoo underlines every link on hover (a:hover, 0-1-1). The agency design never does, except FAQ answer links which are always underlined. */ html.atlas-agency-site a:hover { text-decoration: none; } html.atlas-agency-site .faq-a a:hover { text-decoration: underline; } /* ---------- C. class clashes and Odoo layout leftovers --------------------- */ /* header#top (Odoo z-index 1030) is the agency .site-header (z-index 50) */ html.atlas-agency-site header#top.site-header { z-index: 50; } /* Odoo: `#wrap .container::before/::after {content:""; display:table}` (clearfix). Agency containers are often grid/flex -> the pseudo elements become items. */ html.atlas-agency-site #wrap .container::before, html.atlas-agency-site #wrap .container::after { content: none; } /* Bootstrap .btn: literal props the agency .btn never sets */ :where(html.atlas-agency-site) .btn { text-align: revert; vertical-align: revert; user-select: revert; } /* Bootstrap .btn is driven by --btn-* variables (set per variant). Guaranteed- invalid (initial) makes line-height/colour fall back to inherit/unset like the original; state colours are pinned to the agency resting values so :hover/:focus-visible/:active never show Odoo's purple. The agency never sets --btn-* itself, so high specificity here is safe. */ html.atlas-agency-site .btn { --btn-line-height: initial; --btn-color: initial; --btn-bg: initial; --btn-focus-box-shadow: initial; --btn-disabled-opacity: 1; } html.atlas-agency-inner .btn-primary { --btn-hover-color: #fff; --btn-hover-bg: var(--ink); --btn-hover-border-color: transparent; --btn-active-color: #fff; --btn-active-bg: var(--ink); --btn-active-border-color: transparent; --btn-disabled-color: #fff; --btn-disabled-bg: var(--ink); --btn-disabled-border-color: transparent; } html.atlas-agency-inner .btn-ghost { --btn-hover-color: var(--ink); --btn-hover-bg: transparent; --btn-hover-border-color: var(--line-strong); --btn-active-color: var(--ink); --btn-active-bg: transparent; --btn-active-border-color: var(--line-strong); --btn-disabled-color: var(--ink); --btn-disabled-bg: transparent; --btn-disabled-border-color: var(--line-strong); } html.atlas-agency-home .btn-primary { --btn-hover-color: #fff; --btn-hover-bg: #0066cc; --btn-hover-border-color: transparent; --btn-active-color: #fff; --btn-active-bg: #0066cc; --btn-active-border-color: transparent; } html.atlas-agency-home .btn-ghost { --btn-hover-color: #0066cc; --btn-hover-bg: transparent; --btn-hover-border-color: #0066cc; --btn-active-color: #0066cc; --btn-active-bg: transparent; --btn-active-border-color: #0066cc; } /* focus: Bootstrap removes the outline (outline:0 + box-shadow); keep the browser focus ring like the original */ html.atlas-agency-site .btn:focus-visible { outline: revert; } /* Bootstrap .form-control on the Odoo contact form inputs (the original inputs had no Bootstrap class; `.field input` (0-1-1) in inner-pages.css still wins) */ :where(html.atlas-agency-site) .form-control { display: revert; width: revert; padding: revert; font-size: revert; font-weight: revert; line-height: revert; color: revert; appearance: revert; background-color: revert; background-clip: revert; border: revert; border-radius: revert; transition: revert; } :where(html.atlas-agency-site) .form-control:focus { color: revert; background-color: revert; border-color: revert; outline: revert; box-shadow: revert; } :where(html.atlas-agency-site) .form-control::placeholder { color: revert; opacity: revert; } /*