/* DECODE Psychology × AI Summit — main stylesheet Extracted 1:1 from the approved design (design/DECODE Summit.dc.html). Values (clamp/rgba/beziers) are verbatim — do not "clean up" numbers. */ /* ---------- Fonts (self-hosted, GDPR: no Google Fonts request) ---------- */ @font-face{ font-family:'Lexend';font-style:normal;font-weight:300 700;font-display:swap; src:url(../assets/fonts/lexend-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* latin-ext is kept for regional names and partner copy (š, ć, č). The summit page itself now only needs latin (ø in "Hønsen", é in "Café" are both inside it), but dropping the subset would tofu the first Balkan name someone adds. */ @font-face{ font-family:'Lexend';font-style:normal;font-weight:300 700;font-display:swap; src:url(../assets/fonts/lexend-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------- Tokens ---------- */ :root{ --ink:#1C083B; --cream:#FEF1E2; --plum:#661454; --violet:#482C8F; --lavender:#C5CAF9; --mint:#92F1CF; --coral:#FF4E4F; --coral-2:#FF8B80; --yellow:#F6E982; --err:#B4292A; --pad-x:clamp(22px,5vw,72px); --sec-pad:clamp(96px,12vw,170px); --wrap:1520px; --ease:cubic-bezier(.22,.61,.2,1); } /* ---------- Base ---------- */ html{scroll-padding-top:96px} /* [hidden] must always win — several components set their own display (.kn__bullets, .kn__slider-controls) */ [hidden]{display:none !important} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;background:#1C083B;color:#1C083B;font-family:'Lexend',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip} a{color:#FF4E4F} a:hover{color:#661454} ::selection{background:#FF4E4F;color:#FEF1E2} /* Two-tone ring: the ink halo carries contrast on cream sections, coral on dark */ :focus-visible{outline:3px solid #FF4E4F;outline-offset:3px;box-shadow:0 0 0 2px #1C083B} input,select,textarea,button{font-family:'Lexend',sans-serif} *,*::before,*::after{box-sizing:border-box} img{max-width:100%} @keyframes dcBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} @keyframes dcDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-12px)}} @media (prefers-reduced-motion:reduce){ [data-breathe],[data-floaty]{animation:none !important} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } @media (max-width:1279px){[data-dnav]{display:none !important}} @media (min-width:1280px){[data-mbtn]{display:none !important}} @media (max-width:860px){[data-hm]{display:none !important}} @media (max-width:1333px){[data-hxl]{display:none !important}} /* Skip link */ .skip{position:absolute;left:16px;top:-64px;z-index:200;background:#FF4E4F;color:#1C083B;padding:14px 20px;font:600 13px 'Lexend',sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none} .skip:focus,.skip:focus-visible{top:16px} /* ---------- Shared ---------- */ .wrap{max-width:var(--wrap);margin:0 auto} .eyebrow{font:600 12px/1 'Lexend',sans-serif;letter-spacing:.32em;text-transform:uppercase} .mask{overflow:hidden} /* Buttons. Two solid fills: .btn--mint is the primary CTA (every "Partner with DECODE", the one in the ticket desk included; the sticky-nav one is a ghost and uses .nav__cta--mint), .btn--coral is everything else. Both take the same THREE hover treatments — the modifier class must match the section it sits on (see index.html): .btn--hv-cream (hero, ticket desk, mobile menu, founding, modal close, cookie accept) .btn--hv-ink (final call, form submit) ghosts get .btn--hv-coral (border+color -> coral) */ .btn{display:inline-flex;align-items:center;gap:12px;border-radius:2px;padding:17px 30px;font:600 12.5px/1.35 'Lexend',sans-serif;text-wrap:balance;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background-color .25s,border-color .25s,color .25s,transform .25s} .btn svg{flex:none} .btn--coral{background:#FF4E4F;color:#1C083B;border:1px solid #FF4E4F} .btn--coral.btn--hv-cream:hover{background:#FEF1E2;border-color:#FEF1E2;color:#1C083B} .btn--coral.btn--hv-ink:hover{background:#1C083B;border-color:#1C083B;color:#FEF1E2} .btn--mint{background:#92F1CF;color:#1C083B;border:1px solid #92F1CF} .btn--mint.btn--hv-cream:hover{background:#FEF1E2;border-color:#FEF1E2;color:#1C083B} /* On a light section mint has almost no edge (1.2:1 against the cream), so the .btn--hv-ink pairing - which by convention marks the light-section buttons - carries an ink hairline. The label itself is 13.7:1 either way. */ .btn--mint.btn--hv-ink{border-color:#1C083B} .btn--mint.btn--hv-ink:hover{background:#1C083B;border-color:#1C083B;color:#FEF1E2} .btn--ghost-cream{background:transparent;color:#FEF1E2;border:1px solid rgba(254,241,226,.45)} .btn--ghost-ink{background:transparent;color:#1C083B;border:1px solid rgba(28,8,59,.4)} .btn--hv-coral:hover{border-color:#FF4E4F;color:#FF4E4F} .btn--lift:hover{transform:translateY(-2px)} /* ---------- Header / nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);padding:0 clamp(20px,4vw,54px);height:84px;background:rgba(28,8,59,.62);color:#FEF1E2;backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border-bottom:1px solid rgba(254,241,226,.12);transition:background-color .5s ease,color .5s ease,border-color .5s ease} .nav__brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;flex:none} .nav__brand:hover{color:#FF4E4F} .nav__brand img{display:block;width:34px;height:34px} .nav__wordmark{font:600 12.5px/1 'Lexend',sans-serif;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap} .nav__links{display:flex;align-items:center;gap:clamp(18px,2vw,30px);margin-left:auto} /* min-height:44px is unconditional rather than under (pointer:coarse): that query matches only the primary input, so trackpad-equipped touch laptops (1280-1366px, where this nav appears) report pointer:fine. No visual cost — the 84px bar absorbs the taller box. */ .nav__link{color:inherit;text-decoration:none;font:500 12.5px/1 'Lexend',sans-serif;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px} .nav__link:hover{color:#FF4E4F} .nav__cta{background:transparent;border:1px solid currentColor;color:inherit;border-radius:2px;padding:16px 22px;font:600 11.5px/1 'Lexend',sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background-color .25s,color .25s,border-color .25s} /* Currency cue must survive all four nav tints (coral fails contrast on 3 of them), so: inherited color + underline instead of the design's fixed coral */ .nav__link--current{font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px} .nav__cta:hover{background:#FF4E4F;border-color:#FF4E4F;color:#1C083B} /* The nav primary CTA fills mint like every other "Partner with DECODE" button. Scoped, and placed after .nav__cta:hover to win on source order - partners.html's "Start a conversation" shares .nav__cta and keeps the coral hover. The border stays ink rather than matching the fill: the bar is tinted per section (data-navbg) and two of them ARE #92F1CF, where a mint-on-mint pill would be invisible (1.0:1). Ink holds the edge on every tint - 13.7:1 on mint, 16.5:1 on cream - and on the dark bars the mint fill itself carries the shape at 13.7:1. */ .nav__cta--mint:hover{background:#92F1CF;border-color:#1C083B;color:#1C083B} .nav__menu-btn{margin-left:auto;background:transparent;border:1px solid currentColor;color:inherit;border-radius:2px;padding:16px 20px;font:600 11.5px/1 'Lexend',sans-serif;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;display:inline-flex;transition:background-color .25s,color .25s,border-color .25s} .nav__menu-btn:hover{background:#FF4E4F;border-color:#FF4E4F;color:#1C083B} .nav__progress{position:absolute;left:0;bottom:-1px;height:2px;width:0%;background:#FF4E4F} /* ---------- 01 Hero ---------- */ .hero{position:relative;min-height:100vh;min-height:100svh;background:#1C083B;color:#FEF1E2;overflow:hidden;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;row-gap:64px;padding:130px clamp(22px,5vw,72px) 72px;padding-left:max(var(--pad-x),calc((100% - var(--wrap)) / 2))} .hero__copy{max-width:900px;position:relative;z-index:1;container-type:inline-size;container-name:herocopy} .hero__copy h1{margin:0} .hero__title-mask{display:block;overflow:hidden;padding-bottom:.06em} .hero__title{display:block;font-size:clamp(min(78px,20vw),13.5vw,216px);font-size:clamp(min(78px,20vw),min(13.5vw,22cqw),216px);font-weight:600;line-height:.94;letter-spacing:-.005em;color:#C5CAF9} .hero__sub-mask{display:block;overflow:hidden} .hero__sub{display:block;margin-top:clamp(18px,2.4vw,34px);font-size:clamp(14px,1.9vw,27px);font-weight:600;letter-spacing:.42em;letter-spacing:min(.42em,1.28cqw);text-transform:uppercase;color:#FF4E4F} .hero__tagline{margin:clamp(22px,3vw,38px) 0 0;font-style:italic;font-weight:400;font-size:clamp(17px,1.7vw,24px);color:#C5CAF9} .hero__meta{margin:clamp(20px,2.6vw,34px) 0 0;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font:600 clamp(12px,1.1vw,14px)/1.5 'Lexend',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#92F1CF} .hero__ctas{margin-top:clamp(34px,4.5vw,58px);display:flex;flex-wrap:wrap;gap:16px;align-items:center} /* Hero entrance: transform-only so the headline is painted at first render (LCP) and never sits at opacity 0 waiting for js/main.js; the rest of the page keeps its scroll reveals. */ @keyframes dcHeroIn{from{transform:translateY(26px)}to{transform:none}} .hero__title,.hero__sub,.hero__tagline,.hero__meta,.hero__ctas{animation:dcHeroIn .9s var(--ease) both} .hero__sub{animation-delay:.1s}.hero__tagline{animation-delay:.2s}.hero__meta{animation-delay:.3s}.hero__ctas{animation-delay:.4s} @media (prefers-reduced-motion:reduce){.hero__title,.hero__sub,.hero__tagline,.hero__meta,.hero__ctas{animation:none}} /* Below-the-fold sections are laid out only as they approach the viewport; the placeholder height keeps the scrollbar honest. */ .prov,.room,.facts,.kn,.itl,.why,.fmt,.ag,.venue,.fnd,.bey,.final,.org{content-visibility:auto;contain-intrinsic-size:auto 900px} /* The seats line sits on a row of its own beneath the button and the ticket note: uppercase at .18em it is too long to share the row without breaking mid-phrase. flex-basis:100% forces the wrap; the 16px gap of .hero__ctas is the space above it. */ .hero__seats-note{flex-basis:100%;font:500 13px/1 'Lexend',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(254,241,226,.66)} /* The quiet "Tickets available soon" label that stands where the ticket button used to be - a statement, not a control, so it is never dressed as one. color:inherit is what lets one rule serve both places it appears: cream text on the ink hero, ink text on the cream .final panel. Same metrics as .hero__seats-note above. */ .cta-note{font:500 13px/1 'Lexend',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:inherit;opacity:.62} .cta-note--link{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:opacity .2s var(--ease)} .cta-note--link:hover{opacity:1;color:inherit} /* Capped at 720x622 with the 1440 proportions: above a 648px column the %-sized coral circles outgrew the 560px box and merged (tangent at 1920, 113px overlap at 2560). */ .hero__geo{position:relative;width:100%;max-width:720px;justify-self:end;aspect-ratio:648/560;min-height:min(46vw,560px);pointer-events:none} .hero__geo-drift{width:100%;height:100%;transition:transform .6s cubic-bezier(.22,.61,.2,1)} .hero__geo1{position:absolute;right:-14%;top:4%;width:82%;height:44%} .hero__geo1 .hero__geo-drift{background:#C5CAF9} .hero__geo2{position:absolute;left:4%;top:-6%;width:56%;aspect-ratio:1} .hero__geo2-circle{width:100%;height:100%;border-radius:50%;background:#FF4E4F;position:relative;animation:dcBreathe 17s ease-in-out infinite} .hero__geo2-inner{position:absolute;left:26%;top:14%;width:38%;aspect-ratio:1;border-radius:50%;background:#FF8B80;animation:dcBreathe 12s ease-in-out infinite reverse} .hero__geo3{position:absolute;right:-18%;bottom:-4%;width:70%;height:40%} .hero__geo3 .hero__geo-drift{background:#C5CAF9} .hero__geo4{position:absolute;right:6%;bottom:-16%;width:44%;aspect-ratio:1} .hero__geo4-circle{width:100%;height:100%;border-radius:50%;background:#FF4E4F;animation:dcBreathe 21s ease-in-out infinite} /* ---------- 02 Provocation ---------- */ .prov{position:relative;background:#92F1CF;color:#1C083B;overflow:hidden;overflow:clip;padding:var(--sec-pad) var(--pad-x)} .prov__geo1{position:absolute;right:-10vw;top:-13vw;width:22vw;aspect-ratio:1;border-radius:50%;background:#FF4E4F} .prov__geo2{position:absolute;right:-11vw;top:20vw;width:24vw;height:12vw;border-radius:0 0 24vw 24vw;background:#482C8F} .prov__inner{position:relative;z-index:1} .prov__copy{max-width:940px} .prov__h2{margin:0;font-size:clamp(42px,6.6vw,102px);font-weight:600;line-height:1;letter-spacing:.005em;color:#482C8F;text-transform:uppercase;text-wrap:balance} .prov__h2-sub{margin:6px 0 0;font-size:clamp(30px,4.4vw,68px);font-weight:500;line-height:1.1;color:#482C8F} .prov__p1{margin:clamp(40px,5vw,72px) 0 0;font-size:17.5px;line-height:1.7;max-width:54ch;color:rgba(28,8,59,.85)} .prov__p2{margin:16px 0 0;font-size:17.5px;line-height:1.7;max-width:54ch;color:rgba(28,8,59,.85)} .prov__q{margin:clamp(28px,3vw,44px) 0 0;font-size:17.5px;font-weight:600;color:#1C083B} .prov__punch{margin:10px 0 0;font-size:clamp(21px,2.5vw,34px);font-weight:600;line-height:1.4;max-width:34ch;color:#482C8F;text-wrap:pretty} /* ---------- 03 The room ---------- */ .room{position:relative;background:#661454;color:#FEF1E2;overflow:hidden;overflow:clip;padding:var(--sec-pad) var(--pad-x)} .room__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:clamp(48px,6vw,110px);align-items:center} .room__copy{position:relative;z-index:1} .room__h2{margin:0;font-size:clamp(44px,6vw,92px);font-weight:600;line-height:1.05;text-transform:uppercase} .room__h2-sub{margin:6px 0 0;font-size:clamp(26px,3.4vw,50px);font-weight:500;line-height:1.2} .room__paras{margin-top:clamp(36px,4vw,56px)} .room__p{margin:0;font-size:17.5px;line-height:1.7;max-width:52ch;color:rgba(254,241,226,.88)} .room__p+.room__p{margin-top:18px} .room__punch{margin:clamp(28px,3vw,42px) 0 0;font-size:clamp(19px,2vw,26px);font-weight:600;line-height:1.5;color:#FEF1E2} .room__punch-em{color:#F6E982} .room__visual-wrap{display:flex;justify-content:center} .room__visual{position:relative;width:100%;max-width:540px;aspect-ratio:1} .room__table-ring{position:absolute;inset:19%;border:1px solid rgba(254,241,226,.42);border-radius:50%} .room__seats{position:absolute;inset:0} .room__seat{position:absolute;width:7px;height:7px;border-radius:50%;background:#C5CAF9} .room__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .room__count{font-size:clamp(84px,10vw,148px);font-weight:600;line-height:1;color:#FEF1E2;font-variant-numeric:tabular-nums} .room__count-label{margin-top:10px;font:600 clamp(11px,1vw,13px)/1.6 'Lexend',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:rgba(254,241,226,.7)} /* ---------- 04 Facts ---------- */ .facts{background:#FEF1E2;color:#1C083B;padding:var(--sec-pad) var(--pad-x)} .facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:clamp(40px,5vw,64px) clamp(28px,3vw,52px)} .facts__icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;color:#1C083B;transition:transform .35s cubic-bezier(.22,.61,.2,1)} .facts__icon--lavender{background:#C5CAF9} .facts__icon--mint{background:#92F1CF} .facts__icon--yellow{background:#F6E982} .facts__icon--coral{background:#FF4E4F} .facts__h3{margin:26px 0 0;font-size:clamp(28px,2.5vw,40px);font-weight:600;text-transform:uppercase;letter-spacing:.01em} .facts__p{margin:18px 0 0;font-size:16px;line-height:1.7;color:rgba(28,8,59,.78);max-width:34ch} .facts__markets{margin-top:clamp(56px,7vw,96px);border-top:1px solid rgba(28,8,59,.22);padding-top:26px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline} .facts__markets-label{font:600 12px/1 'Lexend',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(28,8,59,.6)} .facts__markets-list{font:500 15.5px/1.7 'Lexend',sans-serif;color:#1C083B} /* ---------- 05 Keynote & speakers ---------- */ .kn{position:relative;background:#1C083B;color:#FEF1E2;overflow:hidden;overflow:clip;padding:var(--sec-pad) var(--pad-x)} .kn__lede{max-width:900px} .kn__h2{margin:0;font-size:clamp(32px,4.6vw,66px);font-weight:600;line-height:1.05;text-transform:uppercase;color:#FF4E4F} .kn__lede-p{margin:clamp(20px,2.4vw,32px) 0 0;font-size:clamp(20px,2.3vw,32px);font-weight:400;line-height:1.45;color:#C5CAF9;max-width:30ch;text-wrap:pretty} .kn__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:clamp(48px,5vw,90px);align-items:center} .kn__eyebrow{font:600 12px/1 'Lexend',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#92F1CF} .kn__name{margin:22px 0 0;font-size:clamp(46px,5.4vw,88px);font-weight:500;line-height:1.05;color:#FEF1E2;text-wrap:balance} .kn__title{margin:20px 0 0;font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:rgba(254,241,226,.8);max-width:40ch} .kn__title--prev{margin-top:8px;font-size:.86em;color:rgba(254,241,226,.62)} .kn__topic-wrap{margin-top:clamp(30px,3.4vw,48px)} .kn__topic{margin:16px 0 0;font-size:clamp(19px,1.9vw,26px);font-weight:500;line-height:1.5;color:#92F1CF;max-width:44ch;text-wrap:pretty} .kn__actions{margin-top:clamp(28px,3vw,42px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px} .kn__linkedin{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 2px;color:rgba(254,241,226,.72);text-decoration:none;font:600 11.5px/1 'Lexend',sans-serif;letter-spacing:.22em;text-transform:uppercase;transition:color .25s} .kn__linkedin:hover{color:#C5CAF9} .kn__linkedin svg{flex:none} .kn__profile-btn{background:transparent;border:1px solid rgba(254,241,226,.45);color:#FEF1E2;border-radius:2px;padding:16px 24px;font:600 11.5px/1 'Lexend',sans-serif;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:12px;transition:border-color .25s,color .25s} .kn__profile-btn:hover{border-color:#FF4E4F;color:#FF4E4F} .kn__chev{display:inline-flex;transition:transform .3s ease} .kn__profile-btn[aria-expanded="true"] .kn__chev{transform:rotate(180deg)} .kn__bullets{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;max-width:56ch} .kn__bullets li{position:relative;padding-left:26px;font-size:16px;line-height:1.7;color:rgba(254,241,226,.84)} .kn__bullets li::before{content:'';position:absolute;left:0;top:.55em;width:9px;height:9px} .kn__bullets li:nth-child(1)::before{background:#FF4E4F} .kn__bullets li:nth-child(2)::before{background:#C5CAF9} .kn__bullets li:nth-child(3)::before{background:#92F1CF} .kn__visual-wrap{display:flex;justify-content:center} /* 400px wide: the arch (.kn__portrait-wrap) is 62% of this and crops with object-fit:cover, so all three source photographs get the same framed treatment. */ .kn__visual{position:relative;width:min(100%,400px);aspect-ratio:.88} .kn__bar{display:none} .kn__circle1{position:absolute;right:-4%;top:-2%;width:34%;aspect-ratio:1} .kn__circle1-fill{width:100%;height:100%;border-radius:50%;background:#FF4E4F;animation:dcBreathe 19s ease-in-out infinite} .kn__circle2{position:absolute;left:0;bottom:2%;width:26%;aspect-ratio:1;border-radius:50%;background:#661454} .kn__portrait-wrap{position:absolute;left:8%;top:6%;width:78%;aspect-ratio:1;overflow:hidden;overflow:clip;border-radius:28px;background:#FEF1E2;outline:6px solid #92F1CF;outline-offset:-6px;display:block} .kn__portrait-wrap picture{display:block;width:100%;height:100%} .kn__portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;-webkit-user-select:none;user-select:none} /* The three source photographs are cropped differently (Hønsen is a tight head shot); a gentle enlargement of the other two, anchored at the top so no head is cropped, brings the faces to a similar size without looking zoomed in. */ .kn__portrait[src*="kosinski"]{transform:scale(1.12);transform-origin:50% 4%} .kn__portrait[src*="englund"]{transform:scale(1.1);transform-origin:50% 8%} .kn__deck-head{margin-top:clamp(56px,7vw,100px);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 28px} .kn__slider-controls{display:flex;align-items:center;gap:10px} .kn__slide-counter{font:600 12px/1 'Lexend',sans-serif;letter-spacing:.2em;color:rgba(254,241,226,.6);margin-right:8px} .kn__arrow{width:52px;height:52px;background:rgba(254,241,226,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(254,241,226,.35);color:#FEF1E2;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s,background-color .25s} .kn__arrow:hover{border-color:#FF4E4F;color:#FF4E4F} /* One slide at a time. Scroll-snap, not a transform track: touch and keyboard scrolling come free, and nothing here writes element.style.transform — which initReveals owns on every [data-rv] and the print block resets to none. Slides are the full track width, so the deck always overflows and the arrows are always meaningful. padding-bottom clears .kn__circle2, which hangs 3% below .kn__visual. Integer track width. --pad-x is 5vw between ~440 and 1440px, so .wrap and each 100%-wide slide can be fractional (921.625px at 1024) while scrollLeft snaps to a whole pixel — the neighbouring slide then lands a sub-pixel inside the deck and its button border paints as a stray 1px hairline. round(down) puts every slide on an integer offset; the clip-path is the fallback for browsers without round(). */ .kn__deck{margin-top:34px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:26px;width:round(down,100%,1px);clip-path:inset(0 1px 0 0)} .kn__deck::-webkit-scrollbar{display:none} /* Slides stretch to the tallest (Kosinski carries the longest title and topic), so centre each one's grid in the space rather than letting the shorter slides hang from the top with dead air beneath. */ .kn__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center} /* ---------- 06 Editorial interlude ---------- */ .itl{position:relative;background:#482C8F;color:#FEF1E2;overflow:hidden;overflow:clip;min-height:76vh;display:flex;align-items:center;padding:clamp(96px,11vw,150px) var(--pad-x)} /* The shapes are offset from the viewport edge while the copy sits in the 1520px wrap; max() keeps today's values to ~1680px and then follows the wrap edge, so they stop drifting away from the copy on wide screens (same idiom on .bey__geo*). 100% is the section's padding box — the real wrap edge, scrollbar included. */ .itl__geo1{position:absolute;left:max(clamp(24px,6vw,110px),calc((100% - var(--wrap)) / 2 + 40px));bottom:-8%;width:clamp(120px,13vw,240px);height:64%;background:#FF4E4F} .itl__geo2{position:absolute;left:calc(max(clamp(24px,6vw,110px),(100% - var(--wrap)) / 2 + 40px) + clamp(90px,10vw,190px));top:32%;width:clamp(130px,14vw,250px);aspect-ratio:1;border-radius:50%;background:#C5CAF9} .itl__inner{width:100%;display:flex;justify-content:flex-end;position:relative;z-index:1} .itl__quote{margin:0;max-width:24ch;font-size:clamp(27px,3.5vw,52px);font-weight:600;line-height:1.32;text-wrap:pretty} .itl__em{color:#92F1CF} /* ---------- 07 Why DECODE ---------- */ .why{position:relative;background:#1C083B;color:#FEF1E2;overflow:hidden;overflow:clip;padding:var(--sec-pad) var(--pad-x)} .why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:clamp(48px,6vw,110px);align-items:center} .why__copy{position:relative;z-index:1} .why__h2{margin:0;font-size:clamp(44px,6vw,92px);font-weight:600;line-height:1.05;text-transform:uppercase} .why__lede{margin:clamp(32px,3.6vw,52px) 0 0;font-size:17.5px;line-height:1.7;max-width:44ch;color:rgba(254,241,226,.78)} .why__lines{margin-top:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;gap:14px} .why__line{margin:0;font-size:clamp(22px,2.6vw,38px);font-weight:600;line-height:1.3} .why__em-mint{color:#92F1CF} .why__em-coral{color:#FF4E4F} .why__em-lavender{color:#C5CAF9} .why__closing{margin:clamp(30px,3.4vw,46px) 0 0;font-size:18px;font-weight:500;line-height:1.65;max-width:44ch;color:#C5CAF9} .why__geo{position:relative;min-height:420px} .why__geo1{position:absolute;right:-16%;top:8%;width:78%;height:40%;background:#C5CAF9} .why__geo2{position:absolute;left:8%;top:0;width:50%;aspect-ratio:1} .why__geo2-circle{width:100%;height:100%;border-radius:50%;background:#FF4E4F;animation:dcBreathe 18s ease-in-out infinite} .why__geo3{position:absolute;right:-10%;bottom:0;width:64%;height:36%;background:#C5CAF9} .why__geo4{position:absolute;right:16%;bottom:-8%;width:40%;aspect-ratio:1;border-radius:50%;background:#FF4E4F} /* ---------- 08 Formats ---------- */ .fmt{background:#C5CAF9;color:#1C083B;overflow:hidden;overflow:clip;padding:var(--sec-pad) var(--pad-x)} .fmt__h2{margin:0;font-size:clamp(38px,5vw,76px);font-weight:600;line-height:1.05;text-transform:uppercase} .fmt__lede{margin:14px 0 0;font-size:clamp(24px,3vw,44px);font-weight:500;line-height:1.25;max-width:26ch;text-wrap:balance} .fmt__row{margin-top:clamp(56px,7vw,100px);display:flex;flex-wrap:wrap;gap:clamp(32px,4.5vw,72px);align-items:flex-start} .fmt__circle{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;font-weight:600;line-height:1.3;transition:transform .45s cubic-bezier(.22,.61,.2,1)} .fmt__circle:hover{transform:scale(1.05)} .fmt__item1{width:230px;margin-top:34px} .fmt__item1 .fmt__circle{width:220px;background:#1C083B;color:#FEF1E2;padding:26px;font-size:21px} .fmt__item2{width:170px;margin-top:0} .fmt__item2 .fmt__circle{width:156px;background:#FF4E4F;color:#1C083B;padding:20px;font-size:20px} .fmt__item3{width:250px;margin-top:72px} .fmt__item3 .fmt__circle{width:240px;background:#661454;color:#FEF1E2;padding:30px;font-size:21px} .fmt__item4{width:190px;margin-top:26px} .fmt__item4 .fmt__circle{width:176px;background:#92F1CF;color:#1C083B;padding:22px;font-size:20px} .fmt__caption{margin:20px 0 0;font-size:15px;line-height:1.65;color:rgba(28,8,59,.75)} .fmt__item1 .fmt__caption{max-width:24ch} .fmt__item2 .fmt__caption{max-width:20ch} .fmt__item3 .fmt__caption{max-width:24ch} .fmt__item4 .fmt__caption{max-width:22ch} /* ---------- 09 Agenda ---------- */ .ag{background:#92F1CF;color:#1C083B;padding:var(--sec-pad) var(--pad-x)} .ag__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px} .ag__h2{margin:0;font-size:clamp(36px,4.8vw,68px);font-weight:600;line-height:1.05;padding-bottom:.12em;text-wrap:balance} .ag__note{font-size:14px;font-style:italic;color:rgba(28,8,59,.65)} .ag__grid{margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));gap:clamp(32px,4vw,56px)} .ag__slot-label{font:600 14px/1 'Lexend',sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#1C083B} .ag__panel{margin-top:20px;border-radius:4px;padding:clamp(28px,3.4vw,46px);display:flex;flex-direction:column;gap:20px} .ag__panel--morning{background:#C5CAF9} .ag__panel--afternoon{background:#F6E982} .ag__row{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:baseline} .ag__time{font-size:16.5px;font-weight:600;font-variant-numeric:tabular-nums} .ag__session{font-size:16.5px;line-height:1.55} .ag__footnote{margin:clamp(32px,3.6vw,48px) 0 0;font-size:15px;font-weight:500;color:rgba(28,8,59,.7);max-width:60ch} /* ---------- 10 Venue ---------- */ .venue{background:#FEF1E2;color:#1C083B;padding:var(--sec-pad) var(--pad-x);overflow:hidden;overflow:clip} .venue__eyebrow{font:600 12px/1 'Lexend',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:rgba(28,8,59,.6)} .venue__h2{margin:20px 0 0;font-size:clamp(36px,4.8vw,68px);font-weight:600;line-height:1.08;max-width:20ch;text-wrap:balance} .venue__grid{margin-top:clamp(48px,5.5vw,80px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(44px,5vw,88px);align-items:start} .venue__photo-block{position:relative} .venue__photo-dot{position:absolute;left:-26px;top:-26px;width:100px;aspect-ratio:1;border-radius:50%;background:#92F1CF} .venue__photo{position:relative;aspect-ratio:4/3;background:#C5CAF9;overflow:hidden;overflow:clip} .venue__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .venue__photo-caption{margin-top:14px;font:600 11px/1.6 'Lexend',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(28,8,59,.65)} .venue__address{margin-top:clamp(22px,2.4vw,30px);border-top:1px solid rgba(28,8,59,.2);padding-top:clamp(18px,2vw,24px)} .venue__address-name{margin:0;font:600 15px/1.45 'Lexend',sans-serif;letter-spacing:.14em;text-transform:uppercase} .venue__address-hall{color:rgba(28,8,59,.55)} .venue__address-lines{margin:10px 0 0;font-size:15px;line-height:1.65;color:rgba(28,8,59,.75)} .venue__address-map{display:inline-block;margin-top:15px;font:600 11px/1 'Lexend',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#1C083B;text-decoration:none;border-bottom:1px solid rgba(28,8,59,.35);padding-bottom:5px;transition:color .25s,border-color .25s} .venue__address-map:hover{color:#FF4E4F;border-color:#FF4E4F} .venue__features{display:flex;flex-direction:column} .venue__feature{border-top:1px solid rgba(28,8,59,.2);padding:clamp(24px,2.6vw,34px) 0;display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start} .venue__feature:last-child{border-bottom:1px solid rgba(28,8,59,.2)} .venue__num{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600} .venue__num--lavender{background:#C5CAF9} .venue__num--mint{background:#92F1CF} .venue__num--yellow{background:#F6E982} .venue__num--coral{background:#FF4E4F} .venue__feature h3{margin:0;font-size:17px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .venue__feature p{margin:12px 0 0;font-size:16px;line-height:1.65;color:rgba(28,8,59,.75);max-width:58ch} .venue__travel{margin-top:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:14px} .venue__travel-row{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline} .venue__travel-label{font:600 11px/1 'Lexend',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:rgba(28,8,59,.65)} .venue__travel-text{font-size:15px;line-height:1.6;color:rgba(28,8,59,.8)} .venue__chip{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;border:1px solid rgba(28,8,59,.4);border-radius:2px;padding:15px 20px;font:600 11.5px/1 'Lexend',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#1C083B;text-decoration:none;transition:background-color .25s,border-color .25s,color .25s} .venue__chip:hover{background:#1C083B;border-color:#1C083B;color:#FEF1E2} /* ---------- 11 Founding partners ---------- */ .fnd{position:relative;background:#1C083B;color:#FEF1E2;overflow:hidden;overflow:clip;padding:var(--sec-pad) var(--pad-x)} .fnd__geo1{position:absolute;right:-7vw;top:12%;width:18vw;aspect-ratio:1;border-radius:50%;background:#FF4E4F} .fnd__geo2{position:absolute;right:-7vw;top:calc(12% + 18vw);width:18vw;height:22vw;background:#C5CAF9} .fnd__inner{position:relative;z-index:1} .fnd__eyebrow{font:600 12px/1 'Lexend',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#FF4E4F} .fnd__lines{margin-top:clamp(26px,3vw,40px);max-width:820px} .fnd__line{margin:0;font-size:clamp(26px,3.5vw,52px);font-weight:500;line-height:1.2} .fnd__line+.fnd__line{margin-top:8px} .fnd__line--lavender{color:#C5CAF9} .fnd__p1{margin:clamp(32px,3.6vw,52px) 0 0;font-size:17.5px;line-height:1.7;max-width:56ch;color:rgba(254,241,226,.8)} .fnd__p2{margin:18px 0 0;font-size:18px;font-weight:500;line-height:1.65;max-width:52ch;color:#C5CAF9} .fnd__cta{margin-top:clamp(32px,3.6vw,48px)} /* ---------- 12 Beyond the summit ---------- */ .bey{position:relative;background:#482C8F;color:#FEF1E2;overflow:hidden;overflow:clip;padding:var(--sec-pad) var(--pad-x)} .bey__geo1{position:absolute;left:max(-40px,calc((100% - var(--wrap)) / 2 - 120px));bottom:-10%;width:clamp(140px,14vw,250px);height:58%;background:#FF4E4F} .bey__geo2{position:absolute;left:max(clamp(100px,11vw,200px),calc((100% - var(--wrap)) / 2 + 80px));bottom:24%;width:clamp(150px,15vw,260px);aspect-ratio:1;border-radius:50%;background:#C5CAF9} .bey__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(560px,100%),1fr));gap:clamp(48px,6vw,110px)} .bey__copy{position:relative;z-index:1} .bey__h2{margin:0;font-size:clamp(42px,5.6vw,86px);font-weight:600;line-height:1.02;text-transform:uppercase;color:#FF4E4F} .bey__lede{margin:clamp(24px,2.8vw,38px) 0 0;font-size:clamp(21px,2.4vw,31px);font-weight:500;line-height:1.35;max-width:26ch} .bey__p{margin:18px 0 0;font-size:16.5px;line-height:1.7;max-width:54ch;color:rgba(254,241,226,.78)} /* ---------- 13 Final call ---------- */ .final{position:relative;background:#FEF1E2;color:#1C083B;overflow:hidden;overflow:clip;min-height:94vh;display:flex;align-items:center;padding:clamp(110px,13vw,180px) var(--pad-x)} .final__geo1{position:absolute;left:-9vw;top:-10vw;width:26vw;aspect-ratio:1;border-radius:50%;background:#C5CAF9} .final__geo2{position:absolute;right:8vw;top:14%;width:7vw;min-width:56px;aspect-ratio:1;border-radius:50%;background:#F6E982} .final__geo3{position:absolute;right:-8vw;bottom:-9vw;width:24vw;aspect-ratio:1;border-radius:50%;background:#92F1CF} .final__inner{max-width:1100px;margin:0 auto;width:100%;text-align:center;position:relative;z-index:1} .final__inner h2{margin:0} .final__t1-mask{display:block;overflow:hidden;padding-bottom:.04em} .final__t1{display:block;font-size:clamp(54px,9vw,144px);font-weight:600;line-height:.98;letter-spacing:-.005em;text-transform:uppercase} .final__t2-mask{display:block;overflow:hidden} .final__t2{display:block;margin-top:14px;font-size:clamp(27px,4.4vw,68px);font-weight:600;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:#482C8F;text-wrap:balance} .final__t3{display:block;margin-top:8px;font-size:clamp(27px,4.4vw,68px);font-weight:600;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:#482C8F} .final__tagline{margin:clamp(26px,3vw,40px) 0 0;font-style:italic;font-size:clamp(17px,1.8vw,23px);color:rgba(28,8,59,.85)} .final__ctas{margin-top:clamp(34px,4vw,54px);display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center} .final__links{margin:clamp(30px,3.4vw,46px) 0 0;font-size:15px;letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center} .final__link{color:#1C083B;font-weight:500;text-decoration:underline;text-underline-offset:4px} .final__link:hover{color:#FF4E4F} .final__link svg{vertical-align:-2px;margin-right:7px} /* Ticket desk. Tickets are not on sale yet — a new ticket provider is being set up — so the panel is an interim notice, not a picker: no frame, no third party, nothing fetched and nothing loaded on click, which is also why no cookie or font of anyone else's is involved any more. The notice is the .tix__gate box that used to sit inside the embed slot; it is now a direct child of .tix__grid and the ink it sits on is simply the panel's own background. When the new provider is live its markup goes back into that same first column. */ .tix{margin:clamp(40px,5vw,64px) auto 0;max-width:1000px;text-align:left;background:#1C083B;color:#FEF1E2;border-radius:2px;box-shadow:0 24px 60px rgba(28,8,59,.22)} .tix__head{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;padding:clamp(22px,2.6vw,30px) clamp(22px,3vw,36px) 0} .tix__eyebrow{color:#92F1CF} .tix__price{margin:0;font:400 14px/1.6 'Lexend',sans-serif;letter-spacing:.04em;color:rgba(254,241,226,.78)} .tix__price strong{font-weight:600;color:#FEF1E2} /* The second column was 224px because it held a 160px QR. The aside is copy only now, and 224px turned the seller line into a three-words-a-row ribbon. */ .tix__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:clamp(20px,3vw,36px);padding:clamp(18px,2.4vw,28px) clamp(22px,3vw,36px) clamp(22px,3vw,36px)} /* The notice. It used to inherit its height from the embed slot around it; as a grid child it stretches to the row on its own, and the min-height is what stops a short notice from shrinking the desk to a few lines of text. */ .tix__gate{min-height:320px;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(20px,2.6vw,32px);border:1px solid rgba(197,202,249,.28)} .tix__gate-title{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.15;color:#C5CAF9;text-wrap:balance} .tix__gate-text{margin:0;font-size:14.5px;line-height:1.7;color:rgba(254,241,226,.78);max-width:54ch} .tix__gate-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center} .tix__link{color:#FEF1E2;font:500 13px/1.5 'Lexend',sans-serif;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px} .tix__link:hover{color:#FF4E4F} .tix__aside{display:flex;flex-direction:column;gap:14px;align-items:flex-start;border-left:1px solid rgba(197,202,249,.22);padding-left:clamp(20px,3vw,36px)} .tix__aside-label{font:600 11px/1 'Lexend',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#92F1CF} .tix__aside-text{margin:0;font-size:13.5px;line-height:1.65;color:rgba(254,241,226,.78)} /* The seller line used to be pinned to the foot of the aside (margin:auto 0 0), which read well under a 160px QR. With the code gone the aside is two short blocks and the auto margin only opened ~200px of ink above it, so it now follows its own copy. */ .tix__seller{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:rgba(254,241,226,.55)} /* Live sale: the panel is gone; the final call keeps the button, the seats line and a one-line strip with the QR as the second way in. */ .final__seats{margin:18px 0 0;font:500 13px/1.6 'Lexend',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(28,8,59,.62)} .tixmini{margin:clamp(36px,4.5vw,56px) auto 0;max-width:660px;display:flex;gap:22px;align-items:center;text-align:left;padding:16px 20px 16px 16px;border:1px solid rgba(28,8,59,.18);border-radius:2px} .tixmini__qr{flex:none;display:block;width:92px;height:92px;padding:7px;background:#FEF1E2;color:#1C083B;border:1px solid rgba(28,8,59,.18);border-radius:2px;transition:border-color .2s var(--ease)} .tixmini__qr:hover{border-color:#FF4E4F} .tixmini__code{display:block;width:100%;height:100%;shape-rendering:crispEdges} .tixmini__body{min-width:0;flex:1} .tixmini__row{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font:400 13px/1.5 'Lexend',sans-serif;letter-spacing:.04em;color:rgba(28,8,59,.72)} .tixmini__row strong{font-weight:600;color:#1C083B} .tixmini__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px} .tixmini__list li{display:flex;gap:8px;align-items:center;font-size:12.5px;line-height:1.5;color:rgba(28,8,59,.68)} .tixmini__ico{flex:none;width:13px;height:13px;color:#FF4E4F} .tixmini__list a{color:#1C083B;text-decoration:underline;text-underline-offset:3px} .tixmini__list a:hover{color:#FF4E4F} @media (max-width:560px){.tixmini{flex-direction:column;align-items:flex-start;gap:14px}} @media (max-width:760px){ .tix__grid{grid-template-columns:1fr} .tix__aside{border-left:0;padding-left:0;border-top:1px solid rgba(197,202,249,.22);padding-top:22px} } /* ---------- 14 Organizers ---------- */ .org{background:#FEF1E2;color:#1C083B;border-top:1px solid rgba(28,8,59,.14);padding:clamp(56px,6vw,88px) var(--pad-x)} .org__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:clamp(32px,4vw,72px);align-items:start} .org__label{font:600 11px/1 'Lexend',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(28,8,59,.65)} .org__by{margin:16px 0 0;font-size:clamp(18px,1.7vw,22px);font-weight:500;line-height:1.55;max-width:34ch} .org__by a{color:#1C083B;text-decoration:underline;text-underline-offset:4px} .org__by a:hover{color:#FF4E4F} .org__legal{margin:16px 0 0;font-size:15px;line-height:1.75;color:rgba(28,8,59,.75);max-width:52ch} .org__chip{border:1px dashed rgba(28,8,59,.35);padding:2px 8px;font-size:12.5px;letter-spacing:.08em} /* ---------- Footer ---------- */ /* Bottom padding reserves the ~88px the fixed Deko launcher occupies (64px tall at bottom:24px), so the last footer row — the Privacy/Cookie/Terms policies, right-aligned where the launcher sits — is never covered when scrolled to the very bottom of the page. While the consent banner is open the reserve grows by its footprint (see the body:has(#cookie-banner) rules in the cookie block: +240px card, +80px desktop bar, 330px phone banner). */ .footer{background:#FEF1E2;color:#1C083B;border-top:1px solid rgba(28,8,59,.16);padding:clamp(44px,5vw,64px) var(--pad-x) clamp(96px,8vw,108px)} .footer__grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px)} /* Three blocks: brand, Summit, Contact. Column count is set explicitly per band so the mid band can place the blocks — with auto-fit, two columns (~569-877px) wrapped Contact under the tall brand block, leaving an empty cell beside it. Two 240px columns fit from 570px, three from 880px (pad-x and gap are vw-based). */ @media (min-width:570px){.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>div:first-child{grid-row:1/span 2}} @media (min-width:880px){.footer__grid{grid-template-columns:repeat(3,1fr)}.footer__grid>div:first-child{grid-row:auto}} .footer__brand{display:flex;align-items:center;gap:14px} .footer__brand img{display:block;width:38px;height:38px;border:1px solid rgba(28,8,59,.14)} .footer__wordmark{font:600 14px/1.3 'Lexend',sans-serif;letter-spacing:.22em;text-transform:uppercase} .footer__wordmark-sub{font:600 11px/1.5 'Lexend',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(28,8,59,.6)} .footer__when{margin:20px 0 0;font-size:14.5px;line-height:1.7;color:rgba(28,8,59,.72)} /* Social. The brand marks carry their own container (square, circle, badge), so the link is an invisible 40px hit target — a bordered box around them would read as container-on-container. The -10px pulls the first glyph's optical edge flush with the logo above it. */ .footer__social{margin:22px 0 0 -10px;display:flex;flex-wrap:wrap;gap:2px} .footer__social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:rgba(28,8,59,.6);transition:color .25s,transform .25s} .footer__social-link:hover{color:#FF4E4F;transform:translateY(-2px)} .footer__social-link svg{display:block;width:20px;height:20px} .footer__label{font:600 11px/1 'Lexend',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(28,8,59,.65)} .footer__links{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .footer__link{color:#1C083B;text-decoration:none;font:500 14.5px/1.4 'Lexend',sans-serif} .footer__link:hover{color:#FF4E4F} .footer__link--u{text-decoration:underline;text-underline-offset:4px} .footer__link svg{vertical-align:-2px;margin-right:7px} .footer__note{font:400 14px/1.4 'Lexend',sans-serif;color:rgba(28,8,59,.62)} .footer__note--sm{font-size:13px;line-height:1.6} .footer__bottom{margin-top:clamp(36px,4vw,52px);border-top:1px solid rgba(28,8,59,.12);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:baseline} .footer__copy{font:400 12.5px/1.5 'Lexend',sans-serif;color:rgba(28,8,59,.65)} .footer__policies{display:flex;flex-wrap:wrap;gap:12px 22px} .footer__policy{color:rgba(28,8,59,.65);font:400 12.5px/1.5 'Lexend',sans-serif;text-decoration:underline;text-underline-offset:3px} .footer__policy--btn{background:none;border:0;padding:0;cursor:pointer;color:rgba(28,8,59,.65);text-decoration:underline;text-underline-offset:3px} .footer__policy:hover{color:#FF4E4F} /* ---------- Cookie banner ---------- */ .cookie{position:fixed;left:18px;bottom:18px;z-index:80;max-width:min(430px,calc(100vw - 36px));background:rgba(28,8,59,.7);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid rgba(197,202,249,.28);color:#FEF1E2;padding:24px;box-shadow:0 18px 50px rgba(28,8,59,.35)} .cookie__label{font:600 11px/1 'Lexend',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#92F1CF} .cookie__text{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:rgba(254,241,226,.85)} .cookie__link{color:#FEF1E2;text-decoration:underline;text-underline-offset:3px} .cookie__link:hover{color:#FF4E4F} .cookie__actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px} .cookie__accept{background:#FF4E4F;color:#1C083B;border:1px solid #FF4E4F;border-radius:2px;padding:16px 20px;font:600 11.5px/1 'Lexend',sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,border-color .25s} .cookie__accept:hover{background:#FEF1E2;border-color:#FEF1E2} .cookie__essential{background:transparent;color:#FEF1E2;border:1px solid rgba(254,241,226,.45);border-radius:2px;padding:16px 20px;font:600 11.5px/1 'Lexend',sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,color .25s} .cookie__essential:hover{border-color:#FF4E4F;color:#FF4E4F} /* Consent banner vs. the rest of the fixed chrome and the footer (responsive audit). - Phones (<=600): the banner takes the full width at the bottom edge and the Deko launcher steps aside while it is open (.cookie precedes .deko as body siblings on every page that ships both; main.js toggles the banner via [hidden]; .deko--open already hides the launch row). Lifting it above the launcher instead left an iPhone SE with 83px of page between nav and banner. The max-height keeps it clear of the 84px fixed nav on short viewports (320x454: SE-class phones with chrome). - Laptops and desktops (>=1024): the 430x205 card landed on the hero CTAs at 768px-high viewports (the hero is min-height:100vh with align-items:center, so the buttons end ~180px above the fold — "Partner with DECODE" fully covered at 1366x768, 76% at 1280x768, 54px at 1440x780, 26px at 1920x940) and on the footer's social row + copyright when scrolled to the end. A slim full-width bar (~80px) clears both. While it shows, everything pinned to the bottom edge moves up by its height: the Deko anchor (launcher and panel together, so the launcher never sits on the open panel) and the footer's launcher reserve. [hidden] still wins over display:flex — see line 35. - Footer: the banner is fixed over the footer's last rows (social links, Summit links, copyright, the Privacy/Cookie/Terms/Cookie settings row) and, the footer being the end of the document, they could never be scrolled clear before the visitor consented. Reserve its footprint only while it is open: 205px card + 18px inset + air; 80px bar (100px at 1024-1179); the phone banner + 12px (193-216px with the buttons side by side, ~271px stacked below ~380px). Re-measure if the banner copy changes. Print already forces .footer padding, and browsers without :has() keep the launcher-only reserve. */ body:has(#cookie-banner:not([hidden])) .footer{padding-bottom:calc(clamp(96px,8vw,108px) + 240px)} @media (max-width:600px){ .cookie{left:12px;right:12px;max-width:none;bottom:12px;padding:18px;max-height:calc(100vh - 108px);max-height:calc(100dvh - 108px);overflow:auto} .cookie:not([hidden])~.deko .deko__launch-row{display:none} body:has(#cookie-banner:not([hidden])) .footer{padding-bottom:260px} } /* Under ~380px the two buttons stack and the banner grows to ~271px */ @media (max-width:389px){body:has(#cookie-banner:not([hidden])) .footer{padding-bottom:330px}} @media (min-width:1024px){ .cookie{left:0;right:0;bottom:0;max-width:none;border-width:1px 0 0;display:flex;align-items:center;gap:16px 32px;padding:16px var(--pad-x)} .cookie__label{flex:none} .cookie__text{margin:0;flex:1 1 auto;max-width:70ch} .cookie__actions{margin:0;flex:none} body:has(#cookie-banner:not([hidden])) .deko{bottom:80px} body:has(#cookie-banner:not([hidden])) .footer{padding-bottom:calc(clamp(96px,8vw,108px) + 80px)} } /* Keep the lifted panel under the 84px nav on 768px-high screens (472px tall there, the 560px cap above 900px). Excludes the max-height:560px short-window rule, which pins the panel top/bottom itself. */ @media (min-width:1024px) and (min-height:561px){ body:has(#cookie-banner:not([hidden])) .deko__panel{height:min(560px,calc(100vh - 296px))} } /* 1024-1179: the sentence wraps to three lines beside the label and buttons, so the bar is ~100px, not 80 — lift the anchor and the reserve by that much. */ @media (min-width:1024px) and (max-width:1179px){ body:has(#cookie-banner:not([hidden])) .deko{bottom:100px} body:has(#cookie-banner:not([hidden])) .footer{padding-bottom:calc(clamp(96px,8vw,108px) + 100px)} } @media (min-width:1024px) and (max-width:1179px) and (min-height:561px){ body:has(#cookie-banner:not([hidden])) .deko__panel{height:min(560px,calc(100vh - 316px))} } /* ---------- reCAPTCHA ---------- The v3 badge is fixed bottom-right at z-index 2000000000 and would sit on top of the Deko launcher. Google permits hiding it only if the attribution below is shown instead. With the forms gone that attribution lives only in .deko__note, on every page that ships Deko — delete one and you break Google's terms. `visibility` rather than `display` so the widget still initialises. */ .grecaptcha-badge{visibility:hidden !important} /* ---------- Deko chat widget ---------- Ported from the approved design (DECODE Chatbot.dc.html, section 07). Four deliberate deviations from it, all for reasons the static design could not show: every control is >= 44px (the design's 36px close button and 27px chips fail WCAG 2.5.8), the panel goes near-fullscreen below 600px (the design only ever drew the desktop 384x560), the reduced-motion rule is written out — the design preview relied on a blanket *{animation:none} that this sheet does not have — and the "Ask Deko" pill is opaque ink and hidden below the desktop-nav breakpoint (the design only ever drew it over the ink hero; as a fixed element it also crosses cream, mint and lavender sections, and its 178px row lands on page CTAs and the legal column below 1280px). */ @keyframes dkBlink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}} @keyframes dkFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-7px)}} @keyframes dkDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}} /* Zero-size anchor at the bottom-right; both children position against it. z-index 90 clears the nav (60) and the cookie banner (80), stays under .skip (200) */ .deko{position:fixed;right:0;bottom:0;z-index:90;font-family:'Lexend',sans-serif} /* Hidden until js/chat.js has wired the widget up (it adds .deko--ready on a successful init). Without this the launcher and its form would render even if chat.js failed to load, and a native submit of #deko-form would hit the JSON-only api/chat.php. The no-JS case is already covered by data-needs-js. */ .deko:not(.deko--ready){display:none} .deko__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Panel. visibility (not [hidden]) keeps it out of the tab order and the accessibility tree while still allowing the close animation to play out — that is what the delayed visibility transition buys. */ .deko__panel{position:absolute;right:clamp(14px,2vw,26px);bottom:104px;width:min(384px,calc(100vw - 32px));height:min(560px,calc(100vh - 136px));display:flex;flex-direction:column;background:#1C083B;border:1px solid rgba(197,202,249,.32);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden;transform-origin:100% 100%;opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s .28s} .deko--open .deko__panel{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s} .deko__head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#661454;flex:none} .deko__face{display:block;width:40px;height:40px;flex:none} .deko__id{min-width:0} .deko__name{font:600 15px/1.2 'Lexend',sans-serif;color:#FEF1E2} .deko__role{font:600 11px/1.4 'Lexend',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#92F1CF} .deko__status{width:8px;height:8px;border-radius:50%;background:#92F1CF;margin-left:auto;flex:none} .deko__close{width:44px;height:44px;flex:none;background:transparent;border:1px solid rgba(254,241,226,.35);border-radius:2px;color:#FEF1E2;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .25s,color .25s} .deko__close:hover{background:#FEF1E2;color:#661454} /* Clear sits beside close and must not be mistaken for it: no border, dimmer until hovered, and it lands on mint rather than the close button's cream. */ .deko__clear{width:44px;height:44px;flex:none;background:transparent;border:0;padding:0;color:rgba(254,241,226,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .25s} .deko__clear:hover{color:#92F1CF} .deko__clear[disabled]{opacity:.35;cursor:default} /* Six expressions, one SVG: the design overlaid five absolutely-positioned copies; here one [data-ex] on the root drives the 40px panel face and the 64px launcher face together. */ .deko__ex{display:none} .deko[data-ex="listen"] .deko__ex--listen,.deko[data-ex="think"] .deko__ex--think,.deko[data-ex="speak"] .deko__ex--speak,.deko[data-ex="delight"] .deko__ex--delight,.deko[data-ex="sorry"] .deko__ex--sorry,.deko[data-ex="rest"] .deko__ex--rest{display:inline} .deko[data-ex="sorry"] .deko__body{transform:rotate(-6deg);transform-box:fill-box;transform-origin:center} .deko__eyes{animation:dkBlink 4.2s infinite;transform-box:fill-box;transform-origin:center} /* Echo drift stays on the 64px launcher only — at 40px beside a blink it reads as jitter */ .deko__launch .deko__echo{animation:dkFloat 7s ease-in-out infinite} .deko__log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px;display:flex;flex-direction:column;gap:16px} .deko__row{display:flex;align-items:flex-end;gap:10px} .deko__row--user{justify-content:flex-end} .deko__avatar{display:block;width:26px;height:26px;flex:none} .deko__bot{max-width:80%} .deko__bubble{background:rgba(197,202,249,.14);color:#FEF1E2;border-radius:2px 10px 10px 10px;padding:12px 15px;font:400 14px/1.6 'Lexend',sans-serif} .deko__bubble--user{max-width:80%;background:#FF4E4F;color:#1C083B;border-radius:10px 2px 10px 10px;padding:12px 15px;font:500 14px/1.6 'Lexend',sans-serif} .deko__para+.deko__para{margin-top:10px} .deko__chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px} .deko__chip{display:inline-flex;align-items:center;min-height:44px;border:1px solid rgba(146,241,207,.55);color:#92F1CF;text-decoration:none;padding:8px 14px;border-radius:2px;font:600 11px/1 'Lexend',sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:background-color .25s,color .25s} .deko__chip:hover{background:#92F1CF;color:#1C083B} /* Lives permanently as the last log child, so new rows insert before it and it never has to be re-ordered */ .deko__typing{display:flex;align-items:flex-end;gap:10px} .deko__dots{background:rgba(197,202,249,.14);border-radius:2px 10px 10px 10px;padding:14px 16px;display:flex;gap:5px} .deko__dot{width:6px;height:6px;border-radius:50%;background:#92F1CF;animation:dkDot 1.1s infinite} .deko__dot:nth-child(2){animation-delay:.15s} .deko__dot:nth-child(3){animation-delay:.3s} .deko__quick{padding:0 16px 12px;display:flex;flex-wrap:wrap;gap:8px;flex:none} .deko__qr{display:inline-flex;align-items:center;min-height:44px;background:transparent;border:1px solid rgba(197,202,249,.45);color:#C5CAF9;padding:8px 14px;border-radius:2px;font:600 11px/1 'Lexend',sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s} .deko__qr:hover{background:#C5CAF9;color:#1C083B} .deko__form{border-top:1px solid rgba(254,241,226,.14);padding:12px 12px 6px;display:flex;gap:10px;flex:none} /* Honeypot. Was .form__hp, which died with the invite and partner forms while Deko's chat form still used it — leaving the "Website" field visible in the chat panel and every message a human typed into it silently rejected by chat.php's spam check. Re-homed here so the rule and its only consumer cannot drift apart again. Off-canvas rather than display:none: a bot that skips hidden fields must still see it. */ .deko__hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden} .deko__input{flex:1;min-width:0;box-sizing:border-box;height:46px;background:rgba(254,241,226,.07);border:1px solid rgba(254,241,226,.18);border-radius:2px;padding:12px 14px;color:#FEF1E2;font:400 14px/1.4 'Lexend',sans-serif} .deko__input::placeholder{color:rgba(254,241,226,.45)} .deko__input:focus{border-color:#FF4E4F} .deko__send{width:46px;height:46px;flex:none;background:#FF4E4F;border:1px solid #FF4E4F;border-radius:2px;color:#1C083B;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .25s,border-color .25s} .deko__send:hover{background:#FEF1E2;border-color:#FEF1E2} .deko__input[disabled],.deko__send[disabled],.deko__qr[disabled]{opacity:.5;cursor:default} .deko__note{margin:0;padding:0 14px 10px;font:400 11px/1.5 'Lexend',sans-serif;color:rgba(254,241,226,.42);flex:none} .deko__note a{color:rgba(254,241,226,.62);text-decoration:underline;text-underline-offset:3px} .deko__note a:hover{color:#FF4E4F} .deko__launch-row{position:absolute;right:clamp(14px,2vw,26px);bottom:24px;display:flex;align-items:center;gap:12px} /* Opaque ink, no backdrop blur: the design only ever drew this pill over the ink hero, but as a fixed element it also sits over cream, mint, lavender and yellow sections while scrolling, where an 8% cream frost is invisible and the blur smears the text underneath. On ink it looks the same as before. */ .deko__pill{background:#1C083B;border:1px solid rgba(254,241,226,.2);border-radius:2px;padding:10px 14px;font:600 11px/1 'Lexend',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#FEF1E2;white-space:nowrap} .deko--open .deko__pill{display:none} /* The label widens the fixed launcher row from 64px to 178px. Below the desktop-nav breakpoint that footprint intrudes up to 96px into the centred 820px legal column and passes over the partners inquiry CTAs while scrolling ("Open in your email app" at 1000-1200px, "Copy the address" at 700-834px). The pill is decorative (aria-hidden, the button has its own label): face only until 1280, where the launcher clears the CTA by 32px. */ @media (max-width:1279px){.deko__pill{display:none}} .deko__launch{position:relative;width:64px;height:64px;background:transparent;border:0;padding:0;cursor:pointer;transition:transform .2s ease} .deko__launch:hover{transform:scale(1.07)} .deko__launch svg{display:block;width:64px;height:64px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))} /* Ink ring on the tile itself (rect x=6 on the 120 viewBox — a box-shadow on the button would float 3px outside it): the lavender tile is otherwise lavender on lavender over .phero__geo2 and the #inquiry section, separated only by its shadow. */ .deko__launch svg>rect:first-child{stroke:#1C083B;stroke-width:4} .deko__unread{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#FF4E4F;border:2px solid #1C083B} @media (prefers-reduced-motion:reduce){ .deko__panel,.deko__launch,.deko__eyes,.deko__echo,.deko__dot,.deko__close,.deko__qr,.deko__chip,.deko__send{animation:none !important;transition:none !important} } /* Phones: the panel takes the screen and covers the fixed nav; the launcher steps aside while it is open. 16px on the input is not cosmetic — anything smaller makes iOS Safari zoom the whole page on focus. */ /* A landscape phone (812x375) is too wide for the phone rule below but far too short for the desktop one: the panel gets 239px and the message log is squeezed to 40px. Take the full height and drop the quick replies, which are the largest single piece of chrome — the log is what matters here. */ @media (max-height:560px) and (min-width:601px){ .deko__panel{position:fixed;right:clamp(14px,2vw,26px);top:8px;bottom:8px;height:auto;max-height:none} .deko__quick{display:none} .deko--open .deko__launch-row{display:none} } @media (max-width:600px){ /* position:fixed, not absolute — .deko is a ZERO-SIZE anchor pinned to the bottom-right, so an absolutely-positioned left:8px would resolve 8px past the right edge of the screen and put the panel out of view. */ .deko__panel{position:fixed;left:8px;right:8px;top:8px;bottom:8px;width:auto;height:auto;max-height:none} .deko--open .deko__launch-row{display:none} .deko__input{font-size:16px} .deko__log{padding:16px 14px} /* Quick replies as one horizontally scrolling row. Wrapped, the five chips take three rows (160px) and at 320x568 leave the message log 156px - less than the greeting bubble. One row is 56px and gives the log ~260px. */ .deko__quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .deko__quick::-webkit-scrollbar{display:none} .deko__qr{flex:none} } /* Touch targets. A finger needs ~44px; a mouse does not, and padding every link out on the desktop would loosen the footer and the card CTAs for no gain. So the expanded hit areas are scoped to coarse pointers. Inline links inside legal prose are deliberately excluded — WCAG 2.5.8 exempts targets set in a sentence, and padding them would break the line box. */ @media (pointer:coarse){ .footer__link,.footer__policy,.final__link,.tix__link, .venue__address-map,.nav__brand,.legal__back,.menu__mail{min-height:44px;display:inline-flex;align-items:center} .footer__links{gap:0} .venue__address-map{padding-bottom:0;align-items:flex-end;padding-top:12px} /* 44px box centred on the text: 15px margin + ~11px of box replaces the old 26px margin, and the hit area shrinks to the text instead of the full nav width. */ .menu__mail{align-self:flex-start;margin-top:15px} /* Legal "On this page" lists: 10-16 stacked links at a 32px pitch. 44px links on a 44px pitch; numerals stay aligned to the first line of wrapped labels (no align-items:center) and the box's inner spacing is unchanged. The list selector is qualified so it beats the page