/* ============================================================ I Take The Lead — site stylesheet Bespoke: warm "membership organisation" language — cream paper, ink type, the logo's own red (#C30000) and oval blue as accents. Critical above-fold rules are inlined in the ; this file carries everything else. ============================================================ */ /* ---------- sections ---------- */ .section { padding: 60px 0; } .section--tight { padding: 42px 0; } .section--paper { background: var(--paper); } .section--sand { background: var(--sand); } .section--ink { background: var(--ink); color: var(--on-ink); } .section--ink h2, .section--ink h3 { color: #fff; } .section--ink a { color: #ffd9d9; } .section--rule { border-top: 1px solid var(--line); } .section-head { max-width: 60ch; margin: 0 0 28px; } .section-head p { color: var(--ink-soft); font-size: 1.06rem; } .eyebrow { font: 700 0.76rem/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-deep); margin: 0 0 12px; } .section--ink .eyebrow { color: #ffb3b3; } /* ---------- hero ---------- */ .hero { position: relative; background: radial-gradient(circle at 1px 1px, rgba(15,48,87,0.16) 1px, transparent 0) 0 0/22px 22px, linear-gradient(180deg, #fff 0%, var(--paper) 62%, var(--sand) 100%); border-bottom: 1px solid var(--line); padding: 54px 0 46px; } .hero-grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } .hero h1 { margin: 0 0 14px; } .hero .sub { font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 12px; font-style: italic; } .hero .lead { font-size: 1.14rem; line-height: 1.62; margin: 0 0 24px; max-width: 56ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .pullquote { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 4px; padding: 26px 26px 22px; box-shadow: var(--shadow); } .pullquote blockquote { margin: 0; font-family: var(--font-head); font-size: 1.16rem; line-height: 1.5; color: var(--ink); } .pullquote blockquote::before { content: "\201C"; font-size: 3rem; line-height: 0; color: var(--red); vertical-align: -0.35em; margin-right: 4px; } .pullquote cite { display: block; margin-top: 16px; font-style: normal; font-size: 0.92rem; color: var(--ink-soft); } .pullquote cite b { display: block; color: var(--navy); font-size: 1rem; } /* ---------- trust chips (playbook 11.1) ---------- */ .chipband { background: var(--navy); color: #fff; padding: 22px 0; } .chipband h2 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #b9cee6; margin: 0 0 14px; font-family: var(--font-body); font-weight: 700; } .chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .chips li { border: 1px solid rgba(255,255,255,0.34); border-radius: 999px; padding: 9px 16px; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; background: rgba(255,255,255,0.06); } .chips li::before { content: "\2713"; color: #ff9c9c; font-weight: 700; margin-right: 8px; } /* ---------- cards / grids ---------- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* auto-FILL, not auto-fit: a day with two groups should keep card-sized cards rather than stretching two cards across the whole row. */ .grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 24px; box-shadow: var(--shadow); } .card h3 { margin: 0 0 10px; font-size: 1.16rem; } .card p:last-child { margin-bottom: 0; } /* numbered list used by /how-were-different and /membership steps */ .numlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: n; } .numlist > li { counter-increment: n; position: relative; padding: 20px 22px 20px 68px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 4px; box-shadow: var(--shadow); font-size: 1.02rem; line-height: 1.6; } .numlist > li::before { content: counter(n); position: absolute; left: 20px; top: 18px; font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--red-deep); line-height: 1; } .numlist > li h3 { margin: 0 0 6px; font-size: 1.08rem; } .closer { margin: 24px 0 0; font-family: var(--font-head); font-size: 1.28rem; color: var(--navy); border-left: 4px solid var(--gold); padding-left: 18px; } /* tick list */ .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ticks li { position: relative; padding-left: 32px; line-height: 1.6; } .ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 700; font-size: 1.1rem; } .section--ink .ticks li::before { color: #ff9c9c; } /* ---------- groups ---------- */ .group-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; margin: 0 0 22px; box-shadow: var(--shadow); } .group-toolbar .field { display: flex; flex-direction: column; gap: 5px; } .group-toolbar label { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; } .group-toolbar select { min-height: 44px; } .groupday { margin: 0 0 10px; font-family: var(--font-head); font-size: 1.42rem; color: var(--navy); border-bottom: 2px solid var(--line); padding-bottom: 8px; } .groupday + .grid { margin-bottom: 34px; } .group-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; border-top: 4px solid var(--navy); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; } .group-card[data-type="B2B"] { border-top-color: var(--red); } .group-card h3 { margin: 0; font-size: 1.18rem; } .group-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 0.96rem; } .group-meta li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; } .group-meta .k { color: var(--ink-soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding-top: 2px; } .group-note { font-size: 0.92rem; color: var(--ink-soft); background: var(--sand); border-radius: 3px; padding: 10px 12px; margin: 0; } .badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; background: var(--navy); color: #fff; } .badge--b2b { background: var(--red-deep); } .badge--virtual { background: var(--gold-deep); } .badge--row { display: flex; gap: 8px; flex-wrap: wrap; } .group-card > .btn { margin-top: auto; } .seatline { font-size: 0.92rem; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 12px; margin: 0; } .seatline strong { color: var(--navy); } .notice { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 0 4px 4px 0; padding: 20px 22px; margin: 0 0 26px; box-shadow: var(--shadow); } .notice h2 { font-size: 1.14rem; margin: 0 0 8px; } .notice p { margin: 0 0 10px; } .notice p:last-child { margin-bottom: 0; } /* ---------- timeline ---------- */ .timeline { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 3px solid var(--line); display: grid; gap: 26px; } .timeline li { position: relative; } .timeline li::before { content: ""; position: absolute; left: -34px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--red); border: 3px solid var(--paper); } .timeline .year { display: block; font-family: var(--font-head); font-size: 1.2rem; color: var(--navy); font-weight: 700; } .timeline p { margin: 4px 0 0; } /* ---------- people ---------- */ .person { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 26px; box-shadow: var(--shadow); } .person h3 { margin: 0 0 2px; font-size: 1.3rem; } .person .role { color: var(--red-deep); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; } /* ---------- pricing ---------- */ .price-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px; box-shadow: var(--shadow); border-top: 4px solid var(--navy); } .price-card--b2b { border-top-color: var(--red); } .price-card h3 { margin: 0 0 10px; font-size: 1.22rem; } .price { font-family: var(--font-head); font-size: 2.9rem; line-height: 1; color: var(--navy); font-weight: 700; } .price-card--b2b .price { color: var(--red-deep); } .price-per { font-size: 0.95rem; color: var(--ink-soft); margin-left: 6px; } .price-card ul { margin: 16px 0 0; } .factgrid { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; } .factgrid > div { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 0; border-bottom: 1px solid var(--line); } .factgrid > div:last-child { border-bottom: 0; } .factgrid dt, .factgrid .k { background: var(--sand); padding: 14px 18px; font-weight: 700; color: var(--navy); font-size: 0.95rem; margin: 0; } .factgrid dd, .factgrid .v { padding: 14px 18px; margin: 0; } /* ---------- FAQ ---------- */ .faqlist { display: grid; gap: 14px; } .faq { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); } .faq > summary { cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--navy); display: flex; gap: 14px; align-items: flex-start; min-height: 44px; } .faq > summary::-webkit-details-marker { display: none; } .faq > summary::before { content: "+"; color: var(--red); font-size: 1.4rem; line-height: 1.1; flex: 0 0 auto; } .faq[open] > summary::before { content: "\2212"; } .faq > summary:hover { background: var(--sand); } .faq .answer { padding: 0 22px 20px 52px; } .faq .answer p { margin: 0; color: var(--ink-soft); } /* ---------- testimonials ---------- */ .tcount { font-family: var(--font-head); font-size: 3.2rem; color: var(--red); line-height: 1; font-weight: 700; } .tgrid { columns: 2; column-gap: 22px; } .tcard { break-inside: avoid; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 22px; margin: 0 0 22px; box-shadow: var(--shadow); border-left: 4px solid var(--gold); } .tcard p { margin: 0 0 10px; font-size: 0.98rem; line-height: 1.62; } .tcard blockquote { margin: 0; } .tcard blockquote p:first-child::before { content: "\201C"; font-family: var(--font-head); font-size: 2.2rem; line-height: 0; color: var(--gold); vertical-align: -0.3em; margin-right: 4px; } .tcard figcaption { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; font-size: 0.9rem; } .tcard .who { font-weight: 700; color: var(--navy); font-family: var(--font-head); font-size: 1.02rem; } .tcard .co { color: var(--ink-soft); display: block; } /* ---------- forms ---------- */ .form { display: grid; gap: 16px; max-width: 640px; } .form .row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 0.92rem; color: var(--navy); } .form .req { color: var(--red-deep); font-weight: 700; } input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; padding: 11px 12px; min-height: 44px; width: 100%; } textarea { min-height: 140px; resize: vertical; line-height: 1.55; } input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formnote { font-size: 0.9rem; color: var(--ink-soft); } .flash { border-radius: 4px; padding: 14px 18px; margin: 0 0 22px; font-weight: 600; background: #e8f3e4; border: 1px solid #7fae72; color: #204416; } .flash--bad { background: #fbe9e9; border-color: #c98b8b; color: #7a1a1a; } /* ---------- contact details ---------- */ .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .contact-list .k { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 3px; } .contact-list a { font-size: 1.1rem; font-weight: 700; } .contact-list address { font-style: normal; font-size: 1.02rem; line-height: 1.5; } /* ---------- CTA band ---------- */ .ctaband { background: var(--navy); color: #fff; padding: 52px 0; } .ctaband h2 { color: #fff; margin: 0 0 10px; } .ctaband p { color: #d7e3f0; max-width: 60ch; margin: 0 0 22px; } .ctaband .btn-primary { background: var(--red); border-color: var(--red); } .ctaband .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.6); } .ctaband .btn-ghost:hover { background: rgba(255,255,255,0.12); } /* ---------- region cards ---------- */ .region-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 24px; box-shadow: var(--shadow); border-top: 4px solid var(--gold); } .region-card h3 { margin: 0 0 10px; } .region-card .count { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 12px; font-weight: 700; } /* ---------- footer ---------- */ .site-footer { background: var(--ink); color: #cbd3dd; padding: 48px 0 26px; margin-top: 0; } .site-footer a { color: #e6ebf1; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } @media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(140px, 1fr)); } } .footer-logo { background: #fff; border-radius: 4px; padding: 12px 14px; display: inline-block; } .footer-logo img { display: block; } .site-footer h2 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #93a3b5; margin: 0 0 12px; font-family: var(--font-body); font-weight: 700; } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; font-size: 0.95rem; } /* M7 — footer links are navigation, so they get real 44px tap targets. */ .footer-links a, .footer-links address { display: flex; align-items: center; min-height: 44px; } .contact-list a { display: inline-flex; align-items: center; min-height: 44px; } .site-footer .blurb { font-size: 0.93rem; line-height: 1.6; margin: 14px 0 0; color: #a9b4c1; max-width: 42ch; } .footer-social { display: flex; gap: 10px; margin-top: 14px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.28); border-radius: 4px; } .footer-social svg { width: 20px; height: 20px; fill: currentColor; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 34px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 0.88rem; color: #93a3b5; } /* ---------- utilities ---------- */ .prose p { margin: 0 0 16px; line-height: 1.68; } .prose p:last-child { margin-bottom: 0; } .muted { color: var(--ink-soft); } .stack > * + * { margin-top: 18px; } .center { text-align: center; } /* ---------- responsive ---------- */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .tgrid { columns: 1; } } @media (max-width: 780px) { .section { padding: 44px 0; } .hero { padding: 34px 0 32px; } .group-meta li { grid-template-columns: 1fr; gap: 2px; } .factgrid > div { grid-template-columns: 1fr; } .factgrid dt, .factgrid .k { padding-bottom: 4px; } .numlist > li { padding: 18px 18px 18px 58px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media print { .site-header, .ittl-thumbbar, .ctaband, .site-footer { display: none; } }