/* =========================================================================
TOOOLS.design · T3 Home Rebuild · page stylesheet
Built 2026-08-21 for /t3-home-rebuild. Loaded as a site asset:
Order: dot-glow (carried from T2) · Lenis · T3 chrome · construction
guides · Webflow reconciliation.
Do not edit in the Designer, edit the source and re-upload.
========================================================================= */
/* ---- carried over from T2 Home Rebuild --------------------------------- */
.t2-hero_actuality-dot-inner{animation:toools-dot-glow 2s ease-out infinite}
@keyframes toools-dot-glow{0%{box-shadow:0 0 0 0 rgba(53,208,180,.55)}70%{box-shadow:0 0 0 10px rgba(53,208,180,0)}100%{box-shadow:0 0 0 0 rgba(53,208,180,0)}}
@media (prefers-reduced-motion: reduce){.t2-hero_actuality-dot-inner{animation:none}}
html.lenis,
html.lenis body {
height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.lenis.lenis-autoToggle {
transition-property: overflow;
transition-duration: 1ms;
transition-behavior: allow-discrete;
}
/* Lenis parks the root at `overflow:clip` while stopped, which takes the
scrollbar TRACK away and shifts the page sideways: exactly the jump the
body-park lock exists to avoid. The park already blocks scrolling on its
own, so keep the track. The selector has to carry the same `:not()` Lenis
uses, otherwise it loses on specificity (0,3,0 beats 0,2,1). */
html.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:visible;overflow-y:scroll}
.t3-panel_bg,.t3-footer_bg{image-rendering:pixelated}
/* =========================================================================
TOOOLS.design · T3 chrome
Dark page, flush dark sidebar, inset rounded content panel, sticky window
frame, new footer. The t2 content layer above is untouched.
Every value below is read out of the Figma file (section "toools - t3",
frame width 1728) via get_design_context, not eyeballed:
nav 200:25225 / collapsed 200:25769
footer 211:26525
content panel 164:21532
Type is Inter Regular 400 throughout the chrome; the only exception is the
footer tagline, which is KMR Melange Grotesk Light.
========================================================================= */
:root{
--t3-page:#0a0523; /* Berry-Black-60 — page, sidebar and footer bed */
--t3-panel:#f3f4fd; /* Berry-BG — panel, and the ink colour on dark */
--t3-inset:8px; /* dark frame around the content panel */
--t3-radius:16px; /* panel corner radius (Figma: rounded-[16px]) */
--t3-nav-w:260px;
--t3-nav-w-min:76px;
--t3-nav-pad:16px;
--t3-topbar-h:64px; /* mobile topbar, fixed like the desktop header */
--t3-foot-pad:32px; /* one gutter for logo, columns, rule and bottom bar */
--t3-rule:#2f2b46; /* hairline above the sidebar footer */
--t3-rule-min:#7f7d90; /* the 20px rule that replaces a caption */
--t3-ease:cubic-bezier(.165,.84,.44,1); /* ease-out quart */
/* One knob for the whole sidebar collapse: grid track, header padding, logo,
captions, rules, labels and counts all scale off it. Multiply it to watch
the motion frame by frame. */
--t3-dur:.5s;
}
/* ---------- base (scoped; the live stylesheet still owns the content) ---------- */
/* `overflow-y:scroll` keeps the scrollbar TRACK on the page at all times. The
scroll lock below then parks the body instead of hiding the overflow, so
while the mobile menu is open the track is still there and only the thumb is
gone. Same as apple.com, and it means the layout never loses the gutter and
never twitches sideways. On overlay-scrollbar systems there is no track to
keep and nothing changes. */
html{background:var(--t3-page);overflow-y:scroll}
/* The lock: the body is pinned at its current offset rather than clipped, so
the document has nothing left to scroll (hence no thumb) while the reading
position is held in `top` and handed back on release. Also what makes the
lock stick on iOS, where `overflow:hidden` on body is ignored. */
body.t3-locked{position:fixed;left:0;right:0;overflow:hidden}
/* the topbar is sticky, and a parked body gives it nothing to stick to: it
would sit at its natural offset, far above the viewport. While locked it
pins itself instead. */
body.t3-locked .t3-topbar{position:fixed;top:0;left:0;right:0}
body{background:var(--t3-page);margin:0}
.t3-nav,.t3-nav *,.t3-footer,.t3-footer *,.t3-topbar,.t3-topbar *{box-sizing:border-box}
.t3-nav a,.t3-footer a,.t3-topbar a{text-decoration:none}
/* The live Webflow stylesheet styles bare elements (a, p, div, sup). A tag rule
beats an inherited value, so family and weight are pinned here rather than
left to inherit from the component root. Everything in the chrome is Inter
Regular; the footer tagline re-declares itself below. */
.t3-nav,.t3-nav *,.t3-footer,.t3-footer *,.t3-topbar,.t3-topbar *{
font-family:Inter,Arial,sans-serif;font-weight:400;font-style:normal;letter-spacing:normal;
}
.t3-nav img,.t3-footer img,.t3-topbar img{display:block;max-width:100%;margin:0;border-radius:0}
.t3-nav button,.t3-topbar button{font:inherit;border:0;background:none;cursor:pointer;padding:0}
/* deliberately NOT setting colour here: a scoped element reset like
`.t3-topbar button` (0,1,1) outranks the component class `.t3-topbar_btn`
(0,1,0), which is how the burger icon ended up dark on dark. Colour is
owned by the components below. */
.t3-nav nav{margin:0;padding:0}
.t3-footer p{margin:0}
/* =========================================================================
Scrollbars
The page keeps its native scrollbar: it is a real control with OS settings,
drag, keyboard and High Contrast behind it, and nothing here needs its width
back. Only the SIDEBAR list replaces its own, because there a 6px bar ate
6px off a 44px rail and knocked the icons off centre. See `.t3-nav_thumb`.
========================================================================= */
/* =========================================================================
Page + shell
========================================================================= */
/* position/background → native .t3-page */
.t3-page{overflow-x:clip}
/* grid + columns → native .t3-shell (base + medium) */
.t3-shell{
transition:grid-template-columns var(--t3-dur) var(--t3-ease);
}
body.t3-collapsed .t3-shell{grid-template-columns:var(--t3-nav-w-min) minmax(0,1fr)}
/* =========================================================================
Sidebar — 260px, flush left, full height, lifts away with the panel
Figma: bg #0a0523, header 64px, logo 153x38 at x 28 / y 13, scroll column at
x 16 / y 64 / w 228, groups gap 20, caption slot 13 + gap 8, rows 36px with
12px side padding, footer block 64px above a #2f2b46 hairline.
========================================================================= */
/* .t3-nav statics → native. .t3-nav_inner layout/colors → native combo
.t2-nav_card.t3-nav_inner; only the type pin stays here. */
.t3-nav_inner{
font-family:Inter,Arial,sans-serif;
font-weight:400;
}
/* header: layout → native combo; only the collapse transition stays */
.t3-nav_header{
transition:padding var(--t3-dur) var(--t3-ease);
}
/* Collapsing is a real transform on one inlined SVG, not a cross-fade between
two images. The wordmark is split into `.t3-lg-shift` (everything) and
`.t3-lg-word` (the two letter paths). Collapsing slides and scales the whole
lockup so the three rings land where the design's 48x34 mark sits, while the
letters dissolve. Measured off the artwork: ring cores x 13.7 → 59.3,
y 10.2 → 27.7; the design's collapsed rings are 43.1 wide at x 2.4, hence
scale .9452 about the ring's left edge and a −11.3px slide.
Re-measure if the SVG is re-exported. */
.t3-nav_logo{
/* box → native combo .branding.t3-nav_logo */
transition:width var(--t3-dur) var(--t3-ease),opacity calc(var(--t3-dur)*.6) var(--t3-ease);
}
.t3-nav_logo_svg{display:block;width:153px;height:38px;flex:none}
.t3-lg-shift{
transform-box:view-box;transform-origin:13.7px 18.95px;
transition:transform var(--t3-dur) var(--t3-ease);
}
.t3-lg-word{transition:opacity calc(var(--t3-dur)*.55) var(--t3-ease)}
body.t3-collapsed .t3-nav_logo{width:48px}
body.t3-collapsed .t3-lg-shift{transform:translateX(-11.3px) scale(.9452)}
body.t3-collapsed .t3-lg-word{opacity:0}
.t3-nav_toggle{
/* box/colors/hover bg → native .t3-nav_toggle */
transition:opacity .2s var(--t3-ease),background .16s;
}
.t3-nav_toggle svg{width:20px;height:20px;display:block;opacity:.66}
.t3-nav_toggle:hover svg{opacity:1}
.t3-nav:hover .t3-nav_toggle,.t3-nav_toggle:focus-visible{opacity:1}
/* Clicking it takes it away instantly, no transition, and keeps it away for
the whole move, so hovering mid-transition cannot flash the other icon in.
The glyph itself only swaps when the shell's transitionend fires
(`t3-ico-collapsed`), so what disappears is always the icon that was
clicked. Coming back is the opposite: once the class is dropped the button
is back on its normal .2s fade, so the other icon eases in on the next
hover, after everything has settled. */
body.t3-animating .t3-nav .t3-nav_toggle{
opacity:0;pointer-events:none;transition:none;
}
.t3-nav_toggle .t3-ico-expand{display:none}
body.t3-ico-collapsed .t3-nav_toggle .t3-ico-collapse{display:none}
body.t3-ico-collapsed .t3-nav_toggle .t3-ico-expand{display:block}
/* scroll area --------------------------------------------------------- */
.t3-nav_scroll{
/* flex/overflow-y/layout/padding → native combo .t2-nav_scroll.t3-nav_scroll */
overflow-x:hidden;overscroll-behavior:contain;
/* The native scrollbar is hidden because it is a LAYOUT box: a 6px classic
scrollbar ate 6px off the content width, which pulled the 44px rail rows
down to 38 and knocked the icons off centre. The indicator below is drawn
on top instead, so the rows keep their full width at every size. */
scrollbar-width:none;-ms-overflow-style:none;
}
.t3-nav_scroll::-webkit-scrollbar{width:0;height:0;display:none}
/* the overlay indicator: absolute inside the sticky column, so it costs no
width. Geometry comes from the scroll metrics in the script. */
.t3-nav_thumb{
/* box → native .t3-nav_thumb */
pointer-events:auto;
transition:opacity .25s var(--t3-ease),background .16s;
}
.t3-nav_thumb:hover,.t3-nav.is-dragging .t3-nav_thumb{background:rgba(243,244,253,.62)}
.t3-nav.is-dragging .t3-nav_thumb{opacity:1}
@media(forced-colors:active){
.t3-nav_scroll{scrollbar-width:auto}
.t3-nav_scroll::-webkit-scrollbar{width:auto;display:block}
.t3-nav_thumb{display:none}
}
.t3-nav:hover .t3-nav_thumb,
.t3-nav.is-scrolling .t3-nav_thumb{opacity:1}
.t3-nav:not(.is-scrollable):not(.is-scrolled) .t3-nav_thumb{opacity:0}
/* group/items/label statics → native (.t3-nav_group, both .t3-nav_items
combos, .t3-nav_group-label). The caption span carries the native class
.t3-nav_group-text; only the collapse motion stays here. */
.t3-nav_group-label>span{
/* tracking stays here: the .t3-nav * letter-spacing reset (same specificity,
later sheet) would beat the native class */
letter-spacing:.36px;
transform:translateY(-50%) scale(1);transform-origin:0 50%;
transition:opacity calc(var(--t3-dur)*.7) var(--t3-ease),
transform var(--t3-dur) var(--t3-ease);
}
/* The rule takes over from the caption on the same left edge and makes the
same move: it starts out at the caption's own width (--t3-cap-w, measured
per group by the script), invisible, and shrinks into its 20px while fading
in. Collapsed, x 12 of the slot is x 28 of the sidebar, which is where the
design puts it. */
.t3-nav_group-label::after{
content:"";position:absolute;left:12px;top:6px;
width:20px;height:1px;background:var(--t3-rule-min);
opacity:0;transform:scaleX(var(--t3-cap-w,2.6));transform-origin:0 50%;
transition:opacity calc(var(--t3-dur)*.7) var(--t3-ease),
transform var(--t3-dur) var(--t3-ease);
}
/* Width is locked to the rule: the caption scales to exactly 20px wide
(1 / --t3-cap-w), which is the rule's width, so at every frame of the
transition the two are the same width and read as one object. The vertical
scale goes further, so the text flattens towards the rule's 1px instead of
just getting smaller. */
body.t3-collapsed .t3-nav_group-label>span{
opacity:0;
transform:translateY(-50%) scale(calc(1 / var(--t3-cap-w,2.6)),.18);
}
body.t3-collapsed .t3-nav_group-label::after{opacity:1;transform:scaleX(1)}
/* rows ---------------------------------------------------------------- */
.t3-nav_link{
/* row box/type/hover bg → native combo .t2-nav_link.t3-nav_link */
transition:background .16s,box-shadow .16s;
}
/* scoped to .t3-nav so it outranks the native combo's :hover (0,3,0) the same
way the old rule outranked .t3-nav_link:hover: an active row keeps its .16
fill while hovered */
.t3-nav .t3-nav_link.is-active{background:rgba(243,244,253,.16);box-shadow:0 8px 16px rgba(21,16,45,.03)}
.t3-nav_icon{
/* box → native combo .t2-nav_icon.t3-nav_icon */
transition:opacity .16s;
}
.t3-nav_icon svg{width:20px;height:20px;display:block;color:var(--t3-panel)}
.t3-nav_link:hover .t3-nav_icon,.t3-nav_link.is-active .t3-nav_icon{opacity:.8}
.t3-nav_label{
/* box/type → native .t3-nav_label */
text-overflow:ellipsis;
transition:opacity calc(var(--t3-dur)*.5) var(--t3-ease);
}
.t3-nav_count{
/* box/type/gradient → native .t3-nav_count */
font-variant-numeric:tabular-nums;
transition:opacity calc(var(--t3-dur)*.5) var(--t3-ease);
}
/* list edges ----------------------------------------------------------
One gradient, used at both ends and mirrored: 80px over the full sidebar
width (the Figma rectangle 217:29759 is 120, Pascal took it to 80). The
bottom one replaces the old pinned "Suggest a tool" block and shows while
there is more list below the fold; the top one replaces the hairline under
the header and shows once the list is scrolled. Neither sits over a list
that already fits. */
.t3-nav_fade{
/* box/opacity → native; is-top/is-bottom gradients → native combos */
pointer-events:none;
transition:opacity .22s var(--t3-ease);
}
.t3-nav.is-scrolled .t3-nav_fade.is-top{opacity:1}
.t3-nav.is-scrollable .t3-nav_fade.is-bottom{opacity:1}
/* collapsed rail (76px) ------------------------------------------------
The scroll column keeps its 16px padding, so the rows become 44px wide on
their own and the icon stays centred at 38px — exactly the Figma rail. */
/* The logo must not jump. `justify-content` is not animatable, so switching it
to `center` on collapse snapped the 153px box to the middle of the 228px
content area first (a 31px hop to the RIGHT) and only then slid it left.
Instead the header keeps its alignment and only its padding animates:
28 → 14 on the left, 16 → 14 on the right. The logo box therefore travels a
flat 14px left while it narrows 153 → 48, and the 48px box lands exactly in
the 76px rail. */
body.t3-collapsed .t3-nav_header{padding:0 14px;position:relative}
body.t3-collapsed .t3-nav_toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
body.t3-collapsed .t3-nav:hover .t3-nav_logo{opacity:0}
body.t3-collapsed .t3-nav_label,
body.t3-collapsed .t3-nav_count{opacity:0}
/* =========================================================================
Content panel + the sticky window frame
========================================================================= */
/* .t3-main-col statics → native */
/* click-through sticky overlay: paints the dark gap on top / right / bottom
with the panel's corner radius cut out of it, and releases exactly when the
panel's bottom edge reaches the bottom of the viewport. */
/* sticky box → native .t3-frame */
.t3-frame{pointer-events:none}
.t3-frame::before{
content:"";position:absolute;
inset:var(--t3-inset) var(--t3-inset) var(--t3-inset) 0;
border-radius:var(--t3-radius);
box-shadow:0 0 0 80px var(--t3-page);
}
.t3-frame.is-bot{display:none} /* mobile only, see the breakpoint below */
.t3-panel{
/* position/margins/radius/background → native .t3-panel (margins literal
8px there; the ≤767 6px inset is a native small-breakpoint override) */
overflow:clip;
isolation:isolate;
display:flow-root; /* overflow:clip does not open a BFC, so pin it here */
}
/* dithered gradient bands, at the Figma placement sizes (they replace the two
WebGL shader panels). Both fade to exactly #f3f4fd at their inner edge. */
/* position/centering → native .t3-panel_bg; top/bottom + images → native
is-top/is-bottom combos (image swap happens in the Designer now) */
.t3-panel_bg{pointer-events:none;background-repeat:no-repeat;background-size:100% 100%}
.t3-panel_bg.is-top{width:max(1920px,100%);aspect-ratio:1920/864}
.t3-panel_bg.is-bottom{width:max(2048px,100%);aspect-ratio:2048/432}
/* the cursor logo band keeps its t2 contract, only re-anchored to the panel */
/* box → native .t3-pop */
.t3-pop{pointer-events:none}
/* the t2 content column rides above both */
.t3-panel .t2-main{position:relative;z-index:2}
/* =========================================================================
Footer
Figma: bg image 2152x716 bottom-centred, wordmark 1672x730 at x 29 / top -43,
tagline KMR Light 24/1.35 #8ea2d7 @80% at x 312 / y 509, three link groups at
x 18 / 870 / 1421 (w 834 / 551 / 275.5), rows 40px with 16px side padding,
bottom bar py 24 with a 32px gutter. No hairline anywhere.
========================================================================= */
/* shell/colors → native .t3-footer; only the type pin stays */
.t3-footer{
font-family:Inter,Arial,sans-serif;font-weight:400;
}
/* positioning/image → native .t3-footer_bg; sizing math stays */
.t3-footer_bg{
width:max(2152px,100%);aspect-ratio:2152/716;pointer-events:none;
background-position:center bottom;background-size:100% 100%;background-repeat:no-repeat;
}
.t3-footer_in{
display:flow-root; /* keeps the wordmark's -2.5% margin inside the box */
container-type:inline-size} /* lets the tagline scale with the wordmark */
/* meta row box → native .t3-footer_meta; link type/colors → native
.t3-webflow / .t3-uicons */
.t3-footer_meta a{transition:color .16s}
.t3-footer_meta a:hover{color:#fff}
.t3-footer_meta svg{display:block}
.t3-footer_meta .t3-webflow svg{width:81px;height:14.25px}
.t3-footer_meta .t3-uicons svg{width:70.5px;height:25.8px}
/* the big outlined wordmark. All offsets are % of the footer width so the
whole lockup scales with the artwork, as it does in the design. */
/* box → native .t3-footer_brand */
.t3-footer_brand{
container-type:inline-size} /* the tagline sizes off the wordmark, not the page */
.t3-footer_logo{width:100%;height:auto;display:block;overflow:visible}
/* The three blooms are the artwork's Gradient-Ring-01..03 frames. They do not
drift on a timer any more: they are wound a half turn back and unwind as the
footer lands, so the light arrives with the page rather than idling.
`--t3-ring-p` runs 0 -> 1 (script), the rotation runs -360deg -> 0deg, and
each bloom turns around the centre of its OWN ring frame, so it orbits its
ring instead of swinging around the whole lockup. Origins are in view-box
units measured from the view box's top-left corner, which after the 43.1673
shift is the artboard's own origin.
Defaults to 1 (rest) so a page without the script shows the artwork as drawn.
In Webflow this rule goes into the page's custom code, not a class. */
.t3-ring{
transform-box:view-box;
--t3-ring-sweep:360deg; /* the whole wind-up: 360 = a full turn, 180 = a half,
negative = the other way round */
transform:rotate(calc((var(--t3-ring-p,1) - 1) * var(--t3-ring-sweep)));
}
/* the layer hint is scoped to the window where the rings actually turn. Left on
permanently it keeps three compositing layers alive for a wordmark that is
off screen for the whole page. */
.t3-footer_logo.is-near .t3-ring{will-change:transform}
/* the left ring runs the other way: a negative sweep starts it at +360deg, so it
unwinds counter-clockwise while the other two come round clockwise */
.t3-ring.is-r1{transform-origin:432.9167px 364.3090px;--t3-ring-sweep:-360deg} /* left / blue */
.t3-ring.is-r2{transform-origin:708.0212px 364.4237px} /* mid / violet */
.t3-ring.is-r3{transform-origin:983.1816px 364.2769px} /* right / pink */
.t3-footer .t3-footer_tag{
position:absolute;left:16.92%;top:75.64%; /* 283/1672 across, 552/730 down */
margin:0;white-space:nowrap;
/* KMR Melange Grotesk Light, as the design asks. The site registers the
Light file under weight 400 (KMRMelangeGrotesk-Light.woff2 at 400,
ExtraBold at 700), so 400 IS the Light cut here; 300 would only fall back
to the same face. Checked against the live stylesheet's @font-face list. */
font-family:KMRMelangeGrotesk,Inter,Arial,sans-serif;font-weight:400;
/* 24px at the design's 1728 frame, expressed against the wordmark's own
width so it grows and shrinks with the artwork (24 / 1664 = 1.4423%) */
font-size:1.4423cqw;line-height:1.35;color:#8ea2d7;opacity:.8;
}
/* link columns: grid geometry → native .t3-footer_cols + the is-3/is-2/is-1
combos (column-major fill lives there now); rows carry .t3-footer_link */
.t3-footer_col-head{
/* tracking stays here: the .t3-footer * letter-spacing reset would beat
the native class */
letter-spacing:.36px;
}
.t3-footer_links a{transition:opacity .16s}
/* Columns and bottom bar ride on a scrim that fades the glow out to solid
#0a0523 (Figma 216:29746, y 646 → 1058, full width). Full-bleed, above the
background image but below the text. */
/* position → native .t3-footer_base */
.t3-footer_base::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
background:linear-gradient(to bottom,rgba(10,5,35,0),#0a0523);
}
/* bottom bar box/type → native .t3-footer_bottom */
/* Figma 216:29758, the hairline above the bottom bar. Drawn as a ::before
rather than a full-width box-shadow so it sits on the same gutter as the
logo, the columns and the bar's own text. */
.t3-footer_bottom::before{
content:"";position:absolute;top:0;left:var(--t3-foot-pad);right:var(--t3-foot-pad);
height:1px;background:var(--t3-rule);
}
.t3-footer_bottom a{color:inherit;transition:color .16s}
.t3-footer_bottom a:hover{color:#fff}
/* _bottom-right/_legal/_social flex layouts → native classes */
.t3-footer_legal a{padding:8px 0}
.t3-footer_legal i{display:block;width:1px;height:16px;margin:0 24px;background:rgba(255,255,255,.25)}
.t3-footer_social a{display:grid;place-items:center;width:24px;height:24px;color:rgba(255,255,255,.6)}
.t3-footer_social a:hover{color:#fff}
.t3-footer_social svg{width:24px;height:24px;display:block}
/* =========================================================================
Mobile topbar (≤991) — dark version of the t2 pattern
========================================================================= */
/* topbar box/colors → native .t3-topbar (base display:none + medium flex),
.t3-topbar_logo, .t3-topbar_actions, .t3-topbar_btn (+ hover) */
@media(max-width:991px){
/* Safari prefix; the unprefixed backdrop-filter is native */
.t3-topbar{-webkit-backdrop-filter:blur(14px)}
/* The footer is full-bleed while the content sits inside the inset panel, so
to line the two up the footer gutter is the panel's inset plus the section
container's own padding (the same clamp the content uses). */
:root{--t3-foot-pad:calc(var(--t3-inset) + clamp(20px,2.67%,56px))}
.t3-topbar_btn{transition:opacity .16s}
.t3-topbar_btn svg{width:24px;height:24px;display:block}
.t3-topbar_div{flex:none;width:1px;height:16px;margin:0 16px;background:rgba(255,255,255,.25)}
.t3-topbar_btn .t3-icon-close{display:none}
.t3-topbar_btn.is-open .t3-icon-burger{display:none}
.t3-topbar_btn.is-open .t3-icon-close{display:block}
/* plain .t3-shell 1fr → native medium; the collapsed variant stays */
body.t3-collapsed .t3-shell{grid-template-columns:minmax(0,1fr)}
/* the menu comes down from above the viewport and leaves the same way, so it
reads as a panel arriving rather than a layer appearing. `visibility` is
switched only after the slide-out has finished, which keeps the panel out
of the tab order while it is away without cutting the animation short. */
/* overlay box → native .t3-nav medium (fixed, inset 0, z 60, bg); only the
slide state machine stays here */
.t3-nav{
transform:translateY(-100%);visibility:hidden;pointer-events:none;
will-change:transform;
transition:transform .5s cubic-bezier(.165,.84,.44,1),visibility 0s linear .5s;
}
.t3-nav.is-open{
transform:translateY(0);visibility:visible;pointer-events:auto;
transition:transform .5s cubic-bezier(.165,.84,.44,1),visibility 0s;
}
/* inner/header/scroll/items/link/group-label medium boxes → native combos;
the caption span keeps only its transform release */
.t3-nav_group-label>span{transform:none}
.t3-nav_group-label::after{display:none}
/* Same window as on desktop, just hung below the sticky topbar instead of at
the top of the viewport: the frame keeps the gap and the rounded corners
drawn over the panel for the whole scroll, so the rounding stays in view
until the panel itself is scrolled past and the footer takes over. Without
it the panel slid under the topbar and got cut off square after the first
few pixels of scroll. Inset on all four sides here, since there is no
sidebar to sit flush against. */
/* On mobile the panel already carries its own margins and radius, so the
sides and the bottom need no painting at all. The frame's single job is to
keep the two TOP corner notches pinned below the topbar, and for that it
only has to be as tall as the radius. That height is also what decides how
long it stays pinned: a sticky box releases `its own height` before its
container ends, so a 16px frame holds the notches until the content area
has 16px left and then rides out with it. A full-viewport frame (as on
desktop) would have let go a whole screen too early. */
/* frame top/height → native .t3-frame medium (top 64, height 36); a sticky
box releases its own height before its container ends, so that height is
what decides when the top notches ride out */
/* bottom pushed 80px past the clip so only the top corners are cut */
.t3-frame::before{inset:0 var(--t3-inset) -80px;border-radius:var(--t3-radius)}
/* the mirror image at the foot of the viewport, so the bottom corners are
cut at all times too. Sticky to the BOTTOM, so it rides at the viewport
foot until the panel's own end arrives and then settles on it. */
.t3-frame.is-bot{
display:block;position:sticky;top:auto;bottom:0;
height:calc(var(--t3-radius) + var(--t3-inset));
margin-top:calc(-1 * (var(--t3-radius) + var(--t3-inset)));
}
.t3-frame.is-bot::before{inset:-80px var(--t3-inset) var(--t3-inset)}
/* panel margins → native .t3-panel medium (-36px / 8px, 6px at ≤767);
.t3-pop display:none → native medium */
/* t2 carry-over fix (layout only, no restyle): the hero's 1fr track was
sized by the avatar row's min-content, which pushed the search bar and
the chips past the panel's right edge on phones. */
.t3-panel .t2-hero{grid-template-columns:minmax(0,1fr)}
.t3-panel .t2-hero_avatars{flex-wrap:wrap;gap:6px 0}
.t3-panel .t2-hero_search-wrap{min-width:0}
/* margin, not padding: the tagline is placed as a percentage of this box and
that percentage has to mean "down the wordmark", nothing else */
.t3-footer_brand{margin:0 var(--t3-foot-pad) 0;width:auto}
/* Same placement rule as on desktop, so it keeps its distance to the
wordmark, but stretched across the full width instead of half of it. The
line is 846px wide at 24px in the design, so 35.25 units of width per unit
of size: dividing the wordmark's width by that lands it edge to edge. */
/* same proportional drop as on desktop, nudged 4px further down */
.t3-footer .t3-footer_tag{left:0;right:0;font-size:calc(100cqw / 35.4);
transform:translateY(4px)}
.t3-footer_legal i:last-child{display:none}
/* Categories takes the full row, Toolkits and Actions share the next one.
The outer grid has the same column count as the Categories list, so every
sub-column lines up and Actions fills the space Toolkits leaves over. */
.t3-footer_cols{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:32px 0;margin:44px calc(var(--t3-foot-pad) - 16px) 0;padding-top:0;
}
.t3-footer_cols>.t3-footer_col:nth-child(1){grid-column:span 3}
.t3-footer_cols>.t3-footer_col:nth-child(2){grid-column:span 2}
.t3-footer_cols>.t3-footer_col:nth-child(3){grid-column:span 1;padding-top:0}
.t3-footer_meta{position:static;justify-content:flex-end;padding:13px var(--t3-foot-pad) 0 0}
/* stacked and centred, in this order: socials, legal menu, copyright */
.t3-footer_bottom{
margin-top:64px;padding:36px var(--t3-foot-pad);
flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.t3-footer_bottom>div:first-child{order:2}
.t3-footer_bottom-right{order:1;flex-direction:column-reverse;align-items:center;gap:16px}
/* when the row wraps, the next line sits 8px below: the row gap is zero and
the links carry 4px of their own, which is also what keeps them a usable
tap target */
.t3-footer_legal{justify-content:center;flex-wrap:wrap;row-gap:0}
.t3-footer_legal a{padding:4px 0}
}
@media(max-width:767px){
/* narrower viewport, tighter gap; the radius stays */
:root{--t3-inset:6px}
.t3-footer_links.is-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(9,auto)}
.t3-footer_cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.t3-footer_cols>.t3-footer_col:nth-child(1){grid-column:span 2}
.t3-footer_cols>.t3-footer_col:nth-child(2){grid-column:span 1}
.t3-footer_links.is-2{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-auto-flow:row}
}
/* Below 640 the line would have to shrink past readable to stay on one row, so
it stops scaling, settles at 13px and wraps centred instead. Not a Webflow
breakpoint, so this one lives in custom code at the push. */
@media(max-width:639px){
.t3-footer .t3-footer_tag{
font-size:16px;white-space:normal;text-align:center;
/* Back into the flow here. Absolutely positioned it kept its distance to
the wordmark but the columns below could not see it, so a third wrapped
line squeezed the gap to 8px. In flow the wordmark block grows with it
and the 44px underneath is measured from the sentence at any width. The
negative margin reproduces the same 75.6% drop: the logo box is 43.66%
of its own width tall, and the sentence starts 24.36% of that height
above its foot, which is 10.64% of the width, plus the 4px nudge. */
position:static;transform:none;
max-width:360px;margin:calc(-10.64% + 4px) auto 0;
}
}
@media(max-width:478px){
.t3-nav_items{grid-template-columns:1fr}
.t3-footer_links.is-3,.t3-footer_links.is-2{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-auto-flow:row}
.t3-footer_cols{grid-template-columns:minmax(0,1fr);gap:32px}
.t3-footer_cols>.t3-footer_col:nth-child(1),
.t3-footer_cols>.t3-footer_col:nth-child(2),
.t3-footer_cols>.t3-footer_col:nth-child(3){grid-column:span 1}
/* four items cannot fit one line at this width, and a divider left dangling
at the end of a wrapped line reads as a mistake, so the row switches from
dividers to a plain gap here */
.t3-footer_legal{gap:0 18px}
.t3-footer_legal i{display:none}
}
/* Crossing 991 turns the sidebar from a grid column into a fixed overlay and
the panel from untransformed to translateY(-100%). Animating that flings it
across the screen, so every transition on the chrome is switched off while
the viewport is being resized and switched back a moment after it settles. */
html.t3-resizing .t3-nav,
html.t3-resizing .t3-shell,
html.t3-resizing .t3-nav_header,
html.t3-resizing .t3-nav_logo,
html.t3-resizing .t3-lg-shift,
html.t3-resizing .t3-lg-word,
html.t3-resizing .t3-nav_label,
html.t3-resizing .t3-nav_count,
html.t3-resizing .t3-nav_group-label>span,
html.t3-resizing .t3-nav_fade{transition:none}
@media(prefers-reduced-motion:reduce){
.t3-footer_logo{--t3-ring-p:1}
.t3-shell,.t3-nav_label,.t3-nav_count,.t3-nav_toggle,.t3-nav_logo,
.t3-nav_logo img,.t3-nav_header,.t3-nav_group-label>span{transition:none}
}
/* =========================================================================
Construction layer
The only thing carried over from the material pass: two dashed verticals at
the column edges, one dashed horizontal per section, square handles at the
crossings. Everything else in the panel keeps its T2 styling.
The verticals are a background on .t2-main so no new stacking context is
created and they paint behind all content automatically.
========================================================================= */
.t3-panel{
--m-line:rgba(10,5,35,.10);
--m-handle:#ffffff;
--m-handle-line:rgba(10,5,35,.28);
--m-gutter:clamp(20px,2.67%,56px);
}
.t3-panel .t2-main{
background-image:
repeating-linear-gradient(to bottom,var(--m-line) 0 5px,transparent 5px 11px),
repeating-linear-gradient(to bottom,var(--m-line) 0 5px,transparent 5px 11px);
background-size:1px 100%,1px 100%;
background-position:left var(--m-gutter) top 0,right var(--m-gutter) top 0;
background-repeat:no-repeat,no-repeat;
}
.t3-panel .t2-main .t2-container_inner.t2-padding-global_120{position:relative}
.t3-secrule{
position:relative;height:0;margin:0;pointer-events:none;
border-top:1px dashed var(--m-line);
}
.t3-handle{
position:absolute;top:-4px;width:8px;height:8px;box-sizing:border-box;
background:var(--m-handle);border:1px solid var(--m-handle-line);
}
.t3-handle.is-l{left:-4px}
.t3-handle.is-r{right:-4px}
/* =========================================================================
Webflow reconciliation
The prototype used inline