/* Theme Name: Orto Child Theme Theme URI: https://orto.ancorathemes.com/ Description: Orto is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins. Author: AncoraThemes Author URI: https://ancorathemes.com/ Version: 1.12.0+build.3-e37857d Tested up to: 6.8 Requires at least: 5.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: chiropractor, chiropractor WordPress theme, clinic, health, massage, massage wordpress theme, medical, physical therapy, physiotherapy, osteopathy, WordPress theme, rehabilitation, spa, spa wordpress theme, wellness, wellness wordpress theme Text Domain: orto Template: orto */ /* =Child-Theme customization starts here ------------------------------------------------------------ */ /* Palette ------------------------------------------------------------ The Orto skin's own scheme, used as shipped. The clinic-specific navy that sat here before has been taken back out at the client's request. The site's own tokens are aliases of the theme's rather than copies of its hex values, so a change of skin - or a colour picked in the Customizer - carries the whole site with it instead of leaving these behind. Only the handful of values the skin has no equivalent for are stated literally, and each says below where it came from. The skin, for reference: bg_color #F8F8F7 warm white, the light bands bg_color_2 #F6F2EE warm cream, chips and form fields bd_color #E9E2DB hairlines title #3E4939 olive text #7E847B meta #ABAFA9 link/hover #8BAE7E / #7BA16E sage alt_bg_color #161716 near-black, the dark bands alt_bd_color #2D2B28 alt_title #FFFEFE alt_text #B8BCC4 alt_meta #A2A6AF NOTE ON THE PARENT'S SELECTOR. The skin sets these on `.scheme_default, body.scheme_default`, and `body.scheme_default` (0,1,1) outranks a bare `:root` (0,1,0). Anything added here has to match that selector to win, which is why the block below is written the way it is even though it no longer overrides any --theme-color-* at all. ------------------------------------------------------------ */ :root, .scheme_default, body.scheme_default { /* The two grounds the page alternates between. */ --djo-paper: var(--theme-color-bg_color, #F8F8F7); --djo-ink: var(--theme-color-alt_bg_color, #161716); /* * One step deeper than the skin's dark, for the footer. Stated literally * because the skin has only one dark and the page needs somewhere to * settle at the very bottom. */ --djo-ink-deep: #0D0D0C; /* The skin's sage, and two derived from it. */ --djo-green: var(--theme-color-link, #8BAE7E); --djo-green-deep: var(--theme-color-hover, #7BA16E); /* * The call-to-action band's ground. The skin's sage is too light to carry * white text - #8BAE7E against white is 2.5:1, nowhere near the 4.5:1 body * copy needs - so the band takes the same hue about forty per cent darker, * which clears 6:1. It is still unmistakably the brand green; it is simply * dark enough to be read off. */ --djo-accent: #4C6A44; /* * Sage on near-black is legible but flat. This is the same hue lifted, for * the accents that sit ON the dark bands - ticks, figures, the surgeon's * credentials. */ --djo-green-pale: #B4CDA8; /* Not a brand colour and deliberately not derived from one: this is the red-flag note on the symptoms section, and a warning that harmonises with the page is a warning nobody reads. */ --djo-red: #C8202B; /* Surfaces that lift off their ground - icon chips, form fields, the hours card. The skin's own second background. */ --djo-chip: var(--theme-color-bg_color_2, #F6F2EE); --djo-rule: var(--theme-color-bd_color, #E9E2DB); --djo-rule-dark: var(--theme-color-alt_bd_color, #2D2B28); --djo-card-dark: rgba(255, 255, 255, 0.05); --djo-radius: 14px; --djo-radius-sm: 10px; /* Shadows tinted with the skin's olive rather than neutral black, so they sit in the warm palette instead of greying it. */ --djo-shadow: 0 4px 20px rgba(62, 73, 57, 0.09); --djo-shadow-lift: 0 16px 38px rgba(62, 73, 57, 0.16); } /* Box model ------------------------------------------------------------ The Orto parent theme does not set a global border-box, so an element sized with `height: 100%` and given padding overflows its own box by the padding. That is what was wrong with the Speciality and Services grids. Both cards carry `height: 100%` so the row comes out level, and both carry about 32px of vertical padding - so each card rendered 65px taller than the grid cell holding it, swallowed the 23px gap, and overlapped the row beneath by 42px. The rows appeared welded together with a doubled border between them. Fixed here rather than by adding `box-sizing` to the two cards that showed it: every component in this stylesheet is named djo_*, any of them can be given a height and a padding tomorrow, and this makes all of them behave the way the rest of the web already does. The attribute selectors match both a lone class and one in a list. Scoped to djo_* on purpose - a blanket `*, *::before, *::after` reset would also re-measure every element the parent theme ships, and a theme this large has components that were built expecting content-box. ------------------------------------------------------------ */ [class^="djo_"], [class*=" djo_"] { box-sizing: border-box; } /* Motion ------------------------------------------------------------ Every hover on the site is built from the same four moves, so that a page full of interactions still reads as one object rather than a shelf of different widgets: LIFT the thing rises a little and its shadow deepens - used for anything card-shaped, which is the gesture people already read as "this is a surface you can pick up". TILT an icon rotates a few degrees and grows slightly. Never a spin: a full rotation is a loading spinner, and at 40px a 360 read as a glitch. Between 6 and 10 degrees is enough to say "alive". WIPE a rule or a bar grows from one edge, scaled on a single axis from a transform-origin - underlines, accent bars, the sheen on a button. Transform only, so it never triggers layout. NUDGE the whole row slides a few pixels towards where the link goes. Directional: right for a forward link, up for a jump to a section. Two easings and nothing else. --djo-ease settles; --djo-spring overshoots by a hair and comes back, and is kept for the things that should feel physical (icons, the numerals in the symptoms list). Everything here is transform and opacity. Nothing animates a property that costs layout, so nothing here can make a scroll janky. All of it is turned off under prefers-reduced-motion at the end of this file - not softened, off. Someone who has asked their operating system to stop moving things has asked once, for everything. ------------------------------------------------------------ */ :root, .scheme_default, body.scheme_default { --djo-ease: cubic-bezier(.22, .61, .36, 1); --djo-spring: cubic-bezier(.34, 1.56, .64, 1); --djo-fast: .22s; --djo-base: .32s; --djo-slow: .5s; } /* ---------- WIPE: the sheen on a solid button ---------- A band of light sweeping across the face. It lives on a pseudo-element with the button clipping it, so no extra markup and nothing to escape the pill. */ .djo_button { position: relative; overflow: hidden; isolation: isolate; } .djo_button_solid::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; z-index: -1; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-18deg); transition: left var(--djo-slow) var(--djo-ease); } .djo_button_solid:hover::before, .djo_button_solid:focus-visible::before { left: 125%; } /* On a dark band the solid button is white, so a white sheen is invisible. The light becomes a shadow instead - the same gesture, inverted. */ .djo_band_dark .djo_button_solid::before, .djo_band_deep .djo_button_solid::before, .djo_band_accent .djo_button_solid::before { background: linear-gradient(100deg, transparent, rgba(22, 23, 22, 0.16), transparent); } /* The icon inside any button leans towards where the button goes. */ .djo_button svg { transition: transform var(--djo-base) var(--djo-spring); } .djo_button:hover svg, .djo_button:focus-visible svg { transform: translateX(3px) rotate(-8deg); } /* ---------- TILT: the shared icon behaviour ---------- Applied from the component, not from here, so each one can choose its own direction - but the timing is set once so they all move at the same rate. */ .djo_icon, .djo_card_icon, .djo_service_icon, .djo_rail_icon, .djo_entry_icon, .djo_value_icon, .djo_mega_item_icon, .djo_jump_icon { transition: transform var(--djo-base) var(--djo-spring), background-color var(--djo-base) var(--djo-ease); } /* Full-width bands ------------------------------------------------------------ Every section that carries a background is one of these. The band runs the full width of the window; the container inside it holds the text to the same measure as the rest of the page. The breakout is width:100vw with matching negative side margins, rather than the theme's own .alignfull, which leaves a gutter each side - right for a map set into an article, wrong for a band meant to run into the corners of the window. ------------------------------------------------------------ */ .djo_band { position: relative; width: 100vw; max-width: 100vw; margin-right: calc(-50vw + 50%); margin-left: calc(-50vw + 50%); padding: clamp(56px, 6.5vw, 104px) 0; } /* The theme's .content_wrap takes its width from its parent, and the parent is now the whole window - so inside a band it stops constraining anything and the copy runs into the edge of the screen. Restated here against the theme's own page-width variable. */ .djo_band > .content_wrap { box-sizing: border-box; width: 100%; max-width: var(--theme-var-page_width, 1290px); margin-right: auto; margin-left: auto; padding-right: clamp(20px, 4vw, 60px); padding-left: clamp(20px, 4vw, 60px); } /* Each variant publishes its own ground as --djo-band-bg. Anything that has to paint itself out of the band it sits on - the conditions rail punches a hole in its own rule behind each dot - reads that rather than naming a colour, so flipping a band from light to dark takes those with it. */ .djo_band_light { --djo-band-bg: var(--djo-paper); background-color: var(--djo-paper); } .djo_band_dark { --djo-band-bg: var(--djo-ink); background-color: var(--djo-ink); color: rgba(255, 255, 255, 0.78); } .djo_band_deep { --djo-band-bg: var(--djo-ink-deep); background-color: var(--djo-ink-deep); color: rgba(255, 255, 255, 0.78); } /* The accent band. The call to action, and the only band on the site painted in the brand blue. Being the only one is the whole point twice over. It is what makes the closing action impossible to miss on a page of white and near-black - the eye finds the one saturated thing on the page before it reads a word of it. And because it is neither light nor dark, it sits outside the alternation entirely, so it can never be the band that breaks the rhythm no matter what precedes it. */ .djo_band_accent { --djo-band-bg: var(--djo-accent); background-color: var(--djo-accent); color: rgba(255, 255, 255, 0.88); } /* ---------- What a dark band does to everything inside it ---------- Written once, here, rather than by giving each component a dark variant of its own. Any section can be flipped by changing one class in the template and everything in it follows. */ /* * The skin ships its own scheme for dark grounds - alt_title, alt_text, * alt_meta, alt_bd_color - so a dark band adopts those rather than inventing * translucent whites. The accent band is dark enough to take the same set. * * The chip stays a translucent white: alt_bg_color is the band's own ground, * so a chip painted in it would be invisible. */ .djo_band_dark, .djo_band_deep, .djo_band_accent { --djo-rule: var(--djo-rule-dark); --theme-color-bd_color: var(--djo-rule-dark); --theme-color-title: #FFFEFE; --theme-color-text: #B8BCC4; --theme-color-meta: #A2A6AF; --djo-chip: rgba(255, 255, 255, 0.07); --djo-shadow: none; } /* The accent band's ground is a mid green, not a near-black, so its hairlines and text need to be lighter than the skin's dark-scheme values to separate from it. */ .djo_band_accent { --djo-rule: rgba(255, 255, 255, 0.24); --theme-color-bd_color: rgba(255, 255, 255, 0.24); --theme-color-text: rgba(255, 255, 255, 0.88); --theme-color-meta: rgba(255, 255, 255, 0.7); } .djo_band_dark .djo_eyebrow, .djo_band_deep .djo_eyebrow, .djo_band_accent .djo_eyebrow { color: rgba(255, 255, 255, 0.55); } .djo_band_dark .djo_head_title, .djo_band_deep .djo_head_title, .djo_band_accent .djo_head_title { color: #ffffff; } .djo_band_dark .djo_head_text, .djo_band_deep .djo_head_text, .djo_band_accent .djo_head_text { color: rgba(255, 255, 255, 0.72); } /* The supplied icons are drawn in a mid blue that all but vanishes on the dark bands. brightness(0) crushes them to black whatever colour they started, and invert(1) takes that to white - so one filter whitens the whole set without a second copy of every file. */ .djo_band_dark .djo_icon, .djo_band_deep .djo_icon, .djo_band_accent .djo_icon { filter: brightness(0) invert(1); opacity: 0.92; } /* On dark, the outline button's hairline is the only thing describing it. */ .djo_band_dark .djo_button_outline, .djo_band_deep .djo_button_outline, .djo_band_accent .djo_button_outline { border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } .djo_band_dark .djo_button_outline:hover, .djo_band_dark .djo_button_outline:focus-visible, .djo_band_deep .djo_button_outline:hover, .djo_band_deep .djo_button_outline:focus-visible, .djo_band_accent .djo_button_outline:hover, .djo_band_accent .djo_button_outline:focus-visible { border-color: #ffffff; background-color: rgba(255, 255, 255, 0.1); color: #ffffff !important; } /* Every card-shaped surface on the site, told what to be on a dark band. A white card on near-black is a headlight; a barely-lifted translucent white with a hairline reads as the same card in a different room, which is what it is. Listed rather than done with a shared class because these components were written before the bands were, and a class on each would have to be kept in step by hand in eight templates. */ .djo_band_dark .djo_card_link, .djo_band_dark .djo_service, .djo_band_dark .djo_review, .djo_band_dark .djo_value, .djo_band_dark .djo_facility, .djo_band_dark .djo_symptoms_item, .djo_band_deep .djo_card_link, .djo_band_deep .djo_service, .djo_band_deep .djo_review, .djo_band_deep .djo_value, .djo_band_deep .djo_facility, .djo_band_deep .djo_symptoms_item { border-color: var(--djo-rule-dark); background-color: var(--djo-card-dark); box-shadow: none; } .djo_band_dark .djo_card_link:hover, .djo_band_dark .djo_service:hover, .djo_band_dark .djo_card_link:focus-visible, .djo_band_deep .djo_card_link:hover, .djo_band_deep .djo_service:hover { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.08); box-shadow: none; } /* The icon chip inside a card on a dark band. Two translucent whites stacked - the card at 4.5% and the chip at 7% - which is enough of a step to read as a chip without either becoming a bright shape. */ .djo_band_dark .djo_card_icon, .djo_band_dark .djo_service_icon, .djo_band_deep .djo_card_icon, .djo_band_deep .djo_service_icon { background-color: rgba(255, 255, 255, 0.07); } /* Blue on near-black is two dark tones with almost nothing between them - the ticks down the Speciality page all but vanished on the dark bands - so every accent that is the brand blue on white takes its pale tint here instead. One selector list rather than a dark rule beside each component: these are all the same decision, and splitting it up is how half of them get missed the next time a band is flipped. */ .djo_band_dark .djo_split_creds, .djo_band_dark .djo_split_facts svg, .djo_band_dark .djo_service_title a:hover, .djo_band_dark .djo_trust_value, .djo_band_dark .djo_entry_tick, .djo_band_dark .djo_entry_phone svg, .djo_band_dark .djo_entry_phone:hover, .djo_band_dark .djo_symptoms_num, .djo_band_dark .djo_symptoms_phone svg, .djo_band_dark .djo_value_icon, .djo_band_dark .djo_timeline_year, .djo_band_dark .djo_conditions_copy strong, .djo_band_deep .djo_split_creds, .djo_band_deep .djo_split_facts svg, .djo_band_deep .djo_entry_tick, .djo_band_deep .djo_entry_phone svg { color: var(--djo-green-pale); } /* Same for the surfaces those accents sat on. */ .djo_band_dark .djo_value_icon, .djo_band_dark .djo_entry_icon, .djo_band_dark .djo_jump_link, .djo_band_deep .djo_entry_icon { background-color: rgba(255, 255, 255, 0.07); } .djo_band_dark .djo_jump_link { border-color: var(--djo-rule-dark); color: #ffffff; } .djo_band_dark .djo_jump_link:hover, .djo_band_dark .djo_jump_link:focus-visible { border-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.12); color: #ffffff; } /* The solid blue button has almost nothing to separate it from a near-black ground, so on dark it inverts: white ground, dark label. */ .djo_band_dark .djo_button_solid, .djo_band_deep .djo_button_solid, .djo_band_accent .djo_button_solid { background-color: #ffffff; color: var(--djo-ink); } .djo_band_dark .djo_button_solid:hover, .djo_band_dark .djo_button_solid:focus-visible, .djo_band_deep .djo_button_solid:hover, .djo_band_deep .djo_button_solid:focus-visible, .djo_band_accent .djo_button_solid:hover, .djo_band_accent .djo_button_solid:focus-visible { background-color: rgba(255, 255, 255, 0.86); color: var(--djo-ink) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); } /* Shared furniture ------------------------------------------------------------ The eyebrow, the section heading, the buttons and the star row are used by every template, so they are defined once here rather than per page. ------------------------------------------------------------ */ .djo_eyebrow { display: block; margin-bottom: 14px; color: var(--djo-green-deep); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } /* On the dark bands - the hero and the call to action - the blue eyebrow disappears into the navy behind it. */ .djo_eyebrow_light { color: rgba(255, 255, 255, 0.72); } .djo_head { margin-bottom: clamp(32px, 3.5vw, 52px); } .djo_head_center { max-width: 720px; margin-right: auto; margin-left: auto; text-align: center; } .djo_head_title { margin: 0; color: var(--theme-color-title); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; } .djo_head_text { margin: 16px 0 0; color: var(--theme-color-text); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; } /* ---------- Buttons ---------- Named rather than borrowed from the parent's .sc_button, because the parent's button styling is driven by the skin and changes shape with it. These three are the site's own and stay put. */ .djo_button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border: 1px solid transparent; border-radius: 100px; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } .djo_button svg { width: 18px; height: 18px; flex: 0 0 auto; } /* One size up, for the single action a page is actually pointing at. Nothing else on the site uses it - a page with two large buttons has none. */ .djo_button_lg { padding: 17px 34px; font-size: 16px; } .djo_button_lg svg { width: 19px; height: 19px; } .djo_button_solid { background-color: var(--djo-green-deep); color: #ffffff; } .djo_button_solid:hover, .djo_button_solid:focus-visible { transform: translateY(-3px); background-color: var(--djo-ink); color: #ffffff !important; box-shadow: 0 8px 20px rgba(62, 73, 57, 0.32); } .djo_button_outline { border-color: var(--theme-color-bd_color); background-color: transparent; color: var(--theme-color-title); } .djo_button_outline:hover, .djo_button_outline:focus-visible { border-color: var(--djo-green-deep); background-color: var(--djo-chip); color: var(--djo-green-deep) !important; } /* For use on the dark bands only - a transparent button with a white edge. */ .djo_button_ghost { border-color: rgba(255, 255, 255, 0.45); background-color: transparent; color: #ffffff; } .djo_button_ghost:hover, .djo_button_ghost:focus-visible { transform: translateY(-3px); border-color: #ffffff; background-color: rgba(255, 255, 255, 0.12); color: #ffffff !important; } /* ---------- Stars ---------- */ .djo_stars { display: inline-flex; gap: 2px; color: rgba(62, 73, 57, 0.18); } .djo_star_on { color: #E8A317; } .djo_star svg { display: block; } /* ---------- The clinical icons ---------- Bitmaps at 2x, so they hold up on a retina screen. Sized here rather than in the markup's width/height, which are only there to reserve the space. */ .djo_icon { display: block; width: 100%; height: 100%; object-fit: contain; } /* Site header: the floating stripe ------------------------------------------------------------ A rounded bar inset from the edges of the window, holding the logo, the menu and the tools - and on the home page it floats over the hero photograph rather than sitting above it. Markup: orto-child/skins/default/templates/ header-navi.php, which overrides the parent's. The logo comes from orto-child/images/logo-mark.png, fed to the theme through the 'custom_logo' theme mod (see orto_child_use_bundled_logo). The pinning is the child theme's own - the theme's fixed-header feature lives in the trx_addons plugin, which this site does not run - and is driven by js/header.js adding .djo_header_stuck to the body. The measured height of the stripe is published as --djo-header-h so the spacer below can hold its place, and so anchored headings clear it. That last part matters more here than on most sites: every item in the mega menu is an anchor into the middle of a long page. ------------------------------------------------------------ */ .top_panel_navi.djo_bar { margin: 12px clamp(10px, 1.4vw, 20px) 0; padding: 0 clamp(16px, 2vw, 30px); border-radius: var(--djo-radius); background-color: #ffffff; box-shadow: var(--djo-shadow); transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease; } .djo_bar_inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); min-height: 76px; } /* The menu takes all the room left between the logo and the tools. flex:1 rather than margin-left:auto for a specific reason: the theme's menu script measures the nav's own width and folds any items that don't fit into a "..." dropdown. Sized to its content, the nav reports barely enough room and the last items get collapsed away on a 1440px screen. Given the whole gap to measure, all five stay on the bar. */ .djo_bar_menu { flex: 1 1 auto; min-width: 0; } /* Items sit against the right-hand end of the bar. Done with text-align + inline-block rather than flex on purpose: the theme floats the top-level items, and a floated item in a flex container is taken out of the flex flow entirely - the row stays left-packed however the container is set. Clearing the float and letting them run as inline blocks puts them under the control of text-align, which the theme does not fight. */ .top_panel .djo_bar .djo_bar_menu > .sc_layouts_menu_nav { width: 100%; margin: 0; padding: 0; list-style: none; text-align: right; } .top_panel .djo_bar .djo_bar_menu > .sc_layouts_menu_nav > li { display: inline-block; float: none; text-align: left; vertical-align: middle; } .djo_bar_menu .sc_layouts_menu_nav > li > a { padding-right: clamp(8px, 0.9vw, 16px); padding-left: clamp(8px, 0.9vw, 16px); white-space: nowrap; } /* "Book Appointment" already sits in the tools as a real button, so the Contact Us item in the menu stays an ordinary link rather than becoming a second pill six pixels away from the first. The class is still applied by orto_child_mark_menu_cta() - it is what the rule below hangs on. */ .djo_bar_menu .sc_layouts_menu_nav > li.djo_menu_cta > a { font-weight: 600; } /* ---------- The logo lockup ---------- Mark plus name, from skins/default/templates/header-logo.php. The mark alone is a roundel with the clinic's name set in a ring around it - unreadable at header size - so the name is set beside it in live text instead. */ .djo_logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .djo_logo_mark { display: block; flex: 0 0 auto; width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px); border-radius: 50%; object-fit: contain; transition: width .35s ease, height .35s ease, opacity .3s ease; } .djo_logo:hover .djo_logo_mark { opacity: 0.85; } .djo_logo_text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* "Dr. Jagadale's" - the small line above the wordmark, as on the signage. */ .djo_logo_prefix { color: var(--theme-color-meta); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } /* "Orthocare & Fracture Clinic" - the wordmark. nowrap because the two-part lockup only works while each part holds its own line; left to wrap it becomes the three-line block that splitting the name was meant to avoid. */ .djo_logo_name { color: var(--theme-color-title); font-size: clamp(14px, 1.25vw, 17px); font-weight: 700; line-height: 1.2; white-space: nowrap; } /* Below the desktop breakpoint the bar holds the lockup, a call button and the burger. The tagline is the first thing to go. */ /* On a phone the bar holds the lockup, a call button and the burger, and the wordmark on one line is what has to give. The possessive goes first - it is the least of the three lines - and the name is allowed to wrap. */ @media (max-width: 767px) { .djo_logo_prefix { display: none; } .djo_logo_name { max-width: 16ch; font-size: 13px; white-space: normal; } } /* ---------- Tools: phone, book, mobile menu ---------- */ /* margin-left:auto rather than relying on the menu to push these right. The menu carries flex:1 and does the pushing on desktop, but it is display:none below the tablet breakpoint - so on a phone the call button and the burger would sit immediately after the logo with the rest of the bar empty. */ .djo_bar_tools { display: flex; align-items: center; gap: clamp(6px, 0.9vw, 14px); margin-left: auto; } /* The number is written out, not hidden behind an icon. A clinic's phone number is the single most useful thing in the header for someone in pain, and a bare handset glyph makes them tap to find out what it is. */ .djo_bar_phone { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 100px; color: var(--theme-color-title); transition: background-color .3s ease; } .djo_bar_phone:hover, .djo_bar_phone:focus-visible { background-color: var(--djo-chip); } .djo_bar_phone_icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background-color: var(--djo-chip); color: var(--djo-green-deep); transition: background-color .3s ease, color .3s ease; } .djo_bar_phone:hover .djo_bar_phone_icon { background-color: var(--djo-green-deep); color: #ffffff; } .djo_bar_phone_body { display: flex; flex-direction: column; line-height: 1.25; } .djo_bar_phone_label { color: var(--theme-color-meta); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .djo_bar_phone_number { color: var(--theme-color-title); font-size: 16px; font-weight: 700; } /* The theme's own burger, shown only once the menu itself is hidden. */ .djo_bar_burger { display: none; } /* Below the desktop breakpoint the bar has to hold a logo, a way to call and a way to open the menu, and nothing else fits. The Book button goes first - the phone is the more urgent of the two, and the mobile menu carries a Contact Us item anyway. */ @media (max-width: 1199px) { .djo_bar_cta { display: none; } } @media (max-width: 1023px) { .djo_bar_burger { display: inline-flex; } .djo_bar_phone_body { display: none; } .djo_bar_phone { padding: 0; } } /* The marker js/header.js watches to know when the page has left the top. It is 1px rather than 0 because a zero-area target is an edge case in IntersectionObserver, and the pixel is taken straight back with a negative margin so it changes no layout. */ .djo_header_sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; } /* ---------- Pinned state ---------- */ /* The stripe stays a floating pill when it pins - it is the same object, now following the reader - rather than snapping to a full-width bar, which reads as a second, different header appearing. */ .djo_header_stuck .top_panel_navi.djo_bar { position: fixed; z-index: 1000; top: 12px; right: clamp(10px, 1.4vw, 20px); left: clamp(10px, 1.4vw, 20px); margin: 0; box-shadow: 0 12px 34px rgba(62, 73, 57, 0.16); animation: djo_header_drop .4s ease both; } /* Off the home page the stripe is in the flow, so pinning it would pull the page up by its height. This holds the space it left. */ .djo_header_stuck .top_panel_default { padding-top: var(--djo-header-h, 92px); } /* On the home page it was never in the flow - it floats over the hero - so there is no gap to hold open. */ body.home.djo_header_stuck .top_panel_default { padding-top: 0; } .djo_header_stuck .djo_bar_inner { min-height: 62px; } .djo_header_stuck .djo_logo_mark { width: clamp(38px, 3.4vw, 46px); height: clamp(38px, 3.4vw, 46px); } .admin-bar.djo_header_stuck .top_panel_navi.djo_bar { top: 44px; } @media (max-width: 782px) { .admin-bar.djo_header_stuck .top_panel_navi.djo_bar { top: 58px; } } /* Comes down from above rather than fading in on the spot: the movement is what tells you the bar is now pinned rather than part of the page. */ @keyframes djo_header_drop { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Anchored headings must clear the pinned bar instead of landing underneath it. Every mega-menu item is an anchor into the middle of a long page, so this is load-bearing here rather than a nicety. */ :root { scroll-behavior: smooth; } [id] { scroll-margin-top: calc(var(--djo-header-h, 96px) + 24px); } @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } .djo_header_stuck .top_panel_navi { animation: none; } .djo_button:hover, .djo_button:focus-visible { transform: none; } } /* The mega menu ------------------------------------------------------------ Speciality and Services open a full-width panel rather than a column of links. Markup and the reasoning for where it sits in the DOM: skins/default/templates/header-navi.php. Behaviour: js/mega-menu.js. The panel is positioned against .djo_bar, which is the bar's own box - so it travels with the bar when it pins and needs no separate pinned-state rule. ------------------------------------------------------------ */ .djo_bar { position: relative; } .djo_mega { position: absolute; z-index: 999; top: calc(100% + 10px); /* Inset from the ends of the bar rather than flush with them. At full width the panel was a second header dropping out of the first; pulled in, it reads as a panel belonging to the item that opened it. */ right: 6%; left: 6%; padding: clamp(18px, 1.8vw, 26px); border-radius: var(--djo-radius); background-color: #ffffff; box-shadow: var(--djo-shadow-lift); opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; } /* [hidden] is what keeps the panel out of the accessibility tree and out of the tab order while it is closed. It needs restating because the display:flex and display:grid rules below would otherwise override the UA's [hidden] rule. */ .djo_mega[hidden] { display: none; } .djo_mega_open { opacity: 1; transform: translateY(0); } /* No CSS-only fallback here, and that is deliberate. The panel is a sibling of the menu, not a descendant of the item that opens it, so no selector can get from one to the other - which is the same DOM position that lets it span the window in the first place. What covers a visitor whose JavaScript never ran is further down: .djo_has_mega is added by the script, so without it the class is absent, the "hide the theme's dropdown" rule never matches, and the parent theme's own dropdown does the job. Plainer, never broken. */ /* A grid of destinations. Eight in both groups, so both panels are the same shape and the same height and the menu does not jump as the pointer moves between Speciality and Services. */ .djo_mega_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* One cell: icon left, name right, the whole thing a link. Sized so eight of them make two calm rows rather than a wall - the panel is a set of doors, and a door needs a handle and a name and nothing else. */ .djo_mega_item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--djo-radius-sm); color: var(--theme-color-title); text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .djo_mega_item:hover, .djo_mega_item:focus-visible { border-color: var(--djo-rule); background-color: var(--djo-chip); color: var(--djo-green-deep); } .djo_mega_item_icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 7px; border-radius: 50%; background-color: var(--djo-chip); transition: background-color .2s ease; } .djo_mega_item:hover .djo_mega_item_icon { background-color: #ffffff; } .djo_mega_item_label { font-size: 14.5px; font-weight: 600; line-height: 1.3; } .djo_mega_foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 14px 14px 2px; border-top: 1px solid var(--djo-rule); } .djo_mega_foot_text { margin: 0; color: var(--theme-color-meta); font-size: 14px; line-height: 1.5; } .djo_mega_foot_link { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--djo-green-deep); font-size: 14px; font-weight: 600; text-decoration: none; } .djo_mega_foot_link svg { width: 17px; height: 17px; transition: transform .25s ease; } .djo_mega_foot_link:hover svg { transform: translateX(4px); } /* The parent theme marks any item with children by appending a fontello caret to a::after (skins/default/css/style.css, content: '\e828'). Two things are wrong with it here. It is drawn over the last letter rather than after it - the y of Speciality and the s of Services both came out looking struck through - and it announces a dropdown that, on desktop, never opens: the mega panel opens instead. Hidden for the bar only. The mobile menu is a different template with a different container, and there the caret is a real disclosure control that still has to be there. */ .djo_bar_menu .sc_layouts_menu_nav > li.menu-item-has-children > a::after { display: none; } /* The mega panel replaces the theme's own dropdown for these two items. The sub-items are still real menu children - that is what gives the mobile menu something to expand - so the parent's dropdown has to be told to stay shut rather than opening underneath the panel. */ .djo_bar_menu .djo_has_mega > ul, .djo_bar_menu .djo_has_mega .sc_layouts_menu_nav ul { display: none !important; } /* Below the desktop breakpoint the whole bar menu is hidden and the theme's own mobile menu takes over, so the panels must never appear. */ @media (max-width: 1023px) { .djo_mega { display: none !important; } } /* Home page (front-page.php) ------------------------------------------------------------ */ /* The home page opens with a photograph that the header stripe floats over, so the header comes out of the flow and the hero starts at the very top of the window. Taking the header out of the flow rather than pulling the hero up under it with a negative margin is what keeps the stripe painting above the photograph without a z-index fight. */ body.home .top_panel { position: absolute; z-index: 20; top: 0; right: 0; left: 0; background-color: transparent; } /* The hero has to start where the window starts, so every wrapper between the body and it gives up its top padding - on this page only. */ body.home .page_content_wrap, body.home .page_content_wrap .content_wrap, body.home .page_content_wrap .content { margin-top: 0; padding-top: 0; } /* The closing call to action is a full-bleed band, so the theme's usual bottom padding only opens a gap between it and the footer. */ body.home .page_content_wrap { padding-bottom: 0; } .djo_home { padding-top: 0; } /* ---------- Hero ---------- */ /* The padding at the top clears the floating header, which is out of the flow above it and so reserves no space of its own. */ /* .djo_band_dark paints it. The padding is its own: the floating header is out of the flow above it and reserves no space, so the hero has to clear it. */ .djo_hero { padding-top: calc(var(--djo-header-h, 92px) + clamp(40px, 6vw, 96px)); padding-bottom: clamp(60px, 7vw, 110px); overflow: hidden; } .djo_hero_media { position: absolute; inset: 0; } .djo_hero_media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } /* The photograph is held to the right-hand half and the left is taken to solid navy, which is the reference design's arrangement and here it settles a specific problem: the photograph is itself an X-ray of a spine, so the spine watermark laid over it read as a printing fault rather than as a device. On clean navy it reads as what it is. Solid to 44%, then a fast fall to a light veil - so the copy sits on flat colour at guaranteed contrast, and the clinician at the right of the frame is still legible rather than greyed out. The second flat layer is what keeps the very brightest part of the lightbox from blowing out white. */ .djo_hero_media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #1F201E 0%, #1F201E 44%, rgba(31, 32, 30, 0.86) 62%, rgba(31, 32, 30, 0.55) 100%), rgba(22, 23, 22, 0.25); } .djo_hero .content_wrap { position: relative; z-index: 1; } .djo_hero_body { max-width: 720px; } .djo_hero_title { margin: 0 0 20px; color: #ffffff; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.1; } .djo_hero_text { margin: 0 0 32px; max-width: 60ch; color: rgba(255, 255, 255, 0.86); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; } .djo_hero_actions { display: flex; flex-wrap: wrap; gap: 14px; } .djo_hero_rating { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 15px; } .djo_hero_rating .djo_stars { color: rgba(255, 255, 255, 0.3); } .djo_hero_rating strong { color: #ffffff; } /* ---------- The spine watermark ---------- A lumbar vertebral column standing behind the copy on the dark bands. Taken from the reference design, where the same device carries the hero and the surgeon's band and is what keeps them from reading as flat rectangles. The artwork (images/spine-watermark.webp) was prepared from the supplied render in three steps, and each was needed: - Rotated 39 degrees anticlockwise. The source has the column running corner to corner across a landscape frame, so at any size that spanned the band it also swept diagonally across the headline. Standing it upright makes it a column that can be given its own strip. - Alpha multiplied by 3.5. It arrived at 15% alpha - a watermark built for a white page, which against near-black said nothing at all. 3.5 stops short of where the modelling flattens into a silhouette. - Its own colour left alone. The cool lavender-white sits with the palette; a recolour to flat white took the form out of it. ALIGNMENT. The column has to read as one continuous spine passing behind the band, not as a picture of a spine that starts and stops inside it. Three things do that together: - background-size: cover, with the element taller than the band at both ends, so the artwork is always cropped rather than fitted - there is no size at which its own top and bottom edges come into view. - background-position: center, so the crop takes the middle of the column and the vertebrae stay evenly spaced through the visible run. - a mask that fades the first and last eighth to nothing, so the column dissolves into the band instead of being cut off by it. That fade is what makes it read as continuing past the edge; without it the eye finds the cut and the illusion goes. A background-image on an empty element, not an : it is decoration and must not be announced. pointer-events:none because it lies over the hero photograph and would otherwise swallow clicks meant for the buttons. */ .djo_spine { position: absolute; top: -14%; bottom: -14%; z-index: 0; display: block; background-image: url("images/spine-watermark.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%); pointer-events: none; } /* On the hero it stands in the gap between the copy's measure and the photograph. The band is solid near-black to 44% and the prose is held to 60ch, so this strip is the one part of the hero with nothing else in it. */ .djo_spine_hero { left: 56%; width: 21%; opacity: 0.34; } /* The surgeon's band has no photograph competing with it, so the column stands at the right-hand edge and is the only thing in that space. Quieter than the hero: the band is taller, and the same weight of graphic reads heavier the longer it runs. */ .djo_spine_about { right: 2%; width: 16%; opacity: 0.24; } @media (max-width: 1199px) { /* The photograph's fade starts earlier as the band narrows, so the clear strip moves with it. */ .djo_spine_hero { left: 62%; width: 25%; opacity: 0.3; } } @media (max-width: 1023px) { /* The copy runs the full width from here down and there is no clear strip left. Pushed half off the right edge, where it is texture at the margin rather than a shape competing with the headline. */ .djo_spine_hero { left: auto; right: -10%; width: 32%; opacity: 0.22; } /* The split has stacked, so the prose now runs under where the column stood. */ .djo_spine_about { display: none; } } @media (max-width: 767px) { .djo_spine_hero { display: none; } } /* ---------- Trust strip ---------- Four facts on a white panel pulled up into the hero, so it straddles the join between the dark band and the light one below. The overlap is deliberate: it lifts the four things a visitor most needs to know out of the hero and sets them on the page, where they are read before anything is scrolled for. ------------------------------------------------------------ */ .djo_trust { position: relative; z-index: 2; margin-top: clamp(-70px, -5vw, -40px); } .djo_trust_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--djo-radius); /* The 1px grid gap shows through as the dividing rules - one background behind the row rather than a border on each cell, which is what keeps the rules from doubling where two cells meet. */ background-color: var(--djo-rule); box-shadow: var(--djo-shadow-lift); } .djo_trust_item { display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 28px); background-color: var(--djo-paper); text-align: center; } .djo_trust_value { color: var(--djo-green-deep); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.1; } .djo_trust_label { color: var(--theme-color-meta); font-size: 14px; line-height: 1.45; } /* ---------- Section rhythm ---------- */ /* The Speciality band opens under the trust strip, which is lifted up into the hero and leaves a shorter gap behind it than the other bands need. */ .djo_section_speciality { padding-top: clamp(40px, 4vw, 66px); } /* ---------- Speciality cards ---------- */ /* grid-auto-rows:1fr, not just stretch. Eight cards make two rows, and auto rows are sized independently - so the taller titles in the second row set a deeper row than the first and the grid stepped. One fraction each makes both rows the height of the tallest card on the page. */ .djo_cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(14px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0; } .djo_card_link { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: clamp(22px, 2.2vw, 32px) 18px; border: 1px solid var(--theme-color-bd_color); border-radius: var(--djo-radius); background-color: #ffffff; text-align: center; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .djo_card_link:hover, .djo_card_link:focus-visible { transform: translateY(-5px); border-color: transparent; box-shadow: var(--djo-shadow-lift); } .djo_card_icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background-color: var(--djo-chip); padding: 12px; } .djo_card_title { color: var(--theme-color-title); font-size: 16px; font-weight: 600; line-height: 1.35; } .djo_card_meta { color: var(--theme-color-meta); font-size: 13px; } /* ---------- Split band: image beside prose ---------- */ /* The surgeon's band. Everything that used to be reversed by hand here is now done once by .djo_band_dark - this is only what is specific to the split. */ .djo_about_band { overflow: hidden; } .djo_about_band .content_wrap { position: relative; z-index: 1; } /* The photograph is the one bright thing on a dark band, so it gets a hairline rather than a drop shadow - a shadow on near-black is invisible, and the ring is what separates the image from the ground. */ .djo_about_band .djo_split_media { border: 1px solid var(--djo-rule-dark); box-shadow: none; } /* The media column is narrower than the copy: the photograph is a portrait now, and a portrait given equal width to the prose becomes the subject of the section rather than the person the section is about. */ .djo_split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(30px, 4vw, 64px); align-items: center; } /* A 4:5 portrait frame. This band carries the surgeon's own photograph, and a person belongs in a portrait - the landscape band it used to be cut his head off at the top and filled the rest with a door. aspect-ratio rather than a fixed height: the frame then scales with the column instead of being pinned to a viewport measurement, so the photograph holds its proportions from a phone to a wide monitor. The height is still capped, because at the widest layouts a free 4:5 would run deeper than the prose beside it and unbalance the split again. */ .djo_split_media { overflow: hidden; max-height: 520px; border-radius: var(--djo-radius); box-shadow: var(--djo-shadow); } .djo_split_media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; /* Slightly above centre: his face sits in the upper half of the frame, and a centred crop takes the chin off first at narrow widths. */ object-fit: cover; object-position: center 30%; } .djo_split_title { margin: 0 0 6px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; } .djo_split_creds { margin: 0 0 22px; color: var(--djo-green-deep); font-size: 15px; font-weight: 600; } .djo_split_body p { color: var(--theme-color-text); line-height: 1.7; } .djo_split_facts { list-style: none; margin: 26px 0 0; padding: 0; } .djo_split_facts li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; color: var(--theme-color-title); font-size: 15px; line-height: 1.5; } .djo_split_facts svg { flex: 0 0 auto; margin-top: 2px; color: var(--djo-green-deep); } .djo_split_actions { margin: 28px 0 0; } /* ---------- Services grid ---------- */ .djo_services_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(16px, 1.8vw, 28px); list-style: none; margin: 0; padding: 0; } /* A flex column so the card fills the row it is given rather than sitting at its natural height inside a taller box. */ .djo_service { display: flex; flex-direction: column; height: 100%; padding: clamp(22px, 2.2vw, 30px); border: 1px solid var(--theme-color-bd_color); border-radius: var(--djo-radius); background-color: #ffffff; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .djo_service:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--djo-shadow-lift); } .djo_service_icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; padding: 9px; border-radius: var(--djo-radius-sm); background-color: var(--djo-chip); } .djo_service_title { margin: 0 0 10px; font-size: 18px; line-height: 1.3; } .djo_service_title a { color: var(--theme-color-title); text-decoration: none; } .djo_service_title a:hover { color: var(--djo-green-deep); } .djo_service_text { margin: 0; color: var(--theme-color-text); font-size: 15px; line-height: 1.6; } /* Orthopaedic conditions (front-page.php) ------------------------------------------------------------ Prose and an illustration side by side, then a full-width rail of eight conditions: icon, a dot on a rule, and a short label under it. ------------------------------------------------------------ */ .djo_conditions_intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(40px, 5vw, 72px); } .djo_conditions_title { margin: 0 0 20px; color: var(--theme-color-title); font-size: clamp(26px, 3vw, 38px); line-height: 1.18; /* The heading's own weight is light; the clause inside is what carries it. Stated here because the theme sets headings bold by default, which would flatten the contrast the two weights are there to make. */ font-weight: 400; } .djo_conditions_title strong { font-weight: 700; } .djo_conditions_copy p { margin: 0 0 16px; color: var(--theme-color-text); font-size: 15.5px; line-height: 1.7; } .djo_conditions_copy p:last-child { margin-bottom: 0; } .djo_conditions_media img { display: block; width: 100%; height: clamp(240px, 24vw, 330px); border-radius: var(--djo-radius); object-fit: cover; } /* ---------- The rail ---------- The rule is drawn once, across the whole row, rather than per item - eight separate short rules read as eight unrelated ticks, where one line with stops on it reads as a single set. It is a pseudo-element on the list so it can span the full width regardless of how the items divide it up. The rule is inset by half an item's width at each end so it starts and ends under the first and last dots rather than running past them into nothing. */ .djo_rail { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; } .djo_rail::before { content: ""; position: absolute; right: calc(100% / 16); left: calc(100% / 16); /* Lines up with the centre of the dots: icon block + the gap above them. */ top: var(--djo-rail-line, 84px); height: 1px; background-color: var(--djo-rule); } .djo_rail_item { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 6px; text-align: center; } .djo_rail_icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 62px; margin-bottom: 14px; } .djo_rail_icon .djo_icon { width: auto; max-width: 100%; height: 100%; } /* The stop on the rule. position:relative lifts it over the line drawn behind it, and the ring in the clinic's own blue is what makes it a marker rather than a bullet that happens to sit on a rule. */ .djo_rail_dot { position: relative; z-index: 1; display: block; width: 11px; height: 11px; margin-bottom: 16px; border-radius: 50%; background-color: var(--djo-green-deep); /* The ring is the band's own ground, read from --djo-band-bg: it exists to punch a hole in the rule drawn behind the dot, and a ring in any other colour shows as a halo. Reading the variable means the dot follows if the band is ever flipped from light to dark. */ box-shadow: 0 0 0 4px var(--djo-band-bg, #ffffff); } .djo_rail_label { color: var(--theme-color-title); font-size: 11.5px; font-weight: 500; line-height: 1.45; letter-spacing: 0.05em; text-transform: uppercase; /* Balanced, not ragged: these labels are two or three words and wrap to two lines, and the browser's default break leaves a single orphaned word under a full line often enough to look like a mistake. */ text-wrap: balance; } .djo_conditions_more { margin: clamp(34px, 4vw, 56px) 0 0; text-align: center; } /* Signs and symptoms (front-page.php) ------------------------------------------------------------ Photograph on one side, a numbered list of the signs on the other, and a red-flag note under it that points away from this clinic and towards a hospital. ------------------------------------------------------------ */ .djo_symptoms_layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 3.6vw, 56px); align-items: start; } /* Sticky, so the photograph stays with the list while a visitor reads down it. The offset clears the pinned header, which is the same measurement anchored headings use. */ .djo_symptoms_media { position: sticky; top: calc(var(--djo-header-h, 96px) + 24px); overflow: hidden; border-radius: var(--djo-radius); } .djo_symptoms_media img { display: block; width: 100%; height: clamp(300px, 32vw, 430px); object-fit: cover; } .djo_symptoms_list { list-style: none; margin: 0; padding: 0; counter-reset: none; } /* A neutral chip, not white: the band under these is white now, and a white row on a white ground is a row nobody can see. */ .djo_symptoms_item { display: flex; align-items: center; gap: 18px; padding: 15px 20px; border: 1px solid transparent; border-radius: var(--djo-radius-sm); background-color: var(--djo-chip); transition: transform .25s ease, border-color .25s ease; } .djo_symptoms_item + .djo_symptoms_item { margin-top: 8px; } .djo_symptoms_item:hover { transform: translateX(4px); border-color: var(--djo-rule); } /* The numeral is set in the brand blue at a size that lets the list be counted at a glance. Fixed width so the text beside it starts on one line down the column rather than stepping in at 07. */ .djo_symptoms_num { flex: 0 0 auto; width: 32px; color: var(--djo-green-deep); font-size: 17px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .djo_symptoms_text { color: var(--theme-color-title); font-size: 15.5px; line-height: 1.5; } /* The red-flag note. The clinic's red, used here and almost nowhere else - which is the point: it is the one thing on the page that is not asking for a booking, and it should not look like the rest. */ .djo_symptoms_note { display: flex; align-items: flex-start; gap: 14px; margin: 26px 0 0; padding: 18px 20px; border-left: 3px solid var(--djo-red); border-radius: var(--djo-radius-sm); background-color: #FCEDED; color: #7A1F26; font-size: 14.5px; line-height: 1.6; } .djo_symptoms_note strong { color: var(--djo-red); } .djo_symptoms_note_icon { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: var(--djo-red); } .djo_symptoms_actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 26px 0 0; } .djo_symptoms_phone { display: inline-flex; align-items: center; gap: 8px; color: var(--theme-color-title); font-size: 15px; font-weight: 600; text-decoration: none; } .djo_symptoms_phone svg { color: var(--djo-green-deep); } .djo_symptoms_phone:hover { color: var(--djo-green-deep); } /* ---------- Reviews ---------- */ /* ---------- The rolling reviews ---------- Markup: front-page.php, which prints the set twice into one track. The track is animated from 0 to -50% of its own width. At -50% the second copy is sitting exactly where the first one started, so the keyframe can snap back to 0 and nothing appears to move. No script, no measuring, and it works for any number of reviews. The band is the clipping frame, and it fades at both ends so cards enter and leave rather than being cut off by the edge of the screen. Same trick as the spine watermark: a mask, so the fade works over whatever the band's ground happens to be. */ .djo_marquee { position: relative; /* Breaks out of the container to the full window: a marquee that stops at the page measure has two hard edges in the middle of the screen, and the whole point is that the row continues past what you can see. */ width: 100vw; margin-right: calc(-50vw + 50%); margin-left: calc(-50vw + 50%); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } @keyframes djo_roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .djo_marquee_track { display: flex; width: max-content; gap: clamp(16px, 1.8vw, 28px); list-style: none; margin: 0; padding: 4px 0; animation: djo_roll 46s linear infinite; /* Its own layer, so 46 seconds of continuous movement is composited rather than repainted. */ will-change: transform; } /* Paused while anyone is reading it - by pointer or by keyboard. Text that will not hold still is text nobody can finish. */ .djo_marquee:hover .djo_marquee_track, .djo_marquee:focus-within .djo_marquee_track { animation-play-state: paused; } /* Each card is a fixed width in the track. flex:0 0 rather than a percentage, because the track is `width: max-content` and has no width for a percentage to resolve against. */ .djo_marquee .djo_review { flex: 0 0 clamp(300px, 26vw, 390px); } /* ---------- A review card ---------- A quotation mark watermark, a head row carrying the stars and where the review came from, the quotation, and an attribution on the card's bottom edge. The bottom edge matters: three reviews of different lengths still have to sign off on one line, or the row looks broken as it rolls past. ------------------------------------------------------------ */ .djo_review { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(26px, 2.4vw, 34px); border: 1px solid var(--djo-rule-dark); border-radius: var(--djo-radius); background-color: var(--djo-card-dark); transition: transform var(--djo-base) var(--djo-ease), border-color var(--djo-base) var(--djo-ease), background-color var(--djo-base) var(--djo-ease); } /* The quotation mark, set large and very quiet in the top-right corner. It is a decoration, so it is a pseudo-content span the screen reader never sees - and it grows and brightens on hover, which is most of what tells you the card is responding at all inside a row that is already moving. */ .djo_review_mark { position: absolute; top: -18px; right: 6px; color: #ffffff; font-size: 120px; line-height: 1; opacity: 0.06; transition: opacity var(--djo-base) var(--djo-ease), transform var(--djo-base) var(--djo-spring); pointer-events: none; user-select: none; } .djo_review_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } /* Where the review came from. Said plainly rather than with Google's own mark: using the logo implies a verified integration, and these are transcribed by hand. */ .djo_review_source { color: rgba(255, 255, 255, 0.45); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .djo_reviews .djo_review blockquote.djo_review_text { margin: 0; padding: 0; border: none; background: none; overflow: visible; text-align: left; color: rgba(255, 255, 255, 0.82); font-size: 15.5px; line-height: 1.7; } .djo_review_text p { margin: 0; } /* margin-top:auto sets the attribution on the card's bottom edge. */ .djo_review_by { display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 22px; } .djo_review_avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1; transition: background-color var(--djo-base) var(--djo-ease), transform var(--djo-base) var(--djo-spring); } .djo_review_by_text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .djo_review_name { color: #ffffff; font-weight: 600; } .djo_review_for { color: rgba(255, 255, 255, 0.5); font-size: 13px; } /* ---------- Hovering a review ---------- The card is inside a row that is already moving, and the marquee stops the moment the pointer is over it - so the hover has to say "this one" clearly enough to be read against that change. Four things move together: the card lifts and brightens, the quotation mark swells, the initial fills, and the stars warm up. */ .djo_review:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.28); background-color: rgba(255, 255, 255, 0.08); } .djo_review:hover .djo_review_mark { transform: scale(1.12) rotate(-6deg); opacity: 0.14; } .djo_review:hover .djo_review_avatar { transform: scale(1.08); background-color: var(--djo-green-pale); color: var(--djo-ink); } .djo_review .djo_star { transition: transform var(--djo-base) var(--djo-spring); } .djo_review:hover .djo_star { transform: scale(1.12); } .djo_review .djo_star:nth-child(2) { transition-delay: 40ms; } .djo_review .djo_star:nth-child(3) { transition-delay: 80ms; } .djo_review .djo_star:nth-child(4) { transition-delay: 120ms; } .djo_review .djo_star:nth-child(5) { transition-delay: 160ms; } /* ---------- Call to action band ---------- Brand blue, and the only band on the site painted in it. Everything else is white or near-black, so on a page of two values one saturated field is found before a word of it is read - which is the whole job of a closing action. It also sits outside the light/dark alternation, so it cannot be the band that breaks the rhythm whatever precedes it. ------------------------------------------------------------ */ .djo_cta { overflow: hidden; /* A shade deeper than the flat blue at the foot, so the band has weight under it and does not read as a flat rectangle of colour. */ background-image: linear-gradient(170deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.14) 100%); text-align: center; } .djo_cta_inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; } .djo_cta_eyebrow { color: rgba(255, 255, 255, 0.72); } .djo_cta_title { margin: 0 0 16px; color: #ffffff; font-size: clamp(29px, 3.9vw, 50px); line-height: 1.1; } .djo_cta_text { margin: 0 auto 34px; max-width: 56ch; color: rgba(255, 255, 255, 0.82); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.65; } .djo_cta_actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } /* ---------- The assurance row ---------- The three things a visitor weighs in the second before booking: whether they can be seen soon, what it will cost, and whether they will be sent somewhere else afterwards. Set below the buttons rather than above them, because they are there to answer the hesitation that arrives after the decision, not to be read on the way to it. */ .djo_cta_assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(18px, 2.4vw, 34px); list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: clamp(22px, 2.4vw, 30px) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.18); } .djo_cta_assurances li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 1.4; } .djo_cta_tick { display: inline-flex; flex: 0 0 auto; color: #ffffff; opacity: 0.65; } .djo_cta_tick svg { width: 17px; height: 17px; } /* The watermark, drawn in white here because the ground is dark enough to carry it as-is - no inversion needed, unlike on a light band. */ .djo_spine_cta { left: 50%; width: 34%; transform: translateX(-50%); opacity: 0.06; } /* Speciality and Services pages ------------------------------------------------------------ Both are rendered by orto_child_render_group_page() in inc/nav.php, so they share one set of rules here too. ------------------------------------------------------------ */ /* The theme reserves a deep band under the header for its centred page title (--theme-var-main_content_padding, 8rem on a desktop). These pages hide that title - orto_child_hide_page_title() - and open with their own heading instead, so the reserved band is 128px of nothing between the menu and the first line of copy, on top of the hero's own 64px. The band is given up here and the hero owns the space. Contact Us is deliberately not in this list: it keeps the theme's title, so the band is doing real work there. */ body.page-template-template-speciality .page_content_wrap, body.page-template-template-services .page_content_wrap, body.page-template-template-about .page_content_wrap { padding-top: 0; } .djo_page_hero { padding: clamp(40px, 4vw, 64px) 0 clamp(34px, 3.4vw, 52px); } .djo_page_hero .djo_head { margin-bottom: clamp(26px, 2.6vw, 38px); } /* ---------- The contents nav ---------- These pages run to eight sections. Without this, reaching the last one means scrolling past the other seven. */ .djo_jump_list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; } .djo_jump_link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 1px solid var(--theme-color-bd_color); border-radius: 100px; background-color: #ffffff; color: var(--theme-color-title); font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .25s ease, background-color .25s ease, color .25s ease; } .djo_jump_link:hover, .djo_jump_link:focus-visible { border-color: var(--djo-green-deep); background-color: var(--djo-chip); color: var(--djo-green-deep); } .djo_jump_icon { flex: 0 0 auto; width: 26px; height: 26px; } /* ---------- One section per entry ---------- Alternating tint rather than a rule between them: at this length a page of eight identical white blocks reads as one undifferentiated wall. */ /* Full-width bands, alternating light and dark down the page. The padding is tighter than the home page's - there are eight of these in a row, and the home page's rhythm over that many would make the page twice as long as it needs to be. */ .djo_entry { padding: clamp(34px, 3.8vw, 56px) 0; } .djo_entry_inner { max-width: 860px; margin: 0 auto; } .djo_entry_head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .djo_entry_icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 62px; height: 62px; padding: 12px; border-radius: 50%; background-color: var(--djo-chip); } .djo_entry_title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; } .djo_entry_text { margin: 0 0 26px; color: var(--theme-color-text); font-size: 16.5px; line-height: 1.7; } .djo_entry_subtitle { margin: 0 0 14px; color: var(--theme-color-meta); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .djo_entry_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; list-style: none; margin: 0 0 28px; padding: 0; } .djo_entry_list li { display: flex; align-items: flex-start; gap: 10px; color: var(--theme-color-title); font-size: 15.5px; line-height: 1.5; } .djo_entry_tick { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: var(--djo-green-deep); } .djo_entry_tick svg { width: 19px; height: 19px; } .djo_entry_actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin: 0; } .djo_entry_phone { display: inline-flex; align-items: center; gap: 8px; color: var(--theme-color-title); font-size: 15px; font-weight: 600; text-decoration: none; } .djo_entry_phone svg { color: var(--djo-green-deep); } .djo_entry_phone:hover { color: var(--djo-green-deep); } /* About page (template-about.php) ------------------------------------------------------------ */ .djo_page_about .djo_section { padding: clamp(48px, 5vw, 84px) 0; } /* ---------- Qualifications ---------- */ .djo_timeline { list-style: none; max-width: 760px; margin: 0 auto; padding: 0; counter-reset: none; } .djo_timeline_item { display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 36px); padding: 22px 0; border-bottom: 1px solid var(--theme-color-bd_color); } .djo_timeline_item:first-child { padding-top: 0; } .djo_timeline_item:last-child { border-bottom: none; } /* Fixed width so the three years form a column the eye can run down, rather than each one starting wherever its own digits happen to end. */ .djo_timeline_year { flex: 0 0 auto; width: 72px; color: var(--djo-green-deep); font-size: 19px; font-weight: 700; } .djo_timeline_body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .djo_timeline_title { color: var(--theme-color-title); font-size: 17px; font-weight: 600; line-height: 1.35; } .djo_timeline_place { color: var(--theme-color-meta); font-size: 15px; } /* ---------- What we stand for ---------- */ .djo_values_grid, .djo_facilities_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); list-style: none; margin: 0; padding: 0; } .djo_value { padding: clamp(24px, 2.4vw, 34px); border-radius: var(--djo-radius); background-color: #ffffff; box-shadow: var(--djo-shadow); } .djo_value_icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 50%; background-color: var(--djo-chip); color: var(--djo-green-deep); } .djo_value_icon svg { width: 24px; height: 24px; } .djo_value_title { margin: 0 0 10px; font-size: 19px; line-height: 1.3; } .djo_value_text { margin: 0; color: var(--theme-color-text); font-size: 15px; line-height: 1.65; } /* ---------- Facilities ---------- */ .djo_facility { overflow: hidden; border: 1px solid var(--theme-color-bd_color); border-radius: var(--djo-radius); background-color: #ffffff; } /* A fixed band rather than whatever proportions the files happen to have: the three photographs are from different sources and different shapes, and left to themselves they would set three different card heights. */ .djo_facility_media { display: block; height: clamp(160px, 16vw, 220px); background-color: var(--djo-chip); } .djo_facility_media img { display: block; width: 100%; height: 100%; object-fit: cover; } .djo_facility_title { margin: 20px 24px 8px; font-size: 18px; line-height: 1.3; } .djo_facility_text { margin: 0 24px 24px; color: var(--theme-color-text); font-size: 15px; line-height: 1.6; } /* Contact Us page (template-contact.php) ------------------------------------------------------------ Uses the theme's own design tokens (redefined at the top of this file) so this page matches the rest of the site. Input colour, border, radius, padding and font-size are left to the theme's own input styling, so the fields match every other form on the site rather than inventing a second look. ------------------------------------------------------------ */ /* stretch, not start: both columns run to the same height, so the details column and the form card finish on one line instead of one hanging below the other. Each column then pins its last block to the bottom (consulting hours on the left, the submit button on the right) so the two bottom edges agree rather than leaving a ragged gap. */ .contact_page .contact_layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 60px; align-items: stretch; } .contact_page .contact_details { display: flex; flex-direction: column; } /* ---------- Left column: details ---------- */ .contact_page .contact_eyebrow { margin-bottom: 25px; } .contact_page .contact_intro { margin-bottom: 40px; } .contact_page .contact_intro p:last-child { margin-bottom: 0; } .contact_page .contact_details_list { list-style: none; margin: 0 0 30px; padding: 0; } .contact_page .contact_details_item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--theme-color-bd_color); } .contact_page .contact_details_item:first-child { padding-top: 0; } .contact_page .contact_details_icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background-color: var(--theme-color-bg_color_2); color: var(--theme-color-link); } .contact_page .contact_details_body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 3px; } .contact_page .contact_details_label { color: var(--theme-color-meta); font-size: 12px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; } .contact_page .contact_details_value { color: var(--theme-color-title); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } .contact_page a.contact_details_value:hover { color: var(--theme-color-link); } /* ---------- Social ---------- */ /* Sits under the Consulting Hours card, so the spacing is above it rather than below - it is the last thing in the column. */ .contact_page .contact_social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .contact_page .contact_social_link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--theme-color-bd_color); border-radius: 100px; color: var(--theme-color-title); font-size: 15px; line-height: 1.4; transition: border-color .3s ease, color .3s ease, background-color .3s ease; } .contact_page .contact_social_link:hover { border-color: var(--theme-color-link); background-color: var(--theme-color-bg_color_2); color: var(--theme-color-link); } .contact_page .contact_social_icon { display: inline-flex; color: var(--theme-color-link); } /* ---------- Consulting hours ---------- */ /* margin-top:auto pushes this and the social links below it down to the foot of the column, so the group lines up with the bottom of the form card opposite. */ .contact_page .contact_hours { margin-top: auto; padding: 30px; border-radius: var(--djo-radius); background-color: var(--theme-color-bg_color_2); } .contact_page .contact_hours_title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 19px; line-height: 1.3; } .contact_page .contact_hours_icon { display: inline-flex; color: var(--theme-color-link); } .contact_page .contact_hours_list { list-style: none; margin: 0; padding: 0; } .contact_page .contact_hours_item { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--theme-color-bd_color); } .contact_page .contact_hours_item:first-child { padding-top: 0; } .contact_page .contact_hours_item:last-child { padding-bottom: 0; border-bottom: none; } .contact_page .contact_hours_label { color: var(--theme-color-title); } .contact_page .contact_hours_value { color: var(--theme-color-text); white-space: nowrap; } .contact_page .contact_hours_item_closed .contact_hours_value { color: var(--theme-color-meta); } .contact_page .contact_hours_fee { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--theme-color-bd_color); color: var(--theme-color-title); font-size: 15px; font-weight: 600; } /* ---------- Full-bleed map band ---------- Sits below the two-column layout and breaks out of the page container via the theme's own .alignfull class. Height is fixed rather than an aspect ratio: at 100vw a ratio makes the band absurdly tall on wide monitors and too short to read on small ones. clamp() keeps it a readable strip at every width. ------------------------------------------------------------ */ .contact_page .contact_map { position: relative; margin-top: 70px; } .contact_page .contact_map_frame { overflow: hidden; height: clamp(320px, 34vw, 480px); background-color: var(--theme-color-bg_color_2); } .contact_page .contact_map_frame iframe { display: block; width: 100%; height: 100%; border: none; } /* Floating "Get Directions" button over the bottom-right of the map, clear of Google's own controls on the left and the attribution strip along the base. */ .contact_page .contact_map_directions { position: absolute; right: clamp(16px, 4vw, 60px); bottom: clamp(46px, 6vw, 70px); z-index: 2; margin: 0; } @media (max-width: 767px) { .contact_page .contact_map { margin-top: 50px; } .contact_page .contact_map_frame { height: 300px; } .contact_page .contact_map_directions { right: 50%; bottom: 20px; transform: translateX(50%); } } /* ---------- Right column: form card ---------- */ /* A flex column so the form inside can fill the card's full height - that is what lets the submit button sit on the card's bottom edge and line up with the consulting hours opposite. */ .contact_form_wrap { display: flex; flex-direction: column; padding: 40px; border: 1px solid var(--theme-color-bd_color); border-radius: var(--djo-radius); background-color: var(--theme-color-bg_color); } .contact_form_wrap .contact_form { display: flex; flex-direction: column; flex: 1; } .contact_form_wrap .contact_form_title { margin: 0 0 8px; font-size: 28px; line-height: 1.2; } .contact_form_wrap .contact_form_subtitle { margin-bottom: 30px; color: var(--theme-color-meta); } .contact_form_wrap .contact_form_notice { margin-bottom: 25px; padding: 16px 20px; border-radius: var(--djo-radius-sm); border-left: 3px solid currentColor; } .contact_form_wrap .contact_form_notice_success { background-color: #EDF5EE; color: #2F6B3E; } .contact_form_wrap .contact_form_notice_error { background-color: #FBECEC; color: #9B2C32; } /* Honeypot: hidden from people, still reachable by bots. */ .contact_form_wrap .contact_form_hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .contact_form_wrap .contact_form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .contact_form_wrap .contact_form_row { margin: 0; min-width: 0; } .contact_form_wrap .contact_form_row_full { grid-column: 1 / -1; } .contact_form_wrap .contact_form_row label { display: block; margin-bottom: 8px; color: var(--theme-color-title); font-size: 15px; line-height: 1.4; } .contact_form_wrap .contact_form_row .required { color: var(--djo-red); } /* Only layout here on purpose: colour, border, radius, padding and font-size come from the theme's own input styling. */ .contact_form_wrap .contact_form_row input, .contact_form_wrap .contact_form_row textarea { display: block; width: 100%; } .contact_form_wrap .contact_form_row textarea { min-height: 150px; resize: vertical; } /* margin-top:auto pushes the button to the foot of the card whenever the details column opposite is the taller of the two. The gap above it comes from padding rather than margin, because an auto margin collapses to zero when there is no slack to absorb - which would leave the button touching the message field. */ .contact_form_wrap .contact_form_submit { margin: auto 0 0; padding-top: 30px; } .contact_form_wrap .contact_form_note { margin: 14px 0 0; color: var(--theme-color-meta); font-size: 13px; line-height: 1.5; } /* The submitted/failed message. It is the first thing the page has to say after a submission, and focus is moved to it, so it needs a visible outline of its own rather than the browser's default on a non-interactive element. */ .contact_form_wrap .contact_form_notice:focus { outline: 2px solid var(--theme-color-hover); outline-offset: 3px; } /* Interactions ------------------------------------------------------------ Every hoverable thing on the site, in one block, built from the four moves defined at the top of this file. Gathered here rather than left beside each component on purpose: the risk with a site that reacts to everything is that each piece gets its own timing and direction and the whole starts to feel twitchy. Side by side, they can be kept in one language. ------------------------------------------------------------ */ /* ---------- Header ---------- */ /* The mark turns a few degrees, the way a badge does when you touch it. */ .djo_logo_mark { transition: transform var(--djo-base) var(--djo-spring), opacity var(--djo-base) var(--djo-ease); } .djo_logo:hover .djo_logo_mark { transform: rotate(-8deg) scale(1.06); } /* An underline growing from the left under each menu item. transform-origin flips on the way out, so it retracts back the way it came instead of collapsing to its middle. */ /* bottom:0, not 6px. At 6px the rule was drawn inside the text's own line box and struck through the descenders - the y of Speciality and the tail of the s in Services both came out looking crossed off. An underline has to clear the deepest descender in the set or it is a strikethrough. */ .djo_bar_menu .sc_layouts_menu_nav > li > a::before { content: ""; position: absolute; right: clamp(8px, 0.9vw, 16px); bottom: 0; left: clamp(8px, 0.9vw, 16px); height: 2px; border-radius: 2px; background-color: var(--djo-green-deep); transform: scaleX(0); transform-origin: right center; transition: transform var(--djo-base) var(--djo-ease); } /* The link needs room under the text for that rule to sit in. */ .djo_bar_menu .sc_layouts_menu_nav > li > a { padding-bottom: 6px; } .djo_bar_menu .sc_layouts_menu_nav > li > a { position: relative; } .djo_bar_menu .sc_layouts_menu_nav > li:hover > a::before, .djo_bar_menu .sc_layouts_menu_nav > li.current-menu-item > a::before, .djo_bar_menu .djo_mega_item_open > a::before { transform: scaleX(1); transform-origin: left center; } /* The handset rocks, the way a ringing phone does. Two degrees each way is enough to read at 20px; more looks like it is falling over. */ @keyframes djo_ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-13deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } } .djo_bar_phone:hover .djo_bar_phone_icon svg, .djo_bar_phone:focus-visible .djo_bar_phone_icon svg { animation: djo_ring .6s var(--djo-ease); } .djo_bar_phone_icon { transition: background-color var(--djo-base) var(--djo-ease), color var(--djo-base) var(--djo-ease), transform var(--djo-base) var(--djo-spring); } .djo_bar_phone:hover .djo_bar_phone_icon { transform: scale(1.08); } /* ---------- Mega menu ---------- */ /* NUDGE right, TILT the icon, and a hairline growing down the left edge to mark which door the pointer is on. */ .djo_mega_item { position: relative; transition: background-color var(--djo-fast) var(--djo-ease), border-color var(--djo-fast) var(--djo-ease), color var(--djo-fast) var(--djo-ease), transform var(--djo-fast) var(--djo-ease); } .djo_mega_item::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 2px; border-radius: 2px; background-color: var(--djo-green-deep); transform: scaleY(0); transform-origin: center bottom; transition: transform var(--djo-fast) var(--djo-ease); } .djo_mega_item:hover, .djo_mega_item:focus-visible { transform: translateX(4px); } .djo_mega_item:hover::before, .djo_mega_item:focus-visible::before { transform: scaleY(1); transform-origin: center top; } .djo_mega_item:hover .djo_mega_item_icon, .djo_mega_item:focus-visible .djo_mega_item_icon { transform: rotate(-9deg) scale(1.1); } .djo_mega_foot_link:hover, .djo_mega_foot_link:focus-visible { color: var(--djo-ink); } /* ---------- Hero ---------- */ /* The stars land one after another rather than all at once, so the row reads left to right the way it is meant to be counted. The delay is set per star from its position in the row. */ .djo_hero_rating .djo_star { transition: transform var(--djo-base) var(--djo-spring), color var(--djo-base) var(--djo-ease); } .djo_hero_rating:hover .djo_star { transform: scale(1.28) rotate(-10deg); } .djo_hero_rating .djo_star:nth-child(1) { transition-delay: 0ms; } .djo_hero_rating .djo_star:nth-child(2) { transition-delay: 45ms; } .djo_hero_rating .djo_star:nth-child(3) { transition-delay: 90ms; } .djo_hero_rating .djo_star:nth-child(4) { transition-delay: 135ms; } .djo_hero_rating .djo_star:nth-child(5) { transition-delay: 180ms; } /* The photograph drifts very slowly closer for as long as the pointer is over the band. Slow and small on purpose - a hero that leaps at you is a hero nobody trusts. */ .djo_hero_media img { transition: transform 1.6s var(--djo-ease); } .djo_hero:hover .djo_hero_media img { transform: scale(1.04); } /* ---------- Trust strip ---------- */ /* No lift here: these four sit inside one panel, and lifting one out of it breaks the panel. The cell tints, the figure grows, and a bar wipes in along the bottom edge instead. */ .djo_trust_item { position: relative; transition: background-color var(--djo-base) var(--djo-ease); } .djo_trust_item::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background-color: var(--djo-green-deep); transform: scaleX(0); transition: transform var(--djo-base) var(--djo-ease); } .djo_trust_item:hover { background-color: var(--djo-chip); } .djo_trust_item:hover::after { transform: scaleX(1); } .djo_trust_value { display: inline-block; transition: transform var(--djo-base) var(--djo-spring); } .djo_trust_item:hover .djo_trust_value { transform: scale(1.1); } /* ---------- Speciality cards ---------- */ /* LIFT is already on the card. The chip fills, the icon tilts, and an arrow grows out of the bottom edge to say the card is a link and not a label. */ .djo_card_link:hover .djo_card_icon, .djo_card_link:focus-visible .djo_card_icon { transform: rotate(-10deg) scale(1.12); background-color: var(--djo-green-deep); } .djo_card_link:hover .djo_icon, .djo_card_link:focus-visible .djo_icon { filter: brightness(0) invert(1); } .djo_card_title { transition: color var(--djo-base) var(--djo-ease); } .djo_card_link:hover .djo_card_title { color: var(--djo-green-deep); } .djo_band_dark .djo_card_link:hover .djo_card_title { color: var(--djo-green-pale); } /* ---------- Split: the surgeon band ---------- */ .djo_split_media img { transition: transform 1.2s var(--djo-ease); } .djo_split_media:hover img { transform: scale(1.05); } .djo_split_facts li { transition: transform var(--djo-fast) var(--djo-ease); } .djo_split_facts li svg { transition: transform var(--djo-base) var(--djo-spring); } .djo_split_facts li:hover { transform: translateX(5px); } .djo_split_facts li:hover svg { transform: rotate(-12deg) scale(1.15); } /* ---------- Conditions rail ---------- */ /* The icon rises off the rule and tilts; the dot swells into a ring; the label goes from grey to ink. Three small things moving together, which reads as one item lighting up rather than three separate effects. */ .djo_rail_item:hover .djo_rail_icon { transform: translateY(-5px) rotate(-8deg) scale(1.12); } .djo_rail_dot { transition: transform var(--djo-base) var(--djo-spring), background-color var(--djo-base) var(--djo-ease); } .djo_rail_item:hover .djo_rail_dot { transform: scale(1.55); background-color: var(--djo-green-deep); } .djo_rail_label { transition: color var(--djo-base) var(--djo-ease); } .djo_rail_item:hover .djo_rail_label { color: var(--djo-green-deep); } .djo_conditions_media img { transition: transform 1.2s var(--djo-ease); } .djo_conditions_media:hover img { transform: scale(1.05); } /* ---------- Service cards ---------- */ .djo_service:hover .djo_service_icon { transform: rotate(-9deg) scale(1.1); } .djo_service_title a { position: relative; transition: color var(--djo-fast) var(--djo-ease); } /* The underline is on the title's own link so it tracks the text, not the card. */ .djo_service_title a::after { content: ""; position: absolute; right: 0; bottom: -3px; left: 0; height: 1.5px; background-color: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--djo-base) var(--djo-ease); } .djo_service:hover .djo_service_title a::after, .djo_service_title a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } /* ---------- Symptoms ---------- */ /* NUDGE is already on the row. The numeral grows, and a bar wipes down the left edge - the same marker the mega menu uses, so the two read as the same idea. */ .djo_symptoms_item { position: relative; overflow: hidden; } .djo_symptoms_item::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background-color: var(--djo-green-deep); transform: scaleY(0); transform-origin: center bottom; transition: transform var(--djo-base) var(--djo-ease); } .djo_symptoms_item:hover::before { transform: scaleY(1); transform-origin: center top; } .djo_symptoms_num { transition: transform var(--djo-base) var(--djo-spring), color var(--djo-base) var(--djo-ease); } .djo_symptoms_item:hover .djo_symptoms_num { transform: scale(1.25); } .djo_symptoms_media img { transition: transform 1.2s var(--djo-ease); } .djo_symptoms_media:hover img { transform: scale(1.05); } /* The red-flag note is the one thing on the page that must not look playful. It gets a colour shift and nothing else - no lift, no tilt. */ .djo_symptoms_note { transition: background-color var(--djo-base) var(--djo-ease); } .djo_symptoms_note:hover { background-color: #F8E3E3; } .djo_symptoms_phone svg, .djo_entry_phone svg { transition: transform var(--djo-base) var(--djo-spring); } .djo_symptoms_phone:hover svg, .djo_entry_phone:hover svg { animation: djo_ring .6s var(--djo-ease); } /* ---------- Group pages: jump nav and entries ---------- */ .djo_jump_link:hover .djo_jump_icon, .djo_jump_link:focus-visible .djo_jump_icon { transform: rotate(-10deg) scale(1.12); } .djo_jump_link { transition: border-color var(--djo-fast) var(--djo-ease), background-color var(--djo-fast) var(--djo-ease), color var(--djo-fast) var(--djo-ease), transform var(--djo-fast) var(--djo-ease); } .djo_jump_link:hover, .djo_jump_link:focus-visible { transform: translateY(-3px); } /* Hovering the whole entry turns its icon: one gesture for a band that is otherwise a page of text. */ .djo_entry:hover .djo_entry_icon { transform: rotate(-8deg) scale(1.06); } .djo_entry_list li { transition: transform var(--djo-fast) var(--djo-ease); } .djo_entry_tick svg { transition: transform var(--djo-base) var(--djo-spring); } .djo_entry_list li:hover { transform: translateX(5px); } .djo_entry_list li:hover .djo_entry_tick svg { transform: scale(1.2) rotate(-12deg); } /* ---------- About page ---------- */ .djo_timeline_item { position: relative; transition: transform var(--djo-fast) var(--djo-ease); } .djo_timeline_year { display: inline-block; transition: transform var(--djo-base) var(--djo-spring); } .djo_timeline_item:hover { transform: translateX(6px); } .djo_timeline_item:hover .djo_timeline_year { transform: scale(1.14); } .djo_value { transition: transform var(--djo-base) var(--djo-ease), box-shadow var(--djo-base) var(--djo-ease), border-color var(--djo-base) var(--djo-ease); } .djo_value:hover { transform: translateY(-6px); box-shadow: var(--djo-shadow-lift); } .djo_value:hover .djo_value_icon { transform: rotate(-10deg) scale(1.12); } /* The photograph pushes in while the caption stays put, which is what makes it read as a window rather than a picture that grew. */ .djo_facility { transition: transform var(--djo-base) var(--djo-ease), box-shadow var(--djo-base) var(--djo-ease), border-color var(--djo-base) var(--djo-ease); } .djo_facility:hover { transform: translateY(-6px); box-shadow: var(--djo-shadow-lift); } .djo_facility_media img { transition: transform 1.1s var(--djo-ease); } .djo_facility:hover .djo_facility_media img { transform: scale(1.07); } .djo_facility_title { transition: color var(--djo-base) var(--djo-ease); } .djo_facility:hover .djo_facility_title { color: var(--djo-green-deep); } .djo_band_dark .djo_facility:hover .djo_facility_title { color: var(--djo-green-pale); } /* ---------- Contact page ---------- */ .contact_page .contact_details_item { transition: transform var(--djo-fast) var(--djo-ease); } .contact_page .contact_details_icon { transition: transform var(--djo-base) var(--djo-spring), background-color var(--djo-base) var(--djo-ease), color var(--djo-base) var(--djo-ease); } .contact_page .contact_details_item:hover { transform: translateX(5px); } .contact_page .contact_details_item:hover .contact_details_icon { transform: rotate(-10deg) scale(1.1); background-color: var(--djo-green-deep); color: #ffffff; } .contact_page .contact_hours_item { transition: color var(--djo-fast) var(--djo-ease), transform var(--djo-fast) var(--djo-ease); } .contact_page .contact_hours_item:hover { transform: translateX(4px); } .contact_page .contact_hours_item:hover .contact_hours_label { color: var(--djo-green-deep); } .contact_page .contact_social_link { transition: border-color var(--djo-fast) var(--djo-ease), background-color var(--djo-fast) var(--djo-ease), color var(--djo-fast) var(--djo-ease), transform var(--djo-fast) var(--djo-ease); } .contact_page .contact_social_link:hover { transform: translateY(-3px); } .contact_page .contact_social_icon { transition: transform var(--djo-base) var(--djo-spring); } .contact_page .contact_social_link:hover .contact_social_icon { transform: rotate(-12deg) scale(1.15); } /* Form fields. The only interaction on the site that has to work on focus more than on hover - most of the people filling this in are using a keyboard. */ .contact_form_wrap .contact_form_row input, .contact_form_wrap .contact_form_row textarea { transition: border-color var(--djo-fast) var(--djo-ease), box-shadow var(--djo-fast) var(--djo-ease); } .contact_form_wrap .contact_form_row input:hover, .contact_form_wrap .contact_form_row textarea:hover { border-color: var(--djo-green-deep); } .contact_form_wrap .contact_form_row input:focus, .contact_form_wrap .contact_form_row textarea:focus { border-color: var(--djo-green-deep); box-shadow: 0 0 0 3px rgba(123, 161, 110, 0.28); } /* The label rises with its field, so the pair reads as one control. */ .contact_form_wrap .contact_form_row label { transition: color var(--djo-fast) var(--djo-ease); } .contact_form_wrap .contact_form_row:focus-within label { color: var(--djo-green-deep); } .contact_page .contact_map_frame { overflow: hidden; } .contact_page .contact_map_frame iframe { transition: filter var(--djo-slow) var(--djo-ease); filter: grayscale(0.35); } .contact_page .contact_map:hover .contact_map_frame iframe { filter: grayscale(0); } /* ---------- Footer ---------- */ /* A dash grows in front of the link and pushes the label along with it. */ .footer_jagadale .djo_footer_menu_item a { position: relative; display: inline-block; transition: transform var(--djo-fast) var(--djo-ease), color var(--djo-fast) var(--djo-ease); } .footer_jagadale .djo_footer_menu_item a::before { content: ""; position: absolute; top: 50%; left: -14px; width: 8px; height: 1.5px; background-color: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--djo-fast) var(--djo-ease); } .footer_jagadale .djo_footer_menu_item a:hover, .footer_jagadale .djo_footer_menu_item a:focus-visible { transform: translateX(14px); } .footer_jagadale .djo_footer_menu_item a:hover::before, .footer_jagadale .djo_footer_menu_item a:focus-visible::before { transform: scaleX(1); transform-origin: left center; } .footer_jagadale .djo_footer_social { transition: border-color var(--djo-fast) var(--djo-ease), background-color var(--djo-fast) var(--djo-ease), color var(--djo-fast) var(--djo-ease), transform var(--djo-base) var(--djo-spring); } .footer_jagadale .djo_footer_social:hover, .footer_jagadale .djo_footer_social:focus-visible { transform: translateY(-4px) rotate(-10deg); border-color: transparent; background-color: var(--djo-green-deep); color: #ffffff; } .footer_jagadale .djo_footer_logo { transition: transform var(--djo-base) var(--djo-ease); } .footer_jagadale .djo_footer_logo img { transition: transform var(--djo-base) var(--djo-spring); } .footer_jagadale .djo_footer_logo:hover img { transform: rotate(-8deg) scale(1.06); } .footer_jagadale .djo_footer_bottom_links a { position: relative; } .footer_jagadale .djo_footer_bottom_links a::after { content: ""; position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--djo-fast) var(--djo-ease); } .footer_jagadale .djo_footer_bottom_links a:hover::after, .footer_jagadale .djo_footer_bottom_links a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } /* Site footer (templates/footer-jagadale.php) ------------------------------------------------------------ Replaces the parent theme's widget-driven footer. Dark band, logo on its own line, three columns below it, then a rule and the small print. Colours are set literally rather than through the theme's --theme-color-* vars: those follow whichever colour scheme the page is using, and the footer has to stay dark on every page regardless. ------------------------------------------------------------ */ .footer_jagadale { /* The same ground as the closing call to action above it, so the page darkens once and stays down rather than stepping back up for the small print. The two are told apart by the rule and the change of scale, not by a third shade of near-black. */ --djo-footer-bg: var(--djo-ink-deep); --djo-footer-text: #A2A6AF; --djo-footer-heading: #ffffff; --djo-footer-rule: rgba(255, 255, 255, 0.12); padding: 70px 0 40px; background-color: var(--djo-footer-bg); color: var(--djo-footer-text); font-size: 15px; line-height: 1.7; } .footer_jagadale a { color: var(--djo-footer-text); text-decoration: none; transition: color 0.2s ease; } .footer_jagadale a:hover, .footer_jagadale a:focus-visible { color: var(--djo-footer-heading); } .footer_jagadale .djo_footer_title { margin: 0 0 25px; color: var(--djo-footer-heading); font-size: 20px; line-height: 1.3; } /* ---------- Logo ---------- */ /* Mark and wordmark side by side. The mark is a photograph of the clinic's painted sign rather than a vector, so it is given a white disc to sit on - its own background is white and would otherwise show as a pale square on the dark band. Replace images/logo-mark.png with a transparent SVG and this rule becomes the disc it was always meant to be. */ .footer_jagadale .djo_footer_logo { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 45px; } .footer_jagadale .djo_footer_logo img { display: block; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; background-color: #ffffff; object-fit: contain; } .footer_jagadale .djo_footer_logo_text { display: flex; flex-direction: column; gap: 3px; } .footer_jagadale .djo_footer_logo_name { color: var(--djo-footer-heading); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.25; } .footer_jagadale .djo_footer_logo_tagline { color: var(--djo-footer-text); font-size: 13px; font-style: italic; letter-spacing: 0.04em; } /* ---------- Columns ---------- */ /* The Contact column carries the longest strings on the page (the address and the email), so it gets more room than the Pages list beside it. */ .footer_jagadale .djo_footer_columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.7fr) minmax(0, 1.25fr); gap: 40px 55px; align-items: start; } .footer_jagadale .djo_footer_about_text { margin: 0 0 30px; max-width: 44ch; } .footer_jagadale .djo_footer_socials { display: flex; gap: 12px; } /* A hairline ring on the dark band, not a white disc. The mark takes its colour from the footer text, and the ring gives it the same standing-control shape the header tools use. */ .footer_jagadale .djo_footer_social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--djo-footer-rule); border-radius: 50%; } .footer_jagadale .djo_footer_social:hover { border-color: var(--djo-footer-heading); } .footer_jagadale .djo_footer_menu, .footer_jagadale .djo_footer_contacts { list-style: none; margin: 0; padding: 0; } .footer_jagadale .djo_footer_menu_item + .djo_footer_menu_item { margin-top: 10px; } .footer_jagadale .djo_footer_contact { display: flex; /* flex-start, not center: the address wraps to three lines in a narrow column and the icon should stay with the first line, not float to the middle of the block. */ align-items: flex-start; gap: 10px; min-width: 0; } .footer_jagadale .djo_footer_contact + .djo_footer_contact { margin-top: 14px; } /* The email is one long word with no natural break point, so it has to be allowed to break mid-string or it overflows the column. */ .footer_jagadale .djo_footer_contact a { min-width: 0; overflow-wrap: anywhere; transition: color .3s ease; } .footer_jagadale .djo_footer_contact_text { min-width: 0; } .footer_jagadale .djo_footer_contact_sep { padding: 0 4px; opacity: 0.5; } .footer_jagadale .djo_footer_hours_line { display: block; } /* The glyphs sat bare against the dark band with nothing to hold them, so they read as marks in the text rather than as the standing controls they sit beside. A tinted disc gives them the same shape the header tools and the Contact page's detail icons already use. 28px against a 24px line box, so it stays level with the first line of the address rather than towering over it. */ .footer_jagadale .djo_footer_contact_icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.07); color: var(--djo-green-pale); transition: background-color .3s ease, color .3s ease, transform .3s ease; } .footer_jagadale .djo_footer_contact_icon svg { width: 17px; height: 17px; } /* Driven from the row, not the link. The icon is a sibling of the anchor and aria-hidden, so it cannot be reached from a:hover - and hovering anywhere along the line is what a visitor expects to acknowledge them. */ .footer_jagadale .djo_footer_contact:hover .djo_footer_contact_icon, .footer_jagadale .djo_footer_contact:focus-within .djo_footer_contact_icon { transform: translateY(-1px); background-color: var(--djo-green-deep); color: #ffffff; } .footer_jagadale .djo_footer_contact:hover a, .footer_jagadale .djo_footer_contact a:focus-visible { color: var(--djo-footer-heading); } @media (prefers-reduced-motion: reduce) { .footer_jagadale .djo_footer_contact:hover .djo_footer_contact_icon, .footer_jagadale .djo_footer_contact:focus-within .djo_footer_contact_icon { transform: none; } } /* ---------- Registered practice details ---------- */ /* Leads the contact column. Set a step smaller than body copy so it still reads as registration detail rather than as a headline. */ .footer_jagadale .djo_footer_legal_block { display: flex; flex-direction: column; gap: 4px; margin: 0 0 22px; color: var(--djo-footer-text); font-size: 13px; line-height: 1.6; opacity: 0.85; } .footer_jagadale .djo_footer_legal_name { color: var(--djo-footer-heading); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .footer_jagadale .djo_footer_legal_line { overflow-wrap: anywhere; } /* ---------- The build credit ---------- Mark plus wordmark, matching the pattern the agency uses on its other builds: an when images/blocsys.* is bundled, and a text wordmark when it is not - so the credit is never missing and the mark is never hotlinked. */ .footer_jagadale .djo_footer_credit { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; } .footer_jagadale .djo_footer_credit_label { font-size: 13px; opacity: 0.7; } .footer_jagadale .djo_footer_credit_link { display: inline-flex; align-items: center; gap: 7px; transition: opacity var(--djo-fast) var(--djo-ease); } /* Sized by height so the lockup keeps its proportions whatever file is in place. 22px puts the wordmark on about the same optical weight as the copyright line it sits under - a credit that out-shouts the client's own small print is a credit in the wrong place. */ .footer_jagadale .djo_footer_credit_link img { display: block; width: auto; height: 22px; opacity: 0.85; transition: opacity var(--djo-fast) var(--djo-ease), transform var(--djo-base) var(--djo-spring); } .footer_jagadale .djo_footer_credit_link:hover img, .footer_jagadale .djo_footer_credit_link:focus-visible img { opacity: 1; } .footer_jagadale .djo_footer_credit_name { color: var(--djo-footer-heading); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; } /* No rotation here. That was written when this was a square mark on its own; applied to a lockup it tips the wordmark off its baseline and reads as a mistake. A lift is enough. */ .footer_jagadale .djo_footer_credit_link:hover img, .footer_jagadale .djo_footer_credit_link:focus-visible img { transform: translateY(-2px); } /* ---------- Bottom bar ---------- */ .footer_jagadale .djo_footer_bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 40px; margin-top: 65px; padding-top: 28px; border-top: 1px solid var(--djo-footer-rule); font-size: 14px; } .footer_jagadale .djo_footer_copyright { margin: 0; } .footer_jagadale .djo_footer_bottom_links { display: flex; flex: 0 0 auto; gap: 25px; list-style: none; margin: 0; padding: 0; } /* Responsive ------------------------------------------------------------ One block at the end rather than a query beside every rule, so the breakpoints can be read as a set and kept consistent. ------------------------------------------------------------ */ @media (max-width: 1199px) { .djo_mega_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .djo_cards, .djo_services_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Eight across stops working before the tablet breakpoint - the labels are two words and start breaking mid-word. Four and four, with the rule redrawn per row. */ .djo_rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 34px; } .djo_rail::before { right: calc(100% / 8); left: calc(100% / 8); } } @media (max-width: 1023px) { .djo_trust_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .djo_conditions_intro { grid-template-columns: minmax(0, 1fr); } .djo_symptoms_layout { grid-template-columns: minmax(0, 1fr); } /* Nothing to stick to once the two columns stack - the image is above the list rather than beside it, so pinning it would park it over the list. */ .djo_symptoms_media { position: static; } .djo_split { grid-template-columns: minmax(0, 1fr); } /* Stacked, the portrait opens the section rather than following it: it is a photograph of the person the next four paragraphs are about, and meeting them first is the right order to read it in. Held to a measure and centred, because a 4:5 portrait at the full width of a phone is a full screen of face before a word of copy. */ .djo_split_media { order: -1; max-width: 360px; margin-right: auto; margin-left: auto; } .djo_values_grid, .djo_facilities_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact_page .contact_layout { grid-template-columns: minmax(0, 1fr); gap: 50px; } .footer_jagadale .djo_footer_columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer_jagadale .djo_footer_col_about { grid-column: 1 / -1; } } @media (max-width: 767px) { /* Two across on a phone. The rule is dropped rather than redrawn: across four rows of two it stops reading as one line of stops and becomes four stray dashes. The dots stay - they are what tie the label to the icon. */ .djo_rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .djo_rail::before { display: none; } .djo_symptoms_item { gap: 12px; padding: 13px 15px; } .djo_symptoms_num { width: 26px; font-size: 15px; } .djo_cards, .djo_services_grid, .djo_values_grid, .djo_facilities_grid { grid-template-columns: minmax(0, 1fr); } /* Equal rows are what keeps a grid of cards from stepping. In one column every card is its own row, so the rule stops helping and starts hurting: it stretched all eight to the height of the wordiest one. */ .djo_cards, .djo_services_grid { grid-auto-rows: auto; } .djo_trust { margin-top: 0; } .djo_trust_grid { box-shadow: none; } .djo_entry_list { grid-template-columns: minmax(0, 1fr); } .djo_entry_head { gap: 12px; } .djo_entry_icon { width: 50px; height: 50px; padding: 9px; } .djo_hero_actions .djo_button, .djo_cta_actions .djo_button { flex: 1 1 auto; } .djo_timeline_item { flex-direction: column; gap: 4px; } .contact_form_wrap { padding: 25px 20px; } .contact_form_wrap .contact_form_grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .contact_page .contact_hours { padding: 22px 20px; } .contact_page .contact_hours_item { flex-direction: column; gap: 2px; } .contact_page .contact_details_icon { width: 40px; height: 40px; } .footer_jagadale { padding: 50px 0 35px; } .footer_jagadale .djo_footer_columns { grid-template-columns: minmax(0, 1fr); gap: 35px; } .footer_jagadale .djo_footer_logo { margin-bottom: 35px; } .footer_jagadale .djo_footer_bottom { flex-direction: column; margin-top: 45px; } } /* Reduced motion ------------------------------------------------------------ Not softened - off. Someone who has asked their operating system to stop moving things has asked once, for everything, and a site that answers with "smaller animations" has not listened. The reviews are the case that needs care: turning the animation off would leave a track twice the width of the window with half of it unreachable. So it becomes what it should have been all along for that reader - a plain row that scrolls, with the duplicate set hidden so nothing is read out twice. Colour transitions are left alone throughout. A link changing colour on hover is feedback, not motion, and removing it takes away the only signal that something is interactive. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .djo_marquee_track { animation: none; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; } .djo_marquee { -webkit-mask-image: none; mask-image: none; } .djo_marquee .djo_review { scroll-snap-align: start; } /* The second copy is decorative padding for the loop. With no loop, it is just the same three reviews printed twice. */ .djo_marquee .djo_review[aria-hidden="true"] { display: none; } /* Every transform-driven effect on the site, in one sweep. Written as a universal selector because the alternative is remembering to add each new hover to a list, and that list is the thing that always goes stale. */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Anything whose resting state is a scaled-down bar or rule has to be shown outright rather than transitioned in, or it never appears at all. */ .djo_symptoms_item:hover::before, .djo_mega_item:hover::before, .djo_trust_item:hover::after, .djo_service:hover .djo_service_title a::after, .djo_bar_menu .sc_layouts_menu_nav > li:hover > a::before { transform: none; } } /* Legal pages (template-privacy.php, template-cookies.php) ------------------------------------------------------------ A sticky contents nav beside a long document. Both policies use it; the layout lives in inc/legal.php. ------------------------------------------------------------ */ .djo_legal_layout { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } /* Sticky, because these pages run to a dozen sections and a reader who wants section 9 should not have to scroll back to the top to find it again. The offset clears the pinned header, same measurement anchored headings use. */ .djo_legal_toc { position: sticky; top: calc(var(--djo-header-h, 96px) + 24px); padding: 22px 24px; border: 1px solid var(--djo-rule); border-radius: var(--djo-radius); background-color: var(--djo-chip); } .djo_legal_toc_title { margin: 0 0 14px; color: var(--theme-color-meta); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .djo_legal_toc_list { list-style: none; margin: 0; padding: 0; counter-reset: djo-toc; } .djo_legal_toc_list li { counter-increment: djo-toc; margin-bottom: 9px; } .djo_legal_toc_list a { display: flex; gap: 9px; color: var(--theme-color-text); font-size: 14px; line-height: 1.45; text-decoration: none; transition: color var(--djo-fast) var(--djo-ease), transform var(--djo-fast) var(--djo-ease); } /* The number is generated rather than written into the markup, so it can never disagree with the number on the section it points at - both count the same list from the same source. */ .djo_legal_toc_list a::before { content: counter(djo-toc, decimal-leading-zero); flex: 0 0 auto; color: var(--djo-green-deep); font-weight: 700; font-variant-numeric: tabular-nums; } .djo_legal_toc_list a:hover, .djo_legal_toc_list a:focus-visible { transform: translateX(3px); color: var(--djo-green-deep); } .djo_legal_body { max-width: 72ch; } .djo_legal_head { margin-bottom: clamp(30px, 3.4vw, 48px); padding-bottom: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid var(--djo-rule); } .djo_legal_title { margin: 0 0 18px; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; } .djo_legal_intro { margin: 0 0 14px; color: var(--theme-color-text); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; } .djo_legal_section { margin-bottom: clamp(30px, 3.2vw, 46px); } .djo_legal_section_title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; } .djo_legal_number { flex: 0 0 auto; color: var(--djo-green-deep); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .djo_legal_lead { color: var(--theme-color-title); font-size: 16.5px; font-weight: 500; line-height: 1.65; } .djo_legal_section p { margin: 0 0 14px; color: var(--theme-color-text); line-height: 1.75; } .djo_legal_section a { color: var(--djo-green-deep); text-decoration: underline; text-underline-offset: 2px; } .djo_legal_list { list-style: none; margin: 0 0 16px; padding: 0; } .djo_legal_list li { position: relative; margin-bottom: 11px; padding-left: 22px; color: var(--theme-color-text); line-height: 1.7; } .djo_legal_list li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--djo-green-deep); } .djo_legal_list strong { color: var(--theme-color-title); } /* ---------- The cookie table ---------- */ /* Scrolls inside its own box rather than pushing the page sideways: four columns of prose will not fit a phone at any font size worth reading. */ .djo_legal_table_wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--djo-rule); border-radius: var(--djo-radius-sm); } .djo_legal_table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; } .djo_legal_table th, .djo_legal_table td { padding: 12px 16px; border-bottom: 1px solid var(--djo-rule); text-align: left; vertical-align: top; line-height: 1.6; } .djo_legal_table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* background-color is restated because the parent theme paints every in the title colour with white text - right for a data table's header row, and very wrong for a row header, which came out as a black box with the cookie name invisible inside it. */ .djo_legal_table tbody th { background-color: transparent; color: var(--theme-color-title); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; white-space: nowrap; } /* The header row keeps a tint, but the theme's near-black is heavier than this table needs - it is four columns of prose, not a spreadsheet. */ .djo_legal_table thead th { background-color: var(--djo-chip) !important; color: var(--theme-color-title) !important; } .djo_legal_table td { color: var(--theme-color-text); } .djo_legal_table tbody tr:last-child th, .djo_legal_table tbody tr:last-child td { border-bottom: none; } .djo_legal_table tbody tr { transition: background-color var(--djo-fast) var(--djo-ease); } .djo_legal_table tbody tr:hover { background-color: var(--djo-chip); } .djo_legal_updated { margin: clamp(30px, 3vw, 44px) 0 0; padding-top: 22px; border-top: 1px solid var(--djo-rule); color: var(--theme-color-meta); font-size: 14px; } @media (max-width: 1023px) { .djo_legal_layout { grid-template-columns: minmax(0, 1fr); } /* Nothing to stick to once it is above the document rather than beside it. */ .djo_legal_toc { position: static; } }