/* =========================================================================
Vibe Coding Challenge event page — DATAFORT
-------------------------------------------------------------------------
Ported value-for-value from the approved prototype
(event-page-package/index.html, 9 Oct 2026).
Every rule is scoped to #df-event (or body.vcc-event-page), and the file
is enqueued on the "Vibe Coding Challenge" template only, so no existing
datafort.com page is affected.
The prototype's own nav bar and footer are NOT used: the live Divi Theme
Builder header and footer render instead, via get_header()/get_footer().
Their rules are left in place below but match no markup on this page.
========================================================================= */
/* -------------------------------------------------------------------------
Neutralise Divi globals inside this page only
---------------------------------------------------------------------- */
body.vcc-event-page #main-content .container { width: 100%; max-width: none; padding: 0; }
body.vcc-event-page #main-content .container::before { display: none; }
body.vcc-event-page #left-area { width: 100%; padding: 0; }
body.vcc-event-page #main-content { background: #041229; }
/* Divi sets `h1 span { font-size: 7vw }` and padding on p / h1-h3. */
#df-event h1 span, #df-event h1 em,
#df-event h2 span, #df-event h2 em,
#df-event h3 span, #df-event h3 em { font-size: inherit; }
#df-event ul, #df-event ol { list-style: none; margin: 0; padding: 0; }
#df-event img { max-width: 100%; }
#df-event dl, #df-event dt, #df-event dd { padding: 0; }
/* -------------------------------------------------------------------------
Prototype stylesheet (event.css), ported verbatim.
`body { margin: 0 }` removed: the live site sets its own body margin.
---------------------------------------------------------------------- */
#df-event{--navy:#071440;--midnight:#041229;--blue:#123ed9;--cyan:#22d3f3;--gold:#f3bd35;--white:#fff;--muted:#a9b9d6;--line:rgba(153,191,237,.22);color:var(--white);background:var(--midnight);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6;overflow:hidden;color-scheme:dark}#df-event *,#df-event *:before,#df-event *:after{box-sizing:border-box}#df-event a{color:inherit;text-decoration:none}#df-event button{font-family:inherit}#df-event p,#df-event h1,#df-event h2,#df-event h3{margin:0;padding:0;color:inherit;font-family:inherit}#df-event p+p{margin-top:20px}#df-event h2{font-size:clamp(32px,3.8vw,54px);line-height:1.08;letter-spacing:-1.8px;font-weight:700}#df-event h3{font-weight:700;font-size:23px;line-height:1.25;letter-spacing:-.5px}#df-event em{font-style:normal;color:var(--cyan)}#df-event .wrap{width:min(1200px,calc(100% - 96px));margin:0 auto}#df-event .section{padding:90px 0}#df-event .eyebrow{font-size:12px;line-height:1.5;letter-spacing:2px;text-transform:uppercase;font-weight:bold;color:var(--gold);margin-bottom:24px}#df-event .event-header{height:86px;max-width:1440px;margin:auto;padding:0 48px;display:flex;align-items:center;gap:40px;background:var(--navy)}#df-event .logo{width:187px;height:auto;display:block}#df-event .event-header nav{margin-left:auto;display:flex;gap:30px;font-size:14px}#df-event .event-header nav a:hover{color:var(--cyan)}#df-event .header-register{font-size:14px;font-weight:bold;color:var(--gold);border-left:1px solid var(--line);padding-left:32px}#df-event .header-register span{margin-left:12px}#df-event .hero{max-width:1440px;margin:auto;background:var(--midnight)}#df-event .hero-media{position:relative;aspect-ratio:16/9;background:#051725}#df-event video{display:block;width:100%;height:100%;object-fit:contain}#df-event .motion-toggle{position:absolute;right:16px;top:16px;display:flex;gap:7px;align-items:center;font-size:12px;padding:7px 10px;background:rgba(4,18,41,.9);border:1px solid rgba(255,255,255,.3);border-radius:4px;color:white;cursor:pointer}#df-event .event-bar{padding:28px 48px;display:flex;align-items:center;justify-content:space-between;gap:22px;background:var(--navy);border-bottom:1px solid var(--line)}#df-event .event-date,#df-event .event-format{display:flex;align-items:center;gap:14px}#df-event .event-date .date-number{font-size:53px;line-height:1;font-weight:bold;color:var(--gold);letter-spacing:-2px}#df-event .event-bar strong{display:block;font-size:16px}#df-event .event-bar div div>span{display:block;font-size:13px;color:var(--muted)}#df-event .live-dot{height:8px;width:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}#df-event .button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;font-size:15px;font-weight:bold;padding:17px 23px;border:0;cursor:pointer;line-height:1.4;min-height:56px;transition:background .18s,transform .18s}#df-event .button.gold{background:var(--gold);color:#071440}#df-event .button:hover{background:#ffcf57;transform:translateY(-2px)}#df-event .button span{font-size:23px;font-weight:normal;line-height:1}#df-event a:focus-visible,#df-event button:focus-visible,#df-event summary:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}#df-event .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}#df-event .intro-copy{color:#bdcbe1}#df-event .lead{font-size:24px;line-height:1.4;color:white}#df-event .text-link{display:inline-flex;gap:24px;color:var(--cyan);margin-top:25px;font-size:15px;font-weight:bold}#df-event .proof{margin-top:64px;display:flex;justify-content:space-between;gap:24px;font-size:12px;letter-spacing:.3px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted)}#df-event .proof span:before{content:'+';color:var(--gold);font-weight:bold;margin-right:10px}#df-event .audience{background:linear-gradient(120deg,#123bd1,#102f9c);position:relative}#df-event .audience:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px}#df-event .audience-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px}#df-event .section-copy{max-width:400px;color:#d1ddff;margin-top:26px}#df-event .department-tags{display:flex;flex-wrap:wrap;gap:8px;max-width:350px;margin-top:30px}#df-event .department-tags span{font-size:12px;padding:7px 12px;border:1px solid rgba(170,206,255,.35);background:rgba(0,20,77,.2)}#df-event .audience-rows article{display:flex;gap:24px;align-items:flex-start;padding:25px 0;border-top:1px solid rgba(183,219,255,.3)}#df-event .audience-rows article:last-child{border-bottom:1px solid rgba(183,219,255,.3)}#df-event .row-number{color:var(--cyan);font-size:13px;font-family:monospace;line-height:29px}#df-event .audience-rows p{font-size:15px;line-height:1.6;color:#d1ddff;margin-top:10px}#df-event .row-arrow{margin-left:auto;color:var(--cyan);font-size:23px}#df-event .section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:45px}#df-event .section-top>p{color:var(--muted);font-size:16px;line-height:1.6}#df-event .session-list{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}#df-event .session-list article{padding:30px 0;border-top:1px solid var(--line)}#df-event .session-index{font-family:monospace;font-size:12px;letter-spacing:1px;color:var(--cyan);display:block;margin-bottom:15px}#df-event .session-list h3{margin-bottom:14px;font-size:25px}#df-event .session-list p{color:#bdcbe1;font-size:16px;max-width:490px}#df-event .method{background:#0b225a;border-top:1px solid #1e4081;border-bottom:1px solid #1e4081}#df-event .method-header{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}#df-event .method-header h2{font-size:clamp(29px,3vw,44px)}#df-event .method-header>p{color:#c1d0ea;font-size:16px}#df-event .system-flow{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:center;margin-top:55px}#df-event .flow-box{min-height:270px;border:1px solid #247bb2;position:relative;padding:25px;background:linear-gradient(150deg,#123974,#0a2051);box-shadow:inset 0 0 20px rgba(35,157,220,.06)}#df-event .flow-box:before,#df-event .flow-box:after{content:'';position:absolute;height:7px;width:7px;background:var(--cyan);left:-4px;top:50%;box-shadow:0 0 10px rgba(34,211,243,.4)}#df-event .flow-box:after{left:auto;right:-4px}#df-event .flow-code{font-family:monospace;letter-spacing:1.5px;font-size:10px;color:var(--cyan);display:block;margin-bottom:18px}#df-event .flow-box svg{height:40px;width:40px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;display:block;margin-bottom:19px}#df-event .flow-box h3{font-size:24px;margin-bottom:13px}#df-event .flow-box p{font-size:14px;color:#b9ccec;line-height:1.7}#df-event .connector{height:1px;background:var(--cyan);position:relative}#df-event .connector>span{position:absolute;right:8px;top:-21px;font-size:26px;color:var(--cyan)}#df-event .output{border-color:#c9992e;background:linear-gradient(145deg,#163057,#111f3c)}#df-event .output .flow-code,#df-event .output svg{color:var(--gold);stroke:var(--gold)}#df-event .output:before,#df-event .output:after{background:var(--gold)}#df-event .method-footer{display:flex;justify-content:space-between;align-items:center;gap:50px;margin-top:37px}#df-event .method-footer>p{font-size:17px;color:#c1d0ea;max-width:650px}#df-event .first-solved{display:flex;align-items:center;gap:16px;flex-shrink:0}#df-event .filled-three{font-size:92px;font-weight:800;color:var(--gold);line-height:1;letter-spacing:-5px}#df-event .first-solved strong,#df-event .first-solved div>span{display:block;line-height:1.4;font-size:18px}#df-event .first-solved strong{color:var(--gold)}#df-event .method-note{border-top:1px solid var(--line);padding-top:22px;margin-top:30px;font-size:13px;color:#a9bedb}#df-event .speaker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}#df-event .speaker{border:1px solid var(--line);background:#091c3a}#df-event .speaker-photo{position:relative;background:#12366d;overflow:hidden;aspect-ratio:1.3}#df-event .speaker-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%}#df-event .speaker:nth-child(3) img{object-position:center 31%}#df-event .speaker-photo>span{position:absolute;bottom:0;left:0;padding:7px 13px;font-family:monospace;background:var(--blue);font-size:10px;letter-spacing:1px;color:white}#df-event .speaker-copy{padding:26px}#df-event .speaker-role{font-size:12px;color:var(--cyan);margin-top:6px}#df-event .speaker-copy p:last-child{font-size:15px;line-height:1.6;color:#b9c9e1;margin-top:20px}#df-event .faq{background:#081936;border-top:1px solid var(--line)}#df-event .faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}#df-event .faq-list details{border-top:1px solid var(--line)}#df-event .faq-list details:last-child{border-bottom:1px solid var(--line)}#df-event summary{display:flex;align-items:center;justify-content:space-between;gap:25px;list-style:none;cursor:pointer;font-weight:bold;font-size:16px;padding:24px 0}#df-event summary::-webkit-details-marker{display:none}#df-event summary span{color:var(--cyan);font-size:24px;font-weight:normal;transition:transform .15s}#df-event details[open] summary span{transform:rotate(45deg)}#df-event details p{color:#b9c9e1;font-size:15px;line-height:1.65;margin-bottom:25px;padding-right:30px}#df-event .register{background:radial-gradient(ellipse at 20% 100%,#175edc 0,transparent 65%),#0c32b9}#df-event .register-grid{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:70px}#df-event .register h2{font-size:clamp(42px,4.8vw,70px);letter-spacing:-2.3px}#df-event .register h2 em{color:var(--gold)}#df-event .register-grid>div>p:last-child{margin-top:25px;font-size:21px;color:#d3e2ff}#df-event .registration-card{padding:34px;background:#061d50;border:1px solid rgba(116,209,255,.5);box-shadow:0 15px 40px rgba(0,15,57,.2)}#df-event .registration-type{display:block;font-family:monospace;color:var(--cyan);letter-spacing:1.4px;font-size:11px;margin-bottom:20px}#df-event .registration-card h3{font-size:28px;line-height:1.2}#df-event dl{margin:27px 0}#df-event dl div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}#df-event dt{color:var(--muted)}#df-event dd{margin:0;color:white}#df-event .registration-card .button{width:100%;font-size:14px;padding:17px 18px}#df-event .registration-small{font-size:11px;text-align:center;color:var(--muted);margin-top:12px}#df-event .preview-registration-note{color:#f5d784;background:#33281a;border:1px solid #66552d;padding:10px;font-size:12px;line-height:1.4;margin-top:17px}#df-event .event-footer{padding:45px 0 22px;background:#041026}#df-event .footer-inner{display:flex;justify-content:space-between;gap:35px}#df-event .footer-inner p{font-size:12px;color:var(--muted);margin-top:20px}#df-event .footer-inner>div:last-child{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}#df-event .footer-bottom{display:flex;justify-content:space-between;gap:25px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:35px}#df-event dialog{position:fixed;margin:auto;background:#071a40;color:white;width:min(480px,calc(100% - 40px));padding:42px;border:1px solid var(--cyan);box-shadow:0 10px 70px #0009}#df-event dialog::backdrop{background:#020b21ba;backdrop-filter:blur(4px)}#df-event dialog h2{font-size:30px;letter-spacing:-1px}#df-event dialog p:not(.eyebrow){margin:20px 0 25px;font-size:15px;color:#b9c9e1}#df-event .dialog-close{position:absolute;right:12px;top:8px;background:none;border:0;font-size:30px;color:white;cursor:pointer}#df-event .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){#df-event .hero-media{aspect-ratio:16/9}}
@media(max-width:1100px){#df-event .event-header{padding:0 32px}#df-event .wrap{width:calc(100% - 64px)}#df-event .event-bar{padding:24px 32px;flex-wrap:wrap}#df-event .event-format{display:none}#df-event .intro-grid,#df-event .audience-grid{gap:45px}#df-event .method-header{grid-template-columns:1fr 1fr;gap:40px}#df-event .proof{flex-wrap:wrap}#df-event .register-grid{gap:45px}#df-event .flow-box{padding:22px;min-height:283px}#df-event .system-flow{grid-template-columns:1fr 35px 1fr 35px 1fr}#df-event .speaker-grid{gap:18px}#df-event .speaker-copy{padding:22px}#df-event .method-footer{gap:30px}}
@media(max-width:760px){#df-event{font-size:16px}#df-event .wrap{width:calc(100% - 40px)}#df-event .section{padding:60px 0}#df-event .event-header{height:68px;padding:0 20px;gap:20px}#df-event .event-header .logo{width:143px}#df-event .event-header nav{display:none}#df-event .header-register{margin-left:auto;border:0;padding:0;font-size:13px}#df-event .hero-media{aspect-ratio:16/9}#df-event .motion-toggle{top:8px;right:8px;padding:5px 7px}#df-event .motion-label{display:none}#df-event .event-bar{padding:22px 20px;gap:20px}#df-event .event-bar .button{width:100%}#df-event .event-date .date-number{font-size:45px}#df-event .intro-grid,#df-event .audience-grid,#df-event .method-header,#df-event .register-grid,#df-event .faq-grid{grid-template-columns:1fr;gap:30px}#df-event .intro h2,#df-event .audience h2{font-size:41px}#df-event .lead{font-size:21px}#df-event .proof{margin-top:35px;gap:12px;flex-direction:column}#df-event .eyebrow{margin-bottom:18px;font-size:10px;letter-spacing:1.5px}#df-event .section-copy{max-width:none}#df-event .department-tags{max-width:none}#df-event .audience-rows article{gap:17px}#df-event .section-top{display:block;margin-bottom:30px}#df-event .section-top>p{margin-top:20px}#df-event .session-list{grid-template-columns:1fr}#df-event .session-list article{padding:26px 0}#df-event .system-flow{grid-template-columns:1fr;margin-top:35px}#df-event .flow-box{min-height:0;padding:25px 25px 25px 90px}#df-event .flow-box svg{position:absolute;left:25px;top:61px}#df-event .flow-box p br{display:none}#df-event .flow-box p br:after{content:' '}#df-event .flow-box:before{top:-4px;left:50%}#df-event .flow-box:after{top:auto;bottom:-4px;right:auto;left:50%}#df-event .connector{width:1px;height:34px;justify-self:center}#df-event .connector>span{top:3px;right:-11px;transform:rotate(90deg);font-size:24px}#df-event .flow-code{margin-bottom:12px}#df-event .flow-box h3{margin-bottom:9px}#df-event .method-footer{align-items:flex-start;flex-direction:column;gap:25px}#df-event .filled-three{font-size:78px}#df-event .speaker-grid{grid-template-columns:1fr;gap:20px}#df-event .speaker{display:grid;grid-template-columns:130px 1fr;align-items:start}#df-event .speaker-photo{aspect-ratio:1;height:150px}#df-event .speaker-photo>span{font-size:8px;letter-spacing:.3px;padding:6px;width:100%}#df-event .speaker-copy{padding:18px}#df-event .speaker-copy h3{font-size:22px}#df-event .speaker-copy p:last-child{margin-top:14px;font-size:14px}#df-event .register h2{font-size:44px}#df-event .registration-card{padding:27px}#df-event .footer-inner{display:block}#df-event .footer-inner>div:last-child{margin-top:30px}#df-event .faq-grid{gap:25px}#df-event .method-header h2{font-size:32px}#df-event h2{letter-spacing:-1.3px}}
@media(max-width:400px){#df-event .speaker{grid-template-columns:105px 1fr}#df-event .speaker-photo{height:130px}#df-event .speaker-copy{padding:15px}#df-event .speaker-copy h3{font-size:20px}#df-event .register h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){#df-event *,#df-event *:before,#df-event *:after{scroll-behavior:auto!important;transition:none!important}}
#df-event #audience-title{font-size:clamp(29px,3vw,42px);line-height:1.15;letter-spacing:-1.2px;max-width:520px}
#df-event .takeaways{background:#0b225a;border-block:1px solid #1e4081}
#df-event .takeaways-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
#df-event .takeaways-intro{color:#c1d0ea;margin-top:28px;max-width:440px}
#df-event .takeaway-list article{display:flex;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
#df-event .takeaway-list article:last-child{border-bottom:1px solid var(--line)}
#df-event .takeaway-list article>span{color:var(--cyan);font-family:monospace;font-size:13px;line-height:28px}
#df-event .takeaway-list h3{font-size:22px;margin-bottom:12px}
#df-event .takeaway-list p{font-size:15px;line-height:1.6;color:#bdcbe1}
#df-event .speaker--gavin .speaker-photo img{object-position:center top;transform:scale(1.4);transform-origin:68% 8%}
#df-event .speaker-copy>p:not(.speaker-role){font-size:15px;line-height:1.6;color:#b9c9e1;margin-top:20px}
#df-event .linkedin-profile{display:flex;align-items:center;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--cyan)}
#df-event .linkedin-profile:hover{color:white}
#df-event .profile-thumbnail{height:32px;width:32px;object-fit:cover;border-radius:50%;flex-shrink:0;border:1px solid #718ab3}
#df-event .speaker--gavin .profile-thumbnail{object-position:68% 24%}
#df-event .linkedin-badge{font-weight:bold;font-family:Arial,sans-serif;background:#0a66c2;border-radius:2px;color:white;padding:0 4px;font-size:12px;line-height:18px}
#df-event .linkedin-profile>span:last-child{margin-left:auto;font-size:18px}
@media(max-width:1100px){#df-event .takeaways-grid{gap:45px}}
@media(max-width:760px){#df-event .takeaways-grid{grid-template-columns:1fr;gap:30px}#df-event #audience-title{font-size:32px}#df-event .linkedin-profile{flex-wrap:wrap;font-size:11px;gap:6px}#df-event .speaker--gavin .speaker-photo img{transform:scale(1.35);transform-origin:68% 8%}#df-event .speaker-copy>p:not(.speaker-role){font-size:14px;margin-top:14px}}
/* -------------------------------------------------------------------------
Correction to the ported stylesheet
-------------------------------------------------------------------------
`.register-grid > div > p:last-child` is meant to be the 21px lead
paragraph in the left-hand column of the registration panel, but the
selector also matches the last inside the registration card.
In the prototype that last
was the yellow "draft preview" note, so the
mis-match was invisible. With a live Eventbrite URL the note is not
rendered, and the rule landed on "Registration opens in a new tab."
instead, blowing it up from 11px to 21px. Restore the intended styling.
---------------------------------------------------------------------- */
#df-event .register-grid .registration-card p.registration-small {
font-size: 11px;
color: var(--muted);
text-align: center;
margin-top: 12px;
}
/* -------------------------------------------------------------------------
Correction to the ported stylesheet — speaker cards below 760px
-------------------------------------------------------------------------
Below 760px the speaker card becomes a two-column grid (130px photo, then
the copy; 105px below 400px). But `.speaker-photo` keeps `aspect-ratio:1`
and is given a fixed `height`, so its WIDTH is derived from that height —
150px against a 130px track, and 130px against a 105px track. The photo
therefore overflowed its column and sat on top of the speaker's name and
role, clipping the first character or two of every line.
Letting the grid track set the width, with the height kept as designed,
fixes the overlap and leaves the layout otherwise identical. The images
are object-fit:cover, so they still fill the box.
---------------------------------------------------------------------- */
@media (max-width: 760px) {
#df-event .speaker-photo { width: 100%; aspect-ratio: auto; height: 150px; }
}
@media (max-width: 400px) {
#df-event .speaker-photo { height: 130px; }
}
/* -------------------------------------------------------------------------
New speaker headshots — 12 Oct 2026
-------------------------------------------------------------------------
The three photos supplied on 12 Oct are a matched set: same studio, same
3:4 portrait crop, face centred. The prototype's per-person crop patches
were tuned to the old, mismatched images — Gavin's in particular zoomed to
140% around a point 68%/8% across his old photo, which badly over-crops the
new one. With a uniform set the shared `object-fit: cover` framing is
correct for all three, so the per-person patches are reset here.
---------------------------------------------------------------------- */
#df-event .speaker-photo img,
#df-event .speaker--gavin .speaker-photo img,
#df-event .speaker:nth-child(3) .speaker-photo img {
object-position: center 18%;
transform: none;
}
#df-event .profile-thumbnail,
#df-event .speaker--gavin .profile-thumbnail {
object-position: center 22%;
}
@media (max-width: 760px) {
#df-event .speaker--gavin .speaker-photo img { transform: none; }
}