/* ============================================================ INFINITY LEARNING — styles.css v7 v20260519-c · Aligned to the editorial home redesign Palette: forest + cream + tan · Type: Cormorant Garamond + Lato + JetBrains Mono ============================================================ */ /* Bring in the editorial display face so every subpage matches the new index */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap"); :root{ /* Surfaces */ --bg: #F5EFE4; /* primary cream */ --bg-soft: #EEE4D2; /* warm card */ --bg-cool: #E8E2D2; /* alt section */ --bg-deep: #E2D4BD; /* deeper warm */ --paper: #FBF7EE; /* near-paper elevated */ /* Ink + body */ --ink: #1B1F1D; --text: #2C5F5A; /* brand teal — leaflet primary */ --text-body: #3A3F3B; --muted: #6B6F66; --muted-soft: #8A8E83; /* Brand */ --accent: #2C5F5A; --accent-mid: #4E8078; --forest-soft:#6B8A82; --sage: #A5B7AE; --tan: #B8916A; --tan-light: #D4B896; --tan-dark: #8F6F49; --tan-faint: #E6D5BB; /* Hairlines */ --rule: rgba(27,31,29,.14); --rule-soft: rgba(27,31,29,.08); --rule-faint: rgba(143,111,73,.18); --rule-cream: rgba(143,111,73,.30); /* Type */ --display: 'Cormorant Garamond','EB Garamond','Georgia','Times New Roman',serif; --body: 'Lato','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif; --mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --t-display: clamp(48px, 8vw, 116px); --t-h2: clamp(36px, 5vw, 72px); --t-h3: clamp(26px, 3.2vw, 38px); --t-h4: clamp(20px, 2.4vw, 26px); --t-body: 17px; --t-eyebrow: 11px; --ls-eyebrow: .26em; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:80px} body{background:var(--bg);color:var(--text-body);font-family:var(--body);font-weight:400;font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit} h1,h2,h3{text-wrap:balance}@view-transition{navigation:auto} section,.block{contain-intrinsic-size:auto 600px} ::selection{background:rgba(44,95,90,.25);color:var(--text)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,details:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}@media(hover:hover){.cta:hover{filter:brightness(1.08)}}@media(prefers-contrast:high){body{color:#000}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}@media print{header,footer,nav,.stickybar,.wa-float,.nl-popup,.cookie,.cta{display:none !important} body{background:#fff;color:#000} a[href]:after{content:" (" attr(href) ")";font-size:.8em;color:#666}} .skip-link{position:absolute;top:-100px;left:8px;z-index:1000;background:var(--accent);color:var(--bg);padding:10px 16px;border-radius:0 0 4px 4px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase} .skip-link:focus{top:0} .wrap{max-width:1240px;margin:0 auto;padding:0 36px}@media (max-width:640px){.wrap{padding:0 22px}} .rule-dot header[role="banner"]{position:sticky !important;top:0;z-index:1000 !important;backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);background:color-mix(in oklab,var(--bg) 82%,transparent);border-bottom:1px solid var(--rule-soft);isolation:isolate} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px} .brand{display:flex;align-items:center;gap:10px;flex-shrink:0} .brand-inf{display:inline-block;width:42px;height:38px;vertical-align:middle;flex-shrink:0;transform:translateY(-1px)} .brand-wordmark{font-family:var(--display);font-style:italic;font-weight:600;font-size:21px;color:var(--text);letter-spacing:-.005em;white-space:nowrap} @media (max-width:1080px){.brand-wordmark{font-size:19px}} @media (max-width:760px){.brand-wordmark{font-size:18px}} .nav-links{display:flex;gap:26px;font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--text-body);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0} @media (max-width:1080px){.nav-links{gap:20px;font-size:12.5px}} .nav-links::-webkit-scrollbar{display:none} .nav-links a{position:relative;padding:6px 0;transition:color .3s;white-space:nowrap} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--tan-dark);transition:right .35s ease} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0} .book-btn{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.02em;padding:11px 22px;border-radius:2px;background:var(--accent);color:var(--bg);border:1px solid var(--accent);transition:background .25s;flex-shrink:0;white-space:nowrap} .book-btn:hover{background:var(--accent-mid)} .menu-btn{display:none}@media (max-width:880px){ .nav-links{display:none} .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--rule-soft);padding:24px;gap:18px;font-size:15px;overflow:visible} .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:3px;border:1px solid var(--rule-soft);color:var(--text)} } .cta{font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.02em;padding:14px 26px;border-radius:2px;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease} .cta.primary{background:var(--accent);color:var(--bg);border:1px solid var(--accent)} .cta.primary:hover{background:var(--accent-mid);border-color:var(--accent-mid)} .cta.ghost{border:1px solid var(--accent);color:var(--accent)} .cta.ghost:hover{background:var(--accent);color:var(--bg)} .cta .arr{transition:transform .3s} .cta:hover .arr{transform:translateX(4px)} h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--text);line-height:1.1;letter-spacing:-.01em} /* Eyebrow label — small mono caps */ .eyebrow{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan-dark);font-weight:600;margin:0 0 14px;display:block} h1 em,h2 em,h3 em,h4 em{font-style:italic;color:var(--text)} .hero{padding:80px 0 60px;position:relative;text-align:center} .hero h1{font-style:italic;font-size:var(--t-display);letter-spacing:-.015em;color:var(--text);margin-bottom:20px;max-width:14ch;margin-left:auto;margin-right:auto} .hero-tagline span:not(:last-child)::after{content:"•";margin-left:18px;color:var(--tan-dark)} .hero-quote{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(20px,2.4vw,28px);line-height:1.4;color:var(--text-body);max-width:50ch;margin:0 auto 44px} .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px} .hero-photo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;margin-top:80px;text-align:left;padding-top:64px;border-top:1px solid var(--rule-soft)} .hero-photo-grid img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule-soft)} .hero-photo-grid .caption{font-family:var(--body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan);font-weight:600;margin-top:14px;display:flex;justify-content:space-between} .intro-eye{margin-bottom:16px;display:inline-block} .intro-h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.015em;color:var(--text);margin-bottom:24px;max-width:14ch} .intro-body{font-size:18px;color:var(--text-body);margin-bottom:20px;max-width:48ch;line-height:1.65}@media (max-width:880px){.hero-photo-grid{grid-template-columns:1fr;gap:48px}} .section{position:relative;padding:96px 0} .sec-head{margin-bottom:64px;text-align:center} .sec-head .eyebrow{margin-bottom:14px;display:inline-block} .sec-head h2{font-style:italic;font-size:var(--t-h2);max-width:none}@media (max-width:780px){.section{padding:60px 0}} .vision-box{background:var(--bg-soft);padding:36px 40px;margin:48px auto;border-left:3px solid var(--tan);max-width:760px} .vision-box .eyebrow{margin-bottom:10px;display:block} .vision-box p{color:var(--text-body);font-size:17px;line-height:1.65} .programmes{max-width:920px;margin:0 auto} .programme{display:grid;grid-template-columns:90px 1fr;gap:32px;align-items:start;padding:36px 0;border-top:1px solid var(--rule-soft)} .programme:last-child{border-bottom:1px solid var(--rule-soft)} .programme .num{font-family:var(--display);font-style:italic;font-weight:400;font-size:46px;color:var(--tan);line-height:1;letter-spacing:-.01em} .programme h3{font-family:var(--display);font-weight:700;font-style:normal;font-size:var(--t-h3);color:var(--text);margin-bottom:12px;line-height:1.15} .programme p{color:var(--text-body);font-size:17px;line-height:1.65;max-width:52ch}@media (max-width:640px){.programme{grid-template-columns:60px 1fr;gap:18px;padding:28px 0}.programme .num{font-size:36px}} .testi-section{background:var(--bg-cool);padding:96px 0} .testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px} .quote{background:var(--bg);padding:42px 38px 38px 56px;border-left:3px solid var(--tan);position:relative} .quote::before{content:"\201C";font-family:var(--display);font-style:italic;position:absolute;top:18px;left:24px;font-size:80px;line-height:1;color:var(--tan);opacity:.4} .quote .qbody{font-family:var(--display);font-style:italic;font-weight:400;font-size:20px;line-height:1.5;color:var(--text);margin-bottom:24px} .quote figcaption{display:flex;justify-content:space-between;align-items:baseline;padding-top:18px;border-top:1px solid var(--rule-faint)} .quote .who{font-family:var(--display);font-style:italic;font-size:17px;color:var(--text);font-weight:400} .quote .role{font-family:var(--body);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--tan-dark);font-weight:600} .quote.featured{grid-column:1/-1;background:var(--accent);color:var(--bg);padding:60px;border-left:0} .quote.featured::before{color:var(--tan-light);opacity:.6} .quote.featured .qbody{color:var(--bg);font-size:26px;max-width:48ch;margin-left:auto;margin-right:auto;text-align:center} .quote.featured figcaption{border-top-color:rgba(250,247,242,.2);justify-content:center;gap:24px} .quote.featured .who{color:var(--bg)} .quote.featured .role{color:var(--tan-light)}@media (max-width:880px){.testi-grid{grid-template-columns:1fr} .quote{padding:30px 26px 30px 40px} .quote.featured{padding:40px 28px} .quote.featured .qbody{font-size:20px}} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px} .article{background:var(--bg);border:1px solid var(--rule-soft);display:flex;flex-direction:column;transition:border-color .3s,transform .3s} .article:hover{border-color:var(--tan);transform:translateY(-3px)} .article-img{aspect-ratio:5/3;overflow:hidden;background:var(--bg-soft)} .article-img img{width:100%;height:100%;object-fit:cover;display:block} .article-body{padding:28px 26px;display:flex;flex-direction:column;flex:1} .article .meta{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan-dark);font-weight:600;display:flex;justify-content:space-between;margin-bottom:14px} .article h3{font-family:var(--display);font-style:italic;font-weight:400;font-size:24px;line-height:1.2;color:var(--text);margin-bottom:14px} .article p{color:var(--text-body);font-size:15px;line-height:1.55;margin-bottom:18px;flex-grow:1} .article .read{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:2px;align-self:flex-start}@media (max-width:880px){.blog-grid{grid-template-columns:1fr;gap:28px}} .faq{max-width:880px;margin:0 auto} details.q{border-top:1px solid var(--rule-soft);padding:24px 0} details.q:last-of-type{border-bottom:1px solid var(--rule-soft)} details.q summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:24px;font-family:var(--display);font-style:italic;font-weight:400;font-size:var(--t-h4);line-height:1.25;color:var(--text);cursor:pointer} details.q summary::-webkit-details-marker{display:none} details.q .plus{font-family:var(--display);font-size:24px;color:var(--tan-dark);transition:transform .35s ease;flex-shrink:0;line-height:1} details.q[open] .plus{transform:rotate(45deg)} details.q .ans{margin-top:16px;color:var(--text-body);font-size:16px;line-height:1.65;max-width:62ch} .prose{max-width:68ch;margin:0 auto} .prose p{font-size:18px;line-height:1.75;margin-bottom:22px;color:var(--text-body)} .prose p:first-of-type{font-size:21px;line-height:1.65;color:var(--text)} .prose h2{font-style:italic;font-size:var(--t-h3);margin:48px 0 20px;text-align:left} .prose h3{font-style:italic;font-size:24px;margin:36px 0 14px;text-align:left} .prose blockquote{background:var(--bg-cool);padding:24px 32px;margin:32px 0;border-left:3px solid var(--tan);font-family:var(--display);font-style:italic;font-size:20px;line-height:1.5;color:var(--text)} .prose ul,.prose ol{padding-left:24px;margin-bottom:24px} .prose li{margin-bottom:8px;color:var(--text-body);font-size:17px;line-height:1.65} .prose a{color:var(--accent);border-bottom:1px solid var(--accent);transition:opacity .25s} .prose a:hover{opacity:.6} .prose img{margin:24px 0;border:1px solid var(--rule-soft)} .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start;max-width:1100px;margin:0 auto} .contact-left h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(36px,5vw,68px);line-height:1.05;margin-bottom:24px;color:var(--text)} .contact-left p{color:var(--text-body);font-size:18px;margin-bottom:24px;max-width:42ch;line-height:1.65} .contact-direct{padding-top:28px;margin-top:32px;border-top:1px solid var(--rule-soft)} .contact-direct .lbl{font-family:var(--body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan-dark);font-weight:600;margin-bottom:6px} .contact-direct .val{font-family:var(--display);font-style:italic;font-size:20px;color:var(--text);margin-bottom:20px;display:block;transition:color .3s} .contact-direct .val:hover{color:var(--accent-mid)} form.contact{display:flex;flex-direction:column;gap:22px;background:var(--bg-soft);padding:36px 32px} .field label{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan-dark);font-weight:600;display:block;margin-bottom:8px} .field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--rule-soft);padding:12px 14px;font-family:var(--body);font-size:16px;color:var(--text);transition:border-color .25s;outline:none;border-radius:2px} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)} .field textarea{min-height:120px;resize:vertical} .send{align-self:flex-start;margin-top:8px}@media (max-width:880px){.contact-grid{grid-template-columns:1fr;gap:40px}} .post-header{padding:72px 0 56px;text-align:center;border-bottom:1px solid var(--rule-soft)} .post-header .meta{font-family:var(--body);font-size:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--tan-dark);font-weight:600;margin-bottom:20px;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap} .post-header .meta span{display:inline-flex;align-items:center;gap:6px;line-height:1} .post-header h1{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(40px,6vw,84px);line-height:1.05;letter-spacing:-.012em;color:var(--text);max-width:18ch;margin:0 auto} .post-body{padding:64px 0 96px} footer[role="contentinfo"]{border-top:1px solid var(--rule-soft);padding:72px 0 calc(150px + env(safe-area-inset-bottom, 0px));background:var(--bg-soft)} /* Brand mark in leaflet style: ∞ above wordmark, with descriptor below */ .foot-logo{margin-bottom:18px} .foot-logo .inf{display:block;width:72px;height:66px;margin-bottom:10px} .foot-brand{font-family:var(--display);font-style:italic;font-weight:600;font-size:32px;color:var(--text);line-height:1.05;white-space:nowrap} .foot-descriptor{font-family:var(--body);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--tan-dark);margin-top:8px;font-weight:600} .foot-tag{color:var(--text-body);max-width:34ch;font-size:14px;line-height:1.6;margin:18px 0 22px;font-style:italic} .ft-heading{font-family:var(--body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan-dark);font-weight:600;margin-bottom:18px;display:block} .foot-col a,.foot-col p{display:block;color:var(--text-body);font-size:14px;margin-bottom:11px;transition:color .25s;line-height:1.5} .foot-col a:hover{color:var(--accent)} .foot-location{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--text-body);line-height:1.55} .foot-location strong{color:var(--text);font-weight:600;font-family:var(--display);font-style:italic;font-size:16px} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--rule-soft);font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan-dark);flex-wrap:wrap;gap:14px;font-weight:600} .foot-bottom .policies{display:flex;gap:18px;flex-wrap:wrap} .foot-bottom a:hover{color:var(--accent)} /* Footer grid rules: see "FOOTER GRID — single source of truth" block below */ .fade{opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1s ease} .fade.in{opacity:1;transform:none} .stagger > *{opacity:0;transform:translateY(8px);transition:opacity .8s ease,transform .8s ease} .stagger.in > *{opacity:1;transform:none} .stagger.in > *:nth-child(1){transition-delay:0s} .stagger.in > *:nth-child(2){transition-delay:.08s} .stagger.in > *:nth-child(3){transition-delay:.16s}@media(prefers-reduced-motion:reduce){.fade,.stagger > *{opacity:1 !important;transform:none !important}}@supports (padding:env(safe-area-inset-bottom)){.stickybar{padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important}} .error-hero{padding:140px 0;text-align:center;min-height:60vh;display:flex;flex-direction:column;justify-content:center} .error-hero .num{font-family:var(--display);font-size:clamp(120px,18vw,240px);font-weight:400;font-style:italic;color:var(--tan);line-height:.95;letter-spacing:-.025em} .error-hero h1{font-size:clamp(28px,4vw,46px);margin:24px auto 16px;max-width:18ch;font-style:italic} .error-hero p{color:var(--text-body);font-size:18px;margin-bottom:32px;max-width:46ch;margin-left:auto;margin-right:auto} .cookie{position:fixed;bottom:16px;left:16px;right:16px;max-width:520px;margin:0 auto;background:var(--text);color:var(--bg);padding:18px 22px;border-radius:4px;display:flex;align-items:center;gap:16px;z-index:90;font-size:13px;line-height:1.5;transform:translateY(120%);transition:transform .5s ease .8s} .cookie.show{transform:translateY(0)} .cookie a{color:var(--tan-light);border-bottom:1px solid var(--tan-light)} .cookie button{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:8px 14px;border-radius:2px;background:var(--bg);color:var(--text);flex-shrink:0;transition:background .25s,color .25s} .cookie button:hover{background:var(--tan);color:var(--bg)} /* ============================================================ v7 — MODERN CSS LAYER ============================================================ */ /* @property — register custom properties so they animate */ @property --num-decimal {syntax:"";initial-value:0;inherits:false}@property --grad-angle{syntax:"";initial-value:0deg;inherits:false}@property --thread-progress{syntax:"";initial-value:0%;inherits:false} /* Animated brand gradient using OKLCH for perceptually-uniform color shift */ :root { --brand-grad: linear-gradient( var(--grad-angle, 135deg) in oklch, oklch(0.38 0.05 180) 0%, oklch(0.42 0.08 190) 50%, oklch(0.38 0.05 200) 100% ); } /* text-wrap: pretty — better than balance for long-form headings */ h1, h2, h3 { text-wrap: pretty } html{scrollbar-color:var(--sage) transparent;scrollbar-width:thin} /* Editorial arch portrait (About) */ .portrait-arch{margin:8px auto 56px;max-width:380px;position:relative;isolation:isolate} .portrait-arch img{width:100%;height:auto;display:block;margin:0;border:1px solid var(--rule-faint);border-radius:999px 999px 6px 6px;object-fit:cover} .portrait-arch::before{content:"";position:absolute;inset:0;transform:translate(14px,14px);border:1px solid var(--rule-cream);border-radius:999px 999px 6px 6px;pointer-events:none;z-index:-1} .portrait-arch figcaption{margin-top:18px;text-align:center;font-family:var(--body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan-dark);font-weight:600} /* Verified credential (About) */ .credential{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;margin:56px 0 0;padding:28px 32px;background:var(--bg-cool);border:1px solid var(--rule-faint)} .credential-badge{flex:none;min-width:150px} .credential-eye{display:block;font-family:var(--body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan-dark);font-weight:600;margin-bottom:10px} .credential-note p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)} @media(max-width:600px){.credential{grid-template-columns:1fr;justify-items:center;text-align:center;padding:28px 24px;gap:22px}} .credential + .credential{margin-top:16px} .credential-badge img{display:block;width:150px;height:auto} .built-by{margin:8px 0 0;font-size:12.5px;color:var(--muted)} .built-by a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} .built-by a:hover{color:var(--tan-dark)} /* field-sizing: content for textareas */ .field textarea { field-sizing: content; min-height: 120px; max-height: 320px; } /* :has() — parent state for richer interactivity */ .programme:has(:hover) .num, .programme:has(:focus-visible) .num { color: var(--accent); transform: translateX(-4px) rotate(-2deg); transition: color .35s ease, transform .35s ease; } .programme .num { transition: color .35s ease, transform .35s ease } form.contact:has(input:not(:placeholder-shown):invalid) .send { opacity: .6; pointer-events: none; } /* Animated form labels — floats up when filled */ .field { position: relative } .field input:not([type="submit"]), .field textarea { padding-top: 22px; padding-bottom: 8px; } .field input:placeholder-shown + label, .field textarea:placeholder-shown + label { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--muted-soft); font-size: 14px; letter-spacing: 0; text-transform: none; transition: all .25s ease; pointer-events: none; } /* Container queries — components respond to their container width */ .programme { container-type: inline-size }@container (max-width: 480px){ .programme { grid-template-columns: 50px 1fr; gap: 16px } .programme .num { font-size: 32px } } /* @starting-style — entry animations without JS */ @supports (animation-timeline: scroll()) { .fade { opacity: 0; transform: translateY(20px); animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; transition: none; } .stagger > * { opacity: 0; transform: translateY(14px); animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; transition: none; } .stagger > *:nth-child(2) { animation-delay: 80ms } .stagger > *:nth-child(3) { animation-delay: 160ms } .stagger > *:nth-child(4) { animation-delay: 240ms } }@keyframes reveal-up{ to { opacity: 1; transform: none } } /* Animated counters — CSS-only number animation */ } } } } /* Scroll progress bar — scroll-driven without JS */ @supports (animation-timeline: scroll()) { body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--tan)); transform-origin: 0 50%; animation: progress linear; animation-timeline: scroll(root); z-index: 100; } }@keyframes progress{ from { transform: scaleX(0) } to { transform: scaleX(1) } } /* View Transitions API — named transitions */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } ::view-transition-old(brand) { animation: vt-fade-out .35s both; } ::view-transition-new(brand) { animation: vt-fade-in .35s both .1s; }@keyframes vt-fade-out{ to { opacity: 0 } }@keyframes vt-fade-in{ from { opacity: 0; transform: translateY(8px) } } .brand { view-transition-name: brand } header[role="banner"] { view-transition-name: header } footer[role="contentinfo"] { view-transition-name: footer } .hero h1 { view-transition-name: hero-headline } /* Magnetic button hover — uses :has() on parent */ .cta { position: relative; overflow: hidden; isolation: isolate; } .cta::before { content: ""; position: absolute; inset: 0; background: var(--accent-mid); z-index: -1; transform: translateY(100%); transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1); } .cta.primary:hover::before { transform: translateY(0) } .cta.ghost:hover::before { transform: translateY(0); background: var(--accent) } /* Infinity mark animated draw */ @keyframes draw-infinity{ to { stroke-dashoffset: 0 } }@keyframes breathe{ 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.05); opacity: 0.9 } } /* Decorative threads — drawn paths down the page */ .thread-deco { position: absolute; top: 0; left: 50%; width: 200px; height: 100%; pointer-events: none; z-index: 0; opacity: .15; transform: translateX(-50%); } .thread-deco path { fill: none; stroke: var(--tan); stroke-width: 1; stroke-dasharray: 4000; }@supports (animation-timeline: scroll()){ .thread-deco path { stroke-dashoffset: 4000; animation: thread-draw linear; animation-timeline: scroll(root); } }@keyframes thread-draw{ to { stroke-dashoffset: 0 } } /* Card hover with tilt — works with :has() */ .article { transform-style: preserve-3d; transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .3s; }@media (hover: hover){ .article:hover { transform: translateY(-6px) rotateX(2deg); } } /* Glassmorphism on header — refined */ header[role="banner"] { background: color-mix(in oklab, var(--bg) 75%, transparent); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } /* Improved selection styling per section */ .testi-section ::selection { background: var(--tan); color: var(--bg) } .error-hero ::selection { background: var(--accent); color: var(--bg) } /* Animated accent on focused form fields */ form.contact { accent-color: var(--accent) } /* Logical properties for better international support */ .wrap { padding-inline: 36px }@media (max-width: 640px){ .wrap { padding-inline: 22px } } .prose { margin-block: 0; padding-block: 0 } /* Stickybar — show on all pages including homepage after hero scrolls past */ .stickybar.sb-prefer-wa { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); } /* WhatsApp FAB — primary contact mode */ .wa-fab { position: fixed; bottom: 88px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px color-mix(in oklab, #25D366 40%, transparent), 0 2px 6px rgba(0,0,0,.12); z-index: 70; transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s; view-transition-name: wa-fab; } .wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 36px color-mix(in oklab, #25D366 50%, transparent), 0 4px 10px rgba(0,0,0,.15); } .wa-fab svg { width: 28px; height: 28px } .wa-fab::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: #25D366; z-index: -1; opacity: .4; animation: pulse-ring 2.4s ease-out infinite; }@keyframes pulse-ring{ 0% { transform: scale(.9); opacity: .5 } 100% { transform: scale(1.5); opacity: 0 } }@supports (padding: env(safe-area-inset-bottom)){ .wa-fab { bottom: calc(88px + env(safe-area-inset-bottom)) } } /* Reading progress — for blog posts */ .reading-meta { font-family: var(--body); font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .reading-meta::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--tan); display: inline-block; } /* Calendly inline embed */ .calendly-inline-widget { min-width: 100%; height: 700px; border: 1px solid var(--rule-soft); border-radius: 4px; overflow: hidden; background: var(--bg); } /* Outcome cards — refined hover */ .outcome-card { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .35s; } .outcome-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg in oklch, oklch(0.62 0.09 70 / 0.06) 0%, transparent 60%); opacity: 0; transition: opacity .35s; z-index: -1; } .outcome-card:hover { transform: translateY(-4px); border-color: var(--tan); } .outcome-card:hover::after { opacity: 1 } /* Marquee — scrolling testimonial band (optional decorative) */ .marquee { display: flex; gap: 48px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .marquee-track { display: flex; gap: 48px; animation: marquee-scroll 40s linear infinite; flex-shrink: 0; white-space: nowrap; align-items: center; } .marquee-track > * { font-family: var(--display); font-style: italic; font-size: 28px; color: var(--muted-soft); flex-shrink: 0; } .marquee-track > *::after { content: "·"; margin-left: 48px; color: var(--tan); }@keyframes marquee-scroll{ from { transform: translateX(0) } to { transform: translateX(-50%) } }@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none } } /* End v7 modern CSS */ /* ============================================================ v7.1 — Audit-driven additions ============================================================ */ /* Pricing subline under CTA */ .cta-sub { display: block; margin-top: 14px; font-size: 13px; letter-spacing: .04em; color: var(--muted); font-family: var(--body); } .cta-sub strong { color: var(--text); font-weight: 600; } /* Newsletter — modern, accessible, less aggressive */ dialog.newsletter-dialog { border: none; border-radius: 4px; padding: 0; max-width: 480px; width: calc(100% - 32px); background: var(--bg); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.18); animation: dialog-slide-in .35s cubic-bezier(0.2, 0.8, 0.2, 1); } dialog.newsletter-dialog::backdrop { background: rgba(26, 21, 24, .55); backdrop-filter: blur(6px); animation: dialog-fade-in .35s ease; }@keyframes dialog-slide-in{ from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }@keyframes dialog-fade-in{ from { opacity: 0; } to { opacity: 1; } } .newsletter-dialog .nd-inner { padding: 36px 36px 32px; position: relative; } .newsletter-dialog .nd-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid var(--rule-soft); color: var(--text-body); cursor: pointer; font-size: 16px; line-height: 1; } .newsletter-dialog .nd-close:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); } .newsletter-dialog .nd-eye { font-family: var(--body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin-bottom: 14px; display: block; } .newsletter-dialog h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--text); margin-bottom: 12px; } .newsletter-dialog h2 em { color: var(--accent); } .newsletter-dialog p { color: var(--text-body); font-size: 15px; line-height: 1.55; margin-bottom: 22px; } .newsletter-dialog form { display: flex; gap: 8px; } .newsletter-dialog input[type="email"] { flex: 1; border: 1px solid var(--rule-soft); padding: 12px 14px; font-family: var(--body); font-size: 16px; color: var(--text); background: var(--bg); border-radius: 2px; outline: none; transition: border-color .25s; } .newsletter-dialog input[type="email"]:focus { border-color: var(--accent); } .newsletter-dialog button[type="submit"] { background: var(--accent); color: var(--bg); padding: 12px 22px; font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: .02em; border-radius: 2px; cursor: pointer; transition: background .25s; } .newsletter-dialog button[type="submit"]:hover { background: var(--accent-mid); } .newsletter-dialog .nd-pdf-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--body); font-size: 12px; color: var(--muted); } .newsletter-dialog .nd-pdf-note svg { flex-shrink: 0; color: var(--tan-dark); } /* ============================================================ v7.2 — Reworked hero & credentials section ============================================================ */ /* Hero status pill — single, calm, single line */ .hero-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; margin: 0 auto 28px; background: var(--bg-soft); border-radius: 999px; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--text); } .cred-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: cred-pulse 2.4s ease-in-out infinite; }@keyframes cred-pulse{ 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); } 50% { opacity: .55; box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 0%, transparent); } } /* CTA subline */ .cta-sub { display: block; margin-top: 16px; font-size: 13px; letter-spacing: .04em; color: var(--muted); font-family: var(--body); } .cta-sub strong { color: var(--text); font-weight: 600; } /* ===== Credentials section ===== */ .credentials-section { padding: 80px 0; background: var(--bg-soft); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } /* 3 credential cards */ .creds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1100px; margin: 0 auto 56px; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .cred-item { padding: 36px 32px; text-align: center; border-right: 1px solid var(--rule-soft); } .cred-item:last-child { border-right: 0; } .cred-num { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(54px, 7vw, 84px); line-height: 1; color: var(--accent); letter-spacing: -.025em; margin-bottom: 14px; } .cred-num .plus, .cred-num .lvl { font-size: .55em; color: var(--tan-dark); font-weight: 400; } .cred-num.cred-letters { font-style: normal; font-family: var(--display); font-weight: 700; letter-spacing: 0; } .cred-label { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 18px; color: var(--text); line-height: 1.3; margin-bottom: 8px; } .cred-detail { font-family: var(--body); font-size: 12px; color: var(--text-body); line-height: 1.5; letter-spacing: .01em; max-width: 26ch; margin: 0 auto; }@media (max-width: 780px){ .creds-grid { grid-template-columns: 1fr; } .cred-item { border-right: 0; border-bottom: 1px solid var(--rule-soft); padding: 28px 20px; } .cred-item:last-child { border-bottom: 0; } } /* Sectors row — discrete pills, lighter visual weight than cred cards */ .sectors-wrap { text-align: center; max-width: 1100px; margin: 0 auto; } .sectors-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .sector-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 999px; font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--text-body); letter-spacing: .01em; transition: border-color .25s, color .25s, transform .25s; } .sector-pill:hover { border-color: var(--tan-dark); color: var(--text); transform: translateY(-2px); } .sector-pill svg { color: var(--tan-dark); flex-shrink: 0; } .memberships-line { text-align: center; margin-top: 36px; font-family: var(--body); font-size: 12px; color: var(--muted); letter-spacing: .06em; } /* ============================================================ v8 — Tier A additions: pricing, comparison, process, quiz + 2026 CSS: @layer, allow-discrete, interpolate-size, light-dark, sibling-index, popover ============================================================ */ /* @layer for cascade architecture */ @layer reset, base, components, utilities; /* light-dark() foundation — for future dark mode toggle */ :root { color-scheme: light; }@media (prefers-color-scheme: dark){ /* Foundation only — dark mode could be activated by adding a class. */ /* Variables stay light by default since brand IS the cream/teal/tan. */ } /* Pricing section */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; } .price-card { position: relative; background: var(--bg); border: 1px solid var(--rule-soft); padding: 36px 30px 32px; display: flex; flex-direction: column; gap: 22px; transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .35s, box-shadow .35s; } .price-card:hover { transform: translateY(-4px); border-color: var(--tan-dark); box-shadow: 0 18px 40px color-mix(in oklab, var(--accent) 8%, transparent); } .price-card.featured { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateY(-6px); } .price-card.featured:hover { transform: translateY(-10px); } .popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--tan); color: var(--accent); padding: 4px 14px; border-radius: 999px; font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .price-eye { font-family: var(--body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; color: var(--tan-dark); } .price-card.featured .price-eye { color: var(--tan-light); } .price-name { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; margin-bottom: 18px; color: var(--text); letter-spacing: -.01em; } .price-card.featured .price-name { color: var(--bg); } .price-amount { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; margin: 0 0 4px; color: var(--tan-dark); display: flex; align-items: baseline; gap: 8px; } .price-card.featured .price-amount { color: var(--tan-light); } .price-amount .from { font-size: 14px; font-style: italic; color: var(--muted); font-family: var(--body); font-weight: 400; display: inline-block; margin-right: 4px; } .price-card.featured .price-amount .from { color: var(--tan-light); } .price-amount .amount { font-family: var(--mono); font-style: normal; font-weight: 600; } .price-unit { font-family: var(--body); font-size: 13px; font-style: italic; color: var(--muted); margin: 0 0 22px; letter-spacing: .01em; line-height: 1.4; } .price-card.featured .price-unit { color: color-mix(in oklab, var(--bg) 85%, transparent); } .price-desc { font-family: var(--body); font-size: 14px; color: var(--text-body); line-height: 1.55; } .price-card.featured .price-desc { color: var(--tan-light); } .price-inc { list-style: none; padding: 0; margin: 0; font-family: var(--body); font-size: 13.5px; line-height: 1.55; color: var(--text-body); display: flex; flex-direction: column; gap: 10px; flex: 1; } .price-card.featured .price-inc { color: var(--tan-light); } .price-inc li { position: relative; padding-left: 18px; } .price-inc li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--tan-dark); font-weight: 700; } .price-card.featured .price-inc li::before { color: var(--tan); } .price-card .cta { align-self: flex-start; }@media (max-width: 880px){ .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } .price-card.featured { transform: none; } .price-card.featured:hover { transform: translateY(-4px); } } /* Comparison panel */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1080px; margin: 0 auto; } .compare-col { padding: 36px 36px 32px; border: 1px solid var(--rule-soft); background: var(--bg); } .compare-is { border-top: 4px solid var(--accent); } .compare-isnt { border-top: 4px solid var(--tan-dark); } .compare-eye { font-family: var(--body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin-bottom: 18px; } .compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; font-family: var(--body); font-size: 15px; line-height: 1.55; color: var(--text-body); } .compare-list li { padding-left: 24px; position: relative; } .compare-is li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; font-family: var(--display); } .compare-isnt li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--tan-dark); font-weight: 400; } .compare-list strong { color: var(--text); font-weight: 700; }@media (max-width: 780px){ .compare-grid { grid-template-columns: 1fr; } } /* Process steps */ .process-steps { list-style: none; padding: 0; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; } .process-step { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--rule-soft); align-items: start; } .process-step:last-child { border-bottom: 0; } .proc-num { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 56px; line-height: 1; color: var(--tan-dark); letter-spacing: -.02em; } .proc-body h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--text); margin-bottom: 8px; } .proc-body p { font-family: var(--body); font-size: 15px; color: var(--text-body); line-height: 1.6; max-width: 58ch; }@media (max-width: 640px){ .process-step { grid-template-columns: 60px 1fr; gap: 16px; padding: 22px 0; } .proc-num { font-size: 40px; } } /* Quiz */ .quiz-wrap { max-width: 720px; margin: 48px auto 0; padding: 36px 40px 32px; background: var(--bg-soft); border: 1px solid var(--rule-soft); border-radius: 4px; position: relative; overflow: hidden; } .quiz-progress { height: 3px; background: var(--rule-soft); margin: -36px -40px 28px; position: relative; } .quiz-progress-bar { --p: 0; position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent), var(--tan)); width: calc(var(--p) * 1%); transition: width .45s cubic-bezier(0.2, 0.8, 0.2, 1); } .quiz-num { font-family: var(--body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin-bottom: 16px; } .quiz-q { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 28px); line-height: 1.25; color: var(--text); margin-bottom: 24px; text-wrap: pretty; } .quiz-options { display: flex; flex-direction: column; gap: 10px; } .quiz-opt { text-align: left; background: var(--bg); border: 1px solid var(--rule-soft); padding: 14px 18px; font-family: var(--body); font-size: 15px; color: var(--text); cursor: pointer; border-radius: 2px; transition: border-color .25s, background .25s, transform .15s, color .25s; line-height: 1.45; } .quiz-opt:hover { border-color: var(--accent); background: var(--bg); color: var(--accent); transform: translateX(2px); } .quiz-opt:active { transform: translateX(2px) scale(.99); } .quiz-result-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; color: var(--accent); margin-bottom: 14px; } .quiz-result-body { font-family: var(--body); font-size: 16px; color: var(--text-body); line-height: 1.6; margin-bottom: 24px; max-width: 56ch; } .quiz-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .quiz-cta .cta.ghost { border: none; background: transparent; cursor: pointer; padding: 14px 0; font-family: var(--body); font-size: 13px; color: var(--text-body); letter-spacing: .04em; } .quiz-cta .cta.ghost:hover { color: var(--accent); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .quiz-fade-in { animation: none; } }@media (max-width: 640px){ .quiz-wrap { padding: 28px 22px 26px; } .quiz-progress { margin: -28px -22px 22px; } } /* 2026 CSS: allow-discrete + @starting-style for FAQ-style entries */ @supports (transition-behavior: allow-discrete) and (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } details.q > div.ans { transition: height .35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .25s ease, content-visibility .35s allow-discrete; } } /* 2026 CSS: sibling-index() for true CSS-only staggers */ @supports (animation-delay: calc(sibling-index() * 80ms)) { .stagger > * { animation-delay: calc(sibling-index() * 80ms); } } /* Pricing card subtle entrance via @starting-style */ @supports (transition-behavior: allow-discrete) { .price-card { @starting-style { opacity: 0; transform: translateY(20px); } } } /* Page-load intro — brand mark briefly visible, then fades */ .page-intro { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity .55s cubic-bezier(0.2, 0.8, 0.2, 1); } .page-intro.done { opacity: 0; } .intro-mark svg { animation: intro-draw 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .intro-mark svg path { stroke-dasharray: 280; stroke-dashoffset: 280; animation: intro-draw-path 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }@keyframes intro-draw-path{ to { stroke-dashoffset: 0; } }@keyframes intro-draw{ 0% { opacity: 0; transform: scale(.92); } 35% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }@media (prefers-reduced-motion: reduce){ .page-intro { display: none; } } /* Leaf brand statement — full-bleed image with text overlay */ /* Subtle parallax via scroll-driven animation */ @supports (animation-timeline: view()) { } to { transform: translateY(6%); } } /* Blog post author bio — uses the new headshot */ .author-bio { display: grid; grid-template-columns: 88px 1fr; gap: 22px; align-items: start; padding: 28px 28px 26px; margin: 56px 0 24px; background: var(--bg-soft); border: 1px solid var(--rule-soft); border-radius: 4px; } .author-bio img { width: 88px; height: 88px; object-fit: cover; object-position: center top; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 2px 12px color-mix(in oklab, var(--accent) 12%, transparent); } .author-bio .bio-name { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--text); margin-bottom: 4px; } .author-bio .bio-role { font-family: var(--body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin-bottom: 12px; } .author-bio .bio-body { font-family: var(--body); font-size: 14px; color: var(--text-body); line-height: 1.55; }@media (max-width: 560px){ .author-bio { grid-template-columns: 1fr; text-align: center; padding: 24px 22px; } .author-bio img { margin: 0 auto; } } /* Footer founder signature with small headshot */ .foot-founder { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--bg) 10%, transparent); } .foot-founder img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; border: 1px solid color-mix(in oklab, var(--bg) 15%, transparent); } /* ============================================================ v10 — Full-bleed leaf hero ============================================================ */ .hero-leaf { position: relative; min-height: 82vh; min-height: 82svh; display: flex; align-items: center; padding: 108px 0 132px; overflow: hidden; isolation: isolate; } /* Leaf background — covers the entire hero */ .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero-bg picture, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; /* Recess the leaf — desaturate and dim so it reads as atmosphere, not subject */ filter: saturate(0.78) brightness(0.7) contrast(0.92); opacity: 0.88; transform: scale(1); } /* Subtle slow drift — very gentle, no zoom */ @media (prefers-reduced-motion: no-preference) { .hero-bg img { animation: hero-drift 32s ease-in-out infinite alternate; transform-origin: center 50%; } }@keyframes hero-drift{ from { transform: translateY(0); } to { transform: translateY(-2%); } } /* Dark veil for text readability — strong on the left, fades right */ .hero-veil { position: absolute; inset: 0; z-index: -1; /* Layered: base uniform darkness + extra weight on left for headline */ background: linear-gradient( 90deg, color-mix(in oklab, #0e1a17 82%, transparent) 0%, color-mix(in oklab, #0e1a17 60%, transparent) 45%, color-mix(in oklab, #0e1a17 50%, transparent) 100% ), /* Soft vignette top/bottom */ radial-gradient( ellipse at center, transparent 30%, color-mix(in oklab, #0e1a17 30%, transparent) 100% ); } /* Foreground content — left-aligned, restrained width */ .hero-leaf .hero-content { position: relative; z-index: 1; max-width: 760px; color: var(--bg); } .hero-leaf .hero-mark { width: 96px; height: auto; margin-bottom: 28px; display: block; } .hero-leaf .hero-mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.18)); } .hero-leaf .hero-eye { font-family: var(--body); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--tan); margin-bottom: 22px; } .hero-leaf h1 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(44px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.015em; margin-bottom: 28px; text-wrap: balance; color: var(--bg); max-width: 14ch; text-shadow: 0 2px 28px color-mix(in oklab, #0e1a17 55%, transparent); } .hero-leaf h1 em { color: var(--tan-light); font-style: italic; } .hero-leaf .hero-tagline { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 30px; font-family: var(--body); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--tan); } .hero-leaf .hero-tagline span:not(:last-child)::after { content: "·"; margin-left: 18px; color: color-mix(in oklab, var(--tan) 50%, transparent); } .hero-leaf .hero-quote { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--bg); max-width: 52ch; margin-bottom: 30px; text-wrap: pretty; text-shadow: 0 1px 16px color-mix(in oklab, #0e1a17 60%, transparent); } .hero-leaf .hero-quote strong { color: var(--bg); font-weight: 400; font-style: normal; font-family: var(--body); } .hero-leaf .hero-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 14px; margin-bottom: 32px; background: color-mix(in oklab, #14201d 65%, transparent); border: 1px solid color-mix(in oklab, var(--tan) 35%, transparent); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--body); font-size: 12px; letter-spacing: .04em; color: var(--bg); } .hero-leaf .hero-status strong { color: var(--tan); font-weight: 700; } .hero-leaf .hero-status .cred-dot { background: #6dbb8a; } .hero-leaf .hero-ctas { margin-top: 8px; } .hero-leaf .cta.primary { background: var(--bg); color: var(--accent); border-color: var(--bg); padding: 18px 32px; font-size: 14px; letter-spacing: .04em; } .hero-leaf .cta.primary:hover { background: var(--tan); color: var(--accent); } .hero-leaf .cta-sub { color: color-mix(in oklab, var(--bg) 80%, transparent); font-family: var(--body); font-size: 13px; margin-top: 14px; } .hero-leaf .cta-sub strong a { color: var(--tan); font-weight: 600; border-bottom: 1px solid currentColor; } /* Scroll indicator at the bottom — subtle, encourages scroll */ .hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 12px; color: color-mix(in oklab, var(--bg) 75%, transparent); text-decoration: none; z-index: 2; font-family: var(--body); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; transition: color .25s, transform .25s; } .hero-scroll:hover { color: var(--tan); transform: translateX(-50%) translateY(2px); } .hero-scroll svg { animation: scroll-bob 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }@keyframes scroll-bob{ 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } }@media (prefers-reduced-motion: reduce){ .hero-scroll svg { animation: none; } } /* About-intro section (moved out of hero) */ .about-intro { padding: 96px 0 80px; } .about-intro .hero-photo-grid { /* inherit existing styles */ } /* Mobile tuning */ @media (max-width: 880px) { .hero-leaf { min-height: 76vh; padding: 96px 0 112px; } .hero-leaf h1 { max-width: 16ch; } .hero-veil { background: linear-gradient( 180deg, color-mix(in oklab, #0e1a17 80%, transparent) 0%, color-mix(in oklab, #0e1a17 65%, transparent) 50%, color-mix(in oklab, #0e1a17 80%, transparent) 100% ); } }@media (max-width: 560px){ .hero-leaf { padding: 88px 0 100px; } .hero-scroll { bottom: 24px; } .hero-leaf .hero-tagline { gap: 10px; font-size: 11px; } .hero-leaf .hero-tagline span:not(:last-child)::after { margin-left: 10px; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none !important; } } /* ============================================================ v11 — 2026 cutting-edge CSS additions ============================================================ */ /* @scope — component-scoped styling for the pricing section. Falls back gracefully in older browsers. */ @supports (selector(:scope)) { @scope (.pricing-grid) to (.price-card .cta) { .price-card { transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .35s, box-shadow .35s; } .price-name { font-feature-settings: "kern", "liga", "calt"; } } } /* Relative colour syntax — derive translucent variants from accent without redeclaring channels. Forward-compatible with OKLCH workflows. */ @supports (color: rgb(from red r g b / .5)) { :root { --accent-tint-10: rgb(from var(--accent) r g b / 0.10); --accent-tint-15: rgb(from var(--accent) r g b / 0.15); --accent-tint-25: rgb(from var(--accent) r g b / 0.25); --tan-tint-20: rgb(from var(--tan) r g b / 0.20); } .price-card:hover { box-shadow: 0 18px 40px var(--accent-tint-15); } } /* light-dark() — declared but kept in light mode (brand IS light). When a future toggle adds .dark to , these activate. */ @supports (color: light-dark(white, black)) { :root { --auto-bg: light-dark(#FAF7F2, #1a201e); --auto-text: light-dark(#2C5F5A, #E8EFEC); --auto-rule: light-dark(#D8CBBF, #2a3633); } } /* Anchor positioning — tooltip on the scarcity counter. */ @supports (anchor-name: --slot-anchor) { #slots-remaining { anchor-name: --slot-anchor; position: relative; cursor: help; } #slots-remaining::after { content: "Updated weekly — based on Hiral's actual calendar"; position: absolute; position-anchor: --slot-anchor; position-area: top center; margin-bottom: 8px; background: var(--accent); color: var(--bg); padding: 6px 10px; border-radius: 4px; font-size: 11px; font-family: var(--body); letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; } #slots-remaining:hover::after, #slots-remaining:focus::after { opacity: 1; } } /* Popover attribute styling — used for newsletter dialog as lighter-weight alternative to . */ [popover] { border: 1px solid var(--rule-soft); background: var(--bg); border-radius: 4px; padding: 32px; box-shadow: 0 24px 60px rgb(from var(--accent) r g b / 0.20); } [popover]::backdrop { background: rgb(from var(--accent) r g b / 0.40); backdrop-filter: blur(4px); } /* Scroll-state container queries — enables sticky-header styling that responds to whether the page is scrolled. */ @supports (container-type: scroll-state) { body { container-type: scroll-state; container-name: page; } @container page scroll-state(stuck: top) { header[role="banner"] { box-shadow: 0 1px 12px rgb(from var(--accent) r g b / 0.08); } } } /* sibling-index() — true CSS-only stagger for the cred-grid items */ @supports (animation-delay: calc(sibling-index() * 80ms)) { .creds-grid > .cred-item { animation: cred-enter .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(sibling-index() * 120ms); } @keyframes cred-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } } /* Container queries for cards — pricing grid responds to its container, not the viewport. Means it works inside a sidebar layout too if you ever add one. */ .pricing-grid { container-type: inline-size; container-name: pricing; }@container pricing (max-width: 720px){ .price-card { padding: 28px 24px 26px; } .price-name { font-size: 24px; } } /* :has() — style FAQ section differently if any item is open */ .faq-list:has(details[open]) { background: rgb(from var(--bg-soft) r g b / 0.5); } /* field-sizing: content for form textareas (already done on text inputs, add to textarea too if any exist) */ textarea { field-sizing: content; min-block-size: 4lh; max-block-size: 20lh; } /* Outcome stat numbers — source of truth in HTML, enhanced with entrance animation */ .counter { display: inline-block; animation: counter-enter .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }@keyframes counter-enter{ from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce){ .counter { animation: none; } } /* When the outcome card is in view, briefly highlight on entry */ @supports (animation-timeline: view()) { .outcome-card { animation: card-enter linear both; animation-timeline: view(); animation-range: cover 0% cover 30%; } @keyframes card-enter { from { opacity: 0.4; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } } /* ============================================================ v12 — Comprehensive layout & rhythm fixes ============================================================ */ /* Hero — center alignment fixed, CTA subline stacks below */ .hero-leaf .hero-content { text-align: center; margin: 0 auto; } .hero-leaf .hero-mark { margin-left: auto; margin-right: auto; } .hero-leaf .hero-tagline { justify-content: center; } .hero-leaf .hero-quote { margin-left: auto; margin-right: auto; } .hero-leaf .hero-status { margin-left: auto; margin-right: auto; display: inline-flex; } .hero-leaf .hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; margin-bottom: 0; } .hero-leaf .hero-ctas .cta { margin: 0; } .hero-leaf .cta-sub { margin-top: 18px; text-align: center; } .hero-leaf h1 { margin-left: auto; margin-right: auto; } /* ============================================================ Section rhythm — consistent vertical spacing across all sections ============================================================ */ /* Reset section padding inconsistencies — every section uses the same rhythm */ .section, section[id="programmes"], section[id="pricing"], section[id="who"], section[id="testimonials"], section[id="outcomes"], section[id="comparison"], section[id="quiz"], section[id="resources"], section[id="process"], section[id="philosophy"], section[id="journal"], section[id="faq"], section[id="contact"] { padding-block: clamp(72px, 9vw, 112px); } /* Section heading rhythm */ .sec-head { text-align: center; max-width: 720px; margin: 0 auto clamp(48px, 5vw, 64px); } .sec-head .eyebrow { display: inline-block; margin-bottom: 20px; } .sec-head h2 { margin-bottom: 16px; text-wrap: balance; } .sec-head + p, .sec-head ~ p:first-of-type { max-width: 56ch; } /* ============================================================ Leaf as repeating motif — small leaf SVG between sections ============================================================ */ .leaf-divider { display: flex; justify-content: center; padding: 8px 0; background: transparent; position: relative; } .leaf-divider::before, .leaf-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--rule-soft); align-self: center; max-width: 200px; } .leaf-divider svg { margin: 0 24px; flex-shrink: 0; opacity: 0.75; } /* ============================================================ About-intro — better layout balance, leaf accent ============================================================ */ .about-intro { position: relative; } .about-intro::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 80px; height: 1px; background: var(--tan-dark); opacity: 0.5; } /* ============================================================ Programmes — fix card spacing (was using flex) ============================================================ */ .programmes { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 880px; margin: 0 auto; } .programme { display: grid; grid-template-columns: 96px 1fr; gap: 48px; padding: 40px 0; border-bottom: 1px solid var(--rule-soft); align-items: start; } .programme:last-child { border-bottom: 0; } .programme .num { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 56px; line-height: 1; color: var(--tan); letter-spacing: -.02em; } .programme h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; color: var(--text); margin-bottom: 14px; } .programme p { font-family: var(--body); font-size: 16px; color: var(--text-body); line-height: 1.65; max-width: 58ch; } .programme p a { display: inline-block; margin-top: 2px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--accent); white-space: nowrap; }@media (max-width: 640px){ .programme { grid-template-columns: 64px 1fr; gap: 24px; padding: 32px 0; } .programme .num { font-size: 40px; } } /* ============================================================ Leaf as a SECONDARY moment — quiet appearance in philosophy section ============================================================ */ #philosophy { position: relative; overflow: hidden; background: var(--bg-soft); } #philosophy::before { content: ""; position: absolute; inset: 0; background-image: url("/img/leaf-hero-1200.webp"); background-size: cover; background-position: center 50%; opacity: 0.12; filter: saturate(0.6) blur(1px); z-index: 0; } #philosophy .wrap { position: relative; z-index: 1; } #philosophy .vision-box { background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid color-mix(in oklab, var(--rule-soft) 60%, transparent); padding: 36px 40px; max-width: 640px; margin: 40px auto 0; text-align: center; } #philosophy .vision-box .eyebrow { display: block; margin-bottom: 14px; } #philosophy .vision-box p:last-of-type { font-family: var(--display); font-style: italic; font-size: clamp(18px, 2vw, 24px); line-height: 1.45; color: var(--text); margin: 0; text-wrap: pretty; } /* ============================================================ Typography tightening — for visual harmony ============================================================ */ h2 em, h1 em { font-style: italic; } /* Standardise outcome cards spacing */ #outcomes .stagger { gap: 16px !important; } #outcomes .outcome-card { background: var(--bg) !important; transition: border-color .35s, transform .35s, box-shadow .35s; } #outcomes .outcome-card:hover { border-color: var(--tan-dark) !important; transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 8%, transparent); } /* ============================================================ Mobile fixes ============================================================ */ @media (max-width: 880px) { .sec-head { margin-bottom: 40px; } .programme { padding: 28px 0; } } /* Ensure cookie banner sits below WhatsApp FAB on mobile */ .cookie { z-index: 90; } .wa-fab { z-index: 95; } /* Stylised pull-quote artwork for blog cards without images */ .article-img-text { display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--accent) 0%, var(--accent-mid) 100%); color: var(--bg); padding: 28px; position: relative; overflow: hidden; } .article-img-text::before { content: ""; position: absolute; top: -20%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, color-mix(in oklab, var(--tan) 35%, transparent) 0%, transparent 70%); z-index: 0; } .article-img-text .art-quote { position: relative; z-index: 1; text-align: center; } .article-img-text .art-mark { display: block; font-family: var(--display); font-style: italic; font-size: 56px; line-height: 0.7; color: var(--tan); margin-bottom: 4px; } .article-img-text .art-line { display: block; font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.2; color: var(--bg); text-wrap: balance; } .article-img-text .art-line em { color: var(--tan); font-style: italic; } /* ============================================================ v13 — Hero restructure: clearer message, more visible leaf ============================================================ */ /* Brighten the leaf slightly so the metaphor reads */ .hero-leaf .hero-bg img { filter: saturate(0.88) brightness(0.78) contrast(0.95); opacity: 0.94; } /* Reduce the veil so the leaf becomes more visible — keep it heavy at top (for nav) and bottom (for status pill), lighter in the middle around the leaf */ .hero-leaf .hero-veil { background: /* Top fade for nav legibility */ linear-gradient( 180deg, color-mix(in oklab, #0e1a17 70%, transparent) 0%, color-mix(in oklab, #0e1a17 45%, transparent) 12%, color-mix(in oklab, #0e1a17 25%, transparent) 30%, color-mix(in oklab, #0e1a17 25%, transparent) 70%, color-mix(in oklab, #0e1a17 65%, transparent) 100% ), /* Centre-darkened band to keep H1 readable over leaf area */ linear-gradient( 180deg, transparent 25%, color-mix(in oklab, #0e1a17 40%, transparent) 45%, color-mix(in oklab, #0e1a17 40%, transparent) 70%, transparent 90% ); } /* Update hero-quote to be smaller (audience detail, not the lead message) */ .hero-leaf .hero-quote { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; max-width: 48ch; margin-bottom: 28px; opacity: 0.88; } /* Brand strip — combined brand name + service strapline */ .hero-leaf .hero-eye { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--tan-light); margin: 8px 0 28px; font-weight: 600; text-align: center; } /* Hide the old hero-tagline (1:1 Coaching / Team Coaching / CPD & Training) — now part of brand strip */ .hero-leaf .hero-tagline { display: none; } /* Leaf metaphor caption — small annotation explaining the visual */ /* ============================================================ v13 — Hero bridge: the leaf → work metaphor connector ============================================================ */ /* The hero-bridge is the line that literally references the visible leaf. It sits between H1 (poetic) and hero-quote (detailed offer). */ .hero-leaf .hero-bridge { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.45; color: var(--bg); text-align: center; max-width: 36ch; margin: -8px auto 36px; text-wrap: balance; text-shadow: 0 2px 18px color-mix(in oklab, #0e1a17 65%, transparent); opacity: 0.92; position: relative; } /* A subtle decorative line above the bridge — like a stem connecting */ .hero-leaf .hero-bridge::before { content: ""; display: block; width: 1px; height: 24px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--tan) 70%, transparent)); margin: 0 auto 18px; } .hero-leaf .hero-bridge em { color: var(--tan-light); font-style: italic; } /* Tighten the hero-quote — it's now subordinate to the bridge */ .hero-leaf .hero-quote { font-family: var(--body); font-style: normal; font-weight: 400; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; color: color-mix(in oklab, var(--bg) 88%, transparent); max-width: 52ch; margin: 0 auto 28px; text-shadow: 0 1px 14px color-mix(in oklab, #0e1a17 50%, transparent); } .hero-leaf .hero-quote strong { color: var(--bg); font-weight: 600; } /* Mobile tuning */ @media (max-width: 880px) { .hero-leaf .hero-bridge { font-size: 17px; margin-bottom: 28px; } .hero-leaf .hero-bridge::before { height: 18px; margin-bottom: 12px; } } /* Testimonial captions on mobile — stack vertically to avoid bad wraps like "Mrs K." / "Portou" and "Assistant Head · Y4-" / "6" */ @media (max-width: 720px) { .quote figcaption { flex-direction: column; align-items: flex-start; gap: 6px; } .quote .role { line-height: 1.4; } .quote.featured figcaption { align-items: center; text-align: center; } } /* Mobile: position WhatsApp FAB lower so it doesn't overlap hero CTA */ @media (max-width: 720px) { .wa-fab { bottom: 90px !important; right: 16px !important; } } /* ============================================================ Audio intro component on homepage ============================================================ */ .audio-intro audio { margin-top: 4px; } .audio-intro audio::-webkit-media-controls-panel { background-color: var(--bg); } .audio-intro details summary { list-style: none; } .audio-intro details summary::-webkit-details-marker { display: none; } .audio-intro details summary::before { content: "+"; margin-right: 6px; display: inline-block; transition: transform .3s; } .audio-intro details[open] summary::before { content: "−"; } /* Mobile: stack the headshot above the audio rather than alongside */ @media (max-width: 640px) { .audio-intro > div > div { grid-template-columns: 1fr !important; text-align: center; } .audio-intro img { margin: 0 auto; } } /* close @media (max-width: 640px) */ /* ============================================================ Mobile: dropdown becomes inline expanded list ============================================================ */ /* Override .nav-links overflow on desktop so dropdown menu isn't clipped. On mobile, the nav scrolls horizontally so we keep the original overflow. */ @media (min-width: 881px) { .nav-links { overflow-x: visible !important; overflow-y: visible !important; } } /* Start here cards on homepage */ .start-card { will-change: transform; } .start-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px color-mix(in oklab, var(--accent) 12%, transparent); } .start-card[style*="bg-soft"]:hover { border-color: var(--accent) !important; } /* ============================================================ Related pages — natural cross-linking between new content ============================================================ */ .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }@media (max-width: 880px){ .related-grid { grid-template-columns: 1fr; } } .related-card { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px; background: var(--bg); border: 1px solid var(--rule-soft); text-decoration: none; color: inherit; transition: border-color .25s, transform .25s, box-shadow .25s; } .related-card:hover { border-color: var(--tan-dark); transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 8%, transparent); } .related-eye { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin: 0; } .related-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--text); margin: 4px 0 6px; } .related-blurb { font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--text-body); margin: 0 0 12px; flex: 1; } .related-cta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-top: auto; } /* policies-wrap-fix — let extra policy links wrap gracefully on narrow screens */ .policies { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; } .policies a { white-space: nowrap; }@media (max-width: 600px){ .policies { gap: 6px 14px; font-size: 12px; } } /* ============================================================ POLICY PAGE STYLES — used on privacy, cookies, terms, accessibility, safeguarding, ai-use, ethics-and-supervision. Replaces the inline styles that previously lived on every

/

. ============================================================ */ .policy-page { max-width: 680px; margin: 0 auto; padding: 64px 24px 96px; } .policy-page h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; color: var(--text); margin: 40px 0 16px; text-wrap: balance; } .policy-page h2:first-of-type { margin-top: 32px; } .policy-page p, .policy-page li { font-size: 17px; line-height: 1.75; color: var(--text-body); } .policy-page p { margin: 0 0 16px; } .policy-page p.lead { font-size: 19px; line-height: 1.65; color: var(--accent); font-style: italic; text-align: center; margin: 0 0 36px; max-width: 56ch; margin-left: auto; margin-right: auto; text-wrap: balance; } .policy-page ul, .policy-page ol { margin: 0 0 16px; padding-left: 24px; } .policy-page ul li, .policy-page ol li { margin-bottom: 6px; } .policy-page strong { color: var(--text); font-weight: 600; } .policy-page a { color: var(--accent); border-bottom: 1px solid var(--accent); font-weight: 500; transition: opacity .2s; } .policy-page a:hover { opacity: 0.7; } .policy-page hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 48px 0; } .policy-page .policy-footnote { font-size: 15px; color: var(--muted); margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule-soft); text-align: center; } .policy-page .policy-callout { background: var(--bg-soft); border: 1px solid var(--rule-soft); padding: 24px 28px; margin-bottom: 32px; } .policy-page .policy-callout p:last-child { margin-bottom: 0; } /* Header section for policy pages */ .policy-header { padding: 128px 0 56px; text-align: center; background: var(--bg-soft); border-bottom: 1px solid var(--rule-soft); } .policy-header .wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; } .policy-header .meta { font-family: var(--body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin-bottom: 20px; } .policy-header h1 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(38px, 5.6vw, 72px); line-height: 1.05; color: var(--text); max-width: 22ch; margin: 0 auto 24px; text-wrap: balance; } .policy-header .policy-tagline { font-size: 18px; color: var(--text-body); max-width: 56ch; margin: 0 auto; line-height: 1.65; }@media (max-width: 600px){ .policy-page { padding: 48px 20px 80px; } .policy-header { padding: 96px 20px 48px; } .policy-page p, .policy-page li { font-size: 16px; } } /* ============================================================ CONTENT PAGE STYLES — used on homepage and content-heavy pages (how-i-work, coaching-for-headteachers, honest-no, first-90-days, coaching). These extend the design system to replace the inline styles previously used on these pages. Pattern-matched to the most-used inline styles. ============================================================ */ /* Section paddings */ .cp-section { padding: 80px 0; } .cp-wrap-mid { max-width: 880px; margin: 0 auto; padding: 0 24px; } /* Eyebrow labels */ .cp-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin: 0 0 14px; } /* Display headings — italic Cormorant */ .cp-h2 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; color: var(--text); margin: 0 0 28px; text-wrap: balance; } .cp-h2-small { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; color: var(--text); margin: 0 0 18px; text-wrap: balance; } /* Body paragraphs in content sections */ .cp-p, .cp-section p, .cp-section-soft p { font-size: 17px; line-height: 1.75; color: var(--text-body); margin: 0 0 20px; } .cp-p-lead { font-size: 19px; line-height: 1.65; color: var(--text-body); margin: 0 0 24px; text-wrap: pretty; } /* Accent links (the most common pattern: 23 occurrences) */ .cp-link { color: var(--accent); border-bottom: 1px solid var(--accent); font-weight: 500; transition: opacity .2s; } .cp-link:hover { opacity: 0.7; } /* Italic accent statements (the standout "fellow traveller" type quotes) */ .cp-statement { font-family: var(--display); font-style: italic; color: var(--accent); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.5; margin: 0 0 14px; text-wrap: balance; } /* Pull-quote / aside callouts */ .cp-callout { font-size: 15px; line-height: 1.65; color: var(--muted); padding: 18px 22px; background: var(--bg-soft); border-left: 3px solid var(--tan-dark); margin: 0 0 24px; } /* Strong / emphasis */ .cp-section strong, .cp-section-soft strong { color: var(--text); font-weight: 600; } /* Card grids */ .cp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } /* Cards */ .cp-card { display: block; padding: 36px 32px; background: var(--bg-soft); border: 1px solid var(--rule-soft); text-decoration: none; transition: border-color .3s, transform .3s, box-shadow .3s; color: inherit; } .cp-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 32px color-mix(in oklab, var(--accent) 12%, transparent); } .cp-card-accent p { color: color-mix(in oklab, var(--bg) 90%, transparent); } /* Card content */ .cp-card-label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tan-dark); font-weight: 600; margin: 0 0 12px; } .cp-card h3 { margin: 0 0 12px; line-height: 1.2; } /* Centered text helper */ .cp-center { text-align: center; } /* Lists in content pages */ .cp-section ul, .cp-section ol, .cp-section-soft ul, .cp-section-soft ol { padding-left: 24px; margin: 0 0 24px; } .cp-section li, .cp-section-soft li { font-size: 17px; line-height: 1.75; color: var(--text-body); margin-bottom: 8px; } /* Compact mobile adjustments */ @media (max-width: 700px) { .cp-section p, .cp-section-soft p, .cp-section li, .cp-section-soft li, .cp-p, .cp-p-lead { font-size: 16px; } .cp-card { padding: 28px 24px; } } /* Stat cards (the +18%, 20+, ILM L7 row on the homepage) */ .cp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; max-width: 880px; margin: 0 auto; } .cp-stat-card { text-align: center; padding: 32px 18px; border: 1px solid var(--rule-soft); background: var(--bg); } .cp-stat-number { font-family: var(--display); font-style: italic; font-size: 56px; line-height: 1; color: var(--tan-dark); margin: 0 0 8px; } .cp-stat-number sup { font-size: 32px; } .cp-stat-note { font-size: 13px; color: var(--text-body); margin-top: 6px; line-height: 1.4; } /* Card content text patterns (used inside cp-card) */ .cp-card-h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 24px; color: var(--text); margin: 0 0 14px; line-height: 1.2; } .cp-card-body { font-size: 15px; color: var(--text-body); margin: 0 0 18px; line-height: 1.6; } .cp-card-arrow { font-size: 14px; color: var(--accent); font-weight: 600; margin: 0; } /* Small note text */ .cp-note { font-size: 13px; color: var(--text-body); line-height: 1.4; margin: 6px 0 0; } /* Centered intro pattern (eyebrow + h2 + tagline) */ .cp-intro { text-align: center; margin-bottom: 56px; } .cp-intro .cp-eyebrow { margin: 0 auto 24px; } .cp-intro .cp-h2 { text-align: center; max-width: 22ch; margin-left: auto; margin-right: auto; } /* Padded section variant */ .cp-section-bottom { padding: 0 0 96px; background: var(--bg); } /* ============================================================ CONTENT PAGE STYLES — used across the long-form content pages (homepage, how-i-work, headteachers, coaching, honest-no, first-90-days) Replaces the inline styles that previously lived on every section. ============================================================ */ /* Section padding patterns */ .cp-section { padding: 80px 0; } /* Wrap widths used for content */ .cp-wrap-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; } .cp-wrap-mid { max-width: 720px; margin: 0 auto; padding: 0 24px; } .cp-wrap-wide { max-width: 1040px; margin: 0 auto; padding: 0 24px; } /* Body paragraph — the most common pattern */ .cp-body { font-size: 17px; line-height: 1.7; color: var(--text-body); margin-bottom: 20px; } .cp-body.tight { margin-bottom: 16px; } .cp-body.loose { margin-bottom: 24px; } .cp-body.large { font-size: 19px; line-height: 1.65; } /* Italic display headings — used for section breaks */ .cp-h-display { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; color: var(--text); margin-bottom: 16px; text-wrap: balance; } /* Eyebrow labels */ .cp-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; display: block; } .cp-eyebrow.tan { font-family: var(--body); color: var(--tan-dark); letter-spacing: .15em; } /* Centred text utility */ .cp-center { text-align: center; } /* Lead / standfirst — centered intro paragraph */ .cp-lead-center { text-align: center; font-size: 19px; color: var(--text-body); max-width: 54ch; margin: 0 auto 32px; line-height: 1.65; } /* Accent text — used for emphasis */ .cp-accent { color: var(--accent); font-weight: 600; } /* Notes and footnotes */ .cp-note { font-size: 14px; color: var(--muted); font-style: italic; margin: 0; line-height: 1.5; } /* Small inline tag/chip */ .cp-tag { background: var(--bg-soft); padding: 2px 6px; border-radius: 2px; font-size: 12px; display: inline-block; } /* Soft card / panel patterns */ .cp-card-soft { background: var(--bg-soft); padding: 32px; border-radius: 4px; margin-bottom: 18px; } /* Stat / number card */ .cp-stat-card { padding: 14px 0; border-top: 1px solid color-mix(in oklab, var(--tan) 40%, transparent); } .cp-stat-content { padding-top: 14px; font-size: 16px; line-height: 1.7; color: var(--text-body); } /* List patterns — clean unordered list with no bullets */ .cp-clean-list { list-style: none; padding: 0; margin: 0 0 24px; font-size: 17px; line-height: 1.65; color: var(--text-body); } .cp-clean-list li { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); } .cp-clean-list li:last-child { border-bottom: 0; } /* Small arrow / vertical-align utility for inline icons */ .cp-arrow { margin-left: 4px; vertical-align: 1px; } /* Mobile adjustments */ @media (max-width: 600px) { .cp-section { padding: 56px 0; } .cp-wrap-narrow, .cp-wrap-mid, .cp-wrap-wide { padding: 0 20px; } .cp-body { font-size: 16px; } } /* Stat number patterns (used on homepage outcomes section + ethics CPD list) */ .stat-number { font-size: 32px; font-family: var(--display); color: var(--accent); font-weight: 400; display: block; line-height: 1; margin-bottom: 6px; } /* Inline-block "block element" utility used on labels */ .inline-block { display: inline-block; } /* Spacing utilities for legitimate one-off margin adjustments */ .mt-48 { margin-top: 48px; } .mt-32 { margin-top: 32px; } .mt-16 { margin-top: 16px; } /* Three-column row used on "who I work with" section */ .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; max-width: 1100px; margin: 0 auto; } /* Two-column with content + visual */ .two-col-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; max-width: 1080px; margin: 0 auto; } /* Compact body — used in stats and small descriptions */ .cp-body-compact { font-size: 17px; line-height: 1.65; color: var(--text-body); } /* ============================================================ v3.0 SKILL — REQUIRED CSS TECHNIQUES (round-out to 13/13) Added 2026-05-17: prefers-reduced-data, lazy-image fade ============================================================ */ /* Honour Save-Data / data-saver mode: drop expensive visuals */ @media (prefers-reduced-data: reduce) { /* Skip decorative backgrounds and gradients */ body, section, .hero, .bg-cool, .bg-soft { background-image: none !important; } /* Suppress non-critical fade animations */ .fade, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } /* Lower-bandwidth: hide non-essential decorative images */ img[data-decorative="true"] { display: none !important; } /* Halve the hero size on data-saver */ .hero { padding: 48px 0 32px; } } /* Lazy-loaded images fade in once decoded — eliminates layout-shift flash */ img[loading="lazy"] { opacity: 0; transition: opacity .45s ease-out; } img[loading="lazy"].is-loaded, img[loading="lazy"].loaded, img[loading="lazy"][data-loaded="true"] { opacity: 1; } /* Fallback: if a browser doesn't fire the load handler, still reveal at 1s */ @supports (animation-timeline: view()) { img[loading="lazy"] { animation: lazy-reveal 1s ease-out both 1s; } @keyframes lazy-reveal { to { opacity: 1; } } } /* Belt-and-braces: when an has crossed into view and decoded, browsers that lazy-load natively will have removed loading="lazy" attr by then, so unmatched lazy imgs after 2s are revealed by JS in main bundle */ /* ============================================================ Cookie banner — Reject + Accept (ICO compliant, 2026-05-17) ============================================================ */ .cookie { flex-wrap: wrap; max-width: 580px; padding: 16px 20px; gap: 14px; } .cookie-text { flex: 1 1 280px; min-width: 0; } .cookie-buttons { display: flex; gap: 10px; flex-shrink: 0; } .cookie-btn { font-family: var(--body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 10px 16px; border-radius: 2px; transition: background .25s, color .25s, border-color .25s; border: 1px solid currentColor; min-height: 40px; min-width: 84px; } .cookie-btn.primary { background: var(--bg); color: var(--text); border-color: var(--bg); } .cookie-btn.primary:hover { background: var(--tan-light); color: var(--text); border-color: var(--tan-light); } .cookie-btn.ghost { background: transparent; color: var(--bg); border-color: var(--bg); opacity: .85; } .cookie-btn.ghost:hover { background: rgba(255,255,255,.1); opacity: 1; }@media (max-width: 520px){ .cookie { flex-direction: column; align-items: stretch; left: 12px; right: 12px; } .cookie-buttons { justify-content: stretch; } .cookie-btn { flex: 1; } } /* ============================================================ touch-action — v3.1 required technique (added 2026-05-18) ============================================================ */ button, a, input, select, textarea, [role="button"], .stickybar-cta, .wa-fab { touch-action: manipulation; } /* Allow native pan on scrollable areas */ html, body, .scrollable { touch-action: pan-y; }/* Disable double-tap zoom on interactive UI elements where unhelpful */ .menu-btn, .cookie-btn, .form-submit{ touch-action: manipulation; } /* ============================================================ FOOTER REDESIGN — round 5 · 2026-05-18 Goals: unified logo block, two-column page list, stronger visual hierarchy, better contrast ============================================================ */ /* Footer container — slightly more padding, warmer separation */ footer[role="contentinfo"] { background: var(--bg-warm, #ede2cc); padding: 80px 0 40px; margin-top: 0; position: relative; } footer[role="contentinfo"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule-soft) 20%, var(--rule-soft) 80%, transparent); } /* === Brand column: unified logo + wordmark + descriptor === */ .foot-brand-col { display: flex; flex-direction: column; gap: 18px; } .foot-brand { font-family: var(--display, Georgia, serif); font-style: italic; font-weight: 700; font-size: 38px; color: var(--accent, #2C5F5A); line-height: 1; letter-spacing: -0.02em; } .foot-descriptor { font-family: var(--body, Lato, sans-serif); font-weight: 600; font-size: 10px; letter-spacing: 0.22em; color: var(--tan-dark, #8F6F49); text-transform: uppercase; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in oklab, var(--accent) 12%, transparent); } .foot-tag { font-family: var(--display, Georgia, serif); font-style: italic; font-size: 14px; color: var(--text, #2a2a2a); opacity: 0.78; line-height: 1.55; margin: 4px 0 0; max-width: 320px; } /* Founder card: better contrast on warm bg */ .foot-founder { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: color-mix(in oklab, var(--bg) 60%, transparent); border-radius: 4px; border: 1px solid color-mix(in oklab, var(--accent) 8%, transparent); max-width: 260px; margin-top: 4px; } .foot-founder img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid color-mix(in oklab, var(--bg) 95%, transparent); } .foot-founder > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* === Column headings === */ .ft-heading { display: block; font-family: var(--body, Lato, sans-serif); font-weight: 700; font-size: 10px; letter-spacing: 0.24em; color: var(--accent, #2C5F5A); text-transform: uppercase; margin-bottom: 14px; } /* === Footer links === */ .foot-col a, .foot-grid a:not(.cta) { display: block; font-family: var(--body, Lato, sans-serif); font-size: 14px; color: var(--text, #2a2a2a); text-decoration: none; padding: 5px 0; line-height: 1.4; transition: color .2s, transform .2s, padding-left .25s; border-bottom: none; } .foot-col a:hover, .foot-grid a:not(.cta):hover { color: var(--accent, #2C5F5A); padding-left: 6px; } /* === Get in touch column === */ .foot-location { font-family: var(--body, Lato, sans-serif); font-size: 13px; color: var(--text, #2a2a2a); opacity: 0.85; line-height: 1.55; margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in oklab, var(--accent) 12%, transparent); } .foot-location strong { font-family: var(--display, Georgia, serif); font-style: italic; font-weight: 700; font-size: 16px; color: var(--accent, #2C5F5A); display: block; margin-bottom: 4px; letter-spacing: -0.01em; } /* === Bottom strip: better wrap behaviour === */ .foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding-top: 24px; border-top: 1px solid color-mix(in oklab, var(--accent) 14%, transparent); font-family: var(--body, Lato, sans-serif); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--text) 70%, var(--bg-warm)); } .foot-bottom .policies { display: flex; flex-wrap: wrap; gap: 6px 22px; } .foot-bottom a { color: inherit; text-decoration: none; font-size: 11px; padding: 0; display: inline; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; } .foot-bottom a:hover { color: var(--accent, #2C5F5A); border-bottom-color: var(--accent, #2C5F5A); padding-left: 0 !important; } /* Fallback for --bg-warm if not defined elsewhere */ :root { --bg-warm: #f0e6d2; } /* ============================================================ FINAL OVERRIDE — make sure dropdown menu paints above hero ============================================================ */ header[role="banner"] { position: sticky !important; top: 0 !important; z-index: 1000 !important; isolation: isolate; }.foot-logo .inf{ display: block; width: 72px; height: 66px; margin: 0 0 10px; } /* FOOTER GRID — now in inline critical CSS in every page for reliability */ /* ============================================================ COACHING DROPDOWN — left-aligned under the trigger (v3{ position: relative; display: inline-block; } /* Mobile drawer — flatten dropdown into stack */ /* ============================================================ SUBPAGE FINISHING POLISH — parity with the editorial home. Soft corners (no square boxes), optical type, tactile buttons, branded scrollbar, editorial image depth. v20260629 ============================================================ */ /* — Optical typography: set the Cormorant display face as type, not web text — */ h1,h2,h3,h4, .brand-wordmark,.foot-brand,.foot-tag, .post-header h1,.contact-left h2, .prose p:first-of-type,.prose blockquote, .quote .qbody,.quote .who{ font-optical-sizing:auto; font-kerning:normal; font-feature-settings:"kern" 1,"liga" 1,"clig" 1,"calt" 1; } /* — No square boxes: one soft-corner system across every page — */ .book-btn,.cta,.menu-btn,.cookie-btn,.sb-cta, .skip-link,.stickybar,.send,.form-submit{ border-radius:999px !important; } .field input,.field textarea,.field select{ border-radius:12px !important; } form.contact{ border-radius:22px; } .vision-box{ border-radius:0 18px 18px 0; } /* keep the left accent edge straight */ .article{ border-radius:18px; overflow:hidden; } .quote{ border-radius:18px; } .quote.featured{ border-radius:22px; } .cookie{ border-radius:18px; } a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,select:focus-visible{ border-radius:6px; } /* — Tactile buttons: a small, confident lift + soft brand shadow — */ .cta{ transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease,color .3s ease,box-shadow .35s ease,border-color .3s ease; } .cta.primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(44,95,90,.55); } .cta.ghost:hover{ transform:translateY(-2px); } .book-btn{ transition:background .25s, transform .3s; } .book-btn:hover{ transform:translateY(-1px); } /* — Branded scrollbar: a quiet tan thread on the warm rail — */ @media (pointer:fine){ html{ scrollbar-width:thin; scrollbar-color:var(--tan) transparent; } ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:var(--bg-soft); } ::-webkit-scrollbar-thumb{ background:var(--tan); border:3px solid var(--bg-soft); border-radius:99px; } ::-webkit-scrollbar-thumb:hover{ background:var(--tan-dark); } } /* — Editorial image depth: blog thumbnails settle with a gentle zoom — */ .article-img img{ transition:transform .8s cubic-bezier(.2,.8,.2,1); } .article:hover .article-img img{ transform:scale(1.04); } /* — Inline contact icons: phone / email / LinkedIn (consistent sitewide) — */ svg.ct-ico{ width:14px; height:14px; display:inline-block; vertical-align:-2px; margin-right:9px; flex:0 0 auto; } .contact-direct .val svg.ct-ico{ width:17px; height:17px; vertical-align:-3px; margin-right:11px; }