product.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. .container {
  2. max-width: 960px;
  3. }
  4. /*
  5. * Custom translucent site header
  6. */
  7. .site-header {
  8. background-color: rgba(0, 0, 0, .85);
  9. -webkit-backdrop-filter: saturate(180%) blur(20px);
  10. backdrop-filter: saturate(180%) blur(20px);
  11. }
  12. .site-header a {
  13. color: #8e8e8e;
  14. transition: color .15s ease-in-out;
  15. }
  16. .site-header a:hover {
  17. color: #fff;
  18. text-decoration: none;
  19. }
  20. /*
  21. * Dummy devices (replace them with your own or something else entirely!)
  22. */
  23. .product-device {
  24. position: absolute;
  25. right: 10%;
  26. bottom: -30%;
  27. width: 300px;
  28. height: 540px;
  29. background-color: #333;
  30. border-radius: 21px;
  31. transform: rotate(30deg);
  32. }
  33. .product-device::before {
  34. position: absolute;
  35. top: 10%;
  36. right: 10px;
  37. bottom: 10%;
  38. left: 10px;
  39. content: "";
  40. background-color: rgba(255, 255, 255, .1);
  41. border-radius: 5px;
  42. }
  43. .product-device-2 {
  44. top: -25%;
  45. right: auto;
  46. bottom: 0;
  47. left: 5%;
  48. background-color: #e5e5e5;
  49. }
  50. /*
  51. * Extra utilities
  52. */
  53. .flex-equal > * {
  54. flex: 1;
  55. }
  56. @media (min-width: 768px) {
  57. .flex-md-equal > * {
  58. flex: 1;
  59. }
  60. }