/* ============================================================ VHYNX — Agence digitale créative · Marrakech Direction : Prestige Chrome (noir profond / blanc / chrome) FICHIER : base.css ============================================================ */ /* Police « JetBrains Mono » chargée via Google Fonts dans le (défaut, zéro erreur). POUR AUTO-HÉBERGER : déposez les .woff2 dans assets/fonts/ (voir fonts/README.txt), décommentez le bloc @font-face ci-dessous, décommentez le preload dans le et retirez les liens Google Fonts. ------------------------------------------------------------------------------------ @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");} ------------------------------------------------------------------------------------ */ /* ---------- Layout helpers ---------- */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);} .section{padding-block:clamp(72px,14vh,180px);border-top:1px solid var(--line);} .section--flush{border-top:0;} .section--alt{background:var(--bg-2);} .center{text-align:center;} /* ---------- Typography ---------- */ .eyebrow{ font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); } .display{ font-weight:700; line-height:.84; letter-spacing:-.045em; font-size:clamp(52px,13vw,190px); } .h1{font-weight:700;line-height:.86;letter-spacing:-.04em;font-size:clamp(46px,10vw,150px);} .h2{font-weight:700;line-height:.92;letter-spacing:-.03em;font-size:clamp(34px,6vw,82px);} .h3{font-weight:500;line-height:1.12;letter-spacing:-.01em;font-size:clamp(21px,2.6vw,30px);} .lead{font-weight:300;line-height:1.12;letter-spacing:-.02em;font-size:clamp(26px,4.4vw,64px);color:#f2f2f2;} .body{font-size:clamp(15px,1.4vw,17px);line-height:1.75;color:#b4b4b4;font-weight:300;} .small{font-size:14px;line-height:1.65;color:var(--muted-2);font-weight:300;} .chrome{ background:linear-gradient(150deg,#ffffff 0%,var(--chrome-b) 45%,var(--chrome-c) 78%,#ffffff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .dot{ background:linear-gradient(90deg,var(--chrome-a),var(--chrome-b) 55%,var(--chrome-c)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ---------- Utility spacing ---------- */ .mt-s{margin-top:16px;}.mt-m{margin-top:28px;}.mt-l{margin-top:44px;}.mt-xl{margin-top:64px;} .mb-l{margin-bottom:44px;}.mb-xl{margin-bottom:64px;} .maxw-sm{max-width:440px;}.maxw-md{max-width:560px;}.maxw-lg{max-width:720px;} /* ---------- Grids ---------- */ .grid{display:grid;gap:20px;} .grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} @media (min-width:700px){.grid-2{grid-template-columns:1fr 1fr;}.grid-3{grid-template-columns:1fr 1fr;}} @media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr);}} /* ---------- Reveal on scroll (only hidden when JS is active) ---------- */ .reveal{transition:opacity 1s var(--ease),transform 1s var(--ease);} .js .reveal{opacity:0;transform:translateY(42px);} .js .reveal.is-in{opacity:1;transform:none;} .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} /* hero title lines (visible by default, JS animates in) */ .line-mask{overflow:hidden;} .line{display:block;transition:opacity 1s var(--ease),transform 1.1s var(--ease);} .js .line{opacity:0;transform:translateY(30px);} .js .line.is-in{opacity:1;transform:none;} /* ---------- Animations ---------- */ @keyframes sweep{0%{transform:translateX(-120%) skewX(-18deg);}100%{transform:translateX(230%) skewX(-18deg);}} @keyframes cue{0%,100%{opacity:.25;transform:translateX(-50%) translateY(0);}50%{opacity:.8;transform:translateX(-50%) translateY(7px);}} @keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}} .sweep{position:absolute;top:0;bottom:0;left:0;width:34%;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(223,225,227,.05),transparent);animation:sweep 11s ease-in-out infinite;} .hero__cue{animation:cue 2.4s ease-in-out infinite;}