/* ============================================================ YAMA — direction "éditorial andin" Surcouche appliquée à toutes les pages portant . Ne modifie jamais style.css : elle se pose par-dessus. ============================================================ */ :root{ --e-ink:#0d0d0f; /* noir profond, pour les blocs forts */ --e-cream:#f7f1ea; /* crème chaude, plus terreuse que le rose */ --e-sand:#e8ddd0; /* sable, séparateurs et fonds secondaires */ --e-clay:#c98f6f; /* argile claire */ --e-terre:#a86a4d; /* terre alpaga — ancrage andin */ --e-rose:#f2a8ce; /* rose signature yama, désormais en accent */ --e-rose-deep:#d97fb0; --e-white:#fbfbfd; --e-maxw:1320px; } /* le fond à pois disparaît : on veut du calme sous des images fortes */ body.editorial{ background:var(--e-cream); background-image:none; color:var(--e-ink); } /* ------------------------------------------------------------ 1. HERO plein écran ------------------------------------------------------------ */ .e-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--e-ink); border-radius:0; } .e-hero__media{position:absolute;inset:0;z-index:0;} .e-hero__media img{ width:100%;height:100%;object-fit:cover;object-position:center 25%; transform:scale(1.04); animation:e-kenburns 18s ease-out forwards; } @keyframes e-kenburns{ to{ transform:scale(1.12); } } /* voile dégradé : lisibilité du texte sans écraser la photo */ .e-hero__veil{ position:absolute;inset:0;z-index:1; background: linear-gradient(to top, rgba(13,13,15,.88) 0%, rgba(13,13,15,.45) 38%, rgba(13,13,15,.10) 70%, rgba(13,13,15,.35) 100%); } .e-hero__inner{ position:relative;z-index:2; width:100%;max-width:var(--e-maxw); margin:0 auto;padding:0 40px 72px; color:var(--e-white); } .e-hero__place{ display:flex;align-items:center;gap:14px; font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:rgba(255,255,255,.82);margin:0 0 26px; } .e-hero__place i{ display:block;width:26px;height:1px;background:var(--e-rose);font-style:normal; } /* le mot-marque : Thin 100, immense, très espacé */ .e-hero__word{ font-family:'Outfit',sans-serif; font-weight:100; font-size:clamp(64px,15vw,210px); line-height:.86; letter-spacing:.06em; margin:0; color:var(--e-white); } .e-hero__rule{ height:1px;background:rgba(255,255,255,.28); margin:30px 0 24px;transform-origin:left; animation:e-rule 1.4s cubic-bezier(.16,1,.3,1) .3s both; } @keyframes e-rule{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } .e-hero__foot{ display:flex;justify-content:space-between;align-items:flex-end; gap:32px;flex-wrap:wrap; } .e-hero__claim{ max-width:430px;margin:0; font-size:16px;line-height:1.7;color:rgba(255,255,255,.78);font-weight:300; } .e-hero__claim b{color:var(--e-white);font-weight:600;} .e-hero__actions{display:flex;align-items:center;gap:22px;} /* bouton : contour fin, pas de gros aplat rose */ .e-btn{ display:inline-flex;align-items:center;gap:12px; padding:15px 30px;border-radius:100px; font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; border:1px solid rgba(255,255,255,.4);color:var(--e-white); transition:background .35s ease,color .35s ease,border-color .35s ease,gap .35s ease; } .e-btn:hover{background:var(--e-white);color:var(--e-ink);border-color:var(--e-white);gap:18px;} .e-btn--solid{background:var(--e-rose);border-color:var(--e-rose);color:var(--e-ink);} .e-btn--solid:hover{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-white);} .e-btn--dark{border-color:rgba(13,13,15,.28);color:var(--e-ink);} .e-btn--dark:hover{background:var(--e-ink);color:var(--e-white);border-color:var(--e-ink);} .e-scroll{ display:flex;flex-direction:column;align-items:center;gap:8px; font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.55); } .e-scroll span{display:block;width:1px;height:38px;background:rgba(255,255,255,.35);position:relative;overflow:hidden;} .e-scroll span::after{ content:"";position:absolute;inset:0;background:var(--e-rose); animation:e-drop 2.2s ease-in-out infinite; } @keyframes e-drop{ 0%{transform:translateY(-100%);} 55%{transform:translateY(100%);} 100%{transform:translateY(100%);} } /* ------------------------------------------------------------ 2. Ticker défilant ------------------------------------------------------------ */ .e-ticker{ background:var(--e-ink);color:var(--e-cream); padding:16px 0;overflow:hidden;white-space:nowrap; border-top:1px solid rgba(255,255,255,.08); } .e-ticker__track{display:inline-flex;animation:e-marquee 32s linear infinite;} .e-ticker:hover .e-ticker__track{animation-play-state:paused;} .e-ticker__group{display:inline-flex;align-items:center;flex-shrink:0;} .e-ticker b{ font-weight:200;font-size:clamp(16px,2vw,24px); letter-spacing:.04em;text-transform:lowercase;padding:0 26px; } .e-ticker i{color:var(--e-rose);font-style:normal;font-size:14px;} @keyframes e-marquee{ to{ transform:translateX(-50%); } } /* ------------------------------------------------------------ 3. Collections — scroll horizontal ------------------------------------------------------------ */ .e-sec{padding:120px 0;} .e-sec--tight{padding:88px 0;} .e-wrap{max-width:var(--e-maxw);margin:0 auto;padding:0 40px;} .e-head{margin-bottom:56px;max-width:760px;} .e-kicker{ display:flex;align-items:center;gap:12px; font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--e-terre);margin-bottom:20px; } .e-kicker i{display:block;width:22px;height:1px;background:var(--e-terre);font-style:normal;} .e-title{ font-family:'Outfit',sans-serif;font-weight:200; font-size:clamp(32px,5.2vw,66px);line-height:1.02;letter-spacing:-.02em; margin:0;color:var(--e-ink); } .e-title b{font-weight:600;} .e-title em{font-style:normal;color:var(--e-terre);} .e-lede{ margin:24px 0 0;max-width:520px; font-size:16px;line-height:1.75;font-weight:300;color:#4a4348; } .e-rail{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,38vw); gap:22px;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:14px;margin:0 -40px;padding-left:40px;padding-right:40px; scrollbar-width:thin;scrollbar-color:var(--e-sand) transparent; } .e-rail::-webkit-scrollbar{height:3px;} .e-rail::-webkit-scrollbar-thumb{background:var(--e-sand);} .e-card{ scroll-snap-align:start;position:relative;display:block; aspect-ratio:4/5;overflow:hidden;background:var(--e-ink); } .e-card img{ width:100%;height:100%;object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease; filter:saturate(.94); } .e-card:hover img{transform:scale(1.06);filter:saturate(1.08);} .e-card__body{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:30px 26px 26px;color:var(--e-white); background:linear-gradient(to top,rgba(13,13,15,.9),rgba(13,13,15,0)); } .e-card__name{ font-family:'Outfit',sans-serif;font-weight:200; font-size:clamp(28px,3.4vw,42px);line-height:1;letter-spacing:.02em; margin:0 0 8px;color:var(--e-white); } .e-card__meta{ font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.7);margin-bottom:14px; } .e-card__go{ display:inline-flex;align-items:center;gap:9px; font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--e-rose);transition:gap .35s ease; } .e-card:hover .e-card__go{gap:16px;} /* ------------------------------------------------------------ 4. Manifeste + grille photo asymétrique ------------------------------------------------------------ */ .e-manifest{background:var(--e-ink);color:var(--e-cream);} .e-manifest .e-title{color:var(--e-white);} .e-manifest .e-lede{color:rgba(255,255,255,.62);} .e-manifest .e-kicker{color:var(--e-rose);} .e-manifest .e-kicker i{background:var(--e-rose);} .e-mosaic{ display:grid;grid-template-columns:repeat(6,1fr); grid-auto-rows:150px;gap:14px;margin-top:12px; } .e-mosaic img{ width:100%;height:100%;object-fit:cover; filter:saturate(.9) contrast(1.03); transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s ease; } .e-mosaic figure{margin:0;overflow:hidden;position:relative;} .e-mosaic figure:hover img{transform:scale(1.05);filter:saturate(1.1);} /* rythme volontairement irrégulier */ .e-m1{grid-column:span 4;grid-row:span 2;} .e-m2{grid-column:span 2;grid-row:span 3;} .e-m3{grid-column:span 2;grid-row:span 2;} .e-m4{grid-column:span 2;grid-row:span 2;} .e-m5{grid-column:span 3;grid-row:span 2;} .e-m6{grid-column:span 3;grid-row:span 3;} .e-m7{grid-column:span 3;grid-row:span 2;} /* ------------------------------------------------------------ 5. Univers — split éditorial décalé ------------------------------------------------------------ */ .e-split{ display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch; } .e-split__img{position:relative;overflow:hidden;min-height:520px;} .e-split__img img{width:100%;height:100%;object-fit:cover;} .e-split__txt{ display:flex;flex-direction:column;justify-content:center; padding:80px clamp(32px,6vw,90px);background:var(--e-sand); } .e-split__txt .e-lede{color:#3d3630;} .e-figures{display:flex;gap:40px;margin:34px 0 0;flex-wrap:wrap;} .e-fig strong{ display:block;font-size:clamp(26px,3vw,38px);font-weight:200;line-height:1; color:var(--e-terre); } .e-fig span{ display:block;margin-top:7px; font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6b6058; } /* ------------------------------------------------------------ 6. Instagram + contact ------------------------------------------------------------ */ .e-social{ background:var(--e-rose);color:var(--e-ink);text-align:center; } .e-social .e-title{color:var(--e-ink);} .e-social .e-kicker{color:var(--e-ink);justify-content:center;opacity:.72;} .e-social .e-kicker i{background:var(--e-ink);} .e-social .e-head{margin-left:auto;margin-right:auto;text-align:center;} .e-social .e-lede{margin-left:auto;margin-right:auto;color:rgba(13,13,15,.68);} .e-contact{text-align:center;background:var(--e-cream);} .e-contact .e-head{margin-left:auto;margin-right:auto;text-align:center;} .e-contact .e-lede{margin-left:auto;margin-right:auto;} .e-contact__links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} /* ------------------------------------------------------------ 7. Apparitions au scroll ------------------------------------------------------------ */ .reveal{opacity:0;transform:translateY(26px);} .reveal.is-in{ opacity:1;transform:none; transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); } .reveal[data-d="1"].is-in{transition-delay:.09s;} .reveal[data-d="2"].is-in{transition-delay:.18s;} .reveal[data-d="3"].is-in{transition-delay:.27s;} @media (prefers-reduced-motion:reduce){ .reveal,.reveal.is-in{opacity:1;transform:none;transition:none;} .e-ticker__track{animation:none;} .e-hero__media img{animation:none;transform:none;} .e-hero__rule{animation:none;} .e-scroll span::after{animation:none;} } /* ------------------------------------------------------------ 8. Responsive ------------------------------------------------------------ */ @media (max-width:1000px){ .e-split{grid-template-columns:1fr;} .e-split__img{min-height:340px;} .e-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;} .e-m1{grid-column:span 4;} .e-m2{grid-column:span 2;grid-row:span 3;} .e-m3,.e-m4,.e-m5,.e-m6,.e-m7{grid-column:span 2;grid-row:span 2;} } @media (max-width:640px){ .e-sec{padding:76px 0;} .e-wrap{padding:0 22px;} .e-hero__inner{padding:0 22px 52px;} .e-hero__foot{flex-direction:column;align-items:flex-start;gap:26px;} .e-scroll{display:none;} .e-rail{grid-auto-columns:78vw;margin:0 -22px;padding-left:22px;padding-right:22px;} .e-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px;} .e-m1,.e-m2,.e-m3,.e-m4,.e-m5,.e-m6,.e-m7{grid-column:span 2;grid-row:span 2;} .e-figures{gap:26px;} } /* ============================================================ 9. HARMONISATION DU RESTE DU SITE Ces regles ne s'appliquent que si . Elles restylent les composants existants (boutique, univers, defile, favoris, commande) sans toucher a style.css. ============================================================ */ /* ---- chrome : nav, header, footer ---- */ body.editorial .sub-nav{background:var(--e-ink);} body.editorial .site-header{ background:var(--e-cream); border-bottom:1px solid rgba(13,13,15,.09); } body.editorial .site-footer{background:var(--e-ink);} body.editorial .lang-btn.active{background:var(--e-ink);color:var(--e-white);} /* ---- typographie commune ---- */ body.editorial h1, body.editorial .section-head h2, body.editorial .split h2, body.editorial .prose h3{ font-weight:200; letter-spacing:-.02em; line-height:1.04; } body.editorial h1{font-size:clamp(38px,6.4vw,78px);} body.editorial .section-head h2, body.editorial .split h2{font-size:clamp(28px,4.4vw,52px);} body.editorial .prose h3{font-size:clamp(20px,2.4vw,28px);font-weight:400;} /* kicker : meme traitement que sur l'accueil */ body.editorial .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--e-terre); } body.editorial .eyebrow::before{ content:"";display:block;width:22px;height:1px;background:currentColor; border-radius:0;margin:0; } /* ---- en-tete de page : un vrai bandeau, pas un titre pose ---- */ body.editorial .section-tight:first-of-type{ padding:96px 0 56px; border-bottom:1px solid rgba(13,13,15,.1); margin-bottom:8px; } body.editorial .section-tight:first-of-type h1{margin:16px 0 0;} /* ---- sections ---- */ body.editorial .section{padding:110px 0;} body.editorial .section-head{margin-bottom:52px;} body.editorial .section-head p{color:#5b5157;font-weight:300;line-height:1.75;} /* les fonds roses pales deviennent sable, le charcoal devient encre */ body.editorial .section[style*="cream-2"], body.editorial .section-tight[style*="cream-2"]{background:var(--e-sand) !important;} body.editorial .section[style*="charcoal"], body.editorial .section-tight[style*="charcoal"]{background:var(--e-ink) !important;} /* ---- boutons : pilule fine, coherente avec l'accueil ---- */ body.editorial .btn{ border-radius:100px; padding:15px 30px; font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; transition:background .35s ease,color .35s ease,border-color .35s ease; } body.editorial .btn-rust{background:var(--e-rose);border:1px solid var(--e-rose);color:var(--e-ink);} body.editorial .btn-rust:hover{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-white);} body.editorial .btn-outline{background:transparent;border:1px solid rgba(13,13,15,.28);color:var(--e-ink);} body.editorial .btn-outline:hover{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-white);} /* ---- grille et cartes produit ---- */ body.editorial .product-grid{gap:26px 22px;} body.editorial .product-card{background:transparent;border:none;box-shadow:none;padding:0;} body.editorial .product-card .thumb{ border-radius:0;aspect-ratio:4/5;overflow:hidden;background:var(--e-sand); } body.editorial .product-card .thumb img{ transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .5s ease; filter:saturate(.95); } body.editorial .product-card:hover .thumb img.a{transform:scale(1.05);} body.editorial .product-card .pc-name{ font-weight:300;font-size:17px;letter-spacing:.01em; margin-top:14px;color:var(--e-ink); } body.editorial .product-card .pc-price{ font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--e-terre);margin-top:5px; } body.editorial .product-card .pc-add, body.editorial .product-card .pc-fav{ border-radius:100px;border:1px solid rgba(13,13,15,.2); background:rgba(251,251,253,.94);color:var(--e-ink); transition:background .3s ease,color .3s ease,transform .3s ease; } body.editorial .product-card .pc-add:hover, body.editorial .product-card .pc-fav:hover{background:var(--e-ink);color:var(--e-white);} body.editorial .product-card .pc-added{background:var(--e-rose);border-color:var(--e-rose);color:var(--e-ink);} body.editorial .pc-soldout-badge{ border-radius:100px;background:var(--e-ink);color:var(--e-white); font-size:10px;letter-spacing:.18em;text-transform:uppercase; } /* ---- filtres ---- */ body.editorial .filters{gap:10px;} body.editorial .filters button{ border-radius:100px;border:1px solid rgba(13,13,15,.22);background:transparent; padding:11px 22px; font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--e-ink); transition:background .3s ease,color .3s ease,border-color .3s ease; } body.editorial .filters button:hover{border-color:var(--e-ink);} body.editorial .filters button.active{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-white);} /* ---- blocs specifiques : univers, defile, commande ---- */ body.editorial .collection-card, body.editorial .show-gallery img, body.editorial .univers-media img, body.editorial .univers-media video, body.editorial .split img, body.editorial .street-grid img, body.editorial .show-hero-video{border-radius:0;} body.editorial .univers-quote{ background:var(--e-terre);color:var(--e-white);border-radius:0;border:none; font-weight:200; } body.editorial .univers-collections-box{ background:var(--e-sand);border-radius:0;border:none; } body.editorial .stat .num{color:var(--e-terre);font-weight:200;} body.editorial .stat .label{letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:#6b6058;} body.editorial .order-summary{ background:var(--e-sand);border-radius:0;border:none; } body.editorial .order-row{border-color:rgba(13,13,15,.12);} /* ---- panier et fiche produit ---- */ body.editorial .cart-drawer{background:var(--e-cream);} body.editorial .cart-drawer img, body.editorial .pm-modal, body.editorial .pm-gallery img, body.editorial .pm-thumbs img{border-radius:0;} body.editorial .pm-modal{background:var(--e-cream);} body.editorial .pm-info h2{font-weight:200;letter-spacing:-.02em;} body.editorial .pm-price{color:var(--e-terre);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px;} /* ---- media queries ---- */ @media (max-width:640px){ body.editorial .section{padding:70px 0;} body.editorial .section-tight:first-of-type{padding:56px 0 36px;} } /* ------------------------------------------------------------ 10. Correctif : debordement horizontal du header sur mobile Defaut preexistant a la refonte (verifie sur la version d'origine) : .nav-right mesure 221 px et pousse la page a 397 px de large sur un ecran de 375 px, d'ou un defilement lateral parasite. On compresse le chrome sous 640 px. ------------------------------------------------------------ */ @media (max-width:640px){ body.editorial .site-header .container{gap:8px;} body.editorial .nav-right{gap:10px;} body.editorial .nav-left{gap:10px;} body.editorial .lang-switch{gap:0;} body.editorial .lang-btn{padding:5px 7px;font-size:10px;letter-spacing:.04em;} body.editorial .nav-right > button, body.editorial .nav-left .contact-toggle{font-size:11px;} body.editorial .fav-link{font-size:15px;} body.editorial .cart-count, body.editorial .fav-count{font-size:9px;min-width:15px;height:15px;line-height:15px;} } /* et, ceinture et bretelles, la page ne defile jamais lateralement */ body.editorial{overflow-x:hidden;} /* ------------------------------------------------------------ 11. Piece vendue apres avoir ete mise au panier Chaque piece etant unique, elle peut partir pendant qu'elle attend dans le panier de quelqu'un. On la montre au lieu de la faire disparaitre en silence, mais sans prix ni total. ------------------------------------------------------------ */ body.editorial .cart-item.ci-sold img, body.editorial .order-row.ci-sold{opacity:.42;} body.editorial .cart-item.ci-sold .ci-name{text-decoration:line-through;} body.editorial .cart-item.ci-sold .ci-price, body.editorial .order-row.ci-sold span:last-child{ color:var(--e-terre);font-weight:600; font-size:11px;letter-spacing:.14em;text-transform:uppercase; } body.editorial .cart-sold-warn{ margin:0 0 14px;padding:11px 13px; background:var(--e-terre);color:var(--e-white); font-size:13px;line-height:1.5; } /* ------------------------------------------------------------ 12. Cadrage des photos de la mosaique Les cellules sont plus larges que hautes : object-fit:cover rogne donc le haut et le bas. Par defaut le rognage est centre, ce qui coupait le bonnet sur deux photos. On vise la hauteur ou se trouve la piece. Cible par le nom du fichier plutot que par la position dans la grille : le cadrage suit la photo si l'ordre change. ------------------------------------------------------------ */ @media (min-width:641px){ /* Personne allongee, tete vers le bas : le bonnet est a 74% de la hauteur. Centre, il tombait a 92% de la cellule, donc rase par le bord bas. A 100% il revient a 55%, bien au milieu. */ body.editorial .e-mosaic img[src*="skate"]{object-position:center 100%;} /* Photo verticale dans une cellule large : centre, le bonnet sortait completement du cadre. A 20% il retombe a 55% de la cellule. Zoom x1.4 en plus, centre sur le bonnet, pour qu'il occupe 41% de la hauteur au lieu de 29%. On s'arrete la : au-dela de x1.45 la photo (800 px de large) devient visiblement floue sur un ecran Retina, faute de pixels a afficher. */ body.editorial .e-mosaic img[src*="street-walk"]{ object-position:center 20%; transform:scale(1.4); transform-origin:center 57%; } body.editorial .e-mosaic figure:hover img[src*="street-walk"]{ transform:scale(1.47); } }