WebOrbiton
v3.0.0.2

FlatlyPage

← Changes All versions
1,619 lines · 25.3 KB
  1. *,
  2. *::before,
  3. *::after {
  4. box-sizing: border-box;
  5. margin: 0;
  6. padding: 0;
  7. }
  8. ​
  9. :root {
  10. color-scheme: dark;
  11. --background: #111111;
  12. --foreground: #fafafa;
  13. --card: #1a1a1a;
  14. --card-hover: #222222;
  15. --muted: #888888;
  16. --border: #2a2a2a;
  17. --success: #22c55e;
  18. --navbar-bg: rgba(17, 17, 17, 0.8);
  19. --grid-line: rgba(255, 255, 255, 0.03);
  20. --avatar-from: #333;
  21. --avatar-to: #555;
  22. }
  23. ​
  24. :root[data-theme="light"] {
  25. color-scheme: light;
  26. --background: #ffffff;
  27. --foreground: #111111;
  28. --card: #f5f5f5;
  29. --card-hover: #efefef;
  30. --muted: #666666;
  31. --border: #e0e0e0;
  32. --success: #16a34a;
  33. --navbar-bg: rgba(255, 255, 255, 0.8);
  34. --grid-line: rgba(0, 0, 0, 0.05);
  35. --avatar-from: #ddd;
  36. --avatar-to: #bbb;
  37. }
  38. ​
  39. html {
  40. scroll-behavior: smooth;
  41. }
  42. ​
  43. body {
  44. font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  45. background-color: var(--background);
  46. color: var(--foreground);
  47. -webkit-font-smoothing: antialiased;
  48. }
  49. ​
  50. a {
  51. color: inherit;
  52. text-decoration: none;
  53. }
  54. ​
  55. img {
  56. max-width: 100%;
  57. height: auto;
  58. }
  59. ​
  60. h3+br {
  61. display: none;
  62. }
  63. ​
  64. .container {
  65. max-width: 1200px;
  66. margin: 0 auto;
  67. padding: 0 24px;
  68. }
  69. ​
  70. .navbar {
  71. position: fixed;
  72. top: 0;
  73. left: 0;
  74. right: 0;
  75. z-index: 50;
  76. background: var(--navbar-bg);
  77. backdrop-filter: blur(12px);
  78. border-bottom: 1px solid var(--border);
  79. }
  80. ​
  81. .navbar-inner {
  82. display: flex;
  83. align-items: center;
  84. justify-content: space-between;
  85. height: 72px;
  86. }
  87. ​
  88. .logo {
  89. font-size: 1.5rem;
  90. font-weight: 700;
  91. letter-spacing: -0.02em;
  92. display: flex;
  93. align-items: center;
  94. gap: 10px;
  95. }
  96. ​
  97. .logo img {
  98. height: 32px;
  99. width: auto;
  100. }
  101. ​
  102. .nav-links {
  103. display: flex;
  104. align-items: center;
  105. gap: 32px;
  106. }
  107. ​
  108. .nav-links a {
  109. display: inline-flex;
  110. align-items: center;
  111. font-size: 0.875rem;
  112. color: var(--muted);
  113. transition: color 0.2s;
  114. }
  115. ​
  116. .nav-links a:hover {
  117. color: var(--foreground);
  118. }
  119. ​
  120. .nav-buttons {
  121. display: flex;
  122. align-items: center;
  123. gap: 12px;
  124. }
  125. ​
  126. .btn {
  127. display: inline-flex;
  128. align-items: center;
  129. justify-content: center;
  130. padding: 10px 20px;
  131. font-size: 0.875rem;
  132. font-weight: 500;
  133. border-radius: 8px;
  134. cursor: pointer;
  135. transition: all 0.2s;
  136. border: none;
  137. font-family: inherit;
  138. }
  139. ​
  140. .btn-ghost {
  141. background: transparent;
  142. color: var(--foreground);
  143. }
  144. ​
  145. .btn-ghost:hover {
  146. background: var(--card);
  147. }
  148. ​
  149. .btn-search {
  150. background: transparent;
  151. color: var(--foreground);
  152. }
  153. ​
  154. .btn-search:hover {
  155. background: transparent;
  156. }
  157. ​
  158. .btn-primary {
  159. background: var(--foreground);
  160. color: var(--background);
  161. }
  162. ​
  163. .btn-primary:hover {
  164. opacity: 0.9;
  165. }
  166. ​
  167. .btn-outline {
  168. background: transparent;
  169. border: 1px solid var(--border);
  170. color: var(--foreground);
  171. }
  172. ​
  173. .btn-outline:hover {
  174. background: var(--card);
  175. border-color: var(--muted);
  176. }
  177. ​
  178. .mobile-menu-btn {
  179. display: none;
  180. background: transparent;
  181. border: none;
  182. color: var(--foreground);
  183. cursor: pointer;
  184. padding: 8px;
  185. }
  186. ​
  187. .mobile-nav {
  188. display: none;
  189. position: fixed;
  190. top: 72px;
  191. left: 0;
  192. right: 0;
  193. background: var(--background);
  194. border-bottom: 1px solid var(--border);
  195. padding: 24px;
  196. z-index: 49;
  197. }
  198. ​
  199. .mobile-nav.active {
  200. display: block;
  201. }
  202. ​
  203. .mobile-nav a:not(.btn) {
  204. display: flex;
  205. align-items: center;
  206. padding: 12px 0;
  207. font-size: 1rem;
  208. color: var(--muted);
  209. border-bottom: 1px solid var(--border);
  210. }
  211. ​
  212. .mobile-nav a:not(.btn):hover {
  213. color: var(--foreground);
  214. }
  215. ​
  216. .mobile-nav .btn {
  217. display: flex;
  218. width: 100%;
  219. margin-top: 12px;
  220. padding: 12px 20px;
  221. justify-content: center;
  222. font-size: 1rem;
  223. }
  224. ​
  225. .mobile-nav .btn-ghost,
  226. .mobile-nav .btn-search {
  227. background: var(--card);
  228. border: 1px solid var(--border);
  229. color: var(--foreground);
  230. }
  231. ​
  232. .mobile-nav .btn-ghost:hover,
  233. .mobile-nav .btn-search:hover {
  234. background: var(--card-hover);
  235. border-color: var(--muted);
  236. }
  237. ​
  238. main {
  239. margin-top: 50px;
  240. }
  241. ​
  242. .hero {
  243. padding: 160px 0 100px;
  244. position: relative;
  245. overflow: hidden;
  246. }
  247. ​
  248. .hero-grid {
  249. position: absolute;
  250. inset: 0;
  251. background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  252. background-size: 60px 60px;
  253. mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  254. }
  255. ​
  256. .hero-content {
  257. position: relative;
  258. text-align: center;
  259. max-width: 800px;
  260. margin: 0 auto;
  261. }
  262. ​
  263. .badge {
  264. display: inline-flex;
  265. align-items: center;
  266. gap: 8px;
  267. padding: 6px 16px;
  268. background: var(--card);
  269. border: 1px solid var(--border);
  270. border-radius: 100px;
  271. font-size: 0.875rem;
  272. margin-bottom: 32px;
  273. }
  274. ​
  275. .badge-dot {
  276. width: 6px;
  277. height: 6px;
  278. background: var(--success);
  279. border-radius: 50%;
  280. animation: pulse 2s infinite;
  281. }
  282. ​
  283. @keyframes pulse {
  284. ​
  285. 0%,
  286. 100% {
  287. opacity: 1;
  288. }
  289. ​
  290. 50% {
  291. opacity: 0.5;
  292. }
  293. }
  294. ​
  295. .hero h1 {
  296. font-size: clamp(2.5rem, 6vw, 4rem);
  297. font-weight: 700;
  298. letter-spacing: -0.03em;
  299. line-height: 1.1;
  300. margin-bottom: 24px;
  301. }
  302. ​
  303. .hero p {
  304. font-size: 1.125rem;
  305. color: var(--muted);
  306. max-width: 600px;
  307. margin: 0 auto 40px;
  308. }
  309. ​
  310. .hero-buttons {
  311. display: flex;
  312. align-items: center;
  313. justify-content: center;
  314. gap: 16px;
  315. flex-wrap: wrap;
  316. }
  317. ​
  318. .hero-buttons .btn {
  319. padding: 14px 28px;
  320. font-size: 1rem;
  321. }
  322. ​
  323. .blog-hero-section {
  324. padding: 40px 0;
  325. border-top: 1px solid var(--border);
  326. border-bottom: 1px solid var(--border);
  327. padding-top: 60px;
  328. }
  329. ​
  330. .blog-h1 {
  331. font-weight: 800;
  332. font-size: 44px;
  333. }
  334. ​
  335. .stats {
  336. padding: 40px 0;
  337. border-top: 1px solid var(--border);
  338. border-bottom: 1px solid var(--border);
  339. }
  340. ​
  341. .stats-grid {
  342. display: grid;
  343. grid-template-columns: repeat(4, 1fr);
  344. gap: 48px;
  345. text-align: center;
  346. }
  347. ​
  348. .stat-item h3 {
  349. font-size: 3rem;
  350. font-weight: 700;
  351. letter-spacing: -0.02em;
  352. margin-bottom: 8px;
  353. }
  354. ​
  355. .stat-item p {
  356. color: var(--muted);
  357. font-size: 0.875rem;
  358. }
  359. ​
  360. .features {
  361. padding: 120px 0;
  362. }
  363. ​
  364. .section-header {
  365. text-align: center;
  366. max-width: 600px;
  367. margin: 0 auto 64px;
  368. }
  369. ​
  370. .section-header h2 {
  371. font-size: 2.5rem;
  372. font-weight: 700;
  373. letter-spacing: -0.02em;
  374. margin-bottom: 16px;
  375. }
  376. ​
  377. .section-header p {
  378. color: var(--muted);
  379. font-size: 1.125rem;
  380. }
  381. ​
  382. .features-grid {
  383. display: grid;
  384. grid-template-columns: repeat(3, 1fr);
  385. gap: 24px;
  386. }
  387. ​
  388. .feature-card {
  389. background: var(--card);
  390. border: 1px solid var(--border);
  391. border-radius: 16px;
  392. padding: 32px;
  393. transition: all 0.3s;
  394. }
  395. ​
  396. .feature-card:hover {
  397. background: var(--card-hover);
  398. border-color: var(--border);
  399. transform: translateY(-4px);
  400. }
  401. ​
  402. .feature-icon {
  403. width: 48px;
  404. height: 48px;
  405. background: var(--background);
  406. border: 1px solid var(--border);
  407. border-radius: 12px;
  408. display: flex;
  409. align-items: center;
  410. justify-content: center;
  411. margin-bottom: 20px;
  412. }
  413. ​
  414. .feature-icon svg {
  415. width: 24px;
  416. height: 24px;
  417. stroke: var(--foreground);
  418. }
  419. ​
  420. .feature-card h3 {
  421. font-size: 1.125rem;
  422. font-weight: 600;
  423. margin-bottom: 12px;
  424. }
  425. ​
  426. .feature-card p {
  427. color: var(--muted);
  428. font-size: 0.9375rem;
  429. line-height: 1.6;
  430. }
  431. ​
  432. .testimonials {
  433. padding: 120px 0;
  434. background: var(--card);
  435. }
  436. ​
  437. .testimonials-grid {
  438. display: grid;
  439. grid-template-columns: repeat(3, 1fr);
  440. gap: 24px;
  441. }
  442. ​
  443. .testimonial-card {
  444. background: var(--background);
  445. border: 1px solid var(--border);
  446. border-radius: 16px;
  447. padding: 32px;
  448. }
  449. ​
  450. .testimonial-card p {
  451. font-size: 1rem;
  452. line-height: 1.7;
  453. margin-bottom: 24px;
  454. }
  455. ​
  456. .testimonial-author {
  457. display: flex;
  458. align-items: center;
  459. gap: 12px;
  460. }
  461. ​
  462. .testimonial-avatar {
  463. width: 44px;
  464. height: 44px;
  465. background: linear-gradient(135deg, var(--avatar-from) 0%, var(--avatar-to) 100%);
  466. border-radius: 50%;
  467. display: flex;
  468. align-items: center;
  469. justify-content: center;
  470. font-weight: 600;
  471. font-size: 1rem;
  472. }
  473. ​
  474. .testimonial-info h4 {
  475. font-weight: 600;
  476. font-size: 0.9375rem;
  477. }
  478. ​
  479. .testimonial-info span {
  480. color: var(--muted);
  481. font-size: 0.875rem;
  482. }
  483. ​
  484. .pricing {
  485. padding: 120px 0;
  486. }
  487. ​
  488. .pricing-grid {
  489. display: grid;
  490. grid-template-columns: repeat(3, 1fr);
  491. gap: 24px;
  492. align-items: start;
  493. }
  494. ​
  495. .pricing-card {
  496. background: var(--card);
  497. border: 1px solid var(--border);
  498. border-radius: 20px;
  499. padding: 40px;
  500. position: relative;
  501. transition: transform 0.3s;
  502. }
  503. ​
  504. .pricing-card:hover {
  505. transform: translateY(-4px);
  506. }
  507. ​
  508. .pricing-card.featured {
  509. border-color: var(--foreground);
  510. transform: scale(1.02);
  511. }
  512. ​
  513. .pricing-card.featured:hover {
  514. transform: scale(1.02) translateY(-4px);
  515. }
  516. ​
  517. .pricing-popular {
  518. position: absolute;
  519. top: -12px;
  520. left: 50%;
  521. transform: translateX(-50%);
  522. background: var(--foreground);
  523. color: var(--background);
  524. padding: 6px 16px;
  525. border-radius: 100px;
  526. font-size: 0.75rem;
  527. font-weight: 600;
  528. text-transform: uppercase;
  529. letter-spacing: 0.05em;
  530. }
  531. ​
  532. .pricing-card h3 {
  533. font-size: 1.25rem;
  534. font-weight: 600;
  535. margin-bottom: 8px;
  536. }
  537. ​
  538. .pricing-card .price {
  539. font-size: 3rem;
  540. font-weight: 700;
  541. letter-spacing: -0.02em;
  542. margin-bottom: 8px;
  543. }
  544. ​
  545. .pricing-card .price span {
  546. font-size: 1rem;
  547. font-weight: 400;
  548. color: var(--muted);
  549. }
  550. ​
  551. .pricing-card .description {
  552. color: var(--muted);
  553. font-size: 0.9375rem;
  554. margin-bottom: 32px;
  555. }
  556. ​
  557. .pricing-features {
  558. list-style: none;
  559. margin-bottom: 32px;
  560. }
  561. ​
  562. .pricing-features li {
  563. display: flex;
  564. align-items: center;
  565. gap: 12px;
  566. padding: 10px 0;
  567. font-size: 0.9375rem;
  568. }
  569. ​
  570. .pricing-features li svg {
  571. width: 20px;
  572. height: 20px;
  573. stroke: var(--success);
  574. flex-shrink: 0;
  575. }
  576. ​
  577. .pricing-card .btn {
  578. width: 100%;
  579. padding: 14px 24px;
  580. }
  581. ​
  582. .cta {
  583. padding: 120px 0;
  584. text-align: center;
  585. }
  586. ​
  587. .cta-inner {
  588. max-width: 700px;
  589. margin: 0 auto;
  590. }
  591. ​
  592. .cta h2 {
  593. font-size: 2.5rem;
  594. font-weight: 700;
  595. letter-spacing: -0.02em;
  596. margin-bottom: 16px;
  597. }
  598. ​
  599. .cta p {
  600. color: var(--muted);
  601. font-size: 1.125rem;
  602. margin-bottom: 40px;
  603. }
  604. ​
  605. .cta-buttons {
  606. display: flex;
  607. align-items: center;
  608. justify-content: center;
  609. gap: 16px;
  610. }
  611. ​
  612. .cta-buttons .btn {
  613. padding: 14px 28px;
  614. font-size: 1rem;
  615. }
  616. ​
  617. .text-section {
  618. padding: 40px 0;
  619. }
  620. ​
  621. .text-section h2 {
  622. font-size: 2rem;
  623. font-weight: 700;
  624. margin-bottom: 24px;
  625. }
  626. ​
  627. .text-content {
  628. color: var(--muted);
  629. font-size: 1.0625rem;
  630. line-height: 1.8;
  631. }
  632. ​
  633. .text-content h3 {
  634. display: block;
  635. width: fit-content;
  636. border-bottom: 1px solid var(--foreground);
  637. padding-bottom: 5px;
  638. margin-bottom: 5px;
  639. }
  640. ​
  641. ​
  642. .image-section {
  643. padding: 40px 0;
  644. }
  645. ​
  646. .image-section figure {
  647. margin: 0;
  648. }
  649. ​
  650. .image-section img {
  651. border-radius: 16px;
  652. width: 100%;
  653. }
  654. ​
  655. .image-section figcaption {
  656. margin-top: 16px;
  657. text-align: center;
  658. color: var(--muted);
  659. font-size: 0.875rem;
  660. }
  661. ​
  662. .image-text {
  663. padding: 60px 0;
  664. }
  665. ​
  666. .image-text-grid {
  667. display: grid;
  668. grid-template-columns: 1fr 1fr;
  669. gap: 60px;
  670. align-items: center;
  671. }
  672. ​
  673. .image-text-grid.image-text-right {
  674. grid-template-columns: 1fr 1fr;
  675. direction: rtl;
  676. }
  677. ​
  678. .image-text-grid.image-text-right>* {
  679. direction: ltr;
  680. }
  681. ​
  682. .image-text-image img {
  683. width: 100%;
  684. height: auto;
  685. border-radius: 12px;
  686. display: block;
  687. }
  688. ​
  689. .image-text-content h2 {
  690. font-size: 2.5rem;
  691. font-weight: 700;
  692. margin: 16px 0 12px;
  693. line-height: 1.2;
  694. }
  695. ​
  696. .image-text-content .section-subtitle {
  697. font-size: 0.875rem;
  698. text-transform: uppercase;
  699. letter-spacing: 0.05em;
  700. color: var(--muted);
  701. margin-bottom: 8px;
  702. }
  703. ​
  704. .image-text-content .text-content {
  705. font-size: 1rem;
  706. line-height: 1.6;
  707. color: var(--muted);
  708. margin: 20px 0 24px;
  709. }
  710. ​
  711. .image-text-content .btn {
  712. display: inline-block;
  713. margin-top: 12px;
  714. }
  715. ​
  716. .product-cards {
  717. padding: 60px 0;
  718. }
  719. ​
  720. .product-cards .section-header {
  721. margin-bottom: 48px;
  722. text-align: center;
  723. }
  724. ​
  725. .products-grid {
  726. display: grid;
  727. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  728. gap: 32px;
  729. }
  730. ​
  731. .product-card {
  732. background: var(--card);
  733. border: 1px solid var(--border);
  734. border-radius: 12px;
  735. padding: 32px 24px;
  736. text-align: center;
  737. transition: all 0.3s;
  738. }
  739. ​
  740. .product-card:hover {
  741. border-color: var(--foreground);
  742. box-shadow: 0 8px 24px rgba(255, 255, 255, 0.05);
  743. transform: translateY(-4px);
  744. }
  745. ​
  746. .product-image {
  747. margin-bottom: 20px;
  748. display: flex;
  749. justify-content: center;
  750. height: 48px;
  751. }
  752. ​
  753. .product-image img {
  754. width: 48px;
  755. height: 48px;
  756. object-fit: contain;
  757. }
  758. ​
  759. .product-card h3 {
  760. font-size: 1.125rem;
  761. font-weight: 600;
  762. margin: 16px 0 8px;
  763. }
  764. ​
  765. .product-description {
  766. font-size: 0.875rem;
  767. color: var(--muted);
  768. line-height: 1.5;
  769. margin: 12px 0 16px;
  770. }
  771. ​
  772. .product-features {
  773. list-style: none;
  774. padding: 0;
  775. margin: 16px 0 24px;
  776. text-align: left;
  777. }
  778. ​
  779. .product-features li {
  780. font-size: 0.875rem;
  781. color: var(--muted);
  782. padding: 6px 0 6px 24px;
  783. position: relative;
  784. }
  785. ​
  786. .product-features li::before {
  787. content: "✓";
  788. position: absolute;
  789. left: 0;
  790. color: var(--success);
  791. font-weight: 600;
  792. }
  793. ​
  794. .product-card .btn-sm {
  795. font-size: 0.8125rem;
  796. padding: 8px 16px;
  797. }
  798. ​
  799. .video-section {
  800. padding: 40px 0;
  801. }
  802. ​
  803. .video-wrapper {
  804. position: relative;
  805. width: 100%;
  806. padding-bottom: 56.25%;
  807. height: 0;
  808. overflow: hidden;
  809. border-radius: 16px;
  810. background: var(--card);
  811. border: 1px solid var(--border);
  812. }
  813. ​
  814. .video-wrapper iframe,
  815. .video-wrapper video {
  816. position: absolute;
  817. top: 0;
  818. left: 0;
  819. width: 100%;
  820. height: 100%;
  821. border-radius: 16px;
  822. }
  823. ​
  824. .video-wrapper video {
  825. object-fit: cover;
  826. }
  827. ​
  828. .video-caption {
  829. margin-top: 16px;
  830. text-align: center;
  831. color: var(--muted);
  832. font-size: 0.875rem;
  833. }
  834. ​
  835. .gallery-section {
  836. padding: 40px 0;
  837. }
  838. ​
  839. .gallery-grid {
  840. display: grid;
  841. grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  842. gap: 24px;
  843. }
  844. ​
  845. .gallery-item {
  846. position: relative;
  847. overflow: hidden;
  848. border-radius: 12px;
  849. background: var(--card);
  850. border: 1px solid var(--border);
  851. transition: all 0.3s;
  852. }
  853. ​
  854. .gallery-item:hover {
  855. transform: translateY(-4px);
  856. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  857. }
  858. ​
  859. .gallery-item img {
  860. width: 100%;
  861. height: 100%;
  862. object-fit: cover;
  863. display: block;
  864. aspect-ratio: 4/3;
  865. }
  866. ​
  867. .gallery-caption {
  868. padding: 16px;
  869. font-size: 0.875rem;
  870. color: var(--muted);
  871. background: var(--card);
  872. border-top: 1px solid var(--border);
  873. }
  874. ​
  875. .faq-section {
  876. padding: 40px 0;
  877. }
  878. ​
  879. .faq-list {
  880. max-width: 800px;
  881. margin: 0 auto;
  882. }
  883. ​
  884. .faq-item {
  885. background: var(--card);
  886. border: 1px solid var(--border);
  887. border-radius: 12px;
  888. margin-bottom: 16px;
  889. overflow: hidden;
  890. transition: all 0.3s;
  891. }
  892. ​
  893. .faq-item:hover {
  894. border-color: var(--muted);
  895. }
  896. ​
  897. .faq-item[open] {
  898. border-color: var(--foreground);
  899. }
  900. ​
  901. .faq-question {
  902. padding: 20px 24px;
  903. font-size: 1.0625rem;
  904. font-weight: 600;
  905. cursor: pointer;
  906. user-select: none;
  907. list-style: none;
  908. display: flex;
  909. align-items: center;
  910. justify-content: space-between;
  911. transition: all 0.2s;
  912. }
  913. ​
  914. .faq-question::-webkit-details-marker {
  915. display: none;
  916. }
  917. ​
  918. .faq-question::after {
  919. content: '+';
  920. font-size: 1.5rem;
  921. font-weight: 300;
  922. color: var(--muted);
  923. transition: transform 0.3s;
  924. }
  925. ​
  926. .faq-item[open] .faq-question::after {
  927. transform: rotate(45deg);
  928. }
  929. ​
  930. .faq-question:hover {
  931. color: var(--foreground);
  932. }
  933. ​
  934. .faq-answer {
  935. padding: 0 24px 20px 24px;
  936. color: var(--muted);
  937. font-size: 0.9375rem;
  938. line-height: 1.7;
  939. }
  940. ​
  941. .team-section {
  942. padding: 40px 0;
  943. }
  944. ​
  945. .team-grid {
  946. display: grid;
  947. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  948. gap: 32px;
  949. }
  950. ​
  951. .team-member {
  952. background: var(--card);
  953. border: 1px solid var(--border);
  954. border-radius: 16px;
  955. padding: 32px;
  956. text-align: center;
  957. transition: all 0.3s;
  958. }
  959. ​
  960. .team-member:hover {
  961. transform: translateY(-4px);
  962. border-color: var(--muted);
  963. }
  964. ​
  965. .team-photo,
  966. .team-avatar {
  967. width: 80px;
  968. height: 80px;
  969. border-radius: 50%;
  970. margin: 0 auto 20px;
  971. }
  972. ​
  973. .team-photo {
  974. object-fit: cover;
  975. border: 2px solid var(--border);
  976. }
  977. ​
  978. .team-avatar {
  979. background: linear-gradient(135deg, var(--avatar-from) 0%, var(--avatar-to) 100%);
  980. display: flex;
  981. align-items: center;
  982. justify-content: center;
  983. font-weight: 700;
  984. font-size: 1.5rem;
  985. color: var(--foreground);
  986. }
  987. ​
  988. .team-member h3 {
  989. font-size: 1.125rem;
  990. font-weight: 600;
  991. margin-bottom: 8px;
  992. }
  993. ​
  994. .team-role {
  995. color: var(--muted);
  996. font-size: 0.875rem;
  997. margin-bottom: 16px;
  998. }
  999. ​
  1000. .team-bio {
  1001. color: var(--muted);
  1002. font-size: 0.9375rem;
  1003. line-height: 1.6;
  1004. margin-bottom: 20px;
  1005. }
  1006. ​
  1007. .team-social {
  1008. display: flex;
  1009. justify-content: center;
  1010. gap: 12px;
  1011. }
  1012. ​
  1013. .team-social-link {
  1014. width: 36px;
  1015. height: 36px;
  1016. background: var(--background);
  1017. border: 1px solid var(--border);
  1018. border-radius: 8px;
  1019. display: flex;
  1020. align-items: center;
  1021. justify-content: center;
  1022. transition: all 0.2s;
  1023. color: var(--foreground);
  1024. }
  1025. ​
  1026. .team-social-link:hover {
  1027. background: var(--card-hover);
  1028. border-color: var(--foreground);
  1029. }
  1030. ​
  1031. .team-social-link svg {
  1032. width: 18px;
  1033. height: 18px;
  1034. }
  1035. ​
  1036. .audio-section {
  1037. padding: 40px 0;
  1038. }
  1039. ​
  1040. .audio-wrapper {
  1041. max-width: 600px;
  1042. margin: 0 auto;
  1043. display: flex;
  1044. flex-direction: column;
  1045. align-items: center;
  1046. gap: 24px;
  1047. }
  1048. ​
  1049. .audio-player {
  1050. width: 100%;
  1051. height: 54px;
  1052. border-radius: 12px;
  1053. background: var(--card);
  1054. border: 1px solid var(--border);
  1055. }
  1056. ​
  1057. .audio-player::-webkit-media-controls-panel {
  1058. background: var(--card);
  1059. }
  1060. ​
  1061. .countdown-section {
  1062. padding: 40px 0;
  1063. }
  1064. ​
  1065. .countdown-timer {
  1066. display: flex;
  1067. justify-content: center;
  1068. gap: 32px;
  1069. flex-wrap: wrap;
  1070. }
  1071. ​
  1072. .countdown-item {
  1073. background: var(--card);
  1074. border: 1px solid var(--border);
  1075. border-radius: 16px;
  1076. padding: 32px;
  1077. min-width: 120px;
  1078. text-align: center;
  1079. transition: all 0.3s;
  1080. }
  1081. ​
  1082. .countdown-item:hover {
  1083. transform: translateY(-4px);
  1084. border-color: var(--muted);
  1085. }
  1086. ​
  1087. .countdown-value {
  1088. font-size: 3rem;
  1089. font-weight: 700;
  1090. letter-spacing: -0.02em;
  1091. line-height: 1;
  1092. margin-bottom: 12px;
  1093. }
  1094. ​
  1095. .countdown-label {
  1096. font-size: 0.875rem;
  1097. color: var(--muted);
  1098. text-transform: uppercase;
  1099. letter-spacing: 0.05em;
  1100. }
  1101. ​
  1102. blockquote {
  1103. position: relative;
  1104. margin: 24px 0;
  1105. padding: 20px 24px 20px 56px;
  1106. background: var(--card);
  1107. border-left: 4px solid var(--foreground);
  1108. border-radius: 12px;
  1109. font-size: 1.0625rem;
  1110. line-height: 1.7;
  1111. color: var(--foreground);
  1112. font-style: italic;
  1113. }
  1114. ​
  1115. blockquote::before {
  1116. content: '"';
  1117. position: absolute;
  1118. left: 16px;
  1119. top: 12px;
  1120. font-size: 3rem;
  1121. font-weight: 700;
  1122. color: var(--muted);
  1123. opacity: 0.3;
  1124. line-height: 1;
  1125. font-family: "Times New Roman", Times, serif;
  1126. }
  1127. ​
  1128. blockquote p {
  1129. margin: 0;
  1130. }
  1131. ​
  1132. blockquote cite {
  1133. display: block;
  1134. margin-top: 12px;
  1135. font-size: 0.875rem;
  1136. color: var(--muted);
  1137. font-style: normal;
  1138. }
  1139. ​
  1140. blockquote cite::before {
  1141. content: '— ';
  1142. }
  1143. ​
  1144. .newsletter-section {
  1145. padding: 40px 0;
  1146. background: var(--card);
  1147. }
  1148. ​
  1149. .newsletter-inner {
  1150. max-width: 600px;
  1151. margin: 0 auto;
  1152. text-align: center;
  1153. }
  1154. ​
  1155. .newsletter-section h2 {
  1156. font-size: 2rem;
  1157. font-weight: 700;
  1158. letter-spacing: -0.02em;
  1159. margin-bottom: 16px;
  1160. }
  1161. ​
  1162. .newsletter-section p {
  1163. color: var(--muted);
  1164. font-size: 1.0625rem;
  1165. margin-bottom: 32px;
  1166. }
  1167. ​
  1168. .newsletter-form {
  1169. display: flex;
  1170. gap: 12px;
  1171. max-width: 500px;
  1172. margin: 0 auto;
  1173. }
  1174. ​
  1175. .newsletter-input {
  1176. flex: 1;
  1177. padding: 14px 20px;
  1178. border: 1px solid var(--border);
  1179. border-radius: 8px;
  1180. background: var(--background);
  1181. color: var(--foreground);
  1182. font-size: 1rem;
  1183. font-family: inherit;
  1184. transition: all 0.2s;
  1185. }
  1186. ​
  1187. .newsletter-input:focus {
  1188. outline: none;
  1189. border-color: var(--foreground);
  1190. }
  1191. ​
  1192. .newsletter-input::placeholder {
  1193. color: var(--muted);
  1194. }
  1195. ​
  1196. ​
  1197. ​
  1198. .footer {
  1199. padding: 40px 0 40px;
  1200. border-top: 1px solid var(--border);
  1201. }
  1202. ​
  1203. .footer-grid {
  1204. display: grid;
  1205. grid-template-columns: 2fr repeat(4, 1fr);
  1206. gap: 64px;
  1207. margin-bottom: 64px;
  1208. }
  1209. ​
  1210. .footer-brand h3 {
  1211. font-size: 1.5rem;
  1212. font-weight: 700;
  1213. margin-bottom: 16px;
  1214. display: flex;
  1215. align-items: center;
  1216. gap: 10px;
  1217. }
  1218. ​
  1219. .footer-brand h3 img {
  1220. height: 28px;
  1221. width: auto;
  1222. }
  1223. ​
  1224. .footer-brand p {
  1225. color: var(--muted);
  1226. font-size: 0.9375rem;
  1227. max-width: 280px;
  1228. margin-bottom: 24px;
  1229. }
  1230. ​
  1231. .social-links {
  1232. display: flex;
  1233. gap: 12px;
  1234. }
  1235. ​
  1236. .social-links a {
  1237. width: 40px;
  1238. height: 40px;
  1239. background: var(--card);
  1240. border: 1px solid var(--border);
  1241. border-radius: 8px;
  1242. display: flex;
  1243. align-items: center;
  1244. justify-content: center;
  1245. transition: all 0.2s;
  1246. }
  1247. ​
  1248. .social-links a:hover {
  1249. background: var(--card-hover);
  1250. border-color: var(--muted);
  1251. }
  1252. ​
  1253. .social-links svg {
  1254. width: 18px;
  1255. height: 18px;
  1256. fill: var(--foreground);
  1257. }
  1258. ​
  1259. .footer-column h4 {
  1260. font-size: 0.875rem;
  1261. font-weight: 600;
  1262. text-transform: uppercase;
  1263. letter-spacing: 0.05em;
  1264. margin-bottom: 20px;
  1265. }
  1266. ​
  1267. .footer-column ul {
  1268. list-style: none;
  1269. }
  1270. ​
  1271. .footer-column li {
  1272. margin-bottom: 12px;
  1273. }
  1274. ​
  1275. .footer-column a {
  1276. color: var(--muted);
  1277. font-size: 0.9375rem;
  1278. transition: color 0.2s;
  1279. }
  1280. ​
  1281. .footer-column a:hover {
  1282. color: var(--foreground);
  1283. }
  1284. ​
  1285. .footer-bottom {
  1286. display: flex;
  1287. align-items: flex-start;
  1288. justify-content: space-between;
  1289. padding-top: 32px;
  1290. border-top: 1px solid var(--border);
  1291. gap: 24px;
  1292. }
  1293. ​
  1294. .footer-bottom p {
  1295. color: var(--muted);
  1296. font-size: 0.875rem;
  1297. }
  1298. ​
  1299. .footer-legal {
  1300. display: flex;
  1301. gap: 24px;
  1302. }
  1303. ​
  1304. .footer-legal a {
  1305. color: var(--muted);
  1306. font-size: 0.875rem;
  1307. transition: color 0.2s;
  1308. }
  1309. ​
  1310. .footer-legal a:hover {
  1311. color: var(--foreground);
  1312. }
  1313. ​
  1314. .footer-language {
  1315. margin-left: 10px;
  1316. }
  1317. ​
  1318. .footer-language select {
  1319. background-color: var(--card);
  1320. border: 1px solid var(--border);
  1321. color: var(--foreground);
  1322. padding: 10px 36px 10px 16px;
  1323. border-radius: 8px;
  1324. font-size: 0.875rem;
  1325. font-weight: 500;
  1326. cursor: pointer;
  1327. ​
  1328. appearance: none;
  1329. -webkit-appearance: none;
  1330. -moz-appearance: none;
  1331. ​
  1332. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  1333. background-repeat: no-repeat;
  1334. background-position: right 12px center;
  1335. transition: all 0.2s;
  1336. min-width: 140px;
  1337. max-width: 200px;
  1338. font-family: inherit;
  1339. }
  1340. ​
  1341. .footer-language select option {
  1342. background-color: #1a1a1a;
  1343. color: #ffffff;
  1344. padding: 12px;
  1345. }
  1346. ​
  1347. :root[data-theme="light"] .footer-language select option {
  1348. background-color: #ffffff;
  1349. color: #111111;
  1350. }
  1351. ​
  1352. .footer-language select:hover {
  1353. background-color: var(--card-hover);
  1354. border-color: var(--muted);
  1355. }
  1356. ​
  1357. .footer-language select:focus {
  1358. outline: none;
  1359. border-color: var(--foreground);
  1360. background-color: var(--card-hover);
  1361. }
  1362. ​
  1363. :root[data-theme="light"] .footer-language select {
  1364. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  1365. }
  1366. ​
  1367. @media (max-width: 768px) {
  1368. .footer-bottom {
  1369. flex-direction: column;
  1370. gap: 16px;
  1371. align-items: flex-start;
  1372. }
  1373. ​
  1374. .footer-language {
  1375. margin-left: 0 !important;
  1376. width: 100%;
  1377. order: 1;
  1378. }
  1379. ​
  1380. .footer-language select {
  1381. width: 100%;
  1382. max-width: 100%;
  1383. -webkit-appearance: menulist;
  1384. appearance: menulist;
  1385. background-image: none;
  1386. padding-right: 10px;
  1387. }
  1388. ​
  1389. .footer-legal {
  1390. flex-direction: column;
  1391. align-items: flex-start;
  1392. }
  1393. ​
  1394. .theme-toggle {
  1395. order: 3;
  1396. }
  1397. }
  1398. ​
  1399. @media (max-width: 480px) {
  1400. .footer-language select {
  1401. font-size: 0.8125rem;
  1402. padding: 8px 12px;
  1403. }
  1404. }
  1405. ​
  1406. .theme-toggle {
  1407. background: var(--card);
  1408. border: 1px solid var(--border);
  1409. color: var(--foreground);
  1410. padding: 8px 12px;
  1411. border-radius: 8px;
  1412. cursor: pointer;
  1413. display: flex;
  1414. align-items: center;
  1415. justify-content: center;
  1416. gap: 6px;
  1417. font-size: 0.875rem;
  1418. transition: all 0.2s;
  1419. }
  1420. ​
  1421. .theme-toggle:hover {
  1422. background: var(--card-hover);
  1423. border-color: var(--muted);
  1424. }
  1425. ​
  1426. .theme-toggle svg {
  1427. width: 18px;
  1428. height: 18px;
  1429. stroke: currentColor;
  1430. fill: none;
  1431. stroke-width: 2;
  1432. }
  1433. ​
  1434. @media (max-width: 1024px) {
  1435. ​
  1436. .features-grid,
  1437. .testimonials-grid,
  1438. .pricing-grid {
  1439. grid-template-columns: repeat(2, 1fr);
  1440. }
  1441. ​
  1442. .pricing-card.featured {
  1443. transform: none;
  1444. }
  1445. ​
  1446. .footer-grid {
  1447. grid-template-columns: repeat(3, 1fr);
  1448. gap: 48px;
  1449. }
  1450. ​
  1451. .footer-brand {
  1452. grid-column: span 3;
  1453. }
  1454. ​
  1455. .team-grid {
  1456. grid-template-columns: repeat(2, 1fr);
  1457. }
  1458. }
  1459. ​
  1460. @media (max-width: 768px) {
  1461. ​
  1462. .nav-links,
  1463. .nav-buttons {
  1464. display: none;
  1465. }
  1466. ​
  1467. .mobile-menu-btn {
  1468. display: block;
  1469. }
  1470. ​
  1471. .stats-grid {
  1472. grid-template-columns: repeat(2, 1fr);
  1473. gap: 32px;
  1474. }
  1475. ​
  1476. .countdown-timer {
  1477. gap: 16px;
  1478. }
  1479. ​
  1480. .countdown-item {
  1481. min-width: 100px;
  1482. padding: 24px;
  1483. }
  1484. ​
  1485. .countdown-value {
  1486. font-size: 2.5rem;
  1487. }
  1488. ​
  1489. .newsletter-form {
  1490. flex-direction: column;
  1491. }
  1492. ​
  1493. .newsletter-input,
  1494. .newsletter-form .btn {
  1495. width: 100%;
  1496. }
  1497. ​
  1498. .features-grid,
  1499. .testimonials-grid,
  1500. .pricing-grid {
  1501. grid-template-columns: 1fr;
  1502. }
  1503. ​
  1504. .image-text-grid,
  1505. .image-text-grid.image-text-right {
  1506. grid-template-columns: 1fr;
  1507. gap: 40px;
  1508. }
  1509. ​
  1510. .image-text-grid.image-text-right {
  1511. direction: ltr;
  1512. }
  1513. ​
  1514. .image-text-content h2 {
  1515. font-size: 1.875rem;
  1516. }
  1517. ​
  1518. .products-grid {
  1519. grid-template-columns: 1fr;
  1520. gap: 24px;
  1521. }
  1522. ​
  1523. .product-card {
  1524. padding: 24px 16px;
  1525. }
  1526. ​
  1527. .gallery-grid {
  1528. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  1529. gap: 16px;
  1530. }
  1531. ​
  1532. .team-grid {
  1533. grid-template-columns: 1fr;
  1534. }
  1535. ​
  1536. .footer-grid {
  1537. grid-template-columns: repeat(2, 1fr);
  1538. gap: 40px;
  1539. }
  1540. ​
  1541. .footer-brand {
  1542. grid-column: span 2;
  1543. }
  1544. ​
  1545. .footer-bottom {
  1546. flex-direction: column;
  1547. gap: 16px;
  1548. align-items: flex-start;
  1549. }
  1550. ​
  1551. .footer-legal {
  1552. flex-direction: column;
  1553. align-items: flex-start;
  1554. }
  1555. }
  1556. ​
  1557. @media (max-width: 480px) {
  1558. .hero h1 {
  1559. font-size: 2rem;
  1560. }
  1561. ​
  1562. .blog-h1 {
  1563. font-size: 1.8rem;
  1564. }
  1565. ​
  1566. .text-content {
  1567. font-size: 1rem;
  1568. }
  1569. ​
  1570. .container h2 {
  1571. font-size: 1.5rem;
  1572. }
  1573. ​
  1574. .section-header h2,
  1575. .cta h2 {
  1576. font-size: 1.75rem;
  1577. }
  1578. ​
  1579. .hero-buttons,
  1580. .cta-buttons {
  1581. flex-direction: column;
  1582. width: 100%;
  1583. }
  1584. ​
  1585. .hero-buttons .btn,
  1586. .cta-buttons .btn {
  1587. width: 100%;
  1588. }
  1589. ​
  1590. .stat-item h3 {
  1591. font-size: 2rem;
  1592. }
  1593. ​
  1594. .gallery-grid {
  1595. grid-template-columns: 1fr;
  1596. }
  1597. ​
  1598. .footer-grid {
  1599. grid-template-columns: 1fr;
  1600. }
  1601. ​
  1602. .footer-brand {
  1603. grid-column: span 1;
  1604. }
  1605. }
  1606. ​
  1607. .nav-icon {
  1608. width: 1.15em;
  1609. height: 1.15em;
  1610. flex-shrink: 0;
  1611. vertical-align: -0.2em;
  1612. }
  1613. ​
  1614. .nav-links a,
  1615. .nav-buttons .btn,
  1616. .mobile-nav a {
  1617. gap: 7px;
  1618. }
  1619. ​