/* * Kipos Coaching: the site's own style sheet. It draws the look of the old WordPress theme * (Qode "CoachFocus" with Elementor) in plain rules for the site's own markup. Each section's own * measurements (spacing, widths, colours per element) are in src/theme/sections//.css. * * Screens: desktop; up to 1200 px the content grid narrows; up to 1024 px is the tablet layout (mobile * header); up to 767 px the phone layout (columns stack). The theme's own widgets also change at 1440, * 1366, 768, 680 and 480 px. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/site/fonts/inter-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: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/site/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/site/fonts/roboto-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: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/site/fonts/roboto-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Gilda Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fonts/gilda-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: "Gilda Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fonts/gilda-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --k-orange: #ff6839; --k-orange-dark: #f85e2e; --k-teal: #19ada2; --k-black: #000; --k-ink: #1c1c1c; --k-gray: #a8a8a8; --k-gray-text: #b1b0b5; --k-light: #ebebeb; --k-lighter: #f9f9f9; --k-grid: 1100px; --k-serif: "Gilda Display", Georgia, serif; --k-text-font: Roboto, Arial, sans-serif; --k-header: 87px; --k-topbar: 30px; } /* The theme's content grid is 1300 pixels wide from 1441 pixels on (its "qodef-content-grid-1300"). */ @media (min-width: 1441px) { :root { --k-grid: 1300px; } } /* ---------------------------------------------------------------------------------------------- */ /* Base */ /* ---------------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: Inter, sans-serif; font-size: 16px; line-height: 1.625; font-weight: 400; color: #000; background-color: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body.k-dark { background-color: var(--k-ink); } h1, h2, h3, h4, h5, h6 { color: #000; font-weight: 400; margin: 25px 0; overflow-wrap: break-word; } .k-dark h1, .k-dark h2, .k-dark h3, .k-dark h4, .k-dark h5, .k-dark h6 { color: #fff; } h1 { font-size: 65px; line-height: 1.123; letter-spacing: -0.01em; } h2 { font-size: 50px; line-height: 1.16; letter-spacing: -0.01em; } h3 { font-size: 35px; line-height: 1.228; } h4 { font-size: 25px; line-height: 1.32; font-weight: 500; } h5 { font-size: 18px; line-height: 1.444; font-weight: 500; } h6 { font-size: 16px; line-height: 1.5; font-weight: 500; } @media (max-width: 680px) { h1 { font-size: 55px; } h2 { font-size: 45px; } } p { margin: 10px 0; } a { color: #000; text-decoration: none; transition: color 0.2s ease-out; } .k-dark a { color: #fff; } img { max-width: 100%; height: auto; vertical-align: middle; border: 0; } iframe { display: block; max-width: 100%; border: 0; } ul, ol { margin: 0 0 1.5em; padding: 0; list-style-position: inside; } li > ul, li > ol { margin: 0 0 0 1.5em; } strong, b { font-weight: bolder; } sup, sub { position: relative; vertical-align: baseline; font-size: 14px; line-height: 0; color: var(--k-gray-text); } sup { top: -0.5em; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } table tr { border: 1px solid #000; } table td, table th { padding: 5px 10px; text-align: left; border: 0; border-right: 1px solid #000; } hr { border: 0; border-bottom: 1px solid #000; margin: 10px 0; } ::selection { color: #fff; background: var(--k-orange); } .k-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .k-skip { position: absolute; left: -9999px; top: 0; z-index: 10001; padding: 10px 16px; background: #fff; color: #000; } .k-skip:focus { left: 10px; top: 10px; } :focus-visible { outline: 2px solid var(--k-teal); outline-offset: 2px; } /* The theme's underline that grows under a link on hover. */ .k-line { background-image: linear-gradient(to top, transparent 0, transparent 2px, currentColor 2px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size 0.25s ease-out, color 0.2s ease-out; } .k-line:hover, a:hover > .k-line { background-size: 100% 3px; } /* ---------------------------------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------------------------------- */ .k-btn, button.k-btn, input.k-btn { position: relative; display: inline-flex; align-items: center; vertical-align: middle; width: auto; margin: 0; padding: 14px 29px 13px; font-family: inherit; font-size: 17px; line-height: 1; letter-spacing: -0.015em; font-weight: 500; color: #000; background-color: transparent; border: 1px solid currentColor; border-radius: 23px; cursor: pointer; text-decoration: none; transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } .k-arrow { position: relative; display: inline-block; margin-left: 13px; overflow: hidden; line-height: 0; transform: translateY(-1px); fill: currentColor; } .k-arrow svg { display: inline-block; transition: transform 0.3s ease-out; } .k-arrow svg:last-child { position: absolute; top: 0; left: 0; transform: translateX(-200%); } .k-btn:hover .k-arrow svg:first-child { transform: translateX(200%); } .k-btn:hover .k-arrow svg:last-child { transform: translateX(0); } .k-btn-circle { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid currentColor; border-radius: 50%; color: #000; } .k-btn-circle .k-arrow { margin: 0; transform: none; } .k-btn-circle .k-arrow svg:last-child { transform: translateX(-200%) translateY(200%); } .k-btn-circle:hover .k-arrow svg:first-child { transform: translateX(200%) translateY(-200%); } .k-btn-circle:hover .k-arrow svg:last-child { transform: translateX(0) translateY(0); } .k-dark .k-btn, .k-on-dark .k-btn { color: #fff; } /* ---------------------------------------------------------------------------------------------- */ /* Top bar, header, menus */ /* ---------------------------------------------------------------------------------------------- */ .k-topbar { position: relative; z-index: 101; height: var(--k-topbar); padding: 0 58px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--k-teal); color: #fff; font-size: 14px; line-height: 1; } .k-topbar a { color: #fff; background-image: linear-gradient(to top, transparent 0, transparent 1px, currentColor 1px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; transition: background-size 0.25s ease-out; } .k-topbar a:hover { background-size: 100% 2px; } .k-topbar p { margin: 0; } .k-header { position: relative; z-index: 100; height: var(--k-header); background-color: #fff; } .k-header--clear { background-color: transparent; } .k-header--gray { background-color: var(--k-light); } .k-header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 58px; } .k-logo { display: flex; align-items: center; flex-shrink: 0; height: 60px; } .k-logo img { display: block; width: auto; height: 100%; max-height: 100%; } .k-nav { height: 100%; margin-left: auto; } .k-nav > ul { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; white-space: nowrap; } .k-nav > ul > li { position: relative; height: 100%; margin: 0 24px; } .k-nav > ul > li:first-child { margin-left: 0; } .k-nav > ul > li:last-child { margin-right: 0; } .k-nav > ul > li > a, .k-nav > ul > li > span { position: relative; display: flex; align-items: center; height: 100%; font-size: 16px; line-height: 1.625; color: #000; cursor: pointer; } .k-nav-text { background-image: linear-gradient(to top, transparent 0, transparent 5px, currentColor 5px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 6px; transition: background-size 0.25s ease-out; } .k-nav > ul > li:hover > a .k-nav-text, .k-nav > ul > li:hover > span .k-nav-text, .k-nav > ul > li:focus-within > a .k-nav-text { background-size: 100% 6px; } .k-nav > ul > li.is-current > a .k-nav-text, .k-nav > ul > li.is-current > span .k-nav-text { position: relative; margin-left: 21px; background-size: 100% 6px; } .k-flower { display: none; } .k-nav > ul > li.is-current > a .k-flower, .k-nav > ul > li.is-current > span .k-flower { display: inline-block; position: absolute; top: 50%; left: 1px; right: auto; transform: translateY(-50%); } .k-sub { position: absolute; top: 100%; left: -35px; z-index: 10; width: 295px; margin: 0; padding: 31px 0; list-style: none; background-color: var(--k-lighter); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0s 0.2s; } .k-nav > ul > li:hover > .k-sub, .k-nav > ul > li:focus-within > .k-sub { opacity: 1; visibility: visible; transition: opacity 0.2s ease-out; } .k-sub li { padding: 0 35px; } .k-sub a { display: flex; margin: 7px 0; font-size: 13px; line-height: 22px; text-transform: uppercase; white-space: normal; } .k-sub a .k-nav-text { background-image: linear-gradient(to top, transparent 0, transparent 4px, currentColor 4px, currentColor 100%); background-size: 0 5px; } .k-sub a:hover .k-nav-text, .k-sub li.is-current a .k-nav-text { background-size: 100% 5px; } .k-header-tools { display: flex; align-items: center; height: 100%; margin-left: 28px; } .k-header-tools > * + * { margin-left: 28px; } .k-icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; line-height: 1; } .k-lines { position: relative; display: block; width: 30px; height: 12px; } .k-lines::before, .k-lines::after { content: ""; position: absolute; left: 0; height: 2px; background-color: currentColor; transition: transform 0.3s ease, width 0.3s ease; } .k-lines::before { top: 0; width: 80%; } .k-lines::after { bottom: 0; width: 100%; } .k-icon-button:hover .k-lines::before { width: 100%; } .k-close-lines { position: relative; display: block; width: 31px; height: 31px; } .k-close-lines::before, .k-close-lines::after { content: ""; position: absolute; top: 15px; left: 0; width: 100%; height: 2px; background-color: currentColor; } .k-close-lines::before { transform: rotate(45deg); } .k-close-lines::after { transform: rotate(-45deg); } /* The header that comes down when the page is scrolled. */ .k-sticky { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 70px; background-color: #fff; transform: translateY(-100%); transition: transform 0.5s ease; } .k-sticky.is-shown { transform: translateY(0); } .k-sticky .k-header-inner { height: 70px; } .k-sticky .k-logo { height: 60px; } /* The search that covers the header. */ .k-search { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 58px; background-color: var(--k-lighter); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } .k-search.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .k-search input { flex: 1; margin: 0 20px; padding: 0; font: inherit; font-size: 16px; background: transparent; border: 0; outline: 0; color: #000; } .k-search input::placeholder { color: inherit; opacity: 1; } /* The phone and tablet header. */ .k-mheader { display: none; position: relative; z-index: 100; height: 70px; background-color: #fff; } .k-mheader .k-header-inner { padding: 0 7%; } .k-mheader .k-logo { margin-right: auto; } .k-mnav { position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100vh - 70px); overflow-y: auto; background-color: #fff; display: none; } .k-mnav.is-open { display: block; } .k-mnav ul { margin: 0; padding: 0; list-style: none; } /* The theme's phone menu: 38px a line, a chevron for the groups, 13px capitals below them. */ .k-mnav > ul { padding: 34px 7%; } .k-mnav li { position: relative; padding: 6px 0; } .k-mnav a, .k-mnav .k-mnav-group { display: block; padding: 0; font-size: 16px; line-height: 26px; color: #000; } .k-mnav .k-mnav-toggle { position: absolute; top: 6px; right: 0; width: 26px; height: 26px; padding: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M13.8 24.196c.39.39 1.024.39 1.414 0l6.486-6.486c.196-.196.294-.454.292-.71 0-.258-.096-.514-.292-.71L15.214 9.804c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L19.582 17 13.8 22.782c-.39.39-.39 1.024 0 1.414z'/%3E%3C/svg%3E") center / 22px 22px no-repeat; border: 0; cursor: pointer; transition: transform 0.2s ease; } .k-mnav li.is-open > .k-mnav-toggle { transform: rotate(90deg); } .k-mnav .k-msub { display: none; padding: 10px 0 0 20px; } .k-mnav li.is-open > .k-msub { display: block; } .k-mnav .k-msub a { font-size: 13px; line-height: 21.125px; text-transform: uppercase; } .k-mnav li.is-current > a, .k-mnav li.is-current > .k-mnav-group { text-decoration: underline; text-underline-offset: 3px; } .k-mnav .k-flower { display: inline-block; position: absolute; top: 13px; left: -16px; } /* Open, the menu button turns into an orange cross. */ [data-mnav-open][aria-expanded="true"] { color: var(--k-orange); } [data-mnav-open][aria-expanded="true"] .k-lines::before, [data-mnav-open][aria-expanded="true"] .k-lines::after { top: 5px; bottom: auto; width: 100%; } [data-mnav-open][aria-expanded="true"] .k-lines::before { transform: rotate(45deg); } [data-mnav-open][aria-expanded="true"] .k-lines::after { transform: rotate(-45deg); } @media (max-width: 1024px) { .k-topbar, .k-header, .k-sticky { display: none; } .k-mheader { display: block; } .k-pull { margin-top: 0 !important; } } /* The page's content sits under a transparent header on most pages. */ .k-pull { margin-top: calc(-1 * (var(--k-header) + var(--k-topbar))); } .k-pull--header { margin-top: calc(-1 * var(--k-header)); } .k-header--clear + .k-sticky + .k-mheader + main.k-pull > :first-child { position: relative; } /* ---------------------------------------------------------------------------------------------- */ /* Title area of a page */ /* ---------------------------------------------------------------------------------------------- */ /* The heading sits in the middle of the whole band, the transparent header included, as the theme placed it. */ .k-pagetitle { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 438px; background-color: var(--k-light); background-position: center 0; background-repeat: no-repeat; background-size: cover; } .k-pagetitle-inner { width: var(--k-grid); margin: 0 auto; } .k-pagetitle h1 { margin: 0; } .k-pagetitle--center { text-align: center; } .k-pagetitle--light h1 { color: #fff; } @media (max-width: 1200px) { .k-pagetitle-inner { width: 960px; } } @media (max-width: 1024px) { .k-pagetitle { height: var(--k-title-m, 200px) !important; } .k-pagetitle-inner { width: 86%; } } @media (max-width: 480px) { .k-pagetitle h1 { font-size: 50px; } } /* Pages with a text of their own (agreements, policies, a trainer's page): the theme's page frame. */ .k-page-inner { padding: 135px 0 102px; } .k-page-grid { width: var(--k-grid); margin: 0 auto; } @media (max-width: 1200px) { .k-page-grid { width: 960px; } } @media (max-width: 1024px) { .k-page-grid { width: 86%; } } /* A page of plain text (the agreements): the theme's own black Inter text, margins as they come. */ .k-prose ul, .k-prose ol { margin: 0 0 1.5em; } .k-prose img { border-radius: 10px; } /* ---------------------------------------------------------------------------------------------- */ /* Sections, rows and columns (the page builder's grid) */ /* ---------------------------------------------------------------------------------------------- */ .k-sec, .k-inner { position: relative; } .k-sec > .k-row, .k-inner > .k-row { position: relative; display: flex; width: 100%; margin: 0 auto; } .k-sec--grid > .k-row { width: var(--k-grid); } .k-sec--grid-left > .k-row { width: 100%; padding-right: calc((100% - var(--k-grid)) / 2); } @media (max-width: 1200px) { .k-sec--grid > .k-row { width: 960px; } .k-sec--grid-left > .k-row { width: 100%; padding-right: calc((100% - 960px) / 2); } } @media (max-width: 1024px) { .k-sec > .k-row, .k-inner > .k-row { flex-wrap: wrap; } .k-sec--grid > .k-row { width: 86%; } .k-sec--grid-left > .k-row { width: 100%; padding-right: 7%; } } .k-col { position: relative; display: flex; min-height: 1px; width: 100%; } @media (min-width: 768px) { .k-col { width: var(--w, 100%); } } .k-col-in { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; padding: 10px; } .k-col-in > * { width: 100%; } /* An empty column takes its width but no padding (the builder padded only columns holding something). */ .k-col-in:empty { padding: 0; } /* A widget keeps the width it is given, even where that is wider than its column (as the builder's did). */ .k-w { position: relative; flex-shrink: 0; min-width: 0; } :where(.k-w:not(:last-child)) { margin-bottom: 20px; } .k-col-in > .k-inner:not(:last-child) { margin-bottom: 0; } /* Containers (the builder's newer flexible boxes). */ .k-flex { display: flex; padding: 10px; width: var(--w, 100%); } .k-flex > .k-row { display: flex; flex-direction: column; gap: 20px; width: 100%; } /* A container's items stay on one line unless it says otherwise (as the builder's containers did). */ .k-flex > .k-row { flex-wrap: nowrap; } /* Nothing in a container is wider than it (a long unbroken run of words wraps instead). */ .k-flex > .k-row > * { max-width: 100%; } .k-flex--boxed > .k-row { max-width: min(100%, 1140px); margin: 0 auto; } .k-flex .k-w:not(:last-child) { margin-bottom: 0; } /* A container inside another keeps the builder's 10px padding too. */ @media (max-width: 1024px) { .k-flex--boxed > .k-row { max-width: min(100%, 1024px); } } @media (max-width: 767px) { .k-flex > .k-row { flex-wrap: wrap; } .k-flex .k-flex { width: 100%; } .k-flex > .k-row[style*="row"], .k-flex.k-flex--row > .k-row { flex-direction: column; } } /* Decorative picture of a section (the theme's "offset image"). */ .k-deco { position: absolute; z-index: 0; pointer-events: none; max-width: none; } .k-sec > .k-row { z-index: 1; } @media (max-width: 1024px) { .k-deco { display: none; } } /* Background picture that moves slower than the page. */ .k-parallax { background-attachment: fixed; background-size: cover; background-position: center; } @media (max-width: 1024px) { .k-parallax { background-attachment: scroll; } } /* Widgets that hide on some screens. */ @media (min-width: 1025px) { .k-hide-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .k-hide-tablet { display: none !important; } } @media (max-width: 767px) { .k-hide-mobile { display: none !important; } } /* ---------------------------------------------------------------------------------------------- */ /* Widgets */ /* ---------------------------------------------------------------------------------------------- */ /* Section title (the theme's): a heading and an optional line of text under it. */ .k-title { margin: 0; font-size: 35px; line-height: 1.228; } h1.k-title { font-size: 65px; line-height: 1.123; letter-spacing: -0.01em; } h2.k-title { font-size: 50px; line-height: 1.16; letter-spacing: -0.01em; } h4.k-title { font-size: 25px; line-height: 1.32; font-weight: 500; } h5.k-title { font-size: 18px; line-height: 1.444; font-weight: 500; } h6.k-title { font-size: 16px; line-height: 1.5; font-weight: 500; } @media (max-width: 680px) { h1.k-title { font-size: 55px; } h2.k-title { font-size: 45px; } } .k-title-text { margin: 25px 0 0; } .k-subtitle { margin: 0 0 6px; font-size: 25px; line-height: 1.32; font-weight: 500; } /* The Qi addon's title: the subtitle sits right on the title, the text 11px below it. */ .k-w--qi-section-title .k-subtitle { margin: 0; } .k-w--qi-section-title .k-text { margin-top: 11px; } /* The label with a dot ("● HAKKIMIZDA"). */ .k-label { display: inline-flex; align-items: center; margin: 0; font-size: 14px; line-height: 1; text-transform: uppercase; } .k-dot { flex-shrink: 0; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background-color: currentColor; } /* A heading in a font of its own. */ .k-display { margin: 0; font-family: var(--k-serif); font-weight: 400; font-size: 65px; line-height: 1.123; } h2.k-display, p.k-display { font-size: 35px; line-height: 1.3; } h1.k-display { font-size: 65px; } @media (max-width: 680px) { h1.k-display { font-size: 45px; } } /* Text of the editor. */ .k-text { font-family: var(--k-text-font); color: #666666; } .k-text a { color: #000; } .k-dark .k-text a { color: #fff; } /* Inside a widget the first and last margins stay (a widget holds its own margins, as the builder's did). */ .k-text--bare > p { margin: 0; } /* Headings in a text take the text's own font (the theme's headings name no font of their own). */ .k-text h1, .k-text h2, .k-text h3, .k-text h4, .k-text h5, .k-text h6 { font-family: inherit; } .k-text ul, .k-text ol { margin: 0 0 1.5em; } .k-text li > ul, .k-text li > ol { margin: 0 0 0 24px; } /* List items typed without a list around them: indented like any list, so the bullets stay inside the text's edge (the owner's wish; the old site let them hang outside). */ .k-text .k-list-bare { margin: 0; padding-left: 20px; list-style-position: outside; } .k-text .k-li-plain { list-style-type: none; } /* Every bulleted list of a text alike: the bullets inside the text's edge, the lines indented under the first (the owner's wish: as the lists typed without a list around them). */ .k-text > ul { padding-left: 20px; list-style-position: outside; } /* A list that follows a line of text stands a little apart from it (the owner's wish). */ .k-text > ul:not(:first-child), .k-text > ol:not(:first-child) { margin-top: 12px; } .k-text .qodef-inline-sup, .k-text .k-inline-sup { display: flex; } .k-text .qodef-inline-sup sup, .k-text .k-inline-sup sup { top: 0.95em; flex-shrink: 0; min-width: 18px; margin-right: 23px; } .k-text a:not(.k-btn) { text-decoration: underline; text-underline-offset: 2px; } .k-text p > a:only-child { text-decoration: none; } /* Banner: a picture with a title and a button over it. */ /* As wide as its picture (at most the column), the way the theme's banner sat. */ .k-banner { position: relative; display: inline-block; max-width: 100%; vertical-align: top; } .k-banner-img { display: block; max-width: 100%; height: auto; border-radius: 12px; transition: all 0.35s ease-out; } .k-banner-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 25px 35px 35px; } .k-banner--top .k-banner-body { justify-content: space-between; } .k-banner-title { margin: 10px 0; font-size: 35px; line-height: 1.228; font-weight: 400; } h4.k-banner-title { font-size: 25px; line-height: 1.32; font-weight: 500; } .k-banner-text { margin: 0; } .k-banner .k-btn { margin-top: 22px; } .k-banner--top .k-btn { margin-top: auto; } /* Icon (or number) with a title and text. */ .k-iwt { display: block; } /* The icon at its own size (the width and height attributes), as the theme showed it. */ .k-iwt .k-icon { display: block; max-width: 100%; height: auto; margin-bottom: 18px; } .k-iwt-title { margin: 0; } .k-iwt-text { margin: 6px 0 0; } .k-iwt--number-before-content { display: flex; align-items: flex-start; } .k-iwt-number { flex-shrink: 0; margin: -10px 23px 0 0; font-family: var(--k-serif); font-size: 90px; line-height: 1; } .k-iwt--before-content { display: flex; align-items: flex-start; } .k-iwt--before-content .k-icon { flex-shrink: 0; margin: 5px 12px 0 0; } .k-iwt--before-content .k-iwt-body { flex: 1; } /* Picture with a title (certificates). */ .k-iwt-figure { margin: 0; } .k-iwt-figure img { display: block; border-radius: 20px; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16); } .k-iwt-figure .k-iwt-text { margin: 15px 0 0; } .k-iwt-figure figcaption .k-iwt-title { position: relative; margin: 21px 0 0; padding-left: 20px; } .k-iwt-figure figcaption .k-iwt-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; transform: translateY(-50%); } .k-zoom { display: block; cursor: zoom-in; } /* Counter. */ .k-counter { text-align: left; } .k-counter-digit { display: flex; align-items: baseline; margin: 0; font-family: var(--k-serif); font-size: 90px; line-height: 1; color: inherit; } .k-counter-title { margin: 11px 0 0; font-size: 18px; line-height: 1.444; font-weight: 500; } .k-counter-text { margin: 4px 0 0; } /* Call to action: a line of text and a button. */ .k-cta { display: flex; align-items: center; justify-content: space-between; } .k-cta-text { padding-right: 20px; } .k-cta-text > * { margin: 0; } .k-cta .k-btn, .k-cta .k-btn-circle { flex: 0 0 auto; } .k-cta--centered { justify-content: center; } .k-cta--centered .k-cta-text { padding-right: 20px; } @media (max-width: 680px) { .k-cta { display: block; } .k-cta .k-btn, .k-cta .k-btn-circle { margin-top: 20px; } } /* Video: a picture that turns into the video when clicked. */ .k-video, .k-video-button { position: relative; display: block; width: 100%; overflow: hidden; background-color: #000; aspect-ratio: 16 / 9; } .k-video-button { aspect-ratio: auto; background: none; } .k-video-cover { display: block; width: 100%; height: 100%; object-fit: cover; } .k-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .k-play { position: absolute; top: 50%; left: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: none; cursor: pointer; transition: border-color 0.3s ease; } .k-play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; } .k-video-button:hover .k-play, .k-video:hover .k-play { border-color: #fff; } /* The big moving word. */ .k-marquee { overflow: hidden; white-space: nowrap; font-family: var(--k-serif); font-size: 100px; line-height: 1em; } .k-marquee-track { display: inline-flex; animation: k-marquee 30s linear infinite; } .k-marquee-track span { padding: 0 25px; } @keyframes k-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .k-marquee-track { animation: none; } } /* A heading the marquee is pulled up under stays in front of it (the label above it does not, as on the old site). */ .k-w--section-title:has(~ .k-w--text-marquee) { position: relative; z-index: 1; } .k-sep { margin: 10px 0; border: 0; border-bottom: 1px solid currentColor; } .k-divider { box-sizing: content-box; height: 0; margin: 15px 0; border: 0; border-top: 1px solid #000; } .k-map { display: block; width: 100%; border: 0; } /* Questions that open and close. */ .k-acc-item { margin: 0; } .k-acc-item + .k-acc-item { margin-top: 12px; } .k-acc-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 26px 10px 26px 26px; cursor: pointer; list-style: none; background-color: #f6f6f6; } .k-acc-q::-webkit-details-marker { display: none; } .k-acc-q h5 { margin: 0; font-size: 18px; } .k-acc-mark { position: relative; flex-shrink: 0; width: 20px; height: 18px; } .k-acc-mark::before, .k-acc-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background-color: currentColor; } .k-acc-mark::after { transform: rotate(90deg); transition: transform 0.2s ease; } .k-acc-item[open] .k-acc-mark::after { transform: rotate(0deg); } .k-acc-a { padding: 16px 26px; } .k-acc-a p { margin: 0; } /* ---------------------------------------------------------------------------------------------- */ /* Lists filled by the site: trainers, testimonials, references, events, posts */ /* ---------------------------------------------------------------------------------------------- */ /* Rows 40px apart. */ .k-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; } @media (max-width: 1024px) { .k-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .k-team { grid-template-columns: minmax(0, 1fr); } } .k-member-media { position: relative; overflow: hidden; border-radius: 10px; } /* Each photo at its own shape (one of them is a little taller than square), as the old list showed them. */ .k-member-media img { display: block; width: 100%; height: auto; transform-origin: top; transform: scale(1.01); transition: transform 0.6s ease-out; } .k-member:hover .k-member-media img { transform: scale(1.06); } .k-member-social { position: absolute; top: 0; right: 0; z-index: 2; display: flex; gap: 15px; padding: 11px 19px; border-radius: 10px 0 10px 10px; background-color: var(--k-orange); transform: translateX(100%); transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); } .k-member:hover .k-member-social, .k-member:focus-within .k-member-social { transform: translateX(0); } .k-member-social a { display: inline-flex; color: #fff; } .k-member-social svg { width: 12px; height: 12px; fill: currentColor; } .k-member-body { margin: 14px 0 50px; } .k-member-name { margin: 22px 0 2px; font-size: 18px; line-height: 1.444; font-weight: 500; } .k-member-role { margin: 0; color: var(--k-gray); line-height: 1; } .k-team--light .k-member-name { color: #fff; } .k-quotes { position: relative; overflow: hidden; } .k-quotes-track { display: flex; transition: transform 0.6s ease; } .k-quote { flex: 0 0 100%; display: flex; align-items: center; margin: 0; } /* The participant's photo beside the words (200px; 50px on phones), with softly rounded corners. */ .k-quote-side { position: relative; flex-shrink: 0; width: 200px; max-width: 30%; margin-right: 6%; } .k-quote-side img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10%; } /* The old slider set its quote mark to size 0: not shown. */ .k-quote-icon { display: none; } .k-quote-body { flex: 1; min-width: 0; text-align: left; } .k-quote-name { margin: 0 0 0.7em; font-size: 18px; font-weight: 500; line-height: 1.444; color: #000; } .k-quote-text { margin: 0 0 1.3em; } .k-quote-role { display: block; font-size: 18px; font-weight: 500; line-height: 1.444; color: #000; } .k-dots { display: flex; justify-content: center; gap: 0; margin-top: 30px; } .k-dots button { width: 10px; height: 10px; margin: 7px; padding: 0; border: 1px solid #1c1c1c; border-radius: 50%; background: transparent; cursor: pointer; transition: all 0.35s ease; } .k-dots button[aria-current="true"], .k-dots button:hover { background-color: var(--k-orange); border-color: var(--k-orange); } /* The dots sit at the foot of the slider, over the space the tallest words leave free. */ .k-quotes > .k-dots { position: static; margin: 25px 0 0; } .k-quotes > .k-dots button:not([aria-current="true"]) { transform: scale(0.7); } @media (max-width: 1024px) { .k-quote { align-items: flex-start; } } @media (max-width: 767px) { .k-quote-side { width: 50px; } } @media (max-width: 680px) { .k-quote { flex-direction: column; align-items: flex-start; } .k-quote-side { max-width: 100%; } } /* Three logos a row (five on screens wider than 1680px), 45px apart (10px on phones), as the old list set them. */ .k-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; align-items: center; } @media (min-width: 1681px) { .k-clients { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 767px) { .k-clients { gap: 10px; } } .k-clients img { display: block; width: 100%; height: auto; transition: opacity 0.2s ease-out; } .k-clients figure { margin: 0; } .k-clients figure:hover img { opacity: 0.8; } .k-events { display: block; } .k-event { display: flex; align-items: center; justify-content: space-between; padding: 27px 0 85px; border-top: 1px solid #000; } .k-event-title { margin: -5px 0 0; font-size: 35px; line-height: 1.228; } .k-event-meta { margin: 6px 0 0; color: var(--k-gray); } .k-event-tickets { flex-shrink: 0; margin: -12px 0 0 auto; } .k-event-soldout { font-weight: 500; } @media (max-width: 768px) { .k-event { flex-direction: column; align-items: flex-start; } .k-event-title { margin: 10px 0; } .k-event-tickets { margin: 15px 0 0; } } .k-event--none { justify-content: center; text-align: center; } @media (max-width: 768px) { .k-event--none { align-items: center; } } /* ---------------------------------------------------------------------------------------------- */ /* Forms */ /* ---------------------------------------------------------------------------------------------- */ .k-form { position: relative; width: 100%; } .k-form input[type="text"], .k-form input[type="email"], .k-form input[type="tel"], .k-form select, .k-form textarea { position: relative; display: block; width: 100%; margin: 0 0 20px; padding: 7px 0; font-family: inherit; font-size: 15px; line-height: 24px; color: #000; background-color: transparent; border: 0; border-bottom: 1px solid #000; border-radius: 0; outline: 0; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease-out; } .k-form textarea { padding: 11px 20px; border: 1px solid #000; border-radius: 10px; resize: none; } .k-form select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 10px) center; } .k-form ::placeholder { color: inherit; opacity: 1; } .k-form input:focus, .k-form select:focus, .k-form textarea:focus { border-color: var(--k-teal); } .k-form-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; font-size: 14px; line-height: 1.6; cursor: pointer; } .k-form-check input { flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; accent-color: #000; } .k-form-check a { text-decoration: underline; } .k-form .k-btn { margin-top: 20px; } /* The newsletter and registration forms had taller fields than the contact form. */ .k-form--newsletter input[type="email"], .k-form--register input[type="text"], .k-form--register input[type="email"], .k-form--register input[type="tel"], .k-form--register select { padding-top: 11px; padding-bottom: 11px; } .k-form--newsletter .k-btn { margin-top: 0; } .k-form--contact .k-btn { margin-top: 40px; } /* The registration form: a line's space (26px) between fields, ten-line text boxes, the consent line indented. */ .k-form--register input[type="text"], .k-form--register input[type="email"], .k-form--register input[type="tel"], .k-form--register select, .k-form--register textarea { margin-bottom: 26px; } .k-form--register .k-form-check { gap: 4px; margin: 0 0 26px 16px; font-size: 14px; line-height: 26px; } .k-form--register .k-form-check input { width: 13px; height: 13px; margin: 7px 0 0; } .k-form--register .k-btn { margin-top: 0; } .k-form-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .k-form-status { margin: 1em 0 0; font-size: 15px; } .k-form-status:empty { display: none; } .k-form[data-status="error"] .k-form-status, .k-form[data-status="missing"] .k-form-status { color: #c0392b; } .k-form[data-status="success"] .k-form-status { color: #0f7a70; } /* The robot check stays out of sight unless Cloudflare needs the visitor to click it. */ .k-human-check { display: block; } .k-form button[disabled] { opacity: 0.6; cursor: wait; } /* ---------------------------------------------------------------------------------------------- */ /* Blog */ /* ---------------------------------------------------------------------------------------------- */ /* The theme's blog: the list in three quarters of the grid, the sidebar in the last, 30px apart. */ .k-blog-layout { display: grid; grid-template-columns: calc(75% - 7.5px) minmax(0, 1fr); column-gap: 30px; } @media (max-width: 1024px) { .k-blog-layout { grid-template-columns: minmax(0, 1fr); } } .k-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; align-items: start; padding: 10px; } .k-posts--masonry { display: block; columns: 3; column-gap: 30px; } .k-posts--masonry > * { break-inside: avoid; } @media (max-width: 768px) { .k-posts, .k-posts--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); columns: 2; } } /* The blog page: two posts a row (the owner's wish; the old site had three). */ .k-posts--blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 680px) { .k-posts, .k-posts--masonry { grid-template-columns: minmax(0, 1fr); columns: 1; } } .k-card { display: inline-block; width: 100%; margin: 0 0 30px; vertical-align: top; } .k-card-media { position: relative; display: block; margin-bottom: 31px; overflow: hidden; border-radius: 10px; } .k-card-media img { display: block; width: 100%; transform-origin: top; transform: scale(1.01); transition: transform 0.6s ease-out; } .k-card:hover .k-card-media img { transform: scale(1.06); } .k-date { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; padding: 14px 20px; color: #fff; } .k-date-day { font-family: var(--k-serif); font-size: 70px; line-height: 1; letter-spacing: -0.025em; } .k-date-month { margin-left: 4px; font-size: 16px; line-height: 1; } .k-card-cats { margin: 0 0 4px; font-size: 15px; line-height: 24px; } .k-card-cats a { background-image: linear-gradient(to top, transparent 0, transparent 2px, currentColor 2px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size 0.25s ease-out; } .k-card-cats a:hover { background-size: 100% 3px; } .k-card-title { margin: 0; font-size: 25px; line-height: 1.32; font-weight: 500; } .k-card-title a:hover { color: var(--k-orange); } .k-card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 28px; gap: 18px 26px; } .k-share { display: flex; gap: 26px; font-size: 18px; line-height: 26px; } @media (max-width: 680px) { .k-card-bottom .k-share { width: 100%; margin-bottom: -6px; } } .k-share a { background-image: linear-gradient(to top, transparent 0, transparent 2px, currentColor 2px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size 0.25s ease-out; } .k-share a:hover { background-size: 100% 3px; } .k-card--quote .k-quote-box { position: relative; padding: 10.5% 12%; border-radius: 10px; background-color: var(--k-light); overflow: hidden; } .k-quote-box-text { position: relative; margin: 0; font-family: var(--k-serif); font-size: 30px; line-height: 1.17; } .k-quote-box-author { display: block; margin: 27px 0 0; font-size: 16px; font-weight: 500; color: #626262; } .k-quote-box a::after { content: ""; position: absolute; inset: 0; } /* Page numbers: round buttons in a centred row, the current page filled (the owner's wish; the old theme had bare numbers with arrows at the far ends). */ .k-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; font-size: 15px; line-height: 1; } .k-pagination > a, .k-pagination > span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #1c1c1c; border-radius: 50%; color: #1c1c1c; transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out; } .k-pagination > a:hover { border-color: var(--k-orange); color: var(--k-orange-dark); } .k-pagination > [aria-current="page"] { background-color: #1c1c1c; border-color: #1c1c1c; color: #fff; } .k-pagination .k-pagination-prev svg { transform: scaleX(-1); } .k-pagination svg { display: block; width: 18px; height: 15px; fill: currentColor; } .k-pagination svg path { stroke: currentColor; stroke-width: 1.4; } /* A category, a tag, the search: each post across the grid, 100px apart. */ .k-archive-posts { display: block; } .k-card--large { display: block; margin: 0 0 100px; } .k-card--large .k-card-media { margin-bottom: 39px; } .k-card--large .k-card-cats { margin-bottom: 9px; } .k-card--large .k-card-title { font-size: 50px; line-height: 1.16; font-weight: 400; letter-spacing: -0.01em; } .k-card--large .k-card-bottom { margin-top: 31px; justify-content: flex-start; } .k-card--large .k-share { margin-left: auto; } .k-archive .k-pagination { margin-top: 0; } /* On phones the archive's posts drop their share links (the space they left stays). */ @media (max-width: 680px) { .k-card--large .k-card-title { font-size: 45px; } .k-card--large .k-card-bottom .k-share { display: none; } .k-card--large .k-card-bottom { padding-bottom: 12px; } } /* The old sidebar's widgets were 35px apart, with spacer lines of their own between them (43, 36, 56 and 44px). */ .k-sidebar > * + * { margin-top: 35px; } .k-sidebar > :nth-child(2) { margin-top: 78px; } .k-sidebar > :nth-child(3) { margin-top: 71px; } .k-sidebar > :nth-child(4) { margin-top: 91px; } .k-sidebar > :nth-child(5) { margin-top: 79px; } .k-sidebar h4 { margin: 0 0 14px; font-size: 25px; line-height: 33px; font-weight: 500; } .k-sidebar ul { margin: 0; list-style: none; } .k-sidebar li { margin: 0 0 6px; font-size: 16px; line-height: 27px; } .k-sidebar li > a { font-size: 15px; line-height: 24px; } .k-sidebar li a { background-image: linear-gradient(to top, transparent 0, transparent 2px, currentColor 2px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size 0.25s ease-out; } .k-sidebar li a:hover { background-size: 100% 3px; } .k-sidebar-search { position: relative; display: flex; align-items: stretch; } .k-sidebar-search input { width: 100%; margin: 0; padding: 11px 50px 11px 0; font: inherit; font-size: 15px; background: transparent; border: 0; border-bottom: 1px solid #000; border-radius: 0; outline: 0; } .k-sidebar-search button { position: absolute; top: 0; right: 0; width: 50px; height: 100%; padding: 0; background: none; border: 0; cursor: pointer; } .k-sidebar-search svg { width: 18px; height: auto; } .k-sidebar-banner { position: relative; display: inline-block; max-width: 100%; vertical-align: top; overflow: hidden; border-radius: 12px; color: #fff; } /* At its own size (308px), narrower where the sidebar is. */ .k-sidebar-banner img { display: block; max-width: 100%; height: auto; } .k-sidebar-banner-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 25px 25px 35px; } .k-sidebar-banner-title { display: block; margin: 10px 0 22px; font-size: 25px; line-height: 1.32; font-weight: 500; color: #fff; } .k-sidebar-banner .k-btn { color: #fff; } .k-sidebar .k-social { display: flex; gap: 13px; font-size: 18px; line-height: 26px; } /* One post. */ .k-post-media { position: relative; margin-bottom: 39px; overflow: hidden; border-radius: 10px; } .k-post-media img { display: block; width: 100%; } .k-post-cats { margin: 0 0 15px; font-size: 15px; line-height: 24px; } .k-post-title { margin: 0 0 17px; font-size: 65px; line-height: 1.123; letter-spacing: -0.01em; } @media (max-width: 680px) { .k-post-title { font-size: 55px; } } /* A post's text in the theme's own black Inter, its margins as they come. */ .k-post-text { display: flow-root; } /* The first margin met the title's 17px (they stood in one box); the last one stays inside. */ .k-post-text > :first-child { margin-top: 0; } .k-post-text a { text-decoration: underline; text-underline-offset: 2px; } .k-post-text img { border-radius: 10px; } .k-post-text figure { margin: 30px 0; } .k-post-text blockquote { margin: 30px 0; padding: 10.5% 12%; border-radius: 10px; background-color: var(--k-light); font-family: var(--k-serif); font-size: 30px; line-height: 1.17; } .k-post-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 83px; } .k-tags { font-size: 15px; } .k-tags a { margin-right: 10px; } /* 53px of the post's own space below its share links, then the related posts' 86px. */ .k-related { margin-top: 139px; } .k-related h3 { margin: 6px 0 45px; } .k-related .k-card-bottom { display: none; } /* The related posts: the full width of the text, small titles, as the theme listed them. */ .k-related .k-posts { padding: 0; } .k-related .k-card-title { margin: 0 0 17px; font-size: 18px; line-height: 1.444; } .k-post-bottom .k-share { line-height: 24px; } /* Search results and "not found". */ /* The theme's "not found" page: a white screen, its words in the middle. */ .k-notfound { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; min-height: 600px; padding: 0; text-align: center; } .k-notfound h1 { margin: 0; } .k-notfound p { max-width: 45%; margin: 14px auto 0; } .k-notfound .k-btn { margin-top: 52px; } @media (max-width: 1024px) { .k-notfound { min-height: 0; padding: 110px 40px 200px; } .k-notfound p { max-width: none; } } /* ---------------------------------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------------------------------- */ .k-footer { position: relative; background-color: #000; color: var(--k-gray-text); } .k-footer a { color: var(--k-gray-text); } .k-footer-top { padding: 96px 60px 12px; } .k-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -15px; } .k-footer-cols > div { padding: 0 15px; } .k-footer-logo img { display: block; width: 224px; max-width: 100%; height: auto; } .k-footer-rule { width: 170px; max-width: 100%; margin: -1px 0 15px; border: 0; border-bottom: 1px solid #fff; } .k-footer h2 { margin: 0 0 10px; font-size: 18px; line-height: 1.444; font-weight: 500; color: #fff; } .k-footer p { margin: 10px 0; } .k-footer ul { margin: 0; list-style: none; } .k-footer li { margin: 0 0 6px; font-size: 16px; line-height: 30px; } .k-footer li:last-child { margin-bottom: 0; } /* The rule's space below stays its own: the contact lines' margins start after it. */ .k-footer-contact { display: flow-root; margin-bottom: -10px; } /* The theme kept an empty line (35px and its 3px rule) under the logo. */ .k-footer-logo { display: block; margin-bottom: 38px; } .k-footer li a, .k-footer p a { background-image: linear-gradient(to top, transparent 0, transparent 2px, currentColor 2px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size 0.25s ease-out, color 0.2s ease-out; } .k-footer li a:hover, .k-footer p a:hover { background-size: 100% 3px; color: #fff; } .k-footer li.is-current { position: relative; padding-left: 21px; } .k-footer li.is-current .k-flower { display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-60%); } .k-footer-bottom { padding: 110px 70px 10px; text-align: center; font-size: 14px; line-height: 1.625; } .k-footer-bottom p { margin: 10px 0; } @media (max-width: 1024px) { .k-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-footer-cols > div { padding-bottom: 50px; } /* The copyright line: 7% from the sides, with the 50px the theme's column kept below it. */ .k-footer-bottom { padding: 110px 7% 60px; } } @media (max-width: 680px) { .k-footer-cols { grid-template-columns: minmax(0, 1fr); } .k-footer-cols > div:last-child { padding-bottom: 0; } .k-footer-bottom { padding-bottom: 10px; } } /* ---------------------------------------------------------------------------------------------- */ /* Side panel, bottom bar, pop-up, back-to-top */ /* ---------------------------------------------------------------------------------------------- */ .k-side { position: fixed; top: 0; right: 0; z-index: 9999; display: flex; flex-direction: column; width: 590px; max-width: 100%; height: 100%; padding: 43px 70px 50px; background-color: var(--k-lighter); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s 0.6s; } .k-side.is-open { transform: translateX(0); visibility: visible; transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1); } .k-side-close { position: absolute; top: 29px; right: 58px; } .k-side-logo img { display: block; width: 224px; height: auto; } .k-side-title { margin: calc(15% + 21.5px) 0 30px; font-size: 36px; line-height: 1.625; font-weight: 700; } .k-side > p:not(.k-side-title) { margin: 0; } .k-side .k-btn { margin: 30px 0 20px; align-self: flex-start; } /* Address and social links in two columns, each under a short black line, at the foot of the panel. */ .k-side-contact { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; margin-top: auto; } .k-side-contact > * { position: relative; padding-top: 15px; } .k-side-contact > *::before { content: ""; position: absolute; top: 0; left: 0; width: 170px; max-width: 100%; height: 1px; background-color: #000; } .k-side-contact p { margin: 10px 0; } .k-side-contact li { margin: 0 0 6px; line-height: 30px; } .k-side-contact li:last-child { margin-bottom: 0; } .k-side-contact ul { margin: 0; list-style: none; } .k-side-contact a { background-image: linear-gradient(to top, transparent 0, transparent 2px, currentColor 2px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size 0.25s ease-out; } .k-side-contact a:hover { background-size: 100% 3px; } .k-shade { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s; } .k-shade.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s ease; } @media (max-width: 680px) { .k-side { padding: 43px 7% 50px; } .k-side-close { right: 7%; } } .k-bar { position: fixed; bottom: 20px; left: 0; z-index: 115; display: flex; justify-content: center; width: 100%; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; } .k-bar.is-open { opacity: 1; } .k-bar-inner { position: relative; width: var(--k-grid); pointer-events: auto; transform: scale(0.9); transition: transform 0.8s cubic-bezier(0.26, 0.63, 0, 0.96); } .k-bar.is-open .k-bar-inner { transform: scale(1); } .k-bar-box { display: flex; align-items: center; justify-content: space-between; min-height: 132px; padding: 30px 40px; border-radius: 10px; background-color: var(--k-teal); color: #fff; } .k-bar-title { margin: 0; font-size: 25px; line-height: 1.32; font-weight: 500; color: #fff; } .k-bar-text { margin: 8px 0 0; color: #fff; } /* The words take the room; the button keeps its label on one line (the owner's wish; the old site broke it in two). */ .k-bar-box > div { flex: 1 1 100%; } .k-bar .k-btn { flex-shrink: 0; margin-left: 30px; color: #fff; border-color: #fff; } .k-bar .k-btn-text { white-space: nowrap; } .k-bar-close { position: absolute; top: 14px; right: 16px; color: #fff; } .k-bar-close .k-close-lines { width: 16px; height: 16px; } .k-bar-close .k-close-lines::before, .k-bar-close .k-close-lines::after { top: 7px; height: 1px; } @media (max-width: 1200px) { .k-bar-inner { width: 960px; } } @media (max-width: 1024px) { .k-bar-inner { width: 86%; } .k-bar-box { flex-direction: column; gap: 25px; text-align: center; } .k-bar .k-btn { margin-left: 0; } } @media (max-width: 680px) { .k-bar-box { gap: 0; } .k-bar .k-btn { margin-top: 20px; } } .k-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; } .k-popup.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } /* The old pop-up's look: a white card with a 14px dark frame, the picture on top, a strip below with the close button. */ .k-popup-box { position: relative; top: 17px; width: 480px; max-width: calc(100% - 62px); padding: 0 0 35px; background-color: #fff; border-radius: 6px; box-shadow: 0 0 0 14px rgba(0, 0, 0, 0.6); } .k-popup-box a, .k-popup-box img { display: block; } .k-popup-box img { width: 100%; height: auto; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px 6px 0 0; } .k-popup-close { position: absolute; right: 9px; bottom: 7px; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 0; color: #fff; background: #3c3c3c; border: 0; border-radius: 50%; cursor: pointer; } .k-popup-close .k-close-lines { width: 8px; height: 8px; } .k-popup-close .k-close-lines::before, .k-popup-close .k-close-lines::after { top: 3px; height: 2px; } .k-top { position: fixed; right: 25px; bottom: 25px; z-index: 10000; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; color: #fff; font-size: 17px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s 0.15s; } .k-top::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background-color: var(--k-orange-dark); transition: transform 0.3s ease-out; } .k-top:hover::before { transform: scale(0.9); } .k-top.is-shown { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } @media (max-width: 680px) { .k-top { width: 60px; height: 60px; right: 15px; bottom: 15px; } } /* A picture opened large (certificates). */ .k-lightbox { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; } .k-lightbox img { max-width: 100%; max-height: 100%; } /* Dark pages (the training page) and their difference blend. */ .k-dark { color: #fff; } .k-dark .k-header-inner, .k-dark .k-nav > ul > li > a, .k-dark .k-nav > ul > li > span { color: #fff; } .k-dark .k-header .k-logo img { filter: none; } .k-dark .k-sub a { color: #000; } .k-dark .k-team .k-member-name { color: #fff; } .k-dark .k-btn-circle { color: #fff; } /* The home page's slider. */ /* Its height follows the width in four steps, as the old slider's layouts did (1240×570, 1024×460, 778×500, 480×500). */ .k-hero { position: relative; width: 100%; aspect-ratio: 1240 / 570; max-height: 570px; overflow: hidden; background-color: #ebebeb; } .k-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; } .k-slide.is-active { opacity: 1; } .k-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .k-slider-arrow { position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; margin-top: -25px; padding: 0; background: none; border: 0; cursor: pointer; opacity: 0.85; transition: opacity 0.2s ease; } .k-slider-arrow:hover { opacity: 1; } .k-slider-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 1px; margin: 0 0 0 -20px; background-color: #fff; } .k-slider-arrow::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-top: 1px solid #fff; border-left: 1px solid #fff; } .k-slider-prev { left: 50px; } .k-slider-prev::after { left: 5px; transform: rotate(-45deg); } .k-slider-next { right: 50px; } .k-slider-next::after { right: 5px; transform: rotate(135deg); } @media (max-width: 1024px) { .k-slider-prev { left: 15px; } .k-slider-next { right: 15px; } } @media (max-width: 1023px) { .k-hero { aspect-ratio: 1024 / 460; } } @media (max-width: 777px) { .k-hero { aspect-ratio: 778 / 500; } } @media (max-width: 479px) { .k-hero { aspect-ratio: 480 / 500; } } /* The blog's newest posts in the side column. */ .k-recent li { margin: 0 0 14px; } .k-recent-cat { display: block; width: fit-content; font-size: 15px; line-height: 24px; } .k-recent h5 { margin: 1px 0 0; font-size: 18px; line-height: 1.444; font-weight: 500; } .k-recent h5 a { background: none; } .k-recent h5 a:hover { color: var(--k-orange); } /* The cookie notice: a small box at the bottom left, above everything but the menus. */ .cookie-notice { position: fixed; left: 20px; bottom: 20px; z-index: 1001; width: 380px; max-width: calc(100% - 40px); padding: 20px 22px; font-size: 14px; line-height: 1.6; color: #000; background-color: #fff; border-radius: 10px; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16); } .cookie-notice[hidden] { display: none; } .cookie-notice p { margin: 0; } .cookie-notice a { text-decoration: underline; text-underline-offset: 2px; } .cookie-notice-kinds { display: grid; gap: 10px; margin: 14px 0 0; } .cookie-notice-kinds[hidden] { display: none; } .cookie-kind { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .cookie-kind-box { flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; accent-color: #000; } .cookie-kind-name { font-weight: 500; } .cookie-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; } .cookie-notice-actions button { padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; color: #000; background: transparent; border: 1px solid #000; border-radius: 23px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .cookie-notice-actions button:hover, .cookie-notice-actions .cookie-accept { color: #fff; background-color: #000; } .cookie-notice-actions .cookie-accept:hover { background-color: var(--k-teal); border-color: var(--k-teal); } @media (max-width: 480px) { .cookie-notice { left: 10px; bottom: 10px; max-width: calc(100% - 20px); } } /* ---------------------------------------------------------------------------------------------- */ /* The minimal header (a trainer's own page) and its menu over the whole screen */ /* ---------------------------------------------------------------------------------------------- */ .k-minimal .k-topbar { position: fixed; top: 0; left: 0; right: 0; } .k-header--minimal { position: fixed; top: var(--k-topbar); left: 0; right: 0; z-index: 100; } .k-header--minimal .k-logo { margin-right: auto; } /* The theme pulled the page up by its 130px header height, 13px more than the bar and header take. */ @media (min-width: 1025px) { .k-minimal main { margin-top: -13px; } } .k-fopener { position: relative; z-index: 102; display: inline-flex; align-items: center; padding: 0; font: inherit; color: #000; background: none; border: 0; cursor: pointer; } .k-fopener-text { margin-right: 21px; font-size: 16px; line-height: 18px; background-image: linear-gradient(to top, transparent 0, transparent 1px, currentColor 1px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; transition: background-size 0.25s ease-out, color 0.2s ease-out; } .k-fopener:hover .k-fopener-text { background-size: 100% 2px; } .k-fflower { display: block; width: 56px; height: 56px; fill: var(--k-orange); } .k-fflower path { transition: opacity 0.25s ease-out; } .k-fflower path:nth-child(1) { transition-delay: 0.15s; } .k-fflower path:nth-child(2) { transition-delay: 0.3s; } .k-fflower path:nth-child(3) { transition-delay: 0.45s; } .k-fflower path:nth-child(4) { transition-delay: 0.6s; } .k-full-open .k-fflower path { opacity: 0; } .k-full-open .k-fopener-text { color: #fff; } .k-full-open { overflow: hidden; } .k-full-open .k-header--minimal, .k-full-open .k-mheader--minimal { z-index: 1002; background: transparent; } .k-full { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; background-color: #ebebeb; overflow-x: hidden; overflow-y: auto; animation: k-fade-in 0.3s ease-out both; } .k-full[hidden] { display: none; } .k-full-image { flex-shrink: 0; align-self: stretch; width: 40%; background: #1c1c1c url("/site/img/full-menu.webp") center / cover no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path 0.8s ease; } .k-full.is-shown .k-full-image { clip-path: inset(0 0 0 0); } .k-full-nav { width: 60%; margin: 0 auto; padding: 6vh 15% 0; text-align: left; } .k-full-nav ul { margin: 0; padding: 0; list-style: none; } .k-full-nav > ul > li { padding: 17px 0; } .k-full-nav > ul > li > a, .k-full-group { position: relative; display: inline-block; overflow: hidden; padding: 0; font: inherit; font-size: 65px; line-height: 1.123; letter-spacing: -0.01em; font-weight: 400; color: #000; text-align: left; background: none; border: 0; cursor: pointer; } .k-full-nav > ul > li > a > .k-nav-text, .k-full-group > .k-nav-text { display: inline-block; transform: rotate(15deg) translateY(200%); transition: transform 0.6s ease-out; } .k-full.is-shown .k-full-nav > ul > li > a > .k-nav-text, .k-full.is-shown .k-full-group > .k-nav-text { transform: none; } .k-full-nav .k-sub { display: none; padding-left: 20px; } .k-full-nav li.is-open > .k-sub { display: block; } .k-full-nav .k-sub > li:first-child { margin-top: 30px; } .k-full-nav .k-sub > li:last-child { margin-bottom: -20px; } .k-full-nav .k-sub a { display: inline-block; font-size: 16px; line-height: 24px; color: #000; } .k-full-nav .k-sub a .k-nav-text { background-image: linear-gradient(to top, transparent 0, transparent 2px, currentColor 2px, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 3px; transition: background-size 0.25s ease-out; } .k-full-nav .k-sub a:hover .k-nav-text, .k-full-nav .k-sub li.is-current .k-nav-text { background-size: 100% 3px; } @keyframes k-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 1366px) { .k-full-nav > ul > li { padding: 7px 0; } .k-full-nav .k-sub > li:first-child { margin-top: 20px; } .k-full-nav .k-sub > li:last-child { margin-bottom: -10px; } } @media (max-width: 1024px) { .k-mheader--minimal .k-fflower { width: 40px; height: 40px; } .k-mheader--minimal .k-fopener-text { margin-right: 14px; } } @media (max-width: 1023px) { .k-full-image { display: none; } .k-full-nav { width: auto; } .k-full-nav > ul > li > a, .k-full-group { font-size: 45px; } } @media (max-width: 768px) { .k-full-open .k-fopener-text { color: #000; } } @media (max-width: 680px) { .k-mheader--minimal .k-fopener-text { display: none; } .k-full-nav > ul > li > a, .k-full-group { font-size: 55px; } } /* A picture widget stands in the middle of its column unless its own rules say otherwise (Elementor's default). */ .k-w--image { text-align: center; } /* The stretched call-to-action bands (orange): their words are white, as the old widget wrote them. */ .k-cta--standard .k-cta-text, .k-cta--standard .k-cta-text :is(h1, h2, h3, h4, h5, h6, p) { color: #fff; } /* The theme's decorations behind a section ("offset image"): the orange lines, at the place the old section named, under the section's content. Shown at their own size, at most 70% of the section up to 1680 pixels. */ .k-sec:has(> .k-offset), .k-sec:has(> .k-parallax) { position: relative; } /* The lines reach past the window's sides; the window cuts them (the page never scrolls sideways). */ .k-sec:has(> .k-offset) { overflow-x: clip; } .k-offset { position: absolute; max-width: 100%; pointer-events: none; } .k-offset img { display: block; max-width: 100%; height: auto; } @media (max-width: 1680px) { .k-offset { max-width: 70%; } } @media (max-width: 768px) { .k-offset { max-width: 100%; } } /* A section whose background is the theme's picture (its "parallax" image), filling the section. */ .k-parallax { position: absolute; inset: 0; overflow: hidden; } .k-parallax img { width: 100%; height: 100%; object-fit: cover; } /* The legal notice under a form (KVKK). */ .k-form-notice { flex-basis: 100%; width: 100%; margin: 14px 0 0; font-size: 12px; line-height: 1.5; opacity: 0.75; } .k-form-notice a { text-decoration: underline; } /* A band of the theme's picture closing a page (as on the services pages); the page then ends with it, no white below. */ .k-sec--picture { padding-top: 690px; } @media (max-width: 1024px) { .k-sec--picture { padding-top: 480px; } } @media (max-width: 767px) { .k-sec--picture { padding-top: 400px; } } .k-page-inner:has(> .k-sec:last-child > .k-parallax) { padding-bottom: 0; } /* The search: the pages that hold the words, before the posts. */ .k-search-pages ul { margin: 0 0 70px; padding: 0; list-style: none; } .k-search-pages li { padding: 22px 0; border-top: 1px solid #e0e0e0; } .k-search-pages li:last-child { border-bottom: 1px solid #e0e0e0; } .k-search-pages li > a { font-size: 25px; line-height: 1.32; font-weight: 500; } .k-search-pages li > a:hover { color: var(--k-orange); } .k-search-pages li > p { margin: 8px 0 0; color: #555; } .k-search-pages-title { margin: 0 0 25px; font-size: 35px; } /* A form that is being sent: its button dims and shows a turning ring until the answer comes. */ .k-form[data-status="sending"] .k-btn { position: relative; opacity: 0.6; cursor: progress; } .k-form[data-status="sending"] .k-btn .k-arrow { visibility: hidden; } .k-form[data-status="sending"] .k-btn::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: k-spin 0.8s linear infinite; } @keyframes k-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .k-form[data-status="sending"] .k-btn::after { animation-duration: 2.4s; } }