/* Chess Landing Page Styles Loaded alongside Tailwind CDN (Preflight reset) + styles.css. Tailwind Preflight handles: margin resets, img display:block, box-sizing, line-height: 1.5, a/img/svg resets. This file provides chess-specific overrides. */ /* ─── Body-level overrides ─── */ /* styles.css sets overflow-x: hidden on BOTH html and body, which creates two nested scroll containers and can produce a double scrollbar. */ html:has(body.chess-landing) { overflow-x: initial; } /* Override styles.css globals (background grid, text-shadow, font-weight). color + font-family + font-smoothing handled by Tailwind utilities on . */ body.chess-landing { background-color: #f7f3eb; background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='%23F0E9DA'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23F0E9DA'/%3E%3C/svg%3E"); background-size: 200px 200px; image-rendering: pixelated; font-weight: 400; text-shadow: none; } /* Override styles.css a { text-decoration: underline dotted; color: var(--dark-gold); } Use .chess-landing (not body.chess-landing) so specificity (0,1,1) doesn't beat component selectors like .chess-nav-links a (also 0,1,1 but later). */ .chess-landing a { text-decoration: none; color: inherit; } /* ─── Navigation ─── */ .chess-nav { position: sticky; top: 0; z-index: 50; background-color: color(srgb 0.3952 0.336613 0.1248 / 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .chess-nav-inner { max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .chess-nav-logo { height: 2rem; } .chess-nav-links { display: flex; align-items: center; gap: 2rem; } .chess-nav-links a { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; font-weight: 500; transition: color 0.2s ease; } .chess-nav-links a:hover { color: white; } /* Mobile nav overrides for chess color scheme */ body.chess-landing .mobile-nav { background-color: color(srgb 0.3952 0.336613 0.1248 / 0.95); } body.chess-landing .mobile-nav a { color: #fff; } /* ─── Hero Section ─── */ .chess-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 4rem 1.5rem; max-width: 72rem; margin: 0 auto; } .chess-hero-content { color: #3d3520; } .chess-hero-content .pre-title { font-size: 0.875rem; line-height: 1.25rem; text-transform: uppercase; letter-spacing: 0.025em; font-weight: 500; color: #8b7d3c; margin-bottom: 1rem; } .chess-hero-content h1 { color: #3d3520; font-size: 3.75rem; font-weight: 400; line-height: 1.1; margin-top: 0; margin-bottom: 1.5rem; } .chess-hero-content > p { font-size: 1.125rem; line-height: 1.625; margin-bottom: 2rem; color: #5a5035; max-width: 28rem; } .chess-hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .chess-hero-buttons .register-button, .chess-hero-buttons .info-button { padding: 0.75rem 2rem; border-radius: 0.25rem; font-size: 1rem; text-decoration: none; font-weight: 500; text-shadow: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .chess-hero-buttons .register-button { background-color: #8b7d3c; color: white; border: none; } .chess-hero-buttons .register-button:hover { background-color: #6b5f2b; } .chess-hero-buttons .info-button { background-color: transparent; color: #8b7d3c; border: 2px solid #8b7d3c; } .chess-hero-buttons .info-button:hover { background-color: #8b7d3c; color: white; } .chess-hero-image { overflow: hidden; border-radius: 1rem; } .chess-hero-image img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* ─── About Section ─── */ .chess-about { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 4rem 1.5rem; max-width: 72rem; margin: 0 auto; } .chess-about-image { overflow: hidden; border-radius: 1rem; } .chess-about-image img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* 60px/1.1/400 serif heading, color #64551F */ .chess-about-content h2 { font-family: "Latin Modern Roman", serif; color: #64551F; font-size: 3.75rem; font-weight: 400; line-height: 1.1; margin-top: 0; margin-bottom: 1.5rem; } .chess-about-content p { color: #5a5035; font-size: 1.125rem; line-height: 1.625; margin-bottom: 1.5rem; } .chess-about-content p:last-child { margin-bottom: 0; } /* ─── Course Cards Section ─── */ .chess-courses-section { padding: 4rem 1.5rem; max-width: 72rem; margin: 0 auto; } .chess-courses-header { text-align: center; margin-bottom: 3rem; } /* 60px/1.1/400 serif heading, color #64551F */ .chess-courses-header h2 { font-family: "Latin Modern Roman", serif; color: #64551F; font-size: 3.75rem; font-weight: 400; line-height: 1.1; margin-top: 0; margin-bottom: 1rem; } .chess-courses-header p { color: #5a5035; max-width: 36rem; margin: 0 auto; } .chess-courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; max-width: 56rem; margin: 0 auto; } /* Override carousel defaults from styles.css */ .chess-courses-grid .course-card { opacity: 1; transform: none; width: auto; border-radius: 1rem; } .chess-courses-grid .course-card:hover { transform: translateY(-4px); } /* ─── Location Section ─── */ .chess-location { max-width: 72rem; margin: 0 auto; padding: 4rem 1.5rem; } .chess-location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } /* 60px/1.1/400 serif heading, color #64551F */ .chess-location-copy h2 { font-family: "Latin Modern Roman", serif; color: #64551F; font-size: 3.75rem; font-weight: 400; line-height: 1.1; margin-top: 0; margin-bottom: 2rem; } .chess-location-copy p { color: #5a5035; font-size: 1.125rem; line-height: 1.625; } .chess-location-copy p:first-of-type { margin-bottom: 2rem; } .chess-location-copy p:last-of-type { margin-bottom: 0; } .chess-location-media { display: flex; flex-direction: column; gap: 1.5rem; } .chess-location-photo { overflow: hidden; border-radius: 0.5rem; } .chess-location-photo img { width: 100%; height: 16rem; object-fit: cover; } .chess-location-map { overflow: hidden; border-radius: 0.5rem; } .chess-location-map iframe { border: 0; border-radius: 0.5rem; } /* ─── Contact / Footer Section ─── */ .chess-footer { max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem 2rem; text-align: left; } /* Suppress decorative SVG pseudo-elements from styles.css (hexagon, etc.) */ .chess-landing footer::after, .chess-landing #courses::after { content: none; } .chess-contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; margin-bottom: 4rem; } /* 60px/1.1/400 serif heading, color #64551F */ .chess-contact-heading h2 { font-family: "Latin Modern Roman", serif; color: #64551F; font-size: 3.75rem; font-weight: 400; line-height: 1.1; margin-top: 0; } .chess-contact-email-line { color: #5a5035; font-size: 1rem; margin-bottom: 0.25rem; } .chess-contact-email { color: #3d3520; font-weight: 500; font-size: 1rem; transition: color 0.2s ease; } .chess-contact-email:hover { color: #8b7d3c; } .chess-newsletter { margin-top: 2rem; } .chess-newsletter p { color: #5a5035; font-size: 1rem; margin-bottom: 1rem; } .chess-newsletter-form { display: flex; border: none; overflow: visible; } .chess-newsletter-form input[type="email"] { flex: 1; padding: 0.75rem 1.25rem; background: white; border: 1px solid #ece6d8; border-right: none; border-radius: 0.5rem 0 0 0.5rem; color: #3d3520; font-size: 1rem; font-family: inherit; outline: none; } .chess-newsletter-form input[type="email"]::placeholder { color: rgba(90, 80, 53, 0.5); } .chess-newsletter-form input[type="email"]:focus { box-shadow: 0 0 0 2px rgba(139, 125, 60, 0.3); } .chess-newsletter-form .submit-button { background-color: #8b7d3c; color: white; padding: 0.75rem 2rem; border: 1px solid #8b7d3c; border-radius: 0 0.5rem 0.5rem 0; font-weight: 500; font-size: 1rem; font-family: inherit; cursor: pointer; transition: background-color 0.2s ease; } .chess-newsletter-form .submit-button:hover { background-color: #6b5f2b; border-color: #6b5f2b; } /* Subscribed state from newsletter.js */ .chess-newsletter-form .submit-button.subscribed, .chess-newsletter-form .submit-button.subscribed:hover { background-color: #6b5f2b; border-color: #6b5f2b; cursor: default; } .chess-social { margin-top: 2.5rem; } .chess-social-label { color: #5a5035; font-weight: 500; margin-bottom: 1rem; } .chess-social-icons { display: flex; align-items: center; gap: 1.25rem; } .chess-social-icons a { display: flex; transition: opacity 0.2s ease; } .chess-social-icons a:hover { opacity: 0.7; } .chess-social-icons img { width: 1.75rem; height: 1.75rem; } /* ─── Footer Bottom ─── */ .chess-footer-bottom { text-align: center; padding-top: 1.875rem; } .chess-footer-links { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.875rem; color: #5a5035; margin-bottom: 0.75rem; } .chess-footer-links a { color: #5a5035; transition: color 0.2s ease; } .chess-footer-links a:hover { color: #8b7d3c; } .chess-footer-copyright { font-size: 0.875rem; color: #5a5035; margin-bottom: 1rem; } .chess-footer-payment { display: flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #5a5035; } .chess-footer-payment img { height: 1.25rem; } /* ─── Responsive ─── */ @media (min-width: 768px) { .chess-hero { padding-top: 6rem; padding-bottom: 6rem; } .chess-about { padding-top: 6rem; padding-bottom: 6rem; } .chess-location { padding-top: 6rem; padding-bottom: 6rem; } } @media (max-width: 767px) { .chess-nav-links { display: none; } .chess-hero { grid-template-columns: 1fr; padding-top: 2rem; gap: 2rem; } .chess-hero-image { order: -1; } .chess-hero-content h1 { font-size: 2.25rem; } .chess-hero-content > p { max-width: none; } .chess-about { grid-template-columns: 1fr; } .chess-about-content h2, .chess-courses-header h2, .chess-location-copy h2, .chess-contact-heading h2 { font-size: 2.25rem; } .chess-courses-grid { grid-template-columns: 1fr; } .chess-location-grid { grid-template-columns: 1fr; } .chess-contact-grid { grid-template-columns: 1fr; } }