/* Base */ :root{ --brand:#e60023; /* red logo */ --ink:#111; /* black text */ --paper:#fff; /* white background */ --panel: #363434; /* black panel */ --muted:#f6f7f8; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08); } :root{ /* Light theme (default) */ --brand: #e60023; /* primary brand red */ --ink: #111; /* body text */ --muted-ink: #555; /* secondary text */ --paper: #fff; /* page background */ --panel: #363434; /* topbar bg (you already use this) */ --card: #fff; /* surfaces: cards, header, footer, forms */ --alt: #f6f7f8; /* section--alt bg */ --border: #eee; /* 1px borders */ --hover: #f2f2f2; /* hover bg */ --input: #fff; /* inputs bg */ --placeholder: #9aa0a6; /* placeholder text */ --link: #1d4ed8; /* links */ --link-hover: #1e40af; /* links hover */ --shadow: 0 10px 30px rgba(0,0,0,.08); color-scheme: light; } /* Manual override: data-theme="dark" on or wins */ @media (prefers-color-scheme: dark) { :root:not[data-theme]{ --ink: #e5e7eb; /* main text */ --muted-ink: #9ca3af; /* secondary text */ --paper: #0b0b0c; /* page background */ --card: #121214; /* surfaces */ --alt: #0e0e10; /* section--alt bg */ --border: #222; /* borders */ --hover: #17171a; /* hover bg */ --input: #0f0f11; /* input bg */ --placeholder: #6b7280; /* placeholder */ --link: #93c5fd; /* link */ --link-hover: #60a5fa; /* link hover */ --shadow: 0 10px 30px rgba(0,0,0,.35); color-scheme: dark; } } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.6; color:var(--ink); background:var(--paper); transition: background-color .2s ease, color .2s ease; } .container{width:min(1100px,92%);margin-inline:auto} h1,h2,h3{line-height:1.2;margin:0 0 .4rem} h1{font-size:clamp(2rem,2.6vw+1rem,3rem); color: var(--muted-ink)} h2{font-size:clamp(1.6rem,1.4vw+1rem,2.2rem); margin-bottom:1rem} h3{font-size:1.1rem} p{margin:.5rem 0 1rem} .p-title{color: var(--muted-ink)} a{ color: var(--muted-ink); text-decoration-color: var(--panel); } a:hover{ color: var(--ink); } ::placeholder{ color: var(--placeholder); } /* Optional nicer focus for keyboard users */ :focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; } .btn{ display:inline-block; padding:.9rem 1.1rem; border-radius:999px; border:2px solid var(--ink); text-decoration:none; font-weight:600; transition:transform .1s ease, background .2s ease; cursor:pointer; } .btn:hover{transform:translateY(-1px)} .btn--primary{background:var(--brand);color:var(--paper);border-color:var(--brand)} .btn--ghost{background:var(--paper)} .topbar{ position:sticky; top:0; z-index:1001; background: var(--muted); color: var(--alt); font-size: .95rem; } /* Flex row + equal spacers on both sides */ .topbar__inner{ display: flex; align-items: center; gap: clamp(.4rem, 2vw, 1rem); padding: .4rem min(3vw, 16px); width: 100%; /* don't use justify-content here; spacers will do the centering */ text-align: center; /* keeps wrapped lines visually centred */ } /* Ghost spacers push real content to the true center */ .topbar__inner::before, .topbar__inner::after{ content: ""; flex: 1 1 0; /* equal flexible space left & right */ } /* The actual items don’t grow; they stay as-is */ .topbar__link, .topbar__sep{ flex: 0 0 auto; } .topbar__link{ display: inline-flex; align-items: center; justify-content: center; gap: .4rem; opacity: .95; text-decoration: none; color: var(--muted-ink); font-size: clamp(12px, 1.1vw + 0.2rem, 15px); line-height: 1.2; } .topbar__link:hover{ opacity:1; } .topbar__sep{ opacity:.5; user-select:none; } /* On the *narrowest* screens, let it wrap cleanly & hide the dot to keep symmetry */ @media (max-width: 400px){ .topbar__inner{ flex-wrap: wrap; row-gap: .25rem; } .topbar__sep{ display:none; } } /* Header */ .header{ z-index:1000; background: var(--card); border-bottom:1px solid var(--border); } .header__inner{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; } .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none} .brand__logo{width:40px;height:40px} .brand__name{font-weight:800;letter-spacing:.2px} .nav__toggle{display:none} .nav__menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0} .nav__menu a{display:block;padding:.6rem .8rem;border-radius:10px} .nav__menu a:hover{background:var(--paper)} /* Hero */ .hero{ padding: clamp(2rem,4vw,4rem) 0; background: var(--muted); /* background: radial-gradient(1200px 400px at 120% 10%, rgba(230,0,35,.05), transparent 70%); */ } .hero__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center} .hero__copy .subnote{font-size:.9rem;color:var(--muted-ink)} .hero__image{ display:inline-flex; /* shrink-wraps to child badges */ flex-wrap:wrap; /* allows multiple rows if needed */ gap:.8rem; /* spacing between badges */ justify-content:center; align-items:center; padding:1rem; /* visual breathing room */ border-radius:var(--radius); background: var(--card); box-shadow:var(--shadow); position:relative; min-height:auto; /* remove the forced height */ width:fit-content; /* wrap width around content */ margin-inline:auto; /* center horizontally */ } .hero__badges{ position: static; top: 1rem; left: 1rem; right: 1rem; /* let it wrap naturally within image */ grid-template-columns: repeat(auto-fit, minmax(110px, max-content)); display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; align-items: center; width:fit-content; } .hero__badge{ position:relative; width:clamp(88px, 9vw, 120px); aspect-ratio:1/1; border-radius:12px; overflow:hidden; /* keep rounded corners on fill */ border:2px solid var(--ink); background:var(--bg, var(--paper)); /* optional solid bg override */ box-sizing:border-box; } /* Global safeguard so imgs can shrink */ img{ max-width:100%; height:auto; display:block; } .hero__badge img{ max-width:100%; max-height:100%; height:auto; object-fit:contain; } /* Optional: make badges stack tighter on small screens */ @media (max-width:480px){ .hero__badges{ gap:.5rem; } } /* Sections */ .section{padding: clamp(2rem,5vw,4rem) 0} .section--alt{background:var(--alt)} .grid{display:grid;gap:1rem} .cards{grid-template-columns:repeat(auto-fit, minmax(220px,1fr))} .card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)} .reasons{grid-template-columns:repeat(auto-fit, minmax(240px,1fr))} .reason{background:var(--paper);border:1px dashed var(--border);border-radius:12px;padding:1rem} /* Gallery (auto scroll) */ .gallery{ overflow:hidden; position:relative; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--card); touch-action: pan-x pinch-zoom; } /* Thumbnails: consistent, responsive height and hover lift */ .gallery__track { display: flex; gap: 12px; padding: 12px; will-change: transform; align-items: center; user-select: none; -webkit-user-drag: none; touch-action: pan-x; cursor: grab; } .gallery__track img { /* Make them smaller on page but still crisp */ height: clamp(140px, 22vh, 280px); width: auto; flex: 0 0 auto; border-radius: var(--radius); display: block; object-fit: cover; /* Needed for hover animation */ transition: transform 180ms ease, box-shadow 180ms ease; will-change: transform; cursor: inherit; /* was: zoom-in */ user-select: none; -webkit-user-drag: none; touch-action: none; /* JS handles drag */ /* IMPORTANT: allow clicking (remove if you set this earlier) */ pointer-events: auto; } .gallery__track img:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.15)); } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .gallery__track img { transition: none; } } @media (hover: none) and (pointer: coarse) { .gallery__track img:active { transform: scale(0.98); } } /* Lightbox (dialog) */ dialog#lightbox { border: 0; padding: 0; background: transparent; } dialog#lightbox::backdrop { background: rgba(0,0,0,0.5); } /* Container */ .lightbox__inner { position: fixed; inset: 4vh 4vw; /* breathing room around the box */ max-width: 92vw; max-height: 92dvh; /* use dynamic viewport on mobile */ display: grid; grid-template-rows: 1fr auto; /* image area + caption */ background: rgba(10, 10, 10, 0.4); /* semi-transparent glass */ backdrop-filter: blur(8px); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: var(--shadow); overflow: hidden; /* keep corners rounded */ } /* The image scales down to fit; never overflows */ .lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* preserve aspect ratio */ display: block; user-select: none; } .lightbox__caption { color: var(--muted-ink); font-size: 0.9rem; line-height: 1.4; padding: 0 4px; text-align: center; word-break: break-word; } /* Close button */ .lightbox__close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(0,0,0,.3); color: #fff; font-size: 18px; line-height: 36px; cursor: pointer; } /* Stage centers the image and lets it scroll if needed */ .lightbox__stage { overflow: auto; /* enables scroll for huge images */ display: flex; align-items: center; justify-content: center; padding: 8px; background: transparent; } /* Caption can scroll too if long */ .lightbox__caption { color: var(--muted); font-size: .95rem; line-height: 1.45; padding: .75rem 1rem 1rem; max-height: 28vh; overflow: auto; text-align: center; background: rgba(0, 0, 0, 0); border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Optional: click-to-zoom toggle */ .lightbox--zoom .lightbox__img { max-width: none; max-height: none; } /* Contact */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start} .form{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)} .field{display:grid;gap:.4rem;margin-bottom:.9rem} input,textarea{ width:100%;padding:.8rem;background: var(--input);color: var(--ink);border:1px solid var(--border);border-radius:10px;font:inherit } input:focus,textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)} .error{color:var(--brand);font-size:.85rem;height:1em} .form__status{margin-top:.6rem;font-weight:600} /* Footer */ .footer{border-top:1px solid var(--border);padding:1rem 0;background:var(--paper)} .footer__inner{display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap:wrap} .footer__nav{display:flex;gap:1rem} /* Responsive */ @media (max-width: 860px){ .hero__inner{grid-template-columns:1fr} .contact{grid-template-columns:1fr} .nav__toggle{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--card)} .nav__menu{display:none;flex-direction:column;position:absolute;right:4%;top:62px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.6rem;width:220px;box-shadow:var(--shadow)} .nav__menu.is-open{display:flex} } /* Reviews */ .reviews { max-width: 1100px; margin: 0 auto; padding: 1rem 0; } .reviews-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .reviews__cta, .reviews__noscript { margin-top: 1rem; color: var(--muted-ink); font-size: .95rem; } .reviews__noscript a, .reviews__cta a { color: inherit; } .review-card { border: 1px solid var(--border); border-radius: 14px; padding: 1rem; background: var(--paper); box-shadow: var(--shadow); display: grid; gap: .6rem; } .review-header { display: flex; align-items: center; gap: .75rem; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); flex: 0 0 36px; object-fit: cover; } .name { font-weight: 600; } .meta { font-size: .85rem; color: var(--muted-ink); } .stars { font-size: 0; } .star { display: inline-block; width: 18px; height: 18px; vertical-align: middle; color: var(--brand); } .review-text { margin-top: .25rem; line-height: 1.5; } .review-text[data-clamped="true"] { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .badge { font-size: .75rem; background: var(--card); color: var(--muted-ink); border-radius: 999px; padding: .15rem .5rem; margin-left: .5rem; } .reviews-marquee { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 1rem; box-shadow: var(--shadow); touch-action: pan-x pinch-zoom; } .reviews-marquee__status { display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; margin: 0; color: var(--muted-ink); font-size: .95rem; text-align: center; } .reviews-marquee[data-ready="true"] .reviews-marquee__status { display: none; } .reviews__track { display: flex; gap: 12px; padding: 12px; will-change: transform; align-items: stretch; touch-action: pan-x; -webkit-user-drag: none; user-select: none; touch-action: none; } .reviews__track .review-card { flex: 0 0 clamp(260px, 32vw, 360px); cursor: grab; transition: transform 180ms ease, box-shadow 180ms ease; -webkit-user-drag: none; user-select: none; touch-action: none; } .reviews__track .review-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.15)); } .reviews__track:empty { padding: 0; min-height: 0; } @media (prefers-reduced-motion: reduce) { .reviews__track .review-card:hover { transform: none; box-shadow: var(--shadow); } } /* Make it obvious you can drag */ .gallery__track, .reviews__track { cursor: grab; } .is-dragging .gallery__track, .is-dragging .reviews__track { cursor: grabbing; } /* Optional: while dragging, don’t lift tiles on hover */ .is-dragging .gallery__track img:hover, .is-dragging .reviews__track .review-card:hover { transform: none; box-shadow: var(--shadow); }