/* ============================================================ ROSE GARDEN ARTISTS — Main Stylesheet ============================================================ HOW TO CUSTOMIZE: - Colors are defined as CSS variables in :root (lines 20–35). Change them once here and they update everywhere. - Fonts: swap the Google Fonts link in each HTML file's and update --font-serif / --font-sans below. - To hide a section, add display:none to its ID in this file. ============================================================ */ /* ─── Google Fonts are loaded in each HTML ─── */ /* ─── CSS Custom Properties (design tokens) ─── */ :root { /* Palette */ --color-black: #0a0a0a; --color-white: #ffffff; --color-cream: #f5f0eb; /* page background */ --color-rose: #c8a4a4; /* accent — links, hover states */ --color-rose-dark: #a07878; /* darker accent for hover */ --color-mid: #666666; /* secondary text */ --color-border: #e0d8d0; /* subtle lines */ /* Typography */ --font-serif: 'Cormorant Garant', Georgia, serif; --font-sans: 'Inter', system-ui, sans-serif; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; /* Layout */ --max-width: 1500px; --nav-height: 70px; } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ─── Base ─── */ body { background-color: var(--color-cream); color: var(--color-black); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ─── Typography Utilities ─── */ h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.15; font-weight: 400; } h1 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); font-weight: 300; } h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; } h3 { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 300; } h4 { font-size: 1.1rem; letter-spacing: 0.04em; } p { max-width: 68ch; } .label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-mid); } /* ─── Layout Helpers ─── */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-md); } .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } /* ─── NAV ─── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); background: var(--color-cream); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; display: flex; align-items: center; } .site-nav.scrolled { border-color: var(--color-border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-md); } .nav-logo img { height: 48px; width: auto; } /* Desktop nav links */ .nav-links { display: flex; align-items: center; gap: var(--space-md); } .nav-links a, .nav-dropdown > button { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-black); background: none; border: none; cursor: pointer; padding: 0; transition: color 0.2s; font-family: var(--font-sans); } .nav-links a:hover, .nav-dropdown > button:hover { color: var(--color-rose-dark); } .nav-links a.active { color: var(--color-rose-dark); } /* Dropdown */ .nav-dropdown { position: relative; } .nav-dropdown__menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--color-white); border: 1px solid var(--color-border); min-width: 160px; padding: var(--space-xs) 0; padding-top: calc(var(--space-xs) + 12px); z-index: 200; } .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown.open .nav-dropdown__menu { display: block; } .nav-dropdown__menu a { display: block; padding: 0.5rem var(--space-sm); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; transition: background 0.15s; } .nav-dropdown__menu a:hover { background: var(--color-cream); color: var(--color-rose-dark); } /* Nav social icons */ .nav-social { display: flex; gap: 0.75rem; align-items: center; } .nav-social a { display: flex; align-items: center; opacity: 0.6; transition: opacity 0.2s; } .nav-social a:hover { opacity: 1; } .nav-social svg { width: 18px; height: 18px; fill: var(--color-black); } /* ─── Hamburger (mobile) ─── */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--color-black); transition: transform 0.3s, opacity 0.3s; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav drawer */ .nav-mobile-drawer { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: var(--color-cream); z-index: 99; padding: var(--space-lg) var(--space-md); flex-direction: column; gap: var(--space-sm); overflow-y: auto; } .nav-mobile-drawer.open { display: flex; } .nav-mobile-drawer a, .nav-mobile-drawer button { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 300; background: none; border: none; text-align: left; cursor: pointer; padding: 0.25rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-black); transition: color 0.2s; } .nav-mobile-drawer a:hover, .nav-mobile-drawer button:hover { color: var(--color-rose); } .nav-mobile-drawer .mobile-sub { padding-left: var(--space-sm); display: flex; flex-direction: column; gap: 0.25rem; } .nav-mobile-drawer .mobile-sub a { font-family: var(--font-sans); font-size: 1rem; border: none; } /* ─── Page padding (offset for fixed nav) ─── */ .page-body { padding-top: var(--nav-height); } /* ─── Hero ─── */ .hero { min-height: calc(100svh - var(--nav-height)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-block: var(--space-xl); gap: var(--space-md); } .hero__logo { width: min(260px, 55vw); height: auto; } .hero__tagline { font-family: var(--font-serif); font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--color-mid); max-width: 36ch; font-weight: 400; } .hero__cta-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; margin-top: var(--space-xs); } /* ─── Buttons ─── */ .btn { display: inline-block; padding: 0.65em 1.6em; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1.5px solid var(--color-black); color: var(--color-black); background: transparent; cursor: pointer; transition: background 0.2s, color 0.2s; } .btn:hover { background: var(--color-black); color: var(--color-white); } .btn--filled { background: var(--color-black); color: var(--color-white); } .btn--filled:hover { background: var(--color-rose-dark); border-color: var(--color-rose-dark); } /* ─── Section Headers ─── */ .section-header { margin-bottom: var(--space-md); display: flex; align-items: baseline; gap: var(--space-sm); } .section-header h2 { flex: 1; } .section-divider { border: none; border-top: 1px solid var(--color-border); margin-bottom: var(--space-md); } /* ─── Roster scroll target ─── */ #roster { scroll-margin-top: var(--nav-height); } /* ─── Artist Grid ─── */ .artist-filters { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); flex-wrap: wrap; } .artist-filter-btn { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: none; border: 1px solid var(--color-border); padding: 0.4em 1em; cursor: pointer; color: var(--color-mid); transition: all 0.2s; } .artist-filter-btn.active, .artist-filter-btn:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); } .artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--space-md); } .artist-card { display: block; cursor: default; } .artist-card__image { aspect-ratio: 3/2; overflow: hidden; background: var(--color-border); margin-bottom: 0.75rem; } .artist-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.4s ease; filter: grayscale(20%); } .artist-card:hover .artist-card__image img { transform: scale(1.04); filter: grayscale(0%); } .artist-card__name { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.4rem; } .artist-card__links { display: flex; gap: 0.75rem; } .artist-card__links a { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); transition: color 0.2s; border-bottom: 1px solid transparent; } .artist-card__links a:hover { color: var(--color-rose-dark); border-color: var(--color-rose-dark); } /* Placeholder when photo is missing */ .artist-card__image--placeholder { background: linear-gradient(135deg, var(--color-border) 0%, #d8cfc6 100%); display: flex; align-items: center; justify-content: center; } .artist-card__image--placeholder::after { content: attr(data-initials); font-family: var(--font-serif); font-size: 3rem; color: var(--color-white); opacity: 0.5; } /* ─── Category Heading ─── */ .artist-category-heading { grid-column: 1 / -1; margin-top: var(--space-md); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); } .artist-category-heading:first-child { margin-top: 0; } /* ─── About Page ─── */ .about-content { max-width: 640px; margin-inline: auto; } .about-intro { max-width: 640px; } .about-intro p { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.5vw, 1.6rem); line-height: 1.45; margin-bottom: var(--space-sm); } .about-intro p + p { color: var(--color-mid); font-family: var(--font-sans); font-size: 1rem; } .contact-block { margin-top: var(--space-lg); max-width: 480px; } .contact-block h3 { margin-bottom: var(--space-sm); } .contact-form { display: flex; flex-direction: column; gap: var(--space-sm); } .contact-form label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; display: flex; flex-direction: column; gap: 0.35rem; } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-sans); font-size: 0.95rem; color: var(--color-black); background: var(--color-white); border: 1px solid var(--color-border); padding: 0.7rem 0.85rem; width: 100%; outline: none; transition: border-color 0.2s; border-radius: 0; -webkit-appearance: none; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--color-black); } .contact-form textarea { min-height: 120px; resize: vertical; } .contact-direct { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .contact-direct p { font-size: 0.85rem; color: var(--color-mid); margin-bottom: 0.25rem; } .contact-direct a { color: var(--color-black); border-bottom: 1px solid var(--color-border); transition: border-color 0.2s; } .contact-direct a:hover { border-color: var(--color-rose-dark); color: var(--color-rose-dark); } /* ─── Sync Page ─── */ .sync-hero { padding-top: var(--space-lg); padding-bottom: var(--space-md); } .sync-hero h1 { margin-bottom: var(--space-sm); } .sync-hero p { color: var(--color-mid); margin-bottom: var(--space-md); font-size: 1.05rem; } .sync-services { margin-top: var(--space-md); } .sync-services ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; } .sync-services li { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-mid); padding: 0.3em 0.7em; border: 1px solid var(--color-border); } /* Brand logo grid */ .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md) var(--space-md); align-items: center; } .brand-logo { display: flex; align-items: center; justify-content: center; padding: var(--space-sm); filter: grayscale(1) opacity(0.55); transition: filter 0.3s; } .brand-logo:hover { filter: grayscale(0) opacity(1); } .brand-logo img { max-height: 72px; object-fit: contain; width: 100%; } /* Film credits grid */ .credits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .credit-card { aspect-ratio: 2/3; overflow: hidden; background: var(--color-border); position: relative; } .credit-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .credit-card:hover img { transform: scale(1.05); } .credit-card__label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: white; padding: 1rem 0.75rem 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s; } .credit-card:hover .credit-card__label { opacity: 1; } /* Credit placeholder */ .credit-placeholder { width: 100%; height: 100%; background: var(--color-black); display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-family: var(--font-serif); color: var(--color-white); font-size: 0.95rem; } /* ─── Publishing Sub-nav ─── */ .publishing-artists { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 480px; } .publishing-artist-link { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-serif); font-size: 1.4rem; transition: color 0.2s, padding-left 0.2s; } .publishing-artist-link:hover { color: var(--color-rose-dark); padding-left: 0.5rem; } .publishing-artist-link .arrow { font-size: 1rem; opacity: 0.4; } /* ─── Footer ─── */ .site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-lg); margin-top: var(--space-md); } .footer-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); align-items: start; } .footer-brand { display: flex; align-items: center; gap: var(--space-sm); } .footer-brand img { height: 28px; filter: opacity(0.7); flex-shrink: 0; } .footer-copy { font-size: 0.75rem; color: var(--color-mid); } .footer-right { display: flex; align-items: center; gap: var(--space-md); } .footer-links { display: flex; flex-direction: row; gap: var(--space-md); align-items: center; } .footer-links a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mid); transition: color 0.2s; } .footer-links a:hover { color: var(--color-rose-dark); } .footer-social { display: flex; gap: 0.75rem; justify-content: flex-end; align-items: center; } .footer-social a { opacity: 0.5; transition: opacity 0.2s; display: flex; align-items: center; } .footer-social a:hover { opacity: 1; } .footer-social svg { width: 18px; height: 18px; fill: var(--color-black); } /* ─── Page transition ─── */ .page-body { animation: fadeIn 0.4s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ─── Utility ─── */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .text-center { text-align: center; } .text-mid { color: var(--color-mid); } .mt-lg { margin-top: var(--space-lg); } .mt-md { margin-top: var(--space-md); } /* ─── 404 ─── */ .not-found { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-md); } /* ─── RESPONSIVE ─── */ /* Tablet */ @media (max-width: 768px) { .nav-logo img { height: 54px; } .nav-links, .nav-social { display: none; } .nav-hamburger { display: flex; } .footer-inner { grid-template-columns: 1fr; } .footer-links { text-align: left; } .footer-social { justify-content: flex-start; } .artist-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-sm); } .credits-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); } .brand-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .hero { min-height: calc(100svh - var(--nav-height) + 3rem); padding-block: var(--space-lg); } } /* Mobile */ @media (max-width: 480px) { :root { --space-xl: 2.5rem; --space-lg: 1.5rem; } .container { padding-inline: var(--space-sm); } .artist-grid { grid-template-columns: 1fr; } .hero__cta-group { flex-direction: column; align-items: center; } }