/* ========================================================================== Terraza Racquets Club — Site Stylesheet Brand tokens sourced from TerrazaRacquetsClub_BrandGuidelines.pdf (Feb 2026) FONT NOTE: Altesse Std, Ogg Display, and Avenir are the brand's licensed Adobe Fonts and are NOT free web fonts. Until an Adobe Fonts kit link is available, this file uses close free alternatives (Fraunces, Cormorant Garamond, Inter). To swap in the real fonts later: 1. Add the Adobe Fonts (or self-hosted @font-face) in each HTML , above this stylesheet. 2. Update the three --font-* variables below to the real family names. No other changes are needed — every heading/body rule reads from these variables. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,500&family=Cormorant+Garamond:ital@1&family=Inter:wght@400;500;600&display=swap'); :root { /* Brand colours — Verde Oscuro dropped as full-black nav/footer base; Limon (yellow) intentionally excluded per brand direction. */ --verde-oscuro: #00291d; --verde-oscuro-light: #0d3c2c; --stucco: #e3d6c6; --azul-cielo: #b4c7d3; --terracotta: #924b31; --terracotta-dark: #7a3d27; --salvia: #6f7a5a; --bg-page: #f7f2ea; --bg-card: #ffffff; --ink: #1c1e19; --ink-muted: #5b5850; --border: #e2dccf; /* Typography — see FONT NOTE above */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-script: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container: 1140px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg-page); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 32px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; color: var(--ink); } p { margin: 0; } .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s ease; } .btn:hover { opacity: 0.85; } .btn-primary { background: var(--terracotta); color: #fff; } .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .btn-outline:hover { border-color: #fff; } .btn-dark { background: var(--verde-oscuro); color: #fff; } /* ============ NAV ============ */ .site-nav { background: var(--verde-oscuro); position: sticky; top: 0; z-index: 100; } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; } .site-nav .logo img { height: 34px; width: auto; } .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .nav-links a { color: var(--stucco); padding: 8px 0; } .nav-links a:hover, .nav-links a.active { color: #fff; } .nav-links a.active { border-bottom: 1px solid var(--terracotta); } .nav-links .disabled { color: rgba(227,214,198,0.35); cursor: default; } .nav-links .disabled:hover { color: rgba(227,214,198,0.35); } .has-dropdown { position: relative; } .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--verde-oscuro-light); min-width: 180px; padding: 10px 0; margin-top: 8px; box-shadow: 0 12px 24px rgba(0,0,0,0.25); } .has-dropdown:hover .dropdown { display: block; } .dropdown a { display: block; padding: 10px 20px; text-transform: none; letter-spacing: 0.02em; font-weight: 500; } .nav-cta { display: flex; align-items: center; gap: 24px; } .nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; } @media (max-width: 900px) { .nav-links { display: none; } .nav-toggle { display: block; } .site-nav .btn { padding: 10px 18px; font-size: 11px; } } /* ============ HERO ============ */ .hero { position: relative; background: var(--verde-oscuro); color: #fff; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.9; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,41,29,0.35) 0%, rgba(0,41,29,0.4) 55%, var(--verde-oscuro) 100%); } .hero-content { position: relative; text-align: center; padding: 110px 32px 90px; max-width: 720px; margin: 0 auto; } .hero-content .eyebrow { color: var(--azul-cielo); display: block; margin-bottom: 18px; text-shadow: 0 2px 10px rgba(0,0,0,0.35); } .hero-content h1 { color: #fff; font-size: 44px; line-height: 1.2; margin-bottom: 22px; text-shadow: 0 2px 14px rgba(0,0,0,0.4); } .hero-content .sub { font-size: 16px; color: var(--stucco); max-width: 480px; margin: 0 auto 34px; line-height: 1.7; text-shadow: 0 2px 10px rgba(0,0,0,0.35); } @media (max-width: 640px) { .hero-content h1 { font-size: 30px; } .hero-content { padding: 80px 24px 60px; } } /* Page header (non-home pages) */ .page-header { position: relative; background: var(--verde-oscuro); color: #fff; padding: 90px 32px 70px; text-align: center; } .page-header .eyebrow { color: var(--azul-cielo); display:block; margin-bottom: 16px; } .page-header h1 { color: #fff; font-size: 38px; margin-bottom: 16px; } .page-header .sub { color: var(--stucco); max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.7; } /* ============ SECTIONS ============ */ section { padding: 88px 0; } .section-tight { padding: 64px 0; } .section-alt { background: var(--bg-card); } .section-center { text-align: center; } .section-head { max-width: 620px; margin: 0 auto 52px; text-align: center; } .section-head .eyebrow { color: var(--terracotta); display: block; margin-bottom: 14px; } .section-head h2 { font-size: 32px; line-height: 1.25; } .section-head p { margin-top: 16px; color: var(--ink-muted); font-size: 15px; line-height: 1.7; } /* Why Terraza — 3 col */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .feature-card { text-align: left; } .feature-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #fff; } .feature-icon svg { width: 20px; height: 20px; } .feature-card h3 { font-size: 18px; margin-bottom: 10px; } .feature-card p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.7; } /* Get Started cards */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .action-card { position: relative; border-radius: 4px; overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; color: #fff; background-size: cover; background-position: center; } .action-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,41,29,0.15) 0%, rgba(0,41,29,0.92) 90%); } .action-card-content { position: relative; padding: 34px; } .action-card h3 { color: #fff; font-size: 22px; margin-bottom: 10px; } .action-card p { color: var(--stucco); font-size: 14px; margin-bottom: 20px; } /* Content blocks with photo (used on Our Courts) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split img { border-radius: 4px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; } .split.reverse .split-media { order: 2; } .split h2 { font-size: 28px; margin-bottom: 18px; } .split p { color: var(--ink-muted); font-size: 15px; line-height: 1.75; margin-bottom: 16px; } .photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .photo-row img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; border-radius: 4px; } @media (max-width: 640px) { .photo-row { grid-template-columns: 1fr; } } .feature-list { display: grid; gap: 22px; margin: 8px 0 28px; } .feature-list-item h4 { font-size: 16px; margin-bottom: 6px; } .feature-list-item p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.7; } .bullet-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; } .bullet-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-muted); align-items: flex-start; } .bullet-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); margin-top: 8px; flex-shrink: 0; } /* Numbered steps (How to Book) */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 18px; } .steps li { counter-increment: step; display: flex; gap: 16px; align-items: flex-start; font-size: 14.5px; color: var(--ink-muted); line-height: 1.6; } .steps li::before { content: counter(step); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--verde-oscuro); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; } /* Booking section card */ .book-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 44px; margin-bottom: 32px; } .book-block-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; } .book-block-head h2 { font-size: 24px; margin-bottom: 8px; } .book-block-head p { color: var(--ink-muted); font-size: 14.5px; max-width: 480px; } .book-embed { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 16px; background: #fafafa; } .book-embed iframe { width: 100%; height: 640px; border: 0; display: block; } .book-fallback { font-size: 13px; color: var(--ink-muted); } .book-fallback a { color: var(--terracotta); font-weight: 600; } .class-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; } .class-card { border: 1px solid var(--border); border-radius: 4px; padding: 26px; } .class-card h4 { font-size: 16px; margin-bottom: 8px; } .class-card p { color: var(--ink-muted); font-size: 14px; margin-bottom: 18px; } /* Social / Instagram */ .social-section { background: var(--verde-oscuro); color: #fff; text-align: center; } .social-section .eyebrow { color: var(--azul-cielo); } .social-section h2 { color: #fff; font-size: 28px; margin: 14px 0 6px; } .social-handle { color: var(--stucco); font-size: 15px; margin-bottom: 34px; } .social-handle a { color: var(--stucco); font-weight: 600; } .social-handle a:hover { color: #fff; } .social-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 36px; } .social-tile { position: relative; aspect-ratio: 1/1; overflow: hidden; display: block; } .social-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .social-tile:hover img { transform: scale(1.06); } .social-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0,41,29,0.15); opacity: 0; transition: opacity 0.2s ease; } .social-tile:hover::after { opacity: 1; } .social-embed { max-width: 1020px; margin: 0 auto 36px; } .social-embed iframe { width: 100%; height: 255px; display: block; } .icon-instagram { width: 16px; height: 16px; } @media (max-width: 640px) { .social-grid { grid-template-columns: repeat(3, 1fr); } } /* Footer social row */ .footer-social { display: flex; gap: 14px; margin-top: 18px; } .footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 0; } .footer-social a:hover { border-color: #fff; } .footer-social svg { width: 16px; height: 16px; stroke: var(--stucco); } .footer-social a:hover svg { stroke: #fff; } /* Footer CTA strip */ .cta-strip { background: var(--salvia); color: #fff; text-align: center; padding: 56px 32px; } .cta-strip h2 { color: #fff; font-size: 24px; margin-bottom: 20px; } /* Map */ .map-embed iframe { width: 100%; height: 380px; border: 0; display: block; filter: grayscale(0.15); } /* ============ FOOTER ============ */ .site-footer { background: var(--terracotta-dark); color: var(--stucco); } .footer-top { padding: 64px 0 40px; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; } .footer-logo img { height: 30px; margin-bottom: 18px; } .footer-tagline { font-family: var(--font-script); font-style: italic; font-size: 18px; color: var(--stucco); } .footer-col h5 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 18px; } .footer-col p, .footer-col a { display: block; font-size: 13.5px; color: var(--stucco); margin-bottom: 10px; line-height: 1.6; } .footer-col a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 22px 0; font-size: 12px; color: rgba(227,214,198,0.7); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } @media (max-width: 900px) { .grid-3, .grid-2, .split, .footer-grid, .class-cards { grid-template-columns: 1fr; } .split-media { order: -1 !important; } section { padding: 60px 0; } .book-block { padding: 28px; } }