/** * Yuksoft landing styles. * * Ported 1:1 from the source design (Yuksoft Landing) — inline styles converted * to classes with exact values preserved. All accent (red) usages are driven by * the --accent / --accent-soft custom properties (set inline in ). * Responsive breakpoints are added at the end (the source design was desktop-only). */ /* -------------------------------------------------------------------------- * Tokens & base * ----------------------------------------------------------------------- */ :root { --accent: #EF3E3E; --accent-soft: rgba(239, 62, 62, 0.12); } .ys-root *, .ys-root *::before, .ys-root *::after { box-sizing: border-box; } .ys-root { position: relative; width: 100%; background: #ffffff; color: #0E0E0E; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } .ys-root img { max-width: 100%; } /* Visited links carry no distinct colour anywhere in the UI — they look identical to their normal state (overrides the base `_s` purple `a:visited`). Body prose is the one exception and keeps its accent link colour when visited (restored just below its own rule). This sits before the component rules so their explicit `:visited` colours still win on ties. */ .ys-root :visited { color: inherit; } html { scroll-behavior: smooth; } .ys-accent { color: var(--accent, #EF3E3E); } @keyframes ysFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes ysSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes ysRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- * Layout helpers * ----------------------------------------------------------------------- */ .ys-section { display: flex; justify-content: center; width: 100%; } .ys-container { width: 100%; max-width: 1200px; } /* Per-section vertical rhythm (matches the design 1:1). */ .ys-hero-section { padding: 0 20px 24px; } .ys-stats-section { padding: 24px 24px 8px; } .ys-services-section { padding: 80px 24px 40px; } .ys-sectors-section { padding: 60px 24px; } .ys-pricing-section { padding: 80px 24px; } .ys-portfolio-section { padding: 60px 24px; } .ys-team-section { padding: 60px 24px; } .ys-faq-section { padding: 60px 24px; } .ys-contact-section { padding: 80px 24px; } .ys-section__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; } /* Services header sits slightly further from its grid in the design. */ .ys-services-section .ys-section__head { margin-bottom: 44px; } /* Pricing header is tighter, with the billing toggle right above the grid. */ .ys-pricing-section .ys-section__head { gap: 16px; margin-bottom: 18px; } /* On the Elementor homepage each landing section is its own widget. Elementor adds a default 20px margin between widgets that the design does not have — the `.ys-*-section` paddings already carry the full vertical rhythm — so cancel it for the Yuksoft section widgets (keeps the layout 1:1). */ .elementor-widget:has(> .elementor-widget-container > .ys-section) { margin-bottom: 0; } .ys-section__head--center { align-items: center; text-align: center; } .ys-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #EF3E3E); } .ys-section__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -0.02em; line-height: 1.1; color: #0C0C0C; max-width: 620px; } .ys-section__head--center .ys-section__title { max-width: none; } .ys-section__lead { margin: 0; font-size: 18px; color: #535353; max-width: 560px; } .ys-section__head--center .ys-section__lead { max-width: 520px; } /* -------------------------------------------------------------------------- * Buttons * ----------------------------------------------------------------------- */ .ys-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border: none; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .ys-btn--lg { padding: 16px 28px; font-size: 16px; } .ys-btn--accent, .ys-btn--accent:link, .ys-btn--accent:visited { background: var(--accent, #EF3E3E); color: #fff; box-shadow: 0 8px 22px -8px var(--accent, #EF3E3E); } .ys-btn--accent:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 30px -8px var(--accent, #EF3E3E); } .ys-btn--accent:active { transform: translateY(0) scale(.96); filter: brightness(.94); } .ys-btn--lg.ys-btn--accent { box-shadow: 0 14px 30px -10px var(--accent, #EF3E3E); } .ys-btn--lg.ys-btn--accent:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -12px var(--accent, #EF3E3E); } .ys-btn--outline { padding: 16px 26px; border: 1.5px solid #D6DAE0; background: #ffffff; color: #1A1A1A; } .ys-btn--outline:hover { border-color: #0C0C0C; transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(12, 12, 12, .4); } .ys-btn--outline:active { transform: translateY(0) scale(.97); background: #F4F5F7; } .ys-btn--dark-outline { border: 1.5px solid #0C0C0C; background: #fff; color: #0C0C0C; } .ys-btn--dark-outline:hover { background: #0C0C0C; color: #fff; transform: translateY(-2px); } .ys-btn--dark-outline:active { transform: translateY(0) scale(.97); } /* -------------------------------------------------------------------------- * Header * ----------------------------------------------------------------------- */ .ys-header { position: sticky; top: 0; z-index: 50; width: 100%; display: flex; justify-content: center; padding: 34px 24px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, .6); box-shadow: none; /* Only paint properties are transitioned; layout (padding/max-width/blur) snaps in one frame so the nav text doesn't shimmer during the morph. */ transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; } .ys-header__inner { width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, border-radius .3s ease; } /* Scrolled: the full-width bar collapses into a floating translucent pill. (The 7-item nav is wide, so the pill hugs the content with tight internal padding and only a small side margin.) */ .ys-header.is-scrolled { padding-left: 16px; padding-right: 16px; background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .ys-header.is-scrolled .ys-header__inner { max-width: 1280px; gap: 14px; padding: 9px 12px 9px 22px; border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 14px 38px -14px rgba(12, 12, 12, .3), inset 0 1px 0 rgba(255, 255, 255, .8); } .ys-logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; } /* Bundled wordmark: the source PNG is a 1000x1000 square with large empty margins, so we zoom-crop to the wordmark via background-size/position. */ .ys-logo__mark { display: block; background-repeat: no-repeat; background-position: 50% 51%; } .ys-logo--header .ys-logo__mark { width: 186px; height: 56px; background-size: 286px 286px; } .ys-logo--footer .ys-logo__mark { width: 186px; height: 56px; background-size: 286px 286px; } /* Core custom logo (user-uploaded) — contained, not cropped. */ .ys-logo .custom-logo { display: block; width: auto; height: 54px; max-width: 230px; object-fit: contain; object-position: left center; } .ys-nav { display: flex; align-items: center; } .ys-nav__panel { display: contents; } .ys-nav__list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .ys-nav__list li { margin: 0; } .ys-nav__link { display: inline-block; padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #1A1A1A; text-decoration: none; transition: background .2s ease; } .ys-nav__link:hover { background: #F4F5F7; } .ys-nav__lang-mobile { display: none; } .ys-header__actions { display: flex; align-items: center; gap: 12px; flex: none; } /* Cart: round outlined button linking to the shop (matches the design). */ .ys-header__cart { position: relative; width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid #E2E6EA; background: #fff; color: #0C0C0C; cursor: pointer; text-decoration: none; transition: background .15s ease; } .ys-header__cart:hover { background: #F4F5F7; } .ys-nav__toggle { display: none; width: 44px; height: 44px; border: none; border-radius: 12px; background: #F4F5F7; cursor: pointer; position: relative; } .ys-nav__toggle-bar, .ys-nav__toggle-bar::before, .ys-nav__toggle-bar::after { content: ""; position: absolute; left: 50%; width: 20px; height: 2px; background: #0C0C0C; border-radius: 2px; transform: translateX(-50%); transition: transform .2s ease, opacity .2s ease; } .ys-nav__toggle-bar { top: 50%; margin-top: -1px; } .ys-nav__toggle-bar::before { top: -7px; } .ys-nav__toggle-bar::after { top: 7px; } .ys-nav__toggle[aria-expanded="true"] .ys-nav__toggle-bar { background: transparent; } .ys-nav__toggle[aria-expanded="true"] .ys-nav__toggle-bar::before { transform: translateX(-50%) translateY(7px) rotate(45deg); } .ys-nav__toggle[aria-expanded="true"] .ys-nav__toggle-bar::after { transform: translateX(-50%) translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- * Language switcher * ----------------------------------------------------------------------- */ .ys-lang { position: relative; flex: none; } .ys-lang__toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid #E5E7EB; border-radius: 999px; background: rgba(255, 255, 255, .7); color: #1A1A1A; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .ys-lang__toggle:hover { background: #F4F5F7; border-color: #D6DAE0; } .ys-lang__flag { width: 22px; height: 15px; display: block; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(12, 12, 12, .08); } .ys-lang__caret { width: 10px; height: 10px; transition: transform .2s ease; } .ys-lang__toggle[aria-expanded="true"] .ys-lang__caret { transform: rotate(180deg); } .ys-lang__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -14px rgba(12, 12, 12, .28), inset 0 1px 0 rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .6); list-style: none; margin: 0; display: none; z-index: 60; } .ys-lang.is-open .ys-lang__menu { display: block; } .ys-lang__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 500; color: #1A1A1A; text-decoration: none; } .ys-lang__name { flex: 1 1 auto; } .ys-lang__item:hover { background: #F4F5F7; } .ys-lang__item.is-active { color: var(--accent, #EF3E3E); font-weight: 600; } .ys-lang__code { font-size: 12px; font-weight: 600; color: #9a9a9a; letter-spacing: 0.04em; } .ys-lang__item.is-active .ys-lang__code { color: var(--accent, #EF3E3E); } /* -------------------------------------------------------------------------- * Hero * ----------------------------------------------------------------------- */ .ys-hero { position: relative; width: 100%; max-width: none; height: 750px; border-radius: 56px; overflow: hidden; background: linear-gradient(135deg, rgba(96, 147, 224, .20) 0%, rgba(96, 147, 224, .08) 55%, rgba(239, 62, 62, .06) 100%); padding: 0; } .ys-hero__inner { position: relative; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; padding: 72px 24px; } .ys-hero__content { position: relative; z-index: 2; max-width: 640px; } .ys-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, .05); font-size: 14px; font-weight: 600; color: #1A1A1A; margin-bottom: 28px; } .ys-hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #EF3E3E); display: inline-block; } .ys-hero__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(30px, 5.6vw, 66px); line-height: 1.05; letter-spacing: -0.02em; color: #0C0C0C; overflow-wrap: break-word; } .ys-hero__subtitle { margin: 22px 0 0; font-family: Inter, sans-serif; font-weight: 300; font-style: italic; font-size: clamp(17px, 2.4vw, 24px); color: #535353; } .ys-hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 36px; } .ys-hero__image { position: absolute; right: 36px; bottom: 0; height: 108%; max-height: 760px; z-index: 1; object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .12)); } .ys-hero__chips { position: absolute; left: 64px; right: 64px; bottom: 36px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 10px; padding: 14px; border-radius: 28px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); } .ys-chip { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 10px; padding: 40px 20px; border-radius: 18px; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); font-size: 15px; font-weight: 500; line-height: 1.2; color: #1A1A1A; white-space: nowrap; } .ys-chip svg { flex: none; } /* -------------------------------------------------------------------------- * Stats * ----------------------------------------------------------------------- */ .ys-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ys-stat { display: flex; flex-direction: column; gap: 6px; padding: 28px 32px; border-radius: 28px; background: #EFF2F4; } .ys-stat__value { font-family: Inter, sans-serif; font-weight: 800; font-size: 44px; line-height: 1; color: #0C0C0C; } .ys-stat__label { font-size: 15px; color: #535353; } /* -------------------------------------------------------------------------- * Services * ----------------------------------------------------------------------- */ .ys-services { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 24px; } .ys-service { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 36px; background: #EFF2F4; transition: transform .25s; } /* Title + description wrapper. Transparent to layout by default (display:contents) so normal cards look unchanged; the hover-reveal mode turns it into a stacking box for the title/description swap. */ .ys-service__body { display: contents; } /* Decorative blob anchored at the top-right corner — one tone lighter than the card (translucent white adapts to the card's own bg, at rest and on the accent hover). The organic, lobed silhouette is an SVG mask, DISTINCT per card. */ .ys-service__blob-shape { position: absolute; top: -18%; right: -22%; width: 75%; aspect-ratio: 1 / 1; background: rgba(255, 255, 255, .55); --ys-blob: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M180.5,100.0C183.5,106.7%20185.5,115.5%20184.4,122.6C183.3,129.7%20179.2,137.6%20174.0,142.7C168.9,147.9%20160.6,151.5%20153.6,153.6C146.5,155.6%20138.3,155.0%20131.7,155.0C125.2,155.0%20119.6,153.4%20114.3,153.5C109.0,153.6%20105.2,154.4%20100.0,155.8C94.8,157.2%2089.7,160.4%2083.4,162.1C77.1,163.7%2069.2,166.1%2062.1,165.6C55.0,165.2%2046.5,163.2%2040.7,159.3C34.9,155.4%2029.6,148.6%2027.1,142.1C24.6,135.5%2024.6,126.9%2025.6,119.9C26.6,112.9%2030.4,105.9%2033.1,100.0C35.8,94.1%2039.5,89.5%2041.9,84.4C44.3,79.4%2045.9,75.1%2047.5,69.7C49.2,64.3%2049.8,58.2%2052.1,52.1C54.4,46.0%2057.0,38.5%2061.5,33.2C65.9,27.9%2072.2,22.5%2078.6,20.2C85.0,17.9%2093.3,17.6%20100.0,19.3C106.7,20.9%20113.5,25.7%20118.7,30.2C123.9,34.7%20127.5,41.2%20131.1,46.2C134.6,51.1%20136.7,55.9%20140.0,60.0C143.4,64.0%20146.9,66.7%20151.3,70.4C155.7,74.1%20161.8,77.2%20166.6,82.1C171.5,87.1%20177.6,93.3%20180.5,100.0Z'%20fill='%23000'/%3E%3C/svg%3E"); -webkit-mask: var(--ys-blob) center / 100% 100% no-repeat; mask: var(--ys-blob) center / 100% 100% no-repeat; pointer-events: none; z-index: 0; transition: background .35s ease; } /* Distinct lobed shape + per-card size. Featured (1, vertical) blob is large; the wide card (6) keeps its corner blob; the four normal cards are ~15% smaller. */ .ys-services .ys-service:nth-of-type(1) .ys-service__blob-shape { width: 95%; height: 150%; aspect-ratio: auto; top: -12%; right: -18%; --ys-blob: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M177.7,100.0C182.6,106.4%20187.1,116.2%20185.9,123.0C184.7,129.8%20177.6,137.3%20170.7,140.8C163.8,144.4%20152.1,144.0%20144.5,144.5C136.9,145.0%20130.3,142.3%20125.3,143.8C120.3,145.4%20118.7,149.2%20114.4,153.9C110.2,158.6%20105.9,167.8%20100.0,172.0C94.1,176.3%2085.0,180.4%2078.7,179.3C72.4,178.3%2065.6,171.7%2062.2,165.5C58.7,159.3%2059.0,148.6%2058.1,141.9C57.1,135.2%2058.9,129.6%2056.4,125.1C53.9,120.7%2048.8,119.4%2043.1,115.2C37.4,111.1%2027.1,106.4%2022.3,100.0C17.4,93.6%2012.9,83.8%2014.1,77.0C15.3,70.2%2022.4,62.7%2029.3,59.2C36.2,55.6%2047.9,56.0%2055.5,55.5C63.1,55.0%2069.7,57.7%2074.7,56.2C79.7,54.6%2081.3,50.8%2085.6,46.1C89.8,41.4%2094.1,32.2%20100.0,28.0C105.9,23.7%20115.0,19.6%20121.3,20.7C127.6,21.7%20134.4,28.3%20137.8,34.5C141.3,40.7%20141.0,51.4%20141.9,58.1C142.9,64.8%20141.1,70.4%20143.6,74.9C146.1,79.3%20151.2,80.6%20156.9,84.8C162.6,88.9%20172.9,93.6%20177.7,100.0Z'%20fill='%23000'/%3E%3C/svg%3E"); } .ys-services .ys-service:nth-of-type(3) .ys-service__blob-shape { width: 80%; --ys-blob: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M184.7,100.0C185.7,107.2%20185.7,115.4%20183.7,122.4C181.7,129.4%20177.7,136.7%20172.9,142.1C168.1,147.5%20161.2,151.8%20154.8,154.8C148.4,157.7%20140.9,158.9%20134.5,159.8C128.1,160.7%20121.9,160.2%20116.1,160.2C110.4,160.2%20105.4,159.9%20100.0,159.8C94.6,159.7%2089.5,160.1%2084.0,159.6C78.5,159.2%2072.5,158.8%2067.1,157.0C61.6,155.2%2055.7,152.5%2051.2,148.8C46.8,145.0%2042.8,139.7%2040.4,134.4C38.0,129.1%2037.0,122.7%2036.7,117.0C36.4,111.2%2037.7,105.4%2038.7,100.0C39.7,94.6%2041.4,89.8%2042.7,84.6C44.0,79.5%2045.0,74.6%2046.5,69.1C47.9,63.6%2049.0,57.5%2051.5,51.5C54.0,45.6%2057.0,38.7%2061.5,33.3C66.0,27.9%2071.9,22.4%2078.3,19.2C84.8,15.9%2092.8,13.9%20100.0,13.8C107.2,13.7%20115.1,15.8%20121.8,18.6C128.5,21.4%20134.6,26.1%20140.1,30.6C145.5,35.1%20150.0,40.4%20154.5,45.5C158.9,50.7%20163.0,55.8%20166.8,61.4C170.7,67.0%20174.8,72.7%20177.7,79.2C180.7,85.6%20183.7,92.8%20184.7,100.0Z'%20fill='%23000'/%3E%3C/svg%3E"); } .ys-services .ys-service:nth-of-type(4) .ys-service__blob-shape { --ys-blob: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M186.0,100.0C186.9,107.1%20185.1,115.4%20182.4,122.1C179.6,128.8%20174.4,135.0%20169.5,140.1C164.6,145.3%20158.9,149.7%20153.1,153.1C147.4,156.5%20141.1,159.2%20135.0,160.6C128.9,162.0%20122.3,161.6%20116.5,161.4C110.6,161.1%20105.4,159.3%20100.0,159.1C94.6,158.8%2090.0,159.3%2083.9,160.0C77.9,160.6%2070.8,163.2%2063.6,163.1C56.4,162.9%2047.3,162.4%2040.9,159.1C34.4,155.8%2028.4,149.6%2025.0,143.3C21.7,137.0%2021.0,128.5%2020.7,121.2C20.5,114.0%2022.1,106.8%2023.3,100.0C24.5,93.2%2025.9,86.8%2028.1,80.7C30.2,74.6%2032.8,68.4%2036.4,63.3C40.0,58.1%2045.0,53.7%2049.8,49.8C54.7,46.0%2060.2,43.2%2065.5,40.2C70.8,37.2%2075.9,34.0%2081.7,31.6C87.4,29.2%2093.7,26.3%20100.0,25.7C106.3,25.2%20113.4,26.0%20119.2,28.4C125.0,30.7%20130.1,35.7%20134.7,39.8C139.3,44.0%20142.5,49.0%20146.9,53.1C151.2,57.3%20156.0,60.4%20161.0,64.8C166.0,69.2%20172.7,73.5%20176.9,79.4C181.1,85.3%20185.1,92.9%20186.0,100.0Z'%20fill='%23000'/%3E%3C/svg%3E"); } .ys-services .ys-service:nth-of-type(5) .ys-service__blob-shape { width: 80%; --ys-blob: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M180.5,100.0C183.1,106.4%20182.6,115.4%20179.2,121.2C175.8,127.0%20166.0,130.9%20160.2,134.8C154.4,138.6%20148.3,139.7%20144.2,144.2C140.1,148.7%20139.5,156.0%20135.7,161.9C131.9,167.8%20127.3,176.9%20121.3,179.5C115.4,182.1%20106.2,180.7%20100.0,177.5C93.8,174.3%2088.7,164.8%2083.9,160.2C79.1,155.6%2076.6,151.9%2071.1,150.0C65.6,148.2%2057.6,150.8%2050.8,149.2C44.1,147.5%2034.4,145.0%2030.6,140.1C26.8,135.1%2026.8,126.0%2027.9,119.3C29.0,112.6%2035.6,106.0%2037.3,100.0C39.1,94.0%2039.2,90.0%2038.4,83.5C37.6,77.0%2032.3,68.3%2032.6,61.1C32.8,53.8%2034.8,44.2%2039.8,39.8C44.9,35.5%2055.2,35.1%2062.6,35.2C70.0,35.4%2077.9,40.4%2084.1,40.6C90.3,40.8%2094.1,38.9%20100.0,36.6C105.9,34.3%20113.1,27.5%20119.6,26.7C126.2,25.9%20134.8,27.4%20139.4,31.7C144.0,36.0%20145.6,46.1%20147.3,52.7C149.1,59.3%20147.2,66.1%20149.9,71.2C152.6,76.2%20158.3,78.2%20163.3,83.0C168.4,87.8%20177.8,93.6%20180.5,100.0Z'%20fill='%23000'/%3E%3C/svg%3E"); } .ys-services .ys-service:nth-of-type(6) .ys-service__blob-shape { width: 46%; top: -34%; right: -8%; --ys-blob: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cpath%20d='M177.0,100.0C178.8,106.4%20179.0,114.3%20177.3,120.7C175.6,127.1%20171.2,133.5%20166.9,138.6C162.6,143.7%20156.7,147.7%20151.3,151.3C146.0,154.9%20140.4,157.7%20134.8,160.3C129.2,162.8%20123.7,165.2%20117.9,166.7C112.1,168.2%20105.9,169.2%20100.0,169.1C94.1,169.1%2088.0,168.0%2082.2,166.4C76.4,164.9%2070.9,162.6%2065.3,160.1C59.7,157.5%2054.1,154.9%2048.7,151.3C43.3,147.8%2037.2,143.9%2032.9,138.8C28.5,133.7%2024.1,127.2%2022.5,120.8C20.8,114.3%2021.1,106.4%2023.0,100.0C24.8,93.6%2029.6,87.3%2033.6,82.2C37.5,77.1%2043.0,73.5%2046.8,69.3C50.6,65.0%2053.5,61.5%2056.6,56.6C59.7,51.7%2061.4,45.4%2065.2,39.7C69.0,34.0%2073.4,26.6%2079.2,22.5C85.0,18.4%2093.1,15.0%20100.0,15.0C106.9,15.1%20114.9,18.6%20120.7,22.7C126.5,26.9%20130.9,34.3%20134.7,39.9C138.5,45.6%20140.3,51.7%20143.4,56.6C146.5,61.5%20149.5,64.9%20153.4,69.2C157.3,73.4%20162.8,77.0%20166.7,82.1C170.6,87.3%20175.3,93.6%20177.0,100.0Z'%20fill='%23000'/%3E%3C/svg%3E"); } /* Keep real card content above the blob (works whether or not body is contents). */ .ys-service__icon, .ys-service__body, .ys-service__wide-body, .ys-service__title, .ys-service__text, .ys-service__mock { position: relative; z-index: 1; } .ys-service:hover { transform: translateY(-4px); } .ys-service--featured { grid-column: 1; grid-row: 1 / span 3; justify-content: space-between; padding: 40px; background: linear-gradient(160deg, #EFF2F4, #F7F8FA); min-height: 460px; } .ys-service--featured:hover { transform: none; } /* Colour style: dark. Double class so it overrides the featured/wide gradient backgrounds regardless of source order. */ .ys-service.ys-service--dark { background: #0C0C0C; color: #fff; } /* Wide horizontal card (spans the bottom two columns) — light, with phone mockup. */ .ys-service--wide { grid-column: 2 / span 2; flex-direction: row; align-items: center; gap: 28px; padding: 32px 36px; background: linear-gradient(150deg, #EFF2F4, #F7F8FA); color: #0C0C0C; } .ys-service--wide .ys-service__icon { flex: none; width: 56px; height: 56px; border-radius: 18px; margin-bottom: 6px; } .ys-service__wide-body { display: flex; flex-direction: column; gap: 8px; flex: 1; } .ys-service--wide .ys-service__title { color: #0C0C0C; } .ys-service--wide .ys-service__text { max-width: 420px; color: #535353; } .ys-service__icon { width: 54px; height: 54px; border-radius: 17px; background: var(--accent-soft, rgba(239, 62, 62, .12)); display: flex; align-items: center; justify-content: center; } .ys-service--featured .ys-service__icon { width: 56px; height: 56px; border-radius: 18px; } .ys-service__title { margin: 4px 0 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; color: #0C0C0C; } .ys-service--dark .ys-service__title { color: #fff; } .ys-service__title--lg { margin: 24px 0 12px; font-size: 30px; line-height: 1.12; } .ys-service__text { margin: 0; font-size: 15px; line-height: 1.55; color: #535353; } .ys-service--featured .ys-service__text { font-size: 16px; max-width: 320px; } .ys-service--dark .ys-service__text { color: #B9BcC2; } /* Colour style: custom. Background + text colour come from the inline style the Services widget prints on the card; children inherit that text colour. */ .ys-service--custom .ys-service__title { color: inherit; } .ys-service--custom .ys-service__text { color: inherit; opacity: .88; } /* Decorative CSS mockups inside the featured / wide service cards. */ .ys-service__mock { position: relative; z-index: 1; align-self: center; flex: none; display: flex; align-items: center; justify-content: center; } .ys-service__mock--dash { width: 212px; height: 204px; } .ys-service__mock--phone { width: 186px; height: 182px; } /* The big card/phone mockup is tilted -4deg (design's `.badge11`, whose !important rotate overrides the float animation → static tilt). The small corner badge still floats. */ .ys-service__mock-card { transform: rotate(-4deg); } .ys-service__mock-badge { animation: ysFloat 6s ease-in-out infinite; animation-delay: -3s; } /* -------------------------------------------------------------------------- * Services — "Hover ile aç" mode (Elementor toggle). * At rest the card shows only a larger title. On hover the title slides up out * of view and the description slides into its place, and the card switches to * the accent colour. Cards sit a little shorter since only the title shows. * ----------------------------------------------------------------------- */ .ys-services--hover-reveal .ys-service { padding: 24px; cursor: pointer; transition: transform .25s, background-color .35s ease, background .35s ease, color .35s ease; } .ys-services--hover-reveal .ys-service--featured { min-height: 320px; /* Top padding matches the normal cards (24px) so the featured icon/title line up with the top row of cards. */ padding: 24px 28px 28px; } .ys-services--hover-reveal .ys-service--wide { padding: 22px 28px; } /* Top-align the normal cards' icon + title so they line up with the featured card's icon/title (which sits at the top, with its mockup pinned to the bottom) and with each other across the grid rows. */ .ys-services--hover-reveal .ys-service:not(.ys-service--featured):not(.ys-service--wide) { justify-content: flex-start; } /* Larger titles while only the title is shown. */ .ys-services--hover-reveal .ys-service__title { font-size: 26px; } .ys-services--hover-reveal .ys-service__title--lg { font-size: 32px; margin: 0; } /* Swap zone: stack the title and description in the same box so one can slide out as the other slides in. */ .ys-services--hover-reveal .ys-service__body { display: block; position: relative; min-height: 64px; } .ys-services--hover-reveal .ys-service__title, .ys-services--hover-reveal .ys-service__text { position: absolute; top: 0; left: 0; right: 0; margin: 0; transition: opacity .35s ease, transform .4s ease, color .35s ease; } /* Rest state: title in place, description hidden just below it. */ .ys-services--hover-reveal .ys-service__text { opacity: 0; transform: translateY(12px); } /* Hover / keyboard focus: title slides up and fades out, description takes over. */ .ys-services--hover-reveal .ys-service:hover .ys-service__title, .ys-services--hover-reveal .ys-service:focus-within .ys-service__title { opacity: 0; transform: translateY(-16px); } .ys-services--hover-reveal .ys-service:hover .ys-service__text, .ys-services--hover-reveal .ys-service:focus-within .ys-service__text { opacity: 1; transform: none; } /* Accent background on hover. !important beats the inline background/colour on custom-coloured cards so every card flips to the accent tone consistently. */ .ys-services--hover-reveal .ys-service:hover, .ys-services--hover-reveal .ys-service:focus-within { background: var(--accent, #EF3E3E) !important; color: #fff !important; } .ys-services--hover-reveal .ys-service:hover .ys-service__text, .ys-services--hover-reveal .ys-service:focus-within .ys-service__text { color: #fff; } /* Solid white icon tile so the accent-stroked SVG stays visible on red. */ .ys-services--hover-reveal .ys-service:hover .ys-service__icon, .ys-services--hover-reveal .ys-service:focus-within .ys-service__icon { background: rgba(255, 255, 255, .95); } /* On the accent hover state the blob stays one tone lighter than the red card. */ .ys-services--hover-reveal .ys-service:hover .ys-service__blob-shape, .ys-services--hover-reveal .ys-service:focus-within .ys-service__blob-shape { background: rgba(255, 255, 255, .16); } /* -------------------------------------------------------------------------- * Sectors * ----------------------------------------------------------------------- */ .ys-sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .ys-sectors__list { display: flex; flex-direction: column; gap: 16px; } .ys-sector { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 28px; background: #EFF2F4; transition: transform .2s; } .ys-sector:hover { transform: translateX(4px); } .ys-sector__icon { width: 48px; height: 48px; flex: none; border-radius: 14px; background: linear-gradient(150deg, #ffffff, var(--accent-soft, rgba(239, 62, 62, .12))); display: flex; align-items: center; justify-content: center; } .ys-sector__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 19px; color: #0C0C0C; } .ys-sector__desc { margin: 2px 0 0; font-size: 14px; color: #6b6b6b; } .ys-sectors__feature { position: relative; overflow: hidden; border-radius: 36px; background: #E8E8E8; padding: 28px 28px 0; display: flex; flex-direction: column; gap: 18px; min-height: 100%; } .ys-sectors__feature-title { margin: 8px 4px 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25; color: #0C0C0C; } .ys-sectors__feature-img { width: 100%; flex: 1 1 auto; min-height: 0; max-height: 340px; object-fit: cover; object-position: top center; border-radius: 20px 20px 0 0; display: block; box-shadow: 0 -8px 30px rgba(0, 0, 0, .12); } /* -------------------------------------------------------------------------- * Pricing * ----------------------------------------------------------------------- */ .ys-billing { display: inline-flex; padding: 5px; border-radius: 999px; background: #EFF2F4; margin-top: 8px; } .ys-billing__btn { padding: 10px 22px; border: none; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; background: transparent; color: #6b6b6b; transition: background .2s ease, color .2s ease; } .ys-billing__btn.is-active { background: #ffffff; color: #0C0C0C; } .ys-billing__save { font-size: 12px; opacity: .85; } .ys-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; margin-top: 36px; } .ys-plan { display: flex; flex-direction: column; gap: 22px; padding: 36px; border-radius: 36px; background: #fff; border: 1.5px solid #E8EAED; } .ys-plan--featured { position: relative; background: #0C0C0C; color: #fff; border-color: #0C0C0C; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); transform: translateY(-12px); } .ys-plan__badge { position: absolute; top: 24px; right: 24px; padding: 6px 14px; border-radius: 999px; background: var(--accent, #EF3E3E); font-size: 13px; font-weight: 600; color: #fff; } .ys-plan__name { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; color: #0C0C0C; } .ys-plan--featured .ys-plan__name { color: #fff; } .ys-plan__desc { margin: 6px 0 0; font-size: 14px; color: #6b6b6b; } .ys-plan--featured .ys-plan__desc { color: #A9ACB2; } .ys-plan__price { display: flex; align-items: baseline; gap: 6px; } .ys-plan__amount { font-family: Inter, sans-serif; font-weight: 800; font-size: 48px; color: #0C0C0C; } .ys-plan--featured .ys-plan__amount { color: #fff; } .ys-plan__period { font-size: 16px; color: #6b6b6b; } .ys-plan--featured .ys-plan__period { color: #A9ACB2; } .ys-plan__cta { width: 100%; padding: 14px; } .ys-plan__features { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; } .ys-plan__feature { display: flex; gap: 10px; font-size: 15px; color: #333; } .ys-plan__features--dark .ys-plan__feature { color: #EDEDED; } .ys-plan__check { color: var(--accent, #EF3E3E); font-weight: 700; } /* -------------------------------------------------------------------------- * Portfolio * ----------------------------------------------------------------------- */ .ys-portfolio__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; } .ys-portfolio__head .ys-section__head { margin-bottom: 0; } .ys-portfolio__filters { display: flex; flex-wrap: wrap; gap: 10px; } .ys-chip-btn { padding: 10px 20px; border: 1.5px solid #D6DAE0; border-radius: 999px; background: #ffffff; color: #0C0C0C; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .ys-chip-btn.is-active { background: #0C0C0C; color: #ffffff; border-color: #0C0C0C; } .ys-portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ys-project { display: flex; flex-direction: column; gap: 18px; cursor: pointer; text-decoration: none; color: inherit; transition: transform .4s cubic-bezier(.22, .61, .36, 1); } .ys-project:visited { color: inherit; } .ys-project:hover { transform: translateY(-6px); } .ys-project[hidden] { display: none; } .ys-project__media { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 16 / 11; } .ys-project__pattern { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 16px); } .ys-project__cat { position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; color: #0C0C0C; } .ys-project__body { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; } .ys-project__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.25; color: #0C0C0C; } .ys-project__tag { font-size: 15px; line-height: 1.55; color: #6b6b6b; } .ys-project__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--accent, #EF3E3E); } .ys-project__more svg { transition: transform .25s ease; } .ys-project:hover .ys-project__more svg { transform: translateX(3px); } /* -------------------------------------------------------------------------- * Single project (case study) * ----------------------------------------------------------------------- */ .ys-projsingle { padding: 36px 24px 80px; } .ys-projsingle .ys-container { max-width: 880px; } .ys-projsingle__crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9a9a9a; margin-bottom: 24px; } .ys-projsingle__crumbs a { color: #9a9a9a; text-decoration: none; } .ys-projsingle__crumbs a:hover { color: var(--accent, #EF3E3E); } .ys-projsingle__crumb-cat { color: var(--accent, #EF3E3E); font-weight: 600; } .ys-projsingle__crumb-title { color: #6b6b6b; } .ys-projsingle__hero { position: relative; overflow: hidden; border-radius: 36px; min-height: 300px; display: flex; align-items: flex-end; padding: 40px; } .ys-projsingle__hero-body { position: relative; z-index: 2; } .ys-projsingle__cat { display: inline-block; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 600; color: #0C0C0C; margin-bottom: 16px; } .ys-projsingle__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: #fff; } .ys-projsingle__tag { margin: 12px 0 0; font-size: 18px; color: rgba(255, 255, 255, .9); } .ys-projsingle__content { margin: 40px 0 0; } .ys-projsingle__cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; width: min(760px, calc(100% - 48px)); margin: 48px auto 0; padding: 36px 40px; border-radius: 28px; background: #0C0C0C; color: #fff; } .ys-projsingle__cta-title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.01em; color: #fff; } .ys-projsingle__cta-text { margin: 8px 0 0; font-size: 16px; color: #B9BCC2; } .ys-article__techtags { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; } @media (max-width: 560px) { .ys-projsingle__hero { padding: 28px; min-height: 220px; } .ys-projsingle__cta { padding: 28px; } } /* -------------------------------------------------------------------------- * Team * ----------------------------------------------------------------------- */ .ys-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ys-member { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 5 / 6; display: flex; align-items: center; justify-content: center; } .ys-member__initials { font-family: Poppins, sans-serif; font-weight: 600; font-size: 64px; color: rgba(255, 255, 255, .12); letter-spacing: 0.05em; } .ys-member__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); } .ys-member__name { display: block; font-family: Poppins, sans-serif; font-weight: 500; font-size: 26px; color: #fff; } .ys-member__role { display: block; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; color: #D9D9D9; margin-top: 2px; } /* -------------------------------------------------------------------------- * FAQ * ----------------------------------------------------------------------- */ .ys-faq { width: 100%; max-width: 840px; } .ys-faq__list { display: flex; flex-direction: column; gap: 14px; } .ys-faq__item { border-radius: 24px; background: #EFF2F4; padding: 24px 28px; } .ys-faq__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; } .ys-faq__question { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 19px; color: #0C0C0C; } .ys-faq__sign { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ffffff; color: #0C0C0C; display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, color .3s ease; } .ys-faq__sign svg { display: block; } .ys-faq__item.is-open .ys-faq__sign { background: var(--accent, #EF3E3E); color: #ffffff; transform: rotate(45deg); } /* Answer reveal: visible by default (no-JS); JS collapses then animates. */ .ys-faq__answer-wrap { display: grid; grid-template-rows: 1fr; } .ys-faq--js .ys-faq__answer-wrap { grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1); } .ys-faq--js .ys-faq__item.is-open .ys-faq__answer-wrap { grid-template-rows: 1fr; } .ys-faq__answer-inner { overflow: hidden; } .ys-faq__answer { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: #535353; } .ys-faq--js .ys-faq__answer { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease .06s, transform .35s ease .06s; } .ys-faq--js .ys-faq__item.is-open .ys-faq__answer { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- * Contact * ----------------------------------------------------------------------- */ .ys-contact { width: 100%; max-width: 1200px; border-radius: 48px; overflow: hidden; background: #0C0C0C; display: grid; grid-template-columns: 1fr 1fr; } .ys-contact__info { padding: 60px; display: flex; flex-direction: column; gap: 30px; color: #fff; } .ys-contact__title { margin: 14px 0 0; font-family: Inter, sans-serif; font-weight: 800; font-size: 42px; letter-spacing: -0.02em; line-height: 1.05; color: #fff; } .ys-contact__lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: #A9ACB2; max-width: 380px; } .ys-contact__details { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; } .ys-contact__detail { display: flex; align-items: center; gap: 14px; } .ys-contact__icon { width: 44px; height: 44px; flex: none; border-radius: 14px; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; } .ys-contact__label { display: block; font-size: 13px; color: #8A8D93; } .ys-contact__value { display: block; font-size: 16px; font-weight: 500; color: #fff; text-decoration: none; } a.ys-contact__value:hover { text-decoration: underline; } .ys-contact__form-wrap { padding: 48px; background: #fff; } .ys-form { display: flex; flex-direction: column; gap: 18px; } .ys-form__alert { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--accent-soft, rgba(239, 62, 62, .12)); color: var(--accent, #EF3E3E); font-size: 14px; font-weight: 600; } .ys-field { display: flex; flex-direction: column; gap: 7px; } .ys-field__label { font-size: 14px; font-weight: 600; color: #0C0C0C; } .ys-field__optional { color: #9a9a9a; font-weight: 400; } /* Inputs — scoped with .ys-form to out-specify the _s base input[type=...] rules. */ .ys-form .ys-field__input, .ys-contact .ys-field__input { box-sizing: border-box; width: 100%; margin: 0; padding: 15px 18px; border: 1.5px solid #E0E3E7; border-radius: 14px; font-family: inherit; /* 16px keeps iOS Safari from auto-zooming the form on focus. */ font-size: 16px; line-height: 1.4; color: #0C0C0C; background: #fff; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease; } .ys-form .ys-field__input::placeholder { color: #9AA0A8; opacity: 1; } .ys-form .ys-field__input:hover { border-color: #CBD2DA; } .ys-form .ys-field__input:focus { border-color: var(--accent, #EF3E3E); box-shadow: 0 0 0 4px var(--accent-soft, rgba(239, 62, 62, .12)); } .ys-form .ys-field__input.has-error { border-color: var(--accent, #EF3E3E); } .ys-form .ys-field__textarea { min-height: 122px; resize: vertical; } .ys-field__error { font-size: 13px; color: var(--accent, #EF3E3E); } .ys-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Cloudflare Turnstile widget (only rendered when keys are configured). */ .ys-turnstile { margin: 2px 0 6px; } .ys-form__submit { margin-top: 4px; width: 100%; padding: 16px; font-size: 16px; box-shadow: 0 14px 30px -10px var(--accent, #EF3E3E); } .ys-contact__success { height: 100%; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; } .ys-contact__success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft, rgba(239, 62, 62, .12)); display: flex; align-items: center; justify-content: center; } .ys-contact__success-title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 26px; color: #0C0C0C; } .ys-contact__success-text { margin: 0; font-size: 16px; color: #535353; max-width: 300px; } /* -------------------------------------------------------------------------- * Footer * ----------------------------------------------------------------------- */ .ys-footer { width: 100%; display: flex; justify-content: center; padding: 60px 24px 40px; background: #fff; border-top: 1px solid #EEEFF1; } .ys-footer__inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 40px; } .ys-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; } .ys-footer__brand { max-width: 300px; display: flex; flex-direction: column; gap: 16px; } .ys-footer__tagline { margin: 0; font-size: 15px; line-height: 1.6; color: #6b6b6b; } .ys-footer__cols { display: flex; gap: 64px; flex-wrap: wrap; } .ys-footer__col { display: flex; flex-direction: column; gap: 12px; } .ys-footer__heading { font-size: 14px; font-weight: 700; color: #0C0C0C; margin-bottom: 4px; } .ys-footer__link { font-size: 15px; color: #6b6b6b; text-decoration: none; transition: color .2s ease; } .ys-footer__link:hover { color: #0C0C0C; } .ys-footer__text { font-size: 15px; color: #6b6b6b; } .ys-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid #EEEFF1; } .ys-footer__copy, .ys-footer__legal .ys-footer__text { font-size: 14px; color: #9a9a9a; } .ys-footer__legal { display: flex; gap: 24px; } /* -------------------------------------------------------------------------- * Scroll-reveal (JS adds these; safe fallback if JS disabled = visible) * ----------------------------------------------------------------------- */ .ys-reveal-init { opacity: 0; } /* -------------------------------------------------------------------------- * Responsive * ----------------------------------------------------------------------- */ @media (max-width: 1024px) { .ys-services { grid-template-columns: repeat(2, 1fr); } .ys-service--featured { grid-column: 1 / -1; grid-row: auto; min-height: 0; } .ys-service--wide { grid-column: 1 / -1; } .ys-team { grid-template-columns: repeat(2, 1fr); } .ys-portfolio__grid { grid-template-columns: repeat(2, 1fr); } .ys-plans { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .ys-plan--featured { transform: none; } } @media (max-width: 860px) { /* Header becomes a floating rounded pill (mobile design reference). Applied in both states so the scroll pill and the resting bar look identical on mobile. */ .ys-header, .ys-header.is-scrolled { padding: 12px; background: transparent; border-bottom: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .ys-header__inner, .ys-header.is-scrolled .ys-header__inner { max-width: none; border-radius: 34px; padding: 8px 8px 8px 18px; gap: 10px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 16px 40px -18px rgba(12, 12, 12, .3), inset 0 1px 0 rgba(255, 255, 255, .8); } .ys-nav { position: static; } /* Hamburger: round, accent-outlined button (matches the design). */ .ys-nav__toggle { display: block; order: 3; width: 46px; height: 46px; border-radius: 999px; background: #fff; border: 1.5px solid var(--accent, #EF3E3E); } .ys-nav__toggle-bar, .ys-nav__toggle-bar::before, .ys-nav__toggle-bar::after { background: var(--accent, #EF3E3E); } .ys-nav__panel { display: none; position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; gap: 4px; padding: 12px; margin-top: 8px; border-radius: 20px; background: rgba(255, 255, 255, .98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 44px -16px rgba(12, 12, 12, .3); } .ys-nav__panel.is-open { display: flex; } .ys-nav__list { flex-direction: column; align-items: stretch; gap: 4px; } .ys-nav__link { padding: 14px 16px; font-size: 16px; } .ys-nav__lang-mobile { display: block; margin-top: 6px; padding-top: 10px; border-top: 1px solid #EEEFF1; } .ys-header__actions .ys-lang { display: none; } .ys-header__cta { display: none; } .ys-sectors { grid-template-columns: 1fr; } .ys-contact { grid-template-columns: 1fr; } .ys-stats { grid-template-columns: repeat(2, 1fr); } .ys-hero { height: auto; border-radius: 40px; } .ys-hero__inner { padding: 48px 28px; } .ys-hero__chips { position: static; margin-top: 28px; left: auto; right: auto; bottom: auto; } .ys-chip { padding: 18px 20px; } .ys-hero__image { position: relative; right: auto; height: auto; max-height: 360px; margin: 24px auto 0; display: block; } .ys-hero__content { max-width: none; } } @media (max-width: 560px) { .ys-services { grid-template-columns: 1fr; grid-auto-rows: auto; } .ys-service--wide { flex-direction: column; align-items: flex-start; } /* Touch devices can't hover, so instead of the title→description reveal show both inline, and shrink the cards (they were all stretched to one tall row). */ .ys-services--hover-reveal .ys-service, .ys-services--hover-reveal .ys-service--featured, .ys-services--hover-reveal .ys-service--wide { min-height: 0; padding: 20px; } .ys-services--hover-reveal .ys-service__body { position: static; display: block; min-height: 0; } .ys-services--hover-reveal .ys-service__title { position: static; opacity: 1; transform: none; font-size: 19px; } .ys-services--hover-reveal .ys-service__title--lg { font-size: 23px; } .ys-services--hover-reveal .ys-service__text { position: static; opacity: 1; transform: none; } .ys-services--hover-reveal .ys-service:hover, .ys-services--hover-reveal .ys-service:focus-within { background: #EFF2F4 !important; color: inherit !important; } .ys-services--hover-reveal .ys-service:hover .ys-service__title, .ys-services--hover-reveal .ys-service:focus-within .ys-service__title { opacity: 1; transform: none; } .ys-services--hover-reveal .ys-service:hover .ys-service__text, .ys-services--hover-reveal .ys-service:focus-within .ys-service__text { color: #535353; } /* Team: two compact cards per row instead of one oversized full-width card. */ .ys-team { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ys-member__name { font-size: 18px; } .ys-member__initials { font-size: 46px; } .ys-member__body { padding: 14px; } .ys-portfolio__grid { grid-template-columns: 1fr; } .ys-stats { grid-template-columns: 1fr; } .ys-contact__info { padding: 40px 24px; } .ys-contact__form-wrap { padding: 32px 22px; } .ys-contact__title { font-size: clamp(28px, 8vw, 42px); } .ys-hero__actions { flex-direction: column; align-items: stretch; } .ys-hero__actions .ys-btn { justify-content: center; } .ys-hero { border-radius: 28px; } .ys-hero__inner { padding: 32px 18px; } .ys-hero-section { padding: 20px 14px 16px; } .ys-stats-section { padding: 20px 14px; } .ys-services-section { padding: 56px 18px 24px; } .ys-sectors-section, .ys-portfolio-section, .ys-team-section, .ys-faq-section { padding: 52px 18px; } .ys-pricing-section, .ys-contact-section { padding: 56px 16px; } .ys-chip { flex-basis: 100%; justify-content: flex-start; } } /* -------------------------------------------------------------------------- * Touch-target sizing on mobile (44px minimum for tappable controls) * ----------------------------------------------------------------------- */ @media (max-width: 860px) { .ys-lang__toggle { min-height: 44px; } .ys-lang__item { min-height: 44px; box-sizing: border-box; } .ys-chip-btn, .ys-billing__btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* -------------------------------------------------------------------------- * Reduced motion * ----------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ys-service__mock-card, .ys-service__mock-badge { animation: none; } .ys-reveal-init { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- * Inner pages: page / single (article) / blog / archive / search / 404 / Woo * ----------------------------------------------------------------------- */ .ys-page { width: 100%; padding: 64px 24px 96px; } .ys-page__inner { width: 100%; max-width: 1080px; margin: 0 auto; } .ys-page--article .ys-page__inner { max-width: 760px; } .ys-page--center .ys-page__inner { max-width: 640px; text-align: center; } .ys-page__header { margin-bottom: 40px; } .ys-page__title { margin: 8px 0 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.08; color: #0C0C0C; } .ys-page__desc { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: #535353; } .ys-page__empty { font-size: 17px; color: #535353; } .ys-page__search { margin-top: 24px; } /* Entry (single page / article) */ .ys-entry__header { margin-bottom: 28px; } .ys-entry__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .ys-entry__cats a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--accent-soft, rgba(239, 62, 62, .12)); color: var(--accent, #EF3E3E); font-size: 13px; font-weight: 600; text-decoration: none; } .ys-entry__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.07; letter-spacing: -0.02em; color: #0C0C0C; } .ys-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; color: #6b6b6b; } .ys-entry__author { font-weight: 600; color: #0C0C0C; } .ys-entry__thumb { margin: 0 0 36px; border-radius: 28px; overflow: hidden; } .ys-entry__thumb img { display: block; width: 100%; height: auto; } .ys-entry__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; } .ys-entry__tags a { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1.5px solid #E0E3E7; font-size: 13px; color: #535353; text-decoration: none; } .ys-entry__tags a:hover { border-color: #0C0C0C; color: #0C0C0C; } /* Prose typography */ .ys-prose { font-size: 17px; line-height: 1.75; color: #2A2A2A; } .ys-prose > * + * { margin-top: 1.4em; } .ys-prose h2 { font-family: Inter, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; color: #0C0C0C; margin-top: 1.8em; } .ys-prose h3 { font-family: Poppins, sans-serif; font-weight: 600; font-size: 23px; color: #0C0C0C; margin-top: 1.6em; } .ys-prose h4 { font-family: Poppins, sans-serif; font-weight: 600; font-size: 19px; color: #0C0C0C; margin-top: 1.4em; } .ys-prose a { color: var(--accent, #EF3E3E); text-decoration: underline; text-underline-offset: 2px; } /* Prose is the exception: keep the accent link colour when visited. */ .ys-prose a:visited { color: var(--accent, #EF3E3E); } .ys-prose img, .ys-prose figure img { border-radius: 18px; max-width: 100%; height: auto; } .ys-prose ul, .ys-prose ol { padding-left: 1.3em; } .ys-prose li + li { margin-top: .5em; } .ys-prose blockquote { margin: 1.6em 0; padding: 18px 24px; border-left: 4px solid var(--accent, #EF3E3E); background: #F4F5F7; border-radius: 0 16px 16px 0; color: #333; font-style: italic; } .ys-prose code { background: #F4F5F7; padding: 2px 7px; border-radius: 6px; font-size: .9em; } .ys-prose pre { background: #0C0C0C; color: #EDEDED; padding: 20px 24px; border-radius: 16px; overflow: auto; } .ys-prose pre code { background: transparent; padding: 0; color: inherit; } .ys-prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; } .ys-prose th, .ys-prose td { border: 1px solid #E8EAED; padding: 10px 14px; text-align: left; } /* Post navigation */ .ys-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; } .ys-post-nav__next { text-align: right; } .ys-post-nav a { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border: 1.5px solid #E8EAED; border-radius: 20px; text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .ys-post-nav__next a { align-items: flex-end; } .ys-post-nav a:hover { border-color: #0C0C0C; transform: translateY(-2px); } .ys-post-nav__label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent, #EF3E3E); } .ys-post-nav__title { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; color: #0C0C0C; } /* Blog/archive/search cards */ .ys-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ys-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; border: 1.5px solid #EEEFF1; transition: transform .25s ease, box-shadow .25s ease; } .ys-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(12, 12, 12, .25); } .ys-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EFF2F4; } .ys-card__media img { width: 100%; height: 100%; object-fit: cover; } .ys-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #EFF2F4, #E2E6EA); } .ys-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; } .ys-card__cat { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft, rgba(239, 62, 62, .12)); color: var(--accent, #EF3E3E); font-size: 12px; font-weight: 600; text-decoration: none; } .ys-card__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.25; } .ys-card__title a { color: #0C0C0C; text-decoration: none; } .ys-card__title a:hover { color: var(--accent, #EF3E3E); } .ys-card__excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: #6b6b6b; flex: 1; } .ys-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #9a9a9a; } .ys-card__arrow { color: var(--accent, #EF3E3E); font-size: 18px; } /* Pagination */ .ys-page .pagination, .ys-page .nav-links, .ys-blog .pagination, .ys-blog .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; } .ys-page .page-numbers, .ys-blog .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 14px; border: 1.5px solid #E8EAED; color: #0C0C0C; font-weight: 600; text-decoration: none; } .ys-page .page-numbers.current, .ys-blog .page-numbers.current { background: #0C0C0C; color: #fff; border-color: #0C0C0C; } .ys-page a.page-numbers:hover, .ys-blog a.page-numbers:hover { border-color: #0C0C0C; } /* Search form */ .search-form { display: flex; gap: 10px; } .search-form .search-field { flex: 1; min-width: 0; padding: 14px 18px; border: 1.5px solid #E0E3E7; border-radius: 14px; font-size: 15px; outline: none; background: #fff; } .search-form .search-field:focus { border-color: var(--accent, #EF3E3E); box-shadow: 0 0 0 4px var(--accent-soft, rgba(239, 62, 62, .12)); } .search-form .search-submit { padding: 14px 24px; border: none; border-radius: 14px; background: var(--accent, #EF3E3E); color: #fff; font-weight: 600; cursor: pointer; } /* 404 */ .ys-404 { display: flex; flex-direction: column; align-items: center; gap: 18px; } .ys-404__code { font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(64px, 12vw, 120px); line-height: 1; color: var(--accent, #EF3E3E); } .ys-page--center .ys-page__search { width: 100%; max-width: 440px; } /* -------------------------------------------------------------------------- * Comments * ----------------------------------------------------------------------- */ .comments-area { margin-top: 56px; padding-top: 40px; border-top: 1px solid #EEEFF1; } .comments-title, .comment-reply-title { font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(22px, 3vw, 26px); color: #0C0C0C; margin: 0 0 8px; } .comment-list { list-style: none; margin: 24px 0 0; padding: 0; } .comment-list ol.children { list-style: none; margin: 0; padding-left: clamp(16px, 4vw, 40px); } .comment-list .comment-body { position: relative; margin-top: 16px; padding: 22px 24px; border: 1px solid #EEEFF1; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px -14px rgba(12, 12, 12, .25); } .comment-meta { margin-bottom: 12px; } .comment-author { display: flex; align-items: center; gap: 12px; } .comment-author .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .comment-author .fn { font-weight: 700; font-style: normal; color: #0C0C0C; } .comment-author .says { display: none; } .comment-metadata { margin-top: 2px; font-size: 13px; } .comment-metadata a { color: #9AA0A8; text-decoration: none; } .comment-content { color: #3A3A3A; line-height: 1.7; } .comment-content p { margin: 0 0 12px; } .comment-content :last-child { margin-bottom: 0; } .comment-awaiting-moderation { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent, #EF3E3E); } .comment-body .reply { margin-top: 12px; } .comment-body .reply a { display: inline-flex; align-items: center; padding: 7px 16px; border: 1.5px solid #E0E3E7; border-radius: 999px; font-size: 13px; font-weight: 600; color: #0C0C0C; text-decoration: none; transition: border-color .2s ease, background .2s ease; } .comment-body .reply a:hover { border-color: var(--accent, #EF3E3E); background: var(--accent-soft, rgba(239, 62, 62, .12)); } .comment.bypostauthor > .comment-body { border-color: var(--accent, #EF3E3E); } /* Comment form */ .comment-respond { margin-top: 32px; } .comment-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .comment-notes, .comment-form-cookies-consent { font-size: 14px; color: #6b6b6b; } .comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { display: flex; flex-direction: column; gap: 6px; margin: 0; } .comment-form label { font-size: 14px; font-weight: 600; color: #0C0C0C; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1.5px solid #E0E3E7; border-radius: 14px; font-size: 16px; line-height: 1.4; outline: none; font-family: inherit; -webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease; } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent, #EF3E3E); box-shadow: 0 0 0 4px var(--accent-soft, rgba(239, 62, 62, .12)); } .comment-form .form-submit { margin: 0; } .comment-form .submit { align-self: flex-start; padding: 14px 30px; border: none; border-radius: 999px; background: var(--accent, #EF3E3E); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; transition: filter .2s ease, transform .2s ease; } .comment-form .submit:hover { filter: brightness(1.06); transform: translateY(-1px); } /* Page-links (paginated content) */ .ys-page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; font-weight: 600; } .ys-page-links a { color: var(--accent, #EF3E3E); } /* WooCommerce niceties (default styling kept; brand the buttons/accents) */ .ys-page--shop .woocommerce-breadcrumb { margin-bottom: 24px; color: #6b6b6b; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { border-radius: 999px; background: var(--accent, #EF3E3E); color: #fff; font-weight: 600; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { filter: brightness(1.08); } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--accent, #EF3E3E); } .woocommerce ul.products li.product .price { color: var(--accent, #EF3E3E); } /* Inner-page responsive */ @media (max-width: 900px) { .ys-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ys-page { padding: 44px 20px 64px; } .ys-cards { grid-template-columns: 1fr; } .ys-post-nav { grid-template-columns: 1fr; } .ys-post-nav__next { text-align: left; } .ys-post-nav__next a { align-items: flex-start; } .search-form { flex-direction: column; } .search-form .search-submit { width: 100%; } } /* -------------------------------------------------------------------------- * Footer nav menus (wp_nav_menu output) * ----------------------------------------------------------------------- */ .ys-footer__menu { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .ys-footer__menu li { margin: 0; } /* Keep nav/footer link colours stable when visited. * (Overrides the higher-specificity `a:visited` rule in the base style.css.) */ .ys-nav__link:visited { color: #1A1A1A; } .ys-lang__item:visited, .ys-lang__name:visited { color: #1A1A1A; } .ys-footer__link:visited, .ys-footer__menu a:visited { color: #6b6b6b; } /* -------------------------------------------------------------------------- * Floating buttons: scroll-to-top + contact FAB (WhatsApp / Telegram) * ----------------------------------------------------------------------- */ .ys-fab { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .ys-fab__btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: none; border-radius: 50%; cursor: pointer; color: #fff; box-shadow: 0 12px 28px -10px rgba(12, 12, 12, .45); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), filter .2s ease, opacity .25s ease, visibility .25s ease; } .ys-fab__btn:hover { transform: translateY(-3px); filter: brightness(1.05); } .ys-fab__btn:active { transform: translateY(0) scale(.95); } .ys-fab__top { background: #0C0C0C; } .ys-fab__top[hidden] { display: inline-flex; opacity: 0; visibility: hidden; pointer-events: none; } .ys-fab__top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .ys-fab__contact { position: relative; display: flex; flex-direction: column; align-items: flex-end; } .ys-fab__toggle { background: var(--accent, #EF3E3E); width: 60px; height: 60px; } .ys-fab__icon-close { display: none; } .ys-fab__contact.is-open .ys-fab__icon-open { display: none; } .ys-fab__contact.is-open .ys-fab__icon-close { display: block; } .ys-fab__channels { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .ys-fab__channels[hidden] { display: none; } .ys-fab__channel { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px; background: #fff; color: #0C0C0C; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(12, 12, 12, .4); transform: translateY(8px); opacity: 0; animation: ysRise .28s ease forwards; } .ys-fab__channel:hover { filter: brightness(.98); } .ys-fab__channel svg { flex: none; } .ys-fab__channel--wa svg { color: #25D366; } .ys-fab__channel--tg svg { color: #2AABEE; } @media (max-width: 600px) { .ys-fab { right: 16px; bottom: 16px; gap: 12px; } .ys-fab__toggle { width: 54px; height: 54px; } } /* -------------------------------------------------------------------------- * Blog (Makaleler) + Article (Makale Detay) layer * ----------------------------------------------------------------------- */ /* Blog index / archive wrappers */ .ys-blog { width: 100%; padding: 56px 24px 0; } .ys-blog__head { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .ys-blog__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.02em; color: #0C0C0C; max-width: 760px; } .ys-blog__title--sm { font-size: clamp(30px, 4vw, 44px); } .ys-blog__lead { margin: 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: #535353; max-width: 600px; } .ys-blog__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 40px; } /* Featured post (dark) */ .ys-feat-wrap { width: 100%; margin: 28px 0 8px; } .ys-feat { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 40px; overflow: hidden; background: #0C0C0C; color: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .ys-feat:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(12, 12, 12, .5); } .ys-feat__media { position: relative; min-height: 380px; overflow: hidden; } .ys-feat__body { padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 18px; } .ys-feat__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent, #EF3E3E); } .ys-feat__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.01em; color: #fff; } .ys-feat__excerpt { margin: 0; font-size: 16px; line-height: 1.6; color: #A9ACB2; } /* Shared post media (gradient or thumbnail) */ .ys-postcard__media { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 28px; overflow: hidden; background: #EFF2F4; } .ys-postcard__img, .ys-postcard__grad { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .ys-postcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ys-postcard__stripe { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 16px); pointer-events: none; } .ys-postcard__cat { position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 600; color: #0C0C0C; } .ys-feat__media .ys-postcard__cat { top: auto; bottom: 24px; left: 30px; } /* Byline (initials avatar + meta) */ .ys-byline { display: flex; align-items: center; gap: 10px; } .ys-byline__avatar { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: Poppins, sans-serif; font-weight: 600; } .ys-byline__col { display: flex; flex-direction: column; gap: 3px; } .ys-byline--card .ys-byline__avatar { width: 34px; height: 34px; background: #EFF2F4; color: #0C0C0C; font-size: 13px; } .ys-byline--card .ys-byline__meta { font-size: 13px; color: #9a9a9a; } .ys-byline--feat { margin-top: 6px; } .ys-byline--feat .ys-byline__avatar { width: 42px; height: 42px; background: var(--accent, #EF3E3E); color: #fff; font-size: 15px; } .ys-byline--feat .ys-byline__name { font-size: 15px; font-weight: 600; line-height: 1.2; color: #fff; } .ys-byline--feat .ys-byline__sub { font-size: 13px; line-height: 1.2; color: #8A8D93; } .ys-byline--article .ys-byline__avatar { width: 46px; height: 46px; background: linear-gradient(160deg, #34403F, #1E2625); color: #fff; font-size: 15px; } .ys-byline--article .ys-byline__name { font-size: 15px; font-weight: 600; color: #0C0C0C; } .ys-byline--article .ys-byline__sub { font-size: 13px; color: #9a9a9a; } /* Post cards in the grid (transparent, gradient media) */ .ys-postcard { display: flex; flex-direction: column; gap: 18px; text-decoration: none; transition: transform .2s ease; } .ys-postcard:hover { transform: translateY(-4px); } .ys-postcard__body { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; } .ys-postcard__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.25; color: #0C0C0C; transition: color .15s ease; } .ys-postcard:hover .ys-postcard__title { color: var(--accent, #EF3E3E); } .ys-postcard__excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: #6b6b6b; } .ys-postcard__minmeta { font-size: 13px; color: #9a9a9a; } .ys-postcard--sm { gap: 16px; } .ys-postcard--sm .ys-postcard__title { font-size: 20px; } /* Category filter chips (scoped under .ys-chips so they don't collide with the hero feature .ys-chip, which is a flex:1 stretch chip). */ .ys-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .ys-chips .ys-chip { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 10px 20px; border: 1.5px solid #D6DAE0; border-radius: 999px; background: #fff; box-shadow: none; color: #0C0C0C; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .ys-chips .ys-chip:hover { transform: translateY(-2px); border-color: #0C0C0C; } .ys-chips .ys-chip.is-active { background: #0C0C0C; color: #fff; border-color: #0C0C0C; } .ys-chips .ys-chip:visited { color: #0C0C0C; } .ys-chips .ys-chip.is-active:visited { color: #fff; } /* Newsletter band */ .ys-newsletter { width: 100%; max-width: 1200px; margin: 40px auto 80px; border-radius: 44px; background: linear-gradient(135deg, rgba(96, 147, 224, .20) 0%, rgba(96, 147, 224, .08) 55%, var(--accent-soft, rgba(239, 62, 62, .08)) 100%); padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .ys-newsletter__text { display: flex; flex-direction: column; gap: 12px; max-width: 520px; } .ys-newsletter__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; color: #0C0C0C; } .ys-newsletter__lead { margin: 0; font-size: 17px; color: #535353; } .ys-newsletter__form { display: flex; align-items: center; gap: 10px; background: #fff; padding: 7px 7px 7px 20px; border-radius: 999px; box-shadow: 0 14px 36px -16px rgba(12, 12, 12, .3); } .ys-newsletter__input { border: none; outline: none; font-size: 16px; width: 240px; max-width: 100%; background: transparent; color: #0C0C0C; } .ys-newsletter__btn { flex: none; padding: 13px 24px; border: none; border-radius: 999px; background: var(--accent, #EF3E3E); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .15s ease, filter .2s ease; } .ys-newsletter__btn:hover { filter: brightness(1.08); transform: translateY(-2px); } .ys-newsletter__btn:disabled { filter: none; transform: none; cursor: default; opacity: .92; } /* Article (single post) */ .ys-article { width: 100%; padding: 40px 24px 0; display: flex; flex-direction: column; align-items: center; } .ys-article__head { width: 100%; max-width: 820px; } .ys-article__crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9a9a9a; margin-bottom: 28px; } .ys-article__crumb a { color: #9a9a9a; text-decoration: none; } .ys-article__crumb a:visited { color: #9a9a9a; } .ys-article__crumb a:hover { color: var(--accent, #EF3E3E); } .ys-article__crumb-cat, .ys-article__crumb-cat:visited { color: var(--accent, #EF3E3E); font-weight: 600; } .ys-article__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.08; letter-spacing: -0.02em; color: #0C0C0C; } .ys-article__lead { margin: 22px 0 0; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.55; color: #535353; } .ys-article__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 30px 0; padding: 20px 0; border-top: 1px solid #EEEFF1; border-bottom: 1px solid #EEEFF1; } .ys-share { display: flex; align-items: center; gap: 8px; } .ys-share__label { font-size: 13px; color: #9a9a9a; margin-right: 4px; } .ys-share__btn { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #EFF2F4; color: #0C0C0C; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease; } .ys-share__btn:hover { background: #E2E6EA; } .ys-share__btn.is-copied { background: var(--accent, #EF3E3E); color: #fff; } .ys-article__hero { width: 100%; max-width: 1040px; margin: 8px 0 0; } .ys-article__hero-media { position: relative; width: 100%; aspect-ratio: 21 / 9; border-radius: 36px; overflow: hidden; background: #EFF2F4; } .ys-article__hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ys-article__hero-stripe { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 16px); } .ys-article__hero-caption { position: absolute; left: 30px; bottom: 24px; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .85); font-size: 14px; } .ys-article__body { width: 100%; max-width: 720px; margin: 40px 0 0; } .ys-article__body.ys-prose { font-size: 19px; } .ys-article__body.ys-prose blockquote { margin: 1.4em 0; padding: 22px 28px; border-radius: 0 20px 20px 0; background: #EFF2F4; font-family: Poppins, sans-serif; font-style: normal; font-weight: 500; font-size: 20px; line-height: 1.5; color: #0C0C0C; } .ys-article__body.ys-prose pre { padding: 24px 26px; border-radius: 20px; font-size: 14.5px; line-height: 1.7; } .ys-article__tags { width: 100%; max-width: 720px; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding-top: 24px; border-top: 1px solid #EEEFF1; } .ys-article__tag { padding: 8px 16px; border-radius: 999px; background: #EFF2F4; font-size: 14px; font-weight: 500; color: #535353; text-decoration: none; transition: background .15s ease, color .15s ease; } .ys-article__tag:hover { background: #E2E6EA; color: #0C0C0C; } .ys-article__tag:visited { color: #535353; } /* Author card */ .ys-authorcard { width: min(720px, calc(100% - 48px)); margin: 24px auto 0; display: flex; align-items: center; gap: 22px; padding: 28px 32px; border-radius: 30px; background: #0C0C0C; color: #fff; } .ys-authorcard__avatar { width: 68px; height: 68px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(160deg, #34403F, #1E2625); font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; color: #fff; } .ys-authorcard__body { display: flex; flex-direction: column; gap: 6px; } .ys-authorcard__name { font-family: Poppins, sans-serif; font-weight: 600; font-size: 20px; color: #fff; } .ys-authorcard__role { font-size: 14px; color: #8A8D93; } .ys-authorcard__bio { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: #A9ACB2; max-width: 460px; } .ys-article__comments { width: min(720px, calc(100% - 48px)); margin: 0 auto; } /* Related */ .ys-related { width: min(1200px, calc(100% - 48px)); margin: 48px auto 40px; } .ys-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; } .ys-related__title { margin: 0; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; color: #0C0C0C; } .ys-related__all { font-size: 15px; font-weight: 600; color: var(--accent, #EF3E3E); text-decoration: none; white-space: nowrap; } /* Blog / article responsive */ @media (max-width: 860px) { .ys-feat { grid-template-columns: 1fr; } .ys-feat__media { min-height: 220px; } .ys-feat__media .ys-postcard__cat { top: 16px; left: 16px; bottom: auto; } .ys-newsletter { flex-direction: column; align-items: stretch; } .ys-newsletter__form { width: 100%; } .ys-newsletter__input { flex: 1; width: auto; } } @media (max-width: 600px) { .ys-blog { padding: 40px 20px 0; } .ys-article { padding: 32px 20px 0; } .ys-article__meta { flex-direction: column; align-items: flex-start; } } /* ============================================================ LEGAL PAGES (template-legal.php) — sticky TOC layout ============================================================ */ .ys-legal__inner { width: 100%; max-width: 1040px; margin: 0 auto; padding: 56px 24px 80px; } .ys-legal__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; } .ys-legal__crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9a9a9a; } .ys-legal__crumb a { color: #9a9a9a; text-decoration: none; transition: color 0.15s ease; } .ys-legal__crumb a:hover, .ys-legal__crumb a:focus { color: #0c0c0c; } .ys-legal__crumb-current { color: #1a1a1a; } .ys-legal__title { margin: 0; font-family: Inter, var(--ys-font, sans-serif); font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1.04; letter-spacing: -0.02em; color: #0c0c0c; } .ys-legal__updated { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: #6b6b6b; } .ys-legal__updated svg { color: #9a9a9a; flex: none; } .ys-legal__body { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; } .ys-legal__toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 24px; background: #f7f8fa; } .ys-legal__toc-title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9a9a; margin-bottom: 8px; } .ys-legal__toc a { font-size: 14.5px; color: #535353; text-decoration: none; padding: 7px 10px; border-radius: 10px; transition: background 0.15s ease, color 0.15s ease; } .ys-legal__toc a:hover, .ys-legal__toc a:focus { background: #fff; color: #0c0c0c; } .ys-legal__toc a:visited { color: #535353; } .ys-legal__article { max-width: 720px; } .ys-legal__article h2 { scroll-margin-top: 96px; } @media (max-width: 860px) { .ys-legal__body { grid-template-columns: 1fr; gap: 24px; } .ys-legal__toc { position: static; top: auto; } } /* -------------------------------------------------------------------------- * Tema Demoları (theme demos listing) * ----------------------------------------------------------------------- */ .ys-demos-section { padding: 80px 24px; } .ys-demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .ys-demo-card { display: flex; flex-direction: column; background: #fff; border: 1.5px solid #E8EAED; border-radius: 28px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ys-demo-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(12, 12, 12, .35); border-color: #DDE1E6; } .ys-demo-card__browser { position: relative; } .ys-demo-card__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #F7F8FA; border-bottom: 1px solid #ECEEF1; } .ys-demo-card__bar > span:not(.ys-demo-card__url) { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #D8DCE1; } .ys-demo-card__url { margin-left: 10px; flex: 1; min-width: 0; font-size: 12px; color: #8A8D93; background: #fff; border: 1px solid #ECEEF1; border-radius: 999px; padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ys-demo-card__preview { display: block; position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #EFF2F4; } .ys-demo-card__shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .ys-demo-card__shot--empty { width: 100%; height: 100%; } .ys-demo-card__preview-cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 12, 12, .48); color: #fff; font-weight: 600; font-size: 15px; opacity: 0; transition: opacity .2s ease; } .ys-demo-card__preview:hover .ys-demo-card__preview-cta { opacity: 1; } .ys-demo-card__badge { position: absolute; top: 52px; right: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: var(--accent, #EF3E3E); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 8px 20px -8px var(--accent, #EF3E3E); } .ys-demo-card__body { display: flex; flex-direction: column; gap: 14px; padding: 26px; flex: 1; } .ys-demo-card__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 20px; color: #0C0C0C; } .ys-demo-card__desc { margin: 0; font-size: 15px; line-height: 1.55; color: #535353; } .ys-demo-card__features { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .ys-demo-card__features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; } .ys-demo-card__features .ys-checklist__icon { color: var(--accent, #EF3E3E); display: inline-flex; flex: none; } .ys-demo-card__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ys-demo-card__price { font-family: Inter, sans-serif; font-weight: 700; font-size: 20px; color: #0C0C0C; } .ys-demo-card__actions { display: flex; gap: 8px; flex-wrap: wrap; } .ys-demo-card__demo, .ys-demo-card__buy { padding: 10px 18px; font-size: 14px; } @media (max-width: 1024px) { .ys-demos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ys-demos { grid-template-columns: 1fr; } .ys-demos-section { padding: 56px 16px; } }