AI update: שדרוג לדף הדמו של 'Hair On Top' (מספרה/עיצוב שיער):
1) תמונות: בכל מקום שיש placeholder או חוסר תמונה — הוסף תמונות סטו
This commit is contained in:
+121
-80
@@ -41,8 +41,8 @@
|
|||||||
<main id="main-content">
|
<main id="main-content">
|
||||||
<section id="hero" class="hero">
|
<section id="hero" class="hero">
|
||||||
<div class="hero-bg">
|
<div class="hero-bg">
|
||||||
<div class="hero-pattern"></div>
|
<img src="https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1920&q=80" alt="" class="hero-image" loading="eager">
|
||||||
<div class="hero-gradient"></div>
|
<div class="hero-overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<p class="hero-tag">מספרה מעצבת בחולון</p>
|
<p class="hero-tag">מספרה מעצבת בחולון</p>
|
||||||
@@ -77,54 +77,45 @@
|
|||||||
</header>
|
</header>
|
||||||
<div class="services-grid">
|
<div class="services-grid">
|
||||||
<article class="service-card reveal">
|
<article class="service-card reveal">
|
||||||
<div class="service-icon">
|
<div class="service-image">
|
||||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
<img src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=600&q=80" alt="תספורת גברים מודרנית" loading="lazy">
|
||||||
<circle cx="32" cy="20" r="12" fill="none" stroke="currentColor" stroke-width="2"/>
|
</div>
|
||||||
<path d="M20 52c0-8 5-14 12-14s12 6 12 14" fill="none" stroke="currentColor" stroke-width="2"/>
|
<div class="service-content">
|
||||||
<line x1="44" y1="16" x2="56" y2="8" stroke="currentColor" stroke-width="2"/>
|
<h3 class="service-title">תספורות טרנדיות</h3>
|
||||||
<line x1="44" y1="24" x2="56" y2="32" stroke="currentColor" stroke-width="2"/>
|
<p class="service-desc">תספורות עדכניות לגברים ונשים בהתאמה אישית. אנחנו עוקבים אחרי הטרנדים העולמיים ומתאימים את הסגנון בדיוק אליכם.</p>
|
||||||
</svg>
|
<span class="service-tag">גברים ונשים</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="service-title">תספורות טרנדיות</h3>
|
|
||||||
<p class="service-desc">תספורות עדכניות לגברים ונשים בהתאמה אישית. אנחנו עוקבים אחרי הטרנדים העולמיים ומתאימים את הסגנון בדיוק אליכם.</p>
|
|
||||||
<span class="service-tag">גברים ונשים</span>
|
|
||||||
</article>
|
</article>
|
||||||
<article class="service-card reveal">
|
<article class="service-card reveal">
|
||||||
<div class="service-icon">
|
<div class="service-image">
|
||||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&q=80" alt="צביעת שיער מקצועית" loading="lazy">
|
||||||
<rect x="16" y="12" width="32" height="44" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
</div>
|
||||||
<circle cx="32" cy="32" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
|
<div class="service-content">
|
||||||
<line x1="32" y1="40" x2="32" y2="48" stroke="currentColor" stroke-width="2"/>
|
<h3 class="service-title">צביעות מקצועיות</h3>
|
||||||
</svg>
|
<p class="service-desc">צביעה מלאה, גוונים, אומברה ובלאיאז׳. אנחנו משתמשים בחומרים איכותיים ששומרים על בריאות השיער.</p>
|
||||||
|
<span class="service-tag">כל סוגי הצבע</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="service-title">צביעות מקצועיות</h3>
|
|
||||||
<p class="service-desc">צביעה מלאה, גוונים, אומברה ובלאיאז׳. אנחנו משתמשים בחומרים איכותיים ששומרים על בריאות השיער.</p>
|
|
||||||
<span class="service-tag">כל סוגי הצבע</span>
|
|
||||||
</article>
|
</article>
|
||||||
<article class="service-card service-card-featured reveal">
|
<article class="service-card service-card-featured reveal">
|
||||||
<div class="service-badge">הכי מבוקש</div>
|
<div class="service-badge">הכי מבוקש</div>
|
||||||
<div class="service-icon">
|
<div class="service-image">
|
||||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
<img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=600&q=80" alt="החלקת שיער מושלמת" loading="lazy">
|
||||||
<path d="M12 32 C12 16 24 8 32 8 C40 8 52 16 52 32 C52 48 40 56 32 56 C24 56 12 48 12 32" fill="none" stroke="currentColor" stroke-width="2"/>
|
</div>
|
||||||
<line x1="32" y1="16" x2="32" y2="48" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 2"/>
|
<div class="service-content">
|
||||||
<circle cx="32" cy="32" r="4" fill="currentColor"/>
|
<h3 class="service-title">החלקות שיער</h3>
|
||||||
</svg>
|
<p class="service-desc">החלקה ברזילאית, יפנית וקראטין. תוצאות חלקות ומבריקות שנשמרות לאורך זמן.</p>
|
||||||
|
<span class="service-tag">תוצאות לטווח ארוך</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="service-title">החלקות שיער</h3>
|
|
||||||
<p class="service-desc">החלקה ברזילאית, יפנית וקראטין. תוצאות חלקות ומבריקות שנשמרות לאורך זמן.</p>
|
|
||||||
<span class="service-tag">תוצאות לטווח ארוך</span>
|
|
||||||
</article>
|
</article>
|
||||||
<article class="service-card reveal">
|
<article class="service-card reveal">
|
||||||
<div class="service-icon">
|
<div class="service-image">
|
||||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
<img src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?w=600&q=80" alt="הבהרות שיער טבעיות" loading="lazy">
|
||||||
<circle cx="32" cy="32" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
|
</div>
|
||||||
<path d="M32 12 L36 28 L32 32 L28 28 Z" fill="currentColor"/>
|
<div class="service-content">
|
||||||
<circle cx="32" cy="32" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
<h3 class="service-title">הבהרות</h3>
|
||||||
</svg>
|
<p class="service-desc">הבהרות מקצועיות, היילייטס ובייביליס. יוצרים עומק וממד טבעי בשיער שלכם.</p>
|
||||||
|
<span class="service-tag">מראה טבעי</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="service-title">הבהרות</h3>
|
|
||||||
<p class="service-desc">הבהרות מקצועיות, היילייטס ובייביליס. יוצרים עומק וממד טבעי בשיער שלכם.</p>
|
|
||||||
<span class="service-tag">מראה טבעי</span>
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -138,40 +129,28 @@
|
|||||||
</header>
|
</header>
|
||||||
<div class="gallery-grid">
|
<div class="gallery-grid">
|
||||||
<figure class="gallery-item gallery-item-tall reveal" aria-label="תספורת גברים">
|
<figure class="gallery-item gallery-item-tall reveal" aria-label="תספורת גברים">
|
||||||
<div class="gallery-visual" style="--hue: 45;">
|
<img src="https://images.unsplash.com/photo-1621605815971-fbc98d665033?w=600&q=80" alt="תספורת גברים מעוצבת" loading="lazy">
|
||||||
<div class="gallery-pattern gallery-pattern-1"></div>
|
<figcaption class="gallery-label">תספורת גברים</figcaption>
|
||||||
<span class="gallery-label">תספורת גברים</span>
|
|
||||||
</div>
|
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="gallery-item reveal" aria-label="צביעה אומברה">
|
<figure class="gallery-item reveal" aria-label="צביעה אומברה">
|
||||||
<div class="gallery-visual" style="--hue: 35;">
|
<img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?w=600&q=80" alt="צביעת אומברה מרהיבה" loading="lazy">
|
||||||
<div class="gallery-pattern gallery-pattern-2"></div>
|
<figcaption class="gallery-label">צביעה אומברה</figcaption>
|
||||||
<span class="gallery-label">צביעה אומברה</span>
|
|
||||||
</div>
|
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="gallery-item reveal" aria-label="החלקה ברזילאית">
|
<figure class="gallery-item reveal" aria-label="החלקה ברזילאית">
|
||||||
<div class="gallery-visual" style="--hue: 50;">
|
<img src="https://images.unsplash.com/photo-1522337094846-8a818192de1f?w=600&q=80" alt="שיער חלק ומבריק" loading="lazy">
|
||||||
<div class="gallery-pattern gallery-pattern-3"></div>
|
<figcaption class="gallery-label">החלקה ברזילאית</figcaption>
|
||||||
<span class="gallery-label">החלקה ברזילאית</span>
|
|
||||||
</div>
|
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="gallery-item gallery-item-wide reveal" aria-label="בלאיאז׳">
|
<figure class="gallery-item gallery-item-wide reveal" aria-label="בלאיאז׳">
|
||||||
<div class="gallery-visual" style="--hue: 40;">
|
<img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?w=900&q=80" alt="בלאיאז׳ מקצועי" loading="lazy">
|
||||||
<div class="gallery-pattern gallery-pattern-4"></div>
|
<figcaption class="gallery-label">בלאיאז׳</figcaption>
|
||||||
<span class="gallery-label">בלאיאז׳</span>
|
|
||||||
</div>
|
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="gallery-item reveal" aria-label="תספורת נשים">
|
<figure class="gallery-item reveal" aria-label="תספורת נשים">
|
||||||
<div class="gallery-visual" style="--hue: 55;">
|
<img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?w=600&q=80" alt="תספורת נשים אלגנטית" loading="lazy">
|
||||||
<div class="gallery-pattern gallery-pattern-5"></div>
|
<figcaption class="gallery-label">תספורת נשים</figcaption>
|
||||||
<span class="gallery-label">תספורת נשים</span>
|
|
||||||
</div>
|
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="gallery-item reveal" aria-label="הבהרות">
|
<figure class="gallery-item reveal" aria-label="הבהרות">
|
||||||
<div class="gallery-visual" style="--hue: 42;">
|
<img src="https://images.unsplash.com/photo-1634449571010-02389ed0f9b0?w=600&q=80" alt="הבהרות טבעיות" loading="lazy">
|
||||||
<div class="gallery-pattern gallery-pattern-6"></div>
|
<figcaption class="gallery-label">הבהרות</figcaption>
|
||||||
<span class="gallery-label">הבהרות</span>
|
|
||||||
</div>
|
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -181,15 +160,8 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="about-grid">
|
<div class="about-grid">
|
||||||
<div class="about-visual reveal">
|
<div class="about-visual reveal">
|
||||||
<div class="about-shape-container">
|
<div class="about-image-container">
|
||||||
<div class="about-icon-scissors">
|
<img src="https://images.unsplash.com/photo-1633681926022-84c23e8cb2d6?w=600&q=80" alt="סלון עיצוב שיער מודרני" loading="lazy">
|
||||||
<svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
|
||||||
<circle cx="25" cy="30" r="12"/>
|
|
||||||
<circle cx="25" cy="70" r="12"/>
|
|
||||||
<line x1="35" y1="35" x2="75" y2="65"/>
|
|
||||||
<line x1="35" y1="65" x2="75" y2="35"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="about-badge">
|
<div class="about-badge">
|
||||||
<span class="about-badge-number">10+</span>
|
<span class="about-badge-number">10+</span>
|
||||||
@@ -229,14 +201,19 @@
|
|||||||
<section class="cta">
|
<section class="cta">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="cta-content reveal">
|
<div class="cta-content reveal">
|
||||||
<h2 class="cta-title">מוכנים לשינוי?</h2>
|
<div class="cta-image">
|
||||||
<p class="cta-desc">התקשרו עכשיו ונקבע לכם תור</p>
|
<img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?w=400&q=80" alt="מוצרי טיפוח שיער" loading="lazy">
|
||||||
<a href="tel:0545411291" class="btn btn-primary btn-large">
|
</div>
|
||||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
<div class="cta-text">
|
||||||
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
|
<h2 class="cta-title">מוכנים לשינוי?</h2>
|
||||||
</svg>
|
<p class="cta-desc">התקשרו עכשיו ונקבע לכם תור</p>
|
||||||
054-541-1291
|
<a href="tel:0545411291" class="btn btn-primary btn-large">
|
||||||
</a>
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||||
|
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
|
||||||
|
</svg>
|
||||||
|
054-541-1291
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -312,6 +289,70 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- Sale Popup -->
|
||||||
|
<div class="popup-overlay" id="salePopup" role="dialog" aria-modal="true" aria-labelledby="popupTitle">
|
||||||
|
<div class="popup-container">
|
||||||
|
<button class="popup-close" aria-label="סגור חלון" id="popupClose">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||||
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="popup-header">
|
||||||
|
<div class="popup-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
<polyline points="9 12 11 14 15 10"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="popup-title" id="popupTitle">האתר שלך מוכן!</h2>
|
||||||
|
<p class="popup-subtitle">בחרו איך אתם רוצים אותו</p>
|
||||||
|
</div>
|
||||||
|
<div class="popup-options">
|
||||||
|
<div class="popup-option">
|
||||||
|
<div class="popup-option-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
|
||||||
|
<polyline points="7 10 12 15 17 10"/>
|
||||||
|
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="popup-option-content">
|
||||||
|
<h3 class="popup-option-title">הורדת קוד בלבד</h3>
|
||||||
|
<p class="popup-option-desc">קבלו את כל קבצי האתר ותעלו אותם לשרת שלכם</p>
|
||||||
|
</div>
|
||||||
|
<button class="popup-option-btn popup-option-btn-secondary">הורדה</button>
|
||||||
|
</div>
|
||||||
|
<div class="popup-option popup-option-featured">
|
||||||
|
<div class="popup-option-badge">מומלץ</div>
|
||||||
|
<div class="popup-option-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="popup-option-content">
|
||||||
|
<h3 class="popup-option-title">חבילה מלאה</h3>
|
||||||
|
<p class="popup-option-desc">אחסון + דומיין + תמיכה — האתר עולה לאוויר מיד</p>
|
||||||
|
</div>
|
||||||
|
<button class="popup-option-btn popup-option-btn-primary">לפרטים</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="popup-warning">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<line x1="12" y1="8" x2="12" y2="12"/>
|
||||||
|
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
||||||
|
</svg>
|
||||||
|
<p>דף ההדגמה הזה יימחק אוטומטית תוך <strong>30 יום</strong> אם לא תתקבל תגובה או רכישה</p>
|
||||||
|
</div>
|
||||||
|
<div class="popup-extra">
|
||||||
|
<p>רוצים שינויים נוספים? עמודים, תמונות, התאמות — <button class="popup-link">צרו קשר לפרטים</button></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -104,4 +104,82 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Sale Popup
|
||||||
|
const popup = document.getElementById('salePopup');
|
||||||
|
const popupClose = document.getElementById('popupClose');
|
||||||
|
const popupButtons = popup ? popup.querySelectorAll('.popup-option-btn, .popup-link') : [];
|
||||||
|
|
||||||
|
// Check if popup was already shown in this session
|
||||||
|
const popupShown = sessionStorage.getItem('popupShown');
|
||||||
|
|
||||||
|
function showPopup() {
|
||||||
|
if (popup && !popupShown) {
|
||||||
|
popup.classList.add('active');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
sessionStorage.setItem('popupShown', 'true');
|
||||||
|
|
||||||
|
// Focus trap
|
||||||
|
const focusableElements = popup.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||||
|
const firstFocusable = focusableElements[0];
|
||||||
|
const lastFocusable = focusableElements[focusableElements.length - 1];
|
||||||
|
|
||||||
|
firstFocusable.focus();
|
||||||
|
|
||||||
|
popup.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Tab') {
|
||||||
|
if (e.shiftKey) {
|
||||||
|
if (document.activeElement === firstFocusable) {
|
||||||
|
e.preventDefault();
|
||||||
|
lastFocusable.focus();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (document.activeElement === lastFocusable) {
|
||||||
|
e.preventDefault();
|
||||||
|
firstFocusable.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hidePopup() {
|
||||||
|
if (popup) {
|
||||||
|
popup.classList.remove('active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show popup after 5 seconds
|
||||||
|
if (!popupShown) {
|
||||||
|
setTimeout(showPopup, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close popup events
|
||||||
|
if (popupClose) {
|
||||||
|
popupClose.addEventListener('click', hidePopup);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (popup) {
|
||||||
|
popup.addEventListener('click', function(e) {
|
||||||
|
if (e.target === popup) {
|
||||||
|
hidePopup();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Escape' && popup.classList.contains('active')) {
|
||||||
|
hidePopup();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Button click handlers (just close popup for demo)
|
||||||
|
popupButtons.forEach(function(btn) {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
// In a real implementation, these would link to actual actions
|
||||||
|
hidePopup();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
})();
|
})();
|
||||||
@@ -258,22 +258,22 @@ h1, h2, h3, h4 {
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-pattern {
|
.hero-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background-image:
|
width: 100%;
|
||||||
radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
|
height: 100%;
|
||||||
radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
|
object-fit: cover;
|
||||||
radial-gradient(circle at 40% 80%, rgba(212, 175, 55, 0.06) 0%, transparent 30%);
|
object-position: center 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-gradient {
|
.hero-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(180deg,
|
background: linear-gradient(180deg,
|
||||||
rgba(10,10,10,0.3) 0%,
|
rgba(10,10,10,0.5) 0%,
|
||||||
rgba(10,10,10,0.6) 50%,
|
rgba(10,10,10,0.7) 50%,
|
||||||
rgba(10,10,10,1) 100%
|
rgba(10,10,10,0.95) 100%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -447,7 +447,6 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
|
|
||||||
.service-card {
|
.service-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: var(--space-lg);
|
|
||||||
background: var(--black-light);
|
background: var(--black-light);
|
||||||
border: 1px solid var(--black-lighter);
|
border: 1px solid var(--black-lighter);
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-lg);
|
||||||
@@ -464,6 +463,7 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
background: linear-gradient(to left, var(--gold), transparent);
|
background: linear-gradient(to left, var(--gold), transparent);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: var(--transition);
|
transition: var(--transition);
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card:hover {
|
.service-card:hover {
|
||||||
@@ -494,18 +494,28 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-icon {
|
.service-image {
|
||||||
width: 56px;
|
position: relative;
|
||||||
height: 56px;
|
height: 180px;
|
||||||
margin-block-end: var(--space-md);
|
overflow: hidden;
|
||||||
color: var(--gold);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-icon svg {
|
.service-image img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: var(--transition-slow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover .service-image img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-content {
|
||||||
|
padding: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-title {
|
.service-title {
|
||||||
@@ -551,6 +561,19 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gallery-item img {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: var(--transition-slow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item:hover img {
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
.gallery-item-tall {
|
.gallery-item-tall {
|
||||||
grid-row: span 2;
|
grid-row: span 2;
|
||||||
}
|
}
|
||||||
@@ -559,63 +582,6 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-visual {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
hsl(calc(var(--hue, 45)), 50%, 15%),
|
|
||||||
hsl(calc(var(--hue, 45) + 10), 40%, 8%)
|
|
||||||
);
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-pattern {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-pattern-1 {
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
transparent,
|
|
||||||
transparent 10px,
|
|
||||||
rgba(212, 175, 55, 0.1) 10px,
|
|
||||||
rgba(212, 175, 55, 0.1) 20px
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-pattern-2 {
|
|
||||||
background: radial-gradient(circle at 30% 70%, rgba(212, 175, 55, 0.2) 0%, transparent 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-pattern-3 {
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent,
|
|
||||||
transparent 20px,
|
|
||||||
rgba(212, 175, 55, 0.08) 20px,
|
|
||||||
rgba(212, 175, 55, 0.08) 40px
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-pattern-4 {
|
|
||||||
background:
|
|
||||||
linear-gradient(135deg, rgba(212, 175, 55, 0.15) 25%, transparent 25%),
|
|
||||||
linear-gradient(225deg, rgba(212, 175, 55, 0.15) 25%, transparent 25%);
|
|
||||||
background-size: 40px 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-pattern-5 {
|
|
||||||
background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 1px, transparent 1px);
|
|
||||||
background-size: 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-pattern-6 {
|
|
||||||
background: conic-gradient(from 45deg at 50% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 25%, rgba(212, 175, 55, 0.1) 50%, transparent 75%, rgba(212, 175, 55, 0.1) 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-label {
|
.gallery-label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-end: var(--space-md);
|
inset-block-end: var(--space-md);
|
||||||
@@ -631,11 +597,6 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
transition: var(--transition);
|
transition: var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-item:hover .gallery-visual,
|
|
||||||
.gallery-item:focus-within .gallery-visual {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery-item:hover .gallery-label,
|
.gallery-item:hover .gallery-label,
|
||||||
.gallery-item:focus-within .gallery-label {
|
.gallery-item:focus-within .gallery-label {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
@@ -657,37 +618,27 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
|
|
||||||
.about-visual {
|
.about-visual {
|
||||||
position: relative;
|
position: relative;
|
||||||
aspect-ratio: 1;
|
max-width: 420px;
|
||||||
max-width: 380px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-shape-container {
|
.about-image-container {
|
||||||
position: absolute;
|
position: relative;
|
||||||
inset: 8%;
|
|
||||||
background: linear-gradient(135deg, var(--black-lighter), var(--black));
|
|
||||||
border: 1px solid var(--gold-dark);
|
|
||||||
border-radius: var(--radius-xl);
|
border-radius: var(--radius-xl);
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
align-items: center;
|
aspect-ratio: 4/5;
|
||||||
justify-content: center;
|
border: 1px solid var(--gold-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-icon-scissors {
|
.about-image-container img {
|
||||||
width: 60%;
|
|
||||||
height: 60%;
|
|
||||||
color: var(--gold);
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-icon-scissors svg {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-badge {
|
.about-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-end: 0;
|
inset-block-end: -20px;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: -20px;
|
||||||
padding: var(--space-md);
|
padding: var(--space-md);
|
||||||
background: var(--gold);
|
background: var(--gold);
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
@@ -750,7 +701,10 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cta-content {
|
.cta-content {
|
||||||
text-align: center;
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
align-items: center;
|
||||||
padding: var(--space-xl);
|
padding: var(--space-xl);
|
||||||
background: linear-gradient(135deg, var(--black-lighter), var(--black-light));
|
background: linear-gradient(135deg, var(--black-lighter), var(--black-light));
|
||||||
border: 1px solid var(--gold-dark);
|
border: 1px solid var(--gold-dark);
|
||||||
@@ -770,17 +724,33 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-title {
|
.cta-image {
|
||||||
font-size: clamp(2rem, 5vw, 3rem);
|
width: 180px;
|
||||||
margin-block-end: var(--space-sm);
|
height: 180px;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-text {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cta-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
margin-block-end: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
.cta-desc {
|
.cta-desc {
|
||||||
color: var(--white-dim);
|
color: var(--white-dim);
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
margin-block-end: var(--space-lg);
|
margin-block-end: var(--space-lg);
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contact - Redesigned */
|
/* Contact - Redesigned */
|
||||||
@@ -983,6 +953,264 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Popup Styles */
|
||||||
|
.popup-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.85);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
z-index: 10000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--space-md);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-overlay.active {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 520px;
|
||||||
|
background: linear-gradient(180deg, var(--black-lighter), var(--black));
|
||||||
|
border: 1px solid var(--gold-dark);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: var(--space-xl);
|
||||||
|
transform: scale(0.9) translateY(20px);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-overlay.active .popup-container {
|
||||||
|
transform: scale(1) translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-close {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: var(--space-md);
|
||||||
|
inset-inline-end: var(--space-md);
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: var(--black-lighter);
|
||||||
|
border: 1px solid var(--black-lighter);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--white-dim);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-close:hover,
|
||||||
|
.popup-close:focus {
|
||||||
|
background: var(--gold);
|
||||||
|
color: var(--black);
|
||||||
|
border-color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-close svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-block-end: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-icon {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
margin-inline: auto;
|
||||||
|
margin-block-end: var(--space-md);
|
||||||
|
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-icon svg {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--white);
|
||||||
|
margin-block-end: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-subtitle {
|
||||||
|
color: var(--white-dim);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
margin-block-end: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
gap: var(--space-md);
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-md);
|
||||||
|
background: var(--black);
|
||||||
|
border: 1px solid var(--black-lighter);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option:hover {
|
||||||
|
border-color: var(--gold-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-featured {
|
||||||
|
border-color: var(--gold-dark);
|
||||||
|
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-badge {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: -8px;
|
||||||
|
inset-inline-start: var(--space-md);
|
||||||
|
padding: 2px 10px;
|
||||||
|
background: var(--gold);
|
||||||
|
color: var(--black);
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-icon svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-content {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--white);
|
||||||
|
margin-block-end: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-desc {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--gray);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-btn {
|
||||||
|
padding: var(--space-xs) var(--space-md);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-btn-secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--white);
|
||||||
|
border: 1px solid var(--white-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-btn-secondary:hover,
|
||||||
|
.popup-option-btn-secondary:focus {
|
||||||
|
border-color: var(--gold);
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-btn-primary {
|
||||||
|
background: var(--gold);
|
||||||
|
color: var(--black);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-btn-primary:hover,
|
||||||
|
.popup-option-btn-primary:focus {
|
||||||
|
background: var(--gold-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-warning {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: var(--space-md);
|
||||||
|
background: rgba(212, 175, 55, 0.1);
|
||||||
|
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
margin-block-end: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-warning svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: var(--gold);
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-block-start: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-warning p {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--white-dim);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-warning strong {
|
||||||
|
color: var(--gold);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-extra {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-extra p {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-link {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--gold);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-link:hover,
|
||||||
|
.popup-link:focus {
|
||||||
|
color: var(--gold-light);
|
||||||
|
}
|
||||||
|
|
||||||
/* Mobile Navigation */
|
/* Mobile Navigation */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.nav-links {
|
.nav-links {
|
||||||
@@ -1038,7 +1266,7 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
|
|
||||||
.about-visual {
|
.about-visual {
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
max-width: 280px;
|
max-width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-grid {
|
.contact-grid {
|
||||||
@@ -1055,6 +1283,29 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: var(--space-md);
|
gap: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cta-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-image {
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-icon {
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-option-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 680px) {
|
@media (max-width: 680px) {
|
||||||
@@ -1097,6 +1348,14 @@ html[dir="ltr"] .hero-scroll {
|
|||||||
.gallery-item-wide {
|
.gallery-item-wide {
|
||||||
grid-column: span 1;
|
grid-column: span 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popup-container {
|
||||||
|
padding: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Focus States */
|
/* Focus States */
|
||||||
|
|||||||
Reference in New Issue
Block a user