/* * site.css — restul design-ului (critical.css conține variabilele și primul * ecran, inlinat separat în ). Mobile-first; breakpoints 30/48/64em. */ /* ---------- Open Sans, self-hosted (SIL OFL) — fontul site-ului vechi ---------- */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-regular-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/open-sans-bold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/open-sans-bold-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- tipografie ---------- */ h2 { font-size: 1.4rem; } h3 { font-size: 1.125rem; } p { margin: 0 0 var(--space-3); } ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25rem; } .tagline { font-size: 1.15rem; color: var(--grey-600); } .lead, .product-lead, .page-subtitle, .contact-intro { font-size: 1.0625rem; color: var(--grey-600); } @media (min-width: 48em) { h1 { font-size: 2.5rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } } @media (min-width: 64em) { h1 { font-size: 2.75rem; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------- structura paginii ---------- */ .page { padding-block: var(--space-4) var(--space-6); } .section { padding-block: var(--space-5); } .section--muted { background: var(--grey-100); } .section--dark { background: var(--black); color: var(--white); } .section--dark a:not(.btn) { color: var(--white); } .section-head { margin-bottom: var(--space-4); } /* ---------- butoane ---------- */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.2rem; border-radius: var(--radius); text-decoration: none; font-weight: 700; border: 2px solid transparent; cursor: pointer; font-size: 1rem; font-family: var(--font-body); } .btn--primary { background: var(--red); color: var(--white); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--red-dark); color: var(--white); } .btn--ghost { background: transparent; border-color: currentColor; color: inherit; } .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--white); color: var(--black); border-color: var(--white); } .section:not(.section--dark) .btn--ghost { border-color: var(--black); color: var(--black); } .section:not(.section--dark) .btn--ghost:hover, .section:not(.section--dark) .btn--ghost:focus-visible { background: var(--black); color: var(--white); border-color: var(--black); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); } .cta-row p { margin: 0; } /* ---------- antet: navigație și butoanele de contact ---------- */ .site-header { border-bottom: 4px double var(--rule); position: sticky; top: 0; z-index: 20; } @media (min-width: 30em) { .logo__text { display: flex; flex-direction: column; line-height: 1.15; } } .logo__name { font-weight: 800; font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; } .logo__tagline { font-size: .75rem; color: var(--grey-600); letter-spacing: .1em; } .logo:hover .logo__name { color: var(--red); } .btn-call, .btn-whatsapp { border-radius: var(--radius); } .btn-call, .btn-whatsapp, .callbar__btn { font-weight: 700; } .site-nav__toggle summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 700; user-select: none; } .site-nav__toggle summary::-webkit-details-marker { display: none; } .site-nav__toggle summary::before { content: ""; width: 1.1rem; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } .site-nav__toggle[open] summary::before { height: 1.1rem; box-shadow: none; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transform: rotate(45deg); } .site-nav__list { list-style: none; margin: 0; padding: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--grey-300); } .site-nav__list ul { list-style: none; margin: 0; padding: 0; } .site-nav__list li { border-top: 1px solid var(--grey-300); } .site-nav__list > li:first-child { border-top: 0; } .site-nav__list a { display: block; padding: .7rem 0; color: var(--black); text-decoration: none; font-weight: 700; } .site-nav__list a:hover, .site-nav__list a:focus-visible { color: var(--red); } .site-nav__list li > ul { padding-left: var(--space-3); } .site-nav__list li > ul li { border-top: none; } .site-nav__list li > ul a { padding: .6rem 0; font-weight: 400; font-size: .9375rem; } .header-cta__icon, .btn svg { flex: none; fill: currentColor; } .btn-call:hover, .btn-call:focus-visible { background: var(--red-dark); color: var(--white); } .btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: var(--whatsapp-dark); color: var(--white); } @media (min-width: 64em) { .header-cta__label { display: inline; } } @media (min-width: 48em) { .site-nav__toggle { display: none; } .site-nav__toggle ~ .site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; grid-column: 2; grid-row: 1; gap: var(--space-4); } .site-nav__list { border-top: 0; padding: 0; } .site-nav__list li { border-top: 0; position: relative; } .site-nav__list > li > a { padding: .85rem 0; } .site-nav__list li > ul { display: none; position: absolute; top: 100%; left: -1rem; min-width: 14rem; background: var(--white); border: 1px solid var(--grey-300); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 12px 24px rgba(22,33,44,.16); padding: .35rem 0; z-index: 30; } .site-nav__list li:hover > ul, .site-nav__list li:focus-within > ul { display: block; } .site-nav__list li > ul a { padding: .5rem 1rem; } .site-nav__list li > ul a:hover, .site-nav__list li > ul a:focus-visible { background: var(--grey-100); } .btn-whatsapp { display: inline-flex; } .callbar { display: none; } body { padding-bottom: 0; } } /* ---------- bară fixă de telefon/WhatsApp (mobil) ---------- */ .callbar { z-index: 50; gap: 1px; background: var(--black-line); border-top: 1px solid var(--grey-400); box-shadow: 0 -2px 10px rgba(0, 0, 0, .25); } .callbar__btn:hover { filter: brightness(.92); } .callbar__btn:focus-visible { outline-color: var(--white); outline-offset: -3px; } @media print { .site-nav, .header-cta, .callbar, .skip-link { display: none; } .site-header { background: none; border-bottom: 0; position: static; } body { padding-bottom: 0; } } /* ---------- firul Ariadnei ---------- */ .breadcrumbs { padding-block: var(--space-2); font-size: .875rem; color: var(--grey-600); } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: .35rem; color: var(--grey-300); } .breadcrumbs a { color: var(--grey-600); text-decoration: underline; } .breadcrumbs [aria-current="page"] { color: var(--black); } /* ---------- subsol ---------- */ .site-footer { background: var(--black); color: var(--white); padding-block: var(--space-5) var(--space-4); } .site-footer a { color: var(--white); } .site-footer__grid { display: grid; gap: var(--space-4); } .site-footer h2 { font-size: 1.0625rem; margin-bottom: var(--space-2); } .site-footer p { margin: 0 0 var(--space-2); color: var(--grey-300); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .35rem; } .site-footer .hours h3 { font-size: .9375rem; margin-top: var(--space-3); } .site-footer .hours th, .site-footer .hours td { border-color: var(--black-line); color: var(--grey-300); } .site-footer .hours th { color: var(--grey-300); font-weight: 700; } .site-footer__bottom { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--black-line); font-size: .8125rem; color: var(--grey-300); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; } .site-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); } .site-footer__bottom a { color: var(--grey-300); } @media (min-width: 48em) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- pagina principală: hero ---------- */ .hero { background: var(--black); color: var(--white); padding-block: var(--space-6); position: relative; overflow: hidden; } .hero h1 { color: var(--white); } .hero .tagline, .section--dark .tagline, .section--dark .lead { color: var(--grey-300); } .hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-4); align-items: center; } .hero__text > * { max-width: 38rem; } .hero__media picture, .hero__media img { width: 100%; border-radius: var(--radius); } @media (min-width: 48em) { .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } /* ---------- carduri de produs / listări ---------- */ .product-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .product-card { border: 1px solid var(--grey-300); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; } .product-card > a { color: inherit; text-decoration: none; } .product-card picture, .product-card img { aspect-ratio: 4 / 3; width: 100%; object-fit: contain; background: var(--grey-100); } .product-card__placeholder { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--grey-100); color: var(--grey-600); font-size: 2.5rem; font-weight: 700; } .product-card h3 { font-size: 1rem; font-weight: 700; margin: .75rem .75rem .25rem; } .product-card p { font-size: .9375rem; color: var(--grey-600); margin: 0 .75rem .75rem; } .product-card__note { align-self: flex-start; margin: 0 .75rem .75rem; padding: .2rem .6rem; border-radius: 999px; background: var(--grey-100); color: var(--black); font-size: .8125rem; } /* categorii */ .category-branch { padding-block: var(--space-4); border-top: 1px solid var(--grey-300); } .category-branch:first-of-type { border-top: 0; padding-top: 0; } .link-pills { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .link-pills a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--grey-300); border-radius: 999px; text-decoration: none; color: var(--black); font-size: .9375rem; } .link-pills a:hover, .link-pills a:focus-visible { border-color: var(--red); color: var(--red); background: var(--grey-100); } .subcategories { margin-bottom: var(--space-4); } .service-cta, .about-contact { background: var(--grey-100); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-4); } /* liste de servicii / alte servicii */ .service-list, .other-services ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); } .service-list > li, .other-services li { border: 1px solid var(--grey-300); border-radius: var(--radius); padding: var(--space-3); } .service-list > li { padding: 0; overflow: hidden; background: var(--white); } .service-list__media { display: block; } .service-list__media picture, .service-list__media > picture img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey-100); } .service-list__placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--grey-100); } .service-list__placeholder img { width: 22%; height: auto; opacity: .6; } .service-list__body { padding: var(--space-3); } .service-list h2 { margin-bottom: .35rem; } .service-list h2 a, .other-services a { text-decoration: none; color: var(--black); } .service-list h2 a:hover, .other-services a:hover { color: var(--red); } .service-list p { margin: 0; color: var(--grey-600); } @media (min-width: 48em) { .service-list { grid-template-columns: repeat(2, 1fr); } } /* meta produs */ .product-meta { color: var(--grey-600); font-size: .9375rem; margin-bottom: var(--space-3); } .product-note { background: var(--grey-100); border-left: 4px solid var(--red-bright); padding: .75rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: var(--space-3); } /* galerie: poza principală mare, miniaturi dedesubt; toate slide-urile stau în containerul principal și doar cel activ e vizibil (JS comută [hidden]) */ .product-gallery { max-width: 40rem; margin-bottom: var(--space-4); } .product-gallery__main { display: block; border-radius: var(--radius); background: var(--grey-100); overflow: hidden; cursor: zoom-in; } .product-gallery__main picture { display: block; } .product-gallery__main picture[hidden] { display: none; } .product-gallery__main img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; } .product-gallery__thumbs { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .product-gallery__thumbs a { display: block; width: 5rem; border-radius: var(--radius); border: 2px solid transparent; background: var(--grey-100); overflow: hidden; } .product-gallery__thumbs a[aria-current="true"] { border-color: var(--red); } .product-gallery__thumbs a:hover, .product-gallery__thumbs a:focus-visible { border-color: var(--grey-600); } .product-gallery__thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; } .lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; } .lightbox::backdrop { background: rgba(0, 0, 0, .9); } .lightbox[open] { display: grid; place-items: center; } .lightbox img { max-width: min(96vw, 75rem); max-height: 92vh; object-fit: contain; background: var(--white); border-radius: var(--radius); } .lightbox__close, .lightbox__nav { position: fixed; border: 0; background: rgba(0, 0, 0, .55); color: var(--white); cursor: pointer; font-size: 2rem; line-height: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; } .lightbox__close { top: .75rem; right: .75rem; } .lightbox__nav { top: 50%; transform: translateY(-50%); } .lightbox__nav--prev { left: .75rem; } .lightbox__nav--next { right: .75rem; } .lightbox__close:hover, .lightbox__nav:hover, .lightbox__close:focus-visible, .lightbox__nav:focus-visible { background: var(--red); } .product-features ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); } .product-features li { padding-left: 1.5rem; position: relative; margin-bottom: .4rem; } .product-features li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 700; } .product-specs table, .hours table, .prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .product-specs th, .hours th, .prose th, .product-specs td, .hours td, .prose td { padding: .55rem .75rem; border-bottom: 1px solid var(--grey-300); text-align: left; font-size: .9375rem; } .product-specs th, .hours th, .prose th { color: var(--grey-600); font-weight: 700; white-space: nowrap; } /* video (facade YouTube) */ .video-facade { position: relative; display: block; max-width: 30rem; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--black); } .video-facade img { aspect-ratio: 16/9; object-fit: cover; opacity: .85; } .video-facade__play { position: absolute; inset: 0; margin: auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; } .video-facade__play::before { content: ""; border-style: solid; border-width: .6rem 0 .6rem 1rem; border-color: transparent transparent transparent var(--white); margin-left: .2rem; } .video-facade__label { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .75rem; background: rgba(22,33,44,.8); color: var(--white); font-size: .875rem; } .product-video iframe { width: 100%; max-width: 30rem; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); } /* ---------- conținut brut (description / body) ---------- */ .prose h2 { margin-top: var(--space-4); } .prose h2:first-child { margin-top: 0; } .prose a { text-decoration: underline; } .prose ul, .prose ol { margin-bottom: var(--space-3); } .prose figure { margin: 0 0 var(--space-3); } .prose picture { display: block; } .prose figure img { max-width: 100%; height: auto; border-radius: var(--radius); background: var(--grey-100); } .prose-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); } .prose-gallery figure { margin: 0; } .prose-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; } @media (min-width: 48em) { .prose-gallery { grid-template-columns: repeat(4, 1fr); } } /* ---------- program ---------- */ .hours h3 { margin-top: var(--space-3); } /* ---------- pagina de contact ---------- */ .contact-layout { display: grid; gap: var(--space-4); align-items: start; } .panel, .contact-page .hours { background: var(--grey-100); border: 1px solid var(--grey-300); border-radius: var(--radius); padding: var(--space-4); } .panel > h2, .contact-page .hours > h2 { margin-top: 0; } .panel--accent { background: var(--white); border-top: 4px solid var(--red-bright); } .contact-page .hours h3:first-of-type { margin-top: 0; } .contact-page .hours table { display: table; } .contact-page .hours td { text-align: right; } .contact-page .hours th, .contact-page .hours td { padding-block: .45rem; } .panel--success { background: #EEF7F0; border-top: 4px solid #1E8E3E; } .panel--success h2 { display: flex; align-items: center; gap: .6rem; color: #1E7A37; } .panel--success svg { flex: none; } .contact-thanks__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; } /* stânga: blocul de încredere (adresă, telefon, e-mail, butoane) */ .contact-points { list-style: none; margin: 0 0 var(--space-4); padding: 0; } .contact-points li { padding-block: .7rem; border-top: 1px solid var(--grey-300); } .contact-points li:first-child { border-top: 0; padding-top: 0; } .contact-points__label { display: block; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-600); } .contact-points__value { display: block; } .contact-points__phone { font-size: 1.375rem; font-weight: 700; text-decoration: none; } .contact-points__link { display: inline-block; margin-top: .2rem; font-size: .9375rem; } .contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; } /* pe mobil, bara fixă de jos are deja Sună + WhatsApp — nu dublăm în cartea de informații */ @media (max-width: 47.99em) { .contact-actions { display: none; } } .contact-actions .btn { flex: 1 1 9rem; justify-content: center; } .btn--whatsapp { background: var(--whatsapp); color: var(--white); } .btn--whatsapp:hover, .btn--whatsapp:focus-visible { background: var(--whatsapp-dark); color: var(--white); } /* dreapta: formularul */ .contact-form .field { margin-bottom: var(--space-3); } .contact-form label { display: block; font-weight: 700; margin-bottom: .3rem; } .field__hint { font-weight: 400; font-size: .875rem; color: var(--grey-600); } .contact-form input, .contact-form textarea { width: 100%; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; color: var(--black); background: var(--white); } .contact-form textarea { min-height: 9rem; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--red); } .contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border: 2px solid var(--red); } .field-error { display: block; color: var(--red); font-weight: 700; font-size: .875rem; margin-top: .3rem; } .form-alert { background: var(--grey-100); border-left: 4px solid var(--red-bright); padding: .75rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: var(--space-3); } .req { color: var(--red); } .field--check { display: flex; gap: .75rem; align-items: flex-start; } .contact-form .field--check input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; padding: 0; flex: none; accent-color: var(--red); } .contact-form .field--check label { font-weight: 400; margin: 0; } .field--check a { text-decoration: underline; } .privacy-note { font-size: .875rem; color: var(--grey-600); margin-bottom: var(--space-3); } .field-submit { margin-bottom: 0; } .related, .home-featured, .home-categories, .home-services { margin-bottom: var(--space-4); } @media (min-width: 48em) { .field-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-3); } .contact-page .panel, .contact-page .hours { padding: var(--space-5); } .contact-layout > * { max-width: 40rem; } } @media (min-width: 64em) { .contact-layout { grid-template-columns: 5fr 7fr; column-gap: var(--space-6); } .contact-layout > * { max-width: none; } .contact-details { grid-column: 1; grid-row: 1; } .contact-form { grid-column: 2; grid-row: 1 / span 2; } .contact-page .hours { grid-column: 1; grid-row: 2; } .contact-form textarea { min-height: 11rem; } }