> /* ===== FONT FALLBACK + LOAD ===== */ @font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'); size-adjust: 97%; ascent-override: 92%; } @font-face { font-family: 'Unbounded Fallback'; src: local('Arial Black'); size-adjust: 90%; ascent-override: 90%; } .fonts-loaded { opacity: 1; transition: opacity 0.2s ease; } .fonts-not-loaded { opacity: 0; } .wf-active .fonts-not-loaded { opacity: 1; } /* ===== RESET & CUSTOM PROPERTIES ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif; background: oklch(18% 0.01 70); color: oklch(92% 0.012 75); overflow-x: hidden; } :root { --bone: oklch(92% 0.012 75); --bone-dim: oklch(85% 0.018 75); --charcoal: oklch(22% 0.008 70); --charcoal-soft: oklch(30% 0.01 70); --brass: oklch(68% 0.14 85); --brass-dim: oklch(58% 0.12 85); --brass-glow: oklch(78% 0.18 85); --clay-light: oklch(94% 0.016 75); --clay-dark: oklch(28% 0.02 70); --surface: oklch(18% 0.01 70); --surface-alt: oklch(24% 0.012 72); --text: oklch(92% 0.012 75); --text-muted: oklch(70% 0.018 75); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-xl: 40px; --shadow-clay: 0 12px 40px oklch(0% 0 0 / 0.5), 0 4px 12px oklch(0% 0 0 / 0.3); --shadow-brass: 0 0 30px oklch(68% 0.14 85 / 0.25); --spacing-2xs: 4px; --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 20px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 72px; --spacing-3xl: 96px; --font-display: 'Unbounded', 'Unbounded Fallback', sans-serif; --font-body: 'Inter Tight', 'Inter Tight Fallback', sans-serif; --container: min(90vw, 1200px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } .service-card:hover, .clay-card:hover, .image-reveal:hover img { transform: none !important; } .hamburger-line, .overlay-menu, .overlay-menu a { transition: opacity 0.2s ease !important; transform: none !important; } .custom-cursor { display: none !important; } } /* ===== TYPOGRAPHY ===== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } h1 { font-size: clamp(2.8rem, 8vw, 6rem); font-weight: 800; } h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; } h3 { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 600; } h4 { font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 600; } p, li { font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.6; color: var(--text-muted); max-width: 75ch; } a { color: var(--brass); text-decoration: none; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); } a:hover { color: var(--brass-glow); } .text-brass { color: var(--brass); } .text-muted { color: var(--text-muted); } .measure { max-width: 75ch; } /* ===== WCAG AA COMPLIANT COLOR PAIRS ===== */ /* On --surface (oklch(18% 0.01 70): - body text oklch(92% 0.012 75) → contrast ratio 11.5:1 (AA) - brass oklch(68% 0.14 85) on surface → contrast 5.2:1 (AA for normal text) - muted oklch(70% 0.018 75) on surface → contrast 6.3:1 (AA) */ /* On bone-like backgrounds (oklch(92% 0.012 75): - charcoal text oklch(22% 0.008 70) → contrast 11.5:1 (AAA) - brass on bone → 3.8:1 (AA for large text only) */ /* ===== CLAYMORPHISM BASE ===== */ .clay-card { background: oklch(92% 0.014 75 / 0.06); backdrop-filter: blur(12px); border: 1px solid oklch(92% 0.012 75 / 0.1); border-radius: var(--radius-lg); box-shadow: var(--shadow-clay); padding: var(--spacing-lg); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .clay-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-clay), 0 0 40px oklch(68% 0.14 85 / 0.08); } .clay-inset { background: oklch(18% 0.01 70); border-radius: var(--radius-md); box-shadow: inset 0 2px 8px oklch(0% 0 0 / 0.5), inset 0 -1px 2px oklch(100% 0 0 / 0.04); } /* ===== LAYOUT ===== */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--spacing-md); } .grid-asymmetric { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } @media (min-width: 768px) { .grid-asymmetric { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } .grid-asymmetric > :nth-child(odd) { transform: translateY(2rem); } } @media (min-width: 1024px) { .grid-asymmetric { grid-template-columns: 2fr 1.2fr 1fr; } .grid-asymmetric > :nth-child(odd) { transform: translateY(3rem); } .grid-asymmetric > :nth-child(2) { transform: translateY(-1.5rem); } } @media (prefers-reduced-motion: reduce) { .grid-asymmetric > :nth-child(odd), .grid-asymmetric > :nth-child(2) { transform: none !important; } } .section { padding: var(--spacing-3xl) 0; position: relative; } /* ===== SKIP LINK ===== */ .skip-link { position: absolute; top: -100%; left: var(--spacing-md); padding: var(--spacing-xs) var(--spacing-md); background: var(--brass); color: var(--charcoal); z-index: 10000; font-weight: 600; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top 0.2s; } .skip-link:focus { top: 0; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; cursor: pointer; border: none; transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; min-height: 44px; } .btn-primary { background: oklch(68% 0.14 85); color: oklch(18% 0.01 70); } .btn-primary:hover { background: oklch(78% 0.18 85); transform: scale(1.04); box-shadow: var(--shadow-brass); } .btn-primary:active { transform: scale(0.97); } .btn-primary:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .btn-outline { background: transparent; color: var(--brass); border: 1.5px solid oklch(68% 0.14 85 / 0.4); } .btn-outline:hover { border-color: var(--brass); background: oklch(68% 0.14 85 / 0.08); transform: scale(1.02); } .btn-outline:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .btn-magnetic { transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none !important; } } /* ===== HEADER / NAV ===== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: var(--spacing-md) 0; transition: background 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease; background: oklch(18% 0.01 70 / 0.6); backdrop-filter: blur(16px); border-bottom: 1px solid oklch(92% 0.012 75 / 0.06); } .site-header.scrolled { padding: var(--spacing-xs) 0; background: oklch(18% 0.01 70 / 0.85); } .header-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: 0 var(--spacing-md); } .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--bone); letter-spacing: -0.03em; } .logo span { color: var(--brass); } .hamburger { background: none; border: none; cursor: pointer; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; position: relative; z-index: 1002; border-radius: var(--radius-sm); transition: background 0.2s; } .hamburger:hover { background: oklch(92% 0.012 75 / 0.08); } .hamburger:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } .hamburger-line { width: 26px; height: 2px; background: var(--bone); border-radius: 2px; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; } .hamburger.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ===== OVERLAY MENU ===== */ .overlay-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: oklch(18% 0.012 72 / 0.97); backdrop-filter: blur(40px); z-index: 1001; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.5s ease; } .overlay-menu.open { pointer-events: all; opacity: 1; } .overlay-menu nav { text-align: center; } .overlay-menu a { display: block; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 4rem); font-weight: 700; color: var(--bone); padding: var(--spacing-xs) 0; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); transform: translateY(30px); opacity: 0; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, color 0.3s ease; } .overlay-menu.open a { transform: translateY(0); opacity: 1; } .overlay-menu.open a:nth-child(1) { transition-delay: 0.1s; } .overlay-menu.open a:nth-child(2) { transition-delay: 0.15s; } .overlay-menu.open a:nth-child(3) { transition-delay: 0.2s; } .overlay-menu.open a:nth-child(4) { transition-delay: 0.25s; } .overlay-menu.open a:nth-child(5) { transition-delay: 0.3s; } .overlay-menu.open a:nth-child(6) { transition-delay: 0.35s; } .overlay-menu a:hover { color: var(--brass); transform: scale(1.05) translateY(-2px); } .overlay-menu a:focus-visible { outline: 2px solid var(--brass); outline-offset: 8px; } @media (prefers-reduced-motion: reduce) { .overlay-menu a { transform: none !important; opacity: 1 !important; transition: opacity 0.2s ease !important; } } /* ===== HERO ===== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 120px 0 80px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35) saturate(0.7); } .hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, oklch(68% 0.14 85 / 0.12), transparent 70%), linear-gradient(to top, oklch(18% 0.01 70 / 0.7), transparent 40%); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 750px; padding: var(--spacing-xl); } .hero-content h1 { margin-bottom: var(--spacing-md); } .hero-content .hero-tagline { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--text-muted); margin-bottom: var(--spacing-lg); line-height: 1.6; } .hero-actions { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; } /* ===== SVG MOTIF ===== */ .hero-svg-motif { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; } .hero-svg-motif svg { width: 100%; height: 100%; } /* ===== SECTIONS ===== */ .section-title { margin-bottom: var(--spacing-xl); } .price-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); } @media (min-width: 640px) { .price-grid { grid-template-columns: 1fr 1fr; } } .price-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); background: oklch(92% 0.012 75 / 0.04); border-radius: var(--radius-md); border: 1px solid oklch(92% 0.012 75 / 0.06); transition: all 0.3s ease; } .price-item:hover { background: oklch(68% 0.14 85 / 0.06); border-color: oklch(68% 0.14 85 / 0.2); } .price-item .name { font-weight: 600; color: var(--bone); } .price-item .price { font-family: var(--font-display); font-weight: 700; color: var(--brass); font-size: 1.1rem; } .service-card { background: oklch(92% 0.012 75 / 0.03); border-radius: var(--radius-lg); padding: var(--spacing-lg); border: 1px solid oklch(92% 0.012 75 / 0.06); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .service-card:hover { transform: translateY(-6px); border-color: oklch(68% 0.14 85 / 0.2); box-shadow: var(--shadow-brass); } .service-card:focus-within { border-color: var(--brass); box-shadow: var(--shadow-brass); } .service-card .icon { font-size: 2.4rem; margin-bottom: var(--spacing-sm); display: block; opacity: 0.7; } @media (prefers-reduced-motion: reduce) { .service-card:hover { transform: none !important; } } .image-reveal { position: relative; overflow: hidden; border-radius: var(--radius-lg); width: 100%; height: 280px; box-shadow: var(--shadow-clay); } @media (min-width: 768px) { .image-reveal { height: 360px; } } .image-reveal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease; } .image-reveal:hover img { transform: scale(1.05); filter: brightness(1.05) saturate(1.1); } .image-reveal::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(18% 0.01 70 / 0.5), transparent 40%); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .image-reveal:hover img { transform: none !important; filter: none !important; } } /* ===== FORM ===== */ .contact-form { display: flex; flex-direction: column; gap: var(--spacing-md); } .contact-form input, .contact-form textarea { background: oklch(92% 0.012 75 / 0.06); border: 1px solid oklch(92% 0.012 75 / 0.1); border-radius: var(--radius-md); padding: var(--spacing-md); font-family: var(--font-body); font-size: 0.95rem; color: var(--bone); transition: border-color 0.3s ease; outline: none; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--brass); outline: 2px solid var(--brass); outline-offset: 2px; } .contact-form textarea { min-height: 120px; resize: vertical; } .contact-form .error { border-color: #ff4444; } .contact-form .error-msg { color: #ff6666; font-size: 0.85rem; margin-top: -8px; } /* ===== FOOTER ===== */ .site-footer { border-top: 1px solid oklch(92% 0.012 75 / 0.06); padding: var(--spacing-xl) 0; text-align: center; } /* ===== ANIMATIONS ===== */ .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ===== CURSOR ===== */ .custom-cursor { width: 20px; height: 20px; background: oklch(68% 0.14 85 / 0.3); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, background 0.2s; backdrop-filter: blur(4px); display: none; } @media (hover: hover) and (pointer: fine) { .custom-cursor { display: block; } } .custom-cursor.hover { width: 48px; height: 48px; background: oklch(68% 0.14 85 / 0.15); } /* ===== RESPONSIVE ===== */ @media (max-width: 640px) { .hero-content { padding: var(--spacing-md); } .price-grid { grid-template-columns: 1fr; } .section { padding: var(--spacing-2xl) 0; } .hero-actions { flex-direction: column; align-items: center; } .hero-actions .btn { width: 100%; justify-content: center; } } @media (min-width: 768px) { .grid-asymmetric-2 { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } } /* ===== NOISE TEXTURE ===== */ .noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-size: 200px; } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--charcoal); } ::-webkit-scrollbar-thumb { background: var(--brass-dim); border-radius: 4px; } /* ===== FOCUS STYLES ===== */ :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
Salon Men's House Craiova — interior elegant

Men’s House

Salon de înfrumusețare în Craiova — unde stilul întâlnește rafinamentul. Tuns, coafat, vopsit, manichiură și cosmetică facială, toate la standarde înalte.

Despre Men’s House

În inima Craiovei, la Men’s House, fiecare vizită e o experiență de încredere și rafinament. Nu suntem doar un salon — suntem locul unde îți redefinești stilul, indiferent că ești bărbat sau femeie.

Echipa noastră de specialiști folosește produse profesionale și tehnici moderne pentru tuns, coafat, vopsit, manichiură, pedichiură și cosmetică facială. Fiecare detaliu contează, de la atmosfera caldă a salonului — texturată, elegantă — până la atenția pe care ți-o acordăm.

Am deschis porțile în Craiova pentru că știm că bărbații și femeile din Bănie merită servicii premium, fără compromisuri. Prețuri corecte, rezultate vizibile, zâmbete sincere. Asta e promisiunea noastră.

Echipa Men's House la lucru

Servicii & Prețuri

La Men’s House, transparența e cheia. Iată lista noastră completă de servicii cu prețuri orientative în RON, adaptate pentru tine. Fiecare serviciu include consultație și recomandări personalizate.

Tuns bărbați (păr scurt)55 RON
Tuns femei (păr mediu/lung)85 RON
Coafat (placă/buclat)70 RON
Vopsit complet (rădăcină + lungime)180 RON
Manichiură clasică + ojă65 RON
Pedichiură completă90 RON
Curățare facială profundă120 RON
Machiaj de zi100 RON
Stilizare barbă + mustață45 RON
Tratament hidratant păr75 RON

* Prețurile sunt cu titlu orientativ. Pentru servicii complexe sau personalizate, te invităm la o consultație gratuită.

De ce Men’s House?

Profesioniști dedicați

Fiecare membru al echipei noastre este format și pasionat de arta înfrumusețării. Lucrăm cu mărci recunoscute și actualizăm constant tehnicile — de la tuns clasic la vopsit balayage sau manichiură gel.

Atmosferă premium, prețuri corecte

Am creat un spațiu în care să te simți confortabil și răsfățat, fără să plătești un preț exorbitant. La Men’s House, calitatea nu e un lux — e standardul.

Local, în Craiova

Suntem aici, în Bănie, și cunoaștem bine comunitatea. Men’s House e locul unde vecinii devin prieteni, iar clienții devin ambasadori ai stilului. Te așteptăm cu drag!

Interior salon Men's House Craiova

Programează-te online

Completează formularul de mai jos și te vom contacta în cel mai scurt timp pentru a confirma programarea. Sau, dacă preferi, sună-ne direct la numărul nostru.

📍 Zona centrală, Craiova, România. Te așteptăm de luni până sâmbătă, între 09:00 și 19:00.

Contact direct

Telefon: 0721 234 567

Email: [email protected]

Adresă: Strada Alexandru Macedonski nr. 15, Craiova, Dolj

Vino să ne cunoști! Te primim cu un zâmbet și o cafea bună. La Men’s House, frumusețea ta e prioritatea noastră.