/* ========================================================================== IMPORTED VERBATIM from docs/marketing/design/tokens.css @ 2fed987. Do not edit here: edit the source and rebuild with tools/build-plugin-css.py. ========================================================================== */ /* Oak Tree Dental - design tokens. Owner: Dalia (Section B). DRAFT for Mona's sign-off. Nothing here is published. This is the one source of truth. Every other design file references these properties; a literal hex or pixel value repeated anywhere else is a defect. There is no written brand guide (Mohsen, 29 Sep). Every colour below is a value already in use on the site or in oaktree-ui-standards.md, EXCEPT the ones marked PROPOSED (the button fill and its hover / active shades were chosen by Waseem on 29 Sep), which are new and go to Mona for a ruling before Michael ships them. UNITS: all lengths are px, NOT rem. This site's root font size is 15px, not the browser default 16px (found by Michael on staging, 30 Sep), so a rem token renders about 6% small: 2.75rem became 41.25px and the 44px tap-target rule failed wherever it was written in rem. px tokens are exact on any root. Contrast is computed (WCAG 2.1 relative luminance), not asserted. Ratios are quoted beside each pairing this file introduces. BREAKPOINTS cannot be custom properties (CSS does not allow var() inside @media), so they are declared here as the single reference and written as literals in the two component files, each with a comment pointing back to this list: --bp-tablet-up : 600px phone -> tablet: mobile CTA width switches, layout gains a column --bp-desktop-up: 993px Materialize's own boundary, already used by otd-frontend.css Mobile-first: base rules are the phone; min-width queries add to them. */ :root { /* ---- Colour: brand ---- */ --color-accent: #9a6c43; /* button fill. Waseem chose it 29 Sep. WHITE label 4.57:1 (AA) */ --color-accent-hover: #5c3d1e; /* primary hover: a deep brown, white label 9.81:1 (Waseem, 30 Sep: not the white swap) */ --color-accent-active: #4a3018; /* primary pressed, white label 12.16:1 */ --color-on-accent: #ffffff; /* label on the button fill */ --color-brand-tan: #bc8452; /* the original brand tan. DECORATION ONLY: never text, never a label background. White on it is 3.20:1 and fails AA (DEF-M3). */ /* ---- Colour: neutral ---- */ --color-ink: #111111; /* body and headings on white 18.88:1 */ --color-grey: #515153; /* tertiary fill; secondary label. on white 7.92:1 */ --color-grey-hover: #232325; /* grey CTA hover: near-black, white label 15.9:1; pressed uses --color-ink */ --color-card-border: #d3d3d6; /* the sidebar card's existing border */ --color-card-bg: #eaeaea; /* the sidebar card's existing body */ --color-white: #ffffff; --color-surface-hover: #dcdcdc; /* secondary (white) button on hover. grey label on it 5.78:1 */ --color-surface-disabled: #e6e6e6; --color-on-disabled: #595959; /* on --color-surface-disabled 5.61:1 */ /* ---- Colour: state ---- */ --color-error-ink: #7a1f1f; /* on --color-error-surface 9.44:1 */ --color-error-surface: #fdf3f2; /* ---- Colour: photograph scrim ---- */ /* Hero scrim, chosen 30 Sep 2026 (Waseem: "add the shadow on the entire picture"; option 2f). An even 46% black over the WHOLE lifted team photograph. It is lighter than the old 0.55 because the hero text is now all LARGE text (headline 48/32px; supporting line 24px, or 20px bold on phones), which needs 3:1, not 4.5:1. Measured on this photograph's real pixels at 1000 to 1920px wide: the darkest need is 0.416, so 0.46 has a 0.044 margin. It also passes on the original un-lifted photo (need 0.401). Do NOT use it with body-size (small, regular) text on a photograph: for that, white text needs a scrim of at least 0.575. */ --scrim: rgba(0, 0, 0, 0.46); /* ---- Focus ---- */ /* Two-tone so it holds on ANY background (white page, dark photo, tan fill): 3px ink outline, separated from the control by a 2px white gap. ink vs white 18.88:1; white gap vs a dark photo 15.91:1. */ --focus-ink: var(--color-ink); --focus-gap-colour: var(--color-white); --focus-width: 3px; --focus-offset: 2px; /* ---- Type ---- */ --font-ui: "Open Sans", sans-serif; /* the theme's own stack. Open Sans is NOT loaded on the page, so `sans-serif` decides what draws (Arial). The old `system-ui` drew Segoe UI and read heavier than the rest of the site (Michael, .0523) */ --font-display: inherit; /* the theme's own heading face; not ours to change */ /* Scale: Rocket Mortgage steps 16/24/32/48 measured on rocketmortgage.com, plus 18 and 20 for older readers. Apple measured 17/19/28/32/40/56. */ --text-14: 14px; /* 14px the reCAPTCHA notice ONLY: legal boilerplate, not content. Waseem, 30 Sep. Nothing else below 16px */ --text-16: 16px; /* 16px UI, buttons, nav, minimum anywhere */ --text-18: 18px; /* 18px body, mobile supporting line */ --text-20: 20px; /* 20px desktop supporting line */ --text-24: 24px; /* 24px tile titles */ --text-32: 32px; /* 32px mobile hero headline, section headings */ --text-40: 40px; /* 40px hero headline on large phones and tablets, 600 to 992px (Waseem: the 32px looked small at 611px) */ --text-48: 48px; /* 48px desktop hero headline */ --leading-tight: 1.17; /* 56/48, Rocket's headline ratio */ --leading-heading: 1.25; /* 40/32 */ --leading-body: 1.5; /* 24/16, 28/18 */ --weight-light: 300; --weight-regular: 400; --weight-ui: 500; --weight-heading: 600; /* ---- Spacing (4px base) ---- */ --space-1: 4px; /* 4px */ --space-2: 8px; /* 8px */ --space-3: 12px; /* 12px minimum gap between adjacent tap targets */ --space-4: 16px; /* 16px */ --space-5: 24px; /* 24px CTA horizontal padding, Rocket-measured */ --space-6: 32px; /* 32px */ --space-7: 48px; /* 48px */ --space-8: 64px; /* 64px */ --space-9: 96px; /* 96px */ /* ---- Controls ---- */ --size-tap-min: 44px; /* 44px. Nothing tappable is smaller than this */ --cta-height-compact: 44px; /* 44px. header, inline, sidebar. Apple standard = 44 */ --cta-height-hero: 56px; /* 56px. hero and end-of-page. Rocket = 56 */ --cta-pad-x: var(--space-5); --cta-mobile-width: 100%; /* Decided 29 Sep 2026: Waseem delegated to Dalia, who chose full width under 600px (Rocket measures 342 of 390). Replaces the text-based width rule in the standards file. 600px and up stays text-based. `auto` would restore text width everywhere. */ /* ---- Shape ---- */ --radius-pill: 999px; --radius-card: 12px; /* 12px */ --border-thin: 1px; --border-strong: 2px; /* ---- Motion ---- */ --duration-fast: 200ms; /* Waseem chose a softer fade, 29 Sep. Rocket measures 150ms; the old standard said 180ms */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* Rocket's curve, measured */ --duration-spin: 800ms; /* ---- Layout ---- */ --header-height-desktop: 114px; /* MUST EQUAL THE REAL BAR. Staging and live are 114px (Tarek, 30 Sep); the hero spec says 78px but the bar was never built to it. At 78 the links left an 18px dead strip above the panel. If the bar is ever rebuilt to 78px, change this ONE token. */ --logo-height-mobile: 48px; /* Waseem, 30 Sep: logo a bit bigger. Was 36px. Centred on the bar's centre line */ --header-height-mobile: 72px; /* 72px. otd-frontend.css 12.4 */ --bar-height: 68px; /* 68px = 12 + 44 + 12, plus its 1px top border. mobile Book / Call bar */ --z-scrim: 1; --z-caption: 2; --z-bar: 900; --hero-height-desktop: clamp(560px, 82svh, 760px); /* 560-760px; lets the next section show */ --hero-height-mobile: clamp(480px, 78svh, 640px); /* 480-640px */ --card-head-height: 57px; /* the sidebar card's header band, as the live form card measures it */ --card-body-min-height: 260px; /* sidebar card body under its 57px header: card is 317px tall (Waseem chose it, 30 Sep). Was 425px, the height of the six-field form it replaced */ --paths-min-height: 88px; /* 88px. each tile in the homepage paths strip */ --measure-headline: 1088px; --measure-line: 640px; --measure-hero-line: 1088px; /* desktop hero supporting line: as wide as the headline, so at 1440 it sits on ONE line (Waseem, 30 Sep: 720px looked tight) */ --gutter-phone: 20px; /* home hero on phones: headline and buttons share this side gutter (Waseem's 540px check, 30 Sep) */ } /* ========================================================================== LEGACY plugin rules (pruned): tools/css/otd-legacy.css ========================================================================== */ /* otd-legacy.css - the plugin stylesheet as of build F, PRUNED for build G (30 Sep 2026). Removed: the About-panel sections (replaced by design/menu.css) and every selector of the retired button families (.otd-hero-cta*, .otd-nav-cta-book, .otd-nav-cta, .otd-cta, .otd-cta-primary/-secondary, .otd-sidebar-cta; Mona C-d). Container rules are kept. Generated by tools/prune-legacy-css.py; do not edit by hand. */ /* ========================================================================== Oak Tree front-end redesign Spec: docs/marketing/oaktree-hero-header-spec.md SCOPING IS THE SAFETY MODEL. Every rule starts with a body class this plugin adds. Deactivate the plugin and the classes vanish, so the vendor theme renders exactly as it does today - there is no state to clean up and nothing to undo. .otd-hh everything .otd-slim-header review banner + address row removed .otd-pill site-wide button radius .otd-no-sticky sticky appointment bars Measured from the live site at 1440px and 375px on 28 Sep 2026, not matched by eye: .form-wrapper-default 330 x 491, #eaeaea, radius 2px, z-depth-1 .form-name 66px, #bc8452, Open Sans 24px/500 inner content width 294px .btn-tertiary #515153, Poppins 14px/500 header desktop banner 40 + nav 114 = 154px header mobile banner 40 + nav 64 = 104px ========================================================================== */ /* ========================================================================== 1. SLIM HEADER - three rows become one Removes the two rows above the navigation: .announcements-banner-section the review quote, 40px .top-nav-wrapper address + phone The review banner was the weakest row on the page: all caps at 13px with NEGATIVE letter spacing, 104 characters, no stars and no source. Reviews stay in the navigation and on their own page, so nothing is lost. The address is carried by the footer and by structured data; the phone is already a button in the bar. Desktop goes 154px -> 114px. NOT to the 78px in the spec: getting there means shrinking the nav's own padding, which would fight the theme's `large`/`small` scroll states. The theme already shrinks the bar to 90px past 175px of scroll, so the remaining 24px is better taken by making the resting state match the scrolled one - a separate decision, and one to make with the hero on screen. Mona flagged the review banner removal as needing her review (spec item 5). ========================================================================== */ body.otd-slim-header .announcements-banner-section, body.otd-slim-header .top-nav-wrapper { display: none !important; } /* The body carries an `announcements-banner` class that reserves room for the bar. Without this the space stays behind as a gap. */ body.otd-slim-header.announcements-banner .navbar-fixed { padding-top: 0 !important; } /* ========================================================================== 2. SINGLE HERO - carousel furniture The slides themselves are removed in PHP, from the HTML, because they are `loading="eager"` images and hiding them in CSS would still download all four. See otd_frontend_single_hero(). What is left here is the furniture: dots, arrows and the direction nav, which have nothing to point at once there is one slide. ========================================================================== */ body.otd-hh.home .flex-control-nav, body.otd-hh.home .flex-direction-nav, body.otd-hh.home #home-slider .dots, body.otd-hh.home #home-slider .slider-nav, body.otd-hh.home #home-slider .flex-control-paging, /* The theme's own class. Measured on staging: with one slide this still rendered a single lone dot. The four guesses above were from other slider libraries; this is the one that is actually in the markup. */ body.otd-hh.home #home-slider .indicators { display: none !important; } /* THE SLIDE MUST BE FORCED VISIBLE. This is the bug that washed the hero out. ------------------------------------------------------------------------ The theme drives its slider with Velocity and CROSS-FADES: it animates the current slide's opacity to 0 while animating the next one's up to 1. With four slides that is invisible, because there is always a successor. With one slide there is no successor. The slide fades itself out and nothing fades in, so it settles at `opacity: 0` and stays there - measured on staging as `class="bg-secondary slide-1 active velocity-animating"` with opacity 0. The photograph was still loading and still painting, just at zero opacity, which is why the hero looked washed out rather than blank: what remained visible was the pale `bg-secondary` panel behind it. `!important` beats the inline style Velocity writes, which is the only thing that works here - Velocity sets `style="opacity: 0"` directly on the element, and a normal rule loses to an inline style. Only applies on the homepage, and only while the single-hero feature is on. Turn OTD_FRONTEND_SINGLE_HERO off and the carousel and its cross-fade return intact. */ body.otd-hh.home #home-slider .slides > li { opacity: 1 !important; } /* ========================================================================== 1b. STEADY NAV - stop the bar and logo resizing on scroll "The nav size changes when you scroll and logo shrinks." - Waseem, 28 Sep. The theme's scripts.js swaps the class past 175px of scroll: if ($(document).scrollTop() > 175) { $("nav").removeClass("large").addClass("small"); } Measured, both states: nav.large nav.small nav height 114px 90px (desktop; equal at tablet width) logo shown white, 60px tall dark, different dimensions bar background transparent #ffffff WHAT IS LOCKED: height and logo size. Both states are pinned to the LARGE geometry, so nothing shrinks. Large rather than small because the complaint was about shrinking - this keeps the bar at the size it already is when the page loads, and nothing gets smaller than what you see at the top. WHAT IS DELIBERATELY NOT LOCKED: the background colour and the logo swap. Those are not decoration. On the homepage the bar is transparent over the hero photograph and uses the WHITE logo; once scrolled it is a white bar and uses the DARK one. Freeze either and one of the two becomes invisible - a white logo on a white bar, or a dark logo on a dark photograph. The swap is what keeps the logo legible in both places, so it stays. The result: the bar no longer changes SIZE, only colour, which is the part that has to change. ========================================================================== */ body.otd-steady-nav .navbar-fixed nav.large, body.otd-steady-nav .navbar-fixed nav.small, body.otd-steady-nav .navbar-fixed nav.large .nav-wrapper, body.otd-steady-nav .navbar-fixed nav.small .nav-wrapper { height: 114px !important; min-height: 114px !important; transition: background-color .25s ease !important; } /* Both logo variants to one size, so swapping between them is invisible in geometry. width:auto keeps the 500x420 source in proportion rather than stretching it to whatever box the theme had in mind for that state. */ body.otd-steady-nav .nav-logo img { height: 60px !important; width: auto !important; max-width: none !important; transition: none !important; } body.otd-steady-nav .nav-logo { display: flex !important; align-items: center !important; height: 114px !important; } /* ========================================================================== 2b. HOMEPAGE HERO - form removed, content centred, two CTAs CORRECTION, 28 Sep. "We will leave the contact form as is" meant the CONTACT US PAGE form, not the homepage hero form. I read it as the hero and spent the day protecting the wrong one, which is why the centred hero in the approved mockup was never built. The Contact Us page is, and always was, excluded separately. The theme reserves the right-hand third for the form: #home-slider.slider .caption { padding-right: calc(330px + 2%) } and ships a `.caption-no-cf` variant at `calc(50px + 2%)` for heroes without one. Rather than add that class - which would need the theme's own PHP - the padding is overridden directly and the content centred. KNOWN ISSUE THAT CSS CANNOT FIX: slide 1 is still `slider1.jpg`, 1835x1000, and the right 40% of that file is a FLAT PAINTED PANEL - sampled across the middle, every pixel from 62% to 97% is identical rgb(157,176,193). It was painted in as a backdrop for the form. With the form gone it is just a pale block, and it will look WORSE centred than it did with the form covering it. The clean team photograph has to be uploaded to the media library and set as slide 1. Until then this hero is half-finished by definition. ========================================================================== */ /* The form module. Its column is `.col.s4.offset-s8` inside the slider's own container; hiding the wrapper leaves the (zero-height) container harmless. */ body.otd-hh.home #home-slider .form-wrapper-variation-3, body.otd-hh.home #home-slider .form-wrapper { display: none !important; } /* Reclaim the 330px the form occupied and centre what is left. */ body.otd-hh.home #home-slider .caption, body.otd-hh.home #home-slider article[class*="caption-variation"] { padding-right: calc(50px + 2%) !important; padding-left: calc(50px + 2%) !important; text-align: center !important; } /* The aligner is `display:flex; flex-direction:column; align-items:flex-end` - a COLUMN flex that pushes its children to the right. Measured in the local harness: the button row shrink-wrapped to 385px and sat at x=869 while the headline spanned the full 1095px, which is why the CTAs looked right-aligned while the text looked centred. `text-align: center` cannot fix that. In a flex container the cross-axis position is `align-items`, and text-align only affects inline content INSIDE each child. That is the whole bug. */ body.otd-hh.home #home-slider div[class*="caption-aligner"] { text-align: center !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; } /* Slider variation 3 ships four empty divs inside the caption article - .border-top, .border-top-two, .border-right, .border-right-two - each a 2px solid #fff absolutely positioned against the caption box. Together they drew a white bracket that framed the caption beside the old right-hand contact form. The form is gone and the caption is centred, so the bracket now reads as a stray white rectangle sitting on top of the team photo. */ body.otd-hh.home #home-slider .border-top, body.otd-hh.home #home-slider .border-top-two, body.otd-hh.home #home-slider .border-right, body.otd-hh.home #home-slider .border-right-two { display: none !important; } /* The theme right-aligns the headline (`.slider .slides .slide-name{text-align:right}`). Centre it, and let both lines run full width so they stay on one line - the single-line treatment and the centred layout depend on each other. */ body.otd-hh.home #home-slider .slide-name, body.otd-hh.home #home-slider .caption-body { text-align: center !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } /* The two actions. Same geometry as the service page pair so the site has one button language: 52px tall, Poppins 15px/500, pill. */ /* Tan primary, per the agreed spec. The same dg-colors `:not()` rule that beat the service page buttons applies here, so these carry !important for the same reason. */ /* Solid white, brand grey label. Opaque rather than a ghost button: a translucent fill depends on the scrim staying dark behind it, and opaque cannot lose contrast. */ /* ========================================================================== 2c. NAV BAR - phone and Book Now, pushed right In the approved mockup and missing from every build so far. The theme's nav row is `.navigation-and-logo`; the buttons are appended there and pushed right with margin-left:auto, which is what the mockup showed. ========================================================================== */ /* `.navigation-and-logo` is display:block with a FLOATED logo, so `margin-left:auto` did nothing and the buttons dropped onto their own row underneath the menu - measured at 0,64 1009x42. That was the misalignment. The fix is to put them inside `.main-nav-wrapper` and make that a flex row, so the menu and the buttons sit on one line with the buttons at the right. The wrapper is `hide-on-med-and-down`, so this only ever applies on desktop. */ /* DESKTOP ONLY. `.main-nav-wrapper` carries Materialize's `hide-on-med-and-down`, which sets display:none at 992px and below. An unscoped `display:flex !important` beat that and resurrected the full desktop menu on phones, next to the hamburger - caught in the local harness at 375px, not on the live site. 993px is Materialize's own med-and-down boundary, so this hands control straight back to the theme below it. */ @media only screen and (min-width: 993px) { body.otd-hh .main-nav-wrapper { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 18px; } } /* The menu must NOT be allowed to shrink. As a flex item it defaults to `flex-shrink: 1`, and the harness measured it squeezed to 502px, which wrapped "Patient Education" onto a second row and made the bar 128px tall. flex:0 0 auto plus nowrap keeps the four items on one line and lets the bar stay at its locked 114px. */ body.otd-hh .main-nav-wrapper .menu-primary-navigation-container { display: flex; align-items: center; flex: 0 0 auto !important; min-width: 0; } body.otd-hh .main-nav-wrapper #menu-primary-navigation { white-space: nowrap !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } body.otd-hh .main-nav-wrapper #menu-primary-navigation > li { float: none !important; flex: 0 0 auto !important; } body.otd-hh .otd-nav-actions { flex: 0 0 auto !important; } body.otd-hh .otd-nav-actions { display: flex; align-items: center; gap: 10px; flex: none; } body.otd-hh .otd-nav-cta-phone { background: transparent !important; border-color: rgba(255, 255, 255, .8) !important; color: #fff !important; } /* On interior pages the bar is white, so a white-on-white phone button would vanish. The theme swaps `nav.large` to `nav.small` past 175px of scroll and interior pages render white from the top, so the label follows the bar. */ body.otd-hh:not(.home) .otd-nav-cta-phone, body.otd-hh nav.small .otd-nav-cta-phone { border-color: #bcbcbe !important; color: #515153 !important; } @media only screen and (max-width: 992px) { body.otd-hh .otd-nav-actions { display: none; } } /* ========================================================================== 3. SERVICE PAGE SIDEBAR - form becomes a booking CTA Scoped to `.form-wrapper-default`, which no other form on the site uses: homepage hero form .form-wrapper-variation-3 - not matched Contact Us form no .form-wrapper-default - not matched pop-up modal form .form-wrapper inside .modal - not matched Verified against all three pages in the browser. "Keep the Contact Us form, we need it" is not a thing to get wrong, so PHP excludes that page as well. ========================================================================== */ /* A thin outline around the whole card - tan header and grey body together (Waseem, 28 Sep). With the form's input boxes gone the panel lost the internal edges that gave it shape, so it read as a flat grey area rather than a card. box-sizing keeps it at exactly 330px rather than 332px, so the sidebar column does not shift. overflow:hidden keeps the tan header's square top corners inside the 2px radius instead of poking through it. */ body.otd-hh .form-wrapper-default { box-sizing: border-box; border: 1px solid #d3d3d6 !important; border-radius: 2px; overflow: hidden; } /* No-flash swap. The form is hidden ONLY when JavaScript is running - `otd-js` is set on by an inline script in the head. If scripts are blocked or fail, this never applies and the CF7 form renders and works exactly as today. The fallback for a broken enhancement is the thing it was replacing. */ html.otd-js body.otd-hh .form-wrapper-default .inner-form-wrapper:not(.otd-cta-body) { visibility: hidden; } /* 491 total - 66 header = 425. Holding the height keeps the sidebar column the same depth as before, so the template's row alignment does not move. */ body.otd-hh .form-wrapper-default .inner-form-wrapper.otd-cta-body { visibility: visible; min-height: 425px; padding: 22px 18px 20px; display: flex; flex-direction: column; justify-content: center; /* mockup option 1: optically centred */ align-items: center; gap: 14px; } /* 294px matches the form inputs exactly, so the block's internal rhythm is unchanged. 52px tall, not the theme's 36px: a 36px target is below the 44px minimum Apple and WCAG 2.2 (2.5.8) ask for, and this is the primary conversion control on every service page. */ /* WHY THESE CARRY !important, when nothing else in this file does. --------------------------------------------------------------- The vendor's dg-colors.css contains: a:not(.text-contrast):not(.btn):not(.btn-tertiary):not(.btn-transparent)… { color: inherit; background: transparent; } Every `:not(.class)` contributes class-level specificity, so that selector scores higher than `body.otd-hh .form-wrapper-default .otd-cta-primary` even though mine looks longer. Measured on staging: the rules below DID match and were still losing - the buttons rendered with no fill and black text, on a #eaeaea panel. The alternative was to add `.btn` to the CTAs so the `:not(.btn)` clause excluded them, which would work but would also pull in the theme's button sizing and give us a second set of rules to fight. Overriding three declarations is the smaller, more legible change. Keep the scope: these apply only inside `.form-wrapper-default`, never to a button anywhere else. */ /* Grey, not tan (Waseem, 28 Sep). #515153 is the theme's own .btn-tertiary - the colour the form's submit button already used - so no new colour enters the palette, and it stops the block reading tan-on-tan under the tan header. */ /* Opaque, not a ghost button: a transparent fill would depend on the #eaeaea panel staying light behind it. Hierarchy comes from colour weight, not from making the second option faint. */ /* The theme strips outlines on .btn, and these are the primary conversion controls on the page. They must not be reachable invisibly. WCAG 2.1 AA 2.4.7. */ @media only screen and (max-width: 600px) { body.otd-hh .form-wrapper-default .inner-form-wrapper.otd-cta-body { min-height: 0; padding: 20px 16px; } } /* ========================================================================== 4. SITE-WIDE BUTTON RADIUS "Go with C across the entire site, so they are consistent." - Waseem, 28 Sep. THE SITE IS NOT CONSISTENT TODAY, which is the actual problem. Measured across the homepage and a service page at 1440px, the SAME control differs by template: control service page homepage See More Reviews 30px (pill) 5px Call Us! 60px (pill) 5px CF7 submit / Get Directions 30px (pill) 5px Request Appointment 0px 0px Read More, Services - 5px Five values: 0, 5px, 30px, 50%, 60px. The homepage runs the theme's `variation-three` template, which styles buttons at 5px; interior pages use pills. 999px, not 26px: a fixed radius is a true pill at exactly one height, and these run 30px to 54px tall. FLAGGED: this changes every button on the site, which is a visible brand change. Mona signs every asset. Waseem asked for it explicitly so it is built, but it needs her eyes before production. ========================================================================== */ /* Materialize wraps submit inputs in a span that carries the visible shape, so the wrapper has to round too or square corners show through behind the input. */ /* Circular icon buttons stay circular - the accessibility toolbar and back-to-top. 999px would render them identically; listing them says they are a different control rather than an oversight. */ /* ========================================================================== 5. STICKY APPOINTMENT BARS "I noticed its sticky and I dont like it. Its too spamy." - Waseem, 28 Sep. The theme adds `.show` to these on the same `scrollTop > 175` handler that shrinks the nav, so a bar slides up the moment a visitor starts reading and follows them down the page. THERE ARE TWO OF THEM, and they must be treated differently: .sticky-footer.hide-on-small-only desktop/tablet. CTA only. Safe to remove. .sticky-footer.hide-on-med-and-up MOBILE. CTA *and* the accessibility widget. DO NOT `display: none` THE MOBILE BAR. It hosts `.awda-sticky.mobile`, the only accessibility widget present on a phone - the desktop `section.awda-sticky` is `hide-on-small-only` and is display:none there. Hiding a parent takes the whole subtree with it, and there is no CSS that hides a parent and shows a child. A blanket rule here removes contrast and font-size controls from exactly the visitors who went looking for them. The bar's own background is also LEFT ALONE. Measured: `.sticky-footer` is #ffffff with a shadow, while `.awda-sticky` is transparent - the widget borrows the bar's background, and one of its controls (`.black-text-activator`) is a WHITE circle. Strip the bar and that control becomes white-on-white. So: remove the desktop bar, and on mobile remove only the promotional CTA. What is left is a slim white strip carrying the accessibility widget, which is what the theme would render if the promo had never been added. ========================================================================== */ body.otd-no-sticky .sticky-footer.hide-on-small-only, body.otd-no-sticky .sticky-footer.hide-on-small-only.show { display: none !important; } body.otd-no-sticky .sticky-footer.hide-on-med-and-up .center-align { display: none !important; } /* ========================================================================== 6. QR CODE BLOCKS Three per service page, all generated by the vendor's service-page template, so none of them can be removed by editing a page: dental-…-qrcode.png "view this page on mobile" .col.s12.m5 beside a .m7 map-directions-qrcode "open directions on mobile" .col.s12.m3 beside a .m9 phone-number-qrcode "Call Us Today" whole section.call-out.SPCUT The sidebar section goes entirely. The other two sit in layout columns, so the JavaScript widens the surviving sibling to fill the row - otherwise you get two narrow columns and a gap where the QR used to be. See otd-frontend.js. Note one theme bug found while measuring: the third block's column is `class="col m12 m6 l3"`. `m12` and `m6` contradict each other. Harmless today, but it means that column's tablet width is whatever Materialize resolves last. ========================================================================== */ body.otd-hh.otd-no-qr section.call-out.SPCUT { display: none !important; } /* Set by JavaScript on the column that held a QR image. */ body.otd-hh .otd-qr-removed { display: none !important; } /* Set by JavaScript on the sibling that has to take the freed width. */ body.otd-hh .otd-qr-widened { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; flex: 0 0 100% !important; } /* Top-level menu items hidden by trimTopNav() to give the four-item nav. display:none, so they leave the accessibility tree and the tab order too - a keyboard user should not land on a link nobody can see. */ body.otd-hh #menu-primary-navigation > li.otd-nav-hidden { display: none !important; } /* ========================================================================== 9. HOMEPAGE CORRECTIONS - 28 Sep, against the agreed mock docs/marketing/drafts/oaktree-hero-v2.html ========================================================================== */ /* 9.1 The white rule around the hero. Slider variation 3 ships four empty divs inside the caption article which draw a thin white L around the photograph. They framed the old grey panel. Against a full-bleed photograph they read as a stray line across the image. */ body.otd-hh.home #home-slider .border-right, body.otd-hh.home #home-slider .border-right-two, body.otd-hh.home #home-slider .border-top, body.otd-hh.home #home-slider .border-top-two { display: none !important; } /* 9.2 The Welcome box sits UNDER the hero, not over it. The theme pulls it up with transform:translateY(-11vh) so it overlaps the slide. That was composed for the old image, whose lower right was empty grey. Over the team photograph it covers faces. */ body.otd-hh.home .theme-three-intro-box-container { transform: none !important; } /* 9.3 Navigation left, beside the logo. Actions right. Spec, Header: "logo left, navigation immediately beside it, phone and Book Now pushed right", and navigation is LEFT aligned, not centred, so the logo, the links and the hero headline share one vertical edge. The wrapper was justify-content:flex-end, which pushed the whole lot - menu included - to the right. flex-start seats the menu against the logo and margin-left:auto on the actions takes up the slack, which keeps them hard right however many nav items there are. */ @media only screen and (min-width: 993px) { body.otd-hh .main-nav-wrapper { justify-content: flex-start !important; } body.otd-hh .otd-nav-actions { margin-left: auto !important; } } /* 9.4 Book Now had lost its horizontal padding. .otd-nav-cta sets `padding: 0 20px` unprefixed, and a theme rule on anchors inside the nav bar outweighs it, collapsing the button onto its label. Stated with !important here because it is a conversion control and its hit area is not something to leave to specificity. Height and radius are restated so the pill keeps its shape if the theme also touches those. */ body.otd-hh .otd-nav-cta-phone{ padding: 0 22px !important; height: 42px !important; line-height: 42px !important; border-radius: 999px !important; box-sizing: border-box !important; } /* 9.5 The phone is a number, not a button. Waseem, 28 Sep. It shipped as an outlined pill matching Book Now, which gave two controls equal visual weight and made the bar read as two competing buttons. Book Now is the one action we are asking for; the number is there for people who would rather call. Stripped to a plain link - no border, no fill, no pill geometry - so the only button in the bar is the one that matters. Overrides 9.4, which sets padding, height and radius on all three CTA classes, so this block must stay AFTER it. */ body.otd-hh .otd-nav-cta-phone, body.otd-hh:not(.home) .otd-nav-cta-phone, body.otd-hh nav.small .otd-nav-cta-phone { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; height: auto !important; line-height: normal !important; } /* The label still has to hold its own against the photograph on the homepage and against white on interior pages, so only the colour follows the bar. */ body.otd-hh.home nav:not(.small) .otd-nav-cta-phone { color: #fff !important; } body.otd-hh:not(.home) .otd-nav-cta-phone, body.otd-hh nav.small .otd-nav-cta-phone { color: #515153 !important; } /* ========================================================================== 10. HERO AND HEADER, ROUND 2 - 28 Sep ========================================================================== */ /* 10.1 The menu was sitting on top of the logo. 9.3 set the wrapper to justify-content:flex-start, but `.navigation-and-logo` is display:block with a FLOATED logo, so the wrapper still began at x=0 and the first two links landed over the mark. Making the parent the flex row is the actual fix: the logo and the nav wrapper become siblings on one line, in source order, and the wrapper takes the rest of the width. Scoped to desktop - below 993px Materialize hides the wrapper and the hamburger takes over. */ @media only screen and (min-width: 993px) { body.otd-hh .navigation-and-logo { display: flex !important; align-items: center !important; gap: 30px; } /* The logo needs its width RESERVED, not merely asked for. `nav.large .nav-logo img` is position:absolute with left:3%, so .nav-logo itself measures ZERO and a flex row hands it nothing - the menu began at 30px and the first two links rendered underneath the mark. A fixed basis is what holds the space open: 3% of a 1440px bar is 43px, the mark is about 70px wide at its 45px height, so 150px clears it at every desktop width without depending on the image having loaded. */ body.otd-hh .navigation-and-logo > .nav-logo { flex: 0 0 150px !important; float: none !important; margin: 0 !important; min-width: 150px !important; } body.otd-hh .navigation-and-logo > .main-nav-wrapper { flex: 1 1 auto !important; min-width: 0; } } /* 10.2 The white rule around the hero - the REAL source. 9.1 hid the four border-* divs, which is why a line survived it. The rectangle is drawn by the caption article itself: .slider-variation-3 .caption-variation-3 { border: 2px solid #fff; ... } It framed the old grey panel. Over a full-bleed photograph it is a white box floating across the team. */ body.otd-hh.home #home-slider .caption-variation-3 { border: 0 !important; } /* 10.3 The scrim. There has never been one. Spec, Photography: "A scrim is still required. The team all wear black, so white type over the group is unreadable without one", and Hero: "Scrim - even, roughly 50% over the whole image." Even, not a gradient: the headline sits centred over the middle of the frame and a top-down gradient would leave it on the lightest part. Painted on the slide so it covers the photograph and nothing else, with the caption lifted above it. */ body.otd-hh.home #home-slider .slides > li { position: relative; } body.otd-hh.home #home-slider .slides > li::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); pointer-events: none; z-index: 1; } /* Lift the caption above the scrim with z-index ALONE. The first version of this rule also set position:relative, which overrode the theme's `position:absolute; top:16vh; left:5.5vw` and took the headline, the supporting line and both buttons off the hero entirely. z-index works on the already-positioned element; the position must not be touched. */ body.otd-hh.home #home-slider .slides > li > .caption-variation-3{ z-index: 2; } /* 10.4 The logo must not change size when the bar does. Measured on the live staging build at 1440px: nav.large White-Logo-Transparent.png 71 x 60 nav.small Logo-Transparent.png 54 x 45 so the mark visibly shrinks on scroll. The section 1 rule (`body.otd-steady-nav .nav-logo img`) already asks for 60px and wins for the white variant, but the theme's own `nav.small .nav-logo img` is more specific and takes the dark one back to 45. Stated per nav state so this outranks it in both. max-height and max-width are reset too: the theme caps the small variant at 45px, and a cap beats a height. width:auto keeps the 500x420 source in proportion. */ body.otd-hh nav.large .nav-logo img, body.otd-hh nav.small .nav-logo img, body.otd-steady-nav nav.large .nav-logo img, body.otd-steady-nav nav.small .nav-logo img { height: 60px !important; max-height: none !important; width: auto !important; max-width: none !important; } /* 10.5 ...and it must not MOVE when the bar changes state either. With the sizes equalised in 10.4 the mark still jumped on scroll. Measured at 1440px, both variants share left:43px but not their vertical placement: nav.large top: 9% -> 17px nav.small top: 38px -> 38px a 21px drop at the moment of the swap. 27px puts the 60px mark in the optical centre of the 114px bar that section 1 locks, and it is stated in pixels rather than a percentage so it cannot drift when the bar's own height is recalculated. Left is restated at the same value both already computed to, so the two variants sit in exactly one place. */ body.otd-hh nav.large .nav-logo img, body.otd-hh nav.small .nav-logo img, body.otd-steady-nav nav.large .nav-logo img, body.otd-steady-nav nav.small .nav-logo img { top: 27px !important; bottom: auto !important; left: 43px !important; transition: none !important; } /* 10.6 The hero actions are DESKTOP ONLY. The spec is explicit - "Status: design agreed, not built. Desktop only." - and on a phone the injected pair collided with the theme's own mobile CTAs. Measured at 390px: Book An Appointment (ours) y 358 - 410 Call Now (ours) y 429 - 481 (858) 748-2101 (theme) y 445 - 496 <- 36px of overlap Request Appointment (theme) y 504 - 555 Call Now sat underneath the theme's phone button, so the hero showed four stacked controls with two of them on top of each other. RESOLVED THE OTHER WAY ROUND, on Waseem's call to drop Request Appointment from mobile. Hiding ours and then removing the theme's Request Appointment would have left a phone number as the only control on a phone, with no way to book at all - so the pair that survives is OURS, and the theme's duplicates go. Mobile now carries the same two actions as desktop, in the same order and the same language: Book An Appointment straight to NexHealth, then Call Now. The theme's `.call` and `.schedule` buttons are the duplicates, so both are hidden rather than just the one, because leaving its phone button would put two call controls on the same screen. 993px is the same Materialize boundary the rest of this file uses. */ @media only screen and (max-width: 992px) { /* The theme's own hero pair. Scoped to the slider so the identical classes used further down the page are untouched. */ body.otd-hh.home #home-slider .btn.call, body.otd-hh.home #home-slider .btn.schedule { display: none !important; } } /* 10.7 The mobile hero address. It comes from the theme's own mobile contact block inside the slider - the same group as the `.call` and `.schedule` buttons 10.6 hides - not from anything this plugin adds. With those two gone the address is the last thing in the hero, so it carries the practice's location on its own and was measured at 20px/400, smaller than the supporting line above it. 24px on the street address, with the "Our Address:" label held at 20px so the two still read as label then value rather than one block of equal weight. */ @media only screen and (max-width: 992px) { body.otd-hh.home #home-slider .address, body.otd-hh.home #home-slider .client-address { font-size: 24px !important; line-height: 1.35 !important; } body.otd-hh.home #home-slider .address > .address-label, body.otd-hh.home #home-slider .address strong, body.otd-hh.home #home-slider .address b { font-size: 20px !important; } } /* ========================================================================== 11. CTA STANDARD - one button language across the site Waseem, 28 Sep: header type must match, buttons size to their text, and every CTA shares one hover behaviour. NOT YET RECONCILED against apple.com and rocketmortgage.com, which Waseem set as the reference for type and spacing. This container cannot reach either one, so the values below are chosen on their own merits and must be checked against those two before anyone calls this settled. ========================================================================== */ /* 11.1 Header type matches. Measured before this block: menu links Open Sans 16px/400, while the phone and Book Now were Poppins 13.5px/500 - visibly smaller sitting right beside them, which is exactly what Waseem saw. All three now share the menu's family and size. Book Now keeps 500 because it is the one button in the bar and weight is what separates it now that size no longer does; the phone drops to 400 because it is plain text among text links. */ body.otd-hh .otd-nav-cta-phone{ font-family: 'Open Sans', Poppins, sans-serif !important; font-size: 16px !important; letter-spacing: normal !important; } body.otd-hh .otd-nav-cta-phone { font-weight: 400 !important; } /* 11.2 Buttons are as wide as their text plus equal padding. Never stretched, never a fixed width - so "Book Now" and "Book An Appointment" carry the same breathing room rather than the same width. 24px horizontal is the single padding value for every CTA on the site. */ /* 11.3 One hover behaviour everywhere. The fill darkens and nothing moves. A transform or a size change on hover shifts the things around it and, on a control this close to the nav, makes the bar feel unstable - so the change is colour only. 180ms: fast enough to feel attached to the pointer, slow enough to read as a deliberate response rather than a flicker. Same curve on the way in and out. prefers-reduced-motion is honoured by dropping the transition, not the hover state - the button must still show it is interactive. */ /* Tan primary -> a darker tan. Same hue, ~10% down in lightness. */ /* Solid white secondary -> a light grey. Stays opaque, so it cannot lose contrast against the photograph behind it. */ /* The phone is text, so it underlines rather than filling. */ body.otd-hh .otd-nav-cta-phone:hover, body.otd-hh .otd-nav-cta-phone:focus-visible { text-decoration: underline !important; text-underline-offset: 3px !important; } /* Keyboard users get a visible ring on every CTA. The theme strips outlines on .btn and these are the site's conversion controls. */ /* 11.4 EVERY button on the site, not just the ones this plugin injects. Audited 28 Sep across the homepage, Contact Us, Reviews, Patient Information and two service pages: 45 real buttons carrying SIX different signatures. 18x Poppins 15/500 pad 0/0 0.3s theme - Get Directions, Request Appointment, Contact Us 10x Poppins 15/500 pad 24/24 0.18s our hero pair 6x Open Sans 16/500 pad 24/24 0.18s our Book Now 4x Poppins 15/500 pad 30/30 0.3s Read More, Review us on Google 1x Poppins 15/500 pad 11.25 0.2s nav dropdown Section 11.1 only ever reached the header, so this plugin was itself shipping two of those six. One language now covers all of them. HEIGHT IS DELIBERATELY NOT UNIFIED. The audit found 36px, 42px, 52px and 54px controls, and that is a real scale - an inline "Read More" should not be as heavy as a hero CTA. Family, size, weight, padding, radius and timing are what make them one family; height is what places them in it. Excludes the nav dropdown and hamburger triggers, which are menu machinery rather than calls to action and have their own geometry. */ /* The theme's own buttons get the same hover rule as ours: the fill darkens by the same amount and nothing moves. btn-tertiary is the grey secondary. */ /* 11.5 Hover, actually applied. Measured 28 controls and found FOUR behaviours where there should be one: 18x bg #515153 -> #77777a PLUS filter brightness(.92) 4x bg #bc8452 -> #a5703f (correct) 4x underline (the phone, intended) 2x NOTHING Book An Appointment and Call Now The two dead ones are the primary conversion controls on the homepage. The 11.3 rules were written as `body.otd-hh .otd-hero-cta-primary:hover`, but the base colours are set by `body.otd-hh.home #home-slider .otd-hero-cta-primary`. That selector carries an ID, so it outranks the hover rule no matter how many !importants are stacked on it, and the button simply never changed. Restated here at matching specificity. The 18 were worse than inconsistent: the theme LIGHTENS grey on hover while 11.4's brightness filter darkens whatever it is handed, so the two ran against each other on the same element. The filter is dropped - one mechanism, an explicit colour, in one direction. */ /* Hero pair - specificity matched to the base rules. */ /* Theme buttons - drop the filter, darken explicitly, and beat the theme's own lightening rule. */ /* 11.6 REGRESSION FIX for 11.4. 11.4 set `display: inline-flex !important` on every .btn. Materialize hides elements with `display: none` on its `hide-on-*` classes, and !important beat them, so every responsive-hidden button became visible in every viewport. Seen on the homepage: "Why Choose Us" ships TWO Services buttons - one `hide-on-large-only` for phones, one `col l6` for desktop - and both rendered at 1440px, the phone one floating out at the right of the content column. Materialize's own breakpoints, restated so the hide classes win again. These are its published values, not guesses: hide-on-small-only max-width 600px hide-on-med-and-down max-width 992px hide-on-med-and-up min-width 601px hide-on-large-only min-width 993px hide-on-extra-large-only min-width 1201px LESSON, same shape as 11.5: a blanket !important on `display` does not just restyle a button, it defeats every layout utility the theme uses to place it. Restrict structural properties to the elements that actually need them. */ /* A button that is also a grid column must keep the column's width. 11.4's `width: auto` collapsed `.col.l6` to its text and pulled it out of the grid. */ /* 11.7 No shadows, and one height scale. Measured on hover across the homepage - a THIRD mechanism nobody decided on, in two different recipes: Read More none -> 0 8px 17px rgba(0,0,0,.2) + 0 6px 20px rgba(0,0,0,.19) Services none -> 0 3px 3px rgba(0,0,0,.14) + two more Get Directions none -> the same three Request Appointment none -> the same three Materialize raises a z-depth on .btn:hover, and .btn-large raises a bigger one. That is a lift, which is exactly what "the fill darkens and NOTHING MOVES" rules out - and it is why a hovered Read More appeared to float off the page while its neighbours did not. Shadows off at rest and on hover, on every CTA. Colour remains the only thing that changes. HEIGHTS. 11.4 kept height as a deliberate scale, and it still is - but the measured set was 36, 42, 52 and 54, and 54 is not a step in a scale, it is .btn-large adding two pixels nobody asked for. Normalised to the three real steps: 36px inline, beside or beneath a block of text 42px header bar 52px hero, page and section CTAs .btn-large is a hero-sized control, so it joins the 52 step rather than inventing its own. */ /* ========================================================================== 12. MOBILE HERO - 29 Sep, all measured at 390px before changing anything ========================================================================== */ /* 12.1 The hamburger was BLACK on the photograph. Measured: color rgb(0,0,0), font-size 14px, sitting over the dark upper third of the hero. Invisible in practice, which is the whole navigation gone on a phone. SIZE CORRECTED 29 Sep: this first went to 30px, which rendered as three very heavy bars filling the corner. The defect was the COLOUR, not the size - 14px was small but legible once it contrasted. 24px is a standard icon size and sits inside the 56px tap target the theme already gives it. White over the hero, 30px so it is a real target rather than a 14px glyph, and a soft shadow so it survives a light patch of the photograph. Only over the hero - on interior pages the bar is white and the icon must stay dark. */ @media only screen and (max-width: 992px) { body.otd-hh.home nav:not(.small) .button-collapse, body.otd-hh.home nav:not(.small) .button-collapse i { color: #fff !important; font-size: 24px !important; line-height: 1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important; } body.otd-hh:not(.home) .button-collapse, body.otd-hh:not(.home) .button-collapse i, body.otd-hh nav.small .button-collapse, body.otd-hh nav.small .button-collapse i { color: #515153 !important; font-size: 24px !important; line-height: 1 !important; } } /* 12.2 Hero type was too small on a phone. Measured: headline 21.45px against 43.2px on desktop, supporting line 15.6px. The desktop treatment depends on each sitting on ONE line; on a phone they wrap anyway, so the reason for holding them small does not apply. 30px and 17px. The headline still wraps to three lines at 390px, which is fine - it is the single-line constraint that was desktop-only, not the size. */ @media only screen and (max-width: 992px) { body.otd-hh.home #home-slider .slide-name, body.otd-hh.home #home-slider .slide-name * { font-size: 30px !important; line-height: 1.22 !important; } body.otd-hh.home #home-slider .caption-body, body.otd-hh.home #home-slider .caption-body * { font-size: 17px !important; line-height: 1.5 !important; } } /* 12.3 The address comes out of the hero. 10.7 enlarged it; Waseem has now asked for it gone. It is the theme's own mobile contact block, and the same information is in the top bar, the footer and the JSON-LD, so nothing is lost by removing it from the hero - the hero now carries one message and two actions, as on desktop. */ @media only screen and (max-width: 992px) { body.otd-hh.home #home-slider .address, body.otd-hh.home #home-slider .client-address, body.otd-hh.home #home-slider .client-phone { display: none !important; } } /* ========================================================================== 13. LANDING PAGES These ship WITHOUT or tags - a stripped noindex template - so `body.otd-hh` can never match and none of sections 11 or 12 reaches them. Measured on /lp/emergency-dentist/: Poppins 15px/500, 30px padding, 7.5px radius, 54px tall, with one control at 20px. Entirely outside the standard. Hooked off the button's own class instead of the body, since there is no body class to hook. Values identical to 11.4 so the two cannot drift. ========================================================================== */ /* 13.1 Beating the landing page's own inline