/* Theme Name: YELLOW HOUSE 2025 - ASTRO Theme URI:http://www.goodlookinkids.com Description: Version:1.0 Author:Good Lookin Kids Inc. Author URI:http://www.goodlookinkids.com Tags: */ /* ========================================================================== *\ TABLE OF CONTENTS \* ========================================================================== 0. RESET 1. TOKENS 1.0 COLOURS 1.1 LAYOUT 1.2 RADIUS 1.3 SIZE 1.4 SPACING 1.5 ICON SIZE 1.6 TYPOGRAPHY 2. GENERAL TAGS 3. STRUCTURE 4. HOME PAGE STYLES 5. PAGE AND SINGLE POST STYLES 5.1 ABOUT 5.2 BLOG 5.4 PAGINATION 6. GENERAL CLASSES 7. FORM STYLES 8. ALIGNMENT 9. CAPTIONS 10. GUTENBERG 11. LAYOUT 11.1 COLUMNS 11.2 GRID BEHAVIOUR 11.3 FLEX CONTAINER 11.4 GRID CONTAINER 11.5 PADDING 11.6 BORDER */ /* ========================================================================== *\ 0. RESET \* ========================================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Make HTML 5 elements display block-level for consistent styling */ main, article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } /* ========================================================================== *\ 1. TOKENS \* ========================================================================== */ /* ====================================== *\ 1.0 COLOURS \* ====================================== */ :root { --colour-base-white: #ffffff; --colour-base-black: #000000; --colour-brand-yellow: #f9d755; --colour-brand-blue: #00a3e3; --colour-brand-blue-light: #f3f8fd; --colour-grey-50: #f5f5f5; --colour-grey-100: #e1e1e1; --colour-grey-200: #d2d2d2; --colour-grey-300: #afafaf; --colour-grey-400: #a9a9a9; --colour-grey-500: #888888; --colour-grey-600: #747474; --colour-grey-700: #505050; --colour-grey-800: #3b3b3b; --colour-grey-900: #202020; --colour-alerts-error: #ee0015; --colour-alerts-error-light: #fde6e8; --colour-alerts-success: #00a645; --colour-alerts-success-light: #e6fbef; --colour-alerts-warning: #ffbd00; --colour-alerts-warning-light: #fff8e6; --colour-alerts-error-dark: #640009; --colour-alerts-success-dark: #005c26; --colour-alerts-warning-dark: #6b4f00; } /* ====================================== *\ 1.1 LAYOUT \* ====================================== */ /* Desktop */ :root { --layout-base-inner-container: 114rem; --layout-base-inner-container-padding: 0; --layout-base-gutter: 3.2rem; --layout-gap-xxxs: var(--spacing-025); --layout-gap-xxs: var(--spacing-05); --layout-gap-xs: var(--spacing-1); --layout-gap-sm: var(--spacing-2); --layout-gap-md: var(--spacing-3); --layout-gap-lg: var(--spacing-4); --layout-gap-xl: var(--spacing-5); --layout-gap-2xl: var(--spacing-6); --layout-gap-3xl: var(--spacing-10); --layout-gap-4xl: var(--spacing-13); --layout-margin-xxs: var(--spacing-05); --layout-margin-xs: var(--spacing-1); --layout-margin-sm: var(--spacing-2); --layout-margin-md: var(--spacing-3); --layout-margin-lg: var(--spacing-4); --layout-margin-xl: var(--spacing-5); --layout-margin-2xl: var(--spacing-6); --layout-margin-3xl: var(--spacing-10); --layout-margin-4xl: var(--spacing-13); --layout-margin-5xl: var(--spacing-15); --layout-padding-xxs: var(--spacing-05); --layout-padding-xs: var(--spacing-1); --layout-padding-sm: var(--spacing-2); --layout-padding-md: var(--spacing-3); --layout-padding-lg: var(--spacing-4); --layout-padding-xl: var(--spacing-5); --layout-padding-2xl: var(--spacing-6); --layout-padding-3xl: var(--spacing-10); --layout-padding-4xl: var(--spacing-13); } /* Tablet Landscape: 801px to 1140px */ @media screen and (min-width: 801px) and (max-width: 1140px) { :root { --layout-base-inner-container: 100%; --layout-base-inner-container-padding: 4.8rem; --layout-base-gutter: 3.2rem; --layout-gap-xxxs: var(--spacing-025); --layout-gap-xxs: var(--spacing-05); --layout-gap-xs: var(--spacing-1); --layout-gap-sm: var(--spacing-2); --layout-gap-md: var(--spacing-3); --layout-gap-lg: var(--spacing-4); --layout-gap-xl: var(--spacing-5); --layout-gap-2xl: var(--spacing-6); --layout-gap-3xl: var(--spacing-8); --layout-gap-4xl: var(--spacing-12); --layout-margin-xxs: var(--spacing-05); --layout-margin-xs: var(--spacing-1); --layout-margin-sm: var(--spacing-2); --layout-margin-md: var(--spacing-3); --layout-margin-lg: var(--spacing-4); --layout-margin-xl: var(--spacing-5); --layout-margin-2xl: var(--spacing-6); --layout-margin-3xl: var(--spacing-10); --layout-margin-4xl: var(--spacing-13); --layout-margin-5xl: var(--spacing-15); --layout-padding-xxs: var(--spacing-05); --layout-padding-xs: var(--spacing-1); --layout-padding-sm: var(--spacing-2); --layout-padding-md: var(--spacing-3); --layout-padding-lg: var(--spacing-4); --layout-padding-xl: var(--spacing-5); --layout-padding-2xl: var(--spacing-6); --layout-padding-3xl: var(--spacing-10); --layout-padding-4xl: var(--spacing-13); } } /* Tablet Portrait: 601px to 800px */ @media screen and (min-width: 601px) and (max-width: 800px) { :root { --layout-base-inner-container: 100%; --layout-base-inner-container-padding: 2.4rem; --layout-base-gutter: 2.4rem; --layout-gap-xxxs: var(--spacing-025); --layout-gap-xxs: var(--spacing-05); --layout-gap-xs: var(--spacing-1); --layout-gap-sm: var(--spacing-2); --layout-gap-md: var(--spacing-3); --layout-gap-lg: var(--spacing-4); --layout-gap-xl: var(--spacing-5); --layout-gap-2xl: var(--spacing-6); --layout-gap-3xl: var(--spacing-8); --layout-gap-4xl: var(--spacing-12); --layout-margin-xxs: var(--spacing-05); --layout-margin-xs: var(--spacing-1); --layout-margin-sm: var(--spacing-2); --layout-margin-md: var(--spacing-3); --layout-margin-lg: var(--spacing-4); --layout-margin-xl: var(--spacing-5); --layout-margin-2xl: var(--spacing-6); --layout-margin-3xl: var(--spacing-10); --layout-margin-4xl: var(--spacing-13); --layout-margin-5xl: var(--spacing-15); --layout-padding-xxs: var(--spacing-05); --layout-padding-xs: var(--spacing-1); --layout-padding-sm: var(--spacing-2); --layout-padding-md: var(--spacing-3); --layout-padding-lg: var(--spacing-4); --layout-padding-xl: var(--spacing-5); --layout-padding-2xl: var(--spacing-6); --layout-padding-3xl: var(--spacing-10); --layout-padding-4xl: var(--spacing-13); } } /* Mobile: max-width 600px */ @media screen and (max-width: 600px) { :root { --layout-base-inner-container: 100%; --layout-base-inner-container-padding: 1.6rem; --layout-base-gutter: 0.8rem; --layout-gap-xxxs: var(--spacing-025); --layout-gap-xxs: var(--spacing-05); --layout-gap-xs: var(--spacing-1); --layout-gap-sm: var(--spacing-2); --layout-gap-md: var(--spacing-3); --layout-gap-lg: var(--spacing-3); --layout-gap-xl: var(--spacing-3); --layout-gap-2xl: var(--spacing-4); --layout-gap-3xl: var(--spacing-6); --layout-gap-4xl: var(--spacing-10); --layout-margin-xxs: var(--spacing-05); --layout-margin-xs: var(--spacing-1); --layout-margin-sm: var(--spacing-2); --layout-margin-md: var(--spacing-3); --layout-margin-lg: var(--spacing-4); --layout-margin-xl: var(--spacing-5); --layout-margin-2xl: var(--spacing-6); --layout-margin-3xl: var(--spacing-10); --layout-margin-4xl: var(--spacing-13); --layout-margin-5xl: var(--spacing-15); --layout-padding-xxs: var(--spacing-05); --layout-padding-xs: var(--spacing-1); --layout-padding-sm: var(--spacing-2); --layout-padding-md: var(--spacing-3); --layout-padding-lg: var(--spacing-4); --layout-padding-xl: var(--spacing-4); --layout-padding-2xl: var(--spacing-4); --layout-padding-3xl: var(--spacing-4); --layout-padding-4xl: var(--spacing-4); } } /* ====================================== *\ 1.2 RADIUS \* ====================================== */ :root { --radius-none: 0rem; --radius-xs: 0.2rem; --radius-sm: 0.4rem; --radius-md: 0.8rem; --radius-lg: 1.6rem; --radius-xl: 3.2rem; --radius-2xl: 6.4rem; --radius-3xl: 36rem; } /* ====================================== *\ 1.3 SIZE \* ====================================== */ :root { --size-025: 0.2rem; --size-05: 0.4rem; --size-1: 0.8rem; --size-2: 1.6rem; --size-3: 2.4rem; --size-4: 3.2rem; --size-5: 4rem; --size-6: 4.8rem; --size-7: 5.6rem; --size-8: 6.4rem; --size-9: 7.2rem; --size-10: 8rem; --size-11: 8.8rem; --size-12: 9.6rem; --size-13: 10.4rem; --size-14: 11.2rem; --size-15: 15rem; } /* ====================================== *\ 1.4 SPACING \* ====================================== */ :root { --spacing-025: 0.2rem; --spacing-05: 0.4rem; --spacing-1: 0.8rem; --spacing-2: 1.6rem; --spacing-3: 2.4rem; --spacing-4: 3.2rem; --spacing-5: 4rem; --spacing-6: 4.8rem; --spacing-7: 5.6rem; --spacing-8: 6.4rem; --spacing-9: 7.2rem; --spacing-10: 8rem; --spacing-11: 8.8rem; --spacing-12: 9.6rem; --spacing-13: 10.4rem; --spacing-14: 11.2rem; --spacing-15: 15rem; } /* ====================================== *\ 1.5 ICON SIZE \* ====================================== */ :root { --icon-size-xs: 1.6rem; --icon-size-sm: 1.8rem; --icon-size-md: 2.4rem; --icon-size-lg: 3rem; --icon-size-xl: 3.8rem; --icon-size-2xl: 4.2rem; --icon-size-3xl: 5.2rem; } /* ====================================== *\ 1.5 TYPOGRAPHY \* ====================================== */ /* Desktop */ :root { --typography-size-heading-heading-xs: 16px; --typography-size-heading-heading-sm: 18px; --typography-size-heading-heading-md: 24px; --typography-size-heading-heading-lg: 30px; --typography-size-heading-heading-xl: 38px; --typography-size-heading-heading-2xl: 42px; --typography-size-heading-heading-3xl: 72px; --typography-line-height-heading-heading-lg: 34px; --typography-line-height-heading-heading-xl: 44px; --typography-line-height-heading-heading-2xl: 52px; --typography-line-height-heading-heading-3xl: 80px; --typography-line-height-heading-heading-xs: 22px; --typography-line-height-heading-heading-sm: 24px; --typography-line-height-heading-heading-md: 30px; --typography-size-body-body-xs: 12px; --typography-size-body-body-sm: 14px; --typography-size-body-body-md: 16px; --typography-size-body-body-lg: 20px; --typography-size-body-body-xl: 24px; --typography-size-body-body-2xl: 32px; --typography-size-body-body-3xl: 36px; --typography-size-accent-accent-lg: 88px; --typography-size-accent-accent-md: 48px; --typography-size-accent-accent-sm: 32px; } /* Tablet Landscape: 801px to 1140px */ @media screen and (min-width: 801px) and (max-width: 1140px) { :root { --typography-size-heading-heading-xs: 16px; --typography-size-heading-heading-sm: 18px; --typography-size-heading-heading-md: 22px; --typography-size-heading-heading-lg: 30px; --typography-size-heading-heading-xl: 36px; --typography-size-heading-heading-2xl: 42px; --typography-size-heading-heading-3xl: 64px; --typography-line-height-heading-heading-lg: 36px; --typography-line-height-heading-heading-xl: 42px; --typography-line-height-heading-heading-2xl: 48px; --typography-line-height-heading-heading-3xl: 64px; --typography-line-height-heading-heading-xs: 20px; --typography-line-height-heading-heading-sm: 24px; --typography-line-height-heading-heading-md: 28px; --typography-size-body-body-xs: 12px; --typography-size-body-body-sm: 14px; --typography-size-body-body-md: 16px; --typography-size-body-body-lg: 20px; --typography-size-body-body-xl: 24px; --typography-size-body-body-2xl: 32px; --typography-size-body-body-3xl: 36px; --typography-size-accent-accent-lg: 88px; --typography-size-accent-accent-md: 48px; --typography-size-accent-accent-sm: 32px; } } /* Tablet Portrait: 601px to 800px */ @media screen and (min-width: 601px) and (max-width: 800px) { :root { --typography-size-heading-heading-xs: 16px; --typography-size-heading-heading-sm: 18px; --typography-size-heading-heading-md: 24px; --typography-size-heading-heading-lg: 30px; --typography-size-heading-heading-xl: 36px; --typography-size-heading-heading-2xl: 42px; --typography-size-heading-heading-3xl: 48px; --typography-line-height-heading-heading-lg: 34px; --typography-line-height-heading-heading-xl: 44px; --typography-line-height-heading-heading-2xl: 52px; --typography-line-height-heading-heading-3xl: 48px; --typography-line-height-heading-heading-xs: 22px; --typography-line-height-heading-heading-sm: 24px; --typography-line-height-heading-heading-md: 24px; --typography-size-body-body-xs: 12px; --typography-size-body-body-sm: 14px; --typography-size-body-body-md: 16px; --typography-size-body-body-lg: 20px; --typography-size-body-body-xl: 24px; --typography-size-body-body-2xl: 32px; --typography-size-body-body-3xl: 36px; --typography-size-accent-accent-lg: 88px; --typography-size-accent-accent-md: 48px; --typography-size-accent-accent-sm: 32px; } } /* Mobile: max-width 600px */ @media screen and (max-width: 600px) { :root { --typography-size-heading-heading-xs: 16px; --typography-size-heading-heading-sm: 16px; --typography-size-heading-heading-md: 20px; --typography-size-heading-heading-lg: 24px; --typography-size-heading-heading-xl: 30px; --typography-size-heading-heading-2xl: 32px; --typography-size-heading-heading-3xl: 40px; --typography-line-height-heading-heading-lg: 30px; --typography-line-height-heading-heading-xl: 36px; --typography-line-height-heading-heading-2xl: 36px; --typography-line-height-heading-heading-3xl: 36px; --typography-line-height-heading-heading-xs: 20px; --typography-line-height-heading-heading-sm: 20px; --typography-line-height-heading-heading-md: 28px; --typography-size-body-body-xs: 12px; --typography-size-body-body-sm: 14px; --typography-size-body-body-md: 16px; --typography-size-body-body-lg: 18px; --typography-size-body-body-xl: 20px; --typography-size-body-body-2xl: 32px; --typography-size-body-body-3xl: 36px; --typography-size-accent-accent-lg: 88px; --typography-size-accent-accent-md: 48px; --typography-size-accent-accent-sm: 32px; } } /* ========================================================================== *\ 2. GENERAL TAGS \* ========================================================================== */ * { box-sizing: border-box; } html { font-size: 62.5%; /* == 10px rem == */ } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { font-size: 1.6rem; /* == 16px em == */ line-height: 150%; font-family: "Plus Jakarta Sans", sans-serif; } p { padding-bottom: 2.4rem; } h1, h2, h3, h4, h5 { font-family: "DM Sans", sans-serif; padding-bottom: 2.4rem; } .heading { font-family: "DM Sans", sans-serif; } .body-xs { font-size: var(--typography-size-body-body-xs); line-height: 125%; } .body-sm { font-size: var(--typography-size-body-body-sm); line-height: 125%; } .body-md { font-size: var(--typography-size-body-body-md); line-height: 125%; } .body-lg { font-size: var(--typography-size-body-body-lg); line-height: 125%; } .body-xl { font-size: var(--typography-size-body-body-xl); } .body-2xl { font-size: var(--typography-size-body-body-2xl); } .body-3xl { font-size: var(--typography-size-body-body-3xl); } .heading-xs { font-size: var(--typography-size-heading-heading-xs); line-height: var(--typography-line-height-heading-heading-xs); } .heading-3xl .accent { font-size: var(--typography-size-accent-accent-lg); } .heading-2xl .accent { font-size: var(--typography-size-accent-accent-md); } .heading-md .accent { font-size: var(--typography-size-accent-accent-sm); } .heading-sm { font-size: var(--typography-size-heading-heading-sm); line-height: var(--typography-line-height-heading-heading-sm); } .heading-md { font-size: var(--typography-size-heading-heading-md); line-height: var(--typography-line-height-heading-heading-md); } .heading-lg { font-size: var(--typography-size-heading-heading-lg); line-height: var(--typography-line-height-heading-heading-lg); } .heading-xl { font-size: var(--typography-size-heading-heading-xl); line-height: var(--typography-line-height-heading-heading-xl); } .heading-2xl { font-size: var(--typography-size-heading-heading-2xl); line-height: var(--typography-line-height-heading-heading-2xl); } .heading-3xl { font-size: var(--typography-size-heading-heading-3xl); line-height: var(--typography-line-height-heading-heading-3xl); } .eyebrow { font-size: 1.4rem; line-height: 150%; letter-spacing: 1px; font-weight: 600; } a { transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; color: var(--colour-brand-blue); text-decoration: underline; } a:hover { color: var(--colour-brand-blue); text-decoration-thickness: 2px; } a:hover { outline: 0; } :focus { outline: 3px solid var(--colour-brand-yellow); } hr { } .testimonials { display: block; padding-top: 12rem; } blockquote { display: block; font-size: var(--typography-size-body-body-md); color: #000; } blockquote cite { font-size: 1.2rem; color: #000; display: block; margin-top: 2.4rem; font-weight: 600; } ::selection { background: #000000; color: #ffffff; } ::-moz-selection { background: #000000; color: #ffffff; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== *\ 3. STRUCTURE \* ========================================================================== */ #wrapper, .wrapper { overflow-x: hidden; } #wrapper:focus, .wrapper:focus { outline: none; } .skip-to-content-link { display: block; text-align: center; font-weight: bold; padding: 10px 20px; background: #ffffff; box-shadow: 0px 5px 10px rgba(0,0,0,0.4); left: 10px; top: 10px; position: absolute; z-index: 999999; transform: translateY(-200%); transition: transform 0.3s; } .skip-to-content-link:focus { transform: translateY(0%); } .header { display: block; position: fixed; top: 0; left: 0; width: 100%; transition: .5s ease-in-out; padding: 3.2rem 0 2.4rem 0; z-index: 1000; } .header.nav-up { top:-19.6rem; } .header.solid { background: var(--colour-brand-yellow); box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.2); } .header .content { display: flex; flex-direction: row; justify-content: space-between; } .header .logo { display: block; width: 23.5rem; } .c-hamburger { display: none; position: relative; z-index: 99999999; margin: 1.6rem 0 0 0; padding: 0; width: 30px; height: 30px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; } .c-hamburger:focus { outline: none; } .c-hamburger span { display: block; position: absolute; top: 6px; left: 0px; right: 0px; height: 3px; background: #ffffff; } .c-hamburger span::before, .c-hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 3px; background-color: #ffffff; content: ""; } .c-hamburger span::before { top: -9px; } .c-hamburger span::after { bottom: -9px; } .c-hamburger--htx { background:transparent; } .c-hamburger--htx span { transition: background 0s 0.3s; } .c-hamburger--htx span::before, .c-hamburger--htx span::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; } .c-hamburger--htx span::before { transition-property: top, transform; } .c-hamburger--htx span::after { transition-property: bottom, transform; } /* active state, i.e. menu open */ .c-hamburger--htx.is-active { background: transparent; } .c-hamburger--htx.is-active span { background: none; } .c-hamburger--htx.is-active span::before { top: 0; transform: rotate(45deg); background: #ffffff; } .c-hamburger--htx.is-active span::after { bottom: 0; transform: rotate(-45deg); background: #ffffff; } .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after { transition-delay: 0s, 0.3s; } .header .menu { display: block; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; } .header .menu ul { display: flex; flex-direction: row; gap: 3.2rem; align-items: center; } .header .menu ul li { display: block; margin: 0; } .header .menu ul li a { display: block; font-size: 1.4rem; line-height: 2rem; letter-spacing: 1px; font-weight: bold; color: var(--colour-base-black); text-transform: uppercase; padding: 0.8rem 0; overflow: hidden; position: relative; text-decoration: none; } .header .menu ul li a:hover { text-decoration: none; color: var(--colour-base-black); } .header .menu ul li.current_page_item a { text-decoration: none; color: var(--colour-brand-blue); } .header .menu ul li a:before { content: ""; position: absolute; bottom: 0; left: -100%; height: 0.3rem; width: 100%; background: var(--colour-brand-blue); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; } .header .menu ul li a:hover:before, .header .menu ul li.current_page_item a:before { left: 0; } .header .menu ul li:last-child a { padding: 0.8rem 1.6rem; border: 0.3rem solid var(--colour-base-white); border-radius: 0.8rem; background: transparent; } .header .menu ul li:last-child a:hover, .header .menu ul li.current_page_item:last-child a { background: var(--colour-base-white); } .header .menu ul li:last-child a:before { display: none; } .hero { padding: 12rem 0 18rem 0; background: var(--colour-brand-yellow); color: var(--colour-base-black); position: relative; } .hero:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-light-blue-left-bottom.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .hero.stitch-white:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-white-left-bottom.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .hero.stitch-blue:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-blue-left.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .footer { display: block; width: 100%; color: var(--colour-base-white); background: var(--colour-brand-blue); padding: 18.4rem 0 14.4rem; position: relative; } .footer:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-light-blue-right.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: top center; } .footer hr { display: block; width: 100%; height: 0; border-top: none; border-right: none; border-left: none; border-bottom: 2px solid var(--colour-base-white); } .footer-menu { display: block; } .footer-menu ul { display: flex; flex-flow: row wrap; column-gap: 4rem; row-gap: 0.8rem; } .footer-menu ul li { display: block; } .footer-menu ul li a { font-size: 1.4rem; line-height: 2rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; text-decoration: none; color: var(--colour-base-white); } .footer-menu ul li a:hover { color: var(--colour-brand-yellow); } .footer .legal { font-size: 1.4rem; line-height: 2rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; } .footer-logo { display: block; max-width: 14.4rem; margin: 0 auto 3.2rem auto; } ul.social { display: flex; flex-direction: row; gap: 1.6rem; justify-content: center; margin: 0 !important; } ul.social li { display: block; } ul.social li a { display: block; width: 2.4rem; } ul.social li a:hover { transform: scale(1.1,1.1); } ul.social.align-left { justify-content: flex-start; } /* ========================================================================== *\ 4. HOME PAGE STYLES \* ========================================================================== */ .hero.home { background: url('images/watermark.svg'), var(--colour-brand-yellow); background-position: top 17.6rem right; background-repeat: no-repeat; background-size: 69.6rem 31.6rem; color: var(--colour-base-black); position: relative; } .hero.home:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-blue-left.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } #mask { display: block; float: left; position: relative; width: 547px; height: 487px; } #cycler{position:relative;} #cycler svg{position:absolute;z-index:1} #cycler svg.active{z-index:3} #door { display: block; width: 146px; height: 176px; position: absolute; z-index: 5; bottom: 2.4rem; left: 50%; margin-left: -73px; } .video-container { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100%) */ overflow: hidden; } .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } ul.clients { display: grid; grid-template-columns: repeat(5, 1fr); margin: 2.4rem 0 0 0 !important; padding: 0; row-gap: 4.8rem; column-gap: 0.8rem; } ul.clients li { display: block; margin: 0 !important; } ul.clients li img { display: block; filter: grayscale(100%); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; } ul.clients li img:hover { filter: grayscale(0); } .sbi_follow_btn a { display: inline-block !important; padding: 15px 40px !important; margin: 30px 12px !important; font-size: 14px !important; line-height: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; color: #353535 !important; background: #F9D755 !important; border: solid 2px #F9D755 !important; border-radius: 5px !important; box-shadow: 0px 2px 5px rgba(0,0,0,0.25) !important; } .sbi_follow_btn a:hover { background: #00A3E3 !important; color: #ffffff !important; border: 2px solid #00A3E3 !important; } .sbi_load_btn { display: inline-block !important; background: #ffffff !important; color: #00A3E3 !important; padding: 15px 40px !important; margin: 30px 12px !important; font-size: 14px !important; line-height: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.7px !important; border: solid 2px #00A3E3 !important; border-radius: 5px !important; box-shadow: 0px 2px 5px rgba(0,0,0,0.25) !important; } #sb_instagram a.sbi_load_btn { border-bottom: solid 2px #00A3E3 !important; } .sbi_load_btn:hover { background: #00A3E3 !important; color: #ffffff !important; border-color: #00A3E3 !important; } .sbi_follow_btn a i { display: none !important; } /* ========================================================================== *\ 5. PAGE AND SINGLE POST STYLES \* ========================================================================== */ .main ul, .main ol { margin: 0 auto 20px 40px; list-style-position: outside; } .main .wp-block-column ul li, .main .wp-block-column ol li { margin-left: 1em; font-size: 16px; line-height: 23px; } .main ul li, .main ol li { margin-bottom: 10px; } .main ul ul, .main ul ol, .main ol ul, .main ol ol { margin-top: 10px !important; margin-left: 40px; } .main ul ol li { list-style-type: decimal; } .main ol ul li { list-style-type: disc; } .main ol ol li, .main ol.alpha li { list-style-type: lower-alpha; } .main ul ul li { list-style-type: circle; } .main ul li { list-style-type: disc; } .main ol li { list-style-type: decimal; } .main .entry-content ul, .main .entry-content ol { margin: 0 auto 40px auto; } .section { display: block; width: 100%; position: relative; } .bg-white { background: var(--colour-base-white); } .bg-light-blue { background: var(--colour-brand-blue-light); } .bg-yellow { background: var(--colour-brand-yellow); } .bg-blue { background: var(--colour-brand-blue); } .section.stitch-blue-left-bottom, .section.stitch-light-blue-left-bottom, .section.stitch-white-left-bottom { padding-bottom: 18.4rem; } .section.stitch-blue-left-bottom:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-blue-left.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .section.stitch-light-blue-left-bottom:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-light-blue-left.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .section.stitch-white-left-bottom:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-white-left.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .section.stitch-blue-right-top, .section.stitch-light-blue-right-top, .section.stitch-white-right-top, .section.stitch-yellow-right-top, .section.stitch-white-left-top { padding-top: 18.4rem; } .section.stitch-blue-right-top:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-blue-right.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .section.stitch-light-blue-right-top:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-light-blue-right.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .section.stitch-white-right-top:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-white-right.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .section.stitch-yellow-right-top:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-yellow-right.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } .section.stitch-white-left-top:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 13.6rem; background: url('images/stitch-white-left.svg'); background-size: 100% 13.6rem; background-repeat: no-repeat; background-position: bottom center; } ul.work-tabs { display: flex; flex-direction: row; gap: 2.4rem; align-items: center; margin: 0 0 4rem 0 !important; } ul.work-tabs li { display: block; padding: 1rem; border-radius: 0.8rem; color: var(--colour-brand-blue); background: var(--colour-base-white); font-size: 1.2rem; line-height: 1.6rem; letter-spacing: 1.5px; font-weight: bold; text-transform: uppercase; cursor: pointer; margin: 0 !important; transition: all 0.3s ease-in-out; } ul.work-tabs li.active, ul.work-tabs li:hover { color: var(--colour-base-black); background: var(--colour-brand-yellow); } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 !important; gap: var(--layout-gap-lg); } .work-grid.half { grid-template-columns: repeat(2, 1fr); } .work-grid .work-card { display: block; border-radius: 0.8rem; overflow: hidden; position: relative; padding-bottom: 9.6rem; transition: all 0.3s ease-in-out; background: var(--colour-brand-blue); } .work-grid .work-card.full { background: var(--colour-base-white); padding: var(--layout-padding-2xl); } .work-grid .work-card img { display: block; width: 100%; } .work-grid .work-card .house { display: block; flex: 0 0 6rem; width: 6rem; height: 5.4rem; background: url('images/ico-house-white.svg'); background-size: 6rem 5.4rem; background-repeat: no-repeat; } .work-grid .work-card:hover .house { background: url('images/ico-house-invert.svg'); background-size: 6rem 5.4rem; background-repeat: no-repeat; } .work-grid .work-card .work-title { background: var(--colour-brand-blue); color: var(--colour-base-white); min-height: 13rem; border-radius: 0 0 0.8rem 0.8rem; position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--layout-padding-md) var(--layout-padding-lg); transition: all 0.3s ease-in-out; overflow: hidden; } .work-grid .work-card .work-title img { max-width: 6rem; } .work-grid .work-card .work-title .work-category { font-size: 1.4rem; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: block; } .work-grid .work-card .work-title h3 { padding-bottom: 0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; } .work-grid .work-card .more-details { height: 0; overflow: hidden; font-size: 1.2rem; line-height: 125%; padding: 1.6rem 0 0 0; transition: all 0.3s ease-in-out; } .work-grid .work-card .more-details ul { margin-left: 1.6rem !important; } .work-grid.alt .work-card:hover .work-title { background: var(--colour-base-white); } .work-grid .work-card:hover .work-title { background: var(--colour-brand-yellow); color: var(--colour-base-black); } .work-grid .work-card:hover .more-details { height: auto; } /* .work-grid .work-card:hover .work-title .subheading { display: none; } */ /* ====================================== *\ 5.1 ABOUT \* ====================================== */ .people { display: inline-block; margin-bottom: 60px; text-align: center; color: #ffffff; cursor: pointer; font-size: 1.4rem; line-height: 2rem; letter-spacing: 1.5px; text-transform: uppercase; vertical-align: top; } .people .heading { text-transform: capitalize; letter-spacing: 0; line-height: 150%; } .people p { padding-bottom: 0; display: block; width: 100%; } .people p span { color: #F9D755; font-weight: bold; } .people strong { font-size: 14px; line-height: 14px; text-transform: uppercase; letter-spacing: 1px; } .photo { display: inline-block; border-radius: 250px; background-position: center top !important; background-size: 250px auto !important; background-repeat: no-repeat !important; overflow: hidden; text-indent: -999px; margin-bottom: 10px; } .photo:hover { background-position: center bottom !important; } .photo.thumbnail { width: 250px; height: 250px; } .photo.full { width: 380px; height: 380px; border-radius: 0; background-position: center bottom !important; background-size: 380px auto !important; margin-bottom: 30px; } .photo.full:hover { background-position: center top !important; } #closeBtn { display: block; position: absolute; top: 30px; right: 30px; width: 110px; height: 50px; font-size: 1.6rem; text-decoration: none; line-height: 50px; font-weight: bold; text-transform: uppercase; color: var(--colour-grey-800); cursor: pointer; background: url('images/close.svg'); background-position:right center; background-repeat: no-repeat; } #overlay { display: block; width: 100%; height: 100%; min-height: 100%; padding: 120px 0 100px 0; position: fixed; bottom: 100%; left: 0; z-index: 999999; background: #ffffff; overflow-y: auto; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; } #overlay.active { bottom: 0; } .overlayBio { display: none; height: 100%; width: 100%; } #overlay p { padding-bottom: 1.6rem; } #overlay ul { margin: 0 0 30px 20px; } #overlay ul li { margin-bottom: 5px; display: block; } #overlay ul li::before { content: "●"; color: var(--colour-brand-yellow); display: inline-block; width: 1em; margin-left: -1em; } /* ====================================== *\ 5.2 BLOG \* ====================================== */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 !important; gap: var(--layout-gap-lg); } .blog-grid .blog-card { display: flex; flex-direction: column; border-radius: 0.8rem; transition: all 0.3s ease-in-out; text-decoration: none; height: 100%; } .blog-grid .blog-card:hover .blog-title { background: var(--colour-brand-yellow); color: var(--colour-base-black); } .blog-grid .blog-card img { display: block; width: 100%; border-radius: 0.8rem 0.8rem 0 0; flex-shrink: 0; } .blog-grid .blog-card .blog-title { background: var(--colour-brand-blue); color: var(--colour-base-white); border-radius: 0 0 0.8rem 0.8rem; width: 100%; padding: var(--layout-padding-md) var(--layout-padding-lg); transition: all 0.3s ease-in-out; height: 100%; } .blog-grid .blog-card .blog-title p { padding-bottom: 0; } /* ====================================== *\ 5.4 PAGINATION \* ====================================== */ .pagination { margin: 4rem 0 0 0; text-align: right; } .pagination ul { margin: 0; } .pagination li a, .pagination li a:hover, .pagination li.active a, .pagination li.disabled { color: var(--colour-brand-blue); text-decoration:none; color: var(--colour-base-black); text-transform: uppercase; letter-spacing: 1.5px; font-weight: bold; font-size: 1.4rem; } .pagination li { display: inline; } .pagination li a, .pagination li a:hover, .pagination li.active a, .pagination li.disabled { background-color: transparent; border: 3px solid transparent; border-radius: 8px; cursor: pointer; padding: 10px; } .pagination li a:hover, .pagination li.active a { color: var(--colour-brand-blue); border: 3px solid var(--colour-brand-blue); } /* ========================================================================== *\ 6. GENERAL CLASSES \* ========================================================================== */ .noscroll { overflow: hidden; } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem !important; line-height: 150%; letter-spacing: 1px; color: var(--colour-base-white); background: var(--colour-brand-blue); border: 0.3rem solid var(--colour-brand-blue); padding: 1rem 1.6rem; border-radius: 0.8rem !important; text-decoration: none; font-weight: bold !important; text-transform: uppercase; overflow: hidden; z-index: 0; } .btn.alt { background: var(--colour-brand-yellow); color: var(--colour-base-black); } .btn::before { content: ""; position: absolute; top: 0; right: -200%; width: 200%; height: 100%; background: var(--colour-base-black); clip-path: polygon( 20% 0, 100% 0, 100% 100%, 0 100% ); transition: right 0.4s ease; z-index: -1; } .btn:hover::before { right: 0; } .btn:hover { color: var(--colour-base-white); border-color: var(--colour-base-black); } .btn.alt:hover { color: var(--colour-base-white); border-color: var(--colour-base-black); } .back-btn { display: flex; flex-direction: row; gap: 0.8rem; align-items: center; color: var(--colour-base-black); font-size: 1.2rem; letter-spacing: 1.5px; font-weight: bold; text-decoration: none; text-transform: uppercase; margin-bottom: 0.8rem !important; } .back-btn:before { content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url('images/ico-left-arrow-alt.svg'); background-position: center center; background-repeat: no-repeat; background-size: 1.6rem 1.6rem; } .back-btn:hover:before { transform: translateX(-0.4rem); } .clear { clear:both; } .clear.sm, .wp-block-spacer.sm { height: 2rem !important; } .clear.md, .wp-block-spacer.md { height: 4rem !important; } .clear.lg, .wp-block-spacer.lg { height: 6rem !important; } .clear.xl, .wp-block-spacer.xl { height: 8rem !important; } .middle{ width:75%; transition:.5s ease; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%) } .content { width: 1140px; margin: 0px auto; } .narrow { max-width: 84.8rem; margin: 0 auto; } .extra-narrow { max-width: 77.2rem; margin: 0 auto; } .text-blue { color: var(--colour-brand-blue); } .text-yellow { color: var(--colour-brand-yellow); } .text-white { color: var(--colour-base-white); } .map { display: block; width: 100%; height: 44rem; } .accordion { width: 100%; } .accordion-item { background-color: var(--colour-brand-blue); color: var(--colour-base-white); cursor: pointer; transition: background-color 0.3s ease; margin-bottom: 1.6rem; border-radius: var(--radius-lg); } .accordion-header { display: flex; justify-content: space-between; gap: var(--layout-gap-lg); align-items: center; padding: var(--layout-padding-md) var(--layout-padding-lg); } .accordion-text { flex: 1; display: flex; flex-direction: column; gap: var(--layout-gap-xs); } .accordion-text h3, .accordion-text p { padding-bottom: 0; } .accordion-text .expanded-text { display: none; opacity: 0; transition: opacity 0.3s ease; } .accordion-item:hover { background-color: var(--colour-brand-yellow); color: var(--colour-base-black); } .accordion-item.active { background-color: var(--colour-brand-yellow); color: var(--colour-base-black); } .accordion-button { width: 40px; height: 40px; border-radius: 50%; background-color: var(--colour-brand-yellow); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s ease; color: var(--colour-base-black); } .accordion-button svg { stroke: currentColor; stroke-width: 3; stroke-linecap: round; transition: transform 0.3s ease; } .accordion-item:hover .accordion-button { background-color: var(--colour-brand-blue); color: var(--colour-base-white); } .accordion-item.active .accordion-button { background-color: var(--colour-brand-blue); color: var(--colour-base-white); } .accordion-button .line-vertical { transform-origin: center; transition: transform 0.3s ease, opacity 0.3s ease; } .accordion-item.active .line-vertical { transform: rotate(90deg); opacity: 0; } .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ========================================================================== *\ 7. FORM STYLES \* ========================================================================== */ .forminator-row { margin-bottom: 1.6rem !important; } .forminator-row .align-right { float: right; } input { -webkit-appearance: none; border-radius: 0; } label { color: var(--colour-grey-600) !important; font-size: 1.4rem !important; font-weight: 600; margin-bottom: 0.4rem !important; display: block !important; } .gform_footer { text-align: right; padding-top: 40px !important; } .gform_validation_errors h2 { padding-bottom: 0px; } .gform_fileupload_rules { color: #000000; font-style: italic; } .gform_wrapper .gfield_required { color: red !important; } .name_first label, .name_last label, .ginput_left label, .ginput_right label { font-weight: lighter; font-size: 12px !important; } input[type=text], input[type=password], input[type=email], input[type=tel] { padding: 1.2rem !important; margin: 0 0 0.4rem 0; border-radius: 0.4rem; background-color: #fff; color: var(--colour-base-black); display: block; font-size: 1.4rem !important; width: 100% !important; border: 1px solid var(--colour-grey-300); font-family: "Plus Jakarta Sans", sans-serif; } textarea { padding: 1.2rem !important; margin: 0 0 0.4rem 0; border-radius: 0px !important; background-color: #fff; color: var(--colour-base-black); display: block; line-height: 125%; font-size: 1.4rem !important; width: 100% !important; height: 220px; font-family: "Plus Jakarta Sans", sans-serif; border: 1px solid var(--colour-grey-300); border-radius: 0.4rem !important; } input[type=submit], input[type=button] { display: inline-block; color: #ffffff; border-radius: 0px; padding: 10px 40px; font-size: 16px !important; line-height: 20px; text-decoration: none; background-color: #111111; border: 2px solid #111111; transition: .5s ease-in-out; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; } input[type=submit]:hover, input[type=button]:hover { color: #ffffff; background-color: #000000; border-color: #000000; } input[type=submit]:focus, input[type=button]:focus { background-color: #000000; color: #ffffff; border-color: #000000; } select { display: block; width: 100% !important; height: 44px !important; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0px 60px 0 20px !important; margin-bottom: 0px; border: 1px solid var(--colour-grey-600); border-radius: 0.4rem !important; color: var(--colour-base-black); opacity: 1; font-size: 1.4rem !important; cursor: pointer; -webkit-border-radius: 3px !important; background-image: url('images/select.svg') !important; background-position: right 20px center !important; background-repeat: no-repeat !important; background-size: 2.4rem 2.4rem !important; background-color: #ffffff !important; } /* Main container (replaces the