/* ========================================================================== Afshin Afshar — main stylesheet Direction: creator's editing desk. White / blue / ink / peach / pink. Logical properties throughout so the English (LTR) page mirrors cleanly. ========================================================================== */ /* Vazirmatn v33.003 variable, from the project package vazirmatn-v33.003 (OFL, see fonts/Vazirmatn-OFL.txt). Local only. */ @font-face { font-family: Vazirmatn; src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"), url("../fonts/Vazirmatn-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root { --ink: #152b36; --ink-2: #22404e; --blue: #1963de; --blue-d: #114fb8; --blue-soft: #e6eefc; --pink: #f6dbea; --peach: #ffbc9d; --peach-soft: #fff1ea; --paper: #fff; --soft: #f4f7fa; --line: #e1e8ed; --muted: #5c6b73; --rec: #e45b53; --focus: #e46430; --ok: #1f8a4c; --radius: 20px; --radius-s: 12px; --ease: cubic-bezier(.22, 1, .36, 1); --shadow: 0 30px 65px -40px #102f64aa; --shadow-s: 0 12px 40px #112c4018; --max: 1320px; --gutter: 5%; --header-h: 84px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Vazirmatn, Tahoma, sans-serif; font-size: 16px; line-height: 1.8; overflow-x: clip; text-rendering: optimizeLegibility; } img, video, svg { max-width: 100%; } img { height: auto; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button, a, input, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; } [tabindex="-1"]:focus { outline: none; } [hidden] { display: none !important; } h1, h2, h3, h4 { line-height: 1.45; margin: 0 0 .5em; font-weight: 900; } h2 { font-size: clamp(30px, 3.6vw, 51px); letter-spacing: -1px; line-height: 1.5; } h3 { font-size: 21px; } p { margin: 0 0 1em; } .muted { color: var(--muted); } .center { text-align: center; } .skip { position: fixed; top: -100px; inset-inline-start: 20px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; } .skip:focus { top: 10px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; } .icon.flip { transform: scaleX(-1); } [dir="ltr"] .icon-arrow, [dir="ltr"] .icon-back { transform: scaleX(-1); } [dir="ltr"] .icon-back.flip { transform: none; } .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } .section { max-width: var(--max); margin: 0 auto; padding: 100px var(--gutter); } .eyebrow { font-size: 14px; color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; } .lead { font-size: 19px; line-height: 2; color: var(--muted); } .lead p { margin: 0; } /* ---------- Buttons & links ---------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 0; padding: 15px 22px; border-radius: var(--radius-s); font-weight: 700; font-size: 14.5px; line-height: 1.4; transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s; text-align: center; } .button .icon { transition: transform .3s var(--ease); } .button:hover { transform: translateY(-3px); } .button:hover .icon-arrow { transform: translate(-3px, -3px); } [dir="ltr"] .button:hover .icon-arrow { transform: translate(3px, -3px) scaleX(-1); } .button:hover .icon-arrow-r, .nav-cta:hover .icon-arrow-r { transform: translate(3px, -3px); } .button.primary { background: var(--blue); color: #fff; box-shadow: 0 12px 26px -16px var(--blue); } .button.primary:hover { background: var(--blue-d); } .button.ghost { background: transparent; border: 1px solid #cdd8e0; color: var(--ink); } .button.ghost:hover { border-color: var(--ink); } .button.light { background: #fff; color: var(--ink); } .button.full { width: 100%; } .button:disabled, .button[aria-disabled="true"] { opacity: .5; pointer-events: none; } .text-link { font-size: 14px; border: 0; border-bottom: 1px solid #aebec8; padding: 8px 0; background: none; transition: border-color .2s, color .2s; } .text-link:hover { color: var(--blue); border-color: var(--blue); } .arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--blue); } .arrow-link .icon { transition: transform .3s var(--ease); } .arrow-link:hover .icon-arrow { transform: translate(-3px, -3px); } .prose a, .lead a, .section-heading p a, .band-note a { color: var(--blue); border-bottom: 1px solid currentColor; } .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dbe2e7; background: #fff; padding: 7px 16px; border-radius: 40px; font-size: 13.5px; line-height: 1.5; transition: background .25s, color .25s, border-color .25s; } .chip.selected, .chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); } .chip.hot { background: var(--peach); border-color: var(--peach); color: var(--ink); font-weight: 700; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .sample-tag { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 3; color: #fff; background: #152b36a6; padding: 3px 10px; border-radius: 20px; font-size: 11px; line-height: 1.6; backdrop-filter: blur(4px); pointer-events: none; } .note-inline .sample-tag, .buy-price .sample-tag, .course-foot .sample-tag { position: static; display: inline-block; background: var(--peach-soft); color: #8a3d18; } /* Record indicator: soft pulse, never a blink. */ .rec { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); position: relative; flex: none; } .rec::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rec); opacity: 0; animation: recPulse 2.6s ease-out infinite; } @keyframes recPulse { 0% { transform: scale(.6); opacity: .55; } 70%, 100% { transform: scale(1.6); opacity: 0; } } /* ---------- Top bars ---------- */ .scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; } .scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--peach)); transform-origin: right; transform: scaleX(0); } [dir="ltr"] .scroll-progress span { transform-origin: left; } .proto-bar { margin: 0; background: var(--ink); color: #dbe6ee; text-align: center; font-size: 12.5px; padding: 7px 16px; line-height: 1.7; } /* ---------- Header: transparent → glass on scroll ---------- */ .site-header { position: sticky; top: 0; z-index: 50; transition: background .35s, box-shadow .35s, backdrop-filter .35s; } .site-header.is-scrolled { background: #ffffffc7; backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 #152b3614; } .header-inner { max-width: 1440px; margin: auto; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); transition: padding .35s; } .is-scrolled .header-inner { padding-block: 10px; } .brand { display: flex; gap: 12px; align-items: center; font-weight: 900; font-size: 20px; line-height: 1.3; } .brand small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; } .brand-mark { font-family: Vazirmatn, Tahoma, sans-serif; font-weight: 900; font-size: 44px; letter-spacing: -7px; direction: ltr; line-height: 1; color: var(--blue); padding-inline-end: 8px; display: inline-block; } .brand-mark span { color: var(--ink); } .site-header .brand-mark { animation: logoIn 1.1s var(--ease) both; } .site-header .brand-name { animation: fadeUp .9s .25s var(--ease) both; } @keyframes logoIn { from { clip-path: inset(0 100% 0 0); transform: translateY(6px); } to { clip-path: inset(0 0 0 0); transform: none; } } .main-nav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; font-size: 15px; } .main-nav a { position: relative; padding: 6px 0; transition: color .2s; } .main-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transition: transform .3s var(--ease); } .main-nav a:hover, .main-nav .current-menu-item > a { color: var(--blue); } .main-nav a:hover::after, .main-nav .current-menu-item > a::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; position: relative; transition: border-color .2s, transform .25s var(--ease); font-weight: 700; font-size: 14px; } .icon-btn:hover { border-color: var(--ink); transform: translateY(-2px); } .icon-btn.cart b { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--rec); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; } .nav-cta { padding: 11px 20px; border: 1px solid #d7dfe4; border-radius: 50px; font-size: 14px; display: inline-flex; gap: 14px; align-items: center; background: #fff; transition: background .25s, color .25s, border-color .25s; } .nav-cta:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .nav-cta:hover .icon { transform: translate(-2px, -2px); } .nav-cta .icon { transition: transform .3s var(--ease); } .menu-toggle { display: none; } .mobile-menu { position: fixed; inset: 0; z-index: 45; background: #fff; padding: calc(var(--header-h) + 80px) 7% 40px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; } .mobile-menu[hidden] { display: none; } .mobile-menu ul { list-style: none; margin: 0; padding: 0; } .mobile-menu li { border-bottom: 1px solid var(--line); animation: fadeUp .5s var(--ease) both; } .mobile-menu li:nth-child(2) { animation-delay: .04s; } .mobile-menu li:nth-child(3) { animation-delay: .08s; } .mobile-menu li:nth-child(4) { animation-delay: .12s; } .mobile-menu li:nth-child(5) { animation-delay: .16s; } .mobile-menu li:nth-child(6) { animation-delay: .2s; } .mobile-menu nav a { display: block; padding: 16px 0; font-size: 24px; font-weight: 800; } .mobile-menu-actions { display: grid; gap: 10px; margin-top: 30px; } body.menu-open { overflow: hidden; } .menu-open .site-header { background: #fff; } .menu-toggle .icon-close, .menu-open .menu-toggle .icon-menu { display: none; } .menu-open .menu-toggle .icon-close { display: block; } .mobile-menu nav:focus { outline: none; } /* ---------- Hero (from the artifact) ---------- */ .hero { max-width: 1440px; margin: auto; min-height: 700px; padding: 40px var(--gutter) 85px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5%; } .hero h1 { font-size: clamp(46px, 5.4vw, 82px); font-weight: 900; line-height: 1.38; margin: 0 0 20px; letter-spacing: -2px; } .chain { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14px; color: var(--muted); margin: 0 0 22px; } .chain span { opacity: 0; animation: chainIn .6s calc(.25s + var(--i) * .32s) var(--ease) forwards; display: inline-flex; align-items: center; } .chain span:not(:last-child)::after { content: "←"; margin: 0 10px; color: var(--blue); } [dir="ltr"] .chain span:not(:last-child)::after { content: "→"; } .chain span:last-child { color: var(--ink); font-weight: 800; } @keyframes chainIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } .split-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); animation: wordIn .7s calc(var(--wi) * 70ms + 120ms) var(--ease) forwards; } @keyframes wordIn { to { opacity: 1; transform: none; } } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; } .hero-actions.center { justify-content: center; } .signature { font-size: 14px; font-weight: 700; margin: 35px 0 0; } .signature span { font-size: 12px; font-weight: 400; color: var(--muted); } .studio { direction: ltr; background: #edf2f7; border: 1px solid #dfe7ed; border-radius: var(--radius); box-shadow: var(--shadow); transform: rotate(-3deg); padding: 16px; position: relative; animation: studioIn 1.2s both; } .studio-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #566b7a; padding: 2px 4px 16px; } .studio-top > span:first-child { display: flex; gap: 9px; align-items: center; direction: rtl; } .en-studio .studio-top > span:first-child { direction: ltr; } .composition { position: relative; padding: 0 55px 0 46px; } .scene-image { height: 390px; border-radius: 14px; background: #a4b5b9 center / cover; position: relative; overflow: hidden; filter: saturate(1.15); transition: filter .3s; } .scene-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, #001925b0); } .scene-caption { position: absolute; bottom: 38px; right: 22px; color: #fff; z-index: 2; direction: rtl; } .en-studio .scene-caption { direction: ltr; left: 22px; right: auto; } .scene-caption span { font-size: 19px; } .scene-caption strong { display: block; font-size: 33px; line-height: 1.8; } .frame-guide { position: absolute; inset: 17px; border: 1px solid #ffffff65; border-radius: 3px; z-index: 1; } .scene-image .sample-tag { top: 25px; left: 27px; right: auto; } .editing-label { position: absolute; left: -28px; bottom: 63px; padding: 13px 16px; background: #fff; box-shadow: var(--shadow-s); border-radius: 12px; display: flex; gap: 12px; align-items: center; transform: rotate(3deg); direction: rtl; font-size: 13px; line-height: 1.6; } .editing-label small { display: block; color: #77888e; font-size: 11px; margin-top: 3px; } .mini-icon { color: var(--blue); font-size: 30px; display: grid; } .mini-icon .icon { animation: spin 14s linear infinite; } .format-tag { position: absolute; right: -35px; top: 90px; transform: rotate(90deg); font-size: 12px; color: #6c7c8b; } .floating-sticker { position: absolute; right: -26px; top: 22px; background: var(--peach); border-radius: 50%; width: 110px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.5; transform: rotate(12deg); font-size: 18px; box-shadow: 0 6px 15px #71421e15; direction: rtl; z-index: 3; animation: floaty 6s ease-in-out infinite; } .en-studio .floating-sticker { direction: ltr; font-size: 15px; } .floating-sticker b { font-size: 22px; } .en-studio .floating-sticker b { font-size: 16px; } .player { display: flex; align-items: center; gap: 12px; padding-top: 22px; } .play { background: var(--ink); color: #fff; border: 0; width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; } .play .icon { width: 16px; height: 16px; } .track { display: flex; gap: 4px; height: 32px; flex: 1; position: relative; overflow: hidden; border-radius: 5px; } .clip { border-radius: 4px; display: grid; place-items: center; font-size: 11px; width: 33.33%; } .c1 { background: #c7dafa; } .c2 { background: #e8cae3; } .c3 { background: #e8ccb9; } #playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); z-index: 2; } #time { font-size: 12px; } .scrub { direction: rtl; display: flex; gap: 12px; align-items: center; padding: 14px 0 0; font-size: 11px; color: #5a6f7e; } .scrub input { width: 30%; accent-color: var(--blue); } .playing .scene-image { animation: zoom 8s linear infinite; } .playing .scene-caption { animation: caption 8s infinite; } @keyframes studioIn { from { opacity: 0; transform: translateY(25px) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(-3deg); } } @keyframes zoom { 0%, 100% { background-size: auto 100%; } 50% { background-size: auto 112%; } } @keyframes caption { 0%, 100% { transform: translateY(6px); opacity: .5; } 15%, 85% { transform: translateY(0); opacity: 1; } } @keyframes floaty { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-8px); } } @keyframes spin { to { transform: rotate(360deg); } } .ribbon { background: var(--peach); padding: 22px 0; font-size: 22px; font-weight: 800; overflow: hidden; white-space: nowrap; transform: rotate(-1deg); margin-inline: -2%; } .ribbon-track { display: inline-flex; align-items: center; gap: 28px; animation: marquee 38s linear infinite; padding-inline-end: 28px; } .ribbon b { font-size: 28px; font-weight: 400; } @keyframes marquee { to { transform: translateX(50%); } } [dir="ltr"] .ribbon-track { animation-name: marqueeLtr; } @keyframes marqueeLtr { to { transform: translateX(-50%); } } /* ---------- Section heading & reveal ---------- */ .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 42px; } .section-heading h2 { margin: 0; } .section-heading > p { color: var(--muted); max-width: 450px; line-height: 2; margin: 0; } .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js [data-reveal].in { opacity: 1; transform: none; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- Animated service icons ---------- */ .svc-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--blue-soft); color: var(--blue); margin-bottom: 18px; } .svc-icon .icon { width: 30px; height: 30px; } .svc-icon.big { width: 76px; height: 76px; border-radius: 22px; } .svc-icon.big .icon { width: 36px; height: 36px; } .anim .i-lens { transform-origin: 12px 13.5px; } .anim .i-wave, .anim .i-mark, .anim .i-dot { transform-origin: center; } /* Bold animated icons. Whole-icon motion (big, readable) + a part-level accent (lens, wave, mark, dot). Revealed: plays twice. Hovered: loops. Home path icons: idle loop with a rest. */ .anim { overflow: visible; } .anim, .anim * { transform-box: fill-box; transform-origin: center; } .svc-icon .anim, .hero-visual .anim, .bts-card > .anim, .value-grid .anim, .result-badge .anim { stroke-width: 2.2; } .in .anim.icon-camera, .in > .anim.icon-camera { animation: camShoot 1.5s var(--ease) 2; } .in .anim.icon-camera .i-lens { animation: lens 1.5s var(--ease) 2; } .in .anim.icon-phone { animation: swing 1.8s var(--ease) 2; } .in .anim.icon-phone .i-dot { animation: blink 1.8s steps(2) 2; } .in .anim.icon-mic { animation: bob 1.4s ease-in-out 2; } .in .anim.icon-mic .i-wave { animation: wave 1.4s ease-in-out 2; } .in .anim.icon-calendar { animation: flip 1.7s var(--ease) 2; } .in .anim.icon-calendar .i-mark { stroke-dasharray: 5; animation: mark 1.7s ease-in-out 2; } .in .anim.icon-bulb { animation: glow 1.6s ease-in-out 2; } .in .anim.icon-send { animation: fly 1.6s var(--ease) 2; } .in .anim.icon-scissors { animation: snip 1.2s ease-in-out 2; } .in :is(.anim.icon-film, .anim.icon-script, .anim.icon-quiz, .anim.icon-user, .anim.icon-mail, .anim.icon-star) { animation: pop 1.3s var(--ease) 2; } :is(a, article, label, button):hover .anim.icon-camera { animation: camShoot 1.5s var(--ease) infinite; } :is(a, article, label, button):hover .anim.icon-camera .i-lens { animation: lens 1.5s var(--ease) infinite; } :is(a, article, label, button):hover .anim.icon-phone { animation: swing 1.8s var(--ease) infinite; } :is(a, article, label, button):hover .anim.icon-phone .i-dot { animation: blink 1.8s steps(2) infinite; } :is(a, article, label, button):hover .anim.icon-mic { animation: bob 1.4s ease-in-out infinite; } :is(a, article, label, button):hover .anim.icon-mic .i-wave { animation: wave 1.4s ease-in-out infinite; } :is(a, article, label, button):hover .anim.icon-calendar { animation: flip 1.7s var(--ease) infinite; } :is(a, article, label, button):hover .anim.icon-calendar .i-mark { stroke-dasharray: 5; animation: mark 1.7s ease-in-out infinite; } :is(a, article, label, button):hover .anim.icon-bulb { animation: glow 1.6s ease-in-out infinite; } :is(a, article, label, button):hover .anim.icon-send { animation: fly 1.6s var(--ease) infinite; } :is(a, article, label, button):hover .anim.icon-scissors { animation: snip 1.2s ease-in-out infinite; } :is(a, article, label, button):hover :is(.anim.icon-film, .anim.icon-script, .anim.icon-quiz, .anim.icon-user, .anim.icon-mail, .anim.icon-star) { animation: pop 1.3s var(--ease) infinite; } @keyframes camShoot { 0%, 100% { transform: none; } 14% { transform: scale(.78) rotate(-10deg); } 34% { transform: scale(1.18) rotate(6deg); } 52% { transform: scale(.96) rotate(-2deg); } 68% { transform: none; } } @keyframes lens { 0%, 100% { transform: scale(1); } 18% { transform: scale(.25); } 40% { transform: scale(1.25); } 60% { transform: scale(1); } } @keyframes swing { 0%, 100% { transform: none; } 18% { transform: rotate(-22deg) translateY(-4px); } 40% { transform: rotate(16deg) translateY(-6px) scale(1.08); } 60% { transform: rotate(-8deg); } 78% { transform: rotate(3deg); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes bob { 0%, 100% { transform: none; } 35% { transform: translateY(-6px) scale(1.12); } 65% { transform: translateY(2px) scale(.96); } } @keyframes wave { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .15; transform: scale(1.35); } } @keyframes flip { 0%, 100% { transform: none; } 22% { transform: rotate(-16deg) scale(1.18); } 45% { transform: rotate(10deg) scale(1.06); } 65% { transform: rotate(-4deg); } } @keyframes mark { to { stroke-dashoffset: -20; } } @keyframes glow { 0%, 100% { transform: none; filter: none; } 45% { transform: scale(1.2) rotate(-8deg); filter: drop-shadow(0 0 8px #ffbc9d) drop-shadow(0 0 2px #ffbc9d); } } @keyframes fly { 0% { transform: none; opacity: 1; } 40% { transform: translate(-14px, -14px) rotate(-12deg); opacity: 0; } 41% { transform: translate(14px, 14px); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes snip { 0%, 100% { transform: none; } 25% { transform: rotate(-24deg) scale(1.1); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-14deg); } } @keyframes pop { 0%, 100% { transform: none; } 30% { transform: scale(1.22) rotate(-10deg); } 55% { transform: scale(.94) rotate(4deg); } } /* ---------- Home: path cards ---------- */ .service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .path-card { border-radius: 22px; padding: 36px; position: relative; overflow: hidden; display: block; transition: transform .45s var(--ease), box-shadow .45s; } .path-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .path-card.blue { background: var(--blue); color: #fff; } .path-card.pink { background: var(--pink); } .path-meta { font-size: 14px; opacity: .8; } .path-card h3 { font-size: 43px; line-height: 1.5; margin: 23px 0 20px; } .path-card p { max-width: 340px; line-height: 2; opacity: .88; } .path-icon { position: absolute; inset-inline-end: 30px; top: 30px; width: 116px; height: 116px; border-radius: 34px; display: grid; place-items: center; background: #ffffff26; transition: transform .5s var(--ease), background .4s; } .pink .path-icon { background: #ffffff8c; } .path-icon .icon { width: 76px; height: 76px; stroke-width: 1.9; } .path-card:hover .path-icon { transform: rotate(-10deg) scale(1.12); background: #ffffff40; } .pink.path-card:hover .path-icon { background: #fff; } /* Idle loop with a rest so the two home icons stay alive on touch screens too. */ .path-card.in .path-icon .anim.icon-camera { animation: camIdle 4.2s var(--ease) 1s infinite; } .path-card.in .path-icon .anim.icon-camera .i-lens { animation: lensIdle 4.2s var(--ease) 1s infinite; } .path-card.in .path-icon .anim.icon-phone { animation: swingIdle 4.2s var(--ease) 1.6s infinite; } .path-card.in .path-icon .anim.icon-phone .i-dot { animation: blink 1s steps(2) infinite; } .path-card:hover .path-icon .anim.icon-camera { animation: camShoot 1.4s var(--ease) infinite; } .path-card:hover .path-icon .anim.icon-camera .i-lens { animation: lens 1.4s var(--ease) infinite; } .path-card:hover .path-icon .anim.icon-phone { animation: swing 1.5s var(--ease) infinite; } @keyframes camIdle { 0%, 40%, 100% { transform: none; } 6% { transform: scale(.78) rotate(-10deg); } 14% { transform: scale(1.18) rotate(6deg); } 22% { transform: scale(.96) rotate(-2deg); } 30% { transform: none; } } @keyframes lensIdle { 0%, 40%, 100% { transform: scale(1); } 7% { transform: scale(.25); } 16% { transform: scale(1.25); } 26% { transform: scale(1); } } @keyframes swingIdle { 0%, 45%, 100% { transform: none; } 8% { transform: rotate(-22deg) translateY(-4px); } 18% { transform: rotate(16deg) translateY(-6px) scale(1.08); } 28% { transform: rotate(-8deg); } 36% { transform: rotate(3deg); } } .path-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff55; margin-top: 30px; padding-top: 20px; font-size: 14px; } .pink .path-bottom { border-color: #152b3630; } .path-bottom b .icon { width: 28px; height: 28px; transition: transform .35s var(--ease); } .path-card:hover .path-bottom .icon { transform: translate(-4px, -4px); } /* ---------- Learn / compare ---------- */ .learn { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; padding-top: 40px; } .lesson-copy > p:not(.eyebrow) { line-height: 2; color: var(--muted); max-width: 440px; } .lesson-tabs { display: flex; gap: 8px; margin: 27px 0; flex-wrap: wrap; } .lesson-tabs button { border: 1px solid #dbe2e7; background: #fff; padding: 9px 20px; border-radius: 30px; font-size: 14px; transition: background .25s, color .25s; } .lesson-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); } #lesson-text { min-height: 95px; font-size: 15px; } .lesson-demo { transform: rotate(2deg); } .comparison { height: 425px; border-radius: 18px; position: relative; overflow: hidden; background: #95a9a9; direction: ltr; --pos: 55%; } .compare-photo { position: absolute; inset: 0; background: var(--img) center / cover; transition: filter .6s, background-position .6s; } .base-photo { filter: grayscale(.9) brightness(.75); } .edited-photo { clip-path: inset(0 calc(100% - var(--pos)) 0 0); filter: brightness(1.08) saturate(1.15); transition: filter .6s, background-position .6s; } .compare-line { position: absolute; left: var(--pos); top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; } .compare-line span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 22px; box-shadow: 0 6px 20px #0003; } .comparison input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .comparison:focus-within { outline: 3px solid var(--blue); outline-offset: 4px; } .before-label, .after-label { position: absolute; bottom: 20px; left: 20px; z-index: 2; background: #152b36b0; color: #fff; border-radius: 22px; padding: 6px 16px; font-size: 13px; pointer-events: none; } .after-label { left: auto; right: 20px; } .lesson-demo > p { text-align: center; color: var(--muted); font-size: 13px; margin-top: 17px; } /* ---------- Reel wall / portfolio ---------- */ .reel-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .reel { position: relative; border-radius: 18px; overflow: hidden; background: var(--soft); transition: opacity .45s var(--ease), transform .45s var(--ease); } .reel.is-hidden { display: none; } .reel.is-entering { animation: reelIn .5s var(--ease) both; } @keyframes reelIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } } .reel-link { display: block; } .reel-media { display: block; position: relative; aspect-ratio: 4 / 5.4; overflow: hidden; background: #cfd9df; } .reel-media img, .reel-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 6s linear, filter .4s; } .reel-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; } .reel.playing .reel-media video { opacity: 1; } .reel.playing .reel-media img { transform: scale(1.14); } .reel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, #0b1f29d0); pointer-events: none; } .reel-progress { position: absolute; top: 12px; inset-inline: 12px; height: 3px; background: #ffffff55; border-radius: 3px; z-index: 2; overflow: hidden; } .reel-progress i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: right; } [dir="ltr"] .reel-progress i { transform-origin: left; } .reel.playing .reel-progress i { animation: progress 6s linear forwards; } @keyframes progress { to { transform: scaleX(1); } } .reel-play { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #ffffffdd; color: var(--ink); display: grid; place-items: center; z-index: 2; transition: transform .35s var(--ease), opacity .35s; } .reel.playing .reel-play { transform: scale(.6); opacity: 0; } .reel-info { position: absolute; inset-inline: 16px; bottom: 16px; color: #fff; z-index: 2; line-height: 1.5; display: grid; gap: 2px; } .reel-field { font-size: 11.5px; background: #ffffff2e; backdrop-filter: blur(6px); width: fit-content; padding: 2px 10px; border-radius: 20px; } .reel-info strong { font-size: 16px; } .reel-info small { font-size: 12px; opacity: .8; } .reel .sample-tag { top: 24px; } .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .portfolio { position: relative; } .cursor-dot { position: fixed; top: 0; left: 0; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--peach); color: var(--ink); font-size: 13px; font-weight: 800; display: grid; place-items: center; pointer-events: none; z-index: 70; transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) scale(0); transition: transform .25s var(--ease); } .cursor-on .cursor-dot { transform: translate3d(var(--cx), var(--cy), 0) scale(1); } .cursor-on .reel-link { cursor: none; } .home-reels .reel-wall { grid-template-columns: repeat(6, 1fr); } .home-reels .center { margin-top: 36px; } /* ---------- Steps with draw-on line ---------- */ .process { border-top: 1px solid var(--line); } .steps { list-style: none; margin: 58px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; position: relative; } .line-steps::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: #dce7f9; } .line-steps::after { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform 1.8s var(--ease); } [dir="ltr"] .line-steps::after { transform-origin: left; } .line-steps.in::after { transform: scaleX(1); } .steps li { padding-top: 22px; position: relative; transition: opacity .6s, transform .6s var(--ease); } .js .steps:not(.in) li { opacity: 0; transform: translateY(14px); } .steps.in li:nth-child(2) { transition-delay: .35s; } body.no-motion .steps li { opacity: 1 !important; transform: none !important; } .steps.in li:nth-child(3) { transition-delay: .7s; } .steps.in li:nth-child(4) { transition-delay: 1.05s; } .steps li::before { content: ""; position: absolute; top: -6px; inset-inline-start: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid #dce7f9; z-index: 1; transition: border-color .4s; } .steps.in li::before { border-color: var(--blue); } .steps li > span { font-size: 16px; color: var(--blue); } .steps h3 { font-size: 21px; margin-top: 6px; } .steps p { font-size: 14px; line-height: 2; color: var(--muted); } /* ---------- Courses ---------- */ .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; } .course-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; } .course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .course-media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--soft); } .course-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 5s linear; } .trailer .trailer-bar { position: absolute; bottom: 0; inset-inline: 0; height: 4px; background: #ffffff40; z-index: 2; } .trailer .trailer-bar i { display: block; height: 100%; background: var(--peach); transform: scaleX(0); transform-origin: right; } [dir="ltr"] .trailer .trailer-bar i { transform-origin: left; } .course-card:hover .course-media img, .trailer.big:hover img { transform: scale(1.12); } .course-card:hover .trailer-bar i, .trailer.big:hover .trailer-bar i { animation: progress 4.5s linear forwards; } .play-dot { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: #ffffffe0; color: var(--ink); display: grid; place-items: center; transition: transform .4s var(--ease); z-index: 2; } .course-card:hover .play-dot { transform: scale(.8); } .course-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .course-body h3 { font-size: 20px; margin-bottom: 8px; } .course-body h3 a:hover { color: var(--blue); } .course-body > p { color: var(--muted); font-size: 14.5px; line-height: 1.9; } .course-meta { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); } .course-meta li { display: flex; align-items: center; gap: 5px; } .course-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; } .price { font-weight: 900; font-size: 18px; } .price.free { color: var(--ok); } .price del { opacity: .5; font-weight: 400; font-size: .8em; } .price ins { text-decoration: none; } .stats { display: flex; gap: 14px; margin: 26px 0 0; flex-wrap: wrap; } .courses-hero .stats { flex-wrap: nowrap; flex: none; } .stats div { background: var(--soft); border-radius: 16px; padding: 14px 22px; min-width: 110px; } .stats dt { font-size: 13px; color: var(--muted); } .stats dd { margin: 0; font-size: 32px; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; } /* ---------- FAQ with smooth height ---------- */ .faq-list { display: grid; gap: 12px; max-width: 900px; } .faq { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .3s, box-shadow .3s; overflow: hidden; } .faq[open] { border-color: #c7d6e3; box-shadow: var(--shadow-s); } .faq summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; font-size: 16.5px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .icon { transition: transform .35s var(--ease); color: var(--blue); } .faq[open] summary .icon { transform: rotate(180deg); } .faq-body { padding: 0 24px 6px; color: var(--muted); line-height: 2; } .faq-body p { margin-bottom: 14px; } /* ---------- Contact band (from the artifact) ---------- */ .contact-band { background: var(--ink); color: #fff; border-radius: 28px; margin: 40px auto 70px; width: min(1190px, 100% - 2 * var(--gutter)); display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding: 65px 6%; max-width: 1190px; } .contact-band .eyebrow { color: #bed0de; } .contact-band h2 { margin: 0; } .contact-band p { line-height: 2; color: #c5d3dc; } .contact-options { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; } .contact-options button { background: transparent; border: 1px solid #69818e; border-radius: 30px; color: #fff; font-size: 13.5px; padding: 9px 15px; transition: background .25s, color .25s; } .contact-options .selected { background: var(--peach); color: var(--ink); border-color: var(--peach); } .contact-band .button.light { width: 100%; justify-content: space-between; } .band-note { font-size: 13px; margin: 16px 0 0; } .band-note a { color: var(--peach); } /* ---------- Inner page hero ---------- */ .page-hero { max-width: var(--max); margin: 0 auto; padding: 50px var(--gutter) 40px; display: flex; justify-content: space-between; align-items: end; gap: 40px; position: relative; } .page-hero h1 { font-size: clamp(38px, 4.6vw, 68px); letter-spacing: -1.5px; line-height: 1.4; } .page-hero .lead { max-width: 620px; } .page-hero.slim h1 { font-size: clamp(30px, 3.4vw, 46px); } .hv-icon { width: 170px; height: 170px; border-radius: 40px; background: var(--pink); color: var(--ink); display: grid; place-items: center; flex: none; transform: rotate(-6deg); animation: floatyIcon 7s ease-in-out infinite; } .hv-icon .icon { width: 80px; height: 80px; } @keyframes floatyIcon { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } } .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; } .crumbs a:hover { color: var(--blue); } .crumbs .separator { margin: 0 6px; opacity: .6; } /* ---------- Services stack (scroll) ---------- */ .stack { display: grid; gap: 28px; } .stack-card { position: sticky; top: calc(var(--header-h) + 20px + var(--n) * 14px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 44px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 -18px 50px -40px #102f6466; transform-origin: center top; transition: transform .4s var(--ease), filter .4s; min-height: 480px; } .stack-card.tone-0 { background: #f3f7ff; } .stack-card.tone-1 { background: var(--peach-soft); } .stack-card.tone-2 { background: #fbf0f6; } .stack-card.tone-3 { background: #f2f6f4; } .stack-num { position: absolute; top: 30px; inset-inline-end: 40px; font-size: 64px; font-weight: 900; color: #152b3612; line-height: 1; } .stack-card h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 6px; } .stack-tag { font-weight: 700; color: var(--blue); } .stack-copy > p:not(.stack-tag) { color: var(--muted); line-height: 2; max-width: 520px; } .stack-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 4.6; max-height: 420px; } .stack-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; } .editing .edit-timeline { position: absolute; inset-inline: 16px; bottom: 16px; height: 34px; background: #152b36cc; border-radius: 10px; display: flex; gap: 4px; padding: 6px; backdrop-filter: blur(6px); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease); } .edit-timeline i { flex: 1; border-radius: 4px; background: #c7dafa; } .edit-timeline i:nth-child(2) { background: #e8cae3; flex: 1.6; } .edit-timeline i:nth-child(3) { background: #e8ccb9; } .edit-timeline b { position: absolute; top: 3px; bottom: 3px; width: 2px; background: #fff; inset-inline-start: 8px; } .editing:hover .edit-timeline, .stack-card.active .edit-timeline { opacity: 1; transform: none; } .editing:hover .edit-timeline b, .stack-card.active .edit-timeline b { animation: scan 3s linear infinite; } .editing:hover img, .stack-card.active .stack-media img { transform: scale(1.05); filter: contrast(1.05) saturate(1.15); } @keyframes scan { from { inset-inline-start: 8px; } to { inset-inline-start: calc(100% - 10px); } } .ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; } .ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.8; } .ticks .icon { color: var(--blue); margin-top: 4px; } /* Behind the scenes: controlled horizontal scroll */ .hscroll { position: relative; } .hscroll-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 30%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: thin; overscroll-behavior-x: contain; } .bts-card { scroll-snap-align: start; background: var(--soft); border-radius: 22px; padding: 30px; position: relative; min-height: 280px; } .bts-card > .icon { width: 48px; height: 48px; color: var(--blue); margin-bottom: 30px; } .bts-num { position: absolute; top: 22px; inset-inline-end: 26px; font-size: 44px; font-weight: 900; color: #152b361a; } .bts-card:nth-child(odd) { background: var(--pink); } .bts-card:nth-child(3) { background: var(--blue); color: #fff; } .bts-card:nth-child(3) > .icon { color: #fff; } .bts-card p { font-size: 14.5px; opacity: .85; line-height: 2; } .hscroll-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } .note-card { display: flex; gap: 18px; align-items: flex-start; background: var(--peach-soft); border-radius: 20px; padding: 24px 28px; margin-top: 50px; } .note-card > .icon { width: 30px; height: 30px; color: #c2542b; } .note-card p { margin: 0; line-height: 2; } /* Single service / case */ .service-hero { max-width: var(--max); margin: auto; padding: 40px var(--gutter) 60px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 6%; align-items: center; } .service-hero h1 { font-size: clamp(36px, 4.4vw, 64px); letter-spacing: -1px; } .service-hero-copy > p:not(.lead):not(.eyebrow) { color: var(--muted); line-height: 2; } .service-hero-media { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 600px; } .service-hero-media img, .service-hero-media video { width: 100%; height: 100%; object-fit: cover; } .phone-frame { border: 10px solid var(--ink); border-radius: 40px; max-width: 380px; justify-self: center; aspect-ratio: 9 / 17; } .mask-reveal { animation: maskIn 1.3s .1s var(--ease) both; } @keyframes maskIn { from { clip-path: inset(18% 18% 18% 18% round 60px); } to { clip-path: inset(0 0 0 0 round 26px); } } .service-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; } .info-card { background: var(--soft); border-radius: 22px; padding: 32px; margin-bottom: 24px; } .info-card.pinkish { background: #fbf0f6; } .info-card h2 { font-size: 24px; letter-spacing: 0; } .mini-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .mini-services.four { grid-template-columns: repeat(4, 1fr); } .mini-service { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 22px; padding: 28px; transition: transform .4s var(--ease), box-shadow .4s; background: #fff; } a.mini-service:hover { transform: translateY(-5px); box-shadow: var(--shadow-s); } .mini-service strong { font-size: 18px; } .mini-service > span:not(.svc-icon) { color: var(--muted); font-size: 14px; line-height: 1.9; } /* ---------- About ---------- */ .about-hero { max-width: var(--max); margin: auto; padding: 40px var(--gutter) 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 6%; align-items: center; } .about-hero h1 { font-size: clamp(40px, 5vw, 72px); letter-spacing: -1.5px; } .portrait { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; background: var(--ink); } .portrait img { width: 100%; height: 100%; object-fit: cover; } .js .portrait.lens { clip-path: circle(12% at 50% 50%); transition: clip-path 1.6s var(--ease); opacity: 1; transform: none; } .js .portrait.lens.in { clip-path: circle(75% at 50% 50%); } .portrait-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #dbe6ee; text-align: center; padding: 30px; background: radial-gradient(circle at 30% 20%, #22404e, var(--ink)); } .portrait-placeholder .icon { width: 54px; height: 54px; stroke-width: 1.3; color: var(--peach); } .portrait-placeholder small { opacity: .7; } .viewfinder i { position: absolute; width: 34px; height: 34px; border: 3px solid #ffffffc0; } .viewfinder i:nth-child(1) { top: 20px; left: 20px; border-width: 3px 0 0 3px; } .viewfinder i:nth-child(2) { top: 20px; right: 20px; border-width: 3px 3px 0 0; } .viewfinder i:nth-child(3) { bottom: 20px; left: 20px; border-width: 0 0 3px 3px; } .viewfinder i:nth-child(4) { bottom: 20px; right: 20px; border-width: 0 3px 3px 0; } .about-story .prose { max-width: 780px; margin: auto; } .timeline { list-style: none; margin: 0; padding: 0 0 0; position: relative; max-width: 820px; } .timeline::before, .timeline::after { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 11px; width: 3px; background: #dce7f9; border-radius: 3px; } .timeline::after { background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform 2s var(--ease); } .timeline.in::after { transform: scaleY(1); } .timeline li { position: relative; padding-inline-start: 50px; padding-bottom: 34px; } .timeline li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 8px; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); z-index: 1; } .timeline h3 { margin-bottom: 4px; } .timeline p { color: var(--muted); } .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .value-grid article { background: var(--soft); border-radius: 22px; padding: 30px; } .value-grid article > .icon { width: 44px; height: 44px; color: var(--blue); margin-bottom: 16px; } .value-grid p { color: var(--muted); line-height: 2; } /* ---------- Forms: stepper, fields, success ---------- */ .form-section { display: grid; grid-template-columns: 1fr; gap: 40px; padding-top: 30px; } .form-section.has-aside { grid-template-columns: 1.6fr .9fr; align-items: start; } .stepper, .simple-form { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 38px; box-shadow: var(--shadow-s); position: relative; } .step-dots { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 13px; color: var(--muted); } .step-dots li { display: flex; align-items: center; gap: 8px; } .step-dots li > span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; font-weight: 800; position: relative; transition: background .35s, border-color .35s, color .35s; } .step-dots li > span .icon { position: absolute; width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); stroke-width: 3; } .step-dots li.active { color: var(--ink); font-weight: 700; } .step-dots li.active > span { border-color: var(--blue); color: var(--blue); } .step-dots li.done > span { background: var(--blue); border-color: var(--blue); color: #fff; } .step-dots li.done > span b { opacity: 0; } .step-dots li.done > span .icon { opacity: 1; transform: none; } .form-progress { height: 4px; background: var(--soft); border-radius: 4px; overflow: hidden; margin-bottom: 30px; } .form-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--peach)); width: 0; transition: width .5s var(--ease); } .step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; } .step.active { display: block; animation: stepIn .5s var(--ease) both; } .step.back { animation-name: stepBack; } @keyframes stepIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } @keyframes stepBack { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } [dir="ltr"] .step.active { animation-name: stepBack; } [dir="ltr"] .step.back { animation-name: stepIn; } legend { font-size: 22px; font-weight: 900; margin-bottom: 20px; padding: 0; } legend small { font-size: 14px; font-weight: 500; color: var(--muted); margin-inline-start: 8px; } .option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .option-card { position: relative; border: 1.5px solid var(--line); border-radius: 20px; padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .25s, background .25s, transform .3s var(--ease); } .option-card:hover { border-color: #b9cad6; transform: translateY(-2px); } .option-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .option-card.is-checked { border-color: var(--blue); background: #f3f7ff; } .option-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; } .option-card:focus-within:not(:has(:focus-visible)) { outline: none; } .option-card .svc-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 8px; } .option-card .svc-icon .icon { width: 22px; height: 22px; } .option-card small { color: var(--muted); line-height: 1.8; } .option-card::after { content: ""; position: absolute; top: 18px; inset-inline-end: 18px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #fff center / 12px no-repeat; transition: all .25s; } .option-card.is-checked::after { border-color: var(--blue); background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); } .chips-input { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .chips-input label { position: relative; } .chips-input input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .chips-input span { display: inline-block; border: 1.5px solid var(--line); border-radius: 30px; padding: 8px 18px; font-size: 14px; transition: all .25s; cursor: pointer; } .chips-input input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); } .chips-input input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; } .label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 10px; } .label small, .field label small { font-weight: 400; color: var(--muted); } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .field { margin: 0 0 18px; } .field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 8px; } .field input, .field textarea, .field select, .wc-wrap input.input-text, .wc-wrap textarea, .wc-wrap select { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 16px; background: #fff; transition: border-color .25s, box-shadow .25s; font-size: 15px; line-height: 1.6; } .field input:focus, .field textarea:focus, .wc-wrap input.input-text:focus, .wc-wrap textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px #1963de1f; outline: 0; } .field .invalid, .field input[aria-invalid="true"] { border-color: var(--rec); } .form-hint { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted); background: var(--soft); padding: 12px 16px; border-radius: 14px; } .form-hint .icon { color: var(--blue); margin-top: 3px; } .form-error { color: #b3261e; background: #fdecea; padding: 12px 16px; border-radius: 12px; font-size: 14px; margin: 16px 0 0; } .form-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; } .form-nav [data-next], .form-nav [data-submit] { margin-inline-start: auto; } .is-busy [data-submit] { opacity: .6; pointer-events: none; } .day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; } .day-grid label, .slot-grid label { position: relative; } .day-grid input, .slot-grid input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .day-grid span { display: grid; text-align: center; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 6px; line-height: 1.5; transition: all .25s; cursor: pointer; } .day-grid span small { font-size: 12px; color: var(--muted); } .day-grid span b { font-size: 24px; } .day-grid input:checked + span, .slot-grid input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; } .day-grid input:checked + span small { color: #dce8ff; } .day-grid input:focus-visible + span, .slot-grid input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; } .day-grid .full span { opacity: .45; text-decoration: line-through; cursor: not-allowed; } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .slot-grid span { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; font-weight: 700; direction: ltr; transition: all .25s; cursor: pointer; } .slot-grid input:disabled + span { opacity: .45; text-decoration: line-through; cursor: not-allowed; background: var(--soft); } .success { text-align: start; animation: successIn .7s var(--ease) both; } .success:not([hidden]) { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; } .success h2 { font-size: 28px; } @keyframes successIn { from { opacity: 0; transform: scale(.96) translateY(14px); } to { opacity: 1; transform: none; } } .cal-card { width: 150px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); flex: none; background: #fff; text-align: center; animation: calFlip .9s .2s var(--ease) both; transform-origin: top; } .cal-head { background: var(--rec); color: #fff; padding: 8px; font-weight: 800; } .cal-body { padding: 10px 10px 16px; display: grid; } .cal-body b { font-size: 54px; line-height: 1.2; } .cal-body span { color: var(--muted); font-size: 14px; } @keyframes calFlip { from { transform: perspective(600px) rotateX(-70deg); opacity: 0; } to { transform: none; opacity: 1; } } .msg-card { display: flex; gap: 12px; align-items: flex-end; max-width: 560px; } .msg-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; font: 900 18px/46px Vazirmatn, Tahoma, sans-serif; text-align: center; flex: none; direction: ltr; letter-spacing: -2px; } .bubble { background: var(--soft); border-radius: 22px 22px 22px 6px; padding: 18px 22px; animation: bubbleIn .6s .15s var(--ease) both; } [dir="rtl"] .bubble { border-radius: 22px 22px 6px 22px; } .bubble p { margin: 0 0 8px; } .bubble small { color: var(--muted); } @keyframes bubbleIn { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } } .stepper.is-done > :not(.success):not(.hp):not(input) { display: none; } .simple-form.is-done > :not(.success):not(.hp):not(input) { display: none; } .form-aside { position: sticky; top: calc(var(--header-h) + 20px); background: var(--ink); color: #fff; border-radius: 28px; padding: 34px; } .form-aside h2 { font-size: 24px; letter-spacing: 0; } .mini-steps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; color: #c5d3dc; } .mini-steps li { display: flex; gap: 12px; line-height: 1.9; } .mini-steps b { width: 28px; height: 28px; border-radius: 50%; background: var(--peach); color: var(--ink); display: grid; place-items: center; flex: none; } .form-aside .button.ghost { color: #fff; border-color: #69818e; width: 100%; } /* ---------- Contact page ---------- */ .contact-page { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; padding-top: 30px; } .channels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .channel { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 22px; padding: 24px; transition: transform .35s var(--ease), box-shadow .35s; } .channel:hover { transform: translateY(-4px); box-shadow: var(--shadow-s); } .channel > .icon { width: 30px; height: 30px; color: var(--blue); margin-bottom: 10px; } .channel.wa { background: #eafaf0; border-color: #cdeedb; } .channel.wa > .icon { color: #1f8a4c; } .channel span { color: var(--muted); font-size: 13.5px; } .simple-form h2 { font-size: 30px; } .en-contact { max-width: 820px; } /* ---------- Course page ---------- */ .course-hero { max-width: var(--max); margin: auto; padding: 40px var(--gutter) 40px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 6%; align-items: center; } .course-hero h1 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -1px; } .course-hero-media { position: relative; } .trailer.big { display: block; width: 100%; border: 0; padding: 0; border-radius: 26px; overflow: hidden; position: relative; aspect-ratio: 4 / 4.4; background: var(--soft); box-shadow: var(--shadow); } .trailer.big img { width: 100%; height: 100%; object-fit: cover; transition: transform 5s linear; } .trailer.big .play-dot { width: 80px; height: 80px; margin: -40px 0 0 -40px; } .trailer.big .play-dot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #ffffffa0; animation: recPulse 2.6s ease-out infinite; } .trailer-label { position: absolute; bottom: 20px; inset-inline-start: 20px; background: #fff; border-radius: 30px; padding: 6px 16px; font-weight: 700; font-size: 13.5px; z-index: 2; } .course-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; padding-top: 30px; } .course-main > section { margin-bottom: 30px; } .curriculum { border: 1px solid var(--line); border-radius: 26px; padding: 32px; } .curriculum h2, .course-main .info-card h2 { font-size: 26px; letter-spacing: 0; } .edit-track { display: flex; gap: 4px; height: 58px; background: #0f2531; border-radius: 14px; padding: 8px; position: relative; margin-top: 18px; direction: rtl; } [dir="ltr"] .edit-track { direction: ltr; } .clip-btn { flex: var(--w) 1 0; min-width: 22px; border: 0; border-radius: 7px; background: #c7dafa; color: var(--ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; transform-origin: bottom; animation: clipIn .5s calc(var(--i) * 60ms) var(--ease) both; transition: filter .2s, transform .25s var(--ease), box-shadow .25s; } .clip-btn:nth-child(3n + 2) { background: #e8cae3; } .clip-btn:nth-child(3n) { background: #e8ccb9; } .clip-btn.kind-project { background: var(--peach); } .clip-btn:hover { filter: brightness(1.06); transform: translateY(-2px); } .clip-btn[aria-selected="true"] { box-shadow: 0 0 0 3px #fff; } @keyframes clipIn { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } } .track-head { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--rec); inset-inline-start: var(--head, 8px); transition: inset-inline-start .45s var(--ease); pointer-events: none; } .track-head::before { content: ""; position: absolute; top: -4px; left: -5px; width: 12px; height: 12px; border-radius: 3px; background: var(--rec); } .track-ruler { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 8px 2px 18px; } .lesson-panel { background: var(--soft); border-radius: 18px; padding: 22px 24px; animation: fadeUp .45s var(--ease) both; } .lesson-panel h3 { font-size: 19px; margin: 4px 0 6px; } .lesson-panel p { color: var(--muted); } .lesson-no { font-size: 13px; color: var(--blue); font-weight: 700; } .locked { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 14px; } .all-lessons { margin-top: 18px; } .all-lessons summary { cursor: pointer; font-weight: 700; color: var(--blue); } .all-lessons ol { line-height: 2.2; padding-inline-start: 22px; } .buy-box { position: sticky; top: calc(var(--header-h) + 20px); border-radius: 26px; background: var(--ink); color: #fff; padding: 30px; } .buy-box .eyebrow { color: #bed0de; } .buy-price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; } .buy-price .price { font-size: 30px; } .buy-price .price.free { color: #8ff0b5; } .js .price-reveal .buy-price { clip-path: inset(0 0 100% 0); transform: translateY(12px); transition: clip-path 1s var(--ease), transform 1s var(--ease); } .js .price-reveal.in .buy-price { clip-path: inset(-20% -20% -20% -20%); transform: none; } .buy-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; color: #c5d3dc; font-size: 14.5px; } .buy-list li { display: flex; gap: 10px; align-items: center; } .buy-box .button { width: 100%; } .buy-box form.cart { margin: 0; } .buy-note { font-size: 12.5px; color: #a1b2bd; margin: 14px 0 0; line-height: 1.9; } .buy-bar { display: none; } /* Pinned "from zero to execution" */ .pinned { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6%; align-items: start; } .pinned-media { position: sticky; top: calc(var(--header-h) + 30px); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--ink); } .pinned-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.2s var(--ease); } .pinned-frame.active { opacity: 1; transform: none; } .pinned-frame img { width: 100%; height: 100%; object-fit: cover; } .pinned-frame figcaption { position: absolute; bottom: 18px; inset-inline-start: 18px; background: #152b36c0; color: #fff; padding: 6px 14px; border-radius: 30px; font-size: 13px; display: flex; gap: 8px; align-items: center; backdrop-filter: blur(6px); } .pinned-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s; } .pinned-step.active { opacity: 1; } .pinned-step h3 { font-size: clamp(26px, 2.6vw, 38px); } .pinned-step p { color: var(--muted); line-height: 2; max-width: 460px; font-size: 16.5px; } .module-progress { display: flex; align-items: center; gap: 10px; max-width: 320px; } .module-progress span { flex: 1; height: 5px; border-radius: 5px; background: var(--soft); position: relative; overflow: hidden; } .module-progress span::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform 1.2s var(--ease); } [dir="ltr"] .module-progress span::after { transform-origin: left; } .module-progress .icon { color: #fff; background: var(--line); border-radius: 50%; padding: 4px; width: 26px; height: 26px; transition: background .4s .9s; stroke-width: 3; } .pinned-step.active .module-progress span::after, .pinned-step.seen .module-progress span::after { transform: scaleX(1); } .pinned-step.active .module-progress .icon, .pinned-step.seen .module-progress .icon { background: var(--ok); } /* Quiz */ .quiz { max-width: 760px; background: var(--soft); border-radius: 28px; padding: 36px; position: relative; overflow: hidden; } .quiz-progress { height: 6px; background: #fff; border-radius: 6px; overflow: hidden; } .quiz-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--peach)); transition: width .5s var(--ease); } .quiz-count { font-size: 13px; color: var(--muted); margin: 10px 0 18px; } .quiz-q { border: 0; margin: 0; padding: 0; display: none; } .quiz-q.active { display: block; animation: stepIn .45s var(--ease) both; } .quiz-options { display: grid; gap: 10px; } .quiz-options button { text-align: start; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; padding: 16px 20px; font-size: 15.5px; transition: border-color .2s, transform .25s var(--ease), background .2s; } .quiz-options button:hover { border-color: var(--blue); transform: translateX(-4px); } [dir="ltr"] .quiz-options button:hover { transform: translateX(4px); } .quiz-result { animation: successIn .7s var(--ease) both; } .quiz-result h3 { font-size: 34px; } .result-badge { width: 76px; height: 76px; border-radius: 50%; background: var(--peach); display: grid; place-items: center; margin-bottom: 14px; animation: pop .8s var(--ease) both; } .result-badge .icon { width: 36px; height: 36px; } @keyframes pop { 0% { transform: scale(0) rotate(-60deg); } 70% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } } /* ---------- Lesson page ---------- */ .lesson-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; padding-top: 30px; } .lesson-main h1 { font-size: clamp(28px, 3vw, 42px); } .back-link { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 18px; } .back-link:hover { color: var(--blue); } .player-wrap { margin-bottom: 28px; } .lesson-video, .lesson-embed { width: 100%; border-radius: 20px; background: #000; display: block; aspect-ratio: 16 / 9; } .lesson-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 20px; } .lesson-placeholder { aspect-ratio: 16 / 9; border-radius: 20px; background: radial-gradient(circle at 30% 20%, #22404e, var(--ink)); color: #dbe6ee; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 24px; } .lesson-placeholder .icon { width: 48px; height: 48px; color: var(--peach); } .lesson-placeholder p { margin: 0; max-width: 360px; font-size: 14.5px; } .lesson-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 30px; } .button.is-done { color: var(--ok); border-color: #b9e2c9; } .gate { background: var(--soft); border-radius: 26px; padding: 44px; text-align: center; display: grid; justify-items: center; gap: 6px; } .gate > .icon { width: 44px; height: 44px; color: var(--blue); } .gate h2 { font-size: 24px; letter-spacing: 0; } .lesson-side { position: sticky; top: calc(var(--header-h) + 20px); border: 1px solid var(--line); border-radius: 24px; padding: 24px; max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; } .lesson-side h2 { font-size: 20px; letter-spacing: 0; } .progress { height: 8px; border-radius: 8px; background: var(--soft); overflow: hidden; margin: 10px 0 6px; } .progress span { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, var(--blue), #4f8df0); border-radius: 8px; animation: grow 1.2s var(--ease) both; } @keyframes grow { from { width: 0; } } .outline { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; } .outline a, .outline span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.6; } .outline a:hover { background: var(--soft); } .outline b { width: 26px; height: 26px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 12px; flex: none; } .outline .current a { background: var(--blue-soft); font-weight: 700; } .outline .done b { background: var(--ok); color: #fff; } .outline .done b .icon { width: 14px; height: 14px; stroke-width: 3; } .outline span { color: var(--muted); } .outline span .icon-lock { margin-inline-start: auto; width: 16px; } /* ---------- Modal ---------- */ .modal { border: 0; border-radius: 26px; padding: 36px; width: min(760px, 92vw); max-height: 90vh; overflow: auto; color: var(--ink); box-shadow: 0 25px 90px #0004; } .modal[open] { animation: modalIn .45s var(--ease) both; } .modal::backdrop { background: #102c4270; backdrop-filter: blur(6px); } .modal h2 { font-size: 28px; letter-spacing: 0; } .modal .lesson-placeholder, .modal video, .modal .lesson-embed { margin-bottom: 18px; } .modal-close { position: absolute; top: 16px; inset-inline-end: 16px; } @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } } /* ---------- Blog ---------- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; } .post-card { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: transform .4s var(--ease), box-shadow .4s; } .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-s); } .post-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); } .post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .post-card:hover .post-media img { transform: scale(1.06); } .post-body { padding: 22px 24px; } .post-body h2 { font-size: 20px; letter-spacing: 0; line-height: 1.6; } .post-body h2 a:hover { color: var(--blue); } .post-body p { color: var(--muted); font-size: 14.5px; } .post-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .img-fallback { display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px; background: linear-gradient(135deg, var(--pink), var(--blue-soft)); color: var(--ink); } .img-fallback .icon { width: 44px; height: 44px; opacity: .5; } .article { max-width: 820px; margin: auto; padding: 40px var(--gutter) 40px; } .article-head h1 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -1px; } .article-cover { margin: 0 0 36px; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; } .article-cover img { width: 100%; height: 100%; object-fit: cover; } .prose { font-size: 17px; line-height: 2.1; } .prose h2 { font-size: 28px; letter-spacing: 0; margin-top: 1.6em; } .prose h3 { font-size: 21px; margin-top: 1.4em; } .prose ul, .prose ol { padding-inline-start: 1.4em; } .prose li { margin-bottom: .4em; } .prose blockquote { margin: 1.5em 0; padding: 18px 24px; border-inline-start: 4px solid var(--peach); background: var(--peach-soft); border-radius: 12px; } .prose img { border-radius: 16px; } .article-cta { display: flex; gap: 20px; align-items: center; background: var(--pink); border-radius: 24px; padding: 28px; margin-top: 40px; flex-wrap: wrap; } .article-cta .svc-icon { background: #fff; margin: 0; } .article-cta > div { flex: 1; min-width: 220px; } .article-cta h2 { font-size: 22px; letter-spacing: 0; margin-bottom: 4px; } .article-cta p { margin: 0; color: var(--ink-2); } .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 40px; } .pagination .page-numbers { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); } .pagination .current { background: var(--ink); color: #fff; } .search-form { display: flex; gap: 8px; max-width: 480px; } .search-form input[type="search"] { flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; } .search-form button, .search-form input[type="submit"] { border: 0; background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 18px; } /* ---------- Account, auth, WooCommerce pages ---------- */ .wc-page { padding-top: 20px; } .wc-wrap { max-width: 1100px; } .auth { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; } .auth-intro { background: var(--pink); border-radius: 26px; padding: 34px; } .auth-intro .svc-icon { background: #fff; } .auth-intro h2 { font-size: 30px; } .auth-box { border: 1px solid var(--line); border-radius: 26px; padding: 32px; box-shadow: var(--shadow-s); } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border-radius: 14px; padding: 5px; margin-bottom: 24px; } .auth-tabs button { border: 0; background: transparent; border-radius: 10px; padding: 10px; font-weight: 700; transition: background .25s, box-shadow .25s; } .auth-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 2px 10px #0000000f; } .auth-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; } .auth-row a { color: var(--blue); } .check { display: inline-flex; gap: 8px; align-items: center; } .woocommerce-privacy-policy-text { font-size: 13px; color: var(--muted); } .woocommerce-account .wc-wrap > .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; } .woocommerce-account:not(.logged-in) .wc-wrap > .woocommerce { display: block; } .woocommerce-account .wc-wrap > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; } .woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; } .auth-box form.login, .auth-box form.register { border: 0; padding: 0; margin: 0; border-radius: 0; } .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; position: sticky; top: calc(var(--header-h) + 20px); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: var(--soft); border-radius: 20px; display: grid; gap: 2px; } .woocommerce-MyAccount-navigation a { display: block; padding: 11px 16px; border-radius: 12px; font-size: 15px; transition: background .2s; } .woocommerce-MyAccount-navigation a:hover { background: #fff; } .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: #fff; } .woocommerce-MyAccount-content { float: none !important; width: auto !important; min-width: 0; } .dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .dash-card { border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 4px; transition: transform .35s var(--ease), box-shadow .35s; } .dash-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-s); } .dash-card > .icon { width: 28px; height: 28px; color: var(--blue); margin-bottom: 8px; } .dash-card span { color: var(--muted); font-size: 13.5px; } .my-courses { display: grid; gap: 16px; } .my-course { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 20px; padding: 16px; } .my-course-img { border-radius: 14px; overflow: hidden; aspect-ratio: 1; } .my-course-img img { width: 100%; height: 100%; object-fit: cover; } .my-course h3 { font-size: 18px; margin: 0; } .my-course p { font-size: 13px; color: var(--muted); margin: 0 0 10px; } .empty-state { text-align: center; padding: 40px; background: var(--soft); border-radius: 24px; display: grid; justify-items: center; gap: 8px; } .empty-state > .icon { width: 44px; height: 44px; color: var(--blue); } .panel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .req { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px; } .req-type { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; } .req small { grid-column: 2 / 4; color: var(--muted); } .badge { font-size: 12.5px; padding: 3px 12px; border-radius: 20px; background: var(--soft); white-space: nowrap; } .badge.st-new { background: #fff1d6; color: #7a4d00; } .badge.st-confirmed, .badge.st-progress { background: var(--blue-soft); color: #123d8f; } .badge.st-done { background: #dff3e4; color: #1c5c2e; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { list-style: none; background: var(--soft) !important; border: 0 !important; border-inline-start: 4px solid var(--blue) !important; border-radius: 14px; padding: 16px 20px !important; margin: 0 0 24px !important; color: var(--ink) !important; } .woocommerce-error { border-inline-start-color: var(--rec) !important; background: #fdecea !important; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; } .woocommerce-message .button, .woocommerce-info .button { float: none !important; margin-inline-start: 12px; } body .woocommerce a.button, body .woocommerce button.button, body .woocommerce input.button, body .woocommerce #respond input#submit { background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 20px; font-weight: 700; font-family: inherit; } body .woocommerce a.button.primary, body .woocommerce button.button.primary { background: var(--blue); } body .woocommerce a.button.ghost { background: transparent; color: var(--ink); border: 1px solid #cdd8e0; } body .woocommerce button.button.alt, body .woocommerce a.button.alt, body #place_order { background: var(--blue) !important; color: #fff !important; border-radius: 14px; padding: 16px 24px; font-size: 16px; width: 100%; } .woocommerce table.shop_table { border-radius: 18px; border-color: var(--line); border-collapse: separate; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px; } .woocommerce form .form-row label { font-weight: 700; font-size: 14.5px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px; } .woocommerce-checkout #customer_details, .woocommerce-checkout .col2-set { width: 100%; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; } .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; } .woocommerce-checkout form.checkout > * { grid-column: 1 / -1; } .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-checkout form.checkout #order_review_heading, .woocommerce-checkout form.checkout #order_review { grid-column: 2; align-self: start; } .woocommerce-checkout form.checkout #order_review_heading { grid-row: 1; } .woocommerce-checkout form.checkout #order_review { grid-row: 2; background: var(--soft); border-radius: 22px; padding: 22px; } .woocommerce-checkout #payment { background: #fff !important; border-radius: 18px !important; } .woocommerce-checkout #payment div.payment_box { background: var(--soft) !important; border-radius: 12px; } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce ul.order_details { padding: 0; } .woocommerce-checkout #billing_email, .woocommerce-checkout #billing_phone { direction: ltr; text-align: right; } .woocommerce-checkout .woocommerce-billing-fields h3, #order_review_heading { font-size: 22px; letter-spacing: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--soft); margin-top: 40px; } .footer-grid { max-width: var(--max); margin: auto; padding: 70px var(--gutter) 40px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; } .footer-brand p { color: var(--muted); font-size: 14px; line-height: 2; max-width: 320px; margin-top: 16px; } .footer-brand .brand-mark { font-size: 38px; } .socials { display: flex; gap: 8px; } .footer-title { font-size: 15px; letter-spacing: 0; margin-bottom: 16px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; } .site-footer ul a:hover { color: var(--blue); } .contact-lines li { display: flex; gap: 10px; align-items: center; } .contact-lines .icon { color: var(--blue); } .footer-cta { background: var(--ink); color: #fff; border-radius: 22px; padding: 26px; display: grid; gap: 14px; align-content: start; } .footer-cta .footer-title { font-size: 19px; line-height: 1.6; margin: 0; } .footer-cta .button { justify-content: space-between; } .footer-cta .text-link { color: #c5d3dc; border-color: #69818e; justify-self: start; } .footer-bottom { max-width: var(--max); margin: auto; padding: 20px var(--gutter) 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); flex-wrap: wrap; } .footer-bottom ul { display: flex; gap: 18px; font-size: 13px; } .footer-bottom .chip { font-size: 12px; padding: 5px 12px; } .wa-fab { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 40; background: #1f8a4c; color: #fff; border-radius: 40px; padding: 12px 18px 12px 16px; display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; box-shadow: 0 14px 30px -12px #1f8a4ccc; transition: transform .3s var(--ease), padding .3s; animation: fadeUp .6s 1.5s var(--ease) both; } .wa-fab:hover { transform: translateY(-3px); } .wa-fab .icon { width: 24px; height: 24px; } /* ---------- 404 ---------- */ .not-found { text-align: center; padding-top: 80px; } .nf-code { font-size: clamp(90px, 16vw, 200px); font-weight: 900; line-height: 1; display: flex; justify-content: center; align-items: center; gap: 18px; margin: 0 0 20px; color: var(--ink); } .nf-code .rec { width: .5em; height: .5em; } /* ---------- Motion off ---------- */ body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } body.no-motion [data-reveal], body.no-motion .split-words .w, body.no-motion .chain span { opacity: 1 !important; transform: none !important; } body.no-motion .portrait.lens { clip-path: none !important; } body.no-motion .line-steps::after { transform: scaleX(1); } body.no-motion .timeline::after { transform: none; } body.no-motion .price-reveal .buy-price { clip-path: none !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js [data-reveal], .split-words .w, .chain span { opacity: 1 !important; transform: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .main-nav ul { gap: 22px; } .footer-grid { grid-template-columns: 1fr 1fr; } .home-reels .reel-wall { grid-template-columns: repeat(3, 1fr); } .mini-services.four { grid-template-columns: 1fr 1fr; } } @media (max-width: 980px) { :root { --header-h: 70px; } .main-nav, .nav-cta { display: none; } .menu-toggle { display: inline-grid; } .hero { grid-template-columns: 1fr; gap: 50px; padding-top: 20px; min-height: 0; } .hero h1 { font-size: 54px; } .composition { padding: 0 20px; } .scene-image { height: 340px; } .floating-sticker { right: -12px; width: 88px; height: 88px; font-size: 15px; } .floating-sticker b { font-size: 18px; } .format-tag { display: none; } .editing-label { left: -12px; } .section { padding: 70px var(--gutter); } .learn, .service-hero, .about-hero, .course-hero, .contact-page, .pinned, .auth, .form-section.has-aside { grid-template-columns: 1fr; } .stack-card { grid-template-columns: 1fr; padding: 30px; min-height: 0; } .stack-media { max-height: 300px; aspect-ratio: 16 / 10; } .course-layout, .lesson-layout { grid-template-columns: 1fr; } .buy-box { position: static; } .buy-bar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 41; background: #fffffff0; backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 12px var(--gutter); justify-content: space-between; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .4s var(--ease); } .buy-bar.show { transform: none; } .buy-bar .sample-tag { display: none; } .single-product .wa-fab { bottom: 86px; } .lesson-side { position: static; max-height: none; } .pinned-media { position: relative; top: 0; aspect-ratio: 16 / 11; } .pinned-step { min-height: 0; padding: 26px 0; opacity: 1; } .form-aside { position: static; } .woocommerce-account .wc-wrap > .woocommerce { grid-template-columns: 1fr; } .woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; } .woocommerce-MyAccount-navigation { position: static; } .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; } .woocommerce-MyAccount-navigation a { white-space: nowrap; } .woocommerce-checkout form.checkout { display: block; } .hv-icon { width: 120px; height: 120px; border-radius: 30px; } .hv-icon .icon { width: 54px; height: 54px; } .value-grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { :root { --gutter: 6%; } .header-inner { padding-block: 12px; gap: 10px; } .brand { font-size: 17px; } .brand-mark { font-size: 36px; } .brand small { display: none; } .header-actions .lang { display: none; } .proto-bar { font-size: 11px; padding: 5px 12px; } .hero { padding: 20px 7% 60px; gap: 40px; } .hero h1 { font-size: 46px; line-height: 1.4; } .lead { font-size: 16px; } .studio { margin: 0 5px; padding: 12px; } .scene-image { height: 330px; } .composition { padding: 0 30px; } .ribbon { font-size: 17px; padding: 16px 0; } .section-heading { display: block; margin-bottom: 28px; } .section-heading > p { margin-top: 12px; } .service-grid, .contact-band, .service-cols, .option-grid, .field-grid, .channels, .dash-cards, .mini-services { grid-template-columns: 1fr; } .path-card { padding: 28px; } .path-card h3 { font-size: 36px; } .path-icon { width: 84px; height: 84px; border-radius: 26px; top: 24px; inset-inline-end: 24px; } .path-icon .icon { width: 54px; height: 54px; } .comparison { height: 370px; } .steps { grid-template-columns: 1fr 1fr; gap: 26px 18px; margin-top: 34px; } .line-steps::before, .line-steps::after { display: none; } .steps li { border-top: 3px solid #dce7f9; } .steps.in li { border-color: var(--blue); transition: border-color .6s, opacity .6s; } .steps li::before { display: none; } .contact-band { padding: 36px 7%; gap: 20px; } .home-reels .reel-wall, .reel-wall { grid-template-columns: 1fr 1fr; gap: 10px; } .reel-info strong { font-size: 14px; } .reel-play { width: 42px; height: 42px; margin: -21px 0 0 -21px; } .page-hero { flex-direction: column-reverse; align-items: flex-start; padding-top: 24px; } .page-hero.courses-hero { flex-direction: column; align-items: stretch; } .hv-icon { width: 84px; height: 84px; border-radius: 24px; } .hv-icon .icon { width: 38px; height: 38px; } .stepper, .simple-form { padding: 24px 20px; border-radius: 22px; } .step-dots { font-size: 0; } .step-dots li { justify-content: center; } legend { font-size: 19px; } .stack-card { padding: 24px; top: calc(var(--header-h) + 10px + var(--n) * 10px); } .stack-num { font-size: 44px; top: 20px; inset-inline-end: 24px; } .hscroll-track { grid-auto-columns: 78%; } .quiz { padding: 24px 20px; } .curriculum { padding: 22px 18px; } .edit-track { height: 50px; } .my-course { grid-template-columns: 80px 1fr; } .req { grid-template-columns: auto 1fr; } .req .badge { grid-column: 2; justify-self: start; } .wa-fab span { display: none; } .wa-fab { padding: 14px; bottom: 16px; inset-inline-start: 16px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; padding-top: 50px; } .footer-bottom { justify-content: center; text-align: center; } .desktop { display: none; } .stats dd { font-size: 26px; } .stats div { min-width: 0; flex: 1; padding: 12px 14px; } .gate { padding: 28px 20px; } .modal { padding: 26px 20px; } .auth-box, .auth-intro { padding: 24px 20px; } } /* ========================================================================== Round 2 additions ========================================================================== */ /* ---------- Page-hero visuals (one per page) ---------- */ .hero-visual { position: relative; width: 300px; height: 240px; flex: none; } .hero-visual .anim { stroke-width: 2.1; } .hero-visual.in .anim, .hero-visual.in .anim * { animation-iteration-count: infinite !important; } .hv-icon { position: absolute; inset: 20px 60px; border-radius: 40px; background: var(--pink); display: grid; place-items: center; transform: rotate(-6deg); animation: floatyIcon 7s ease-in-out infinite; } .hv-icon .icon { width: 80px; height: 80px; } /* services: 2×2 animated tiles */ .hv-services { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 250px; height: 250px; } .hv-tile { border-radius: 30px; display: grid; place-items: center; animation: tileIn .8s var(--ease) both; } .hv-tile .icon { width: 54px; height: 54px; } .hv-tile.t0 { background: var(--blue); color: #fff; transform: rotate(-4deg); } .hv-tile.t1 { background: var(--peach); animation-delay: .08s; } .hv-tile.t2 { background: var(--pink); animation-delay: .16s; } .hv-tile.t3 { background: var(--ink); color: #fff; transform: rotate(4deg); animation-delay: .24s; } .hero-visual.in .hv-tile.t1 .anim { animation-delay: .6s !important; } .hero-visual.in .hv-tile.t2 .anim { animation-delay: 1.2s !important; } .hero-visual.in .hv-tile.t3 .anim { animation-delay: 1.8s !important; } @keyframes tileIn { from { opacity: 0; transform: scale(.6) rotate(-12deg); } } /* portfolio / courses: fanned reel frames */ .hv-portfolio, .hv-courses { width: 320px; height: 290px; } .hv-reel { position: absolute; top: 10px; width: 150px; aspect-ratio: 9 / 15; border-radius: 20px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow); background: var(--soft); transition: transform .6s var(--ease); } .hv-reel img { width: 100%; height: 100%; object-fit: cover; } .hv-reel i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #ffffffe0; display: grid; place-items: center; } .hv-reel i .icon { width: 16px; height: 16px; } .hv-reel.r0 { inset-inline-start: 0; transform: rotate(-9deg) translateY(18px); } .hv-reel.r1 { inset-inline-start: 85px; z-index: 2; animation: reelBob 5s ease-in-out infinite; } .hv-reel.r2 { inset-inline-start: 170px; transform: rotate(9deg) translateY(18px); } .hero-visual:hover .hv-reel.r0 { transform: rotate(-14deg) translate(-16px, 10px); } .hero-visual:hover .hv-reel.r2 { transform: rotate(14deg) translate(16px, 10px); } @keyframes reelBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* booking: tear-off calendar with today's Jalali date */ .hv-booking { width: 260px; height: 250px; } .hv-cal { position: absolute; inset: 10px 40px 0 20px; background: #fff; border-radius: 28px; box-shadow: var(--shadow); display: grid; justify-items: center; align-content: start; overflow: hidden; transform: rotate(-4deg); } .hv-cal-head { width: 100%; text-align: center; background: var(--rec); color: #fff; padding: 12px; font-size: 20px; } .hv-cal strong { font-size: 92px; line-height: 1.25; font-weight: 900; } .hv-cal small { color: var(--muted); font-size: 16px; margin-top: -10px; } .hv-cal-page { position: absolute; inset: 52px 0 0; background: #fff; transform-origin: top; animation: pageFlip 4.5s var(--ease) 1s infinite; box-shadow: 0 -2px 0 #0000000f; } @keyframes pageFlip { 0%, 55% { transform: rotateX(90deg); opacity: 0; } 65% { transform: rotateX(0); opacity: 1; } 80% { transform: rotateX(0) translateY(0); opacity: 1; } 100% { transform: rotateX(0) translateY(120%); opacity: 0; } } .hv-pin { position: absolute; bottom: -6px; inset-inline-end: 0; width: 86px; height: 86px; border-radius: 26px; background: var(--peach); display: grid; place-items: center; transform: rotate(8deg); } .hv-pin .icon { width: 44px; height: 44px; } /* consult: chat bubbles */ .hv-consult { width: 300px; height: 230px; } .hv-bubble { position: absolute; background: #fff; border-radius: 22px 22px 22px 6px; box-shadow: var(--shadow-s); padding: 14px 18px; font-size: 14px; line-height: 1.8; max-width: 230px; } .hv-bubble.b1 { top: 10px; inset-inline-end: 0; border-radius: 22px 22px 6px 22px; background: var(--blue); color: #fff; animation: bubbleIn .7s .3s var(--ease) both; } .hv-bubble.b2 { top: 110px; inset-inline-start: 30px; display: flex; gap: 6px; animation: bubbleIn .7s .9s var(--ease) both; } .hv-bubble.b2 i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); animation: typing 1.2s ease-in-out infinite; } .hv-bubble.b2 i:nth-child(2) { animation-delay: .15s; } .hv-bubble.b2 i:nth-child(3) { animation-delay: .3s; } @keyframes typing { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } } .hv-mic { position: absolute; bottom: 0; inset-inline-end: 20px; width: 90px; height: 90px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; } .hv-mic .icon { width: 44px; height: 44px; } /* contact: ringing phone */ .hv-contact { width: 240px; height: 240px; } .hv-ring { position: absolute; inset: 0; display: grid; place-items: center; } .hv-ring i { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--blue); opacity: 0; animation: ringOut 2.4s ease-out infinite; } .hv-ring i:nth-child(2) { animation-delay: .8s; } .hv-ring i:nth-child(3) { animation-delay: 1.6s; } .hv-ring .hv-icon { position: relative; inset: auto; width: 120px; height: 120px; border-radius: 50%; background: var(--peach); transform: none; animation: none; } .hv-ring .hv-icon .icon { width: 56px; height: 56px; } @keyframes ringOut { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(2); opacity: 0; } } /* faq: floating question bubbles */ .hv-faq { width: 260px; height: 230px; } .hv-q { position: absolute; display: grid; place-items: center; border-radius: 50%; font-weight: 900; line-height: 1; animation: floatQ 6s ease-in-out infinite; } .hv-q.q1 { width: 130px; height: 130px; font-size: 76px; background: var(--blue); color: #fff; top: 0; inset-inline-end: 20px; } .hv-q.q2 { width: 88px; height: 88px; font-size: 48px; background: var(--peach); bottom: 10px; inset-inline-end: 130px; animation-delay: -2s; } .hv-q.q3 { width: 70px; height: 70px; font-size: 38px; background: var(--pink); bottom: 40px; inset-inline-end: 0; animation-delay: -4s; } @keyframes floatQ { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } } /* blog: magazine stack */ .hv-blog { width: 260px; height: 240px; } .hv-mag { position: absolute; width: 170px; height: 210px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-s); padding: 18px; display: grid; gap: 10px; align-content: start; } .hv-mag b { height: 70px; border-radius: 10px; background: var(--pink); } .hv-mag i { height: 10px; border-radius: 6px; background: var(--soft); } .hv-mag i:last-child { width: 60%; } .hv-mag.m1 { inset-inline-start: 0; top: 20px; transform: rotate(-8deg); } .hv-mag.m2 { inset-inline-start: 50px; top: 10px; transform: rotate(-2deg); } .hv-mag.m2 b { background: var(--blue-soft); } .hv-mag.m3 { inset-inline-start: 110px; top: 60px; width: 110px; height: 110px; border-radius: 30px; background: var(--peach); display: grid; place-items: center; transform: rotate(8deg); padding: 0; } .hv-mag.m3 .icon { width: 50px; height: 50px; } /* ---------- Video everywhere: cards, studio, pinned, modal ---------- */ .course-card .course-media .reel-media { position: absolute; inset: 0; aspect-ratio: auto; background: transparent; } .course-card .course-media .reel-media::after { display: none; } .course-card .course-media .reel-media > img { width: 100%; height: 100%; object-fit: cover; } .reel-media video, .scene-video, .pinned-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel-media video { opacity: 0; transition: opacity .3s; z-index: 1; } .playing .reel-media video { opacity: 1; } .reel-like.playing .play-dot { transform: scale(.6); opacity: 0; } .reel-like.playing .trailer-bar i { animation: progress 4s linear forwards; } .scene-video { z-index: 0; opacity: 0; transition: opacity .4s; } .studio.has-video.playing .scene-video { opacity: 1; } .studio.has-video.playing .scene-image { animation: none; } .scene-image > :not(.scene-video) { position: relative; } .scene-image .scene-caption, .scene-image .frame-guide, .scene-image .sample-tag { position: absolute; } .pinned-frame video { z-index: 1; } .pinned-frame figcaption, .pinned-frame .sample-tag { z-index: 2; } .modal-video { position: relative; margin-bottom: 18px; } .modal-video video { width: 100%; max-height: 62vh; border-radius: 18px; background: #000; display: block; object-fit: contain; } /* ---------- Draft outline note ---------- */ .draft-note { margin: -6px 0 16px; } .draft-note .sample-tag, h2 .sample-tag { position: static; display: inline-block; background: var(--peach-soft); color: #8a3d18; vertical-align: middle; font-size: 12px; font-weight: 600; letter-spacing: 0; } /* ---------- WhatsApp button stays out of the way on phones ---------- */ .wa-fab { transition: transform .35s var(--ease), opacity .35s; } .wa-fab.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; } /* ---------- One-time code login ---------- */ .auth-tabs.three { grid-template-columns: repeat(3, 1fr); } .link-btn { border: 0; background: none; color: var(--blue); padding: 0; font-size: 14px; } .otp-box { display: grid; gap: 14px; } .otp-box .muted { margin: 0; font-size: 14px; } .otp-step2 { display: grid; gap: 14px; animation: fadeUp .45s var(--ease) both; } .otp-code { font-size: 28px !important; letter-spacing: 12px; text-align: center; font-weight: 800; } .otp-msg { margin: 0; font-size: 14px; } .otp-msg.bad { color: #b3261e; } .otp-msg.good { color: var(--ok); } .otp-msg a { color: var(--blue); font-weight: 700; } .set-pass { background: var(--peach-soft); border-radius: 20px; padding: 22px; margin: 20px 0; } .set-pass h3 { font-size: 17px; } /* ---------- Collaboration plan (client panel) ---------- */ .plan { display: grid; gap: 22px; } .plan h3 { font-size: 19px; margin: 8px 0 0; } .plan-head { display: flex; gap: 22px; align-items: center; background: var(--soft); border-radius: 24px; padding: 22px; } .plan-head h2 { font-size: 24px; letter-spacing: 0; margin: 0 0 10px; } .plan-head .eyebrow { margin: 0 0 4px; } .ring { --p: 0; width: 104px; height: 104px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--blue) calc(var(--p) * 1%), #dce7f9 0); position: relative; } .ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--soft); } .ring b { position: relative; font-size: 22px; } .ring.small { width: 64px; height: 64px; } .ring.small::before { inset: 7px; background: #fff; } .ring.small b { font-size: 15px; } .stage-count { display: flex; flex-wrap: wrap; gap: 6px; } .stage-count .chip { font-size: 12.5px; padding: 4px 12px; } .chip.st-delivered { background: #dff3e4; border-color: #dff3e4; color: #1c5c2e; } .chip.st-review { background: #fff1d6; border-color: #fff1d6; color: #7a4d00; } .plan-note .bubble { background: var(--pink); } .plan-note .bubble p:last-child { margin: 0; } .plan-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .plan-item { border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; display: grid; gap: 12px; background: #fff; } .plan-item.is-done { border-color: #bfe5cc; background: #f6fcf8; } .plan-item-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .plan-item-top strong { font-size: 16.5px; margin-inline-end: auto; } .plan-item-top .muted { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; } .stage-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .stage-track li { position: relative; padding-top: 14px; font-size: 11.5px; color: var(--muted); text-align: center; } .stage-track li::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 6px; border-radius: 6px; background: var(--soft); } .stage-track li.past::before { background: var(--blue); } .stage-track li.now::before { background: linear-gradient(90deg, var(--blue), var(--peach)); animation: nowPulse 2s ease-in-out infinite; } .stage-track li.now { color: var(--ink); font-weight: 800; } .is-done .stage-track li::before { background: var(--ok); } @keyframes nowPulse { 50% { opacity: .55; } } .plan-teaser { display: flex; gap: 16px; align-items: center; background: var(--ink); color: #fff; border-radius: 22px; padding: 18px 22px; margin: 18px 0; transition: transform .35s var(--ease); } .plan-teaser:hover { transform: translateY(-3px); } .plan-teaser strong { display: block; font-size: 17px; } .plan-teaser small { color: #c5d3dc; } .plan-teaser .ring.small::before { background: var(--ink); } @media (max-width: 980px) { .hero-visual { zoom: .8; } } @media (max-width: 680px) { .page-hero { flex-direction: column; align-items: flex-start; } .hero-visual { zoom: .58; margin-top: 10px; } .stage-track li span { display: none; } .stage-track li.now span { display: inline; position: absolute; top: 12px; inset-inline-start: 0; white-space: nowrap; } .stage-track li { padding-top: 26px; } .plan-head { flex-direction: column; align-items: flex-start; } .auth-tabs.three button { font-size: 13px; padding: 9px 4px; } } /* ---------- Footer credit: yellow light-sweep («عبور نور»), on a slim dark strip ---------- */ .credit-strip { background: #152b36; padding: 16px var(--gutter); text-align: center; } .credit-strip .credit { margin: 0; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: center; font-size: 15px; color: #c5d3dc; } .credit-strip .credit a { text-decoration: none; } .credit-strip .credit b { font-weight: 900; font-size: 17px; color: #ffd43b; filter: drop-shadow(0 0 9px rgba(255, 212, 59, .55)); background: linear-gradient(100deg, #ffd43b 0 38%, #fffdf0 50%, #ffd43b 62% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: creditSweep 5.5s ease-in-out infinite; } .credit-strip .credit a:focus-visible { outline: 3px solid #ffd43b; outline-offset: 4px; border-radius: 6px; } @keyframes creditSweep { 0% { background-position: 100% 0; } 55%, 100% { background-position: -60% 0; } } body.no-motion .credit-strip .credit b { animation: none; background: none; -webkit-text-fill-color: #ffd43b; } @media (prefers-reduced-motion: reduce) { .credit-strip .credit b { animation: none; background: none; -webkit-text-fill-color: #ffd43b; } } @media (max-width: 680px) { .credit-strip { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } }