WebOrbiton
v3.0.0.0

FlatlyPage

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