/* ============================================================ ARTFOLIO — Redesigned UI (Artfinder-inspired) Style: Bold · Rounded · Clean · E-commerce grade ============================================================ */ /* ── Google Fonts: Nunito (rounded bold headlines + body) ─── */ /* Loaded in */ :root { /* ── Brand Colours ───────────────────────────────────────── */ --c-black: #14213D; /* headline / nav dark navy */ --c-accent: #E63946; /* CTA red / links / highlights */ --c-accent-dk: #C1121F; /* hover state */ --c-white: #FFFFFF; --c-bg: #FFFFFF; --c-bg-soft: #F7F7F7; /* light gray sections */ --c-bg-mint: #CBF3F0; /* teal newsletter strip */ --c-footer: #14213D; /* dark footer bg */ --c-gray-100: #F0F0F0; --c-gray-200: #E2E2E2; --c-gray-400: #AAAAAA; --c-gray-600: #666666; --c-gray-800: #333333; --c-gold: #E63946; /* maps accent to red in this theme */ /* ── Typography ─────────────────────────────────────────── */ --font-body: 'Nunito', 'Poppins', system-ui, sans-serif; --font-display: 'Nunito', 'Poppins', system-ui, sans-serif; --font-accent: 'Nunito', 'Poppins', system-ui, sans-serif; /* ── Type Scale ─────────────────────────────────────────── */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* ── Spacing ─────────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* ── Borders ─────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ── Shadows ─────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-card:0 2px 8px rgba(0,0,0,0.07), 0 0 1px rgba(0,0,0,0.05); /* ── Transitions ─────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 380ms; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--c-black); background: var(--c-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease); } h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; color: var(--c-black); } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } ul { list-style: none; } button { cursor: pointer; font-family: var(--font-body); border: none; background: none; } input, textarea, select { font-family: var(--font-body); } /* ── Utility ──────────────────────────────────────────────── */ .text-accent { color: var(--c-accent); } .text-muted { color: var(--c-gray-600); } .text-white { color: var(--c-white); } .text-center { text-align: center; } .text-bold { font-weight: 700; } .text-sm { font-size: var(--text-sm); } .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); } .flex-wrap { flex-wrap: wrap; } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .mt-4 { margin-top: var(--sp-4); } .mt-8 { margin-top: var(--sp-8); } .overflow-hidden { overflow: hidden; } /* ── Section ──────────────────────────────────────────────── */ .section { padding: var(--sp-16) 0; } .section--soft { background: var(--c-bg-soft); padding: var(--sp-16) 0; } .section--dark { background: var(--c-footer); color: var(--c-white); } /* ── Container ────────────────────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); } .container-narrow { max-width: 680px; margin: 0 auto; padding: 0 var(--sp-6); } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.7rem 1.75rem; font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: all var(--dur-base) var(--ease); white-space: nowrap; text-decoration: none; line-height: 1; } .btn-primary { background: var(--c-accent); color: var(--c-white); border-color: var(--c-accent); } .btn-primary:hover { background: var(--c-accent-dk); border-color: var(--c-accent-dk); color: var(--c-white); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(230,57,70,0.35); } .btn-outline { background: transparent; color: var(--c-black); border-color: var(--c-black); } .btn-outline:hover { background: var(--c-black); color: var(--c-white); } .btn-outline-accent { background: transparent; color: var(--c-accent); border-color: var(--c-accent); } .btn-outline-accent:hover { background: var(--c-accent); color: var(--c-white); } .btn-outline-white { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,0.6); } .btn-outline-white:hover { background: var(--c-white); color: var(--c-black); } .btn-sm { padding: 0.45rem 1.1rem; font-size: var(--text-sm); } .btn-lg { padding: 0.9rem 2.25rem; font-size: var(--text-lg); } .btn-gold { background: var(--c-accent); color: var(--c-white); border-color: var(--c-accent); } .btn-gold:hover { background: var(--c-accent-dk); color: var(--c-white); } /* ── NAVIGATION ───────────────────────────────────────────── */ .navbar { position: sticky; top: 0; z-index: 1000; background: var(--c-white); border-bottom: 1px solid var(--c-gray-200); padding: 0; } .navbar-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 64px; gap: var(--sp-4); } .navbar-left { display: flex; align-items: center; gap: var(--sp-3); } .navbar-right { display: flex; align-items: center; gap: var(--sp-3); } .navbar-brand { text-align: center; font-weight: 900; font-size: var(--text-2xl); color: var(--c-accent); letter-spacing: -0.02em; } .nav-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); color: var(--c-black); transition: background var(--dur-fast) var(--ease); font-size: 1.25rem; cursor: pointer; background: none; border: none; } .nav-icon-btn:hover { background: var(--c-gray-100); } /* Desktop nav links (hidden on mobile) */ .navbar-nav-desktop { display: none; align-items: center; gap: var(--sp-6); } .navbar-nav-desktop a { font-size: var(--text-sm); font-weight: 700; color: var(--c-black); padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .navbar-nav-desktop a:hover, .navbar-nav-desktop a.active { color: var(--c-accent); border-bottom-color: var(--c-accent); } /* Mobile drawer */ .nav-mobile { display: none; position: fixed; inset: 0; background: var(--c-white); z-index: 1100; flex-direction: column; padding: var(--sp-6); overflow-y: auto; } .nav-mobile.open { display: flex; } .nav-mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-8); } .nav-mobile a { display: block; font-size: var(--text-xl); font-weight: 800; color: var(--c-black); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-gray-100); } .nav-mobile a:hover { color: var(--c-accent); } .nav-mobile a.active { color: var(--c-accent); } .nav-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--c-black); } /* ── HERO ──────────────────────────────────────────────────── */ .hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; background: var(--c-black); } .hero-slider { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s var(--ease), transform 8s var(--ease); transform: scale(1.04); } .hero-slide.active { opacity: 1; transform: scale(1); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.7) 100%); } .hero-content { position: relative; z-index: 2; text-align: center; padding: var(--sp-16) var(--sp-6); width: 100%; max-width: 700px; margin: 0 auto; } .hero-eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); background: rgba(255,255,255,0.12); padding: 0.3rem 1rem; border-radius: var(--radius-pill); margin-bottom: var(--sp-4); } .hero-title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; color: var(--c-white); line-height: 1.1; margin-bottom: var(--sp-4); } .hero-subtitle { font-size: clamp(var(--text-base), 2vw, var(--text-xl)); color: rgba(255,255,255,0.85); margin-bottom: var(--sp-8); font-weight: 400; max-width: 52ch; margin-left: auto; margin-right: auto; } .hero-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; } .hero-dots { position: absolute; bottom: var(--sp-6); left: 50%; transform: translateX(-50%); display: flex; gap: var(--sp-2); z-index: 3; } .hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.4); border: 2px solid rgba(255,255,255,0.6); cursor: pointer; transition: all var(--dur-base) var(--ease); } .hero-dot.active { background: var(--c-white); transform: scale(1.2); } /* ── ARTWORK CARDS ─────────────────────────────────────────── */ .artwork-card { background: var(--c-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); cursor: pointer; display: block; } .artwork-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .artwork-card-image { position: relative; overflow: hidden; background: var(--c-gray-100); aspect-ratio: 4/5; } .artwork-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .artwork-card:hover .artwork-card-image img { transform: scale(1.04); } /* Wishlist heart */ .artwork-card-wish { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 36px; height: 36px; background: var(--c-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-gray-400); font-size: 1.1rem; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); z-index: 2; } .artwork-card:hover .artwork-card-wish { opacity: 1; } .artwork-card-wish:hover { color: var(--c-accent); } .artwork-card-body { padding: var(--sp-4); } .artwork-card-artist { font-weight: 800; font-size: var(--text-base); color: var(--c-black); margin-bottom: 2px; } .artwork-card-title { font-weight: 700; font-size: var(--text-sm); color: var(--c-black); margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .artwork-card-meta { font-size: var(--text-sm); color: var(--c-gray-600); margin-bottom: var(--sp-3); font-weight: 400; } .artwork-card-footer { display: flex; align-items: center; justify-content: space-between; } .artwork-card-price { font-weight: 800; font-size: var(--text-lg); color: var(--c-black); } .artwork-card-price.sale { color: var(--c-accent); } /* ── CATEGORY CHIPS ────────────────────────────────────────── */ .category-chips { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .category-chips::-webkit-scrollbar { display: none; } .chip { display: inline-flex; align-items: center; padding: 0.55rem 1.25rem; border: 2px solid var(--c-black); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; color: var(--c-black); white-space: nowrap; cursor: pointer; transition: all var(--dur-fast) var(--ease); background: transparent; flex-shrink: 0; } .chip:hover, .chip.active { background: var(--c-black); color: var(--c-white); } /* ── SECTION HEADINGS ──────────────────────────────────────── */ .section-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--sp-2); } .section-title { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 900; color: var(--c-black); margin-bottom: var(--sp-2); line-height: 1.15; } .section-subtitle { font-size: var(--text-base); color: var(--c-gray-600); max-width: 54ch; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-8); gap: var(--sp-4); } .section-header .view-all { font-size: var(--text-sm); font-weight: 700; color: var(--c-accent); white-space: nowrap; flex-shrink: 0; } .section-header .view-all:hover { text-decoration: underline; } /* ── ARTWORK GRID ──────────────────────────────────────────── */ .artwork-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-6); } .artwork-grid-2 { grid-template-columns: repeat(2, 1fr); } .artwork-grid-3 { grid-template-columns: repeat(3, 1fr); } .artwork-grid-4 { grid-template-columns: repeat(4, 1fr); } /* Horizontal scroll row */ .artwork-scroll-row { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .artwork-scroll-row::-webkit-scrollbar { display: none; } .artwork-scroll-row .artwork-card { min-width: 260px; flex-shrink: 0; } /* ── GALLERY MASONRY ───────────────────────────────────────── */ .gallery-masonry { columns: 3; column-gap: var(--sp-4); } .gallery-masonry .artwork-card { break-inside: avoid; margin-bottom: var(--sp-4); } .gallery-masonry .artwork-card-image { aspect-ratio: unset; } .gallery-masonry .artwork-card-image img { height: auto; } /* ── TRUST FEATURES (4-up grid) ───────────────────────────── */ .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-6); text-align: center; } .trust-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto var(--sp-3); } .trust-icon-orange { background: #FFE8C8; color: #E67E22; } .trust-icon-pink { background: #FFD6E0; color: var(--c-accent); } .trust-icon-blue { background: #D6EAF8; color: #2980B9; } .trust-icon-green { background: #D5F5E3; color: #27AE60; } .trust-title { font-weight: 800; font-size: var(--text-base); color: var(--c-black); } .trust-desc { font-size: var(--text-sm); color: var(--c-gray-600); margin-top: var(--sp-1); } /* ── SERVICE CARDS ─────────────────────────────────────────── */ .service-card { border: 2px solid var(--c-gray-200); border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-6); text-align: center; background: var(--c-white); } .service-icon { font-size: 2rem; color: var(--c-accent); margin-bottom: var(--sp-4); } .service-title { font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--sp-3); } .service-desc { font-size: var(--text-sm); color: var(--c-gray-600); line-height: 1.65; margin-bottom: var(--sp-4); } .service-link { font-size: var(--text-sm); font-weight: 700; color: var(--c-accent); } .service-link:hover { text-decoration: underline; } /* ── REVIEWS / TRUSTPILOT STYLE ────────────────────────────── */ .review-score { text-align: center; padding: var(--sp-10) 0; } .review-excellent { font-size: var(--text-4xl); font-weight: 900; color: var(--c-black); margin-bottom: var(--sp-3); } .review-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: var(--sp-3); } .star { width: 44px; height: 44px; background: #00B67A; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; } .review-count { font-size: var(--text-sm); color: var(--c-gray-600); } .review-count a { color: var(--c-gray-600); text-decoration: underline; } /* ── NEWSLETTER STRIP ──────────────────────────────────────── */ .newsletter-strip { background: var(--c-bg-mint); padding: var(--sp-12) var(--sp-6); text-align: center; } .newsletter-strip h3 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 900; margin-bottom: var(--sp-6); } .newsletter-form-inline { display: flex; max-width: 480px; margin: 0 auto; gap: 0; border-radius: var(--radius-pill); overflow: hidden; box-shadow: var(--shadow); background: var(--c-white); } .newsletter-form-inline input { flex: 1; padding: 0.8rem 1.25rem; border: none; font-size: var(--text-base); font-family: var(--font-body); outline: none; background: transparent; color: var(--c-black); } .newsletter-form-inline button { padding: 0.8rem 1.75rem; background: var(--c-accent); color: var(--c-white); border: none; font-weight: 800; font-size: var(--text-base); cursor: pointer; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; transition: background var(--dur-fast) var(--ease); } .newsletter-form-inline button:hover { background: var(--c-accent-dk); } /* ── FOOTER ────────────────────────────────────────────────── */ .footer { background: var(--c-footer); color: rgba(255,255,255,0.7); padding: var(--sp-12) 0 var(--sp-8); } .footer-social { display: flex; justify-content: center; gap: var(--sp-4); margin-bottom: var(--sp-8); } .footer-social-icon { width: 44px; height: 44px; border: 2px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 1.1rem; transition: all var(--dur-fast) var(--ease); } .footer-social-icon:hover { border-color: var(--c-white); color: var(--c-white); background: rgba(255,255,255,0.1); } .footer-links { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-8); } .footer-links a { color: rgba(255,255,255,0.7); font-size: var(--text-sm); font-weight: 600; } .footer-links a:hover { color: var(--c-white); } .footer-brand { font-size: var(--text-2xl); font-weight: 900; color: var(--c-accent); text-align: center; margin-bottom: var(--sp-4); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--sp-6); text-align: center; font-size: var(--text-xs); color: rgba(255,255,255,0.4); } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); margin-bottom: var(--sp-10); } .footer-col-title { font-weight: 800; font-size: var(--text-sm); color: var(--c-white); margin-bottom: var(--sp-4); letter-spacing: 0.05em; } .footer-col-links { display: flex; flex-direction: column; gap: var(--sp-2); } .footer-col-links a { font-size: var(--text-sm); color: rgba(255,255,255,0.6); } .footer-col-links a:hover { color: var(--c-white); } /* ── PAGE HEADER ───────────────────────────────────────────── */ .page-header { background: var(--c-bg-soft); padding: var(--sp-16) 0 var(--sp-10); border-bottom: 1px solid var(--c-gray-200); } .page-header-title { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 900; color: var(--c-black); margin-bottom: var(--sp-3); } .page-header-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--c-gray-600); margin-bottom: var(--sp-4); } .page-header-breadcrumb a { color: var(--c-gray-600); } .page-header-breadcrumb a:hover { color: var(--c-accent); } .page-header-breadcrumb span { color: var(--c-accent); font-weight: 700; } /* ── GALLERY FILTERS ────────────────────────────────────────── */ .gallery-filters { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-8); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-gray-200); } .filter-btn { display: inline-flex; align-items: center; padding: 0.45rem 1.1rem; border: 2px solid var(--c-gray-200); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; color: var(--c-gray-600); background: transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .filter-btn:hover, .filter-btn.active { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); } /* ── BADGES ─────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.2rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; } .badge-available { background: #D5F5E3; color: #1E8449; } .badge-reserved { background: #FEF9E7; color: #B7950B; } .badge-sold { background: #FADBD8; color: #922B21; } .badge-nfs { background: var(--c-gray-100); color: var(--c-gray-600); } .badge-featured { background: #FDEBD0; color: #D35400; } .badge-gold { background: var(--c-accent); color: var(--c-white); } /* ── FORMS ──────────────────────────────────────────────────── */ .form-group { margin-bottom: var(--sp-5); } .form-label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--c-black); margin-bottom: var(--sp-2); } .form-control { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--c-gray-200); border-radius: var(--radius); font-size: var(--text-base); font-family: var(--font-body); color: var(--c-black); background: var(--c-white); transition: border-color var(--dur-fast) var(--ease); outline: none; appearance: none; } .form-control:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(230,57,70,0.1); } .form-control::placeholder { color: var(--c-gray-400); } textarea.form-control { min-height: 130px; resize: vertical; } select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .form-error { font-size: var(--text-xs); color: #E63946; margin-top: 0.25rem; font-weight: 600; } .form-hint { font-size: var(--text-xs); color: var(--c-gray-600); margin-top: 0.25rem; } /* ── ALERTS ─────────────────────────────────────────────────── */ .alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-4); border-left: 4px solid; } .alert-success { background: #D5F5E3; border-color: #1E8449; color: #1E8449; } .alert-error { background: #FADBD8; border-color: #922B21; color: #922B21; } .alert-info { background: #D6EAF8; border-color: #2980B9; color: #1A5276; } .alert-warning { background: #FEF9E7; border-color: #B7950B; color: #7D6608; } /* ── ABOUT PAGE ─────────────────────────────────────────────── */ .about-portrait { position: relative; border-radius: var(--radius-xl); overflow: hidden; } .about-portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; } /* ── TIMELINE ────────────────────────────────────────────────── */ .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0; width: 2px; background: var(--c-gray-200); } .timeline-item { position: relative; padding-bottom: var(--sp-8); } .timeline-item::before { content: ''; position: absolute; left: -2rem; top: 0.4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); transform: translateX(-4px); } .timeline-year { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; color: var(--c-accent); } .timeline-title { font-size: var(--text-xl); font-weight: 800; color: var(--c-black); margin-bottom: 2px; } .timeline-org { font-size: var(--text-sm); color: var(--c-gray-600); margin-bottom: var(--sp-2); } .timeline-desc { font-size: var(--text-sm); color: var(--c-gray-600); line-height: 1.65; } /* ── TESTIMONIALS ────────────────────────────────────────────── */ .testimonial-card { background: var(--c-white); border: 2px solid var(--c-gray-200); border-radius: var(--radius-lg); padding: var(--sp-8); } .testimonial-stars { color: #F1C40F; font-size: var(--text-base); margin-bottom: var(--sp-3); } .testimonial-content { font-size: var(--text-base); color: var(--c-gray-800); line-height: 1.75; margin-bottom: var(--sp-6); font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: var(--sp-3); } .testimonial-name { font-weight: 800; font-size: var(--text-base); } .testimonial-title { font-size: var(--text-xs); color: var(--c-gray-600); margin-top: 1px; } /* ── BLOG ────────────────────────────────────────────────────── */ .blog-card { cursor: pointer; } .blog-card-image { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-4); background: var(--c-gray-100); } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .blog-card:hover .blog-card-image img { transform: scale(1.04); } .blog-card-category { font-size: var(--text-xs); font-weight: 800; color: var(--c-accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-2); } .blog-card-title { font-size: var(--text-xl); font-weight: 800; color: var(--c-black); line-height: 1.25; margin-bottom: var(--sp-2); } .blog-card:hover .blog-card-title { color: var(--c-accent); } .blog-card-excerpt { font-size: var(--text-sm); color: var(--c-gray-600); line-height: 1.65; margin-bottom: var(--sp-3); } .blog-card-meta { font-size: var(--text-xs); color: var(--c-gray-400); font-weight: 600; display: flex; gap: var(--sp-3); } /* ── FAQ ─────────────────────────────────────────────────────── */ .faq-item { border-bottom: 2px solid var(--c-gray-100); } .faq-question { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; cursor: pointer; font-weight: 800; font-size: var(--text-lg); color: var(--c-black); user-select: none; } .faq-icon { width: 28px; height: 28px; flex-shrink: 0; background: var(--c-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; font-weight: 900; transition: transform var(--dur-base) var(--ease); } .faq-icon::after { content: '+'; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { display: none; padding-bottom: var(--sp-5); color: var(--c-gray-600); line-height: 1.75; font-size: var(--text-base); } .faq-item.open .faq-answer { display: block; } /* ── EXHIBITION CARDS ────────────────────────────────────────── */ .exhibition-card { cursor: pointer; } .exhibition-card-image { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-4); background: var(--c-gray-100); position: relative; } .exhibition-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .exhibition-card:hover .exhibition-card-image img { transform: scale(1.04); } .exhibition-status-badge { position: absolute; top: var(--sp-3); left: var(--sp-3); font-size: var(--text-xs); font-weight: 800; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--c-accent); color: white; z-index: 2; } .exhibition-card-body .artwork-card-category { font-size: var(--text-xs); font-weight: 800; color: var(--c-accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-1); } .exhibition-card-body .artwork-card-title { font-size: var(--text-xl); font-weight: 800; color: var(--c-black); margin-bottom: var(--sp-2); } /* ── STATS ───────────────────────────────────────────────────── */ .stats-section { background: var(--c-black); color: white; padding: var(--sp-16) 0; } .stat-item { text-align: center; } .stat-number { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; color: var(--c-accent); line-height: 1; margin-bottom: var(--sp-2); } .stat-label { font-size: var(--text-sm); font-weight: 700; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.12em; } /* ── ARTWORK DETAIL ──────────────────────────────────────────── */ .artwork-main-image { width: 100%; border-radius: var(--radius-lg); cursor: zoom-in; background: var(--c-gray-100); aspect-ratio: 4/5; object-fit: cover; } .artwork-thumbnails { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; } .artwork-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); cursor: pointer; border: 3px solid transparent; transition: border-color var(--dur-fast) var(--ease); } .artwork-thumb.active { border-color: var(--c-accent); } .artwork-detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-6) 0; padding: var(--sp-6) 0; border-top: 2px solid var(--c-gray-200); border-bottom: 2px solid var(--c-gray-200); } .meta-item-label { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-gray-400); margin-bottom: 2px; } .meta-item-value { font-size: var(--text-sm); font-weight: 600; color: var(--c-black); } /* ── MODAL ───────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease); } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--c-white); border-radius: var(--radius-xl); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; padding: var(--sp-8); position: relative; transform: translateY(1.5rem); transition: transform var(--dur-base) var(--ease); } .modal-overlay.open .modal { transform: translateY(0); } .modal-close { position: absolute; top: var(--sp-5); right: var(--sp-5); width: 32px; height: 32px; border-radius: 50%; background: var(--c-gray-100); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; color: var(--c-black); border: none; transition: background var(--dur-fast) var(--ease); } .modal-close:hover { background: var(--c-gray-200); } /* ── PAGINATION ──────────────────────────────────────────────── */ .pagination { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-12); flex-wrap: wrap; } .page-item { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--c-gray-200); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; cursor: pointer; color: var(--c-black); transition: all var(--dur-fast) var(--ease); } .page-item:hover, .page-item.active { background: var(--c-accent); border-color: var(--c-accent); color: white; } .page-item.disabled { opacity: 0.35; pointer-events: none; } /* ── SEARCH ──────────────────────────────────────────────────── */ .search-wrap { position: relative; } .search-wrap .form-control { padding-right: 3rem; border-radius: var(--radius-pill); } .search-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 48px; display: flex; align-items: center; justify-content: center; background: var(--c-accent); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; color: white; cursor: pointer; border: none; transition: background var(--dur-fast) var(--ease); } .search-btn:hover { background: var(--c-accent-dk); } /* ── SHARE BUTTONS ───────────────────────────────────────────── */ .share-buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .share-btn { padding: 0.4rem 1rem; font-size: var(--text-xs); font-weight: 700; border: 2px solid var(--c-gray-200); border-radius: var(--radius-pill); color: var(--c-gray-600); background: transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .share-btn:hover { background: var(--c-black); border-color: var(--c-black); color: white; } /* ── BACK TO TOP ─────────────────────────────────────────────── */ .back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; background: var(--c-accent); color: white; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; opacity: 0; pointer-events: none; transition: all var(--dur-base) var(--ease); box-shadow: var(--shadow-lg); z-index: 500; } .back-to-top.visible { opacity: 1; pointer-events: all; } .back-to-top:hover { background: var(--c-accent-dk); transform: translateY(-2px); } /* ── LAZY LOAD ───────────────────────────────────────────────── */ img[data-src] { opacity: 0; transition: opacity var(--dur-slow) var(--ease); } img[data-src].loaded { opacity: 1; } /* ── GOLD DIVIDER — removed, replaced with chip style ────────── */ .gold-divider { display: none; } /* ── EYEBROW label ───────────────────────────────────────────── */ .eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-2); } /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media (min-width: 768px) { .navbar-nav-desktop { display: flex; } .nav-toggle { display: none; } .artwork-grid-2 { grid-template-columns: repeat(2, 1fr); } .artwork-grid-3 { grid-template-columns: repeat(3, 1fr); } .artwork-grid-4 { grid-template-columns: repeat(4, 1fr); } .gallery-masonry { columns: 2; } .trust-grid { grid-template-columns: repeat(4, 1fr); } .footer-links { flex-direction: row; justify-content: center; flex-wrap: wrap; } } @media (min-width: 1024px) { .gallery-masonry { columns: 3; } } @media (max-width: 767px) { .artwork-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .artwork-grid-3, .artwork-grid-4 { grid-template-columns: repeat(2, 1fr); } .section { padding: var(--sp-12) 0; } .hero { min-height: 92vh; } .artwork-detail-meta { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, 1fr); } .hero-actions { flex-direction: column; align-items: center; } .gallery-masonry { columns: 1; } } @media (max-width: 480px) { .artwork-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } .newsletter-form-inline { flex-direction: column; border-radius: var(--radius-lg); } .newsletter-form-inline button { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } } /* ── REDUCED MOTION ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── Blog Content Rich Text Styles ──────────────────────── */ .blog-content p { margin-bottom: 1.4em; } .blog-content h2 { font-size: var(--text-2xl); font-weight: 900; margin: 2em 0 0.75em; } .blog-content h3 { font-size: var(--text-xl); font-weight: 800; margin: 1.75em 0 0.65em; } .blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1.4em; } .blog-content li { margin-bottom: 0.5em; } .blog-content ul li { list-style: disc; } .blog-content ol li { list-style: decimal; } .blog-content blockquote { border-left: 4px solid var(--c-accent); padding: var(--sp-4) var(--sp-6); background: var(--c-bg-soft); border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5em 0; font-style: italic; color: var(--c-gray-800); } .blog-content strong, .blog-content b { font-weight: 800; } .blog-content em, .blog-content i { font-style: italic; } .blog-content a { color: var(--c-accent); text-decoration: underline; } .blog-content a:hover { color: var(--c-accent-dk); } .blog-content img { border-radius: var(--radius-lg); margin: 1.5em 0; } .blog-content hr { border: none; border-top: 2px solid var(--c-gray-200); margin: 2em 0; } /* ── Responsive nav — show CTA on wider screens ──────────── */ @media (min-width: 1024px) { #navCTADesktop { display: inline-flex !important; } } /* ── Artwork card grid — ensure 3-col on 1024+ ───────────── */ @media (min-width: 1024px) { .artwork-grid-3 { grid-template-columns: repeat(3, 1fr); } .artwork-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* ── Fix gallery masonry on mobile ───────────────────────── */ @media (max-width: 640px) { .gallery-masonry { columns: 1; } } @media (min-width: 641px) and (max-width: 1023px) { .gallery-masonry { columns: 2; } } /* ── Hero min-height on small screens ────────────────────── */ @media (max-width: 480px) { .hero { min-height: 100svh; } .hero-title { font-size: 2rem; } } /* ── Page header on mobile ───────────────────────────────── */ @media (max-width: 640px) { .page-header { padding: var(--sp-12) 0 var(--sp-8); } .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }