/* Fonts are loaded via in each page's for faster rendering. */ /* ── Variables ────────────────────────────────────── */ :root { --black: #080808; --dark: #111111; --dark-mid: #171717; --card: #1d1d1d; --gold: #c5a55a; --gold-hover: #d4b872; --gold-muted: rgba(197,165,90,0.12); --cream: #f0ebe0; --white: #ffffff; --gray: #8c8c8c; --gray-light: #b0b0b0; --border-gold: rgba(197,165,90,0.28); --border-sub: rgba(255,255,255,0.07); --transition: 0.3s ease; } /* ── Reset ────────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Raleway', sans-serif; background: var(--dark); color: var(--cream); font-weight: 300; line-height: 1.75; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ── Typography ───────────────────────────────────── */ h1,h2,h3,h4,h5 { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; } h1 { font-size: clamp(2.8rem,6vw,5rem); } h2 { font-size: clamp(2rem,4vw,3.2rem); } h3 { font-size: clamp(1.4rem,2.5vw,1.9rem); } h4 { font-size: 1.2rem; } p { font-size: 0.95rem; color: var(--gray-light); line-height: 1.85; } p.lead { font-size: 1.05rem; color: var(--cream); font-weight: 400; } em { font-style: italic; } .gold { color: var(--gold); } .cream { color: var(--cream); } .gray { color: var(--gray); } /* ── Utility classes ──────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; } .container-narrow { max-width: 780px; margin: 0 auto; padding: 0 48px; } .text-center { text-align: center; } section { padding: 100px 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-60 { margin-top: 60px; } .mb-16 { margin-bottom: 16px; } .mb-40 { margin-bottom: 40px; } .mb-60 { margin-bottom: 60px; } .section-dark { background: var(--black); } .section-mid { background: var(--dark-mid); } /* Gold divider line */ .gold-line { display: block; width: 56px; height: 1px; background: var(--gold); margin: 20px auto; } .gold-line-left { margin-left: 0; } /* Section label (small caps above heading) */ .section-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } /* ── Buttons ──────────────────────────────────────── */ .btn { display: inline-block; padding: 14px 36px; font-family: 'Raleway', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; transition: all var(--transition); cursor: pointer; border: none; white-space: nowrap; } .btn-gold { background: var(--gold); color: var(--black); } .btn-gold:hover { background: var(--gold-hover); box-shadow: 0 8px 28px rgba(197,165,90,0.28); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); } .btn-outline:hover { background: var(--gold); color: var(--black); } .btn-white-outline { background: transparent; color: var(--cream); border: 1px solid rgba(240,235,224,0.45); } .btn-white-outline:hover { background: var(--cream); color: var(--black); } /* ── Navigation ───────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.4s ease; } .nav.scrolled { background: rgba(8,8,8,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-gold); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; max-width: 1440px; margin: 0 auto; } .nav-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; } .nav-logo .logo-main { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .nav-logo .logo-sub { font-family: 'Raleway', sans-serif; font-size: 0.52rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--cream); margin-top: 4px; } .nav-links { display: flex; gap: 44px; } .nav-links a { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); position: relative; padding-bottom: 4px; transition: color var(--transition); } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--gold); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-cta { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 11px 26px; background: var(--gold); color: var(--black); transition: background var(--transition); } .nav-cta:hover { background: var(--gold-hover); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav-hamburger span { display: block; width: 24px; height: 1.5px; background: var(--cream); transition: all var(--transition); } /* ── Footer ───────────────────────────────────────── */ footer { background: var(--black); border-top: 1px solid var(--border-gold); padding: 80px 0 44px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 60px; margin-bottom: 60px; } .footer-logo { display: block; text-decoration: none; margin-bottom: 18px; } .footer-logo .logo-main { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 4px; } .footer-logo .logo-sub { font-size: 0.55rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--gray-light); display: block; } .footer-tagline { font-size: 0.84rem; color: var(--gray); line-height: 1.75; max-width: 280px; } .footer-col h5 { font-family: 'Raleway', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } .footer-col ul li { margin-bottom: 11px; } .footer-col ul li a { font-size: 0.84rem; color: var(--gray); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--cream); } .footer-contact p { font-size: 0.84rem; color: var(--gray); margin-bottom: 9px; } .footer-contact a { color: var(--gray); transition: color var(--transition); } .footer-contact a:hover { color: var(--gold); } .footer-social { display: flex; gap: 16px; margin-top: 22px; } .footer-social a { width: 36px; height: 36px; border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; color: var(--gray); transition: all var(--transition); } .footer-social a:hover { border-color: var(--gold); color: var(--gold); } .footer-bottom { padding-top: 40px; border-top: 1px solid var(--border-sub); display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 0.75rem; color: var(--gray); } .footer-bottom a { color: var(--gray); transition: color var(--transition); } .footer-bottom a:hover { color: var(--gold); } /* ── Page Hero (inner pages) ──────────────────────── */ .page-hero { height: 52vh; min-height: 420px; position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--black); } .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.3; filter: saturate(0.5); transform: scale(1.04); } .page-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 48px 64px; } .page-hero-content h1 { color: var(--cream); } /* ── Home: Hero ───────────────────────────────────── */ .hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; } .hero-slide.active { opacity: 1; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.50) 50%, rgba(8,8,8,0.68) 100% ); } .hero-content { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 840px; } .hero-content h1 { color: var(--cream); } .hero-content h1 em { color: var(--gold); } .hero-sub { font-size: 1rem; color: rgba(240,235,224,0.78); font-weight: 300; line-height: 1.75; margin-top: 4px; } .hero-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 40px; } .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; } .hero-scroll span { font-size: 0.6rem; letter-spacing: 0.22em; color: var(--gray-light); text-transform: uppercase; font-weight: 600; } .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollPulse 2s ease infinite; } @keyframes scrollPulse { 0%,100% { opacity: 0.6; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.15); } } /* ── Home: Services ───────────────────────────────── */ .service-card { padding: 44px 36px; border: 1px solid var(--border-sub); background: var(--card); transition: border-color var(--transition), transform var(--transition); } .service-card:hover { border-color: var(--border-gold); transform: translateY(-4px); } .service-icon { width: 44px; height: 44px; color: var(--gold); margin-bottom: 24px; } .service-icon svg { width: 100%; height: 100%; } .service-card h3 { margin-bottom: 0; } .service-card p { margin-top: 14px; } .service-link { display: inline-block; margin-top: 24px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); transition: letter-spacing var(--transition); } .service-link:hover { letter-spacing: 0.26em; } /* ── Home: Featured Work ──────────────────────────── */ .section-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 48px; } .work-grid { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 280px 280px; gap: 16px; } .work-item { position: relative; overflow: hidden; display: block; background: var(--card); } .work-item-large { grid-row: span 2; } .work-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s ease; filter: saturate(0.7); } .work-item:hover .work-img { transform: scale(1.05); filter: saturate(0.9); } .work-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.1) 60%); padding: 28px 30px; display: flex; flex-direction: column; justify-content: flex-end; transition: background var(--transition); } .work-overlay h3 { color: var(--cream); font-size: 1.5rem; } .work-item-large .work-overlay h3 { font-size: 2rem; } .work-overlay .section-label { margin-bottom: 4px; } /* ── Home: About Split ────────────────────────────── */ .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-img-wrap { position: relative; } .about-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; filter: saturate(0.6); } .about-img-badge { position: absolute; bottom: -24px; right: -24px; width: 100px; height: 100px; background: var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .badge-year { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--black); font-weight: 500; line-height: 1; } .badge-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--black); } /* ── Stats Bar ────────────────────────────────────── */ .stats-bar { background: var(--gold); padding: 60px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .stat { padding: 0 20px; } .stat + .stat { border-left: 1px solid rgba(8,8,8,0.2); } .stat-number { font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; font-weight: 500; color: var(--black); line-height: 1; display: block; } .stat-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(8,8,8,0.65); margin-top: 8px; display: block; } /* ── Service Area ─────────────────────────────────── */ .area-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center; } .area-list-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .area-col h4 { font-family: 'Raleway', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .area-list li { font-size: 0.88rem; color: var(--gray-light); padding: 6px 0; border-bottom: 1px solid var(--border-sub); } .area-list li:last-child { border-bottom: none; } /* ── CTA Section ──────────────────────────────────── */ .cta-section { position: relative; padding: 130px 0; text-align: center; overflow: hidden; } .cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.22; filter: saturate(0.4); } .cta-overlay { position: absolute; inset: 0; background: var(--black); opacity: 0.6; } .cta-section h2 { color: var(--cream); margin: 0 auto; max-width: 560px; } .cta-section .cta-sub { max-width: 480px; margin: 0 auto 40px; color: rgba(240,235,224,0.72); } .cta-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } /* ── Portfolio Page ───────────────────────────────── */ .portfolio-filter { display: flex; gap: 6px; justify-content: center; margin-bottom: 56px; flex-wrap: wrap; } .filter-btn { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 10px 24px; border: 1px solid var(--border-sub); background: transparent; color: var(--gray-light); cursor: pointer; transition: all var(--transition); font-family: 'Raleway', sans-serif; } .filter-btn:hover, .filter-btn.active { border-color: var(--gold); color: var(--gold); } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .portfolio-card { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--card); display: block; } .portfolio-card-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.65s ease; filter: saturate(0.6); } .portfolio-card:hover .portfolio-card-img { transform: scale(1.06); filter: saturate(0.85); } .portfolio-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.05) 55%); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; } .portfolio-card-overlay h3 { color: var(--cream); font-size: 1.4rem; } .portfolio-card-overlay p { font-size: 0.78rem; color: var(--gray-light); margin-top: 4px; } .portfolio-card-overlay .img-count { position: absolute; top: 18px; right: 18px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); background: rgba(8,8,8,0.6); border: 1px solid var(--border-gold); padding: 5px 12px; } /* ── About Page ───────────────────────────────────── */ .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .story-img { width: 100%; aspect-ratio: 2/3; object-fit: cover; filter: saturate(0.6); } .services-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } .services-item { padding: 30px 28px; border: 1px solid var(--border-sub); background: var(--card); border-left: 3px solid var(--gold); } .services-item h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--cream); margin-bottom: 10px; } .services-item p { font-size: 0.85rem; } .team-card { padding: 48px; border: 1px solid var(--border-gold); background: var(--card); display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; margin-bottom: 24px; } .team-initials { width: 80px; height: 80px; background: var(--gold-muted); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--gold); } /* ── Merchandise Page ─────────────────────────────── */ .merch-intro { padding: 80px 0 40px; } .merch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; } .merch-card { background: var(--card); border: 1px solid var(--border-sub); transition: border-color var(--transition), transform var(--transition); overflow: hidden; } .merch-card:hover { border-color: var(--border-gold); transform: translateY(-4px); } .merch-body { padding: 22px 22px 28px; } .merch-body h3 { font-size: 1.15rem; color: var(--cream); } .merch-price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold); display: block; margin: 6px 0 10px; } .merch-body p { font-size: 0.82rem; } .merch-order-note { margin-top: 60px; padding: 40px; background: var(--gold-muted); border: 1px solid var(--border-gold); text-align: center; } .merch-order-note h3 { color: var(--cream); margin-bottom: 12px; } .merch-order-note p { max-width: 520px; margin: 0 auto 24px; } /* ── Contact Page ─────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; } .contact-info-block { margin-bottom: 36px; } .contact-info-block h4 { font-family: 'Raleway', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .contact-info-block p, .contact-info-block a { font-size: 1rem; color: var(--cream); font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; transition: color var(--transition); } .contact-info-block a:hover { color: var(--gold); } .contact-info-block .area-note { font-size: 0.82rem; color: var(--gray); font-family: 'Raleway', sans-serif; margin-top: 6px; } .contact-form { } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--card); border: 1px solid var(--border-sub); color: var(--cream); font-family: 'Raleway', sans-serif; font-size: 0.9rem; font-weight: 300; padding: 13px 18px; outline: none; transition: border-color var(--transition); appearance: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); } .form-group textarea { resize: vertical; min-height: 120px; } .form-group select option { background: var(--dark); color: var(--cream); } .map-embed { width: 100%; height: 380px; margin-top: 80px; border: 0; filter: grayscale(1) invert(0.88) contrast(0.85); opacity: 0.75; } /* ── Image fallbacks (shown when photos aren't loaded yet) ── */ .hero-slide, .work-img, .portfolio-card-img, .page-hero-bg, .cta-bg { background-color: #1a1f1a; /* dark forest — looks intentional, not broken */ background-image: none; /* overridden by inline style when photo exists */ } /* Subtle diagonal grain texture via CSS so empty areas aren't flat */ .hero-slide::after, .work-img::after, .portfolio-card-img::after, .page-hero-bg::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, rgba(197,165,90,0.03) 0px, rgba(197,165,90,0.03) 1px, transparent 1px, transparent 12px ); pointer-events: none; } /* ── Responsive ───────────────────────────────────── */ @media (max-width: 1100px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .merch-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } .nav-inner { padding: 20px 24px; } .nav.menu-open .nav-links { display: flex; flex-direction: column; position: fixed; top: 70px; left: 0; right: 0; background: rgba(8,8,8,0.98); padding: 40px; gap: 28px; border-top: 1px solid var(--border-gold); } .about-split, .story-grid { grid-template-columns: 1fr; gap: 48px; } .work-grid { grid-template-columns: 1fr; grid-template-rows: auto; } .work-item-large { grid-row: auto; } .work-item { aspect-ratio: 16/9; } .area-split { grid-template-columns: 1fr; gap: 48px; } .area-list-wrap { grid-template-columns: 1fr 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .stat + .stat { border-left: none; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .contact-grid { grid-template-columns: 1fr; } .services-list { grid-template-columns: 1fr; } .section-header-row { flex-direction: column; gap: 24px; } .container { padding: 0 24px; } } @media (max-width: 640px) { section { padding: 64px 0; } .portfolio-grid { grid-template-columns: 1fr; } .merch-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } h1 { font-size: 2.5rem; } h2 { font-size: 1.9rem; } .hero-sub { font-size: 0.9rem; } .about-img-badge { display: none; } .team-card { grid-template-columns: 1fr; gap: 24px; padding: 32px 28px; } } /* ── Reduced motion ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .scroll-line { animation: none; } .hero-slide { transition: none; } }