/* Connor Sproull Golf Academy — site layer over style-dark.css. New components planned in 03-structure.md; documented in wiki/components/component-library.md after the build. */ /* Linked after style-dark.css in (two parallel requests instead of an @import chain). */ /* Logo: the live PNG is black line art on an OPAQUE white background, which would be a white box on the black header. invert(1) turns it into white art on black, matching the header, without editing the client's file. (brightness(0) invert(1) was tried first and whitened the whole box.) */ .nav__logo-img,.footer-logo-img{height:44px;filter:invert(1)} .footer-logo-img{margin-bottom:14px} /* Accessible skip link */ .skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:8px 14px;z-index:300} .skip:focus{left:8px;top:8px} /* Active nav item */ .nav__links li.is-active > a{box-shadow:inset 0 -3px 0 var(--brand)} /* ---------- Photo hero without a form ---------- */ .hero-dark--single{padding:96px 0 88px} .hero-dark--single .hero-dark__inner{max-width:760px} .hero-dark__bg{object-position:center 40%} .hero-dark--single .hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px} /* ---------- Facts row ---------- */ .facts-row{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;margin:6px 0 0;padding:0;font-weight:600;font-size:.95rem} .facts-row li{display:flex;align-items:center} .facts-row li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);margin:0 14px} /* ---------- Inner hero extras ---------- */ .hero .hero__cta{margin-top:18px} .breadcrumb{background:#111;color:#aaa;font-size:.82rem} .breadcrumb ol{list-style:none;margin:0;padding:10px 0;display:flex;flex-wrap:wrap;gap:6px} .breadcrumb li + li::before{content:"›";margin-right:6px;color:#666} .breadcrumb a{color:#ddd;text-decoration:none} .breadcrumb a:hover{text-decoration:underline} /* ---------- Status pill ---------- */ .status-pill{display:inline-block;border-radius:999px;padding:5px 14px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;border:2px solid var(--brand)} .status-pill--open{background:var(--brand);color:#fff} .status-pill--soon,.status-pill--waitlist,.status-pill--closed{background:transparent;color:inherit} .status-pill--full{background:#333;border-color:#333;color:#fff} /* ---------- Rate card ---------- */ .rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .rate-card{border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius);padding:22px;background:#fff;color:var(--ink);display:flex;flex-direction:column} .rate-card h3{font-size:1.02rem;margin-bottom:14px} .rate-card__prices{margin:auto 0 0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline} .rate-card__prices dt{color:var(--ink-soft);font-size:.9rem} .rate-card__prices dd{margin:0;font-weight:800;font-size:1.35rem} .rate-card__unit{font-size:.8rem;font-weight:600;color:var(--ink-soft)} .tag{display:inline-block;background:var(--bg-gray);color:var(--ink);border-radius:4px;padding:2px 8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;align-self:flex-start} .rate-note{margin-top:22px;color:var(--ink-soft)} /* ---------- Camp card ---------- */ .camp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .camp-card{border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius);padding:26px;background:#fff;color:var(--ink)} .camp-card--wide{grid-column:1/-1} .camp-card h3{font-size:1.25rem} .camp-card__dates{font-size:1.15rem;font-weight:700;margin-bottom:10px} .camp-card__meta{list-style:none;margin:0 0 14px;padding:0;color:var(--ink-soft)} .camp-card__meta li{margin-bottom:4px} /* ---------- Numbered steps ---------- */ .steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px} .steps li{counter-increment:step;position:relative;padding:54px 20px 20px;border-radius:var(--radius);background:#fff;color:var(--ink);border:1px solid var(--line)} .steps li::before{content:counter(step);position:absolute;top:16px;left:20px;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem} .steps strong{display:block;margin-bottom:4px} .steps p{margin:0;color:var(--ink-soft)} .steps address{font-style:normal;margin-top:10px;color:var(--ink)} /* ---------- Curriculum grid ---------- */ .curriculum{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .curriculum li{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);padding:16px;font-weight:700;background:#fff;color:var(--ink)} /* ---------- Checklist (plain) ---------- */ .checklist{list-style:none;margin:0 0 1em;padding:0} .checklist li{padding-left:26px;position:relative;margin-bottom:8px} .checklist li::before{content:"\2713";position:absolute;left:0;color:var(--brand);font-weight:900} /* ---------- Testimonial ---------- */ .testimonial{margin:0;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:18px} .testimonial blockquote{margin:0;font-size:1.02rem;line-height:1.75;position:relative;padding-top:28px} .testimonial blockquote::before{content:"\201C";position:absolute;top:-18px;left:-4px;font-size:4rem;line-height:1;color:var(--brand);font-weight:800} .testimonial blockquote p:last-child{margin-bottom:0} .testimonial figcaption{display:flex;align-items:center;gap:14px;margin-top:auto} .testimonial__photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0} .testimonial figcaption strong{display:block} .testimonial__role{font-size:.88rem;color:var(--ink-soft)} .testimonial--featured{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:center;padding:0;overflow:hidden} .testimonial--featured .testimonial__media{margin:0;height:100%} .testimonial--featured .testimonial__media img{width:100%;height:100%;object-fit:cover;min-height:300px} .testimonial--featured .testimonial__media figcaption{font-size:.72rem;color:var(--ink-soft);padding:6px 10px} .testimonial--featured .testimonial__body{padding:32px 32px 32px 0} .testimonial--featured blockquote{font-size:1.1rem} .creds{list-style:none;margin:6px 0 0;padding:0;font-size:.85rem;color:var(--ink-soft)} .creds li{margin-bottom:2px} /* ---------- Instructor card ---------- */ .instructor{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;color:var(--ink);text-align:center} .instructor__initials{width:84px;height:84px;border-radius:50%;background:#0a0a0a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;margin:0 auto 14px;border:3px solid var(--brand)} .instructor .role{color:var(--brand);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px} /* ---------- Media split / figure ---------- */ .media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center} .media-split--reverse > :first-child{order:2} .media-split figure{margin:0} .media-split img{border-radius:var(--radius);width:100%;height:auto} .media-split figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:8px} .badge-img,.media-split img.badge-img{width:88px;height:auto;margin-top:8px;border-radius:0} /* ---------- Contact card ---------- */ .contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;color:var(--ink)} .contact-card dl{margin:0} .contact-card dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700;margin-top:14px} .contact-card dt:first-child{margin-top:0} .contact-card dd{margin:2px 0 0} .contact-card .big-phone{font-size:1.6rem;font-weight:800;color:var(--ink);text-decoration:none} .contact-card address{font-style:normal} /* ---------- Forms ---------- */ .form-card--teal{padding:28px} .form-card--teal h3{font-size:1.3rem} .field .req{color:var(--brand)} .field--checks{border:none;padding:0;margin:0 0 14px} .field--checks legend{font-size:.85rem;font-weight:600;margin-bottom:6px;padding:0} .check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;font-weight:600;cursor:pointer} .check input{margin-top:5px;width:18px;height:18px;flex-shrink:0;accent-color:var(--brand)} .check small{display:block;font-weight:400;color:var(--ink-soft)} .form-note{font-size:.82rem;color:var(--ink-soft);margin:12px 0 0} .form-card--teal button.btn{width:100%;justify-content:center;font-size:1rem;font-family:inherit} .hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden} .field input:focus,.field textarea:focus,.field select:focus,.check input:focus{outline:2px solid var(--brand);outline-offset:1px} /* ---------- Section on black: keep white cards legible ---------- */ .section--alt .steps li,.section--alt .rate-card,.section--alt .camp-card,.section--alt .testimonial,.section--alt .instructor,.section--alt .contact-card{color:var(--ink)} .section--alt .testimonial a,.section--alt .camp-card a,.section--alt .contact-card a{color:var(--brand)} .section--alt .form-card--teal a{color:var(--brand)} .section__more{margin-top:26px} /* Prose (legal pages) */ .prose{max-width:760px} .prose h2{font-size:1.35rem;margin-top:1.6em} /* 404/thank-you link list */ .pill-links{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px} /* Floating call: keep it off forms on small screens */ @media (max-width:900px){ .rate-grid{grid-template-columns:repeat(2,1fr)} .curriculum{grid-template-columns:repeat(2,1fr)} .media-split,.testimonial--featured{grid-template-columns:minmax(0,1fr)} .media-split--reverse > :first-child{order:0} .testimonial--featured .testimonial__body{padding:0 26px 28px} .testimonial--featured .testimonial__media img{min-height:0;max-height:340px} .camp-grid{grid-template-columns:1fr} body.no-float .floating-call{display:none} } @media (max-width:600px){ .rate-grid,.curriculum{grid-template-columns:1fr} .hero-dark--single{padding:64px 0 56px} .facts-row{flex-direction:column;gap:4px} .facts-row li + li::before{display:none} .hero .hero__cta,.hero-dark--single .hero__cta{flex-direction:column;align-items:stretch} .hero__cta .btn{justify-content:center} }