/* ============================================================= borgstijn.nl — shared stylesheet Used by every page with the sidebar navigation: home, about, contact, portfolio, shop, writing, kunstroute, magazine issue pages, and the artwork detail pages. HOW TO EDIT: - Change the nav, colors, or fonts ONCE here and it updates every page (previously that meant editing 15+ files by hand). - Each page's has a class like "page-about" so its own section below can safely override main/h1/h2/p without touching other pages. - Section numbers below match how the file is organized. Contents: 1. Reset & base 2. Sidebar navigation 3. Mobile menu toggle + responsive nav 4. Homepage hero 5. About page 6. Contact page 7. Kunstroute & Writing pages (shared "article" layout) 8. Magazine issue pages 9. Portfolio & Shop grids 10. Artwork detail pages ============================================================= */ /* 1. Reset & base ------------------------------------------- */ :root { --accent: #9a8c7e; --accent-dark: #83766a; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif; font-weight: 300; } body { background-color: #fff; color: #333; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Headings use the serif display face; body text stays sans. */ h1, h2, h3, .nav-name, .issue-subtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; } /* 2. Sidebar navigation --------------------------------------- */ nav { position: fixed; top: 0; left: 0; width: 250px; height: 100vh; padding: 2rem; background-color: #fff; display: flex; flex-direction: column; align-items: center; z-index: 100; } .profile-image { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin-bottom: 1rem; } .profile-image img { width: 100%; height: 100%; object-fit: cover; } .nav-name { font-size: 1.5rem; font-weight: 600; margin: 1rem 0; text-align: center; } .nav-links { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; width: 100%; } .nav-links a { color: #666; text-decoration: none; padding: 0.5rem 1rem; transition: all 0.3s ease; } .nav-links a:hover { color: var(--accent); } .nav-links a.active { color: var(--accent); border-bottom: 2px solid var(--accent); } main { margin-left: 250px; padding: 2rem; } /* 3. Mobile menu toggle + responsive nav ----------------------- */ .menu-toggle { display: none; position: fixed; top: 1rem; right: 1rem; z-index: 1000; background: none; border: none; font-size: 1.5rem; cursor: pointer; } @media (max-width: 768px) { nav { transform: translateX(-100%); transition: transform 0.3s ease; z-index: 999; } nav.active { transform: translateX(0); } main { margin-left: 0; } .menu-toggle { display: block; } } /* 4. Homepage hero ---------------------------------------------- */ .hero { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; } .hero h2 { font-size: 2rem; color: var(--accent); font-weight: normal; margin-bottom: 2rem; } .event-banner { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.85rem 1.25rem; background-color: rgba(154, 140, 126, 0.08); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; margin-bottom: 2rem; } .event-banner .event-date { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--accent); font-size: 1.15rem; white-space: nowrap; } .event-banner .event-text { color: #444; font-size: 0.95rem; } .event-banner a { color: #1a1a1a; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .event-banner a:hover { color: var(--accent); } .hero p { max-width: 600px; line-height: 1.6; color: #666; } .signature { margin-top: 2rem; max-width: 200px; } @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .hero h2 { font-size: 1.5rem; } .event-banner { flex-direction: column; align-items: flex-start; } } /* 5. About page --------------------------------------------------- */ .page-about main { padding: 4rem 2rem; max-width: 1200px; } .about-section { margin-bottom: 4rem; } .about-section:last-child { margin-bottom: 0; } .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin: 2rem 0; } .image-container { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; } .image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .image-container:hover img { transform: scale(1.05); } .quote-block { padding: 2rem; background-color: #f8f8f8; border-left: 4px solid #333; margin: 2rem 0; border-radius: 0 8px 8px 0; } .quote-block p { font-style: italic; font-size: 1.2rem; margin-bottom: 0; } @media (max-width: 768px) { .page-about main { padding: 2rem 1rem; } .image-grid { grid-template-columns: 1fr; gap: 1rem; } } /* 6. Contact page ------------------------------------------------- */ .page-contact main { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .contact-container { max-width: 800px; width: 100%; padding: 2rem; } .contact-heading { margin-bottom: 2rem; } .contact-heading h1 { font-size: 2.5rem; margin-bottom: 1rem; color: #333; } .contact-heading p { color: #666; line-height: 1.6; margin-bottom: 2rem; } .form-options { display: flex; gap: 2rem; margin-bottom: 2rem; } .form-option { flex: 1; background: #fff; padding: 2rem; border-radius: 8px; } .form-option h2 { font-size: 1.5rem; margin-bottom: 1rem; color: #333; } .code-block { background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto; margin-bottom: 1rem; } .code-block code { font-family: monospace; white-space: pre-wrap; word-break: break-all; } .copy-btn { background-color: #333; color: #fff; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .copy-btn:hover { background-color: #555; } @media (max-width: 768px) { .page-contact main { padding: 1rem; } .form-options { flex-direction: column; } } /* 7. Kunstroute & Writing pages (shared "article" layout) --------- */ .page-article main { padding: 4rem 2rem; max-width: 1200px; } .page-about h1, .page-article h1 { font-size: 2.5rem; margin-bottom: 1.5rem; font-weight: 600; } .page-about h2, .page-article h2 { font-size: 1.8rem; margin: 2rem 0 1rem; color: #333; } .page-about p, .page-article p, .page-magazine p { margin-bottom: 1.5rem; color: #444; } .blog-section { margin-bottom: 4rem; } .blog-section:last-child { margin-bottom: 0; } .blog-preview { margin: 2rem 0; max-width: 800px; } .blog-image { width: 100%; border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; transition: transform 0.3s ease; } .blog-image:hover { transform: translateY(-5px); } .blog-image img { width: 100%; display: block; } .cta-button { display: inline-block; background-color: #333; color: #fff; padding: 0.8rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 500; margin-top: 1rem; transition: background-color 0.3s ease; } .cta-button:hover { background-color: #555; } .recent-posts { margin-top: 3rem; } .post-list { list-style: none; } .post-list li { padding: 1rem 0; border-bottom: 1px solid #eee; } .post-list li:last-child { border-bottom: none; } .post-list a { color: #333; text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .post-list a:hover { color: #666; } @media (max-width: 768px) { .page-article main { padding: 2rem 1rem; } .page-about h1, .page-article h1, .page-magazine h1 { font-size: 2rem; } .page-about h2, .page-article h2 { font-size: 1.5rem; } } /* 8. Magazine issue pages ------------------------------------------ */ .page-magazine main { padding: 4rem 2rem; max-width: 1200px; } .page-magazine h1 { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 600; } .magazine-section { margin-bottom: 4rem; max-width: 800px; } .issue-subtitle { font-size: 1.5rem; color: #666; margin-bottom: 2rem; } .magazine-meta { display: flex; margin: 2rem 0; gap: 2rem; align-items: flex-start; } .magazine-cover { width: 300px; aspect-ratio: 3/4; overflow: hidden; border-radius: 8px; } .magazine-cover img { width: 100%; height: 100%; object-fit: cover; } .magazine-info { flex: 1; } .magazine-details { margin-bottom: 1.5rem; } .magazine-details p { margin-bottom: 0.5rem; } .video-container { margin: 3rem 0; } .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; max-width: 100%; margin-bottom: 1.5rem; border-radius: 8px; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .button-container { display: flex; gap: 1rem; margin: 2rem 0; } .gumroad-button { display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--accent); color: #fff; font-weight: 500; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; } .gumroad-button:hover { background-color: var(--accent-dark); transform: translateY(-2px); } .back-button { display: inline-block; padding: 0.75rem 1.5rem; background-color: #333; color: #fff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; } .back-button:hover { background-color: #555; } .featured-content { margin: 3rem 0; } .featured-content h2 { font-size: 1.8rem; margin-bottom: 1rem; } .featured-list { list-style: none; } .featured-list li { margin-bottom: 1rem; padding-left: 1.5rem; position: relative; } .featured-list li:before { content: "•"; position: absolute; left: 0; color: #666; } @media (max-width: 768px) { .page-magazine main { padding: 2rem 1rem; } .magazine-meta { flex-direction: column; } .magazine-cover { width: 100%; max-width: 300px; } } /* 9. Portfolio & Shop grids ----------------------------------------- */ .portfolio-title { text-align: center; margin-bottom: 2rem; font-size: 2.5rem; color: #333; } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; padding: 1rem; max-width: 1400px; margin: 0 auto; } .portfolio-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; transition: transform 0.3s ease; cursor: pointer; } .portfolio-item:hover { transform: translateY(-5px); } .portfolio-item img { width: 100%; height: 100%; object-fit: cover; } .portfolio-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; } .portfolio-overlay h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } .portfolio-overlay p { font-size: 0.9rem; opacity: 0.9; } .page-header { margin-bottom: 3rem; text-align: center; } .page-header h1 { font-size: 2.5rem; margin-bottom: 1rem; color: #333; } .page-header p { color: #666; font-size: 1.1rem; max-width: 600px; margin: 0 auto; line-height: 1.6; } .artwork-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; padding: 1rem; max-width: 1400px; margin: 0 auto; } .artwork-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; transition: transform 0.3s ease; cursor: pointer; } .artwork-item:hover { transform: translateY(-5px); } .artwork-item img { width: 100%; height: 100%; object-fit: cover; } .artwork-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; } .artwork-overlay h3 { font-size: 1.3rem; margin-bottom: 0.5rem; } .artwork-overlay p { font-size: 0.9rem; opacity: 0.9; } @media (max-width: 768px) { .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; padding: 0.5rem; } .artwork-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; padding: 0.5rem; } .page-header h1 { font-size: 2rem; } .artwork-item { margin: 0 0.5rem; } } /* 10. Artwork detail pages -------------------------------------------- */ .page-artwork main { padding: 4rem 2rem; max-width: 1200px; } .artwork-container { display: flex; flex-direction: column; gap: 2rem; } .artwork-header { margin-bottom: 2rem; } .artwork-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; font-weight: 600; } .artwork-content { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; } .artwork-image { border-radius: 8px; overflow: hidden; } .artwork-image img { width: 100%; height: auto; display: block; } .artwork-details { display: flex; flex-direction: column; gap: 1.5rem; } .artwork-details h2 { font-size: 1.8rem; color: #333; margin-bottom: 0.5rem; } .artwork-details p { color: #444; margin-bottom: 0.5rem; } .artwork-specs { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; margin-bottom: 1rem; } .spec-label { font-weight: bold; color: #666; } .artwork-description { margin-bottom: 2rem; } .artwork-price { font-size: 1.5rem; font-weight: bold; margin: 1.5rem 0; } .contact-button { display: inline-block; background-color: #333; color: white; padding: 0.8rem 1.5rem; text-decoration: none; border-radius: 4px; font-weight: 500; transition: all 0.3s ease; margin-top: 1rem; } .contact-button:hover { background-color: #555; transform: translateY(-2px); } @media (max-width: 768px) { .page-artwork main { padding: 2rem 1rem; } .artwork-content { grid-template-columns: 1fr; gap: 2rem; } }