Accueil Explorer Aide
Connexion
jqlin
/
xtu_mall
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Aborescence: 7f8d6db732
Branches Tags
xtu_mall
/
public
/
assets
/
xtu
/
product-channel.css

product-channel.css 8.3 KB
Historique Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 
  1. :root{--brand-blue:var(--brand-blue);--brand-blue-hover:var(--brand-blue-hover);--bg-grey-color:var(--bg-grey-color);--bg-hover-grey-color:#e1e3e6;--bg-active-grey-color:#d4d4d8}
    2. 

  2. .product-subnav-strip{background:var(--bg-grey-color);border-bottom:none;border-top:1px solid var(--bg-grey-color);margin-top:0}
    3. 

  3. .product-subnav-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:20px 0 22px;align-items:start}
    4. 

  4. .product-subnav-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:10px;min-width:0;padding:4px 2px;color:#111827;position:relative;opacity:.88;transition:opacity .22s ease}
    5. 

  5. .product-subnav-item:hover,.product-subnav-item.active{opacity:1}
    6. 

  6. .product-subnav-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:20px;line-height:1;color:#4b5563}
    7. 

  7. .product-subnav-label{font-size:12px;line-height:1.45;color:#6b7280;letter-spacing:0;max-width:92px}
    8. 

  8. .product-subnav-item.active .product-subnav-label,.product-subnav-item:hover .product-subnav-label{color:#111827}
    9. 

  9. .product-channel-hero{padding:72px 0 36px;background:#fff}
    10. 

  10. .product-channel-hero .content-1300-wrap{text-align:center}
    11. 

  11. .product-channel-hero h1{font-size:clamp(28px,4vw,44px);line-height:1.12;letter-spacing:-.03em;margin:0 0 18px;color:#111827}
    12. 

  12. .product-channel-hero p{max-width:760px;font-size:16px;line-height:1.8;color:#667085;margin:0 auto}
    13. 

  13. .product-recommend-banner-section{background:#fff;padding:8px 0 28px}
    14. 

  14. .product-hero-swiper{position:relative;overflow:hidden;background:#f3f4f6}
    15. 

  15. .product-hero-slide{min-height:390px}
    16. 

  16. .product-slide-media-layer{position:absolute;inset:0}
    17. 

  17. .product-slide-media-layer-light::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 30%,rgba(255,255,255,.18) 58%,rgba(255,255,255,0) 78%)}
    18. 

  18. .product-slide-media-layer .slide-poster{width:100%;height:100%;object-fit:cover}
    19. 

  19. .product-hero-slide-layout-light{justify-content:flex-start}
    20. 

  20. .product-hero-copy-light{max-width:900px;transform:translateY(-72px)}
    21. 

  21. .product-hero-copy-light .hero-subtitle{font-size:18px;color:#4b5563;margin-bottom:18px}
    22. 

  22. .product-hero-copy-light h1{font-size:clamp(48px,6.5vw,88px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin:0 0 18px;color:#111827}
    23. 

  23. .product-hero-copy-light .hero-slogan{font-size:22px;line-height:1.45;color:#6b7280;margin-bottom:28px}
    24. 

  24. .product-hero-swiper-light .hero-actions .btn{min-width:140px}
    25. 

  25. .product-gallery-section{background:#fff;padding-top:20px;padding-bottom:28px}
    26. 

  26. .product-gallery-head-wrap{margin-top:40px;margin-bottom:36px}
    27. 

  27. .product-gallery-head h2{margin:0 0 18px;font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:-.04em;font-weight:600;color:#111827}
    28. 

  28. .product-gallery-head p{max-width:880px;margin:0 auto;color:#667085;font-size:16px;line-height:1.9}
    29. 

  29. .product-gallery-shell{width:100%;padding:0 16px}
    30. 

  30. .product-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    31. 

  31. .product-gallery-card{position:relative;overflow:hidden;background:var(--bg-grey-color);min-height:520px}
    32. 

  32. .product-gallery-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    33. 

  33. .product-gallery-card-wide{grid-column:1 / -1;min-height:560px}
    34. 

  34. .product-gallery-copy{position:relative;z-index:2;padding:40px 24px 28px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100%}
    35. 

  35. .product-gallery-copy-wide .product-gallery-kicker{color:#dfe4ea}
    36. 

  36. .product-gallery-kicker{display:block;font-size:15px;line-height:1.5;color:#fdc11d;margin-bottom:8px;letter-spacing:.01em}
    37. 

  37. .product-gallery-copy h3{margin:0 0 12px;font-size:32px;font-weight:500;line-height:1.08;letter-spacing:-.04em;color:#111827}
    38. 

  38. .product-gallery-copy-wide h3{color:#fff}
    39. 

  39. .product-gallery-copy p{margin:0 0 14px;font-size:15px;line-height:1.65;color:#6b7280}
    40. 

  40. .product-gallery-copy-wide p{color:#cfd6de}
    41. 

  41. .product-gallery-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
    42. 

  42. .product-cta{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;line-height:1;text-decoration:none;transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
    43. 

  43. .product-cta:hover{transform:translateY(-1px)}
    44. 

  44. .product-cta-buy{background:var(--brand-blue);color:#fff;box-shadow:0 14px 30px rgba(0,114,206,.22)}
    45. 

  45. .product-cta-buy:hover{background:var(--brand-blue-hover);color:#fff}
    46. 

  46. .product-cta-more{background:transparent;border:1px solid rgba(15,23,42,.58);color:#020617;padding:0 18px;height:40px;border-radius:999px;font-size:14px}
    47. 

  47. .product-gallery-copy-wide .product-cta-more{color:#fff;border-color:rgba(255,255,255,.56);background:rgba(255,255,255,.06)}
    48. 

  48. .product-gallery-copy-wide .product-cta-buy{background:var(--brand-blue);color:#fff}
    49. 

  49. 

  50. .product-support-section{background:#f5f5f5;padding-top:68px;padding-bottom:56px}
    51. 

  51. .product-support-head{margin-bottom:36px}
    52. 

  52. .product-support-head h2{margin:0;font-size:clamp(26px,3.5vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:600;color:#111827}
    53. 

  53. .product-support-card{height:100%;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(15,23,42,.06)}
    54. 

  54. .product-support-media{height:340px;background:var(--bg-hover-grey-color)}
    55. 

  55. .product-support-media img{width:100%;height:100%;object-fit:cover}
    56. 

  56. .product-support-copy{padding:30px 28px 32px;text-align:center}
    57. 

  57. .product-support-copy h3{margin:0 0 14px;font-size:30px;line-height:1.1;letter-spacing:-.035em;font-weight:500;color:#111827}
    58. 

  58. .product-support-copy p{margin:0 0 18px;font-size:15px;line-height:1.85;color:#667085}
    59. 

  59. .product-support-link{display:inline-flex;align-items:center;justify-content:center;color:#111827;font-size:15px;font-weight:500;line-height:1.5;position:relative}
    60. 

  60. .product-support-link::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:28px;height:2px;background:#111827;transition:width .22s ease}
    61. 

  61. .product-support-card:hover .product-support-link::after{width:40px}
    62. 

  62. @media (max-width:1199px){
    63. 

  63.   .product-subnav-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 10px}
    64. 

  64. }
    65. 

  65. @media (max-width:767px){
    66. 

  66.   .product-subnav-strip .content-1300-wrap,.product-channel-hero .content-1300-wrap{padding-left:16px;padding-right:16px}
    67. 

  67.   .product-subnav-row{display:flex;gap:16px;padding:14px 0 16px;overflow-x:auto;scrollbar-width:none}
    68. 

  68.   .product-subnav-row::-webkit-scrollbar{display:none}
    69. 

  69.   .product-subnav-item{flex:0 0 74px;gap:8px;padding:2px 0}
    70. 

  70.   .product-subnav-icon{width:28px;height:28px;font-size:18px}
    71. 

  71.   .product-subnav-label{font-size:11px;line-height:1.35;max-width:none}
    72. 

  72.   .product-channel-hero{padding:48px 0 24px}
    73. 

  73.   .product-recommend-banner-section{padding:0 0 22px}
    74. 

  74.   .product-hero-slide{min-height:300px}
    75. 

  75.   .product-slide-media-layer-light::after{background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.5) 28%,rgba(255,255,255,.1) 62%,rgba(255,255,255,.02) 100%)}
    76. 

  76.   .product-hero-copy-light{max-width:100%;transform:translateY(-36px)}
    77. 

  77.   .product-hero-copy-light .hero-subtitle{font-size:14px;margin-bottom:12px}
    78. 

  78.   .product-hero-copy-light h1{font-size:42px;margin-bottom:14px}
    79. 

  79.   .product-hero-copy-light .hero-slogan{font-size:18px;margin-bottom:20px}
    80. 

  80.   .product-gallery-section{padding-top:16px;padding-bottom:24px}
    81. 

  81.   .product-gallery-head-wrap{margin-top:30px;margin-bottom:26px;padding-left:16px;padding-right:16px}
    82. 

  82.   .product-gallery-head h2{font-size:28px;margin-bottom:14px}
    83. 

  83.   .product-gallery-head p{font-size:14px;line-height:1.8}
    84. 

  84.   .product-gallery-shell{padding:0 16px}
    85. 

  85.   .product-gallery-grid{grid-template-columns:1fr;gap:12px}
    86. 

  86.   .product-gallery-card,.product-gallery-card-wide{min-height:420px}
    87. 

  87.   .product-gallery-copy{padding:24px 18px 20px}
    88. 

  88.   .product-gallery-kicker{font-size:14px}
    89. 

  89.   .product-gallery-copy h3{font-size:28px}
    90. 

  90.   .product-gallery-copy p{font-size:14px;line-height:1.6}
    91. 

  91.   .product-gallery-actions{gap:10px}
    92. 

  92.   .product-cta{height:38px;padding:0 16px;font-size:13px}
    93. 

  93.   .product-cta-more{padding:0 16px;height:38px}
    94. 

  94.   .product-support-section{padding-top:48px;padding-bottom:40px}
    95. 

  95.   .product-support-head{margin-bottom:26px}
    96. 

  96.   .product-support-head h2{font-size:24px}
    97. 

  97.   .product-support-media{height:260px}
    98. 

  98.   .product-support-copy{padding:22px 18px 24px}
    99. 

  99.   .product-support-copy h3{font-size:24px}
    100. 

  100.   .product-support-copy p{font-size:14px;line-height:1.75}
    101. 

  101. }
    102.