/* * HarrogateYoga - modern overrides (Vipertech, Nov 2026) * Loaded after all theme CSS. Remove this file (or its enqueue in functions.php) * to return the site to its original look. * * 1. Typography: consistent type scale, 16px body text * 2. Wide layout: 1200px site on screens 1240px and wider * (screens narrower than that keep the original 980px / tablet / mobile layouts) */ /* ========================================================================== 1. TYPOGRAPHY Scale: 13 / 14 / 16 / 18 / 20 / 24 / 28 / 34 ========================================================================== */ body { font-size: 16px; line-height: 1.65; } p, li, td, th, dd, dt { line-height: 1.65; } li { line-height: 1.65; } ul.large li, li p { line-height: 1.65; } h1 { font-size: 34px; line-height: 1.25; } h2 { font-size: 28px; line-height: 1.3; } h3 { font-size: 24px; line-height: 1.3; } h4 { font-size: 20px; line-height: 1.35; } h5 { font-size: 18px; line-height: 1.4; } h6 { font-size: 16px; line-height: 1.4; } /* Page / post titles */ h1.gdl-page-title, h1.single-thumbnail-title, h1.single-port-title { font-size: 28px; line-height: 1.3; } h1.stunning-text-title { font-size: 28px; line-height: 1.3; } .gdl-slider-title { font-size: 28px; } /* Section and item headings (were 15-21px, mixed) */ h3.accordion-header-title, h3.gallery-header-title, h3.toggle-box-header-title, h3.testimonial-header-title, h3.portfolio-header-title, h3.blog-header-title, div.comment-wrapper .comment-title, div.comment-wrapper #reply-title, div.about-author-title, div.social-share-title { font-size: 22px; line-height: 1.3; } div.blog-item-holder .blog-item1 .blog-thumbnail-title, div.blog-item-holder .blog-item2 .blog-thumbnail-title { font-size: 22px; line-height: 1.3; } h2.accordion-head, h2.toggle-box-head, h2.column-service-title, h2.portfolio-thumbnail-title, div.sixteen.columns.portfolio-item .portfolio-thumbnail-title, div.blog-item-holder .blog-item0 .blog-thumbnail-title, div.blog-item-holder .blog-item3 .blog-thumbnail-title { font-size: 18px; line-height: 1.35; } /* Widget titles */ div.right-sidebar-wrapper .custom-sidebar-title, div.left-sidebar-wrapper .custom-sidebar-title, div.sitemap .custom-sidebar-title, div.footer-widget-wrapper .custom-sidebar-title { font-size: 18px; } /* Lead text and quotes */ p.lead { font-size: 20px; line-height: 1.5; } blockquote, blockquote p, div.shortcode-block-quote-left, div.shortcode-block-quote-right, div.shortcode-block-quote-center { font-size: 18px; line-height: 1.55; } /* Navigation */ div.navigation-wrapper { font-size: 15px; } div.top-navigation.container { font-size: 14px; } div.social-wrapper { font-size: 16px; } /* Body-size UI text (were 12-14px) */ ul.gdl-tabs li a, label span, legend span, div.stunning-text-caption, div.message-box-title, a.stunning-text-button, span.comment-author, .gdl-gallery-caption { font-size: 16px; } div.stunning-text-caption { line-height: 1.6; } /* Small text: meta, dates, captions, footer (were 10-13px) */ blockquote cite, .tagcloud a, #wp-calendar caption, div.footer-wrapper #wp-calendar caption, div.copyright-container, span.comment-date, div.testimonial-author, div.single-thumbnail-info, div.blog-item-holder .blog-item1 .blog-thumbnail-info, div.blog-item-holder .blog-item2 .blog-thumbnail-info, div.search-wrapper input[type="text"], .gdl-code { font-size: 14px; } /* Buttons */ a.gdl-button.shortcode-large-button { font-size: 18px; } a.gdl-button.shortcode-medium-button { font-size: 16px; } a.gdl-button.shortcode-small-button { font-size: 14px; } /* Form fields - 16px also stops iPhones zooming in on tap */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea, select { font-size: 16px; } span.wpcf7-form-control-wrap textarea { max-width: 100%; box-sizing: border-box; } /* ========================================================================== 2. WIDE LAYOUT (1200px) - large screens only Grid generated from stylesheet/skeleton-responsive.css, scaled 960 -> 1180 ========================================================================== */ @media only screen and (min-width: 1240px) { /* #Base 960 Grid ================================================== */ .container { width: 1180px; } .container-wrapper, .all-container-wrapper.boxed-layout { width: 1200px; } .gdl-page-item { width: 1180px; } /* Nested Column Classes */ /* Base Grid */ .container .one.column { width: 53px; } .container .two.columns { width: 127px; } .container .three.columns { width: 201px; } .container .four.columns { width: 275px; } .container .five.columns { width: 348px; } .container .six.columns { width: 422px; } .container .seven.columns { width: 496px; } .container .eight.columns { width: 570px; } .container .nine.columns { width: 643px; } .container .ten.columns { width: 717px; } .container .eleven.columns { width: 791px; } .container .twelve.columns { width: 865px; } .container .thirteen.columns { width: 938px; } .container .fourteen.columns { width: 1012px; } .container .fifteen.columns { width: 1086px; } .container .sixteen.columns { width: 1160px; } .container .one-third.column { width: 373px; } .container .two-thirds.column { width: 766px; } /* Wrapper */ .container .one.column.wrapper { width: 73px; } .container .two.columns.wrapper { width: 147px; } .container .three.columns.wrapper { width: 221px; } .container .four.columns.wrapper { width: 295px; } .container .five.columns.wrapper { width: 368px; } .container .six.columns.wrapper { width: 442px; } .container .seven.columns.wrapper { width: 516px; } .container .eight.columns.wrapper { width: 590px; } .container .nine.columns.wrapper { width: 663px; } .container .ten.columns.wrapper { width: 737px; } .container .eleven.columns.wrapper { width: 811px; } .container .twelve.columns.wrapper { width: 885px; } .container .thirteen.columns.wrapper { width: 958px; } .container .fourteen.columns.wrapper { width: 1032px; } .container .fifteen.columns.wrapper { width: 1106px; } .container .sixteen.columns.wrapper { width: 1180px; } .container .one-third.column.wrapper { width: 393px; } .container .two-thirds.column.wrapper { width: 786px; } /* One Sidebar */ .sidebar-included .gdl-page-item { width: 811px; } .container .sidebar-included .gdl-page-item .four.columns { width: 182px; } .container .sidebar-included .gdl-page-item .eight.columns { width: 385px; } .container .sidebar-included .gdl-page-item .twelve.columns { width: 588px; } .container .sidebar-included .gdl-page-item .sixteen.columns { width: 791px; } .container .sidebar-included .gdl-page-item .one-third.column { width: 250px; } .container .sidebar-included .gdl-page-item .two-thirds.column { width: 520px; } .container .sidebar-included .gdl-page-item .four.columns.wrapper { width: 202px; } .container .sidebar-included .gdl-page-item .eight.columns.wrapper { width: 405px; } .container .sidebar-included .gdl-page-item .twelve.columns.wrapper { width: 608px; } .container .sidebar-included .gdl-page-item .sixteen.columns.wrapper { width: 811px; } .container .sidebar-included .gdl-page-item .one-third.column.wrapper { width: 270px; } .container .sidebar-included .gdl-page-item .two-thirds.column.wrapper { width: 540px; } /* Both Sidebar */ .both-sidebar-included .gdl-page-item { width: 590px; } .container .both-sidebar-included .gdl-page-item .four.columns, .container .both-sidebar-included .gdl-page-item .eight.columns, .container .both-sidebar-included .gdl-page-item .one-third.column { width: 275px; } .container .both-sidebar-included .gdl-page-item .four.columns.wrapper, .container .both-sidebar-included .gdl-page-item .eight.columns.wrapper, .container .both-sidebar-included .gdl-page-item .one-third.column.wrapper { width: 295px; } .container .both-sidebar-included .gdl-page-item .twelve.columns, .container .both-sidebar-included .gdl-page-item .sixteen.columns, .container .both-sidebar-included .gdl-page-item .two-thirds.column { width: 570px; } .container .both-sidebar-included .gdl-page-item .twelve.columns.wrapper, .container .both-sidebar-included .gdl-page-item .sixteen.columns.wrapper, .container .both-sidebar-included .gdl-page-item .two-thirds.column.wrapper { width: 590px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ /* Full-width slider, stunning text, top bar */ div.boxed-layout div.slider-wrapper.fullwidth { width: 1200px; } div.boxed-layout div.stunning-text-wrapper { width: 1180px; } div.boxed-layout div.sidebar-included.left-sidebar .stunning-text-wrapper, div.boxed-layout div.sidebar-included.right-sidebar .stunning-text-wrapper { width: 811px; } div.boxed-layout div.both-sidebar-included .stunning-text-wrapper { width: 590px; } div.top-navigation-wrapper { min-width: 1200px; } /* Blog / portfolio thumbnail sliders */ div.sixteen.columns.portfolio-item .portfolio-thumbnail-slider { width: 763px; } div.sidebar-included .sixteen.columns.portfolio-item .portfolio-thumbnail-slider { width: 393px; } div.both-sidebar-included .sixteen.columns.portfolio-item .portfolio-thumbnail-slider { width: 221px; } div.blog-item-holder .blog-item1 .blog-thumbnail-slider { width: 567px; } div.sidebar-included .blog-item-holder .blog-item1 .blog-thumbnail-slider { width: 258px; } /* Let images fill their (now wider) columns */ div.blog-thumbnail-image img, div.portfolio-thumbnail-image img, div.blog-thumbnail-slider img, div.portfolio-thumbnail-slider img { width: 100%; height: auto; } } /* ========================================================================== 3. FLUID MOBILE LAYOUT (phones, up to 767px) The theme fixes phones to a 320px box (420px in landscape), which leaves wide empty bands on modern phones (375-430px). Make it fill the screen. ========================================================================== */ @media only screen and (max-width: 767px) { /* Outer box and container fill the screen, 10px padding each side */ .container-wrapper, .all-container-wrapper.boxed-layout { width: auto; } .container { width: auto; padding-left: 10px; padding-right: 10px; } /* Page content area. The float wrapper needs an explicit width, otherwise it shrink-wraps its contents and the percentage columns inside it balloon */ .gdl-page-float-left { width: 100%; } .gdl-page-item, .sidebar-included .gdl-page-item, .both-sidebar-included .gdl-page-item { width: 100%; } /* Every grid column: full width minus its 10px side margins */ .container .column, .container .columns { width: calc(100% - 20px) !important; } .container .column.wrapper, .container .columns.wrapper { width: 100% !important; } /* Testimonial carousel slides also use the "columns" class, but sit inside a strip 10x the screen width, so size them from the screen instead */ .container .jcarousellite li.column, .container .jcarousellite li.columns { width: calc(100vw - 40px) !important; } /* Full-width slider and banner text stretch edge to edge */ div.boxed-layout div.slider-wrapper.fullwidth { width: 100vw; margin-left: -20px; } div.boxed-layout div.stunning-text-wrapper, div.boxed-layout div.sidebar-included.left-sidebar .stunning-text-wrapper, div.boxed-layout div.sidebar-included.right-sidebar .stunning-text-wrapper, div.boxed-layout div.both-sidebar-included .stunning-text-wrapper { width: auto; margin-left: -10px; margin-right: -10px; } div.top-navigation-wrapper { min-width: 0; } /* Forms and custom content boxes that had fixed phone widths */ div.comment-wrapper input[type="text"], div.comment-wrapper input[type="password"], span.wpcf7-form-control-wrap input, span.wpcf7-form-control-wrap textarea { width: 100% !important; box-sizing: border-box; } .classes_content, .download_content { width: auto !important; float: none; } .classes_image, .download_image { float: none; margin-left: 0; max-width: 100%; } /* Slightly smaller headings on phones so long titles don't take over the screen */ h1, h1.gdl-page-title, h1.single-thumbnail-title, h1.single-port-title, h1.stunning-text-title { font-size: 26px; } h2 { font-size: 24px; } h3 { font-size: 21px; } } /* ========================================================================== 4. MOBILE MENU (built by javascript/hy-mobile-menu.js) Replaces the theme's