/* Polices hébergées sur le site (SIL Open Font License 1.1 — textes de licence dans assets/fonts/). Aucune connexion à un service de polices tiers. Chemins relatifs à ce fichier. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/manrope-latin.woff2') format('woff2'); } @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('assets/fonts/bodoni-moda-latin.woff2') format('woff2'); } @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/bodoni-moda-italic-latin.woff2') format('woff2'); } /* ============================================================ Stéphanie Langlois — Institut K-Beauty Paris 17e Design tokens — palette chaude beige/marron, inspirée des vraies photos de l'institut (parquet chêne, rideaux ambrés, murs beige, lin blanc). Plus de doré ni de bleu Imperial. - encre : #2B211A (brun profond, texte) - bois/cognac : #8B5A34 (accent chaud — CTA, liens actifs) - parchemin : #F1E9DD (fond clair, teinte murs de l'institut) Display : "Bodoni Moda" — Body : Helvetica Neue / Helvetica / Arial ============================================================ */ /* Police Bodoni Moda chargée depuis le de chaque page (voir avec preconnect) — plus d'@import ici : le chargement HTML est découvert plus tôt par le navigateur, ce qui améliore la performance sans changer le rendu. */ :root { --ink: #2B211A; --gold: #8B5A34; --gold-bg: #F1E9DD; --ivoire: #EFE6D8; --taupe: #6E6154; --off-white: #FBF8F3; --line: rgba(43, 33, 26, 0.14); --max: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; overflow-x: hidden; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; color: var(--ink); background: var(--off-white); line-height: 1.6; font-size: 16px; } h1, h2, h3, .display { font-weight: 400; margin: 0; color: var(--ink); } h1 { font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.4em; } h2 { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase; } h3 { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 1.15rem; letter-spacing: 0.02em; } .display { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } .eyebrow { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 500; } .container { max-width: var(--max); margin: 0 auto; padding: 0 6vw; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 248, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 96px; } .site-header .brand { grid-column: 1; justify-self: start; } .site-header nav.main-nav { grid-column: 2; justify-self: center; } .site-header .nav-cta-link { grid-column: 3; justify-self: end; } .header-logo { height: 76px; width: auto; display: block; } @media (max-width: 880px) { .site-header .container { height: 72px; /* réserve l'espace du bouton hamburger (absolument positionné) à droite */ padding-right: calc(6vw + 48px); } .header-logo { height: 56px; } } @media (max-width: 430px) { .header-logo { height: 48px; } } .seal { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 1.05rem; letter-spacing: 0.05em; flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 14px; } .brand-name { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 1.3rem; letter-spacing: 0.04em; } .main-nav { display: flex; align-items: center; gap: 2.4rem; } nav.main-nav a { font-size: 0.85rem; letter-spacing: 0.04em; position: relative; padding: 4px 0; } nav.main-nav a.active, nav.main-nav a:hover { color: var(--gold); } .nav-pill { background: rgba(43,33,26,0.06); padding: 0.55em 1.1em; border-radius: 20px; font-size: 0.9rem; } .nav-pill:hover { background: rgba(43,33,26,0.1); } .nav-cta-link { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; } .btn { display: inline-block; padding: 0; border: none; background: none; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; color: var(--ink); } .btn:hover { color: var(--gold); } /* Un .btn "secondaire" (non btn-primary) suppose par défaut un fond clair (texte --ink). Sur un fond sombre comme .cta-band, ce texte devient invisible (même couleur que le fond) jusqu'au survol. On corrige la couleur par défaut dans ce contexte précis, sans toucher .btn-primary ni le comportement au survol (géré par la règle .btn:hover ci-dessus). */ .cta-band .btn:not(.btn-primary) { color: var(--off-white); } /* .btn-primary : lisible par défaut sur fond clair (cas général du site, texte --ink, comme .btn) ; texte clair uniquement sur fond sombre (.cta-band). Auparavant le texte était toujours clair, donc invisible sur fond clair (hero, soins, ExoBrows, contact). */ .btn-primary { color: var(--ink); } .btn-primary:hover { color: var(--gold); } .cta-band .btn-primary, .eb-cta-photo .btn-primary { color: var(--off-white); } .cta-band .btn-primary:hover, .eb-cta-photo .btn-primary:hover { color: var(--gold-bg); } .nav-cta { margin-left: 0.5rem; } /* Cibles tactiles confortables (~44px) sur mobile, sans changer le rendu visuel : padding invisible + marge négative compensatoire pour ne pas modifier l'espacement perçu entre les éléments. */ @media (max-width: 880px) { .nav-cta-link, .btn { display: inline-block; padding: 11px 2px; margin: -11px -2px; } } /* ---------- Mobile nav toggle (source unique) ---------- */ .nav-toggle { display: none; position: absolute; right: 6vw; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--ink); padding: 0.4rem; background: none; border: none; cursor: pointer; } @media (max-width: 880px) { .main-nav { display: none; } .nav-toggle { display: block; padding: 0.6rem; } } /* ---------- Hero ---------- */ .hero-divider { width: 64px; height: 1px; background: currentColor; opacity: 0.6; margin: 1.4rem 0 1.6rem; } /* ---------- Sections ---------- */ .split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: center; } .split img { width: 100%; height: 640px; object-fit: cover; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 2rem; } .split img { height: 380px; } } .partners-band { background: var(--off-white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.5rem 0; overflow: hidden; } .partners-band h3 { text-align: center; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 1.6rem; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .marquee { display: flex; width: max-content; animation: marquee-scroll 28s linear infinite; } .marquee span { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 1.4rem; letter-spacing: 0.06em; color: var(--ink); opacity: 0.55; padding: 0 3.5rem; white-space: nowrap; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee { animation: none; overflow-x: auto; } } .reviews-band { background: var(--off-white); padding: 5.5rem 0; overflow: hidden; } .reviews-head { text-align: center; margin-bottom: 3rem; } .reviews-rating { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 2.2rem; color: var(--gold); } .reviews-rating span { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.95rem; color: var(--taupe); margin-left: 0.5em; } .reviews-track { display: flex; width: max-content; gap: 1.8rem; animation: reviews-scroll 42s linear infinite; } .review-card { width: 360px; flex-shrink: 0; background: var(--gold-bg); border-radius: 4px; padding: 2rem 1.9rem; } .review-card .stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.15em; margin-bottom: 1rem; } .review-card p { font-size: 0.98rem; line-height: 1.65; color: var(--ink); min-height: 6.5em; } .review-card .who { margin-top: 1rem; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--taupe); } @keyframes reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .reviews-track { animation: none; overflow-x: auto; } } @media (max-width: 880px) { .review-card { width: 280px; } } .card-photo { display: block; width: calc(100% + 4rem); margin: -2.4rem -2rem 1.4rem; aspect-ratio: 0.86; border-radius: 4px 4px 0 0; overflow: hidden; } .card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .card-photo.card-photo--contain { background: var(--ivoire); } .card-photo.card-photo--contain img { object-fit: contain; } .site-footer { background: var(--ink); color: rgba(250,250,248,0.85); padding: 4.5rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(250,250,248,0.15); align-items: start; } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; } } .footer-brand { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; margin: 0 0 1em; } .footer-grid .footer-col h3:first-child { margin-top: 0; } .footer-col + .footer-col { margin-top: 0; } .footer-block { margin-bottom: 1.8rem; } .footer-block:last-child { margin-bottom: 0; } .footer-grid h3 { color: var(--gold-bg); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; margin: 0 0 0.6em; } .footer-grid p { font-size: 0.95rem; opacity: 0.85; line-height: 1.6; margin: 0; } .footer-grid a:hover { color: var(--gold-bg); } .footer-social { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.95rem; } .footer-social svg { width: 20px; height: 20px; flex-shrink: 0; } .footer-bottom { padding-top: 1.6rem; font-size: 0.8rem; opacity: 0.6; text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hero-meta { font-size: 1rem; letter-spacing: 0.04em; opacity: 0.9; margin-bottom: 1.6em; } .faq-item { border-bottom: 1px solid var(--line); padding: 1.6rem 0; } .faq-item h3 { margin-bottom: 0.6em; text-transform: none; letter-spacing: 0; } .faq-item p { font-size: 0.98rem; line-height: 1.7; opacity: 0.9; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } .compare-grid .compare-col { background: var(--off-white); border: 1px solid var(--line); border-radius: 4px; padding: 2rem; } .compare-grid h3 { margin-bottom: 0.8em; } @media (max-width: 880px) { .compare-grid { grid-template-columns: 1fr; } } .before-after-placeholder { border: 1px dashed var(--line); border-radius: 4px; padding: 3.5rem 2rem; text-align: center; color: var(--taupe); font-size: 0.95rem; } section { padding: 6.5rem 0; } @media (max-width: 880px) { section { padding: 4.75rem 0; } } @media (max-width: 480px) { section { padding: 3.75rem 0; } } .section-alt { background: var(--ivoire); } .section-tint { background: var(--gold-bg); } .section-head { max-width: 40em; margin-bottom: 3rem; } .section-head h2 { margin-top: 0.5em; } /* ---------- Process (signature: 조 — Korean seal-numbered steps) ---------- */ .process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; counter-reset: step; } .step { position: relative; padding-top: 2.2rem; border-top: 1px solid var(--line); } .step .num { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-style: italic; color: var(--gold); font-size: 1.1rem; display: block; margin-bottom: 0.6em; } .step h3 { margin-bottom: 0.5em; } @media (max-width: 880px) { .process { grid-template-columns: 1fr; gap: 2.4rem; } } .split .process { grid-template-columns: 1fr; gap: 1.6rem; } /* ---------- Service cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; } .card { background: var(--off-white); border: 1px solid var(--line); border-radius: 4px; padding: 2.4rem 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(43,33,26,0.08); } .card h3 { margin-bottom: 0.5em; } .card p { font-size: 0.95rem; opacity: 0.85; } .card .price { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; color: var(--gold); font-size: 1.15rem; margin-top: 0.8em; display: block; } @media (max-width: 880px) { .cards { grid-template-columns: 1fr; } } /* ---------- Testimonials ---------- */ .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .testimonial { border-left: 2px solid var(--gold); padding-left: 1.6rem; } .testimonial p { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-style: italic; font-size: 1.15rem; line-height: 1.5; } .testimonial .who { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); } @media (max-width: 880px) { .testimonials { grid-template-columns: 1fr; } } /* ---------- Practical info block ---------- */ .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .info-grid h3 { color: var(--gold); font-size: 1rem; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 0.8em; } .info-grid p { font-size: 1.05rem; } @media (max-width: 880px) { .info-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ---------- CTA band ---------- */ .cta-band { background: var(--ink); color: var(--off-white); text-align: center; padding: 5.5rem 0; } .cta-band .eyebrow { color: var(--gold); } .cta-band h2 { color: var(--off-white); margin: 0.5em 0 1.2em; } /* ---------- Footer ---------- */ footer { background: var(--ink); color: rgba(250,250,248,0.7); padding: 3.5rem 0 2rem; font-size: 0.85rem; } footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } footer a:hover { color: var(--gold); } .footer-bottom { border-top: 1px solid rgba(250,250,248,0.15); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.75rem; opacity: 0.6; text-align: center; } /* ---------- Soins page specifics ---------- */ .soins-category { margin-bottom: 5rem; } .soins-category .section-head { margin-bottom: 2.5rem; } .soins-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 3rem; } .soin-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; } .soin-row .name { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 1.25rem; } .soin-row .price { font-size: 0.9rem; color: var(--gold); white-space: nowrap; } @media (max-width: 880px) { .soins-list { grid-template-columns: 1fr; } } /* ---------- Contact page ---------- */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .contact-form { display: grid; gap: 1.2rem; } .contact-form label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 0.4em; } .contact-form input, .contact-form textarea { width: 100%; padding: 0.9em 1em; border: 1px solid var(--line); background: var(--off-white); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.95rem; color: var(--ink); } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .map-frame { width: 100%; height: 340px; border: 1px solid var(--line); filter: grayscale(0.3) contrast(1.05); } @media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; } } /* ============================================================ Navigation — dropdowns desktop + menu mobile ============================================================ */ .nav-item { position: relative; display: inline-flex; align-items: center; } .dropdown-panel { position: absolute; top: 100%; left: 50%; min-width: 220px; background: var(--off-white); border: 1px solid var(--line); border-radius: 4px; padding: 0.7rem 0; box-shadow: 0 18px 40px rgba(43,33,26,0.10); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; z-index: 60; } .nav-item:hover .dropdown-panel, .nav-item:focus-within .dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-panel a { display: block; padding: 0.55em 1.4rem; font-size: 0.85rem; letter-spacing: 0.02em; white-space: nowrap; } .dropdown-panel a:hover { color: var(--gold); background: rgba(43,33,26,0.04); } @media (prefers-reduced-motion: reduce) { .dropdown-panel { transition: none; } } /* ---------- Mobile menu overlay ---------- */ .mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--off-white); padding: 2rem 6vw 3rem; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; } .mobile-menu.open { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } } .mobile-menu-close { align-self: flex-end; color: var(--ink); margin-bottom: 1.5rem; padding: 0.6rem; } .mobile-menu > a, .mobile-menu-item > .mobile-submenu-toggle { font-family: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; font-size: 1.15rem; color: var(--ink); padding: 1rem 0; border-bottom: 1px solid var(--line); text-align: left; background: none; border-left: none; border-right: none; border-top: none; width: 100%; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .mobile-submenu-toggle .chevron { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.1rem; color: var(--gold); transition: transform 0.2s ease; } .mobile-submenu-toggle.open .chevron { transform: rotate(45deg); } .mobile-submenu { display: none; flex-direction: column; padding: 0.3rem 0 0.6rem 1.2rem; } .mobile-submenu.open { display: flex; } .mobile-submenu a { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.98rem; padding: 0.7rem 0; color: var(--taupe); } .mobile-submenu a:hover { color: var(--gold); } @media (min-width: 881px) { .mobile-menu, .mobile-menu-close { display: none; } }