/* Well Said — brand stylesheet Register 1 (default): playful, full colour — schools & parents Register 2 (.quiet on ): ink + teal, generous whitespace — corporate & interview prep */ :root { /* Brand book palette (exact values, July 2026) */ --ivory: #F4F0E7; /* warm cream */ --ink: #0D1B2A; /* deep navy */ --muted: #55606B; --teal: #0E7C77; /* curiosity */ --coral: #EB4F4A; /* creativity */ --amber: #FFB21D; /* confidence */ --blue: #1B4FD6; /* connection */ --teal-dark: #0A5A56; --coral-dark: #B23531; --blue-dark: #123A9E; --peach: #FFD3C2; /* soft peach */ --aqua: #C7E5E7; /* light aqua */ --paper: #FFFFFF; --maxw: 1080px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--ivory); color: var(--ink); font-family: 'Inter', -apple-system, sans-serif; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } h1, h2 { font-family: 'Courier Prime', monospace; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 0.75rem; } h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; margin-bottom: 0.5rem; } .kicker { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 0.75rem; display: block; } p { margin-bottom: 1rem; color: var(--ink); } .lead { font-size: 1.2rem; color: var(--muted); } /* ---------- Logo ---------- */ .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } /* Stacked wordmark lockup: mark alongside a two-line "well / said." */ .logotype { display: inline-block; } .logomark { display: grid; grid-template-columns: 1fr 1fr; width: 44px; height: 44px; font-family: Georgia, serif; font-size: 40px; line-height: 0.62; font-weight: 700; } .logomark span:nth-child(1) { color: var(--teal); } .logomark span:nth-child(2) { color: var(--coral); } .logomark span:nth-child(3) { color: var(--amber); } .logomark span:nth-child(4) { color: var(--blue); } .logotype { font-family: 'Special Elite', monospace; font-weight: 400; font-size: 1.35rem; line-height: 0.96; } .logotype .dot { color: var(--coral); } .quiet .logomark span { color: var(--ink); } .quiet .logomark span:nth-child(2) { color: var(--teal); } /* ---------- Header / nav ---------- */ header { position: sticky; top: 0; z-index: 50; background: rgba(250, 246, 239, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(31,30,28,0.08); } .navbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; } nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-left: auto; } .navbar > .cta { margin-left: 22px; } nav a { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.92rem; color: var(--ink); text-decoration: none; padding-bottom: 2px; } nav a:hover { border-bottom: 3px solid var(--amber); } nav a.active { border-bottom: 3px solid var(--teal); } .cta { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.92rem; background: var(--coral); color: #fff !important; padding: 9px 20px; border-radius: 999px; text-decoration: none; transition: background 0.15s; } .cta:hover { background: var(--coral-dark); border-bottom: none !important; } /* Bright call-to-action — coral, for a button that needs to stand out */ .cta-bright { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; background: var(--coral); color: #fff !important; padding: 13px 26px; border-radius: 999px; text-decoration: none; display: inline-block; transition: background 0.15s; } .cta-bright:hover { background: var(--coral-dark); border-bottom: none !important; } /* Secondary "register interest" button — outline teal, for not-yet-launched offers */ .cta-ghost { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem; background: transparent; color: var(--teal); border: 1.5px solid var(--teal); padding: 8px 17px; border-radius: 999px; text-decoration: none; display: inline-block; text-align: center; transition: background 0.15s, color 0.15s; } .cta-ghost:hover { background: var(--teal); color: #fff !important; border-bottom: 1.5px solid var(--teal) !important; } /* ---------- Mobile menu (hamburger) — pure CSS, no JavaScript ---------- */ .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-burger { display: none; } @media (max-width: 880px) { .navbar { position: relative; padding: 12px 20px; } .logomark-img { height: 46px; } .logotype { font-size: 1.15rem; } /* burger button */ .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; border-radius: 10px; cursor: pointer; flex: 0 0 auto; margin-left: 6px; } .nav-burger span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; } .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--teal); outline-offset: 2px; } /* keep the CTA visible in the bar, slightly compact */ .navbar > .cta { margin-left: auto; padding: 8px 15px; font-size: 0.85rem; } /* links collapse into a dropdown panel under the bar */ header nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; background: var(--ivory); border-bottom: 1px solid rgba(31,30,28,0.10); box-shadow: 0 12px 26px rgba(13,27,42,0.12); padding: 4px 20px 14px; } .nav-toggle:checked ~ nav { display: flex; } header nav a { padding: 14px 2px; font-size: 1rem; border-bottom: 1px solid rgba(31,30,28,0.08) !important; } header nav a:last-child { border-bottom: none !important; } header nav a.active { color: var(--teal); } } /* ---------- Hero ---------- */ .hero { padding: 84px 0 64px; } .hero .lead { max-width: 620px; margin-top: 1.25rem; } .underline-brush { position: relative; white-space: nowrap; } .underline-brush svg, .underline-brush .stroke-img { position: absolute; left: 0; bottom: -10px; width: 100%; height: 12px; } .stroke-img { object-fit: fill; } /* ---------- Sections ---------- */ section { padding: 56px 0; } .section-alt { background: var(--paper); } .band-peach { background: var(--peach); } .band-aqua { background: var(--aqua); } /* Ghost quote — oversized painted mark whispering behind a section */ .ghost-wrap { position: relative; overflow: hidden; } .ghost-wrap > .wrap { position: relative; z-index: 1; } .ghostq { position: absolute; height: 118%; width: auto; opacity: 0.09; pointer-events: none; user-select: none; z-index: 0; } .ghostq.tl { top: -9%; left: -50px; } .ghostq.br { bottom: -9%; right: -50px; } /* Script pull-line as a visual break */ .script-break { text-align: center; padding: 8px 24px 0; } /* Photography */ .photo-band { border-radius: 16px; overflow: hidden; margin: 2rem 0 0.75rem; } .photo-band img { display: block; width: 100%; max-height: 420px; object-fit: cover; } .photo-band.natural img { max-height: none; height: auto; } /* Hero photo that fills its column */ .photo-slot.filled.cover { height: 100%; } .photo-slot.filled.cover img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; } .photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2rem 0 0.75rem; } .photo-duo figure { border-radius: 16px; overflow: hidden; margin: 0; } .photo-duo img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 700px) { .photo-duo { grid-template-columns: 1fr; } } /* Four C cards */ .cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-top: 2rem; } .ccard { background: var(--paper); border-radius: 16px; padding: 1.5rem 1.4rem; border: 1px solid rgba(31,30,28,0.07); } .ccard .cmark { font-family: Georgia, serif; font-size: 2.6rem; line-height: 0.8; font-weight: 700; display: block; } .ccard h3 { margin-top: 0.4rem; } .ccard p { font-size: 0.95rem; color: var(--muted); margin-bottom: 0; } .ccard.teal .cmark, .ccard.teal h3 { color: var(--teal); } .ccard.coral .cmark, .ccard.coral h3 { color: var(--coral); } .ccard.amber .cmark { color: var(--amber); } .ccard.amber h3 { color: #9A6410; } .ccard.blue .cmark, .ccard.blue h3 { color: var(--blue); } /* Offer cards */ .offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 2rem; } .offer { background: var(--paper); border-radius: 16px; padding: 1.8rem 1.6rem; border: 1px solid rgba(31,30,28,0.07); display: flex; flex-direction: column; } .offer h3 { font-size: 1.25rem; } .offer .tag { align-self: flex-start; font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 12px; border-radius: 999px; margin-bottom: 0.9rem; } .tag.teal { background: #DDF0EE; color: var(--teal-dark); } .tag.coral { background: #FADFD8; color: var(--coral-dark); } .tag.blue { background: #DEE7FA; color: var(--blue-dark); } .tag.amber { background: #FBEAC2; color: #8A5A0B; } .offer a.more { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.92rem; color: var(--teal); text-decoration: none; margin-top: auto; } .offer a.more:hover { text-decoration: underline; } /* Testimonial carousel — manual (no autoplay). 2 cards on desktop, 1 on mobile. Native swipe via scroll-snap; arrows + dots for desktop. Controls auto-hide when there aren't enough quotes to scroll. Add a quote by pasting one