/* ========================================================================== Atelier Matei – Full Stylesheet Non-critical styles (below-the-fold + enhancements). Critical above-the-fold CSS is inlined in . ========================================================================== */ /* ---- Selection ---- */ ::selection { background: rgba(139, 94, 60, 0.3); color: var(--black); } /* ---- Base reset (supplements inline critical CSS) ---- */ hr { display: block; height: 1px; border: 0; border-top: 1px solid var(--border); margin: 1em 0; padding: 0; } audio, canvas, iframe, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } /* ---- Typography supplements ---- */ h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 16px; } h3 { font-size: 1.15rem; margin-bottom: 8px; } p { margin-top: 0; color: var(--text-muted); } .section-label { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown-mid); margin-bottom: 10px; } .section-intro { max-width: 560px; margin-bottom: 48px; font-size: 1.05rem; } /* ---- Focus styles (accessibility) ---- */ :focus-visible { outline: 3px solid var(--brown-mid); outline-offset: 2px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ---- Buttons supplements ---- */ .btn-secondary { background: transparent; color: var(--brown-dark); border-color: var(--brown-dark); } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--brown-dark); color: var(--cream); } .btn-large { padding: 18px 40px; font-size: 1.05rem; } /* ---- Mobile nav ---- */ .mobile-nav { display: none; flex-direction: column; background: var(--brown-dark); padding: 12px 20px 20px; border-top: 1px solid rgba(255,255,255,0.1); } .mobile-nav a { color: var(--cream); padding: 10px 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .mobile-nav a:focus-visible { outline-color: var(--cream); } .mobile-nav .nav-cta { margin-top: 12px; background: var(--brown-mid); padding: 12px 18px; border-radius: var(--radius); text-align: center; border-bottom: none; } .mobile-nav.open { display: flex; } /* ---- Despre noi ---- */ .despre { padding: var(--section-pad); background: var(--cream); content-visibility: auto; contain-intrinsic-size: auto 600px; } .despre-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .despre-text h2 { margin-bottom: 20px; } .despre-text p { margin-bottom: 16px; } .despre-text .btn { margin-top: 8px; } .despre-image { aspect-ratio: 4/3; border-radius: 6px; overflow: hidden; background: var(--border); } .despre-image img { width: 100%; height: 100%; object-fit: cover; } /* ---- Servicii ---- */ .servicii { padding: var(--section-pad); background: var(--white); content-visibility: auto; contain-intrinsic-size: auto 700px; } .servicii-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; } .serviciu-card { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: box-shadow var(--transition); } .serviciu-card:hover { box-shadow: 0 6px 24px rgba(62,44,35,0.12); } .serviciu-img-wrap { aspect-ratio: 4/3; background: var(--border); overflow: hidden; } .serviciu-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .serviciu-body { padding: 20px; } .serviciu-body h3 { color: var(--brown-dark); margin-bottom: 8px; } .serviciu-body p { font-size: 0.92rem; margin: 0; } /* ---- CTA mid-page ---- */ .cta-mid { background: var(--brown-dark); padding: 40px 20px; } .cta-mid-inner { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } .cta-mid-inner p { color: var(--cream); font-family: var(--font-title); font-size: 1.4rem; margin: 0; } /* ---- Galerie ---- */ .galerie { padding: var(--section-pad); background: var(--cream); content-visibility: auto; contain-intrinsic-size: auto 800px; } .galerie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .galerie-item { aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; background: var(--border); cursor: pointer; } .galerie-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .galerie-item:hover img { transform: scale(1.04); } /* Lightbox */ .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox-img { max-width: 90vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; margin: auto; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255,255,255,0.15); border: none; color: #fff; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background var(--transition); } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover, .lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible { background: rgba(255,255,255,0.3); } .lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; } .lightbox-close { top: 20px; right: 20px; } .lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); } /* ---- De ce noi ---- */ .de-ce-noi { padding: var(--section-pad); background: var(--white); content-visibility: auto; contain-intrinsic-size: auto 500px; } .avantaje-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 40px; } .avantaj { display: flex; flex-direction: column; gap: 10px; } .avantaj-icon { width: 48px; height: 48px; color: var(--brown-mid); } .avantaj-icon svg { width: 100%; height: 100%; } .avantaj h3 { color: var(--brown-dark); margin: 0; } .avantaj p { margin: 0; font-size: 0.92rem; } /* ---- CTA Principal ---- */ .cta-main { padding: var(--section-pad); background: var(--brown-dark); text-align: center; } .cta-main-inner h2 { color: var(--cream); font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 16px; } .cta-main-inner > p { color: rgba(245,240,230,0.82); font-size: 1.05rem; max-width: 500px; margin: 0 auto 32px; } .cta-phone { margin-top: 20px !important; font-size: 0.95rem !important; color: rgba(245,240,230,0.7) !important; } .cta-phone a { color: var(--cream); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ---- Footer ---- */ .site-footer { background: var(--black); color: rgba(255,255,255,0.7); } .footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 48px; padding-bottom: 48px; } .footer-brand .logo { color: var(--cream); font-size: 1.25rem; display: inline-block; margin-bottom: 12px; } .footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.88rem; line-height: 1.7; margin: 0; } .footer-contact p { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 12px; } .footer-contact p:last-child { margin-bottom: 0; } .footer-contact a { color: rgba(255,255,255,0.85); transition: color var(--transition); } .footer-contact a:hover { color: var(--cream); } .footer-contact svg { flex-shrink: 0; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); text-align: center; padding: 16px 20px; } .footer-bottom p { color: rgba(255,255,255,0.4); font-size: 0.8rem; margin: 0; } /* ---- Utility ---- */ .hidden, [hidden] { display: none !important; } .visually-hidden { border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } /* ---- Responsive ---- */ @media (max-width: 768px) { :root { --section-pad: 56px 20px; } .hero-overlay { background: linear-gradient(to bottom, rgba(30,18,10,0.7), rgba(30,18,10,0.6)); } .despre-inner { grid-template-columns: 1fr; gap: 36px; } .despre-image { order: -1; } .cta-mid-inner { flex-direction: column; gap: 20px; text-align: center; } .footer-inner { grid-template-columns: 1fr; gap: 32px; } .galerie-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } } @media (max-width: 480px) { .galerie-grid { grid-template-columns: 1fr 1fr; } .avantaje-grid { grid-template-columns: 1fr; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Print ---- */ @media print { *, *::before, *::after { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } img { page-break-inside: avoid; } h2, h3 { page-break-after: avoid; } .site-header, .lightbox, .hamburger, .mobile-nav { display: none !important; } }