/* optional helper if JS toggles .lang-en / .lang-de on */ .lang-en [data-lang="de"], .lang-de [data-lang="en"]{display:none;} /* ─────────────────── BASIC RESET ─────────────────── */ *{box-sizing:border-box;margin:0;padding:0} body{ /* body text stays neutral while headings/nav use brand font */ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55;color:#333; } /* ─────────────────── TYPOGRAPHY ─────────────────── */ h1,h2,h3,h4,h5,h6{ font:var(--brand-font); color:var(--brand-color); margin:.3em 0 .8em; } /* ─────────────────── NAV BAR ─────────────────── */ #top-menu{ position:fixed;inset:0 0 auto;z-index:9999; backdrop-filter:blur(6px); background:rgba(255,255,255,.8); border-bottom:1px solid #eaeaea; } .nav-container{ max-width:var(--content-max); margin:auto; padding:.5rem 1rem; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap; } nav ul{display:flex;gap:1.4rem;list-style:none} nav a{ font:var(--brand-font); /* brand type now on menu items */ color:var(--brand-color); text-decoration:none; position:relative; } nav a::after{ content:"";position:absolute;left:0;bottom:-2px; width:0;height:2px;background:var(--brand); transition:.25s; } nav a:hover::after{width:100%} .lang-toggle button{ border:none;border-radius:.25rem;padding:.2rem .6rem; font:var(--brand-font); background:var(--brand);color:#fff;cursor:pointer; } .instagram-link{font-size:.8rem} /* ─────────────────── HERO BANNER ─────────────────── */ .hero-banner{ position:relative; height:min(60vh,500px); margin-top:var(--nav-height); background:url("images/background.jpg") center/cover no-repeat; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center; } /* logo block (scissors + text) */ .hero-logo{display:flex;align-items:flex-end;margin-bottom:1.2rem} .scissor-L{ width:clamp(120px,14vw,200px); height:auto; transform:rotate(-10deg); margin-right:5.25rem; } .logo-text{line-height:1.05} .brand{ /* “ondon-style” → ~75 % larger than before */ font:700 clamp(4.9rem,8vw+1rem,8rem)/1 "Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif; color:var(--brand-color); white-space:nowrap; } .tag{ /* “Hair & Beauty” → ~50 % larger than before */ font:700 clamp(1.8rem,3vw+.6rem,2.7rem)/1.1 "Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif; color:var(--brand-color); letter-spacing:.03em; } /* info block (opening hours + phone) */ .hero-info{ backdrop-filter:blur(3px); background:rgba(255,255,255,.75); padding:.8rem 1.2rem;border-radius:6px;margin-top:1rem; } .hours-table{border-collapse:collapse;margin:auto} .hours-table th,.hours-table td{padding:.2rem .6rem;text-align:left} .hours-table tr+tr td,.hours-table tr+tr th{border-top:1px solid #ddd} .hero-phone{ margin-top:.4rem; font:var(--brand-font); color:var(--brand-color); } /* ----------------------------------------------------- Hero logo layout & sizing tweaks ----------------------------------------------------- */ .hero-logo{ display:flex; /* scissors + text side-by-side */ align-items:flex-end; gap:.35rem; margin-bottom:1.3rem; } /* bigger scissors for the “L” */ .scissor-L{ width:clamp(400px,15vw,40px); /* was 120-200px */ height:auto; transform:rotate(-8deg); } /* stack the two word-mark lines vertically */ .logo-text{line-height:1.05;text-align:left} .brand{display:block} .tag{display:block;margin-top:.2rem} /* enlarged word-mark (75 % / 50 % bigger) */ .brand{ font:700 clamp(4.9rem,8vw+1rem,8rem)/1 "Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif; color:var(--brand-color); } .tag{ font:700 clamp(1.8rem,3vw+.6rem,2.7rem)/1.1 "Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif; color:var(--brand-color); letter-spacing:.03em; } /* ─────────────────── GENERIC CONTENT SECTIONS ─────────────────── */ .page-section{max-width:var(--content-max);margin:4rem auto;padding:0 1rem} /* ─────────────────── RESPONSIVE TWEAKS ─────────────────── */ @media(max-width:640px){ .nav-container{flex-direction:column;gap:.4rem} } /* FINAL OVERRIDE ─────────────────────────────── */ .hero-banner .brand{ font:700 3rem/1 "Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif !important; color:#663f00 !important; } .hero-banner .tag{ font:700 2rem/1.05 "Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif !important; color:#663f00 !important; } /* ───── Hero logo: scissors + word-mark ───────────────────────────── */ .hero-banner{ position:relative; display:flex; flex-direction:column; align-items:flex-start; /* keep the “stack” left-aligned */ } /* the whole logo group */ .hero-logo{ position:relative; /* anchor for absolute children */ display:inline-block; max-width:100%; /* keep it responsive */ } /* scissors – already scaled with clamp(), no change here */ .scissor-L{ width:clamp(120px,19vw,220px); height:auto; margin-bottom:-0.4rem; /* let the blade sit on baseline */ } /* ▸ NEW — pull the text left so it starts roughly where the yellow line in your screenshot is. The value is responsive: 1rem on a phone — avoids touching the scissors 4rem on a desktop — compensates for the empty canvas area in PNG */ .logo-text{ position:absolute; top:11%; /* fine-tune vertical overlap */ left:calc( 1rem + (100vw - 375px) * 0.08 ); /* 1 – 4 rem */ /* let pointer events go through the empty space (nice when using transparent PNGs): */ pointer-events:none; } /* word-mark */ .brand{ font:700 clamp(2.8rem,8vw,6.4rem)/1 "Arial Rounded MT Bold", "Helvetica Rounded",system-ui,sans-serif; color:#663f00; } /* tag-line */ .tag{ font:700 clamp(1.4rem,3.2vw,3.2rem)/1.1 "Arial Rounded MT Bold", "Helvetica Rounded",system-ui,sans-serif; color:#663f00; } .custom-bar { border: none; height: 3px; background-color: #663f00; /* match your brand color */ margin: 2rem 0; } /* ────────── Adjusted HERO STYLES ────────── */ .hero-banner { position: relative; height: min(60vh, 500px); margin-top: var(--nav-height); background: url("images/background.jpg") center/cover no-repeat; display: flex; align-items: center; justify-content: flex-start; padding: 1.5em; } .hero-logo { position: absolute; top: 1.5em; left: 1.5em; display: flex; align-items: flex-end; gap: 0.5rem; z-index: 2; } .logo-text { text-align: left; line-height: 1.05; } .brand { font: 700 clamp(2.8rem, 8vw, 6.4rem)/1 "Arial Rounded MT Bold", "Helvetica Rounded", system-ui, sans-serif; color: var(--brand-color); } .tag { font: 700 clamp(1.4rem, 3.2vw, 3.2rem)/1.1 "Arial Rounded MT Bold", "Helvetica Rounded", system-ui, sans-serif; color: var(--brand-color); letter-spacing: .03em; margin-top: 0.2rem; } .hero-info { margin-left: 50%; transform: translateY(-50%); top: 50%; position: absolute; backdrop-filter: blur(3px); background: rgba(255, 255, 255, 0.75); padding: 1rem 1.5rem; border-radius: 6px; z-index: 2; } .hours-table { border-collapse: collapse; margin: auto; } .hours-table th, .hours-table td { padding: 0.4rem 0.8rem; text-align: left; font-size: 1.5em; } .hours-table tr + tr td, .hours-table tr + tr th { border-top: 1px solid #ddd; } .hero-phone { margin-top: 0.6rem; font: var(--brand-font); font-size: 1.8em; color: var(--brand-color); } .price-table { width: 100%; border-collapse: collapse; margin-top: 2rem; } .price-table th, .price-table td { padding: 0.6rem 1rem; border: 1px solid #ccc; text-align: left; vertical-align: top; } .price-table thead { background-color: #f7f7f7; } .price-table small { font-size: 0.8em; color: #666; } /* Responsive tweaks */ @media(max-width: 640px) { .hero-info { margin-left: auto; right: 1.5em; left: auto; transform: none; top: auto; bottom: 1.5em; } .hero-logo { flex-direction: column; align-items: flex-start; } .logo-text { position: static; } } /* ─────────────────── VARIABLES ─────────────────── */ :root{ --brand:#c33; /* accent (nav underline, etc.) */ --brand-color:#332200; /* dark tan used for big titles & nav links */ --brand-font:700 clamp(1.3rem,2vw,1.8rem)/1 "Arial Rounded MT Bold","Helvetica Rounded", system-ui,sans-serif; --nav-height:70px; --content-max:1100px; }