/* =========================================================================== GSTSERVE — SHARED DESIGN SYSTEM --------------------------------------------------------------------------- Layout and typography ONLY. There is no colour value in this file and none may be added: every colour and every type stack comes from palette.css, which must be linked BEFORE this file. Structure of this file 01 base and reset 02 layout frame, bands and band parity 03 typography 04 buttons 05 header and navigation 06 hero 07 grids and cards 08 the four components built once (spec section 11) .boundary - the "Where we stop" treatment .pricecard - tier, fee, inclusions, exclusions, CTA .seq - numbered sequence, vertical and horizontal .f - the statutory form-name pill 09 page-specific composites 10 tables 11 FAQ 12 forms 13 dark bands and closing CTA 14 footer 15 article pages 16 unresolved-value flags 17 responsive =========================================================================== */ /* ========================================================================== 01 BASE ========================================================================== */ *{box-sizing:border-box} /* overflow-x:CLIP, not hidden: hidden makes the root a scroll container, and a scroll container ancestor is the one thing that silently disables every position:sticky on the page. clip cuts the same sideways bleed without creating one. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.62; color:var(--ink); background:var(--bg); /* clip, not hidden - hidden turns body into a scroll container and a scroll container ancestor silently disables every position:sticky on the page */ overflow-x:clip; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto} h1,h2,h3,h4,h5,p{margin:0;overflow-wrap:break-word} p{margin:0 0 1rem} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} ul,ol{margin:0 0 1rem;padding-left:20px} li{margin-bottom:7px} strong{font-weight:600;color:var(--ink)} em{font-style:italic} hr{border:0;border-top:1px solid var(--line-soft);margin:36px 0} /* Tabular figures everywhere a fee, a date or a section number appears. The spec is explicit that misaligned rupee figures undermine a page whose whole argument is precision. */ .n,td.n,.fee,.pricetable td,.pricecard .amt{font-variant-numeric:tabular-nums} /* ========================================================================== 02 LAYOUT FRAME AND BAND PARITY -------------------------------------------------------------------------- Sections alternate --bg / --bg-tint strictly. Which parity a page STARTS on is a layout decision, not a coin toss: .card is white, so a card-bearing section on a white band renders as an outline rather than an object. Start the alternation so that the card-bearing sections land on .alt. tools/build.py re-derives the alternation programmatically on every build, so inserting or removing a section can never leave the page half-inverted. ========================================================================== */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px} .wrap-narrow{max-width:880px;margin:0 auto;padding:0 34px} .section{padding:82px 0} .section.tight{padding:56px 0} .section.loose{padding:104px 0} .alt{background:var(--bg-tint)} .dark{background:var(--navy);color:var(--on-navy)} .dark h1,.dark h2,.dark h3,.dark .sec-head{color:var(--on-navy)} .dark p,.dark .lede,.dark .sub{color:var(--on-navy-soft)} .dark .eyebrow{color:var(--on-navy-mute)} .topbar{height:5px;background:var(--accent)} .rule{height:1px;background:var(--line);border:0;margin:0} /* ========================================================================== 03 TYPOGRAPHY ========================================================================== */ .eyebrow{ font-family:var(--mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 18px} h1,h2,h3{color:var(--ink);font-weight:600} .h-serif{font-family:var(--serif);font-weight:500;line-height:1.07;letter-spacing:-.015em} h1.h-serif{font-size:clamp(2.15rem,5.4vw,3.4rem);text-wrap:balance;max-width:18ch} h1.h-serif.wide{max-width:22ch} .sec-head{ font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.3rem); line-height:1.14;letter-spacing:-.012em;color:var(--ink);margin:0 0 14px;text-wrap:balance; max-width:24ch} .sec-head.wide{max-width:32ch} .accent{color:var(--accent);font-weight:500} .sub{color:var(--muted);font-size:clamp(1.05rem,2.2vw,1.18rem);max-width:var(--measure-tight); line-height:1.58} .lede{max-width:var(--measure);color:var(--ink)} /* 80ch measured 77 characters on the page, 72ch measured 74 - both over the band. The ch unit is the width of a zero, which in this face is wider than the average letter, so a ch cap always sits long. 67ch measures 70. */ .lede.wide{max-width:67ch} .lede strong{color:var(--ink)} /* .opening - the trust-moment paragraph set larger than body. Used at the top of the NRI page and each service page. */ .opening{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.34rem);line-height:1.55; color:var(--ink);max-width:60ch} .opening p{margin:0 0 .8em} .opening p:last-child{margin-bottom:0} .kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--accent);font-weight:500;margin:0 0 10px} .sec-intro{margin-bottom:34px} .smallprint{font-size:.86rem;color:var(--muted);line-height:1.55;max-width:74ch} .tagline{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink)} /* ========================================================================== 04 BUTTONS ========================================================================== */ .btn{ display:inline-block;font-family:var(--sans);font-weight:600;font-size:1rem; padding:14px 26px;border-radius:var(--radius);background:var(--accent); color:var(--on-accent);border:1.5px solid var(--accent);cursor:pointer; transition:background .15s,border-color .15s,color .15s;text-align:center} .btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{background:var(--bg);border-color:var(--accent);color:var(--accent)} .btn-navy{background:var(--navy);border-color:var(--navy);color:var(--on-navy)} .btn-navy:hover{background:var(--navy);border-color:var(--navy)} .btn-light{background:var(--bg);border-color:var(--bg);color:var(--navy)} .btn-light:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-deep)} .btn-sm{padding:10px 18px;font-size:.92rem} .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px} /* the secondary route out of a hero - a link, not a second button, so the primary action keeps its weight */ .textlink{font-weight:500;color:var(--accent);border-bottom:1px solid var(--accent-line); padding-bottom:1px} .textlink:hover{border-bottom-color:var(--accent)} /* A paragraph that is nothing but a link is a standalone target, whatever the markup says: WCAG 2.5.8's exemption is for a link inside a sentence, and a sentence is what these are not. The row is given the height of a control. */ .morelink{margin-top:14px} /* inside a boundary the link row is a footer to the argument, not another paragraph of it: a hairline separates it, and the row is laid out rather than left to wrap - the middot was ending up at the head of a line */ .boundary .morelink{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px; margin-top:22px;padding-top:16px;border-top:1px solid var(--line); color:var(--muted);font-size:.95rem} .morelink .textlink{display:inline-flex;align-items:center;min-height:28px} /* The "all fees" link under a price sits in a caption barely longer than the link itself, so it reads as a control rather than as a word in a sentence. Vertical padding on an inline box grows the hit area without moving the line. */ .note .textlink{padding:4px 0} .golink{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);font-weight:500;margin-top:auto;padding-top:12px} .golink:hover{text-decoration:underline} /* ========================================================================== 05 HEADER AND NAVIGATION ========================================================================== */ .topnav{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .nav-in{max-width:var(--maxw);margin:0 auto;padding:0 34px;display:flex;align-items:center; justify-content:space-between;height:74px;gap:20px} .brand{display:flex;align-items:baseline;gap:9px;line-height:1;flex:none} .brand-text{font-family:var(--sans);font-weight:600;font-size:1.3rem;letter-spacing:-.01em; color:var(--ink)} .brand-text .gst{color:var(--accent)} .brand-text.light{color:var(--on-navy)} .brand-text.light .gst{color:var(--on-navy)} .brand-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)} .menu{display:flex;align-items:center;gap:24px} .menu a{font-size:.93rem;font-weight:500;color:var(--muted)} .menu a:hover{color:var(--ink)} .menu a.active{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:3px} .menu a.btn{color:var(--on-accent);padding:10px 18px;font-size:.9rem} .menu a.btn:hover{color:var(--on-accent)} .has-drop{position:relative} .has-drop>span{font-size:.93rem;font-weight:500;color:var(--muted);cursor:default} .drop{position:absolute;top:100%;left:-14px;min-width:270px;background:var(--bg); border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:8px;display:none} .has-drop:hover .drop,.has-drop:focus-within .drop{display:block} .drop a{display:block;padding:10px 14px;border-radius:var(--radius);font-size:.92rem;color:var(--muted)} .drop a:hover{background:var(--bg-tint);color:var(--ink)} .navphone{font-family:var(--mono);font-size:.82rem;color:var(--ink);letter-spacing:.01em; white-space:nowrap} .navphone:hover{color:var(--accent)} .navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px; background:none;border:none;cursor:pointer;padding:0} .navtoggle span{display:block;height:2px;width:24px;background:var(--ink);border-radius:2px;margin:0 auto} /* ========================================================================== 06 HERO -------------------------------------------------------------------------- Two shapes. .hero on its own is a single column of type - used where the page has nothing to show but its argument (the NRI page opens this way, deliberately quiet). .hero:has(.hero-aside) splits two-thirds / one-third and puts a real object in the right column: a price card, a boundary, a sequence. The spec is firm that there is no stock photography anywhere. ========================================================================== */ /* overflow:hidden crops the ambient disc to the band rather than letting it widen the document - a decorative shape must never create a scrollbar. */ .hero{padding:84px 0 74px;position:relative;overflow:hidden} .hero .sub{margin:24px 0 30px} .hero:has(.hero-aside) .wrap{display:grid;grid-template-columns:1.32fr .88fr;gap:52px; align-items:start} .hero-aside{position:relative} .hero-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-top:22px;display:flex;align-items:flex-start;gap:10px;line-height:1.7; max-width:52ch} .hero-note:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent); flex:none;margin-top:.55em} .hero-art svg{width:100%;height:auto;display:block} /* ========================================================================== 07 GRIDS AND CARDS ========================================================================== */ .grid{display:grid;gap:22px} /* minmax(0,1fr) rather than 1fr: a plain 1fr track is min-content-floored, so one unbreakable child (a long flag chip, a wide table) widens the whole page. */ .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid.tight{gap:16px} .card{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg); padding:28px;box-shadow:var(--shadow-sm)} .card.ontint{background:var(--bg)} .card.flat{box-shadow:none} .card h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.28; margin:0 0 10px;color:var(--ink)} .card p{font-size:.95rem;color:var(--ink);margin:0} .card p+p{margin-top:.7rem} /* Where cards in a row carry headings of differing line counts, the body copy starts at different heights and the row looks broken. Reserve two lines on the heading and release it below 720px where the cards stack. */ .grid .card:has(p) h3{min-height:2.6em} @media(max-width:720px){.grid .card:has(p) h3{min-height:0}} /* ========================================================================== 08 THE FOUR COMPONENTS BUILT ONCE ========================================================================== */ /* --- 08a .boundary - the "Where we stop" treatment ---------------------- The signature move: it appears on every service page, on the NRI page and on the homepage. Tinted ground, a left rule in accent, type one step larger than body. It is the most persuasive moment on any page it appears on, so it carries no icon, no badge and no decoration of any kind. .boundary.major is the NRI page's load-bearing paragraph - more air, more size, and it must never sit below the fold. */ .boundary{background:var(--bg-tint);border:1px solid var(--line); border-left:4px solid var(--accent);border-radius:0 var(--radius-lg) var(--radius-lg) 0; padding:28px 34px} .boundary .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--accent);font-weight:500;margin:0 0 12px} .boundary p{font-size:1.06rem;line-height:1.62;color:var(--ink);max-width:66ch;margin:0 0 .8em} .boundary p:last-child{margin-bottom:0} .boundary strong{color:var(--ink)} .boundary.major{padding:42px 48px;border-left-width:5px} .boundary.major p{font-family:var(--serif);font-size:clamp(1.14rem,2.4vw,1.3rem);line-height:1.56} .boundary.onwhite{background:var(--bg-tint)} /* on a tinted band the boundary needs to separate from its ground */ .alt .boundary{background:var(--bg)} /* A boundary spanning the full column measured 1092px with the paragraph capped at 66 characters inside it: 470px of empty tint to the right of every line, on the block the pages lean hardest on. Given the width, the label becomes a rail and the prose keeps its measure - the box is filled by structure rather than by letting the line run past the point where it can be read. The rule is scoped to a boundary that is a direct child of .wrap, because the same block set inside a grid column is already at its measure and must stay stacked. */ @media(min-width:940px){ .wrap>.boundary{display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr); column-gap:38px;row-gap:0;align-items:start} .wrap>.boundary .k{margin:0;display:block;line-height:1.55;padding-top:5px} .wrap>.boundary .k .ic{display:block;width:1.9em;height:1.9em;margin:0 0 11px} .wrap>.boundary>p{max-width:64ch} /* Everything that is not the rail label belongs in the prose column. Without this, auto-placement drops the second and third children back into column one: on the contact page the "How we handle your data / Privacy policy" row landed under the label, a rail-width orphan with 150px of empty tint above it. Same fault on any boundary carrying more than one paragraph. */ .wrap>.boundary>*:not(.k){grid-column:2} .wrap>.boundary.major{grid-template-columns:minmax(0,208px) minmax(0,1fr);column-gap:44px} /* serif at 1.3rem: 64ch measured 73 characters, one over the band */ .wrap>.boundary.major>p{max-width:60ch} } /* --- 08b .pricecard ------------------------------------------------------ Tier name, fee, what is included, what is not, one action. Used in the homepage hero, on the Pricing page and as the price anchor on each service page. Every fee in it is a token from content/site.json, so an unresolved price shows as a flag rather than as an invented number. */ .pricecard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column} .pricecard .pc-head{padding:20px 26px 16px;border-bottom:1px solid var(--line-soft)} .pricecard .tier{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 8px} .pricecard .amt{font-family:var(--serif);font-weight:500;font-size:2rem;line-height:1; color:var(--ink);letter-spacing:-.02em;display:block} .pricecard .per{font-family:var(--sans);font-size:.86rem;color:var(--muted);font-weight:400; letter-spacing:0} /* The tier line used to sit above a large figure, so it carried its own bottom margin. With the figure gone (V3.0) that margin left a hole in the card head, and the scope line - which is now what the tier is FOR - was set as a footnote to a number that is no longer there. */ .pricecard .who{font-size:.95rem;color:var(--ink);margin:0;line-height:1.55} .pricecard .pc-body{padding:20px 26px;flex:1} .pricecard ul{list-style:none;margin:0;padding:0} .pricecard li{position:relative;padding-left:24px;font-size:.93rem;line-height:1.5; margin-bottom:10px;color:var(--ink)} .pricecard li:before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px; border-radius:2px;background:var(--ok)} .pricecard li.out{color:var(--muted)} .pricecard li.out:before{background:var(--line-strong)} .pricecard .pc-foot{padding:0 26px 24px} .pricecard .pc-foot .btn{width:100%} /* the compact anchor used at the top of a service page */ .priceanchor{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding:16px 20px;background:var(--bg-tint);border:1px solid var(--line); border-radius:var(--radius);margin:22px 0 0;max-width:var(--measure-tight)} .alt .priceanchor{background:var(--bg)} .priceanchor .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);font-weight:500} .priceanchor .amt{font-family:var(--serif);font-size:1.3rem;color:var(--ink);font-weight:500} .priceanchor .note{font-size:.85rem;color:var(--muted)} /* .feeanchor - what replaced the price anchor when the fees came off the site. Same slot in the hero, same weight on the page: the reader still gets a straight answer about money at the top, it is just an answer about HOW rather than HOW MUCH. It keeps the serif for the headline phrase and drops the tabular figures, which had nothing left to line up. */ .feeanchor{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0;background:var(--bg-tint); padding:14px 18px;margin-top:26px;max-width:none} .alt .feeanchor{background:var(--bg)} .feeanchor .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent);font-weight:500} .feeanchor .amt{font-family:var(--serif);font-size:1.24rem;color:var(--ink);font-weight:500; font-variant-numeric:normal} /* width:100%, not flex-basis - with a gap on the row, flex-basis:100% does not reliably force the break, and the note ended up squeezed into whatever was left beside the headline, four lines deep with the link broken across two. */ .feeanchor .note{font-size:.85rem;color:var(--muted);max-width:62ch; width:100%;margin-top:2px} /* In a hero column the anchor is naturally narrow. Dropped into a full-width wrap - as it is on the NRI page - it stretched a 58-character note across 1092px of band with 500px of nothing beside it. It is a block, not a rule across the page, so it is sized to the sentence it carries. */ .wrap>.feeanchor{max-width:700px} /* --- 08c .seq - the numbered sequence ------------------------------------ Only used where the content is genuinely sequential, because the numbering carries real information: the NRI six steps, and the four-step engagement flow. Vertical by default with a connecting rule; .seq-h is the horizontal variant for the short engagement flow. */ .seq{list-style:none;margin:0;padding:0;position:relative} .seq>li{position:relative;padding:0 0 34px 62px} .seq>li:last-child{padding-bottom:0} .seq>li:before{content:counter(seqc);counter-increment:seqc;position:absolute;left:0;top:0; width:38px;height:38px;border-radius:50%;background:var(--bg);border:1.5px solid var(--accent); color:var(--accent);font-family:var(--mono);font-weight:500;font-size:.95rem; display:flex;align-items:center;justify-content:center;z-index:2} .alt .seq>li:before{background:var(--bg-tint)} .seq>li:after{content:"";position:absolute;left:19px;top:38px;bottom:-2px;width:1.5px; background:var(--line);z-index:1} .seq>li:last-child:after{display:none} .seq{counter-reset:seqc} .seq h3{font-family:var(--serif);font-weight:600;font-size:1.16rem;line-height:1.3; color:var(--ink);margin:6px 0 8px} .seq p{font-size:.97rem;line-height:1.62;color:var(--ink);max-width:66ch;margin:0 0 .7em} .seq p:last-child{margin-bottom:0} /* horizontal variant */ .seq-h{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0; counter-reset:seqh} .seq-h>li{position:relative;text-align:center;padding:0 18px;margin:0} .seq-h>li:not(:last-child):after{content:"";position:absolute;top:18px; left:calc(50% + 28px);width:calc(100% - 56px);height:1.5px;background:var(--line)} .seq-h .n{counter-increment:seqh;font-family:var(--mono);font-weight:500;font-size:1.05rem; color:var(--accent);width:38px;height:38px;border-radius:50%;border:1.5px solid var(--accent); display:flex;align-items:center;justify-content:center;margin:0 auto;background:var(--bg); position:relative;z-index:2} .alt .seq-h .n{background:var(--bg-tint)} .seq-h h3{font-family:var(--sans);font-weight:600;font-size:.98rem;color:var(--ink); margin:16px 0 6px;line-height:1.35} .seq-h p{font-size:.89rem;color:var(--ink);margin:0;line-height:1.5} /* --- 08d .f - the statutory form-name pill ------------------------------- GSTR-3B, s.395(1), s.393(2), ASMT-10. Set inline in mono so the site's specificity is visible at a glance. Deliberately quiet - it is evidence, not emphasis, and it must never look like a link. */ .f{font-family:var(--mono);font-size:.85em;letter-spacing:.01em;color:var(--pill-ink); background:var(--pill-bg);border:1px solid var(--pill-line);border-radius:3px; padding:1px 6px;white-space:nowrap} .alt .f{background:var(--bg)} .dark .f{background:transparent;border-color:var(--on-navy-mute);color:var(--on-navy-soft)} /* ========================================================================== 09 PAGE COMPOSITES ========================================================================== */ /* --- the differentiator trio (homepage section 02) ------------------------ Three columns divided by hairlines rather than three cards: the claim is that these are one position stated three ways, not three features. */ .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0} .trio>div{padding:0 34px;border-left:1px solid var(--line)} .trio>div:first-child{border-left:0;padding-left:0} .trio>div:last-child{padding-right:0} .trio h3{font-family:var(--serif);font-weight:600;font-size:1.24rem;color:var(--ink); margin:0 0 12px;line-height:1.25} .trio p{font-size:.96rem;line-height:1.62;color:var(--ink);margin:0} /* --- service cards (homepage section 03) --------------------------------- */ .svc{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg); padding:26px 28px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm); transition:border-color .15s,box-shadow .15s} .svc:hover{border-color:var(--accent);box-shadow:var(--shadow-md)} .svc h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--ink);margin:0 0 8px} .svc .one{font-size:.94rem;color:var(--ink);margin:0 0 14px;line-height:1.55} .svc ul{list-style:none;margin:0 0 6px;padding:0} .svc li{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;color:var(--muted); margin-bottom:6px;padding-left:14px;position:relative} .svc li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:1px; background:var(--line-strong)} /* --- named failure modes (NRI page section 04) ---------------------------- The page's competitive weapon. Hairline-ruled rows, not cards: on a white band a white card is an outline, and this block earns its weight from the copy rather than from a container. */ .fails{border-top:1px solid var(--line)} .fail{border-bottom:1px solid var(--line);padding:26px 0;display:grid; grid-template-columns:minmax(0,26ch) minmax(0,1fr);gap:12px 44px;align-items:start} .fail h3{font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.3; color:var(--ink);margin:0} .fail p{margin:0;font-size:.97rem;line-height:1.62;color:var(--ink)} /* --- two-column bullet list (What we do) --------------------------------- */ .dolist{columns:2;column-gap:52px;list-style:none;margin:0;padding:0} .dolist li{break-inside:avoid;position:relative;padding-left:24px;margin-bottom:14px; font-size:.96rem;line-height:1.58;color:var(--ink)} .dolist li:before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px; border-radius:2px;background:var(--accent)} /* --- people --------------------------------------------------------------- Named individuals are the answer to the credibility problem. Portraits are real photographs, shot consistently; until they arrive .portraitph holds the exact crop so nothing shifts when they drop in. */ .person{text-align:left} .person .portrait,.person .portraitph{width:110px;height:110px;border-radius:50%;display:block; margin:0 0 16px;object-fit:cover} .person .portrait{border:1px solid var(--line-soft)} .person .portraitph{background:var(--bg-tint);border:1px dashed var(--line-strong); display:flex;align-items:center;justify-content:center;text-align:center;padding:10px; font-family:var(--mono);font-size:.54rem;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);line-height:1.5} .person h3{font-family:var(--serif);font-weight:600;font-size:1.24rem;color:var(--ink);margin:0 0 4px} .person .role{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);margin:0 0 12px} .person p{font-size:.95rem;color:var(--ink);margin:0 0 .7rem;line-height:1.6} .person .cred{font-size:.88rem;color:var(--muted);margin:0} /* .crednote - the sentence that keeps a qualification from being read as a standing. It grew when the awarding institution was named: GIFT is an institute OF the Government of Kerala, so the line has more work to do, not less. Set as fine print under a rule, because a disclaimer that looks like body copy either gets skipped or gets mistaken for a further claim. */ .person .crednote{font-size:.8rem;color:var(--muted);line-height:1.5; margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);max-width:58ch} /* --- .engage - the kinds of work, not a ladder of them --------------------- The homepage carried Essential / Standard / Full: a price ladder, invented for a published rate card. When the prices came off in V3.0 the ladder stayed and only the numbers went, which left three cards implying that a second GSTIN was an upgrade rather than a second piece of work, and that everything this firm does is GST. It is not a ladder. It is a set of engagements with different cycles, and a client takes the ones they need - so the card carries no rank, no "everything in the tier below", and no order. */ .engage{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg); border-top:3px solid var(--accent);padding:24px 26px;display:flex;flex-direction:column} .alt .engage{background:var(--bg)} .engage .tier{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem; letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 16px} .engage .tier .ic{width:1.15em;height:1.15em} .engage ul{list-style:none;margin:0 0 18px;padding:0;flex:1} .engage li{position:relative;padding-left:22px;font-size:.93rem;line-height:1.55; color:var(--ink);margin-bottom:11px} .engage li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px; border-radius:2px;background:var(--ok)} .engage .note{margin:0;padding-top:14px;border-top:1px solid var(--line-soft); font-size:.84rem;line-height:1.5;color:var(--muted)} /* --- objection microcopy -------------------------------------------------- */ .objection{border-left:2px solid var(--line-strong);padding:2px 0 2px 20px;margin-bottom:24px} .objection h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.05rem; color:var(--muted);margin:0 0 7px} .objection p{margin:0;font-size:.96rem;color:var(--ink);line-height:1.6} /* --- insights list -------------------------------------------------------- */ .postlist{display:grid;gap:0;border-top:1px solid var(--line)} .post-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 34px;align-items:center; padding:26px 0;border-bottom:1px solid var(--line);transition:padding .15s} .post-row:hover{padding-left:10px} .post-row h3{font-family:var(--serif);font-weight:600;font-size:1.24rem;line-height:1.3; color:var(--ink);margin:0 0 8px} .post-row p{margin:6px 0 0;font-size:.95rem;color:var(--ink);max-width:72ch} .post-row .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase; color:var(--accent);white-space:nowrap;display:block;margin-bottom:8px} /* --- across time zones / small two-up ------------------------------------- */ .twoup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px} .twoup h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;color:var(--ink);margin:0 0 10px} .twoup p{font-size:.97rem;line-height:1.62;color:var(--ink);margin:0 0 .8em;max-width:56ch} /* --- the direction-chooser page (temporary) ------------------------------- */ .choose{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px} .choose .card{display:flex;flex-direction:column} .choose .bet{font-size:.95rem;color:var(--ink);margin:0 0 14px;line-height:1.6} .choose .wl{font-size:.88rem;color:var(--muted);margin:0 0 18px;line-height:1.55} .choose .btn{margin-top:auto} /* ========================================================================== 10 TABLES -------------------------------------------------------------------------- Used for the fee tables and the statutory concordance. Wide tables scroll inside their own container so the page body never scrolls horizontally. ========================================================================== */ .tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg); background:var(--bg);margin:0 0 22px} table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:560px} th{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em; text-transform:uppercase;color:var(--accent);font-weight:500;padding:13px 20px; background:var(--bg-sunk);border-bottom:1px solid var(--line);vertical-align:bottom} td{padding:15px 20px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.55; color:var(--ink)} tr:last-child td{border-bottom:0} td strong{color:var(--ink)} td.amt,th.amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} td.amt{font-family:var(--serif);font-size:1.05rem;color:var(--ink)} /* ========================================================================== 11 FAQ -------------------------------------------------------------------------- Native
, so it works with JavaScript disabled and is keyboard operable for free. Hairline-ruled rows rather than cards, for the same reason as .fails. ========================================================================== */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative; font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.4;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary:after{content:"";position:absolute;right:8px;top:31px;width:10px;height:10px; border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent); transform:rotate(45deg);transition:transform .18s} .faq details[open] summary:after{transform:rotate(-135deg);top:35px} .faq .a{padding:0 44px 24px 0} .faq .a p{margin:0 0 .8em;font-size:.98rem;line-height:1.65;color:var(--ink);max-width:74ch} .faq .a p:last-child{margin-bottom:0} /* ========================================================================== 12 FORMS -------------------------------------------------------------------------- Two forms only, per the build spec. Both carry the lead-source select and the unticked purpose-limited consent checkbox - neither is optional and neither may be removed without changing the build spec first. ========================================================================== */ .form{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg); padding:34px 36px;box-shadow:var(--shadow-sm);position:relative} .field{margin-bottom:18px} .field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px} label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink);margin-bottom:7px;font-weight:500} label .req{color:var(--accent)} input,select,textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:12px 14px; border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--bg); color:var(--ink)} textarea{min-height:120px;resize:vertical} input::placeholder,textarea::placeholder{color:var(--muted)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .consent{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start; margin:22px 0 20px;padding-top:20px;border-top:1px solid var(--line-soft)} /* 18px failed WCAG 2.5.8's 24px minimum, and a consent box is the one control on the site that must not be hard to hit. */ .consent input{width:24px;height:24px;margin-top:0;accent-color:var(--accent)} .consent label{font-family:var(--sans);font-size:.88rem;letter-spacing:0;text-transform:none; color:var(--ink);line-height:1.55;margin:0;font-weight:400} .consent a{color:var(--accent);border-bottom:1px solid var(--accent-line)} .formnote{font-size:.86rem;color:var(--muted);line-height:1.55;margin:16px 0 0} .contact-side .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);margin:0 0 8px} .contact-side p{color:var(--ink);margin:0 0 20px;font-size:.97rem;line-height:1.6} .contact-side a[href^="tel"],.contact-side a[href^="mailto"]{color:var(--ink); border-bottom:1px solid var(--line-strong)} .hours{list-style:none;margin:0;padding:0;font-size:.94rem} .hours li{display:flex;justify-content:space-between;gap:20px;padding:8px 0; border-bottom:1px solid var(--line-soft);color:var(--ink)} .hours li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)} /* ========================================================================== 13 DARK BANDS AND CLOSING CTA -------------------------------------------------------------------------- The closing CTA has a fixed shape everywhere on the site: h2 is the payoff, .sub is the ask. The trust move goes in the sub, never in the headline. ========================================================================== */ .darkband{background:var(--navy);color:var(--on-navy);border-radius:var(--radius-lg); padding:32px 38px;font-size:1.06rem;line-height:1.6} /* One statement on a dark plate. Left at the full column it was 1092px of navy with 400 of them empty, and the line itself ran to 74 characters. The plate comes in to the width the sentence actually needs. */ .darkband{max-width:860px;margin-left:auto;margin-right:auto} .darkband p{color:var(--on-navy-soft);margin:0 0 .8em;max-width:66ch} .darkband p:last-child{margin-bottom:0} .darkband strong,.darkband .hl{color:var(--on-navy);font-weight:600} .closing{background:var(--navy);color:var(--on-navy);text-align:center;padding:92px 0} .closing h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.85rem,4.6vw,2.6rem); line-height:1.14;color:var(--on-navy);max-width:24ch;margin:0 auto 30px;letter-spacing:-.015em} .closing h2 .accent,.dark .accent{color:var(--accent-on-navy);font-weight:500} .closing .sub{color:var(--on-navy-soft);max-width:60ch;margin:0 auto 30px} .closing .reply{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase; color:var(--on-navy-mute);margin-top:26px} /* ========================================================================== 14 FOOTER ========================================================================== */ /* Footer and closing band are both Ink now - one dark, as the brief asks. A hairline keeps them from reading as a single slab. */ footer{background:var(--navy);color:var(--on-navy-soft);padding:60px 0 28px;font-size:.92rem; border-top:1px solid var(--on-navy-line)} .foot-grid{max-width:var(--maxw);margin:0 auto;padding:0 34px;display:grid; grid-template-columns:2.1fr 1fr 1fr 1.1fr;gap:34px} .foot-brand{margin-bottom:14px;line-height:1} .foot-tag{color:var(--on-navy-mute);margin:0 0 6px;font-size:.9rem;line-height:1.6;max-width:34ch} .foot-tag.strong{color:var(--on-navy-soft)} footer h4{font-family:var(--mono);color:var(--on-navy);font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;margin:0 0 15px;font-weight:500} footer nav a{display:block;color:var(--on-navy-soft);margin-bottom:9px} footer nav a:hover{color:var(--on-navy)} .foot-bottom span{max-width:52ch} .foot-bottom{max-width:var(--maxw);margin:34px auto 0;padding:20px 34px 0; border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:.72rem; letter-spacing:.05em;color:var(--on-navy-mute);display:flex;justify-content:space-between; gap:20px;flex-wrap:wrap} .foot-bottom{border-top-color:var(--on-navy-line)} /* ========================================================================== 15 ARTICLE PAGES ========================================================================== */ .postwrap{max-width:760px;margin:0 auto;padding:0 34px} .postback{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.11em; text-transform:uppercase;color:var(--accent);margin-bottom:18px} .postback:hover{text-decoration:underline} .post-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin-top:18px} .standfirst{font-family:var(--serif);font-size:clamp(1.14rem,2.4vw,1.3rem);line-height:1.52; color:var(--ink);margin:22px 0 0;padding-bottom:26px;border-bottom:1px solid var(--line)} .post-body{font-size:1.05rem;line-height:1.74;color:var(--ink)} .post-body h2{font-family:var(--serif);font-weight:600;font-size:1.42rem;line-height:1.28; color:var(--ink);margin:40px 0 14px;text-wrap:balance} .post-body p{margin:0 0 18px} .post-body ul,.post-body ol{margin:0 0 20px;padding-left:0;list-style:none} .post-body ol{counter-reset:pb} .post-body li{position:relative;padding-left:26px;margin-bottom:12px;line-height:1.68} .post-body ul li:before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px; border-radius:2px;background:var(--accent)} .post-body ol li:before{content:counter(pb) ".";counter-increment:pb;position:absolute;left:0;top:0; font-family:var(--mono);font-size:.9rem;color:var(--accent)} .post-body .disclaimer{font-size:.9rem;color:var(--muted);font-style:italic; border-top:1px solid var(--line);padding-top:20px;margin-top:34px} /* ========================================================================== 16 UNRESOLVED-VALUE FLAGS -------------------------------------------------------------------------- [SET] a value Vivek has still to supply. [VERIFY] a statement that must be checked against a primary source before publication. [HOLD] a claim that may not be published at all until confirmed. Every one of these is listed in OPEN-ITEMS.md. tools/build.py counts them on every build and refuses to mark a page launch-ready while any remain. ========================================================================== */ /* NOT white-space:nowrap. A flag can carry a whole sentence of instruction, and a nowrap chip inside a grid track widens the page rather than wrapping. */ .flag{font-family:var(--mono);font-size:.74em;font-weight:500;letter-spacing:.04em; color:var(--flag-ink);background:var(--flag-bg);border:1px dashed var(--flag-line); border-radius:3px;padding:1px 7px;line-height:1.7;box-decoration-break:clone; -webkit-box-decoration-break:clone} .flagblock{font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--flag-ink); background:var(--flag-bg);border:1px dashed var(--flag-line);border-radius:var(--radius); padding:14px 18px;margin:0 0 20px} .flagblock b{display:block;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem; margin-bottom:6px} /* the held social-proof banners: mono at .82rem, so a ch here really is a character. 74 was the inline value they carried; 62 is the measure. */ .flagblock.hold{max-width:62ch} .foot-tag.lead-in{margin-top:16px} /* .actblock - which Act governs which year. This was written as a .flagblock and so wore the dashed [SET] costume on three pages: finished, load-bearing legal orientation dressed as an unresolved placeholder. It is the opposite of open - it is the first thing the firm tells you - so it is set as a calm note in the statutory register the rest of the site uses for evidence. */ .actblock{background:var(--bg-tint);border:1px solid var(--line); border-left:4px solid var(--accent);border-radius:0 var(--radius-lg) var(--radius-lg) 0; padding:26px 32px;font-size:.97rem;line-height:1.66;color:var(--ink);margin:0} .actblock b{display:block;font-family:var(--mono);font-weight:500;font-size:.7rem; letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:11px} .alt .actblock{background:var(--bg)} @media(max-width:720px){.actblock{padding:22px 22px}} /* ========================================================================== 17 RESPONSIVE ========================================================================== */ @media(max-width:1024px){ .section{padding:64px 0} .section.loose{padding:80px 0} .wrap,.wrap-narrow,.nav-in,.foot-grid,.foot-bottom,.postwrap{padding-left:26px;padding-right:26px} .hero{padding:66px 0 58px} .hero:has(.hero-aside) .wrap{grid-template-columns:1fr;gap:38px} .hero-aside{max-width:460px} .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr;row-gap:34px} .choose{grid-template-columns:1fr} /* the hamburger takes over on tablets too: six items plus a dropdown plus a CTA plus the phone number do not fit below about 1024px */ .navtoggle{display:flex} .menu{position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch; gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 26px 18px; box-shadow:var(--shadow-lg)} .menu:not(.open){display:none} .menu a,.has-drop>span{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1rem} .menu a.active{border-bottom:1px solid var(--line);padding-bottom:14px} .has-drop{position:static} .drop{position:static;display:block;box-shadow:none;border:0;padding:0 0 6px 14px;min-width:0} .drop a{padding:10px 4px;border-bottom:0;font-size:.95rem} .menu a.btn{margin-top:14px;border-bottom:0;padding:14px 20px} .navphone{display:none} } @media(max-width:720px){ body{font-size:16px} .section{padding:52px 0} .section.tight{padding:40px 0} .section.loose{padding:60px 0} .wrap,.wrap-narrow,.nav-in,.foot-grid,.foot-bottom,.postwrap{padding-left:20px;padding-right:20px} .hero{padding:48px 0 44px} .closing{padding:64px 0} .g2,.g3,.g4,.twoup,.foot-grid,.choose{grid-template-columns:1fr} .trio{grid-template-columns:1fr;gap:28px} .trio>div{padding:0;border-left:0;border-top:1px solid var(--line);padding-top:24px} .trio>div:first-child{border-top:0;padding-top:0} .seq-h{grid-template-columns:1fr;gap:22px} .seq-h>li{text-align:left;padding:0;display:grid;grid-template-columns:38px 1fr; gap:0 16px;align-items:start} .seq-h>li:not(:last-child):after{display:none} .seq-h .n{margin:0} .seq-h h3{margin-top:7px;grid-column:2} .seq-h p{grid-column:2} .seq>li{padding-left:52px} .fail{grid-template-columns:1fr;gap:8px} .dolist{columns:1} .field-row{grid-template-columns:1fr;gap:0} .boundary{padding:24px 22px} .boundary.major{padding:28px 24px} .form{padding:26px 22px} .darkband{padding:26px 24px} .cta-row{flex-direction:column;align-items:stretch} .cta-row .btn{width:100%} .post-row{grid-template-columns:1fr;gap:10px} .post-row:hover{padding-left:0} .foot-bottom{flex-direction:column;gap:8px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} } /* -------------------------------------------------------------------------- Print: the fee table and any written position a client wants to keep. -------------------------------------------------------------------------- */ @media print{ /* a reveal that has not fired yet must not print as a blank column */ html.js .reveal,html.js .reveal.in{opacity:1!important;transform:none!important} .topnav,.topbar,footer,.closing,.btn,.cta-row{display:none!important} body{font-size:11pt;color:var(--print-ink);background:var(--print-bg)} .section{padding:18pt 0} .alt{background:transparent} } /* ========================================================================== 18 BRAND MARK, ICONS, ARTWORK AND MOTION (added in V2.0) -------------------------------------------------------------------------- V1.0 was type-only: no logo, no icons, no artwork, no motion. This section adds all four, on three rules that keep them from becoming decoration. 1. An icon labels an object, never a feeling. Ledgers, gates, deeds, tags. 2. Artwork must make the page's argument. If you cannot say in one sentence what a drawing asserts, it does not ship. 3. NOTHING MAY IMPLY A QUANTITY. A rising curve, a sawtooth, a gauge or a bar chart with no data behind it is a shape that looks measured and is not - it fails exactly the test a sentence would fail, on a site whose whole proposition is that its claims can be checked. Every drawing here shows a STRUCTURE: what connects to what, what happens before what, what crosses the boundary and what does not. ========================================================================== */ /* ---- 18a the mark ------------------------------------------------------ Two lockups from one artwork: the supplied file has a near-white 'serve' for dark grounds; the light-ground version recolours that word to --ink. Both are in assets/img/, generated from the master in 01 Artefacts/Images. */ .brandmark{display:block;height:30px;width:auto} .brand{gap:0} .foot-brand .brandmark{height:32px} @media(max-width:720px){.brandmark{height:26px}} /* the topbar carries the mark's own orange, deepening to the site accent */ .topbar{background:linear-gradient(90deg,var(--mark-orange),var(--accent))} /* ---- 18b the brushstroke ---------------------------------------------- The most ownable thing in the mark is the orange brushstroke under 'serve'. Lifted from the logo artwork as an alpha mask, so the colour comes from a palette token rather than from the image - recolour the site and the brush recolours with it. Used under the accent half of a headline, at most once per page, so it stays an emphasis and not a texture. */ :root{--brush-mask:url("data:image/svg+xml,")} .brush{position:relative;display:inline-block} .brush:after{ content:"";position:absolute;left:-1%;right:-2%;bottom:-.10em;height:.19em; background:var(--mark-orange);pointer-events:none; /* The shape is traced from the logo artwork and carried as a data-URI mask in --brush-mask, declared once above. A PNG cannot be used here: Chromium refuses a file:// PNG as a mask source, so the device would be invisible in exactly the pages/ copy this build exists to be reviewed in. Colour comes from the palette - the mask carries the shape, the token carries the paint. */ -webkit-mask-image:var(--brush-mask);mask-image:var(--brush-mask); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-position:left center;mask-position:left center; transform-origin:left center;animation:brushdraw .85s .25s cubic-bezier(.2,.8,.3,1) both} @keyframes brushdraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} .closing .brush:after,.dark .brush:after{background:var(--mark-orange)} /* the closing headline's accent half is coloured, not ruled, so a brush on top of it would be two emphases on one phrase */ .closing h2 .accent.brush:after{display:none} /* ---- 18c icons --------------------------------------------------------- One sprite, inlined once per page from theme/gstserve-child/icons.svg. currentColor throughout, so an icon takes the colour of what it sits in. */ .ic{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;vertical-align:-.20em} .ic.lg{width:1.5em;height:1.5em} /* the chip: a tinted square holding a 22px glyph. Big enough to anchor a card, light enough that a grid of them still reads as a list rather than a wall. */ .icchip{width:42px;height:42px;border-radius:10px;display:flex;align-items:center; justify-content:center;margin-bottom:16px;background:var(--bg-sunk);color:var(--navy); transition:background .18s,color .18s} .icchip .ic{width:22px;height:22px} .alt .icchip{background:var(--bg)} /* a three-step colour rhythm across a row, done with nth-child so the markup stays identical from card to card */ .grid>*:nth-child(3n+2) .icchip{background:var(--accent-soft);color:var(--accent)} .grid>*:nth-child(3n+3) .icchip{background:var(--ok-soft);color:var(--ok)} .svc:hover .icchip{background:var(--accent);color:var(--on-accent)} .grid>*:nth-child(3n+2) .svc:hover .icchip, .grid>*:nth-child(3n+3) .svc:hover .icchip{background:var(--accent);color:var(--on-accent)} /* inline icon in a heading or a key line */ .ickey{display:inline-flex;align-items:center;gap:10px} .ickey .ic{color:var(--accent)} /* icon at the head of a hairline row (failure modes, security rules) */ .icrow{display:flex;gap:12px;align-items:flex-start} .icrow .ic{margin-top:.22em;color:var(--accent);width:1.25em;height:1.25em} /* contact / detail lists */ .iclist{list-style:none;margin:0;padding:0} .iclist li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:.96rem; line-height:1.55;color:var(--ink)} .iclist .ic{margin-top:.2em;color:var(--accent)} .iclist strong{display:block;color:var(--ink)} /* ---- 18d hero artwork -------------------------------------------------- One bespoke drawing per page, argued rather than decorative. It lives in the hero's right column; on the homepages that carry a price card the drawing sits under the card instead. */ .hero-art{position:relative} .hero-art svg{width:100%;height:auto;display:block;overflow:visible} .hero-art+.hero-art{margin-top:22px} .artcap{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin-top:14px;text-align:center} /* An ambient wash keeps a type-only hero from floating on flat white. It is suppressed behind a drawing: a pale field under fine line art competes with the art and reads as a smudge rather than as depth. It was a flat disc, which at this size showed a hard curved edge cutting the corner of every page - an artefact, not light. A radial falloff has no edge to see, so it can be larger and warmer and still stay under the type. */ .hero::before{content:"";position:absolute;top:-260px;right:-200px; width:720px;height:720px;border-radius:50%;z-index:0;pointer-events:none; background:radial-gradient(closest-side,var(--mark-glow) 0%,var(--mark-glow) 38%,transparent 78%); opacity:.72} .hero.art-led::before{display:none} .hero .wrap{position:relative;z-index:1} @media(max-width:1024px){.hero::before{width:520px;height:520px;right:-180px;top:-220px}} /* drawing primitives - shared by every page's artwork */ .a-line{stroke:var(--art-5);stroke-width:1.5;fill:none} .a-line-2{stroke:var(--art-4);stroke-width:1.5;fill:none} .a-ink{stroke:var(--art-1);stroke-width:1.6;fill:none} .a-accent{stroke:var(--art-accent);stroke-width:1.8;fill:none} .a-green{stroke:var(--art-green);stroke-width:1.8;fill:none} .a-ink-2{stroke:var(--art-2);stroke-width:1.5;fill:none} .a-line-3{stroke:var(--art-3);stroke-width:1.4;fill:none} .a-fill{fill:var(--bg);stroke:var(--art-5);stroke-width:1.4} .a-fill-recede{fill:var(--art-6);stroke:var(--art-5);stroke-width:1.2} .a-fill-tint{fill:var(--bg-tint);stroke:var(--art-5);stroke-width:1.4} .a-solid{fill:var(--art-1);stroke:none} .a-solid-accent{fill:var(--art-accent);stroke:none} .a-solid-green{fill:var(--art-green);stroke:none} .a-dash{stroke-dasharray:4 5} .a-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase; fill:var(--muted);stroke:none} .a-lab.on{fill:var(--art-accent)} .a-lab.ok{fill:var(--ok)} /* ---- 18e the motion vocabulary ---------------------------------------- Deliberately small. Five verbs cover every drawing on the site: something FLOWS along a path, something PULSES in place, something TRAVELS from A to B, something LANDS with a stamp, something SETTLES into position. */ @keyframes a-flow {to{stroke-dashoffset:-36}} @keyframes a-pulse {0%,100%{opacity:.45}50%{opacity:1}} @keyframes a-travel {0%{transform:translateX(0);opacity:0} 10%{opacity:1}85%{opacity:1}100%{transform:translateX(var(--tx,190px));opacity:0}} @keyframes a-stamp {0%,52%{opacity:0;transform:scale(.55)}66%{opacity:1;transform:scale(1.18)} 100%{opacity:1;transform:scale(1)}} @keyframes a-settle {0%{opacity:0;transform:translateY(11px)}26%,100%{opacity:1;transform:translateY(0)}} @keyframes a-swing {0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}} @keyframes a-cross {0%{transform:translate(0,0);opacity:0}12%{opacity:1} 70%,100%{transform:translate(var(--cx,150px),var(--cy,0));opacity:1}} @keyframes a-fade {0%,44%{opacity:0}60%,100%{opacity:1}} @keyframes a-shrink {0%,100%{transform:scaleX(1)}55%{transform:scaleX(var(--sx,.45))}} .a-flow {stroke-dasharray:5 7;animation:a-flow 1.9s linear infinite} .a-flow.d2{animation-duration:2.5s}.a-flow.d3{animation-duration:1.5s} .a-pulse {animation:a-pulse 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center} .a-travel{transform-box:fill-box;animation:a-travel 4.4s linear infinite} .a-travel.t2{animation-delay:2.2s}.a-travel.t3{animation-delay:1.1s} .a-stamp {transform-box:fill-box;transform-origin:center;animation:a-stamp 4.4s ease-out infinite} .a-settle{transform-box:fill-box;animation:a-settle 4.6s ease-out infinite} .a-settle.s2{animation-delay:.4s}.a-settle.s3{animation-delay:.8s}.a-settle.s4{animation-delay:1.2s} .a-swing {transform-box:fill-box;transform-origin:top center;animation:a-swing 3.6s ease-in-out infinite} .a-cross {transform-box:fill-box;animation:a-cross 5s ease-in-out infinite} .a-fadein{animation:a-fade 4.6s ease-out infinite} .a-shrink{transform-box:fill-box;transform-origin:left center;animation:a-shrink 5s ease-in-out infinite} /* ---- 18f reveal on scroll --------------------------------------------- Applied ONLY when script has confirmed itself by putting .js on , so a page with JavaScript off or blocked renders everything at full opacity instead of an empty column. Suppressed entirely under reduced motion. */ @media (prefers-reduced-motion:no-preference){ html.js .reveal{opacity:0;transform:translateY(16px)} html.js .reveal.in{opacity:1;transform:none; transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)} html.js .reveal.d1{transition-delay:.07s} html.js .reveal.d2{transition-delay:.14s} html.js .reveal.d3{transition-delay:.21s} } /* ---- 18g interaction polish -------------------------------------------- */ .card{transition:border-color .18s,box-shadow .18s,transform .18s} .grid .card:hover{border-color:var(--line);box-shadow:var(--shadow-md);transform:translateY(-2px)} .svc:hover{transform:translateY(-2px)} .pricecard{transition:box-shadow .2s,transform .2s} .pricecard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .textlink{transition:border-color .18s,color .18s} .golink .ic{width:.95em;height:.95em;margin-left:5px;transition:transform .18s} .svc:hover .golink .ic,.post-row:hover .ic{transform:translateX(3px)} .post-row .tag{transition:color .18s} .btn .ic{margin-left:8px;width:1em;height:1em;transition:transform .18s} .btn:hover .ic{transform:translateX(3px)} /* the numbered sequence markers fill as the eye arrives */ .seq>li:hover:before{background:var(--accent);color:var(--on-accent)} .seq>li:before{transition:background .18s,color .18s} /* scroll cue under a hero */ .scrollcue{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-family:var(--mono); font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent); background:none;border:0;cursor:pointer;padding:0} .scrollcue .ic{width:1.1em;height:1.1em;animation:cuebob 1.7s ease-in-out infinite} @keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} /* ---- 18h portraits, now that the photographs exist --------------------- */ .person .portrait{width:118px;height:118px;border-radius:50%;object-fit:cover;display:block; margin:0 0 16px;border:0;box-shadow:0 0 0 1px var(--line-soft),var(--shadow-portrait)} .person.lead .portrait{width:150px;height:150px;margin-bottom:20px} @media(max-width:720px){.person.lead .portrait{width:124px;height:124px}} /* ---- 18i a pull quote, for the one line on a page worth stopping at ---- */ .pull{border-left:3px solid var(--mark-orange);padding:4px 0 4px 26px;margin:30px 0; font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.42; color:var(--ink);max-width:34ch} /* ---- 18j responsive for everything above ------------------------------- */ @media(max-width:1024px){ .hero-art{max-width:480px} .icchip{width:38px;height:38px;border-radius:9px;margin-bottom:14px} } @media(max-width:720px){ .hero-art{max-width:none;margin-top:8px} .pull{margin:24px 0;padding-left:18px} .brush:after{height:.22em;bottom:-.16em} } @media (prefers-reduced-motion:reduce){ .brush:after{animation:none;clip-path:none} .scrollcue .ic{animation:none} } /* ========================================================================== 19 SOCIAL PROOF — AND THE GATE IN FRONT OF IT (added in V2.0) -------------------------------------------------------------------------- The six testimonials and eight client names from the current site are built as components here so the design can be judged, but tools/build.py renders them behind a consent gate. The `.held` state is deliberately unattractive: dashed, desaturated and tagged on every card. It exists to be reviewed and to be impossible to ship by accident, not to look finished. ========================================================================== */ .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px} .quote{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg); padding:26px 28px 24px;margin:0;box-shadow:var(--shadow-sm);display:flex;flex-direction:column; transition:border-color .18s,box-shadow .18s,transform .18s} .quote:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .quote .qm{width:26px;height:26px;color:var(--mark-orange);margin-bottom:14px;opacity:.85} .quote blockquote{margin:0 0 18px;font-family:var(--serif);font-size:1.06rem;line-height:1.52; color:var(--ink)} .quote figcaption{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)} .quote .qn{display:block;font-weight:600;color:var(--ink);font-size:.95rem} .quote .qr{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);margin-top:4px} /* the client wall. Tiles are a fixed height so eight marks of different proportions still read as one row rather than as eight sizes. */ /* The wall is sized around the logos rather than the other way round. tools/prep_logos.py keys out each supplied plate, re-trims to the mark's own ink and normalises the height against aspect ratio, which puts every mark inside 142x52. The cell is that box plus even air on all four sides, so the marks sit on one optical baseline instead of each floating in its own tile. */ .clientwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:26px} .client{height:104px;border:1px solid var(--line-soft);border-radius:var(--radius); background:var(--bg);display:flex;align-items:center;justify-content:center;padding:18px 20px} .alt .client{background:var(--bg)} /* the intrinsic width and height are written into the markup from the file, so these two caps are a safety net for a logo re-exported at the wrong size */ .client img{max-height:58px;max-width:142px;width:auto;height:auto;object-fit:contain} .client:hover{border-color:var(--line-strong)} .client{transition:border-color .18s} .client.noimg{border-style:dashed;border-color:var(--line-strong)} .client.noimg span{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.45} /* the held state — applies to either block */ .held{opacity:.72;filter:saturate(.55)} .held .quote,.held .client{border-style:dashed;border-color:var(--flag-line);box-shadow:none} .held .quote:hover{transform:none;box-shadow:none} .heldtag{display:block;margin-top:12px;font-family:var(--mono);font-size:.64rem; letter-spacing:.12em;text-transform:uppercase;color:var(--flag-ink)} @media(max-width:1024px){ .quotes{grid-template-columns:repeat(2,minmax(0,1fr))} .clientwall{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:720px){ .quotes{grid-template-columns:1fr} .clientwall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .client{height:88px;padding:14px 16px} .client img{max-height:44px;max-width:120px} } /* ========================================================================== 20 ART-LED HERO (added in V2.0) -------------------------------------------------------------------------- Where the drawing carries the argument rather than illustrating it, it gets the larger half of the hero. Where a price card is the hero image - which is the whole point of homepage direction A - the default split stands. ========================================================================== */ .hero.art-led:has(.hero-aside) .wrap{grid-template-columns:1fr 1.16fr;gap:46px;align-items:center} @media(max-width:1024px){ .hero.art-led:has(.hero-aside) .wrap{grid-template-columns:1fr;gap:34px} } /* the trio is not a .grid, so it needs its own colour rhythm for the chips */ .trio>*:nth-child(3n+2) .icchip{background:var(--accent-soft);color:var(--accent)} .trio>*:nth-child(3n+3) .icchip{background:var(--ok-soft);color:var(--ok)} .trio .icchip{margin-bottom:14px} /* ========================================================================== 21 THE SECOND DESIGN PASS (added in V2.1) -------------------------------------------------------------------------- A structural audit of the built pages found 87 of 139 sections carrying no visual element at all - the heroes and the card grids were doing all the work, and everything between them was an unbroken column of prose. The components below exist to fix that SYSTEMATICALLY. Each one is a repeatable answer to a shape that occurs across many pages, not an ornament dropped on one of them. The rule from section 18 still governs everything here: an icon labels an object, artwork shows a structure, and nothing implies a quantity. ========================================================================== */ /* ---- 21a the hero meta strip ------------------------------------------- Text-only heroes (About, Contact, FAQ, Careers, Insights, Privacy) opened on a headline and a paragraph and nothing else. This is a row of true, useful facts with a glyph each - what the page contains, where the firm is, when it was last reviewed. It gives the top of the page texture without inventing anything to say. */ .herometa{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:28px;padding-top:22px; border-top:1px solid var(--line)} .herometa .m{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem; letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} .herometa .ic{width:1.05rem;height:1.05rem;color:var(--accent)} .herometa b{font-family:var(--sans);font-size:.82rem;letter-spacing:0;text-transform:none; color:var(--ink);font-weight:600} /* ---- 21c the spot figure ----------------------------------------------- A small diagram beside a block of argument. Smaller and quieter than a hero drawing - three or four elements, one idea. Used where a section is two columns of prose and the right-hand column has nothing to hold. */ .figure{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg); padding:24px 26px 20px;box-shadow:var(--shadow-sm)} .alt .figure{background:var(--bg)} .figure svg{width:100%;height:auto;display:block} .figure figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-top:16px;padding-top:14px; border-top:1px solid var(--line-soft);line-height:1.6} .figure.bare{background:transparent;border:0;box-shadow:none;padding:0} /* ---- 21d the boundary block, with its mark ----------------------------- The signature component had no glyph. It gets the boundary icon on its label, which makes the same component recognisable at a glance across ten pages. */ .boundary .k{display:flex;align-items:center;gap:9px} .boundary .k .ic{width:1.25em;height:1.25em} .boundary.major .k .ic{width:1.4em;height:1.4em} /* ---- 21e the closing band ---------------------------------------------- Twenty-two closing bands, all identical, all flat navy. The brush is set large and very low-contrast behind the headline - the mark's own gesture, used as a ground rather than as a graphic. */ .closing{position:relative;overflow:hidden} .closing .wrap{position:relative;z-index:1} /* The mark's gesture, at the size it is drawn at rather than blown up into a ground: a stroke ruled under the closing headline, between it and the deck. Enlarging it to sit behind the type made a grey smudge, not a ground. */ .closing h2:after{content:"";display:block;width:168px;height:12px;margin:18px auto 0; background:var(--mark-orange);opacity:.9; -webkit-mask-image:var(--brush-mask);mask-image:var(--brush-mask); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%} @media(prefers-reduced-motion:no-preference){ .closing h2:after{animation:brushdraw .9s .1s cubic-bezier(.2,.8,.3,1) both}} .closing .btn .ic{width:1.05em;height:1.05em} /* ---- 21f numbered section markers -------------------------------------- The homepages number their sections in the eyebrow. Giving that numeral a chip turns a run of similar-looking bands into a sequence the eye can count, which is most of what makes a long page feel authored rather than assembled. */ .eyebrow.num{display:flex;align-items:center;gap:12px} .eyebrow.num .n{display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%;border:1px solid var(--accent-line); background:var(--accent-soft);color:var(--accent);font-size:.72rem;letter-spacing:0; flex:none} .alt .eyebrow.num .n{background:var(--bg)} /* ---- 21g step and list glyphs ------------------------------------------ */ .seq h3 .ic,.seq-h h3 .ic{width:1em;height:1em;color:var(--accent);margin-right:8px; vertical-align:-.13em} .dolist li .ic{position:absolute;left:0;top:.28em;width:1.05em;height:1.05em;color:var(--ok)} .dolist li:has(.ic):before{display:none} .dolist li:has(.ic){padding-left:28px} /* ---- 21h FAQ, with a glyph per question -------------------------------- */ .faq summary{display:flex;gap:13px;align-items:flex-start;padding-right:44px} .faq summary .ic{width:1.15em;height:1.15em;margin-top:.2em;color:var(--accent);flex:none} .faq summary .q{flex:1} .faq .a{padding-left:calc(1.15em + 13px)} @media(max-width:720px){.faq .a{padding-left:0}} /* ---- 21i long-form article furniture ----------------------------------- Three thousand words with nothing but paragraphs is not a designed page. */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100; background:linear-gradient(90deg,var(--mark-orange),var(--accent)); transition:width .08s linear} .byline{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:20px; border-top:1px solid var(--line)} .byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none; box-shadow:0 0 0 1px var(--line-soft)} .byline .ic.lg{color:var(--accent);width:1.5em;height:1.5em} .byline .who{font-size:.9rem;color:var(--ink);font-weight:600;line-height:1.35} .byline .when{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:400;margin-top:3px} .artbanner{margin:26px 0 0;border-radius:var(--radius-lg);overflow:hidden; background:var(--bg-tint);border:1px solid var(--line-soft);padding:18px 20px} .artbanner svg{width:100%;height:auto;display:block} .toc{background:var(--bg-tint);border:1px solid var(--line);border-radius:var(--radius-lg); padding:22px 26px;margin:30px 0 34px} .toc p{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin:0 0 12px;display:flex;align-items:center;gap:9px} .toc p .ic{width:1.15em;height:1.15em} .toc ol{list-style:none;margin:0;padding:0;counter-reset:tc; columns:2;column-gap:34px} .toc li{break-inside:avoid;margin-bottom:8px;padding-left:24px;position:relative; font-size:.92rem;line-height:1.45} .toc li:before{counter-increment:tc;content:counter(tc,decimal-leading-zero);position:absolute; left:0;top:.1em;font-family:var(--mono);font-size:.72rem;color:var(--accent)} /* A contents entry is a standalone navigation target, not a link inside a sentence, so WCAG 2.5.8's inline exemption does not cover it. At 16px tall it failed the 24px minimum; the padding takes each row to 28. */ .toc a{color:var(--ink);display:block;padding:5px 0} .toc li{margin-bottom:2px} .toc a:hover{color:var(--accent);text-decoration:underline} @media(max-width:720px){.toc ol{columns:1}} /* an aside inside an article: the statutory sections it turns on */ .keybox{background:var(--bg-tint);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:30px 0} .keybox h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin:0 0 12px;display:flex;align-items:center;gap:9px;font-weight:500} .keybox h3 .ic{width:1.2em;height:1.2em} .keybox ul{margin:0;padding:0;list-style:none; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px} .keybox li{font-size:.88rem;line-height:1.5;padding-left:0;color:var(--ink)} .keybox li:before{display:none} @media(max-width:720px){.keybox ul{grid-template-columns:1fr}} /* h2 anchors so the TOC has somewhere to land */ .post-body h2{scroll-margin-top:96px} /* ---- 21j insights index thumbnails ------------------------------------- */ /* two columns, not three: the tag sat in a third column at the far right with 200px of gutter between it and the deck. It reads as a kicker above the title, where a section label belongs. */ .post-row{grid-template-columns:132px minmax(0,1fr);gap:20px 26px} /* An emblem, not a miniature. The row carried the page's own drawing scaled to 132px, where a diagram built to be read at 620px becomes grey scribble. One icon on a tinted plate is legible at this size and still says which article it belongs to. */ .post-thumb{width:132px;height:88px;border-radius:var(--radius); background:var(--bg-tint);border:1px solid var(--line-soft); display:flex;align-items:center;justify-content:center;flex:none} .post-thumb .ic{width:34px;height:34px;color:var(--accent);transition:transform .2s} .post-row:hover .post-thumb{border-color:var(--accent-line);background:var(--accent-soft)} .post-row:hover .post-thumb .ic{transform:scale(1.06)} .alt .post-thumb{background:var(--bg)} @media(max-width:720px){ .post-row{grid-template-columns:1fr} .post-thumb{width:100%;height:120px} } /* ---- 21k a quiet ground for the tinted bands --------------------------- A single hairline rule at the top of every tinted band. Almost invisible on its own; across a page it gives the alternation an edge instead of a smudge. */ .section.alt{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} /* ---- 21l the fact row -------------------------------------------------- For a section whose argument is a short list of true statements. Three or four items, glyph above, no card - lighter than .card, heavier than prose. */ .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px} .facts.f4{grid-template-columns:repeat(4,minmax(0,1fr))} /* NOTE the class is .fact, not .f - .f is already the statutory form-name pill (GSTR-3B, s.395(1)) and reusing it here set every fact in mono inside a box. */ .facts .fact .ic{width:1.6rem;height:1.6rem;color:var(--accent);margin-bottom:14px;display:block} .facts .fact:nth-child(3n+2) .ic{color:var(--ok)} .facts .fact:nth-child(3n+3) .ic{color:var(--navy)} .facts .fact{padding-top:20px;border-top:2px solid var(--line)} .facts .fact:nth-child(3n+2){border-top-color:var(--ok)} .facts .fact:nth-child(3n+1){border-top-color:var(--accent)} .facts .fact:nth-child(3n+3){border-top-color:var(--navy)} .facts h3{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink); margin:0 0 8px;line-height:1.3} .facts p{font-size:.94rem;line-height:1.6;color:var(--ink);margin:0} @media(max-width:1024px){.facts,.facts.f4{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}} @media(max-width:720px){.facts,.facts.f4{grid-template-columns:1fr;gap:24px}} /* ---- 21m layout helper for a section that pairs prose with a figure ---- */ .withfig{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px; align-items:start} .withfig.narrow{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:44px} @media(max-width:1024px){.withfig,.withfig.narrow{grid-template-columns:1fr;gap:34px}} /* ---- 21n the closing band's contact row -------------------------------- Injected into every closing section by tools/build.py, so the number and the address exist once. A closing call to action that offers only a form gives a reader in another time zone nowhere to go. */ .closerow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;margin-top:34px; padding-top:26px;border-top:1px solid var(--on-navy-line)} .closerow .cl{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono); font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--on-navy-soft); transition:color .15s} .closerow a.cl:hover{color:var(--on-navy)} .closerow .ic{width:1.05em;height:1.05em;color:var(--mark-orange)} @media(max-width:720px){.closerow{flex-direction:column;align-items:center;gap:14px}} /* ---- 21o long-form body, given some air ------------------------------- The opening paragraph carries the reader in, and every h2 gets a short rule above it so a three-thousand-word column reads as chapters rather than as a wall. Both are one rule each; neither needs touching per article. */ .post-body>p:first-of-type{font-size:1.14rem;line-height:1.66;color:var(--ink)} .post-body h2{position:relative;padding-top:16px} .post-body h2:before{content:"";position:absolute;top:0;left:0;width:38px;height:2px; background:var(--accent)} /* a figure set into the body of an article */ .post-fig{margin:32px 0;background:var(--bg-tint);border:1px solid var(--line); border-radius:var(--radius-lg);padding:22px 24px 18px} .post-fig svg{width:100%;height:auto;display:block} .post-fig figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-top:14px;padding-top:12px; border-top:1px solid var(--line);line-height:1.6} /* ---- 21p tap targets --------------------------------------------------- A standalone action needs a target a thumb can hit. Links inside a sentence are exempt (WCAG 2.5.8) and are left alone; everything that stands on its own as an action gets a 44px box on touch widths. */ @media(max-width:860px){ .brand{min-height:44px;display:inline-flex;align-items:center} .golink,.postback,.cardlink{min-height:44px;display:inline-flex;align-items:center} .closerow .cl{min-height:44px;padding:0 6px} .iclist a{display:inline-flex;align-items:center;min-height:44px} footer nav a{padding:7px 0;margin-bottom:2px} .herometa .m{min-height:34px} } /* ---- 21q the fact row is a description list --------------------------- Term and definition, which is what these are. It also keeps the document outline honest: an

under an

with no

between them is a heading skip, and every service page had two of them. */ .facts .fact dt{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink); margin:0 0 8px;line-height:1.3} .facts .fact dd{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink)} /* a heading that exists for the document outline and not for the eye */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* the footer group labels are h2 inside the footer landmark, not h4 - an h4 under an h2 is a heading skip, and it was on every page */ footer h2.footh{font-family:var(--mono);color:var(--on-navy);font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;margin:0 0 15px;font-weight:500} @media(max-width:860px){ /* standalone actions only. A link inside a sentence keeps its inline size - WCAG 2.5.8 exempts those, and padding them would break the line. */ .cta-row .textlink{min-height:44px;display:inline-flex;align-items:center} .contact-side a[href^="tel"],.contact-side a[href^="mailto"]{ min-height:44px;display:inline-flex;align-items:center} } /* ========================================================================== 22 THE SPACING SCALE, AND THE END OF INLINE MARGINS (added in V2.3) -------------------------------------------------------------------------- Page content carried 155 inline style declarations, 107 of them margin-top, across thirteen different values. Every one is now snapped to the scale in palette.css and expressed as a class, so the vertical rhythm of the site is set in one place and a section cannot drift by four pixels because somebody typed 30 instead of 32. These are the ONLY spacing utilities. If a component needs a spacing value often enough to reach for a utility twice, it wants a rule of its own. ========================================================================== */ .mt-1{margin-top:var(--s1)} .mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)} .mt-7{margin-top:var(--s7)} .mt-8{margin-top:var(--s8)} .mt-9{margin-top:var(--s9)} .mt-10{margin-top:var(--s10)} .mt-11{margin-top:var(--s11)} .gap-2{gap:var(--s2)} .gap-3{gap:var(--s3)} .gap-4{gap:var(--s4)} .gap-5{gap:var(--s5)} .gap-6{gap:var(--s6)} .gap-7{gap:var(--s7)} .gap-8{gap:var(--s8)} .gap-9{gap:var(--s9)} .gap-10{gap:var(--s10)} .gap-11{gap:var(--s11)} .mb-0{margin-bottom:0} .cols-1{columns:1} .items-start{align-items:start} .items-center{align-items:center} /* ========================================================================== 23 READING MEASURE (added in V2.3) -------------------------------------------------------------------------- Measured on the built pages rather than assumed. The specification asks for 65-72 characters; three blocks were running long and one class of block was running short. - .smallprint measured 84 characters and .post-body .disclaimer 83. Both are small type, where an over-long line is worst, and both are now capped. - Mono strings (the closing contact row, the hero meta) ran to 85 characters. Mono is wider and harder to scan; they are capped too. - .lede inside a two-column section measured 56 characters, not because the rule was wrong but because the column was narrow. The argument columns are widened below so the site's main body of reasoning reads at its proper measure instead of in a gutter. ========================================================================== */ .smallprint{max-width:58ch} .post-body .disclaimer{max-width:60ch} /* The article column. Measured, not assumed: at the wrapper's full 692px the article ran at 78 characters a line - the longest measure on the site, in the one place a reader stays longest. 600px puts the body at 69, the opening paragraph at 66 and the lists at 65, all inside the specified band. The rule sits on .post-body rather than on .postwrap so the title, standfirst and contents list keep the wider column and the body is inset within it. */ .post-body{max-width:600px;margin-left:auto;margin-right:auto} .foot-tag{max-width:36ch} .herometa .m{max-width:46ch} .closerow .cl{max-width:40ch} .figure figcaption,.post-fig figcaption,.artcap{max-width:52ch} /* A two-column argument section: the prose column gets the room it needs to reach the specified measure, and the supporting column takes what is left. */ /* Measured, not guessed - and measured twice. The first pass counted lines with Range.getClientRects(), which returns one rect PER INLINE FRAGMENT: in paragraphs full of statutory pills that inflates the line count and makes the measure look far shorter than it is. Counting height / line-height instead put .lede at 73 characters, just over the specified band, so the column comes back a step. It now reads at 69. */ .withfig{grid-template-columns:minmax(0,1.20fr) minmax(0,.80fr)} .grid.g2.argue{grid-template-columns:minmax(0,1.20fr) minmax(0,.80fr)} @media(max-width:1024px){.grid.g2.argue{grid-template-columns:1fr}} .btn-block{width:100%} .measure-note{max-width:64ch} /* the direction cards on the review page carry a heading one step up from a card title, because each one is a whole proposition rather than a feature */ /* direction B's label runs to two lines, which dropped its title below the other two and broke the row a reviewer is meant to compare across */ .choose .card .eyebrow{min-height:2.5em} .choose .card h3{font-size:var(--t-h3)} /* ========================================================================== 24 HOW BIG A DRAWING IS ALLOWED TO BE (added in V2.3) -------------------------------------------------------------------------- Jaison: the mid-page imagery is disproportionate to the text around it; the hero drawings look right. He is describing a scale problem, and the drawings themselves say why. Every one of them sets its labels in mono at 9.5 user units, so the rendered size of that label is 9.5 x (rendered width / drawn width). Measured across the built site: hero drawings 520 units rendered at 562px 1.08x label 10.3px figure in a column 340 units rendered at 280px 0.82x label 7.8px article spot figure 340 units rendered at 550px 1.62x label 15.4px mid-page, full width 340 units rendered at 1012px 2.98x label 28.3px Body copy is 17px. So the hero drawings annotate the page and the full-width mid-page figures shout over it: a caption inside a diagram was rendering two thirds larger than the sentence it was explaining. Nothing was wrong with the drawings - they were being enlarged past the size they were drawn for. The cap is therefore expressed in the drawing's own units, stamped onto each SVG at build time as data-art-w, and set so that no drawing renders much above the hero's 1.08x. Narrower columns are untouched: these are maximums, and a figure already sitting at 280px stays there. ========================================================================== */ svg[data-art-w="340"]{max-width:400px;margin-left:auto;margin-right:auto} svg[data-art-w="520"]{max-width:600px;margin-left:auto;margin-right:auto} /* Capping the drawing alone was not enough: the plate behind it stayed at the full 1012px of the column, so a 400px drawing floated in the middle of a field of tint. The frame comes in with the drawing - :has() lets the plate be sized by what it contains - and keeps roughly 60px of ground on each side. */ .figure:has(svg[data-art-w="340"]), .post-fig:has(svg[data-art-w="340"]), .artbanner:has(svg[data-art-w="340"]){max-width:520px} .figure:has(svg[data-art-w="520"]), .post-fig:has(svg[data-art-w="520"]), .artbanner:has(svg[data-art-w="520"]){max-width:720px} .artbanner{margin-left:auto;margin-right:auto} /* a banner earns a little more presence than a spot figure inside the prose */ .artbanner svg[data-art-w="340"]{max-width:440px} /* A figure is a note beside an argument, so it is centred in its column with the caption under it rather than stretched to the column's full width. */ .figure,.post-fig{text-align:center;margin-left:auto;margin-right:auto} .figure figcaption,.post-fig figcaption,.artcap{margin-left:auto;margin-right:auto} /* ---- §25 A matched pair of drawings ------------------------------------- Two figures that make the same argument about two different kinds of work read as a pair only when they sit side by side: stacked in a side column they are just two similar-looking boxes, and they leave the prose column with a hole at its foot. Side by side, the captions work as the two headings of a comparison. The columns carry different amounts of prose, so the figures are pinned to the foot of each column - otherwise the pair sits at two different heights and the parallel is lost. margin-top:auto beats the .mt-* utility on specificity, which is deliberate: the utility sets the minimum gap for the stacked case below. */ .figpair>*{display:flex;flex-direction:column} .figpair figure{margin-top:auto} /* the plate is sized by its column here, not by the drawing, so the pair reads as one row; the drawing itself still keeps a cap, a little above the spot figure's 400px because it is now carrying the argument rather than noting it */ .figpair .figure:has(svg[data-art-w]){max-width:none;width:100%;margin-inline:0} .figpair .figure svg[data-art-w="340"]{max-width:440px} /* .g2 holds two columns down to 720px, but below about 900 a 340-unit drawing in half a column renders its 9.5-unit labels under 9px, which is the fault the scale rule exists to prevent. The pair breaks early instead, and the foot-pinning goes with it. */ @media(max-width:900px){.figpair{grid-template-columns:1fr} .figpair figure{margin-top:var(--s5)}} /* ==== §26 THE FINANCE-DESK PASS ========================================= A round of craft an accounting reader feels rather than notices: ledger texture on the bands that open and close every page, numerals that sit in columns, rails that keep their place beside long content, and two fixes surfaced by rendering every page (an unnumbered step sequence, selection and focus states left at browser defaults). */ /* 26a .seq-h numerals. The counter was incremented but never drawn, so a page that left the .n span empty got four empty rings (the homepage worked only because its markup carries literal digits). The counter now fills any empty marker, and literal digits still win where they exist. */ .seq-h .n:empty::before{content:counter(seqh)} /* 26b Ledger grid on the hero. Drawn on ::after so it stacks over the glow (::before) but under .wrap at z-index:1; masked so it is present behind the headline and gone before the band ends - a texture with a hard edge reads as wallpaper. Art-led heroes keep it: their plates carry their own ground. */ .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 55%,transparent 92%); mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 55%,transparent 92%)} /* 26c The same paper on the closing band, Surface-on-Ink, fading up from the foot so the headline keeps clear ground. One texture, both ends of the page. */ .closing::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(var(--grid-line-dark) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.3) 55%,transparent 95%); mask-image:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.3) 55%,transparent 95%)} /* 26d Tabular figures wherever a number can sit near another number. The spec asked for "tabular figures everywhere a fee appears"; with no fees published the same discipline now covers what remains - dates, form numbers, phone numbers, the facts rows, the footer NAP. Body copy keeps proportional figures, which read better in running text. */ .herometa,.facts,.f,.pill,.toc,.contact-side,.foot,.eyebrow,.seq-h .n,.seq>li:before{ font-variant-numeric:lining-nums tabular-nums} /* 26e A rail that keeps its place. On a two-column section where one side is a long read and the other a short rail (the NRI assessment form beside its what-happens-next notes, a service page's checklist beside its two cards), the rail used to end and leave several hundred pixels of dead column. It now travels with the reader. Only at grid widths - stacked columns must never stick - and offset enough to clear the fixed progress bar. */ @media(min-width:1025px){ .rail-stick{position:sticky;top:84px;align-self:start}} /* 26f Selection and focus, in the palette instead of the UA defaults. The focus ring rule mirrors the accent used on every other interactive state; :focus-visible keeps it off mouse clicks. */ ::selection{background:var(--accent-soft);color:var(--ink)} .closing ::selection,.dark ::selection{background:var(--accent-on-navy);color:var(--navy)} a:focus-visible,button:focus-visible,.btn:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} /* ==== §27 THE GRAPHIC-ARTIST PASS ======================================= The moves in this section are all borrowed from print - the drop capital, the italic phrase, the mounted photograph, light falling on a page - because print is where a reader's idea of a beautiful financial document comes from. Every one of them is set in the palette's existing voice; nothing here adds a new colour, only new places for the old ones to fall. */ /* 27a The italic phrase. Two-tone headlines gain a change of VOICE, not just of colour: the accent phrase turns to Newsreader's true italic at 400 - the only italic weight loaded, so nothing is synthesised - and the roman 500 around it keeps the authority. The pairing is the oldest trick in editorial design and the single largest change in how the site feels. */ .h-serif .accent,.sec-head .accent,.closing h2 .accent{ font-style:italic;font-weight:400;letter-spacing:0} /* 27b The drop capital. Articles and the trust-moment opening paragraph begin the way a printed annual report begins. Three lines tall, accent, with the brush face's own serif. :first-letter takes the punctuation with it if the paragraph opens with a quote, which is why the float is modest rather than five lines of initial. */ .post-body>p:first-of-type::first-letter, .opening>p:first-child::first-letter{ font-family:var(--serif);font-weight:500;font-style:normal; float:left;font-size:3.2em;line-height:.82; padding:.06em .14em .02em 0;color:var(--accent)} /* 27c The living underline. Text links carried a static hairline; it is now drawn in the accent from left to right on hover - the same gesture as the brush, at link scale. Two stacked gradients: the resting hairline beneath, the accent drawing over it. */ .textlink{border-bottom:0;padding-bottom:2px; background-image:linear-gradient(var(--accent-line),var(--accent-line)), linear-gradient(var(--accent),var(--accent)); background-size:100% 1px,0 1px; background-position:0 100%,0 100%;background-repeat:no-repeat; transition:background-size .28s cubic-bezier(.2,.8,.3,1),color .18s} .textlink:hover{background-size:100% 1px,100% 1px} @media(prefers-reduced-motion:reduce){.textlink{transition:none}} /* 27d Light on the tinted bands. A flat tint reads as a slab; the same tint with a just-perceptible fall of light from its top edge reads as paper. 120px of lift, then flat - a full-height gradient would make long bands visibly two-toned. */ .alt{background:linear-gradient(180deg,var(--bg-tint-lift),var(--bg-tint) 120px)} /* 27e The blush behind the drawings. Art-led heroes get a radial wash of warmth behind the plate so the line art sits IN the page rather than on it. Six percent accent - below the threshold where it would read as an orange shape rather than as temperature. */ .hero .hero-aside::before{content:"";position:absolute;inset:-10% -8%;z-index:0; pointer-events:none; background:radial-gradient(closest-side at 58% 42%,var(--accent-blush),transparent 76%)} .hero-art{position:relative;z-index:1} /* 27f The mounted photograph. Portraits get a mat and a fine accent-family frame - the treatment a firm gives the partner photographs in its own reception. The mat is Surface, so it holds on the tinted band too. */ .person .portrait{border:0; box-shadow:0 0 0 1px var(--line),0 0 0 7px var(--bg),0 0 0 8px var(--accent-line)} /* 27g The page ends on the ledger. The footer's last inches carry the same ruled paper the page opened on, rising to meet the copyright line - the document closes on its own stationery. */ footer{position:relative;overflow:hidden} footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(var(--grid-line-dark) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.8),transparent 55%); mask-image:linear-gradient(0deg,rgba(0,0,0,.8),transparent 55%)} footer>*{position:relative;z-index:1} /* ==== §28 THE PRESTIGE PASS ============================================= Depth, tactility and finish - the difference between a page that is laid out and a page that is MADE. Everything here is chrome: no content moves, no structure changes, and every colour still comes from palette.css. */ /* 28a The masthead turns to glass. It was a solid white bar riding over the page; it now lets the page be felt moving underneath - with a solid fallback where backdrop-filter does not exist, because an unreadable nav is a high price for a texture. */ @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .topnav{background:var(--bg-glass); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4)} } /* 28b Layered light on every raised surface. One mid-distance shadow reads as "flat design, lifted"; a tight contact shadow under a wide ambient one reads as a surface lit from above. Rest state whispers; hover states in §28e speak. */ .card,.svc,.engage,.figure,.person.lead .portrait{box-shadow:var(--shadow-xs)} .boundary{box-shadow:var(--shadow-luxe)} .drop{box-shadow:var(--shadow-luxe-lg)} /* 28c Luxury negative space. Sections breathe wider on large screens; the 82px rhythm holds on laptops and tightens on phones exactly as before. */ @media(min-width:1200px){.section{padding:100px 0}} /* 28d Icons stop sitting bare. The facts-row icons get the chip treatment the service cards already enjoy - a soft tinted squircle in the family colour rotation, with its matching hairline. Pure CSS on the svg itself, so no markup changes hands. */ .facts .fact .ic{width:2.75rem;height:2.75rem;padding:.62rem;border-radius:13px; background:var(--accent-soft);border:1px solid var(--accent-line); margin-bottom:16px;transition:transform .3s cubic-bezier(.2,.8,.3,1)} .facts .fact:nth-child(3n+2) .ic{background:var(--ok-soft);border-color:var(--ok-line)} .facts .fact:nth-child(3n+3) .ic{background:var(--bg-sunk);border-color:var(--line)} .facts .fact:hover .ic{transform:translateY(-2px) rotate(-2deg)} .boundary .k .ic{width:2.4rem;height:2.4rem;padding:.55rem;border-radius:11px; background:var(--accent-soft);border:1px solid var(--accent-line)} @media(min-width:940px){.wrap>.boundary .k .ic{width:2.6rem;height:2.6rem;margin:0 0 12px}} /* 28e Tactility. Interactive surfaces move toward the hand: cards lift on a long ease-out, buttons rise a pixel and cast their colour, and the whole set shares one timing so the page feels engineered rather than decorated. */ .svc,.engage,.choose .card,.qa,.post-card{transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s cubic-bezier(.2,.8,.3,1),border-color .3s} .svc:hover,.engage:hover,.choose .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-luxe-lg);border-color:var(--line)} .btn{transition:background .25s,transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .3s} .btn:hover{transform:translateY(-1px);box-shadow:var(--glow-btn)} .btn:active{transform:translateY(0) scale(.98)} .btn-light:hover{box-shadow:var(--glow-btn-light)} .menu a{position:relative;transition:color .2s} .menu a:not(.active):not(.btn)::after{content:"";position:absolute;left:0;bottom:-3px; height:2px;width:0;background:var(--accent);border-radius:2px; transition:width .25s cubic-bezier(.2,.8,.3,1)} .menu a:not(.active):not(.btn):hover::after{width:100%} /* 28f The razor ring. The primary call to action carries a hairline of the mark's own gradient, slowly circling - the one animated accent on the page at rest, so it owns the eye it draws. Browsers without @property get a static ring; reduced motion stops the circling everywhere. */ @property --ring-angle{syntax:"";initial-value:0deg;inherits:false} .cta-row .btn:first-child,.closing .btn{position:relative} .cta-row .btn:first-child::before,.closing .btn::before{content:"";position:absolute; inset:-3px;border-radius:calc(var(--radius) + 4px);padding:1.5px; background:conic-gradient(from var(--ring-angle), var(--accent-line),var(--mark-orange),var(--accent),var(--accent-line)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:.85;pointer-events:none; animation:ringspin 5s linear infinite} @keyframes ringspin{to{--ring-angle:360deg}} @media(prefers-reduced-motion:reduce){ .cta-row .btn:first-child::before,.closing .btn::before{animation:none}} /* ==== §29 V3.7 — THE FINTECH FINISH, PHASE 1 ============================ Layered lightness, shadow-defined surfaces, a three-tier text hierarchy, and unhurried motion. The brief arrived phrased in Tailwind shorthand; everything below is that brief translated into this stylesheet's own token system - see palette.css for the three tokens it added. */ /* 29a The canvas drops off pure white; surfaces stay on it. Cards, panels and figures keep --bg and now visibly pop against the ground instead of dissolving into it. The tinted band (--bg-tint) still reads one step deeper than the canvas, so the band rhythm survives intact. */ body{background:var(--canvas)} .figure,.post-fig{background:var(--bg)} /* 29b One shared depth rule for every card-like surface. The hard 1px edge goes; definition now comes from a resting ink-tinted ambient shadow, deepening on hover ONLY where the surface is genuinely clickable - a figure is a display panel, and a display panel that lifts is a false affordance. Borders stay in the markup at 1px transparent so nothing shifts by a pixel. */ .card,.svc,.engage,.choose .card,.figure,.post-fig{ border-color:transparent;box-shadow:var(--shadow-luxe)} .svc:hover,.engage:hover,.choose .card:hover,.grid .card:hover{ border-color:transparent;box-shadow:var(--shadow-luxe-lg)} /* the facts rows and boundary keep their rules - they are the signature editorial devices of this site, not cards, and they stay crisp */ /* 29c Three text tiers. Headings hold Ink; running copy moves to the new mid tier; labels were already Muted. All three clear AA with room - the palette file records the arithmetic. */ body{color:var(--ink-body)} .lede,.boundary p,.facts .fact dd,.post-body{color:var(--ink-body)} h1.h-serif{letter-spacing:-.02em} .sec-head{letter-spacing:-.016em} /* 29d Unhurried motion. Interactive state changes settle at ~300ms ease-out across the set; §28 already gave the clickable cards their 1-3px lift, and nothing static gains one here. */ .card,.textlink,.menu a,.drop a,.navphone{transition-duration:.3s;transition-timing-function:cubic-bezier(.2,.8,.3,1)} .facts .fact:hover .ic{transform:none} /* a fact is not clickable - §28's playful tilt was a false affordance and Phase 2 retires it */ /* ==== §30 V3.7 — PHASE 2: THE CHIP SYSTEM =============================== Icon inventory across the site found four systems living side by side: .icchip (42px, chipped, on the service cards), the facts-row chips §28 added (46px), the boundary rail chip (41px), and everything else bare - the hero meta strip, the FAQ question markers. One graduated scale now covers all of them, and every icon sits on a tinted ground with its matching hairline. */ :root{--chip-s:1.75rem;--chip-m:42px;--chip-l:2.75rem} /* 30a Small chips for inline markers: the hero meta strip and the FAQ question icons stop sitting bare on the canvas. */ .herometa .ic{width:var(--chip-s);height:var(--chip-s);padding:.34rem;border-radius:8px; background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)} .faq summary .ic{width:var(--chip-s);height:var(--chip-s);padding:.32rem;border-radius:8px; background:var(--accent-soft);border:1px solid var(--accent-line);margin-top:0; transition:transform .3s cubic-bezier(.2,.8,.3,1),background .3s} /* 30b Medium and large settle onto the scale; the icchip gains the hairline the other chips already carry, in its family colour. */ .icchip{width:var(--chip-m);height:var(--chip-m);border:1px solid var(--line)} .grid>*:nth-child(3n+2) .icchip{border-color:var(--accent-line)} .grid>*:nth-child(3n+3) .icchip{border-color:var(--ok-line)} .trio>*:nth-child(3n+2) .icchip{border-color:var(--accent-line)} .trio>*:nth-child(3n+3) .icchip{border-color:var(--ok-line)} .facts .fact .ic{width:var(--chip-l);height:var(--chip-l)} .boundary .k .ic{border-radius:11px} /* 30c Hover belongs to the container. Where the PARENT is genuinely clickable - a service card, an FAQ summary - its chip answers: a slight scale and a deepened tint. The icon is a passenger, never its own hover target. Static rows (facts, boundary, hero meta) get nothing. */ .svc .icchip{transition:background .3s ease-out,color .3s ease-out, transform .3s cubic-bezier(.2,.8,.3,1),border-color .3s} .svc:hover .icchip{transform:scale(1.08);border-color:transparent} .choose .card:hover .icchip{transform:scale(1.08)} .faq details summary{cursor:pointer} .faq details summary:hover .ic{transform:scale(1.08);background:var(--accent-line)} /* ==== §31 V3.7 — PHASE 3: THE ASYMMETRIC BOUNDARY SECTION =============== The homepage's flattest moment was "Three things we will not do": three identical cards in a row, read left to right and forgotten. It is now an asymmetric flow - the argument pinned on the left while the three declinations stack past it on the right, so the heading holds the reader's eye for the whole scroll of the list. Every sentence and every class of the copy is unchanged; all of this CSS is scoped to .asym-* and touches nothing else on the site. */ .asym{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px; position:relative} .asym-rail{position:relative} .asym-pin{position:sticky;top:110px} /* the rail's ambience: a soft radial wash behind the pinned copy, and a thin gradient timeline down its right edge. Decoration only - no pointer events, and scaled down rather than removed on small screens. */ .asym-rail::before{content:"";position:absolute;top:-60px;left:-80px;width:420px;height:420px; border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,var(--accent-blush),transparent 72%)} .asym-rail::after{content:"";position:absolute;top:6px;bottom:6px;right:-32px;width:2px; border-radius:2px;pointer-events:none; background:linear-gradient(180deg,var(--accent) 0%,var(--accent-line) 45%,transparent 100%)} .asym-pin>*{position:relative} /* matte-finish cards: translucent surface over the canvas, blurred backdrop, an edge one step more present than a plain card's - these sit beside a textured rail, and a wholly borderless card would lose its footing. The depth system is §28's, reused. */ .asym-items{display:grid;gap:22px} .asym-card{background:var(--surface-matte); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid var(--line);box-shadow:var(--shadow-luxe)} .asym-card h3{font-family:var(--serif);font-weight:600;font-size:1.16rem;margin-bottom:10px} @media(max-width:1024px){ .asym{grid-template-columns:1fr;gap:34px} .asym-pin{position:static} .asym-rail::after{display:none} .asym-rail::before{width:260px;height:260px;left:-40px;top:-30px} } /* ==== §32 V3.7 — PHASE 4: HEADER, TRUST ROW, FOCUS ====================== The three conversion touchpoints. The brief's Tailwind shorthand (backdrop-blur-md bg-white/70, grayscale opacity-60 hover:grayscale-0, focus:ring-4) is translated below into native CSS on this site's tokens. */ /* 32a The masthead was made glass in §28a; the nav's call-to-action now carries a resting shadow tinted with the brand accent that DEEPENS on hover - the shadow moves, not just the colour. */ .menu a.btn{box-shadow:var(--shadow-navbtn); transition:background .3s ease-out,box-shadow .3s ease-out, transform .3s cubic-bezier(.2,.8,.3,1)} .menu a.btn:hover{box-shadow:var(--shadow-navbtn-hover)} /* 32b The trust row goes monochrome at rest and takes its colour back on hover. NOTE, per the ground rules: the wall itself stays behind its consent gate (.held, dashed, flagged) until each client's written permission is on file - the treatment below is the COMPONENT, wired and waiting, not a claim. No names were invented; the placeholders remain the literal dashed boxes. */ .client img{filter:grayscale(1);opacity:.6; transition:filter .3s ease-out,opacity .3s ease-out} .client:hover img{filter:grayscale(0);opacity:1} @media(prefers-reduced-motion:reduce){.client img{transition:none}} /* 32c Focused fields glow in the brand's own colour instead of the UA default ring: the border takes the accent and a soft 4px ambient ring sits under it. The brief's "brand blue" is translated to the brand ORANGE - this palette has no blue, and none was invented. The ring token lives in palette.css. */ input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 4px var(--focus-ring)} input,select,textarea{transition:border-color .3s ease-out,box-shadow .3s ease-out} .consent input:focus{box-shadow:0 0 0 4px var(--focus-ring)} /* ==== §33 V3.7 — 29 AUG REVIEW ========================================== The scroll cue. Vivek asked whether the hero's one meta line was enough of an invitation below the fold; it now gets a proper one - a quiet mono summary of what is down there, with the arrow turned down and breathing. It is a link, so it earns its motion. */ .scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%); display:inline-flex;align-items:center;gap:10px;z-index:2; font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);padding:8px 14px;border-radius:999px; transition:color .3s ease-out,background .3s ease-out} .scrollcue .ic{width:.95rem;height:.95rem;transform:rotate(90deg);color:var(--accent)} .scrollcue:hover{color:var(--ink);background:var(--accent-soft)} @media(prefers-reduced-motion:no-preference){ .scrollcue .ic{animation:cuebob 2.2s ease-in-out infinite}} @keyframes cuebob{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(5px)}} @media(max-width:1024px){.scrollcue{display:none}} /* four published quotes sit as a balanced two-by-two, not three-and-an-orphan */ .quotes:has(> .quote:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:720px){.quotes:has(> .quote:nth-child(4):last-child){grid-template-columns:1fr}} /* ==== §34 V3.8 — 31 AUG REVIEW ========================================== The cookie-choice bar. One question, asked once, at the foot of the screen - never a modal wall. Declining is styled as an equal citizen of accepting, because the privacy page promises exactly that. */ .cconsent{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:120; display:flex;align-items:center;gap:22px;flex-wrap:wrap; max-width:min(720px,calc(100vw - 32px)); background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-luxe-lg);padding:16px 20px} .cconsent p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-body);flex:1;min-width:260px} .cconsent p a{color:var(--accent);border-bottom:1px solid var(--accent-line)} .cconsent .cc-actions{display:flex;gap:10px;align-items:center} .cconsent .btn{padding:9px 18px;font-size:.9rem} .cconsent .cc-no{background:none;border:1px solid var(--line);border-radius:var(--radius); padding:9px 16px;font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--muted); cursor:pointer;transition:color .3s ease-out,border-color .3s ease-out} .cconsent .cc-no:hover{color:var(--ink);border-color:var(--line-strong)} @media(max-width:600px){.cconsent{bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-width:100vw;left:0;transform:none;width:100%}} @media print{.cconsent{display:none!important}} /* a button that behaves as a text link - the cookie-choice reset */ .linkbtn{background:none;border:0;padding:0 0 2px;cursor:pointer;font:inherit} /* ==== §35 V5.0 — THE LEDGER FOLIO PASS =================================== The reimagining. Every earlier pass decorated the existing page; this one changes what the page IS. The conceit is carried to its end: the site is a bound ledger. The paper is ruled (the tinted bands now carry the faint ruling the hero and closing band already had); the page has a MARGIN RULE (the double red margin line of a ruled ledger, running the full height of the viewport on wide screens); every section is a FOLIO (its number set huge and ghosted behind the section head); and every section head closes with the TOTALS RULE — the accountant's short double rule, the one mark this profession makes that no other does. Type steps up to a display tier that Newsreader's optical axis was waiting for. No copy changes. No new colours — every value here is a palette token. */ /* ---- 35a display typography -------------------------------------------- The hero headline moves to the display tier and the lede under it moves to the serif, so the opening of every page reads as a set piece rather than a heading with a paragraph. Newsreader's opsz axis gives the large cut its contrast for free. Line-height drops as size rises; tracking tightens. */ h1.h-serif{font-size:var(--t-display);line-height:1.02;letter-spacing:-.024em;max-width:14ch} h1.h-serif.wide{max-width:19ch} .hero .sub{font-family:var(--serif);font-size:clamp(1.14rem,2.4vw,1.36rem);line-height:1.5; max-width:54ch} .sec-head{font-size:clamp(1.7rem,4vw,2.55rem);line-height:1.08;letter-spacing:-.018em} .standfirst{font-size:clamp(1.18rem,2.5vw,1.42rem)} /* ---- 35b the margin rule ------------------------------------------------ A ruled ledger carries a double margin line at the left of the sheet. Here it is the accent at 28% and 10%, fixed, running the full viewport height, sitting 40px left of the text column. It crosses every band, light and dark, the way a printed rule crosses whatever is entered on the sheet — that continuity is the point. Below 1280px there is no spare margin and the rule would crowd the text, so it simply is not drawn. pointer-events none; z-index 1 keeps it under the glass masthead and every card shadow. */ @media(min-width:1280px){ body::before{content:"";position:fixed;top:0;bottom:0;z-index:1;pointer-events:none; left:calc((100vw - var(--maxw))/2 - 8px);width:var(--rule-gap); border-left:1px solid var(--margin-rule);border-right:1px solid var(--margin-rule-2)} } /* ---- 35c folio numerals ------------------------------------------------- §21f's numbered chip becomes the number itself, set at folio scale in the serif and ghosted behind the section opening. It is ground, not content: the ghost token is documented in palette.css as deliberately sub-contrast, and the real, readable section number stays in the eyebrow's mono label (restored there via a counter-free ::after on the ghost's own text). The eyebrow and head sit above it on their own stacking context. */ .eyebrow.num{position:relative;z-index:0;overflow:visible;display:flex;align-items:center;gap:12px} .eyebrow.num .n{position:absolute;z-index:-1;left:-6px;top:-.36em;display:block; width:auto;height:auto;background:none;border:0;border-radius:0; font-family:var(--serif);font-weight:500;font-size:clamp(4.2rem,8.5vw,6.6rem);line-height:1; letter-spacing:-.02em;color:var(--ghost);font-variant-numeric:tabular-nums;pointer-events:none} .alt .eyebrow.num .n,.dark .eyebrow.num .n{color:var(--ghost)} .dark .eyebrow.num .n{color:var(--ghost-dark)} .eyebrow.num+.sec-head{position:relative;z-index:1} /* the eyebrow keeps a readable marker: a short rule where the chip was */ .eyebrow.num::before{content:"";width:34px;height:1px;background:var(--accent);flex:none} /* ---- 35d the totals rule ------------------------------------------------ The one mark of this profession: a single rule above a figure, a double rule below it, and the matter is closed. Every section head now closes with the double rule — 72px, accent — and every boundary block closes its argument the same way. It replaces nothing; it ends things. */ .sec-head{padding-bottom:16px;position:relative} .sec-head::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:var(--rule-gap); border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)} .closing .sec-head::after,.closing h2::after{display:none} .boundary{border-bottom:double 4px var(--line-strong)} /* ---- 35e the hero as a set piece ---------------------------------------- The art column stops floating in white space: it stands on a PLATE — a ruled, tinted sheet that bleeds off the right-hand edge of the viewport, top and bottom edges drawn, the drawing and its caption mounted on it. The copy column gains air; the grid centres; the note row under the CTAs becomes a ledger entry — ruled above and below, mono, tabular. */ .hero{padding:102px 0 88px} .hero:has(.hero-aside) .wrap{grid-template-columns:1.14fr .86fr;gap:64px;align-items:center} .hero-aside::before{content:"";position:absolute;z-index:-1;inset:-40px 0 -40px 10%; right:calc(-34px - max(0px,(100vw - var(--maxw))/2)); background: repeating-linear-gradient(180deg,transparent 0 27px,var(--grid-line) 27px 28px), linear-gradient(180deg,var(--bg-tint-lift),var(--bg-tint)); border-block:1px solid var(--line)} .hero-aside{z-index:0;padding:14px 0 14px 18%} .hero-aside .artcap{position:relative} .hero .eyebrow::before{content:"";display:inline-block;width:34px;height:1px; background:var(--accent);margin-right:12px;vertical-align:.3em} .hero-note{border-block:1px solid var(--line);padding:12px 2px;margin-top:30px;gap:12px; font-variant-numeric:tabular-nums} /* ---- 35f ruled paper everywhere ----------------------------------------- The faint ledger ruling the hero and closing band carry extends to every tinted band, so the texture reads as the site's paper rather than one band's decoration. Same token, same 28px pitch, same sub-contrast weight. */ .alt{background-image: repeating-linear-gradient(180deg,transparent 0 27px,var(--grid-line) 27px 28px), linear-gradient(180deg,var(--bg-tint-lift),var(--bg-tint) 120px)} /* ---- 35g filed cards ----------------------------------------------------- A card is a document in a file. Each service card and price card carries a FILING TAB: a short accent rule across the top-left edge that TRAVELS the full width on hover (one of the five verbs) while the card lifts on the luxe shadow. The old hover — border flips to accent — read as a state change; this reads as the document being drawn out of the file. */ .svc,.pricecard{position:relative;border-top:2px solid var(--line-strong)} .svc::before,.pricecard::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:2px; background:var(--accent);transition:width .5s cubic-bezier(.22,.61,.36,1)} .svc:hover::before,.pricecard:hover::before{width:100%} .svc:hover{border-color:var(--line);border-top-color:var(--line-strong); box-shadow:var(--shadow-luxe-lg);transform:translateY(-4px)} @media (prefers-reduced-motion:reduce){.svc:hover{transform:none}} /* ---- 35h the nav knows where you are ------------------------------------ The active page is marked with the totals rule in miniature — the same double rule, 100% of the link, 2px gap — instead of a colour change. */ .menu a.active{position:relative} @media(min-width:1025px){ .menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px; height:3px;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)} } /* ---- 35i the closing band, at full voice --------------------------------- One statement on the dark plate was the brief; at display scale it becomes one. The band deepens, the headline takes the display tier, and the band opens under a double rule — the page's last totals rule, drawn in the dark band's own hairline tone so the device closes the sheet, not shouts. */ .closing{padding:120px 0;border-top:double 4px var(--line-strong)} .closing h2{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.06;letter-spacing:-.02em; max-width:20ch;margin-left:auto;margin-right:auto} /* ---- 35j motion, settled -------------------------------------------------- The reveal keeps its distance but lands on the SETTLE curve — fast out of the gate, long quiet arrival — and grid children arrive in file order, a beat apart. Reduced-motion users get everything §18's guard already gives them: no movement at all. */ html.js .reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)} html.js .grid.reveal.in>*{animation:none} html.js .grid.reveal>*{opacity:0;transform:translateY(12px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} html.js .grid.reveal.in>*{opacity:1;transform:none} html.js .grid.reveal>*:nth-child(2){transition-delay:.08s} html.js .grid.reveal>*:nth-child(3){transition-delay:.16s} html.js .grid.reveal>*:nth-child(4){transition-delay:.24s} html.js .grid.reveal>*:nth-child(5){transition-delay:.32s} html.js .grid.reveal>*:nth-child(6){transition-delay:.4s} @media (prefers-reduced-motion:reduce){ html.js .grid.reveal>*{opacity:1;transform:none;transition:none} } /* ---- 35k responsive ------------------------------------------------------ */ @media(max-width:1024px){ .hero{padding:72px 0 60px} .hero-aside{padding:14px 0} .hero-aside::before{inset:-26px -26px;right:-26px;left:-26px} .eyebrow.num .n{font-size:clamp(3.4rem,10vw,4.6rem);top:-.3em} } @media(max-width:720px){ h1.h-serif{letter-spacing:-.018em} .hero-note{max-width:none} } /* 35c addendum: §21f's alt-band variant gave the old chip a Surface fill; the folio ghost must not inherit it, or it arrives in a white box. */ .alt .eyebrow.num .n,.eyebrow.num .n{background:none;border:0} /* ==== §36 V5.1 — THE STEPS INSIDE A LIST ITEM =========================== The GST page's returns item now carries the four steps of a monthly cycle. They are set as an indented sub-list on a ledger hairline — the way a ledger indents the lines that make up a total — not as a second tier of ticks (a tick says "included"; these say "how"). No numerals: the site's service lists never number, and the order reads from the words. Lead-ins are Ink at 600 so the four steps can be scanned without reading them. */ .dolist .substeps{list-style:none;margin:12px 0 4px;padding:2px 0 0 18px; border-left:1px solid var(--line)} .dolist .substeps li{padding-left:0;margin-bottom:12px;font-size:.93rem;line-height:1.56; color:var(--ink-body)} .dolist .substeps li:last-child{margin-bottom:0} .dolist .substeps li:before{content:"";position:absolute;left:-22px;top:.72em;width:7px;height:1px; border-radius:0;background:var(--accent)} .dolist .substeps strong{color:var(--ink);font-weight:600} /* ==== §37 V5.4 — ALTERNATING BANDS YOU CAN SEE =========================== The alternation was always there; the colours made it invisible. Plain sections now sit on Surface white, banded sections on --band (cool grey-blue from V5.5; warm paper in V5.4) with the ledger ruling drawn in the accent at 5%. The fills that mask a rule behind a numbered circle follow the band, or they would show as grey discs on cream. The hero, the closing band and the footer are unchanged. */ body{background:var(--bg)} .alt{background: repeating-linear-gradient(180deg,transparent 0 27px,var(--band-rule) 27px 28px), var(--band)} .alt .seq>li:before,.alt .seq-h .n{background:var(--band)} .section.alt{border-top:1px solid var(--band-edge);border-bottom:1px solid var(--band-edge)} .alt .eyebrow.num .n{color:var(--ghost-band)} /* ==== §38 V5.9 — NAME CARDS =============================================== The senior team goes live as names and roles only (Jaison, 30 Oct) until bios, photographs and consents arrive. No empty portrait circle - a placeholder on a live page reads as something missing. A ruled top edge, in the facts-row manner, gives each name a card without inventing content. */ .person.namecard{padding-top:16px;border-top:2px solid var(--line)} .person.namecard h3{margin-top:0}