/* ========================================================================== Quarj Studio: built on the logo. Blue #0f75bc (letters), ink #0e0e10 (outline, "productions"), silver #bdbec0 (the play button), white (the sticker edge). Everything else is a tint or shade of those four. ========================================================================== */ /* ---------------------------------------------------------------- fonts */ @font-face { font-family: "Commissioner"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/commissioner-greek.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: "Commissioner"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/commissioner-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Commissioner"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/commissioner-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/piazzolla-greek.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/piazzolla-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/piazzolla-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------------------------------------- tokens */ :root { --q-blue: #0f75bc; --q-blue-600: #0c63a1; --q-blue-800: #083f66; --q-blue-900: #062c48; --q-blue-200: #bcd9ee; --q-blue-100: #dcecf8; --q-mist: #eef5fb; --q-ink: #0e0e10; --q-ink-2: #1c1d21; --q-ink-3: #2c2e33; --q-text: #1f2024; --q-muted: #585b63; --q-silver: #bdbec0; --q-silver-2: #dfe0e2; --q-silver-3: #f2f2f3; --q-line: #e2e5ea; --q-white: #fff; --q-display: "Piazzolla", "Iowan Old Style", Georgia, serif; --q-sans: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --q-wrap: 1200px; --q-gutter: clamp(16px, 4vw, 40px); --q-radius: 22px; --q-radius-sm: 12px; --q-border: 2px solid var(--q-ink); --q-hard: 4px 4px 0 var(--q-ink); --q-soft: 0 1px 2px rgba(14, 14, 16, .06), 0 12px 32px -12px rgba(8, 63, 102, .22); --q-header-h: 84px; --q-ease: cubic-bezier(.2, .7, .2, 1); } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--q-header-h) + 16px); } body { margin: 0; background: var(--q-white); color: var(--q-text); font: 400 1.0625rem/1.7 var(--q-sans); font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, not hidden: hidden would make a scroll container and break the sticky header */ overflow-x: clip; } html { overflow-x: clip; } img, svg, video, iframe { max-width: 100%; } img { height: auto; display: block; } a { color: var(--q-blue); text-underline-offset: .18em; text-decoration-thickness: 1.5px; } a:hover { color: var(--q-blue-800); } :focus-visible { outline: 3px solid var(--q-blue); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--q-blue); color: #fff; } h1, h2, h3, h4, h5, h6 { font-family: var(--q-display); font-weight: 800; color: var(--q-ink); line-height: 1.12; letter-spacing: -.015em; word-spacing: .1em; margin: 0 0 .5em; text-wrap: balance; } h1 em, h2 em, h3 em, .q-hero__title em { font-style: normal; color: var(--q-blue); } p { margin: 0 0 1.1em; } button { font: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; } .q-skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--q-ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; } .q-skip:focus { top: 12px; color: #fff; } .q-wrap { width: 100%; max-width: calc(var(--q-wrap) + 2 * var(--q-gutter)); margin-inline: auto; padding-inline: var(--q-gutter); } .q-wrap--narrow { max-width: calc(760px + 2 * var(--q-gutter)); } .q-wrap--mid { max-width: calc(980px + 2 * var(--q-gutter)); } .q-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; } /* ---------------------------------------------------------------- buttons */ .q-btn { --bg: var(--q-white); --fg: var(--q-ink); display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .7em 1.35em; background: var(--bg); color: var(--fg); border: var(--q-border); border-radius: 999px; box-shadow: 3px 3px 0 var(--q-ink); font: 700 1rem/1.1 var(--q-sans); letter-spacing: .005em; word-spacing: .06em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .18s var(--q-ease), box-shadow .18s var(--q-ease), background-color .18s; } .q-btn:hover { color: var(--fg); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--q-ink); } .q-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--q-ink); } .q-btn .q-icon { width: 1.15em; height: 1.15em; transition: transform .2s var(--q-ease); } .q-btn:hover .q-icon--arrow { transform: translateX(3px); } .q-btn--primary { --bg: var(--q-blue); --fg: #fff; } .q-btn--primary:hover { --bg: var(--q-blue-600); } .q-btn--ghost { --bg: var(--q-white); --fg: var(--q-ink); } .q-btn--ghost .q-icon--play { color: var(--q-blue); } .q-btn--light { --bg: #fff; --fg: var(--q-ink); } .q-btn--sm { min-height: 40px; padding: .5em 1em; font-size: .9375rem; box-shadow: 2px 2px 0 var(--q-ink); } .q-btn--lg { min-height: 56px; padding: .85em 1.6em; font-size: 1.0625rem; } .q-btn--block { width: 100%; } .q-link { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--q-ink); text-decoration: none; border-bottom: 2px solid var(--q-blue); padding-bottom: 2px; } .q-link .q-icon { color: var(--q-blue); transition: transform .2s var(--q-ease); } .q-link:hover { color: var(--q-blue); } .q-link:hover .q-icon { transform: translateX(4px); } .q-eyebrow { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1rem; font: 700 .8125rem/1.2 var(--q-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--q-blue); } .q-onair { width: 10px; height: 10px; border-radius: 50%; background: var(--q-blue); box-shadow: 0 0 0 0 rgba(15, 117, 188, .5); animation: q-pulse 2s infinite; } .q-onair.is-off { background: var(--q-silver); animation: none; } @keyframes q-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 117, 188, .55); } 70% { box-shadow: 0 0 0 12px rgba(15, 117, 188, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 117, 188, 0); } } .q-chip { display: inline-block; padding: .2em .7em; border-radius: 999px; background: var(--q-blue-100); color: var(--q-blue-800); font-weight: 700; font-size: .75rem; letter-spacing: .02em; } /* ---------------------------------------------------------------- header */ .q-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; } /* The blur lives on a pseudo-element: on the header itself it would trap the fixed mobile menu. */ .q-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); } .admin-bar .q-header { top: 32px; } .q-header.is-scrolled { border-bottom-color: var(--q-line); box-shadow: 0 8px 24px -18px rgba(8, 63, 102, .35); } .q-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--q-header-h); transition: min-height .25s var(--q-ease); } .q-header.is-scrolled .q-header__inner { min-height: 68px; } .q-logo { display: block; flex: none; } .q-header__logo img { height: 54px; width: auto; transition: height .25s var(--q-ease); } .q-header.is-scrolled .q-header__logo img { height: 44px; } .q-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .q-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--q-ink); cursor: pointer; transition: background .2s; } .q-iconbtn:hover { background: var(--q-mist); color: var(--q-blue); } .q-iconbtn .q-icon { width: 22px; height: 22px; } .q-menu-toggle { display: none; } .q-menu-toggle .is-close-icon { display: none; } .q-nav { margin-left: auto; } .q-menu, .q-menu ul { list-style: none; margin: 0; padding: 0; } .q-menu { display: flex; align-items: center; gap: 2px; } .q-menu > li { position: relative; display: flex; align-items: center; } .q-menu a { display: block; padding: 10px 14px; border-radius: 999px; color: var(--q-ink); font-weight: 600; font-size: .96875rem; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; } .q-menu > li > a:hover, .q-menu > li:focus-within > a { color: var(--q-blue); background: var(--q-mist); } .q-menu .current-menu-item > a, .q-menu .current-menu-ancestor > a, .q-menu .current_page_item > a { color: var(--q-blue); } .q-menu > .current-menu-item > a::after, .q-menu > .current-menu-ancestor > a::after, .q-menu > .current_page_item > a::after { content: ""; display: block; width: 6px; height: 6px; margin: 3px auto -9px; border-radius: 50%; background: var(--q-blue); } .q-menu .menu-item-has-children > a { padding-right: 4px; } .submenu-toggle { display: inline-grid; place-items: center; width: 26px; height: 32px; padding: 0; margin-right: 4px; border: 0; background: none; color: var(--q-ink); cursor: pointer; border-radius: 8px; } .submenu-toggle .q-icon { width: 16px; height: 16px; transition: transform .2s; } .q-menu .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px; padding: 8px; background: #fff; border: var(--q-border); border-radius: 16px; box-shadow: var(--q-hard); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--q-ease), visibility 0s .2s; z-index: 10; } .q-menu .sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } .q-menu li:hover > .sub-menu, .q-menu li:focus-within > .sub-menu, .q-menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .q-menu li:hover > .submenu-toggle .q-icon, .q-menu li.is-open > .submenu-toggle .q-icon { transform: rotate(180deg); } .q-menu .sub-menu a { border-radius: 10px; padding: 10px 14px; white-space: normal; } .q-menu .sub-menu a:hover { background: var(--q-mist); color: var(--q-blue); } .q-menu a.is-placeholder { cursor: default; } .q-nav__extra { display: none; } /* ---------------------------------------------------------------- search + modal dialogs */ dialog { border: 0; padding: 0; color: inherit; } dialog::backdrop { background: rgba(6, 44, 72, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .q-search { width: min(760px, calc(100% - 32px)); margin: 12vh auto auto; background: transparent; overflow: visible; } .q-search__inner { display: flex; align-items: center; gap: 12px; } .q-search__close { background: #fff; flex: none; } .q-searchform { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; padding: 8px 8px 8px 18px; background: #fff; border: var(--q-border); border-radius: 999px; box-shadow: var(--q-hard); } .q-searchform > .q-icon { color: var(--q-blue); } .q-searchform input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 1.125rem var(--q-sans); color: var(--q-ink); padding: 8px 4px; } .q-searchform input::placeholder { color: var(--q-muted); } .q-modal { width: min(1100px, calc(100% - 32px)); background: #000; border-radius: 18px; overflow: visible; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); } .q-modal__frame { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; } .q-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; } .q-modal__close { position: absolute; top: -56px; right: 0; background: #fff; } /* ---------------------------------------------------------------- hero */ .q-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); background: radial-gradient(900px 480px at 85% 30%, var(--q-mist), transparent 70%), radial-gradient(circle at 1px 1px, rgba(15, 117, 188, .16) 1px, transparent 1.5px) 0 0 / 26px 26px, #fff; } .q-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, #fff); pointer-events: none; } .q-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(24px, 5vw, 72px); } .q-hero__title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.03em; margin-bottom: .35em; } .q-hero__title { word-spacing: .12em; } .q-hero__lead { max-width: 36em; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--q-muted); } .q-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } /* The play button from the logo, rebuilt in CSS. */ .q-hero__visual { position: relative; display: grid; justify-items: center; } .q-disc-stage { position: relative; width: min(100%, 460px); aspect-ratio: 1; display: grid; place-items: center; } .q-ring { position: absolute; width: 62%; aspect-ratio: 1.16; border-radius: 50%; border: 2px solid var(--q-blue); opacity: 0; animation: q-ring 3.6s var(--q-ease) infinite; } .q-ring--2 { animation-delay: 1.2s; } .q-ring--3 { animation-delay: 2.4s; } @keyframes q-ring { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.65); opacity: 0; } } .q-disc { position: relative; z-index: 2; display: grid; place-items: center; width: 66%; aspect-ratio: 1.16; padding: 0; border-radius: 50%; cursor: pointer; border: 3px solid var(--q-ink); background: radial-gradient(ellipse at 50% 50%, transparent 58%, var(--q-blue) 58.5%, var(--q-blue) 69%, transparent 69.5%), #fff; box-shadow: 0 0 0 10px #fff, 0 0 0 13px var(--q-ink), 10px 14px 0 13px rgba(14, 14, 16, .9); transition: transform .35s var(--q-ease); } .q-disc::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, .95), transparent 55%), linear-gradient(180deg, #f7f7f8 0%, #d9dadc 42%, var(--q-silver) 58%, #9fa1a5 100%); box-shadow: inset 0 3px 3px rgba(255, 255, 255, .9), inset 0 -6px 12px rgba(0, 0, 0, .22), 0 0 0 3px #a6a8ab; } .q-disc__tri { position: relative; z-index: 1; width: 22%; aspect-ratio: .86; margin-left: 5%; background: var(--q-blue); clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 4px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15)); } .q-disc:hover { transform: scale(1.04) rotate(-2deg); } .q-sticker { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45em; padding: .5em .95em; border: var(--q-border); border-radius: 999px; background: #fff; box-shadow: 3px 3px 0 var(--q-ink); font: 800 .9375rem/1 var(--q-sans); color: var(--q-ink); letter-spacing: .02em; animation: q-float 6s ease-in-out infinite; } .q-sticker .q-icon { color: var(--q-blue); } .q-sticker--a { top: 9%; left: 2%; transform: rotate(-7deg); } .q-sticker--b { top: 20%; right: -2%; transform: rotate(6deg); animation-delay: -2s; background: var(--q-blue); color: #fff; } .q-sticker--b .q-icon { color: #fff; } .q-sticker--c { bottom: 12%; left: 8%; transform: rotate(4deg); animation-delay: -4s; } @keyframes q-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .q-hero__eq { width: min(100%, 420px); height: 56px; margin-top: 10px; } .q-wave { display: block; width: 100%; height: 100%; } .q-wave rect { fill: var(--q-blue); transform-box: fill-box; transform-origin: center; } .q-wave--live rect { animation: q-eq 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -97ms); } .q-wave--live rect:nth-child(3n) { fill: var(--q-ink); } .q-wave--live rect:nth-child(5n) { fill: var(--q-silver); } @keyframes q-eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } } .q-wave--flat rect { fill: var(--q-silver); transform: scaleY(.08); } .q-wave--flat rect:nth-child(n+20):nth-child(-n+28) { fill: var(--q-blue); animation: q-blip 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); } @keyframes q-blip { 0%, 60%, 100% { transform: scaleY(.08); } 30% { transform: scaleY(1); } } /* ---------------------------------------------------------------- marquee */ .q-marquee { overflow: hidden; background: var(--q-ink); color: #fff; padding: 18px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .q-marquee__track { display: flex; width: max-content; animation: q-scroll 48s linear infinite; } .q-marquee:hover .q-marquee__track { animation-play-state: paused; } .q-marquee ul { display: flex; list-style: none; margin: 0; padding: 0; } .q-marquee li { display: flex; align-items: center; white-space: nowrap; font: 700 clamp(1.125rem, 2vw, 1.5rem)/1.2 var(--q-display); word-spacing: .1em; } .q-marquee li::after { content: ""; width: 12px; height: 12px; margin: 0 28px; border-radius: 50%; background: var(--q-blue); box-shadow: 0 0 0 3px var(--q-ink), 0 0 0 5px var(--q-silver); } @keyframes q-scroll { to { transform: translateX(-50%); } } /* ---------------------------------------------------------------- blocks */ .q-block { padding: clamp(64px, 9vw, 120px) 0; } .q-block--ink { background: var(--q-ink); color: #cfd0d3; } .q-block--ink .q-block__title, .q-block--ink h3 { color: #fff; } .q-block--ink .q-block__title em { color: #5fb0e8; } .q-block--ink .q-eyebrow { color: #5fb0e8; } .q-block--mist { background: var(--q-mist); } .q-block__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); } .q-block__head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .q-block__title { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; margin: 0; } .q-block__title--sm { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 32px; } /* services */ .q-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .q-pillar { position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; background: #fff; border: 2px solid var(--q-line); border-radius: var(--q-radius); transition: border-color .25s, box-shadow .25s var(--q-ease), transform .25s var(--q-ease); } .q-pillar:hover { border-color: var(--q-ink); box-shadow: 8px 8px 0 var(--q-blue); transform: translate(-3px, -3px); } .q-pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } .q-pillar__no { font: 900 3.25rem/1 var(--q-display); color: var(--q-silver-2); letter-spacing: -.02em; transition: color .25s; } .q-pillar:hover .q-pillar__no { color: var(--q-blue); } .q-pillar__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--q-blue); color: #fff; border: var(--q-border); box-shadow: 3px 3px 0 var(--q-ink); } .q-pillar__icon .q-icon { width: 28px; height: 28px; } .q-pillar__kicker { margin: 0 0 .2em; font: 700 .8125rem var(--q-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--q-muted); } .q-pillar__title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: .4em; } .q-pillar__text { color: var(--q-muted); } .q-pillar__list { list-style: none; margin: 0 0 26px; padding: 18px 0 0; border-top: 1px dashed var(--q-silver); display: grid; gap: 8px; } .q-pillar__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .96875rem; } .q-pillar__list .q-icon { color: var(--q-blue); width: 18px; height: 18px; } .q-pillar .q-link { margin-top: auto; align-self: flex-start; } /* studio videos */ .q-grid { display: grid; gap: 28px; } .q-grid--videos { grid-template-columns: repeat(3, 1fr); } .q-grid--cards { grid-template-columns: repeat(3, 1fr); } .q-video { margin: 0; } .q-video__poster { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: pointer; border: 0; border-radius: 16px; background: var(--q-blue-900); background-image: radial-gradient(circle at 30% 20%, var(--q-blue-800), var(--q-blue-900) 70%); } .q-video__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--q-ease), opacity .3s; } .q-video__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6, 44, 72, .55)); pointer-events: none; } .q-video__poster:hover img { transform: scale(1.05); } .q-video__poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .q-video__poster.is-playing::after { display: none; } .q-video__caption { margin-top: 12px; font-weight: 600; font-size: .96875rem; line-height: 1.4; color: inherit; } .q-video__caption a { color: inherit; text-decoration: none; } .q-video__caption a:hover { text-decoration: underline; } .q-block--ink .q-video__caption { color: #fff; } /* Small version of the logo's button */ .q-play { position: relative; z-index: 1; display: grid; place-items: center; width: 84px; aspect-ratio: 1.16; border-radius: 50%; background: radial-gradient(ellipse at 50% 20%, #fff, transparent 60%), linear-gradient(180deg, #f7f7f8, #d4d5d7 45%, var(--q-silver) 60%, #9a9ca0); border: 5px solid var(--q-blue); box-shadow: 0 0 0 2px var(--q-ink), 0 10px 24px rgba(0, 0, 0, .35); transition: transform .25s var(--q-ease); } .q-play .q-icon { width: 34px; height: 34px; color: var(--q-blue); margin-left: 4px; } .q-video__poster:hover .q-play { transform: scale(1.1); } /* quote */ .q-quote { background: var(--q-mist); position: relative; overflow: hidden; } .q-quote__inner { position: relative; max-width: calc(980px + 2 * var(--q-gutter)); } .q-quote__mark { position: absolute; top: -.35em; left: calc(var(--q-gutter) - .08em); font: 900 clamp(10rem, 22vw, 18rem)/1 var(--q-display); color: var(--q-blue); opacity: .12; pointer-events: none; } .q-quote blockquote { margin: 0 0 32px; position: relative; } .q-quote blockquote p { font: 700 clamp(1.6rem, 3.4vw, 2.6rem)/1.25 var(--q-display); letter-spacing: -.015em; word-spacing: .1em; color: var(--q-ink); margin: 0; text-wrap: pretty; } /* features */ .q-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--q-ink); } .q-feature { padding: 30px 26px 30px 0; border-bottom: 1px solid var(--q-line); } .q-feature + .q-feature { padding-left: 26px; } .q-feature:nth-child(4n+1) { padding-left: 0; } .q-features__grid .q-feature:not(:nth-child(4n+1)) { border-left: 1px solid var(--q-line); } .q-feature__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: var(--q-mist); color: var(--q-blue); transition: background .25s, color .25s, transform .25s var(--q-ease); } .q-feature:hover .q-feature__icon { background: var(--q-blue); color: #fff; transform: rotate(-6deg); } .q-feature h3 { font-size: 1.3rem; margin-bottom: .45em; } .q-feature p { color: var(--q-muted); font-size: .96875rem; margin: 0; } /* clients */ .q-clients { padding-bottom: clamp(56px, 8vw, 100px); } .q-marquee--clients { background: none; color: var(--q-ink); padding: 10px 0; } .q-marquee--clients .q-marquee__track { animation-duration: 70s; } .q-marquee--clients.is-reverse .q-marquee__track { animation-direction: reverse; } .q-marquee--clients li { font-size: clamp(1.75rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.02em; } .q-marquee--clients.is-reverse li { color: var(--q-blue); } .q-marquee--clients.is-reverse li::after { background: var(--q-ink); } .q-marquee--clients li::after { width: 14px; height: 14px; margin: 0 32px; box-shadow: none; background: var(--q-blue); } /* cards */ .q-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--q-radius); border: 2px solid var(--q-line); overflow: hidden; transition: border-color .25s, box-shadow .25s var(--q-ease), transform .25s var(--q-ease); } .q-card:hover { border-color: var(--q-ink); box-shadow: var(--q-hard); transform: translate(-2px, -2px); } .q-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--q-mist); } .q-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--q-ease); } .q-card:hover .q-card__media img { transform: scale(1.05); } .q-card__placeholder { display: grid; place-items: center; height: 100%; color: var(--q-blue); } .q-card__placeholder .q-icon { width: 48px; height: 48px; } .q-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; } .q-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .8125rem; color: var(--q-muted); } .q-card__title { font-size: 1.3rem; line-height: 1.25; margin: 0 0 .5em; } .q-card__title a { color: var(--q-ink); text-decoration: none; background: linear-gradient(var(--q-blue), var(--q-blue)) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--q-ease); } .q-card__title a:hover { background-size: 100% 2px; color: var(--q-ink); } .q-card__title a::after { content: ""; position: absolute; inset: 0; } .q-card { position: relative; } .q-card__excerpt { color: var(--q-muted); font-size: .9375rem; margin: 0; } /* CTA */ .q-cta { position: relative; overflow: hidden; background: var(--q-blue); color: #fff; padding: clamp(64px, 8vw, 110px) 0 clamp(96px, 10vw, 140px); } .q-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 40px; } .q-cta__title { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.025em; } .q-cta__title em { color: var(--q-ink); } .q-cta p { font-size: 1.125rem; color: #fff; max-width: 34em; margin: 0; } .q-cta__actions { display: grid; justify-items: start; gap: 22px; } .q-cta__phone { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font: 800 1.5rem/1.15 var(--q-display); word-spacing: .1em; } .q-cta__phone small { display: block; font: 700 .8125rem var(--q-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; } .q-cta__phone > .q-icon { width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: var(--q-ink); color: #fff; } .q-cta__phone:hover { color: #fff; } .q-cta__wave { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; opacity: .9; } .q-cta__wave rect { fill: var(--q-blue-600); } /* ---------------------------------------------------------------- footer */ .q-footer { background: var(--q-ink); color: #a9abb0; font-size: .96875rem; } .q-footer a { color: #e6e7e9; text-decoration: none; } .q-footer a:hover { color: #5fb0e8; } .q-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-top: 80px; padding-bottom: 56px; } .q-footer__logo img { height: 64px; width: auto; margin-bottom: 20px; } .q-footer__brand p { max-width: 30em; } .q-footer__title { font: 700 .8125rem var(--q-sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 20px; } .q-contact-list, .q-footer__links, .q-footer__posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .q-contact-list li { display: flex; gap: 12px; align-items: flex-start; } .q-contact-list .q-icon { color: #5fb0e8; margin-top: 3px; } .q-footer__posts li { display: grid; gap: 2px; line-height: 1.4; } .q-footer__posts span { font-size: .8125rem; color: #7d8086; } .q-socials { display: flex; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; } .q-socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--q-ink-3); color: #e6e7e9; transition: background .2s, border-color .2s, transform .2s; } .q-socials a:hover { background: var(--q-blue); border-color: var(--q-blue); color: #fff; transform: translateY(-2px); } .q-socials .q-icon { width: 19px; height: 19px; } .q-footer__bar { border-top: 1px solid var(--q-ink-3); } .q-footer__bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 22px; font-size: .875rem; } .q-footer__bar p { margin: 0; } .q-footer__legal { display: flex; gap: 24px; } /* ---------------------------------------------------------------- inner pages */ .q-pagehero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(circle at 1px 1px, rgba(15, 117, 188, .16) 1px, transparent 1.5px) 0 0 / 26px 26px, var(--q-mist); margin-bottom: clamp(40px, 6vw, 72px); } .q-pagehero .q-wrap { position: relative; z-index: 1; } .q-pagehero__title { font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; max-width: 16em; margin: 0; } .q-pagehero__lead { max-width: 40em; margin: 18px 0 0; font-size: 1.1875rem; color: var(--q-muted); } .q-pagehero__lead p { margin: 0 0 .5em; } .q-pagehero__lead > :last-child { margin-bottom: 0; } .q-pagehero__wave { position: absolute; right: -2%; bottom: 0; width: min(55%, 640px); height: 70px; opacity: .5; } .q-pagehero__wave rect { fill: var(--q-blue-200); } .q-pagehero--post { margin-bottom: 0; padding-bottom: clamp(40px, 5vw, 64px); } .q-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .875rem; font-weight: 600; color: var(--q-muted); } .q-crumbs a { color: var(--q-muted); text-decoration: none; } .q-crumbs a:hover { color: var(--q-blue); } .q-crumbs .sep { color: var(--q-silver); } .q-entry__meta { display: flex; gap: 10px; margin: 18px 0 0; color: var(--q-muted); font-weight: 600; font-size: .9375rem; } .q-entry__cover { margin-top: clamp(-40px, -3vw, -24px); margin-bottom: 48px; position: relative; z-index: 2; } .q-entry--single .q-entry__cover { margin-top: 0; padding-top: 0; } .q-entry__cover img { width: 100%; border-radius: var(--q-radius); border: var(--q-border); box-shadow: 8px 8px 0 var(--q-blue); } .q-entry { padding-bottom: clamp(56px, 8vw, 96px); } .q-entry--single .q-entry__cover { margin-top: 40px; } /* prose */ .q-content { font-size: 1.125rem; line-height: 1.75; overflow-wrap: anywhere; } .q-card__title, .q-footer__posts a, .q-pagehero__title { overflow-wrap: anywhere; hyphens: auto; } .q-content > * + * { margin-top: 0; } .q-content h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); margin-top: 1.6em; } .q-content h3 { font-size: 1.5rem; margin-top: 1.4em; } .q-content h4 { font-size: 1.25rem; margin-top: 1.3em; } .q-content ul, .q-content ol { padding-left: 1.3em; margin: 0 0 1.2em; } .q-content li { margin-bottom: .35em; } .q-content li::marker { color: var(--q-blue); } .q-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--q-blue); font: 600 1.35rem/1.45 var(--q-display); color: var(--q-ink); } .q-content img { border-radius: 14px; } .q-content figure { margin: 1.8em 0; } .q-content figcaption, .wp-caption-text { font-size: .875rem; color: var(--q-muted); margin-top: 8px; text-align: center; } .q-content hr, .q-hr { border: 0; height: 2px; background: var(--q-line); margin: 2.4em 0; } .q-hr--short { width: 60px; background: var(--q-blue); height: 3px; border-radius: 3px; margin: 1.6em 0; } .q-content iframe { border: 0; border-radius: 14px; } .q-content table { width: 100%; border-collapse: collapse; font-size: 1rem; } .q-content th, .q-content td { border-bottom: 1px solid var(--q-line); padding: 10px 12px; text-align: left; } .q-content .alignleft { float: left; margin: .3em 1.5em 1em 0; } .q-content .alignright { float: right; margin: .3em 0 1em 1.5em; } .q-content .aligncenter { margin-inline: auto; text-align: center; } .q-content .aligncenter img { margin-inline: auto; } .q-content::after { content: ""; display: table; clear: both; } .q-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.6em 0; border-radius: 16px; overflow: hidden; background: var(--q-ink); } .q-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; } .q-entry__footer { margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--q-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .q-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .q-tags a { padding: .3em .8em; border-radius: 999px; background: var(--q-mist); color: var(--q-blue-800); font-size: .8125rem; font-weight: 600; text-decoration: none; } .q-tags a:hover { background: var(--q-blue); color: #fff; } .q-share { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .875rem; } .q-share a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--q-line); color: var(--q-ink); } .q-share a:hover { background: var(--q-blue); color: #fff; border-color: var(--q-blue); } .q-share .q-icon { width: 18px; height: 18px; } .q-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: clamp(56px, 7vw, 88px); } .q-postnav a { display: block; padding: 20px 22px; border: 2px solid var(--q-line); border-radius: 16px; color: var(--q-ink); text-decoration: none; font: 700 1.0625rem/1.35 var(--q-display); transition: border-color .2s, box-shadow .2s; } .q-postnav a:hover { border-color: var(--q-ink); box-shadow: var(--q-hard); } .q-postnav small { display: block; margin-bottom: 6px; font: 700 .75rem var(--q-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--q-blue); } .q-postnav__next { grid-column: 2; text-align: right; } .q-listing { padding-bottom: clamp(56px, 8vw, 100px); } .q-pagination { margin-top: 48px; } .q-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .q-pagination .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--q-line); color: var(--q-ink); font-weight: 700; text-decoration: none; } .q-pagination a.page-numbers:hover { border-color: var(--q-ink); } .q-pagination .current { background: var(--q-blue); border-color: var(--q-ink); color: #fff; box-shadow: 2px 2px 0 var(--q-ink); } .q-empty { max-width: 640px; margin: 0 auto; text-align: center; } /* ---------------------------------------------------------------- legacy builder content */ .q-builder { font-size: 1.0625rem; } .q-builder::after, .q-section__inner::after { content: ""; display: table; clear: both; } .q-col { float: left; margin-left: 4%; min-height: 1px; margin-bottom: 32px; } .q-col.is-first { clear: left; margin-left: 0; } .q-col--1-1 { width: 100%; margin-left: 0; clear: both; } .q-col--1-2 { width: 48%; } .q-col--1-3 { width: 30.666%; } .q-col--2-3 { width: 65.333%; } .q-col--1-4 { width: 22%; } .q-col--3-4 { width: 74%; } .q-col--1-5 { width: 16.8%; } .q-col--2-5 { width: 37.6%; } .q-col--3-5 { width: 58.4%; } .q-col--4-5 { width: 79.2%; } .q-section { margin: 0 0 32px; } .q-section--alt { position: relative; padding: 48px 0 16px; } .q-section--alt::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: var(--q-mist); z-index: -1; } .q-section { position: relative; z-index: 0; } .q-section--image { padding: clamp(48px, 7vw, 96px) 0 24px; color: #fff; } .q-section--image::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(135deg, rgba(8, 63, 102, .92), rgba(14, 14, 16, .9)), var(--q-bg) center / cover no-repeat; } .q-section--image a { color: #fff; } .q-section--image h1, .q-section--image h2, .q-section--image h3 { color: #fff; } .q-section--image + * { margin-top: 32px; } .q-textblock > :last-child { margin-bottom: 0; } .q-textblock p[style*="text-align: center"] iframe { margin-inline: auto; } .q-iconbox { display: flex; gap: 18px; align-items: flex-start; } .q-iconbox__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--q-blue); color: #fff; border: var(--q-border); box-shadow: 3px 3px 0 var(--q-ink); } .q-iconbox__title { font-size: 1.3rem; margin: 6px 0 .4em; } .q-iconbox__title a { color: inherit; text-decoration: none; } .q-iconbox__body > :last-child { margin-bottom: 0; } .q-iconbox__body { color: var(--q-muted); } .q-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin: 16px 0 32px; padding: 26px 30px; border-radius: var(--q-radius); background: var(--q-blue); color: #fff; border: var(--q-border); box-shadow: 6px 6px 0 var(--q-ink); } .q-promo__text { flex: 1 1 320px; font-size: 1.125rem; font-weight: 600; } .q-promo__text > :last-child { margin-bottom: 0; } .q-promo a:not(.q-btn) { color: #fff; } .q-bars { display: grid; gap: 16px; margin: 16px 0 32px; } .q-bar__label { display: flex; justify-content: space-between; font-weight: 700; font-size: .9375rem; margin-bottom: 6px; } .q-bar__track { height: 12px; border-radius: 999px; background: var(--q-mist); overflow: hidden; border: 1.5px solid var(--q-ink); } .q-bar__track span { display: block; height: 100%; background: var(--q-blue); } .q-image { margin: 0 0 24px; } .q-image.aligncenter img { margin-inline: auto; } .q-gallery { columns: 2 320px; column-gap: 20px; margin: 16px 0 32px; } .q-gallery__item { break-inside: avoid; margin: 0 0 20px; border-radius: 16px; overflow: hidden; background: var(--q-mist); } .q-gallery__item img { width: 100%; transition: transform .5s var(--q-ease); } .q-gallery__item:hover img { transform: scale(1.03); } .q-gallery__item figcaption { padding: 12px 16px 16px; font-size: .9375rem; color: var(--q-muted); text-align: left; } .q-gallery__item figcaption strong { color: var(--q-ink); } .q-builder .q-video { margin-bottom: 8px; } .q-builder .q-grid--cards { margin-bottom: 16px; } /* ---------------------------------------------------------------- forms */ .q-form { position: relative; } .q-form__title { font-size: 1.6rem; margin-bottom: 20px; } .q-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; } .q-field { grid-column: 1 / -1; display: grid; gap: 6px; } .q-field.is-half { grid-column: auto; } .q-field > label { font-weight: 700; font-size: .9375rem; color: var(--q-ink); } .q-field .req { color: var(--q-blue); } .q-field input:not([type="checkbox"]), .q-field textarea, .q-field select, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--q-line); border-radius: var(--q-radius-sm); background: #fff; font: 500 1.0625rem/1.4 var(--q-sans); color: var(--q-ink); transition: border-color .2s, box-shadow .2s; appearance: none; } .q-field select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f75bc' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; padding-right: 44px; } .q-field textarea { resize: vertical; min-height: 150px; } .q-field input:focus, .q-field textarea:focus, .q-field select:focus, .comment-form input:focus, .comment-form textarea:focus { outline: 0; border-color: var(--q-blue); box-shadow: 0 0 0 4px rgba(15, 117, 188, .15); } .q-field.is-invalid input, .q-field.is-invalid textarea, .q-field.is-invalid select { border-color: #b3261e; } .q-field__error { margin: 0; color: #b3261e; font-size: .875rem; font-weight: 600; } .q-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--q-muted); cursor: pointer; } .q-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .q-check__box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--q-ink); border-radius: 7px; background: #fff; color: transparent; transition: background .15s; } .q-check__box .q-icon { width: 16px; height: 16px; stroke-width: 3; } .q-check input:checked + .q-check__box { background: var(--q-blue); color: #fff; } .q-check input:focus-visible + .q-check__box { outline: 3px solid var(--q-blue); outline-offset: 2px; } .q-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .q-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; } .q-form__status { margin: 0; font-weight: 600; } .q-form__status.is-error { color: #b3261e; } .q-form.is-sent .q-form__grid, .q-form.is-sent .q-form__footer .q-btn { display: none; } .q-form.is-sent .q-form__status { display: flex; gap: 14px; align-items: center; padding: 22px 24px; border-radius: 16px; background: var(--q-mist); border: 2px solid var(--q-blue); color: var(--q-ink); font-size: 1.125rem; } .q-form.is-busy .q-btn { opacity: .7; pointer-events: none; } .q-form__noscript { color: #b3261e; } .q-contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: clamp(64px, 9vw, 120px); } .q-contact__info { display: grid; gap: 14px; position: sticky; top: calc(var(--q-header-h) + 24px); } .q-contact__card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 2px solid var(--q-line); border-radius: 18px; color: var(--q-ink); text-decoration: none; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; transition: border-color .2s, box-shadow .2s, transform .2s; } .q-contact__card small { display: block; font: 700 .75rem var(--q-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--q-muted); margin-bottom: 2px; } .q-contact__card:hover { border-color: var(--q-ink); box-shadow: var(--q-hard); transform: translate(-2px, -2px); color: var(--q-ink); } .q-contact__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--q-blue); color: #fff; } .q-socials--contact a { border-color: var(--q-line); color: var(--q-ink); } .q-contact__form { padding: clamp(24px, 4vw, 44px); border: var(--q-border); border-radius: 26px; box-shadow: 10px 10px 0 var(--q-blue); background: #fff; } /* comments */ .q-comments { margin: 0 0 80px; padding-top: 40px; border-top: 2px solid var(--q-ink); } .q-comments__title { font-size: 1.6rem; } .q-comments__list { list-style: none; padding: 0; margin: 0 0 40px; } .q-comments__list .comment { padding: 20px 0; border-bottom: 1px solid var(--q-line); } .q-comments__list .children { list-style: none; padding-left: 28px; } .comment-author { display: flex; align-items: center; gap: 12px; font-weight: 700; } .comment-author img { border-radius: 50%; } .comment-metadata { font-size: .8125rem; margin: 4px 0 8px; } .comment-metadata a { color: var(--q-muted); } .comment-form { display: grid; gap: 14px; } .comment-form label { font-weight: 700; font-size: .9375rem; display: block; margin-bottom: 4px; } /* 404 */ .q-404 { padding: clamp(64px, 10vw, 140px) 0; text-align: center; } .q-404 .q-eyebrow { justify-content: center; } .q-404__title { font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -.03em; } .q-404__line { height: 60px; margin: 16px auto 32px; max-width: 520px; } .q-404 .q-searchform { max-width: 560px; margin: 28px auto; } .q-404__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } /* reveal on scroll: only hidden once theme.js has run and added .q-anim, so content never stays invisible when the script is blocked or fails */ .q-anim .q-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--q-ease), transform .7s var(--q-ease); } .q-anim .q-reveal.is-in { opacity: 1; transform: none; } /* WordPress bits */ .alignwide { margin-inline: calc(-1 * min(8vw, 120px)); } .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; } .wp-block-button__link { border-radius: 999px; border: var(--q-border); box-shadow: 3px 3px 0 var(--q-ink); font-weight: 700; } .sticky, .bypostauthor, .gallery-caption { } .has-quarj-blue-color { color: var(--q-blue); } .has-quarj-blue-background-color { background-color: var(--q-blue); } .has-quarj-deep-color { color: var(--q-blue-800); } .has-quarj-deep-background-color { background-color: var(--q-blue-800); } .has-quarj-ink-color { color: var(--q-ink); } .has-quarj-ink-background-color { background-color: var(--q-ink); } .has-quarj-silver-color { color: var(--q-silver); } .has-quarj-silver-background-color { background-color: var(--q-silver); } .has-quarj-mist-color { color: var(--q-mist); } .has-quarj-mist-background-color { background-color: var(--q-mist); } .has-white-color { color: #fff; } .has-white-background-color { background-color: #fff; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1400px) { .q-header__call span { display: none; } .q-header__call { width: 44px; padding: 0; } .q-menu a { padding: 10px 10px; font-size: .9375rem; } } @media (max-width: 1140px) { :root { --q-header-h: 72px; } .q-header__logo img { height: 46px; } .q-menu-toggle { display: inline-grid; } .q-header__call { display: none; } .q-nav { position: fixed; inset: var(--q-header-h) 0 0 auto; width: min(420px, 100%); display: flex; flex-direction: column; gap: 24px; padding: 24px var(--q-gutter) 40px; background: #fff; border-left: var(--q-border); overflow-y: auto; overscroll-behavior: contain; transform: translateX(105%); visibility: hidden; transition: transform .35s var(--q-ease), visibility 0s .35s; } .admin-bar .q-nav { top: calc(var(--q-header-h) + 46px); } .q-header.is-scrolled + * .q-nav, .q-header.is-scrolled .q-nav { top: 68px; } .is-nav-open .q-nav { transform: none; visibility: visible; transition-delay: 0s; } .is-nav-open .q-menu-toggle .is-open-icon { display: none; } .is-nav-open .q-menu-toggle .is-close-icon { display: block; } .is-nav-open { overflow: hidden; } .q-menu { flex-direction: column; align-items: stretch; gap: 0; } .q-menu > li { flex-wrap: wrap; border-bottom: 1px solid var(--q-line); } .q-menu > li > a { flex: 1; padding: 16px 4px; font: 700 1.375rem var(--q-display); border-radius: 0; background: none !important; } .q-menu > .current-menu-item > a::after, .q-menu > .current-menu-ancestor > a::after, .q-menu > .current_page_item > a::after { display: none; } .submenu-toggle { width: 44px; height: 44px; } .q-menu .sub-menu { position: static; flex-basis: 100%; display: none; min-width: 0; padding: 0 0 12px 12px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .q-menu li:hover > .sub-menu { display: none; } .q-menu li.is-open > .sub-menu { display: block; } .q-menu .sub-menu a { font-size: 1.0625rem; } .q-nav__extra { display: grid; gap: 10px; } .q-nav__extra p { margin: 0; } .q-nav__extra p a { display: inline-flex; align-items: center; gap: 10px; color: var(--q-ink); font-weight: 600; text-decoration: none; } .q-nav__extra .q-socials a { border-color: var(--q-line); color: var(--q-ink); } .q-hero__grid { grid-template-columns: 1fr; } .q-disc-stage { width: min(80vw, 380px); } .q-hero__eq { display: none; } .q-pillars { grid-template-columns: 1fr; } .q-grid--videos, .q-grid--cards { grid-template-columns: repeat(2, 1fr); } .q-features__grid { grid-template-columns: repeat(2, 1fr); } .q-features__grid .q-feature { padding: 26px 20px !important; border-left: 0 !important; } .q-features__grid .q-feature:nth-child(2n) { border-left: 1px solid var(--q-line) !important; } .q-cta__inner { grid-template-columns: 1fr; } .q-footer__grid { grid-template-columns: 1fr 1fr; } .q-contact { grid-template-columns: 1fr; } .q-contact__info { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } @media (max-width: 782px) { .admin-bar .q-header { top: 46px; } .q-builder [style*="padding-left"] { padding-left: 0 !important; } .q-col, .q-col.is-first { float: none; width: 100% !important; margin-left: 0; } .q-form__grid { grid-template-columns: 1fr; } .q-field.is-half { grid-column: 1 / -1; } } @media (max-width: 640px) { body { font-size: 1rem; } .admin-bar .q-header { top: 0; } .q-grid--videos, .q-grid--cards { grid-template-columns: 1fr; } .q-features__grid { grid-template-columns: 1fr; } .q-features__grid .q-feature:nth-child(n) { border-left: 0 !important; padding-inline: 0 !important; } .q-footer__grid { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; } .q-hero__actions .q-btn { width: 100%; } .q-sticker { font-size: .8125rem; } .q-sticker--b { right: 0; } .q-postnav { grid-template-columns: 1fr; } .q-postnav__next { grid-column: auto; } .q-content { font-size: 1.0625rem; } .q-pagehero__wave { width: 90%; opacity: .35; } .q-contact__form { box-shadow: 6px 6px 0 var(--q-blue); } .q-hero__title em { white-space: normal; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .q-marquee__track { animation: none !important; } .q-marquee { overflow-x: auto; } .q-anim .q-reveal { opacity: 1; transform: none; } } @media print { .q-reveal { opacity: 1 !important; transform: none !important; } .q-header, .q-footer, .q-cta, .q-marquee, .q-hero__visual, .q-share, .q-postnav { display: none !important; } body { font-size: 12pt; } }