.documentation-cover{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:20px;background:#253b50;display:grid;place-items:center;padding:8%;container-type:inline-size}.documentation-cover>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}.documentation-cover-title{position:relative;color:#fff;font-size:clamp(14px,9.524cqw,34px);line-height:1.18;font-weight:400;letter-spacing:-.025em;text-align:center;white-space:pre-line;text-wrap:balance}.documentation-cover[data-cover=theme] .documentation-cover-title{color:#17332d}.documentation-cover-featured{aspect-ratio:16 / 10}.documentation-cover-reader{aspect-ratio:auto;height:320px}.documentation-cover[data-cover=explore]{align-content:center;gap:20px;padding:7%;--guide-ink:var(--website-ink,#171717);--guide-paper:#fdfcfc;--guide-surface:#f5f3f1;--guide-blue:#426fa0;--guide-coral:#c47d69;--guide-navy:#24384a}.documentation-cover[data-cover=explore] .documentation-cover-title{font-size:clamp(18px,7.5cqw,30px)}.documentation-cover-reader[data-cover=explore]{padding:24px}.guide-design-variants{position:relative;width:100%;max-width:480px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3%;color:var(--guide-ink)}.guide-design-option{min-width:0;height:clamp(94px,34cqw,150px);display:flex;flex-direction:column;background:var(--guide-paper);border:1px solid #ffffff80;border-radius:8px;box-shadow:0 8px 20px #24384a20;overflow:hidden}.guide-design-option-1{outline:2px solid var(--guide-coral);outline-offset:3px}.guide-design-window{height:15%;min-height:12px;padding-inline:8%;display:flex;align-items:center;gap:3px;border-bottom:1px solid var(--guide-surface)}.guide-design-window>span{width:3px;height:3px;border-radius:50%;background:#ff5f57}.guide-design-window>span:nth-child(2){background:#febc2e}.guide-design-window>span:nth-child(3){background:#28c840}.guide-design-layout{flex:1;min-height:0;display:flex;padding:9%;gap:9%}.guide-design-layout i{display:block;border-radius:2px}.guide-design-nav{width:17%;background:var(--guide-surface)}.guide-design-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9%}.guide-design-heading{width:70%;height:9%;background:var(--guide-navy)}.guide-design-line{width:90%;height:5%;background:var(--guide-surface)}.guide-design-blocks{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8%}.guide-design-blocks i{background:var(--guide-surface)}.guide-design-blocks i:last-child{grid-column:1 / -1}.guide-design-option-1 .guide-design-nav{display:none}.guide-design-option-1 .guide-design-heading{width:85%;height:16%}.guide-design-option-1 .guide-design-blocks{grid-template-columns:repeat(3,minmax(0,1fr))}.guide-design-option-1 .guide-design-blocks i:first-child{grid-column:1 / -1;background:var(--guide-blue)}.guide-design-option-1 .guide-design-blocks i:last-child{grid-column:auto;grid-column-end:span 2}.guide-design-option-2 .guide-design-layout{flex-direction:column}.guide-design-option-2 .guide-design-nav{width:100%;height:9%}.guide-design-option-2 .guide-design-body{display:grid;grid-template-columns:1fr 1fr;gap:10%}.guide-design-option-2 .guide-design-heading{width:100%;height:100%;grid-row:1 / 3;background:var(--guide-coral)}.guide-design-option-2 .guide-design-line{width:100%;height:20%;margin-top:10%;background:var(--guide-navy)}.guide-design-option-2 .guide-design-blocks{display:flex;flex-direction:column;gap:12%}.guide-design-option-2 .guide-design-blocks i{height:20%}.guide-design-label{min-height:22%;padding:3% 8%;display:flex;align-items:center;justify-content:space-between;gap:3px;border-top:1px solid var(--guide-surface);font-size:clamp(9px,2.6cqw,12px);line-height:1.2}@font-face{font-family:Vizu Guide Jolt;src:url(/assets/docs/jolt/source/vizu-font-hankengrotesk-normal-813b3f8fa096.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}.documentation-cover[data-guide=create-a-brand]{align-content:center;gap:20px;padding:7%;--jolt-volt:#FFD83D;--jolt-pop:#F94A77;--jolt-circuit:#493CFF;--jolt-ink:#191427;--jolt-paper:#FFFAEE}.documentation-cover[data-guide=create-a-brand] .documentation-cover-title{font-size:clamp(18px,7.5cqw,30px)}.documentation-cover-reader[data-guide=create-a-brand]{padding:24px}.guide-brand-kit{position:relative;display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);grid-template-rows:1fr .55fr;gap:10px;width:100%;max-width:480px;height:clamp(116px,36cqw,168px);font-family:Vizu Guide Jolt,Arial,sans-serif}.guide-brand-logo{grid-row:1 / -1;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2cqw,14px);min-width:0;padding:12px;border-radius:12px;background:var(--jolt-paper);color:var(--jolt-ink);box-shadow:0 8px 20px #24384a20}.guide-brand-logo img{display:block;width:clamp(44px,18cqw,88px);height:clamp(44px,18cqw,88px);object-fit:contain;flex-shrink:0}.guide-brand-logo span{font-size:clamp(24px,10cqw,56px);line-height:1;font-weight:700;letter-spacing:-.02em}.guide-brand-type{display:grid;place-items:center;border-radius:12px;background:var(--jolt-volt);color:var(--jolt-ink);font-size:clamp(32px,14cqw,64px);line-height:1;font-weight:300}.guide-brand-palette{display:flex;overflow:hidden;border-radius:10px}.guide-brand-palette i{flex:1;background:var(--jolt-volt)}.guide-brand-palette i:nth-child(2){background:var(--jolt-pop)}.guide-brand-palette i:nth-child(3){background:var(--jolt-circuit)}.guide-brand-palette i:nth-child(4){background:var(--jolt-ink)}.guide-brand-palette i:nth-child(5){background:var(--jolt-paper)}@container (max-width:180px){.documentation-cover[data-cover=explore] .documentation-cover-title{font-size:clamp(10px,7.3cqw,14px)}.guide-design-option{height:clamp(40px,42cqw,70px);border-radius:3px}.guide-design-option-1{outline-width:1px;outline-offset:1px}.guide-design-window{min-height:5px;gap:1px}.guide-design-window>span{width:2px;height:2px}.guide-design-label{font-size:clamp(6px,4cqw,8px)}.documentation-cover[data-guide=create-a-brand] .documentation-cover-title{font-size:clamp(12px,8cqw,16px)}.guide-brand-kit{height:clamp(42px,38cqw,64px);gap:4px}.guide-brand-logo{gap:3px;padding:4px;border-radius:5px}.guide-brand-logo img{width:24px;height:24px}.guide-brand-logo span{font-size:16px}.guide-brand-type{font-size:clamp(14px,16cqw,24px);border-radius:5px}.guide-brand-palette{border-radius:4px}}@media(max-width:850px){.documentation-cover-title{font-size:clamp(14px,9.524cqw,28px)}.documentation-cover-reader{height:240px}.documentation-cover-reader[data-cover=explore],.documentation-cover-reader[data-guide=create-a-brand]{padding:18px;gap:16px}}.landing-brand-gallery{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;padding-bottom:16px;overscroll-behavior-x:contain}.landing-brand-panel{flex:0 0 min(944px,90%);width:min(944px,90%);aspect-ratio:16/9;overflow:hidden;position:relative;border-radius:24px;border:.5px solid #00000013}.landing-brand-panel{container-type:inline-size}.brand-panel-canvas{transform:scale(tan(atan2(100cqw,var(--brand-panel-width))));transform-origin:top left}@media(max-width:850px){.landing-brand-panel{flex-basis:320px;width:320px}}
