/* ── Aila on the homepage ───────────────────────────────────────────────────── Source of record: brand/aila-brand-2026-09-08/ (the approved kit, 2026-09-08). The .aila block below is aila-mark.css verbatim — one ball, one eye geometry, three product colours. Eyes are OVALS, never pills. No rim ring. Everything else on this sheet is the site's own: the hero sting layout, the Inter-metric lockups for LitigationEd / CounselXE, and the overview centre. */ .aila{position:relative;display:inline-block;width:var(--aila-size,1em);height:var(--aila-size,1em); border-radius:50%;overflow:hidden; background:radial-gradient(circle at 38% 26%,#FAD3B9 0%,#EDA983 32%,#D5855E 66%,#AC603F 100%); box-shadow:inset .06em .07em .12em rgba(255,234,222,.38),inset -.08em -.09em .15em rgba(100,45,25,.30); animation:aila-breathe 4.1s ease-in-out infinite} /* Salmon (base) = ClientCounsel · cream = LitigationEd · rose = CounselXE */ .aila--cream{background:radial-gradient(circle at 40% 26%,#FBEFD2 0%,#F4DCB1 32%,#E9C58E 68%,#D2A468 100%)} .aila--rose{background:radial-gradient(circle at 38% 26%,#FAC9C5 0%,#EC9E9A 32%,#DE8480 66%,#B05B57 100%)} .aila__glint{position:absolute;left:18%;top:12%;width:38%;height:26%;border-radius:50%; background:rgba(255,240,231,.38);filter:blur(.09em)} .aila__eyes{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:21.81%; transform:translate(var(--gx,0px),var(--gy,0px));transition:transform .28s cubic-bezier(.2,.8,.2,1)} .aila__eyes i{width:15.60%;height:25.81%;border-radius:50%;background:#33332F;transform-origin:center; animation:aila-blink 5.4s ease-in-out infinite} @keyframes aila-blink{0%,92.5%,100%{transform:scaleY(1)}95.2%{transform:scaleY(.06)}97.6%{transform:scaleY(1)}} @keyframes aila-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(.991,1.009)}} @media (prefers-reduced-motion:reduce){.aila,.aila__eyes i{animation:none}} /* While the sting or a hop drives her from script, the idle CSS motion steps aside — two authors on one transform is a fight nobody wins. */ .aila.is-driven,.aila.is-driven .aila__eyes i{animation:none} .aila.is-driven .aila__eyes{transition:none} /* Her seat: the box script moves (translate); the ball inside is what squashes. The contact shadow belongs to the ground, so it lives beside her, not in her (her overflow:hidden would clip it). */ .aila-seat{position:absolute;inset:0;display:block;will-change:transform} .aila-seat .aila{position:absolute;inset:0;width:auto;height:auto;transform-origin:50% 100%} .aila-spin{position:absolute;inset:0;transform-origin:50% 50%} .aila-shadow{position:absolute;left:12%;right:12%;bottom:-6%;height:14%;border-radius:50%; background:rgba(40,18,6,.34);filter:blur(8px);opacity:.42;pointer-events:none} :root[data-theme="dark"] .aila-shadow{background:rgba(0,0,0,.55)} /* ── The hero sting ────────────────────────────────────────────────────────── The wordmark is the logo's own outline paths (brand/wordmark.js), the o of Counsel included. Aila lands ON that o: her box is the o's own box — d 61.9 of a 651-unit viewBox, centred 491.25/532.45 — expressed here as percentages of the mark so it holds at every width. */ .hero-copy{max-width:660px} .cc-sting{position:relative;width:min(100%,600px);margin:0 0 22px} .cc-sting-mark{position:relative;width:100%} .cc-wm{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)} .cc-wm path{fill:currentColor} .cc-sting-o{position:absolute;left:52.43%;top:32.57%;width:9.508%;aspect-ratio:1;z-index:2; margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none; cursor:pointer;color:inherit;font:inherit;border-radius:50%} .cc-sting-o:focus-visible{outline:2px solid var(--accent);outline-offset:6px} .hero .hero-copy .hero-statement{margin:16px 0 0;max-width:600px; font:400 clamp(19px,1.9vw,27px)/1.3 var(--sans);letter-spacing:-.02em} .hero .hero-copy h1{margin:108px 0 30px} .hero-copy .actions{margin-top:0} /* Script fades these up in step with the sting; without script they simply show. */ /* .cc-sting-reveal is gone: the headline and the button are no longer faded in by the sting, they are on screen when the page opens. */ @media(max-width:1150px){.cc-sting{width:min(100%,520px)}.hero .hero-copy h1{margin-top:84px}} @media(max-width:760px){ .cc-sting{width:100%;margin-bottom:16px} .hero .hero-copy .hero-statement{font-size:clamp(17px,4.7vw,22px);margin-top:12px} .hero .hero-copy h1{margin:72px 0 24px} } /* ── Lockups in running type: LitigationEd, CounselXE ──────────────────────── The kit's lockup metrics are for Avenir Next / Mulish. These headings are set in Inter, whose o is a touch wider and rounder, so the seat is re-measured here: .585em across, sitting on the baseline. The real o stays in the text — she paints on top of it — so "LitigationEd" is still one word to a screen reader and to search. */ .aila-lockup{white-space:nowrap} .aila-lockup__o{display:inline-block;width:0;overflow:visible} .aila-lockup .aila{width:.585em;height:.585em;vertical-align:-.012em;margin:0 -.004em 0 .012em} .aila-lockup .aila--lift{position:relative;top:.012em} .aila-lockup .aila__eyes i{background:#33332F} /* ── The overview centre: Ask Aila is her, then the words ─────────────────── */ #cc-overview-concept .cc-ring-centre{gap:0} #cc-overview-concept .cc-centre-aila{position:relative;display:block;width:36%;aspect-ratio:1;margin:0 auto 6px} #cc-overview-concept .cc-centre-aila .aila-seat{inset:0} #cc-overview-concept .cc-ring-centre strong{font-size:24px;line-height:1.1} #cc-overview-concept .cc-ring-centre span{margin-top:3px;font-size:13px} #cc-overview-concept .cc-ring-centre small{margin-top:4px;font-size:11px} #cc-overview-concept .cc-ring-centre:hover,#cc-overview-concept .cc-ring-centre:focus-visible{transform:translateY(-3px) scale(1.03)} @media(max-width:600px){#cc-overview-concept .cc-ring-centre strong{font-size:18px} #cc-overview-concept .cc-ring-centre small{display:none}#cc-overview-concept .cc-centre-aila{width:34%}} /* The overview block styles every inside its labels and centre as a block with a margin and a size (.cc-ringlabel span / .cc-ring-centre span, specificity 1,2,1). Aila is built from spans, so inside that block she has to be told again what she is — at higher specificity than those rules. */ #cc-overview-concept .cc-ringlabel strong span.aila-lockup__o{display:inline-block;margin:0;font-size:inherit;line-height:inherit} #cc-overview-concept .cc-ringlabel strong span.aila{display:inline-block;margin:0 -.004em 0 .012em;font-size:inherit;line-height:0} #cc-overview-concept .cc-ringlabel strong span.aila span,#cc-overview-concept .cc-ring-centre span.cc-centre-aila span{margin:0;font-size:inherit} #cc-overview-concept .cc-ringlabel strong span.aila .aila__glint,#cc-overview-concept .cc-ring-centre .aila__glint{display:block} #cc-overview-concept .cc-ringlabel strong span.aila .aila__eyes,#cc-overview-concept .cc-ring-centre .aila__eyes{display:flex} #cc-overview-concept .cc-ring-centre span.cc-centre-aila{margin-top:0;font-size:inherit;display:block} #cc-overview-concept .cc-ring-centre span.cc-centre-aila .aila-seat{display:block;margin:0} #cc-overview-concept .cc-ring-centre span.cc-centre-aila .aila{display:block;margin:0} #cc-overview-concept .cc-ringlabel strong.aila-lockup{white-space:nowrap} /* On a phone the copy column is the screen; the wider desktop measure above must not win here. */ @media(max-width:760px){.hero-copy{max-width:100%}} /* ── Masthead and footer: the same lockup, small, alive ───────────────────── */ .brand-lockup{position:relative;display:block;line-height:0} .brand-lockup .wordmark-art{display:block;width:210px;height:auto;overflow:visible;color:var(--ink)} .brand-o{position:absolute;left:52.43%;top:32.57%;width:9.508%;aspect-ratio:1;display:block} .brand-o .aila-seat .aila{box-shadow:inset .06em .07em .12em rgba(255,234,222,.38),inset -.08em -.09em .15em rgba(100,45,25,.30)} @media(max-width:1050px) and (min-width:761px){.brand-lockup .wordmark-art{width:190px}} @media(max-width:760px){.brand-lockup .wordmark-art{width:clamp(160px,46vw,196px)}} /* ══════════════════════════════════════════════════════════════════════════ 2026-09-08 — founder pass before launch. Five rulings, in his words: 1. "No black buttons and black color" — the ground ink is the natural charcoal of the logo, #33332F. Patched at the --ink literal in style.css / modern.css / polish.css so body, buttons and the beta bar all follow. Never reintroduce #292a27 / #302f27 as the text colour. 2. "We are killing that old logo. The geometric shape. It doesn't fit." .brand-mark is gone from the markup in BOTH the masthead and the footer. Its rules are left in modern.css, unused and harmless — deleting them is a separate, riskier sweep. 3. "We don't need to have it twice on top of each other" — the masthead lockup sat directly above the big hero one. It is now invisible while the hero mark is on screen and fades in once you scroll past it. It keeps its box so the header does not reflow. To remove it outright instead, delete the from the header. 4. "Access to justice has to be the same colour" — the statement no longer splits rust / ink. Both halves are the charcoal. 5. "Just have Aila there. It doesn't have to have any text." — the ring centre loses its disc and its three lines. She is the centre. ══════════════════════════════════════════════════════════════════════════ */ /* 4 — one colour across the whole statement, no rust half */ .hero .hero-copy .hero-statement .stmt-a, .hero .hero-copy .hero-statement .stmt-b{color:var(--ink)} /* 3 — the masthead lockup is GONE, not hidden. It sat stacked directly above the hero one, and the header is not sticky, so it only ever existed at the top of the page anyway (founder 2026-09-08: "we don't need to have it twice on top of each other"). The header is now nav + theme switch. */ /* 5 — the ring centre is Aila, and nothing else. The disc, its border, its shadow and its three lines are all gone; the segments already read as a ring, so she needs no plate to sit on. The selectors below have to out-specify #cc-overview-concept (1,2,1) and the dark-theme block, which both still paint a disc. */ #cc-overview-concept .cc-ring-centre, :root[data-theme="dark"] #cc-overview-concept .cc-ring-centre{ background:none;border:0;box-shadow:none; transform:none;transition:none} #cc-overview-concept .cc-ring-centre:hover, #cc-overview-concept .cc-ring-centre:focus-visible{ transform:none;box-shadow:none;background:none} #cc-overview-concept .cc-ring-centre span.cc-centre-aila{ width:84%;margin:0 auto} @media(max-width:760px){ #cc-overview-concept .cc-ring-centre span.cc-centre-aila{width:80%} } /* the shine — a halo that opens behind her. CELEBRATE-RULES.md reserves the eye-bow and the flip for a real, human- confirmed win. This is the marketing mark, not a claim about a record: it is light only, no change to her face, and it never fires in the app. */ .aila-seat .aila{position:absolute} .aila-seat .aila:after{content:'';position:absolute;left:50%;top:50%; width:220%;height:220%;transform:translate(-50%,-50%) scale(.55); border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(circle, rgba(255,214,190,.85) 0%, rgba(226,132,92,.42) 38%, rgba(226,132,92,0) 70%); transition:opacity .34s ease,transform .34s ease} .cc-ring-centre:hover .aila-seat .aila:after, .cc-ring-centre:focus-visible .aila-seat .aila:after, .aila-seat.is-shining .aila:after{opacity:1;transform:translate(-50%,-50%) scale(1)} @media(prefers-reduced-motion:reduce){ .aila-seat .aila:after{transition:none} } /* 6 — the headline's second line in Aila's own salmon, not the rust. #D5855E is the 66% stop of her ball gradient (#FAD3B9 → #EDA983 → #D5855E → #AC603F), i.e. her body colour rather than her rim. Founder call 2026-09-08. Shipped one shade deeper than her exact 66% stop (#D5855E): that measured 2.58:1 against the #f7f4ee paper, under the 3:1 WCAG bar for large text. #C87551 is the same hue at 3.10:1 — founder chose it once the trade was explained. Do not "restore" #D5855E for brand exactness; it was considered and rejected on legibility. Dark keeps her lit tone (#EDA983, the 32% stop) — it reads correctly on the dark ground and needs no compromise. */ .hero .hero-copy h1 em{color:#C87551} :root[data-theme="dark"] .hero .hero-copy h1 em{color:#EDA983} /* 7 — the centre Aila now carries .aila-spin so she can roll like the hero mark. That wrapper is a span inside #cc-overview-concept .cc-ring-centre, which stacks every bare span (display:block; margin-top, specificity 1,2,1) — so it has to be told what it is, louder. */ #cc-overview-concept .cc-ring-centre span.cc-centre-aila .aila-spin{ display:block;margin:0;font-size:inherit;position:absolute;inset:0} /* 8 — the LitigationEd film's title band. That poster has a lower-third burnt into the pixels: the old title left, "CLIENTCOUNSEL.AI / LAW AS AT 14 JULY 2026" right. Founder 2026-09-08 wants the question there instead and the right-hand block gone — so a real HTML band covers the baked one. Real text: selectable, themable, translatable, and it disappears with the button the moment the film plays (script.js sets button.hidden on 'playing'). Her mark here is `.aila--still` — she does not track the cursor on a poster. */ /* NOTE: .film-launch is already position:absolute;inset:0 in modern.css. Do NOT add position:relative here — sting.css loads last, so it wins and collapses the button to zero height, which silently kills every percentage below it. */ /* SPECIFICITY TRAP, the same family as #cc-overview-concept: modern.css has `#litigationed .film-launch>span{bottom:13%}` at (1,2,1) — an ID rule that already lifts the Play chip clear of this poster's baked lower-third, and which silently beat a plain `.film-launch .film-title{bottom:0}`. Anything placed in this button has to answer at ID strength. That 13% is also a measurement someone already took of the baked bar — reused below. */ #litigationed .film-launch>span.film-title, .film-launch .film-title{position:absolute;left:0;right:0;bottom:0; /* NOT flex: the lockup is inline content and flex fragments it into separate items, splitting the wordmark around Aila. */ display:block;box-sizing:border-box;padding:2.6% 3.2%; background:#33332F;color:#fffcf7;text-align:left; font:500 clamp(13px,1.28vw,19px)/1.3 var(--sans);letter-spacing:-.01em; min-height:13.5%} .film-launch .film-title .aila-lockup{font-weight:600} /* the Play chip clears the band rather than sitting on top of it */ #litigationed .film-launch>span:not(.film-title){bottom:calc(13.5% + 18px)} @media(max-width:760px){ .film-launch .film-title{font-size:11px;padding:2.4% 3%} #litigationed .film-launch>span:not(.film-title){bottom:calc(13.5% + 10px)} } /* 9 — the buttons lose their ↗ and gain a lift instead. Founder 2026-09-08: on mobile the arrow wrapped onto its own line and read as a stray glyph under the label — a consequence of `.button` being space-between with a 24px gap, which pushes the arrow to the far edge and then wraps it. The affordance moves to motion: the button lifts under the pointer the way the overview centre does. (Text links kept their ↗ until 2026-09-09, when the founder had both removed — he dislikes the glyph.) Inline, they never wrap alone, and there the arrow means "leaves this page". */ .button{transition:background-color .2s ease,border-color .2s ease, transform .2s ease,box-shadow .2s ease} .hero .actions .button,.closing .button{justify-content:center;gap:0} .button:hover,.button:focus-visible{transform:translateY(-2px); box-shadow:0 10px 22px rgba(51,51,47,.22)} .button:active{transform:translateY(0);box-shadow:none} :root[data-theme="dark"] .button:hover, :root[data-theme="dark"] .button:focus-visible{box-shadow:0 10px 24px rgba(0,0,0,.5)} @media(prefers-reduced-motion:reduce){ .button{transition:background-color .2s ease,border-color .2s ease} .button:hover,.button:focus-visible,.button:active{transform:none} } /* 10 — the nav lines up with the wordmark beneath it. The header sat in a plain `.wrap` while the hero sits in `.hero-inner`, which overrides that width at every breakpoint — so the nav was 4px adrift at 1440 and 22px at 1100. Rather than copy the whole breakpoint cascade, the header now carries `.hero-inner` too and inherits it. That class also brings the hero's vertical padding, which the header must not have. */ .header.hero-inner{padding-top:0;padding-bottom:0} /* ── The hero column: mark · statement · button · headline ────────────────── Founder 2026-09-08: "access to justice is a right not a privilege underneath ClientCounsel" — it stays under the mark, in her salmon, measured to the mark's own width. Then: "bring the enter beta where the hello is now and take the goodbye billable thing down … the same amount of space as the distance between the button and the other words on top" — so the button sits between the statement and the headline, with the SAME gap above and below it, and the headline's second line is a little smaller than the line above it, on one line, and (founder 2026-09-08) measured to the SAME WIDTH as it — the mark, the statement and both headline lines share one right edge. `--stmt-size` and `--h1-size` are measured by script.js against the mark; the values here are the fallback if script never runs. */ .hero .hero-copy{display:flex;flex-direction:column;align-items:flex-start} .hero .hero-copy .cc-sting{order:1;margin-bottom:0} .hero .hero-copy .hero-statement{order:2;margin:14px 0 0;max-width:none;white-space:nowrap; font:450 var(--stmt-size,30px)/1.22 var(--sans);letter-spacing:-.045em} .hero .hero-copy .actions{order:3;margin:var(--hero-gap,106px) 0 0} .hero .hero-copy h1{order:4;margin:var(--hero-gap,106px) 0 0; font-size:var(--h1-size,52px);white-space:nowrap} /* line two is measured to line one's width by script.js (--h1-em, ~1.02). 1.02 is the fallback if script never runs — NOT a taste value: it is w("Litigation structured.")/w("Counsel connected.") at their own weights, 450 and 400. Change the words and the ratio moves. Founder 2026-09-14: "Goodbye, billable hours. Hello, litigation superpowers." retired — it read as an attack on lawyers and their fees. */ .hero .hero-copy h1 em{font-size:calc(var(--h1-em,1.02) * 1em)} .hero .hero-copy .hero-statement .stmt-a, .hero .hero-copy .hero-statement .stmt-b{color:#C87551} :root[data-theme="dark"] .hero .hero-copy .hero-statement .stmt-a, :root[data-theme="dark"] .hero .hero-copy .hero-statement .stmt-b{color:#EDA983} @media(max-width:760px){.hero .hero-copy{--hero-gap:66px}} /* ── One play button, not two ──────────────────────────────────────────────── When iOS blocks autoplay (Low Power Mode, which he runs permanently) Safari paints its own start-playback badge in the middle of the artwork, on top of ours. Two play buttons on one picture read as a broken page. The badge lives in the video's shadow DOM, so this pseudo-element is the only way to remove it. Ours — "Play the story ▷" — stays: it is the one that explains itself. */ .hero-art video::-webkit-media-controls-start-playback-button{ display:none!important;-webkit-appearance:none} .hero-art video::-webkit-media-controls{display:none!important} /* ── The ring's side labels follow the ring on a phone ─────────────────────── Founder 2026-09-08, with a screenshot: "CounselXE and Aila Studio don't fit … do it vertical, or following the shape of the overview ring." The label box is 32% of the ring wide; the band it sits in is only 17.9% across, so a horizontal line runs out of its own segment. Turned onto the band's tangent it reads down the segment and fits. The rotation is on `strong`, not the anchor, so the lift/press transforms on `.cc-quad` still work. Her eyes and her highlight are turned back the other way — she is the same object at every angle (the glint's origin is offset to the ball's centre, not its own). */ @media(max-width:600px){ #cc-overview-concept .cc-quad-as strong, #cc-overview-concept .cc-quad-xe strong{display:inline-block;transform-origin:50% 50%} #cc-overview-concept .cc-quad-as strong{transform:rotate(90deg)} #cc-overview-concept .cc-quad-xe strong{transform:rotate(-90deg)} #cc-overview-concept .cc-quad-as strong .aila__eyes{transform:rotate(-90deg)} #cc-overview-concept .cc-quad-xe strong .aila__eyes{transform:rotate(90deg)} #cc-overview-concept .cc-quad-as strong .aila__glint{transform-origin:134.2% 196.2%; transform:rotate(-90deg)} #cc-overview-concept .cc-quad-xe strong .aila__glint{transform-origin:134.2% 196.2%; transform:rotate(90deg)} }