/** * Author: Shadow Themes * Author URL: https://shadow-themes.com */ /* TABLET: Landscape ================= */ @media only screen and (max-width: 1200px) { /* === PSWP === */ .pswp__button, .pswp__ui--fit .pswp__top-bar button.pswp__button { width: 48px; height: 48px; } /* === Grid === */ .stg-row > div[class*='qa-t-grid'], [class*='qa-t-grid'] { display: grid; grid-column-gap: var(--stg-gap); grid-row-gap: var(--stg-gap); } .qa-t-grid-1col { grid-template-columns: repeat(1, 1fr); } .qa-t-grid-2cols { grid-template-columns: repeat(2, 1fr); } .qa-t-grid-3cols { grid-template-columns: repeat(3, 1fr); } .qa-t-grid-4cols { grid-template-columns: repeat(4, 1fr); } .qa-t-grid-5cols { grid-template-columns: repeat(5, 1fr); } .qa-t-grid-6cols { grid-template-columns: repeat(6, 1fr); } /* Fullwidth Sections */ section.t-is-fullwidth { max-width: 100svw; --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); margin-left: calc(-1 * var(--qa-fw-spacing)); margin-right: calc(-1 * var(--qa-fw-spacing)); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } section.t-is-fullwidth.t-is-stretched { padding-left: 0; padding-right: 0; } section.t-is-fullwidth.t-is-stretched > .t-is-boxed { --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } /* Sections Spacing */ section[data-tp-padding="none"] { padding-top: 0; padding-bottom: 0; } section[data-tp-padding="top"] { padding-bottom: 0; } section[data-tp-padding="bottom"] { padding-top: 0; } section[data-tp-padding="small"] { padding: calc(0.5 * var(--qa-section-gap)) 0; } /* === CTA BLOCKS === */ .qa-masked-cta .qa-masked-content { max-width: 30%; } .qa-masked-cta .qa-cta-title { max-width: 80%; } .stg-cta-with-image { --this-spacing: var(--stg-large-gap); } [class*='stg-col-'] > div.qa-offset-image { width: calc(100% - var(--this-offset) - var(--this-spacing)); } /* === CONTACTS PAGE === */ .qa-framed-socials a { width: 36px; height: 36px; } iframe.qa-google-map { max-height: 309px; } /* === PORTFOLIO === */ .qa-slider-nav.on-sides { top: calc(50% - 36px) } .qa-slider-nav.on-sides a { width: 48px; height: 72px; } .qa-next-post.qa-icon-link .qa-icon-wrap { width: 128px; height: 128px; } .qa-next-post .qa-icon { width: 36px; height: 36px; } /* === PSWP === */ button.pswp__button.pswp__button--close, .pswp__top-bar button.pswp__button, .pswp__ui--fit .pswp__top-bar button.pswp__button { right: var(--stg-small-gap); top: var(--stg-small-gap); position: absolute; } } /* MOBILE MENU =========== */ @media only screen and (max-width: 960px) { .qa-active-menu-ind, .qa-header-inner { display: none; } .qa-mobile-header-inner { display: flex; min-height: 44px; justify-content: space-between; align-items: center; padding: var(--qa-header-spacing) var(--stg-gap); width: 100%; } .qa-mobile-menu-toggler { width: 44px; height: 44px; background: var(--qa-s-accent); transition: background-color 0.3s; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 8px; } .qa-mobile-menu-toggler::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; display: block; border: 1px solid var(--qa-s-accented-text); opacity: 0.15; border-radius: inherit; transition: opacity 0.3s; will-change: opacity; z-index: 1; } .qa-mobile-menu-toggler i { width: 40px; height: 40px; position: relative; z-index: 3; } .qa-mobile-menu-toggler span { background: var(--qa-s-accented-text); width: 18px; height: 2px; border-radius: 2px; display: block; position: absolute; left: 11px; transform-origin: 0 50%; transition: transform 0.3s, background-color 0.3s; will-change: transform; z-index: 5; } .qa-mobile-menu-toggler span:nth-child(1) { top: calc(50% - 7px); } .qa-mobile-menu-toggler span:nth-child(2) { top: calc(50% - 1px); transform-origin: 50% 50%; } .qa-mobile-menu-toggler span:nth-child(3) { top: calc(50% + 5px); transform: scale(0.667, 1); } /* Menu Toggler close state */ .show-menu .qa-mobile-menu-toggler { background: transparent; } .show-menu .qa-mobile-menu-toggler::before { opacity: 1; } .show-menu .qa-mobile-menu-toggler span:nth-child(1) { transform: rotate(45deg) scale(1.35,1) translate(-1px, -2px); background-color: var(--qa-s-heading); } .show-menu .qa-mobile-menu-toggler span:nth-child(2) { transform: scale(0, 1); background-color: var(--qa-s-heading); } .show-menu .qa-mobile-menu-toggler span:nth-child(3) { transform: rotate(-45deg) scale(1.35,1) translate(-1px, 2px); background-color: var(--qa-s-heading); } /* Mobile Menu Container */ .qa-mobile-nav { display: block; } .show-menu .qa-mobile-nav { transform: translate(0); pointer-events: all; } body.show-menu.is-unloading .qa-mobile-nav { transform: translateX(100%); pointer-events: none; } .qa-mobile-nav::-webkit-scrollbar { width: 0; } .qa-mobile-nav::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(to top, transparent, var(--qa-s-border)); ; } .qa-mobile-nav::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, transparent 25%, var(--qa-s-body-bg) 100%); } /* Mobile Menu */ .qa-mobile-menu { padding: var(--stg-large-gap); margin: 0; position: relative; z-index: 5; } .qa-mobile-menu > li.current-menu-parent > a::before, .qa-mobile-menu > li.current-menu-item > a::before, .qa-mobile-menu > li.current-menu-ancestor > a::before, .qa-mobile-menu .sub-menu > li.current-menu-parent > a::before, .qa-mobile-menu .sub-menu > li.current-menu-item > a::before, .qa-mobile-menu .sub-menu > li.current-menu-ancestor > a::before { content: ''; position: absolute; left: calc(-1 * var(--stg-large-gap)); top: 50%; display: block; width: var(--stg-gap); height: 2px; border-radius: 0 2px 2px 0; background: var(--qa-s-heading); } .qa-mobile-menu .sub-menu > li.current-menu-parent > a::before, .qa-mobile-menu .sub-menu > li.current-menu-item > a::before, .qa-mobile-menu .sub-menu > li.current-menu-ancestor > a::before { opacity: 1; width: var(--stg-small-gap); left: calc(-1 * var(--stg-gap) + 2px); transform: translateY(-1px); } .qa-mobile-menu a { color: var(--qa-c-menu); display: block; position: relative; padding: 16px 0; } .qa-mobile-menu .sub-menu { padding-left: var(--stg-gap); position: relative; display: none; } .qa-mobile-menu .sub-menu a { padding: 12px 0; } .qa-mobile-menu .sub-menu::before { content: ''; width: 2px; height: 100%; position: absolute; left: 0; top: 0; background: var(--qa-s-heading); opacity: 0.15; border-radius: 2px; } .qa-mobile-menu li { margin: 0; padding: 0; list-style: none; font-family: var(--qa-t-menu-ff); font-weight: var(--qa-t-menu-fw); font-size: var(--qa-t-menu-fs); line-height: var(--qa-t-menu-lh); position: relative; } .qa-mobile-menu ul.sub-menu li { font-family: var(--qa-t-submenu-ff); font-weight: var(--qa-t-submenu-fw); font-size: var(--qa-t-submenu-fs); line-height: var(--qa-t-submenu-lh); } .qa-mobile-menu li.current-menu-parent > a, .qa-mobile-menu li.current-menu-item > a, .qa-mobile-menu li.current-menu-ancestor > a { color: var(--qa-c-menu-active); } .qa-mobile-menu li.menu-item-has-children > a::after { content: ''; width: var(--qa-t-menu-fs); height: var(--qa-t-menu-fs); background: var(--qa-c-menu); transition: background-color 0.3s, transform 0.3s; display: inline-block; vertical-align: middle; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-image: var(--icon-chevron-down); mask-image: var(--icon-chevron-down); transform: translateY(-1px) rotate(-90deg); position: absolute; right: -24px; width: 36px; height: 36px; top: calc(50% - 18px); } .qa-mobile-menu li.current-menu-parent.menu-item-has-children > a::after, .qa-mobile-menu li.current-menu-item.menu-item-has-children > a::after, .qa-mobile-menu li.current-menu-ancestor.menu-item-has-children > a::after { background: var(--qa-c-menu-active); } .qa-mobile-menu li.menu-item-has-children > a.is-active::after { transform: translateY(-1px) rotate(0deg); } /* Divider */ ul.qa-mobile-menu li.qa-menu-divider { position: relative; padding: 12px 0; height: 1px; pointer-events: none; } ul.qa-mobile-menu li.qa-menu-divider::after { content: ''; width: 100%; height: 1px; display: block; background: var(--qa-s-heading); position: absolute; left: 0; top: 12px; opacity: 0.1; } /* Overlay */ .qa-mobile-menu-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 86; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: opacity; background: var(--qa-s-nav); } .show-menu .qa-mobile-menu-overlay { pointer-events: all; opacity: 0.5; } } /* MOBILE GRID =========== */ @media only screen and (max-width: 960px) { .qa-bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: var(--stg-gap); grid-auto-flow: row; } .qa-bento-grid .is-medium { overflow: hidden; } /* Type 01 */ .qa-bento-grid .is-large:first-child { grid-area: 1 / 1 / 3 / 3; } .qa-bento-grid .is-medium:nth-child(2) { grid-area: 3 / 1 / 4 / 3; } /* Type 02 */ .qa-bento-grid .is-medium:last-child { grid-area: 4 / 1 / 5 / 3; } /* Type 03 */ .qa-bento-grid .is-medium:first-child { grid-area: 1 / 1 / 2 / 3; } .qa-bento-grid .is-large:last-child { grid-area: 3 / 1 / 5 / 3; } /* Type 04 */ .qa-bento-grid .is-medium:nth-child(3) { grid-area: 2 / 1 / 3 / 3; } } /* TABLET: Portrait Only ===================== */ @media only screen and (min-width: 740px) and (max-width: 960px) { .qa-large-text.qa-tp-normal-text { font-size: var(--qa-t-content-fs); line-height: var(--qa-t-content-lh); letter-spacing: var(--qa-t-content-ls); font-weight: var(--qa-t-content-fw); } /* Fullwidth Sections */ section.tp-is-fullwidth { max-width: 100svw; --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); margin-left: calc(-1 * var(--qa-fw-spacing)); margin-right: calc(-1 * var(--qa-fw-spacing)); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } section.tp-is-fullwidth.tp-is-stretched { padding-left: 0; padding-right: 0; } section.tp-is-fullwidth.tp-is-stretched > .tp-is-boxed { --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } /* Grid Portfolio */ .qa-tp-centered-last-item.qa-tp-grid-2cols > div:nth-child(odd):last-child { transform: translateX(calc(50% + 0.5 * var(--stg-gap))); } /* Icon Boxes */ .qa-icon-box .qa-box-icon { width: 48px; height: 48px; } .qa-icon-box i { width: 24px; height: 24px; } .qa-icon-box h4 { padding-right: calc(48px + var(--stg-small-gap)); } } /* TABLET: Portrait ================ */ @media only screen and (max-width: 960px) { /* === Grid === */ .stg-row > div[class*='qa-tp-grid'], [class*='qa-tp-grid'] { display: grid; grid-column-gap: var(--stg-gap); grid-row-gap: var(--stg-gap); } .qa-tp-grid-1col { grid-template-columns: repeat(1, 1fr); } .qa-tp-grid-2cols { grid-template-columns: repeat(2, 1fr); } .qa-tp-grid-3cols { grid-template-columns: repeat(3, 1fr); } .qa-tp-grid-4cols { grid-template-columns: repeat(4, 1fr); } .qa-tp-grid-5cols { grid-template-columns: repeat(5, 1fr); } .qa-tp-grid-6cols { grid-template-columns: repeat(6, 1fr); } .qa-tp-stretch-last-item.qa-tp-grid-2cols > div:nth-child(odd):last-child { grid-column: 1 / -1; } .qa-tp-stretch-last-item.qa-tp-grid-2cols > div:nth-child(odd):last-child.stg-aspect-square, .qa-tp-stretch-last-item.qa-tp-grid-2cols > div:nth-child(odd):last-child .stg-aspect-square { aspect-ratio: 2/1; } /* Sections Spacing */ section[data-tp-padding="none"] { padding-top: 0; padding-bottom: 0; } section[data-tp-padding="top"] { padding-bottom: 0; } section[data-tp-padding="bottom"] { padding-top: 0; } section[data-tp-padding="small"] { padding: calc(0.5 * var(--qa-section-gap)) 0; } /* === Home Hero Sections === */ /* Type 01 */ .qa-hero-type01 h1.qa-page-title { font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); line-height: var(--qa-t-h2-lh); } .qa-hero-type01 .qa-masked-content { width: 80px; height: 80px; } .qa-hero-type01 .qa-masked-content a.qa-square-button { width: 68px; height: 68px; } .qa-hero-type01 .qa-masked-content a span { width: 24px; height: 24px; } /* Type 02 */ .qa-hero-type02 > .stg-row > .stg-col-6:first-child { position: relative; z-index: 5; } .qa-hero-type02 .qa-page-title { padding: 0; margin-bottom: var(--stg-gap); } .qa-hero-type02 .stg-row.stg-no-gap > div.stg-tp-offset-6 { margin: -70% 0 0 50%; position: relative; z-index: 3; } .qa-hero-type02 .stg-col-4 > img { margin-left: var(--stg-gap); } /* Type 03 */ .qa-hero-type03 .qa-hero-title-wrap { flex-direction: column; } .qa-hero-type03 .qa-hero-title-wrap h1.qa-page-title { max-width: 100%; margin-bottom: var(--stg-gap); } .qa-hero-type03 .qa-hero-title-wrap > div { max-width: 45%; align-self: flex-end; } .qa-hero-type03 .qa-hero-media-content { max-width: 45%; } .qa-hero-type03 .qa-tags-list { max-width: 50%; } /* Type 04 */ .qa-hero-type04 .qa-large-text { max-width: 100%; } .qa-hero-type04 .qa-hero-info-line { margin-bottom: var(--stg-large-gap); } /* Type 07 */ .qa-hero-type07 .qa-page-title { font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); line-height: var(--qa-t-h2-lh); padding: 0; } .qa-hero-type07 .qa-hero-social-proof { margin-top: calc(var(--stg-gap) + var(--stg-xs-gap)); } .qa-hero-type07 .qa-hero-social-proof a, .qa-hero-type07 .qa-hero-social-proof img { width: 64px; height: 64px; } .qa-hero-type07 .qa-hero-social-proof a span { display: none; } .qa-hero-type07 .qa-hero-social-proof > div { flex-wrap: wrap; } .qa-hero-type07 .qa-large-text { font-size: var(--qa-t-content-fs); line-height: var(--qa-t-content-lh); letter-spacing: var(--qa-t-content-ls); } /* Type 08 */ .qa-hero-form { padding: 0; } .qa-hero-type08 h1 { padding: 0; } .qa-hero-type08 .stg-row > div.stg-tp-col-12 p { max-width: 80%; margin: 0 10% var(--stg-gap) 10%; } /* === CTA Sections === */ .qa-masked-cta .qa-masked-content { max-width: 50%; } .qa-masked-cta .qa-cta-title { font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); line-height: var(--qa-t-h2-lh); max-width: 100%; margin: var(--stg-large-gap) 0; } .qa-masked-cta input { font-size: var(--qa-t-h4-fs); letter-spacing: var(--qa-t-h4-ls); } .qa-masked-cta button { padding: var(--stg-gap); } .qa-masked-cta button span { width: 28px; height: 28px; } .stg-cta-with-image { padding: 0; } .qa-cta-form-title { font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); line-height: var(--qa-t-h2-lh); } .qa-cta-text { padding: var(--stg-large-gap) 0; } div[class*='stg-col']:has(.qa-offset-image) { margin-top: calc(2 * var(--stg-large-gap)); margin-bottom: calc(-1 * var(--stg-large-gap)); } [class*='stg-col-']:first-child > div.qa-offset-image, [class*='stg-col-'] > div.qa-offset-image { border-radius: 0 var(--qa-large-br) 0 0; } [class*='stg-col-']:last-child > div.qa-offset-image { border-radius: var(--qa-large-br) 0 0 0; } /* === Elements === */ .qa-section-title p.is-short { max-width: calc(0.8 * var(--stg-container-width)); } .qa-masked-content { max-width: 50%; } .qa-grid-cta .qa-masked-content { max-width: 33.33%; } iframe.qa-google-map { aspect-ratio: 1/1; height: auto; max-height: unset; } /* List with Preview */ .qa-list-with-preview { flex-direction: column; } .qa-lwp-media { display: none; } .qa-list-with-preview > div.qa-lwp-roster { width: 100%; } .qa-lwp-item { display: flex; justify-content: flex-start; align-items: center; gap: var(--stg-gap); } .qa-lwp-item > img { display: block; min-width: 64px; max-width: 64px; border-radius: calc(1.5 * var(--qa-xs-br)); } .qa-lwp-item h5 { min-width: calc(50% - 64px - 2 * var(--stg-gap)); } .qa-lwp-item-content { width: 100%; } .qa-lwp-roster .align-right:nth-child(odd) { text-align: left; } /* List with Details */ .qa-detailed-list-title { min-width: calc(25% - var(--stg-gap)); max-width: calc(25% - var(--stg-gap)); } .qa-detailed-list-description { min-width: calc(75% - 2 * var(--stg-gap) - 64px); max-width: calc(75% - 2 * var(--stg-gap) - 64px); } .qa-detailed-list-button { width: 64px; height: 64px; } /* Slider */ .qa-slider-nav.qa-masked-content { width: 128px; height: 64px; } .qa-slider-nav.qa-masked-content a { width: 56px; height: 56px; margin: 8px 0 0 8px; } .qa-slider-nav.on-sides a span.qa-icon { width: 20px; height: 20px; } /* FAQ */ .qa-toggles-item--title h4 { font-size: var(--qa-t-h6-fs); letter-spacing: var(--qa-t-h6-ls); line-height: var(--qa-t-h6-lh); } .qa-toggles-item--title i.qa-icon { transform: rotate(-90deg) translate(-3px, 0px); } .is-active .qa-toggles-item--title .qa-icon { transform: rotate(0deg) translate(0, 8px); } /* === Portfolio === */ .qa-infinite-list-title h2 { font-size: var(--qa-t-h3-fs); letter-spacing: var(--qa-t-h3-ls); line-height: var(--qa-t-h3-lh); } .qa-fullscreen-page .qa-slider img, .qa-fullscreen-page .qa-slider video { height: calc(100svh - var(--st-header-height) - var(--st-footer-height)); width: auto; } .qa-column-item .qa-masked-content { max-width: 85%; } .qa-column-item h4 { font-size: var(--qa-t-h5-fs); letter-spacing: var(--qa-t-h5-ls); line-height: var(--qa-t-h5-lh); } .qa-column-item-title span { margin-bottom: 4px; } .qa-column-item-content .qa-icon-wrap { width: 64px; height: 64px; } .qa-column-item .qa-icon { width: 16px; height: 16px; } .qa-next-post h2 { font-size: var(--qa-t-h2-fs); letter-spacing: var(--qa-t-h2-ls); line-height: var(--qa-t-h2-lh); } .qa-next-post .qa-icon { width: 24px; height: 24px; } .qa-next-post.qa-icon-link .qa-icon-wrap { width: 96px; height: 96px; } .qa-next-post .qa-icon-wrap::before { border-width: 2px; } /* === Footer === */ .qa-footer-widgets div[class*='stg-tp-col']:has(.qa-info-widget) { padding: 0 calc(0.2 * var(--stg-container-width)) 0 0; } .qa-info-widget .qa-label { margin-bottom: 8px; } } /* MOBILE PHONES ============= */ @media only screen and (max-width: 739px) { .qa-mobile-nav::after { background: linear-gradient( 180deg, transparent 0%, var(--qa-s-body-bg) 100%); opacity: 0.85; } section.is-fullwidth { margin-left: calc(-1 * var(--stg-gap)); margin-right: calc(-1 * var(--stg-gap)); padding-left: var(--stg-gap); padding-right: var(--stg-gap); } section.is-fullwidth.is-stretched > .is-boxed { padding-left: var(--stg-gap); padding-right: var(--stg-gap); } /* === Mobile Menu === */ .qa-mobile-nav { max-width: 100%; } .qa-mobile-header-inner { padding: var(--qa-header-spacing) var(--stg-gap); } /* === Grid === */ .qa-grid-1col, .qa-grid-2cols, .qa-grid-3cols, .qa-grid-4cols, .qa-grid-5cols, .qa-grid-6cols { grid-template-columns: repeat(1, 1fr); } .stg-row > div[class*='qa-m-grid'], [class*='qa-m-grid'] { display: grid; grid-column-gap: var(--stg-gap); grid-row-gap: var(--stg-gap); } .qa-m-grid-1col { grid-template-columns: repeat(1, 1fr); } .qa-m-grid-2cols { grid-template-columns: repeat(2, 1fr); } .qa-m-grid-3cols { grid-template-columns: repeat(3, 1fr); } .qa-m-grid-4cols { grid-template-columns: repeat(4, 1fr); } .qa-m-grid-5cols { grid-template-columns: repeat(5, 1fr); } .qa-m-grid-6cols { grid-template-columns: repeat(6, 1fr); } /* Fullwidth Sections */ section.m-is-fullwidth { max-width: 100svw; --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); margin-left: calc(-1 * var(--qa-fw-spacing)); margin-right: calc(-1 * var(--qa-fw-spacing)); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } section.m-is-fullwidth.m-is-stretched { padding-left: 0; padding-right: 0; } section.m-is-fullwidth.m-is-stretched > .m-is-boxed { --qa-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width))); padding-left: var(--qa-fw-spacing); padding-right: var(--qa-fw-spacing); } /* Sections Spacing */ section[data-tp-padding="none"] { padding-top: 0; padding-bottom: 0; } section[data-tp-padding="top"] { padding-bottom: 0; } section[data-tp-padding="bottom"] { padding-top: 0; } section[data-tp-padding="small"] { padding: calc(0.5 * var(--qa-section-gap)) 0; } /* === Home Hero Sections === */ .qa-hero-info-line { font-size: var(--qa-t-meta-fs); } /* Type 01 */ .qa-hero-type01 .qa-hero-social-proof { flex-direction: row-reverse; justify-content: space-between; align-items: center; padding-top: var(--stg-gap); } .qa-hero-type01 .qa-hero-social-proof > p { text-align: left; } .qa-hero-type01 .qa-hero-social-proof > div { margin: 0 0 0 28px; } .qa-hero-type01 .qa-masked-block { --masked-inner-radius: var(--qa-default-br); --masked-border-radius: var(--qa-small-br); } .qa-hero-type01 .qa-masked-content a.qa-square-button { width: 44px; height: 44px; border-radius: var(--qa-small-br); } .qa-hero-type01 .qa-masked-content a span { width: 16px; height: 16px; } .qa-hero-type01 .qa-masked-content { width: 56px; height: 56px; } .qa-hero-type01 .qa-masked-content.at-bottom-right .qa-square-button { margin: var(--stg-small-gap) 0 0 var(--stg-small-gap); } .qa-hero-type01 .qa-masked-media img { border-radius: var(--qa-small-br); } /* Type 02 */ .stg-row.qa-hero02-row { width: 100%; } .qa-hero-type02 .stg-col-4 > img { margin-left: 0; } .qa-hero-type02 .stg-row.stg-no-gap > div.stg-tp-offset-6 { margin: 0; position: absolute; right: 0; top: calc(-0.25 * var(--stg-gap)); width: calc(50% - 0.5 * var(--stg-gap)); } .stg-row.qa-hero02-row { padding-bottom: 0; } /* Type 03 */ .qa-hero-type03 .qa-hero-title-wrap h1.qa-page-title { margin-bottom: 0; } .qa-hero-type03 .qa-tags-list, .qa-hero-type03 .qa-hero-media-content { position: static; } .qa-hero-type03 .qa-tags-list { max-width: 100%; } .qa-hero-type03 .qa-hero-media-content { margin: var(--stg-gap) 0; max-width: 80%; margin-left: 10%; } .qa-hero-type03 .qa-hero-title-wrap > div { max-width: 50%; margin: 0 25%; } .qa-hero-type03 .qa-masked-content.at-top-right > div { padding: 0; } .qa-hero-type03 .qa-tags-list { justify-content: center; } /* Type 05 */ .qa-hero-type05 a.qa-square-button span.qa-icon { width: 32px; height: 32px; } /* Type 06 */ .qa-hero-type06 .qa-masked-content.at-bottom-right { width: 88px; height: 88px; } .qa-hero-type06 .qa-masked-content.at-bottom-right a.qa-square-button { margin: var(--stg-small-gap) 0 0 var(--stg-small-gap); } .qa-hero-type06 .qa-square-button { width: calc(100% - var(--stg-small-gap)); height: calc(100% - var(--stg-small-gap)); } .qa-hero-type06 .is-large .qa-bento-hero-media p { max-width: calc(100% - 88px - var(--stg-small-gap)); } /* Type 07 */ .qa-hero-type07 .qa-hero-social-proof > div { justify-content: center; } /* Type 08 */ .qa-hero-type08 .stg-row > div.stg-tp-col-12 p { max-width: 100%; margin: 0 0 var(--stg-gap) 0; } .qa-hero-form { padding-bottom: 0; } /* === Elements === */ .qa-page-title.is-large { font-size: var(--qa-t-h1-fs); line-height: var(--qa-t-h1-lh); } .qa-section-title p.is-short { max-width: calc(0.9 * var(--stg-container-width)); } .qa-image-box:not(:last-child) { margin: unset; } .qa-bento-grid:not(.qa-grid-cta) .is-small .qa-square-button { width: 48px; height: 48px; } .qa-bento-grid:not(.qa-grid-cta) .is-small .qa-square-button .qa-icon { width: 16px; height: 16px; } .qa-member-contacts .qa-socials-list a { width: 48px; height: 48px; } .qa-member-contacts .qa-socials-list a i { width: 24px; height: 24px; } .qa-icon-link .qa-icon-wrap { width: 64px; height: 64px; } .qa-tp-stretch-last-item.qa-tp-grid-2cols > div:nth-child(odd):last-child.stg-aspect-square, .qa-tp-stretch-last-item.qa-tp-grid-2cols > div:nth-child(odd):last-child .stg-aspect-square { aspect-ratio: 1/1; } .qa-masked-content[class*='stg-m-top-'], .qa-masked-content[class*='stg-m-bottom-'] { position: static; max-width: 100%; padding: 0; } .qa-masked-content[class*='stg-m-top-'] > div, .qa-masked-content[class*='stg-m-bottom-'] > div { padding: 0; } /* List with Preview */ .qa-lwp-item { flex-direction: column; contain: paint; } .qa-lwp-item h5 { width: 100%; } .qa-lwp-item:not(.is-active) a { pointer-events: none; } .qa-lwp-item > img { display: none; } /* FAQ */ .qa-toggles-item--title sup { display: none; } .qa-toggles-item--title h4 { font-size: var(--qa-t-h6-fs); letter-spacing: var(--qa-t-h6-ls); line-height: var(--qa-t-h6-lh); padding-right: 0; } .qa-toggles-item--title i.qa-icon { display: none; } /* Detailed List */ .qa-detailed-list li { align-items: center; } .qa-detailed-list-title { min-width: calc(100% - 2 * var(--stg-gap) - 48px); max-width: calc(100% - 2 * var(--stg-gap) - 48px); } .qa-detailed-list-description { display: none; } .qa-detailed-list-button { width: 48px; height: 48px; } .qa-detailed-list-button span.qa-icon { width: 16px; height: 16px; } /* Slider */ .qa-slider-nav.qa-masked-content a { width: 44px; min-width: 44px; height: 44px; } .qa-slider-nav.qa-masked-content a::before { border-width: 1px; } .qa-slider-nav.qa-masked-content span.qa-icon { width: 12px; height: 12px; } .qa-slider-nav.qa-masked-content { width: 100px; height: 52px; } .qa-list-with-preview > div.qa-lwp-roster { grid-template-columns: repeat(1, 1fr); } /* === CTA === */ .qa-masked-cta .qa-masked-content { display: none; } .qa-masked-cta .qa-cta-form { padding: var(--stg-gap); flex-direction: column; gap: var(--stg-small-gap); } .qa-masked-cta .qa-cta-title { margin: 0 0 var(--stg-gap) 0; } .qa-masked-cta .qa-cta-form-button { width: 100%; } .qa-masked-cta button { width: 100%; display: flex; justify-content: center; } .qa-masked-cta input { font-size: var(--qa-t-h6-fs); letter-spacing: var(--qa-t-h5-ls); } .qa-grid-cta .qa-square-button span { width: 48px; height: 48px; } .qa-bento-grid { grid-auto-flow: column; grid-template-columns: repeat(2, minmax(auto, calc(50% - 0.5 * var(--stg-gap)))); grid-template-rows: repeat(4, auto); } .qa-bento-grid .is-large { min-height: var(--stg-container-width); } .qa-grid-cta .is-medium { aspect-ratio: 2; } .qa-bento-grid .is-small:has(.qa-meta-list) { max-height: fit-content; } /* === Portfolio === */ /* Infinite List */ .qa-infinite-list-item .qa-meta { margin-bottom: 4px; } .qa-infinite-list-title h2 { font-size: var(--qa-t-h6-fs); letter-spacing: var(--qa-t-h6-ls); line-height: var(--qa-t-h6-lh); } .qa-infinite-list-icon { width: 48px; height: 48px; } .qa-infinite-list-icon .qa-icon { width: 16px; height: 16px; } .qa-infinite-list-preview { width: 64px; height: 64px; top: calc(50% - 32px); } .qa-infinite-list-item { padding-left: calc(64px + var(--stg-gap)); } /* Slider */ .qa-slider-nav.on-sides a { height: 64px; } .qa-slider-nav.on-sides { top: calc(50% - 32px); } .qa-slider-nav.on-sides a.qa-slider-prev span.qa-icon { transform: translateX(-4px); } .qa-slider-nav.on-sides a.qa-slider-next span.qa-icon { transform: translateX(4px); } .qa-slider .qa-slide-content-inner { padding: calc(1.5 * var(--stg-small-gap)) calc(1.5 * var(--stg-gap)); } .qa-slider .qa-slide-content-inner h4 { font-size: var(--qa-t-h5-fs); letter-spacing: var(--qa-t-h5-ls); line-height: var(--qa-t-h5-lh); } /* Column */ .qa-column-item.qa-masked-block { --masked-inner-radius: var(--qa-default-br) } .qa-column-item h4 { font-size: var(--qa-t-h6-fs); letter-spacing: var(--qa-t-h6-ls); line-height: var(--qa-t-h6-lh); } .qa-column-item-content .qa-icon-wrap { min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; } .qa-column-item .qa-masked-content { max-width: calc(100% - var(--stg-gap)); } /* Posts */ .qa-hero-info-line .qa-meta { display: flex; flex-direction: column; } .qa-next-post.qa-icon-link .qa-icon-wrap { width: 64px; height: 64px; border-radius: var(--qa-default-br); } .qa-next-post .qa-icon { width: 20px; height: 20px; } .qa-bento-grid > div > ul.qa-meta-list .qa-meta { margin-bottom: -2px; } /* === Footer === */ .qa-footer-widgets div[class*='stg-tp-col']:has(.qa-info-widget) { padding: 0; } .qa-menu-widget { font-size: 12px; } }