/* ═══════════════════════════════════════════════════════════════════ site-v3-hubs.css — family layer for the FIVE ASSESSMENT HUB pages /iq-test/ /21st-century-life-skills-assessment/ /communication-test/ /learning-test/ /ideal-career-test/ Loads AFTER site-v3.css (the shared retrofit layer): Class pages (//class-N/) do NOT load this file. Her 1 Oct 2026 brief: "the rest of the page boxes — no; shaded — no … more fancy, nicer, better, animated." Reference = homepage below its hero (landing-v3.css). site-v3.css already turns every shared card soft; this file finishes what is family-specific so each hub reads like the homepage: 1 family accent gradient (body.v3a-) 2 section rhythm white / ice (contour rings) / ONE navy band (the sample-report pages), homepage spacing, aligned wraps 3 gradient icon tiles where emoji used to float 4 quotes = homepage quote cards (gradient quote tile, hairline caption) 5 FAQ = homepage two-column layout on desktop 6 report-page mock-ups: inner ribbons, boxes, bars off the ink look; no coral/red bar on a child's score (amber → green) 7 "what the report gives you" preview cards + tick lists 8 callouts, coral buttons, dashed rules → hairlines 9 hub template leftovers (zone icon tiles in blues, polaroids, video) 10 Ideal Career call-back / demo forms 11 Life Skills wheel heading (inline styles) 12 motion (scroll reveal stagger, bars grow) — reduced-motion safe 13 phones Convention (same as site-v3.css): "html body " + the page's own selector; ":is(*,._v3)" adds one class of weight where a base rule is stronger; !important ONLY against inline style="" attributes. LEFT ALONE: heroes, nav bar, footer, score-scale colours, the Life Skills wheel chart's category colours, the WhatsApp chat mock. ═══════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── 1 · FAMILY ACCENT — tiles, quote marks, numbered dots use it ───────────────────────────────────────────────────────────────── */ html body.v3a-iq{--v3-accent:var(--g-iq)} html body.v3a-life{--v3-accent:var(--g-life)} html body.v3a-comm{--v3-accent:var(--g-comm)} html body.v3a-learn{--v3-accent:var(--g-learn)} html body.v3a-career{--v3-accent:var(--g-career)} html body{--v3-wrap:var(--wrap,1120px)} /* ───────────────────────────────────────────────────────────────── 2 · SECTION RHYTHM — the per-family sections under the hub template white · ice (contour) · white · NAVY (sample pages) · white · ice · white then the ice pricing band from site-v3.css. ───────────────────────────────────────────────────────────────── */ html body section:is(#how-it-works,#why-this-class,#ls-why,#when-to-take,#ls-wheel, #sample-report,#sample,#report-sample,#quotes,#ls-quotes,#quotes-block, #reports,#ls-reports,#reports-block,#faq,#faq-block,#call-back){ position:relative;padding:96px 0;border-top:0;border-bottom:0;background:#fff; /* clip, not hidden: overflow:hidden would make the section a scroll container and freeze every scroll-driven card reveal inside it */ overflow:visible;overflow-x:clip; } /* same fix for the pricing band site-v3.css clips with overflow:hidden, so its two cards rise like the rest on the hubs */ html body .pb:is(*,._v3){overflow:visible;overflow-x:clip} /* Ideal Career's mid-page pricing trio (#start without .close) sits on white */ html body section#start:not(.close){position:relative;padding:96px 0;background:#fff;border:0} /* the Life Skills wheel section carries its padding + white inline */ html body section#ls-wheel[style]{padding:96px 0!important;background:var(--x-ice)!important} /* ice bands with the map contour */ html body section:is(#why-this-class,#ls-why,#ls-wheel,#reports,#ls-reports,#reports-block,#call-back){background:var(--x-ice)} html body section:is(#why-this-class,#ls-why,#ls-wheel,#reports,#ls-reports,#reports-block,#call-back)::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:var(--v3-contour); -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%); mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%); } html body section:is(#how-it-works,#why-this-class,#ls-why,#when-to-take,#ls-wheel,#sample-report,#sample, #report-sample,#quotes,#ls-quotes,#quotes-block,#reports,#ls-reports,#reports-block,#faq,#faq-block,#call-back) > *{position:relative;z-index:1} /* every inner wrapper lines up with the page grid (.wrap = 1120px) */ html body section :is(.wy-wrap,.wt-wrap,.sm-wrap,.s-wrap,.sp-in,.sp-wrap,.qt-wrap,.qb-in,.rp-wrap,.rp-in,.hiw-wrap):is(#_v3,*){ max-width:var(--v3-wrap);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px; } /* lead paragraphs under headings: homepage size */ html body section :is(.hiw-lead,.hiw-lede,.wt-lede,.sm-lead,.s-sub,.qt-sub,.qb-sub,.q-sub,.rp-lead,.rp-sub,.rp-lede,.smp-lede):is(#_v3,*){ font-size:17px;line-height:1.6;max-width:680px; } /* the small caps sub-labels inside sections ("DOES THIS SOUND FAMILIAR?") */ html body section :is(.wt-sub,.wt2-sub,.hiw-col-t,.hiw-params-t,.hiw-params-h):is(#_v3,*):is(*,._v3){color:var(--x-blue)} /* ── the ONE extra navy band: sample report pages ("paper on navy") ── */ html body section:is(#sample-report,#sample,#report-sample){background:var(--v3-navy-band);color:#fff} html body section:is(#sample-report,#sample,#report-sample)::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.6; background:repeating-radial-gradient(circle at 80% 30%,transparent 0 34px,rgba(255,255,255,.045) 34px 35px); } html body section:is(#sample-report,#sample,#report-sample) h2:is(*,._v3):is(*,._v3){color:#fff} html body section:is(#sample-report,#sample,#report-sample) :is([class$="-eyebrow"],[class$="-eye"],[class$="-eb"]):is(*,._v3):is(*,._v3){ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--x-sun);box-shadow:none; } html body section:is(#sample-report,#sample,#report-sample) :is(.sm-lead,.sm-note,.sm-also,.s-sub,.s-note,.sp-note,.smp-lede,.smp-note):is(*,._v3){color:#C6D3E6} html body section:is(#sample-report,#sample,#report-sample) :is(.sm-also b,.sm-cap,.s-cap,figcaption):is(*,._v3){color:#fff} html body section:is(#sample-report,#sample,#report-sample) :is(.sm-cap small,.s-cap small,figcaption em):is(*,._v3){color:#C6D3E6} /* paper sits higher on navy */ html body section:is(#sample-report,#sample,#report-sample) :is(.sm-paper,.s-page,.sp-pg,.sp-page,.smp-page):is(*,._v3){ border-color:rgba(255,255,255,.7);box-shadow:0 2px 4px rgba(0,0,0,.18),0 34px 60px -26px rgba(0,0,0,.65); } html body section:is(#sample-report,#sample,#report-sample) :is(.sm-paper,.s-page,.sp-pg,.sp-page,.smp-page):is(*,._v3):hover{ box-shadow:0 2px 4px rgba(0,0,0,.2),0 44px 70px -26px rgba(0,0,0,.7); } /* the strips scroll sideways — keep the scrollbar quiet on navy */ html body section:is(#sample-report,#sample,#report-sample) :is(.sm-strip,.sp-strip,.smp-strip){scrollbar-color:rgba(255,255,255,.35) transparent} /* ───────────────────────────────────────────────────────────────── 3 · GRADIENT ICON TILES where emoji used to float ───────────────────────────────────────────────────────────────── */ /* report-feature cards (6 per hub): 48px tile in the family gradient */ html body #reports .rp-em:is(*,._v3), html body #ls-reports .rp-em:is(*,._v3), html body #reports-block .rp-c .em:is(*,._v3), html body #when-to-take .wt-person .wt-emo:is(*,._v3){ display:grid;place-items:center;width:50px;height:50px;border-radius:16px;margin-bottom:16px; font-size:24px;line-height:1;background:var(--v3-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6); transition:transform .35s var(--x-ease); } /* inline "who" emojis in the scene cards: small tile beside the role */ html body #when-to-take .wt2-who span, html body #when-to-take .wt-p .who i, html body #when-to-take .wt-scn .wt-who span{ display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px; font-size:18px;line-height:1;background:var(--v3-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 18px -10px rgba(15,30,54,.6); transition:transform .35s var(--x-ease); } html body #when-to-take :is(.wt2-who,.wt-p .who,.wt-scn .wt-who){gap:10px;color:var(--x-blue);margin-bottom:12px} html body #when-to-take .wt-person .wt-role{color:var(--x-blue)} /* Learning's "who" lines carry the emoji in the text — keep them, blue caps */ html body #when-to-take .wt-scene .wt-who{color:var(--x-blue)} /* Communication's "how it works" list: emoji → light gradient tile */ html body #how-it-works .hiw-item .em{ display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-size:18px;line-height:1; background:linear-gradient(145deg,#FFFFFF 0%,#E6F0FA 100%);border:1px solid var(--x-line); box-shadow:0 8px 16px -12px rgba(15,30,54,.5); } html body #how-it-works .hiw-item{gap:14px;align-items:flex-start;margin-bottom:16px} /* tile nudge on card hover (homepage cards do the same with their icon) */ html body :is(#reports .rp-card,#reports .rp-c,#ls-reports .rp-card,#reports-block .rp-c,#when-to-take .wt-person):hover :is(.rp-em,.em,.wt-emo){transform:translateY(-2px) rotate(-6deg)} html body #when-to-take :is(.wt2-scene,.wt-p,.wt-scn):hover :is(.wt2-who span,.who i,.wt-who span){transform:rotate(-6deg)} /* report cards: homepage proportions */ html body :is(#reports .rp-card,#reports .rp-c,#ls-reports .rp-card,#reports-block .rp-c):is(*,._v3){padding:26px 24px 24px} html body :is(#reports,#ls-reports,#reports-block) :is(.rp-grid,.rp-g){gap:18px} html body :is(#reports,#ls-reports,#reports-block) h3:is(*,._v3){font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;line-height:1.25;letter-spacing:-.02em;margin-bottom:8px} html body :is(#reports,#ls-reports,#reports-block) :is(.rp-card,.rp-c) p:is(*,._v3){font-size:14.5px;line-height:1.6} /* Ideal Career centres its report heading — keep the eyebrow centred too */ html body #reports .rp-head{max-width:760px} /* scene + moment cards: a little more air, Bricolage titles */ html body #when-to-take :is(.wt-person,.wt-scene,.wt2-scene,.wt-p,.wt-scn):is(*,._v3){padding:24px 22px 22px} html body #when-to-take :is(.wt-card,.wt-c,.wt2-moment,.wtt-card):is(*,._v3){padding:18px 18px 16px} html body #when-to-take :is(.wt-people,.wt-grid,.wt2-scenes,.wt2-moments,.wt-fam,.wt-mom,.wt-3){gap:18px} html body #when-to-take :is(.wt-sit,.wt2-scene b,.wt-p b,.wt-scn b,.wt-scene b):is(*,._v3):is(*,._v3){font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.3} /* Learning's "right moments" cards were ice-filled — white like the rest */ html body #when-to-take .wt-card:is(*,._v3){background:#fff} /* why-this-class cards */ html body :is(#why-this-class,#ls-why) :is(.wy-card,.wy-c):is(*,._v3){padding:24px 22px 22px} html body :is(#why-this-class,#ls-why) :is(.wy-grid,.wy-g,.wy-3){gap:18px} html body :is(#why-this-class,#ls-why) :is(.wy-card h3,.wy-card b,.wy-c b):is(*,._v3){font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;line-height:1.3;letter-spacing:-.02em} html body :is(#why-this-class,#ls-why) :is(.wy-card p,.wy-c p):is(*,._v3){font-size:14.5px;line-height:1.6} /* ───────────────────────────────────────────────────────────────── 4 · QUOTES — homepage quote cards: gradient quote tile, plain text, hairline above the name, class line in steel blue ───────────────────────────────────────────────────────────────── */ html body #quotes .qt-mark, html body #ls-quotes .qt-mark, html body #quotes-block .qb-mark, html body #quotes .q-mark{ width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none; background:var(--v3-accent);color:#fff;font:800 34px/1 'Bricolage Grotesque',sans-serif;padding-top:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -12px rgba(15,30,54,.6); } html body #quotes .qt-slot, html body #ls-quotes .qt-slot, html body #quotes-block .qb-slot, html body #quotes .q-slot{border-left:0;padding-left:0;font-size:15.5px;line-height:1.55;color:#2B3440;min-height:0;flex:1} html body #quotes :is(.qt-card,.q), html body #ls-quotes .qt-card, html body #quotes-block .qb-card{gap:14px} html body #quotes :is(.qt-card:not(:has(.qt-play)),.q):is(*,._v3), html body #ls-quotes .qt-card:is(*,._v3), html body #quotes-block .qb-card:is(*,._v3){padding:26px 22px 22px} html body #quotes .qt-body:is(*,._v3){padding:20px 22px 22px;gap:14px} html body #quotes figcaption:is(*,._v3), html body #ls-quotes .qt-cap:is(*,._v3), html body #quotes-block figcaption:is(*,._v3){padding-top:14px;border-top:1px solid var(--x-line)} html body #quotes figcaption span:is(*,._v3), html body #ls-quotes .qt-cap span:is(*,._v3), html body #quotes-block figcaption span:is(*,._v3){color:var(--x-blue)} html body :is(#quotes,#ls-quotes,#quotes-block) :is(.qt-watch,.qb-watch,.q-watch){color:var(--x-coral-d);text-decoration:none} html body :is(#quotes,#ls-quotes,#quotes-block) :is(.qt-watch,.qb-watch,.q-watch):hover{text-decoration:underline;text-underline-offset:3px} html body :is(#quotes,#ls-quotes,#quotes-block) :is(.qt-sub,.qb-sub,.q-sub) a{color:var(--x-blue);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1.5px} html body :is(#quotes .qt-grid,#ls-quotes .qt-g,#quotes-block .qb-grid,#quotes .qg){gap:18px} /* IQ's video thumbnails: navy behind the image instead of ink */ html body #quotes .qt-play:is(*,._v3){background:var(--x-navy)} /* ───────────────────────────────────────────────────────────────── 5 · FAQ — homepage layout: heading left, soft question cards right (desktop only; one column below 960px). Floats keep every DOM variant (list wrapper or bare
) working without markup changes. ───────────────────────────────────────────────────────────────── */ html body section:is(#faq,#faq-block) :is(.fq-wrap,.fq-in):is(*,._v3){max-width:var(--v3-wrap);margin:0 auto;padding:0 24px} @media(min-width:961px){ html body section:is(#faq,#faq-block) :is(.fq-wrap,.fq-in):is(*,._v3){display:flow-root} html body section:is(#faq,#faq-block) :is(.fq-wrap,.fq-in) > :is(.fq-eyebrow,.fq-eb,.fq-eye,h2):is(*,._v3):is(*,._v3){ float:left;clear:left;text-align:left;margin-left:0;margin-right:0; } html body section:is(#faq,#faq-block) :is(.fq-wrap,.fq-in) > :is(.fq-eyebrow,.fq-eb,.fq-eye):is(*,._v3):is(*,._v3){width:auto;max-width:36%} html body section:is(#faq,#faq-block) :is(.fq-wrap,.fq-in) > h2:is(*,._v3):is(*,._v3){width:36%;font-size:clamp(32px,3.4vw,44px)} html body section:is(#faq,#faq-block) :is(.fq-wrap,.fq-in) > :is(.fq-list,details):is(*,._v3){margin-left:42%;max-width:none} html body section:is(#faq,#faq-block) :is(.fq-wrap,.fq-in) > .fq-list{margin-top:0} } /* answers keep their links steel-blue */ html body section:is(#faq,#faq-block) :is(details p a,.fq-a a){color:var(--x-blue);text-decoration-color:currentColor} /* ───────────────────────────────────────────────────────────────── 6 · REPORT-PAGE MOCK-UPS — the inside of each paper: ink outlines, ink fills and lilac/mint/cream swatches retire; coral bars on a child's score become the amber → green scale (branding §3) ───────────────────────────────────────────────────────────────── */ /* SAMPLE ribbons: no ink outline, a soft drop instead */ html body #sample-report .sm-rib, html body #sample .s-rib{border:0;box-shadow:0 2px 6px -2px rgba(15,30,54,.45)} html body .smp .smp-rib{box-shadow:0 2px 6px -2px rgba(15,30,54,.45)} /* IQ */ html body #sample-report .sm-th{border-bottom-color:var(--x-navy2)} html body #sample-report .sm-box{border-color:#9DB3CC} html body #sample-report .sm-chip{background:#E4F3EA;border-color:#B8DCC8} /* Life Skills */ html body #sample .s-h{background:var(--x-navy2)} html body #sample .s-arch{background:var(--x-ice);border:1.5px solid #C9D7E8} html body #sample .s-pill{background:#E4F3EA;border:1px solid #B8DCC8;color:var(--x-ink)} html body #sample .s-bar{background:#E6EEF7} html body #sample .s-bar i[style]{background:linear-gradient(90deg,#FFD93B,#188A5E)!important} html body #sample .s-bar i{background:linear-gradient(90deg,#FFD93B,#188A5E)} html body #sample .s-wheel{border:1.5px solid #C9D7E8; background:conic-gradient(#15709F 0 25%,#2AA7DA 0 50%,#FFD93B 0 75%,#9CC9EA 0)} html body #sample .s-wheel::before{background:repeating-conic-gradient(#fff 0 1.2deg,transparent 0 22.5deg);opacity:.9} html body #sample .s-wheel::after{border:1.5px solid #C9D7E8} html body #sample .s-dot{border:0} html body #sample .s-leg > .s-row2:nth-child(1) .s-dot[style]{background:#15709F!important} html body #sample .s-leg > .s-row2:nth-child(2) .s-dot[style]{background:#2AA7DA!important} html body #sample .s-leg > .s-row2:nth-child(3) .s-dot[style]{background:#FFD93B!important} html body #sample .s-leg > .s-row2:nth-child(4) .s-dot[style]{background:#9CC9EA!important} html body #sample .s-num{background:var(--v3-accent);border:0} html body #sample .s-card{border:1px solid #C9D7E8;border-radius:8px;background:#F7FAFD} /* the Life Skills CTA under the pages: coral pill, no ink outline / offset */ html body #sample .s-cta{border:0;box-shadow:0 14px 28px -14px rgba(242,86,59,.8);transition:transform .2s var(--x-ease),background .2s} html body #sample .s-cta:hover{transform:translateY(-2px);background:var(--x-coral-d)} /* Communication */ html body #report-sample .sp-t{border-bottom:1.5px solid var(--x-navy2)} html body #report-sample .sp-box{border:1px solid #C9D7E8;background:#F7FAFD} html body #report-sample .sp-pill{background:#E4F3EA;border-color:#B8DCC8} html body #report-sample .sp-lab{background:var(--x-ice)} html body #report-sample .sp-cert{border-color:#E9C74A} /* Learning */ html body #sample-report .sp-title{border-bottom:1.5px solid var(--x-navy2)} html body #sample-report .sp-row i{background:#E6EEF7;border:0} html body #sample-report .sp-row i[style*="#F2563B"]::after, html body #sample-report .sp-row i:not([style*="--c"])::after{background:linear-gradient(90deg,#FFD93B,#188A5E)} html body #sample-report .sp-sc{border-color:#C9D7E8} html body #sample-report .sp-li b{background:var(--v3-accent);color:#fff} html body #sample-report .sp-two div{border-color:#C9D7E8} html body #sample-report .sp-two .sp-mint.sp-mint{background:#E4F3EA!important} html body #sample-report .sp-two .sp-lav.sp-lav{background:var(--x-ice)!important} html body #sample-report .sp-foot{border-top-color:var(--x-line)} /* Ideal Career */ html body .smp .smp-lk{border-bottom:1.5px solid var(--x-navy2)} html body .smp .smp-bar{background:#E6EEF7;border:0} html body .smp .smp-rank em{background:var(--v3-accent)} html body .smp .smp-card{border:1px solid #C9D7E8;background:#F7FAFD} html body .smp .smp-chip{border-color:#B8DCC8;background:#E4F3EA} /* sample CTAs (coral pills) — homepage glow */ html body :is(#sample-report .sm-cta,#sample-report .sp-cta a,#report-sample a.btn,.smp .smp-cta){box-shadow:0 14px 28px -14px rgba(242,86,59,.85)} /* "Same result. Three different readers" band (+ IQ's thinking-character cards): the coral share on a child's score → amber, same as the how-it-works preview above it (Learning "Doing/Kinesthetic", Ideal Career "Artistic", IQ "The Builder · Systems"). The band's rows set only --c inline; the .jc bar sets background inline, hence !important there. */ html body .report .row .t i[style*="#F2563B"]{background:#F2B33D} html body .jc .sb i[style*="#F2563B"]{background:#F2B33D!important} /* ───────────────────────────────────────────────────────────────── 7 · "WHAT THE REPORT GIVES YOU" preview cards + tick lists ───────────────────────────────────────────────────────────────── */ html body #how-it-works :is(.hiw-card,.hiw-rc):is(*,._v3){padding:24px 24px 20px;border-radius:24px} /* SAMPLE tags: dashed ochre → sunshine pill */ html body #how-it-works .hiw-tag, html body #how-it-works .hiw-rc-h span, html body #how-it-works .hiw-card-t em{ background:var(--x-sun);color:var(--x-ink);border:0;border-radius:999px;padding:4px 10px; font-weight:800;letter-spacing:.1em;box-shadow:0 6px 12px -8px rgba(15,30,54,.5); } /* header rules inside the preview: ink → navy hairline */ html body #how-it-works .hiw-rc-h, html body #how-it-works .hiw-card-t{border-bottom:1.5px solid var(--x-line)} html body #how-it-works a.hiw-lockup{border-bottom:1.5px solid var(--x-line)} /* Ideal Career preview: bars + match row off the ink outline */ html body #how-it-works .hiw-row .hiw-bar{background:#E6EEF7;border:0} html body #how-it-works .hiw-match{border:1px solid var(--x-line);background:var(--x-ice);border-radius:14px} /* Learning preview: beige track → ice; the coral (lowest) share → amber */ html body #how-it-works .hiw-bar .tr{background:#E6EEF7;border:0} html body #how-it-works .hiw-bar .tr i[style*="#F2563B"]{background:#F2B33D} html body #how-it-works .hiw-mi i{background:linear-gradient(180deg,#8CCBF2,#2475B8)} html body #how-it-works .hiw-planline{background:var(--x-ice);border-color:var(--x-line)} /* tick lists: coral ✓ → green tick circles (homepage .x-flag list) */ html body #how-it-works :is(.hiw-checks,.hiw-check,.hiw-list) li{padding-left:36px;border-bottom:1px solid var(--x-line)} html body #how-it-works :is(.hiw-checks,.hiw-check,.hiw-list) li:last-child{border-bottom:0} html body #how-it-works :is(.hiw-checks,.hiw-check,.hiw-list) li::before{ content:"✓";top:50%;left:0;width:24px;height:24px;margin-top:-12px;border-radius:50%; display:grid;place-items:center;background:#E4F3EA;color:var(--x-green);font:900 12px/1 'Inter',system-ui,sans-serif; } /* dashed separators → solid hairlines */ html body #how-it-works :is(.hiw-steps li:not(:last-child),.hiw-step:not(:last-of-type)):is(*,._v3){border-bottom-style:solid;border-bottom-color:var(--x-line)} html body #how-it-works :is(.hiw-sum,.hiw-serial,.hiw-rc-f):is(*,._v3){border-top:1px solid var(--x-line)} html body #how-it-works .hiw-params:is(*,._v3){border-top:1px solid var(--x-line);padding-top:44px;margin-top:56px} /* "every parameter we measure" cards: roomier, Bricolage title */ html body #how-it-works :is(.hiw-pcard,.hiw-pc):is(*,._v3){padding:18px 18px 16px} html body #how-it-works :is(.hiw-params-grid,.hiw-pgrid){gap:16px} html body #how-it-works :is(.hiw-pcard h3,.hiw-pcard > b,.hiw-pc > b):is(*,._v3){font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15.5px;letter-spacing:-.015em} /* list on the left: a touch bigger */ html body #how-it-works :is(.hiw-zones li,.hiw-steps li,.hiw-step){font-size:15px} /* ───────────────────────────────────────────────────────────────── 8 · CALLOUTS, BUTTONS ───────────────────────────────────────────────────────────────── */ /* sunshine callouts (base colours them) — even padding everywhere */ html body #how-it-works :is(.hiw-mix,.hiw-labs):is(*,._v3), html body :is(#why-this-class,#ls-why) :is(.wy-out,.wy-close):is(*,._v3), html body #when-to-take :is(.wt-now,.wt2-now):is(*,._v3){padding:14px 18px;border-radius:18px;line-height:1.55;max-width:none} /* Learning's plain lines + LS "who" box: white pills with a hairline */ html body #why-this-class .wy-line, html body #when-to-take .wt-line{border:1px solid var(--x-line);border-radius:18px;padding:14px 18px;box-shadow:var(--v3-shadow-sm);background:#fff} html body #when-to-take .wtt-who:is(*,._v3){padding:14px 18px} /* coral action buttons inside the family sections */ html body section:is(#how-it-works,#when-to-take) a:is(.hiw-cta,.wt-cta){box-shadow:0 14px 28px -14px rgba(242,86,59,.85)} html body section:is(#how-it-works,#when-to-take) a:is(.hiw-cta,.wt-cta):hover{box-shadow:0 18px 30px -14px rgba(242,86,59,.9)} /* ───────────────────────────────────────────────────────────────── 9 · HUB TEMPLATE leftovers ───────────────────────────────────────────────────────────────── */ /* zone icon tiles: green / ochre / pink / coral swatches → the assessment blues (each tile keeps its own shade so the zones stay distinct) */ html body .dim .ico[style*="#2B6CB8"],html body .dim .ico[style*="--blue"]{background:var(--g-career)!important} html body .dim .ico[style*="#188A5E"],html body .dim .ico[style*="--green"]{background:var(--g-life)!important} html body .dim .ico[style*="#6D5BD0"],html body .dim .ico[style*="--violet"]{background:var(--g-hum)!important} html body .dim .ico[style*="#F2563B"],html body .dim .ico[style*="--red"]{background:var(--g-iq)!important} html body .dim .ico[style*="#C97F10"]{background:var(--g-learn)!important} html body .dim .ico[style*="#E15FB4"]{background:var(--g-comm)!important} html body .dim .ico[style]{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6)} /* "What it measures" with SIX zones (IQ, Communication): 3 + 3 on desktop instead of auto-fit's 4 + 2 with an empty half-row (narrower widths already fall to 3 / 2 / 1 columns evenly) */ @media(min-width:900px){html body .dims:has(> .dim:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}} /* the pricing block lines up with the page grid like every section above */ html body .pb .pb-wrap:is(*,._v3){max-width:var(--v3-wrap)} /* … and keeps the hub rhythm (96px desktop / 64px phones, as section 2): the template's section{padding:84px 0} (60px ≤900) stacked on top of site-v3.css's .pb-wrap 72px (56px ≤620) left ~156px of empty ice */ html body.v3a-hub .pb:is(*,._v3){padding-top:0;padding-bottom:0} html body.v3a-hub .pb .pb-wrap:is(*,._v3){padding-top:96px;padding-bottom:96px} /* polaroids in the closing band: peach photo ground → sunshine-soft */ html body .close .ph[style*="#FFEDE3"]{background:var(--x-sun-soft)!important} /* the third polaroid ("architect?", inline bottom:12%) sat on the end of the "Also see … See how institutions use it →" line — lift it to mid-band, clear of the text and buttons (polaroids hide at ≤900px) */ html body .close .polx[style*="bottom:12%"]{top:38%!important;bottom:auto!important} /* ───────────────────────────────────────────────────────────────── 10 · IDEAL CAREER — call-back + demo forms (ice band, soft cards) ───────────────────────────────────────────────────────────────── */ html body .cta2 .cta2-grid{gap:20px} html body .cta2 .cta2-card{ position:relative;background:#fff;border:1px solid var(--x-line);border-radius:24px;padding:30px 28px; box-shadow:var(--x-shadow); } html body .cta2 .cta2-card.cta2-alt{background:linear-gradient(180deg,#fff 0%,#EEF4FB 100%)} html body .cta2 .cta2-card::after{ content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none; background:var(--v3-edge);opacity:0;transition:opacity .35s var(--x-ease); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); } html body .cta2 .cta2-card:is(:hover,:focus-within)::after{opacity:1} html body .cta2 .cta2-card h3{font-size:23px} html body .cta2 :is(input,select){border:1.5px solid var(--x-line);border-radius:14px;background:#fff;padding:13px 14px;transition:border-color .2s,box-shadow .2s} html body .cta2 :is(input,select):hover{border-color:#B9CFEA} html body .cta2 :is(input,select):focus{border-color:var(--x-blue);box-shadow:0 0 0 4px rgba(43,108,184,.16)} html body .cta2 .cta2-btn{border:0;box-shadow:0 14px 28px -14px rgba(242,86,59,.85);padding:14px 28px;transition:transform .2s var(--x-ease),background .2s,box-shadow .2s} html body .cta2 .cta2-btn:hover{background:var(--x-coral-d);box-shadow:0 18px 30px -14px rgba(242,86,59,.9)} html body .cta2 .cta2-ok{background:#E4F3EA;border:1px solid #B8DCC8;border-radius:14px} html body .cta2 .cta2-link a{color:var(--x-coral-d)} /* ───────────────────────────────────────────────────────────────── 11 · LIFE SKILLS — the wheel section's eyebrow + heading are inline ───────────────────────────────────────────────────────────────── */ html body #ls-wheel .lsw-grid{max-width:var(--v3-wrap);gap:48px} html body #ls-wheel .lsw-grid > div > p[style]:first-child{ display:inline-flex!important;align-items:center;gap:8px; font:800 12px/1.2 'Inter',system-ui,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase; color:var(--x-blue)!important;background:#fff;border:1px solid var(--x-line);border-radius:999px; padding:8px 14px 8px 11px;box-shadow:0 6px 16px -10px rgba(15,30,54,.3);margin:0 0 16px!important; } html body #ls-wheel h2[style]{font-size:clamp(28px,3.4vw,42px)!important;letter-spacing:-.035em;line-height:1.06!important;margin:0 0 16px!important} html body #ls-wheel .lsw-grid > div > p[style]:nth-of-type(2){font-size:17px;line-height:1.6;color:var(--x-mut)!important} /* the legend's tinted squares: white tiles with a hairline */ html body #ls-wheel .lsw-grid span[style*="width:34px"]{ width:40px!important;height:40px!important;border-radius:13px!important;background:#fff!important; border:1px solid var(--x-line);box-shadow:0 8px 16px -12px rgba(15,30,54,.5); } html body #ls-wheel svg{filter:drop-shadow(0 24px 40px rgba(15,30,54,.18))} /* ───────────────────────────────────────────────────────────────── 12 · MOTION — reveal on scroll (same scroll-driven recipe as site-v3.css: forwards-only fill, so with no timeline the content is simply visible), a small stagger across each row, and score bars that grow in. Off for reduced motion and print. ───────────────────────────────────────────────────────────────── */ @keyframes v3h-grow{from{scale:0 1}to{scale:1 1}} /* the paper pages sit inside sideways-scrolling strips (their own scroll containers), so they follow their SECTION's view timeline instead */ html body section:is(#sample-report,#sample,#report-sample){view-timeline-name:--v3hs} /* bars sit in overflow:hidden tracks (each one a scroll container), so they follow their preview card's timeline by name */ html body #how-it-works :is(.hiw-card,.hiw-rc){view-timeline-name:--v3hc} @media screen and (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ html body :is(#how-it-works .hiw-card,#how-it-works .hiw-rc,#when-to-take .wtt-card,.cta2 .cta2-card){ animation-name:v3-rise;animation-timing-function:linear;animation-fill-mode:forwards; animation-timeline:view();animation-range:entry 0% entry 55%; } /* stagger: every card starts as the row enters (forwards-only fill, so nothing flashes), later siblings finish a beat later */ html body :is(.wy-grid,.wy-g,.wy-3,.wt-people,.wt-grid,.wt2-scenes,.wt2-moments,.wt-fam,.wt-mom,.wt-3, .rp-grid,.rp-g,.qt-grid,.qt-g,.qb-grid,.qg,.hiw-params-grid,.hiw-pgrid,.cta2-grid) > :nth-child(3n+2):is(#_v3,*){animation-range:entry 0% entry 66%} html body :is(.wy-grid,.wy-g,.wy-3,.wt-people,.wt-grid,.wt2-scenes,.wt2-moments,.wt-fam,.wt-mom,.wt-3, .rp-grid,.rp-g,.hiw-params-grid,.hiw-pgrid) > :nth-child(3n):is(#_v3,*){animation-range:entry 0% entry 77%} html body :is(.qt-grid,.qt-g,.qb-grid,.qg) > :nth-child(3):is(#_v3,*){animation-range:entry 0% entry 77%} html body :is(.qt-grid,.qt-g,.qb-grid,.qg) > :nth-child(4):is(#_v3,*){animation-range:entry 0% entry 88%} /* paper pages rise one after another as the navy band scrolls in */ html body :is(#sample-report .sm-pg,#sample .s-item,#report-sample .sp-pg,#sample-report .sp-item,.smp .smp-page){ animation-name:v3-rise;animation-timing-function:linear;animation-fill-mode:forwards; animation-timeline:--v3hs;animation-range:entry 0% entry 55%; } html body :is(.sm-strip,.s-row,.sp-strip,.smp-strip) > :nth-child(2):is(#_v3,*){animation-range:entry 0% entry 63%} html body :is(.sm-strip,.s-row,.sp-strip,.smp-strip) > :nth-child(3):is(#_v3,*){animation-range:entry 0% entry 71%} html body :is(.sm-strip,.s-row,.sp-strip,.smp-strip) > :nth-child(4):is(#_v3,*){animation-range:entry 0% entry 79%} /* bars in the "what the report gives you" previews grow from the left */ html body :is(#how-it-works .hiw-bar i,#how-it-works .hiw-bar .tr i){ transform-origin:0 50%;animation-name:v3h-grow;animation-timing-function:cubic-bezier(.3,.6,.4,1); animation-fill-mode:forwards;animation-timeline:--v3hc;animation-range:entry 35% entry 100%; } /* … and inside the paper pages, on the section's timeline */ html body :is(#sample-report .sm-zr i b,#sample .s-bar i,#report-sample .sp-bar i,.smp .smp-bar i){ transform-origin:0 50%;animation-name:v3h-grow;animation-timing-function:cubic-bezier(.3,.6,.4,1); animation-fill-mode:forwards;animation-timeline:--v3hs;animation-range:entry 30% entry 100%; } } } @media (prefers-reduced-motion:reduce){ html body :is(#reports .rp-em,#ls-reports .rp-em,#reports-block .rp-c .em,#when-to-take .wt-emo, #when-to-take .wt2-who span,#when-to-take .who i,#when-to-take .wt-who span,.cta2 .cta2-btn,#sample .s-cta){transition:none;transform:none!important} } @media print{ html body section:is(#sample-report,#sample,#report-sample){background:#fff;color:var(--x-ink)} } /* ───────────────────────────────────────────────────────────────── 13 · PHONES (≤700px): homepage mobile spacing, single columns, no horizontal scroll at 375px ───────────────────────────────────────────────────────────────── */ @media(max-width:700px){ html body section:is(#how-it-works,#why-this-class,#ls-why,#when-to-take,#sample-report,#sample,#report-sample, #quotes,#ls-quotes,#quotes-block,#reports,#ls-reports,#reports-block,#faq,#faq-block,#call-back){padding:64px 0} html body section#start:not(.close){padding:64px 0} html body section#ls-wheel[style]{padding:64px 0!important} html body.v3a-hub .pb .pb-wrap:is(*,._v3){padding-top:64px;padding-bottom:64px} html body section :is(.hiw-lead,.hiw-lede,.wt-lede,.sm-lead,.s-sub,.qt-sub,.qb-sub,.q-sub,.rp-lead,.rp-sub,.rp-lede,.smp-lede):is(#_v3,*){font-size:16px} html body :is(#reports .rp-card,#reports .rp-c,#ls-reports .rp-card,#reports-block .rp-c):is(*,._v3){padding:22px 20px 20px} html body #when-to-take :is(.wt-person,.wt-scene,.wt2-scene,.wt-p,.wt-scn):is(*,._v3), html body :is(#why-this-class,#ls-why) :is(.wy-card,.wy-c):is(*,._v3){padding:20px 18px 18px} html body #how-it-works :is(.hiw-card,.hiw-rc):is(*,._v3){padding:20px 18px 18px} html body #how-it-works .hiw-params:is(*,._v3){padding-top:34px;margin-top:40px} html body .cta2 .cta2-card{padding:24px 20px} html body #ls-wheel .lsw-grid{gap:28px} }