/* The Unordinary — shared site styles. Routed build, June 2026. */ :root{ --ink:#111111; --white:#FFFFFF; --dark:#1A1A1A; --body:#555555; --pink:#FF00C7; --yellow:#FFCC00; --teal:#3CDBC0; --accent:#3CDBC0; --accent-soft:#E4F8F4; --maxw:1180px; } /* Per-page accent (set on ) */ .accent-teal{--accent:#3CDBC0;--accent-soft:#E4F8F4;} .accent-pink{--accent:#FF00C7;--accent-soft:#FFF0F7;} .accent-yellow{--accent:#FFCC00;--accent-soft:#FFF8DD;} *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:"Inter",system-ui,Arial,sans-serif; background:var(--white); color:var(--body); -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} h1,h2,h3{font-family:"Anton",Impact,sans-serif;font-weight:400;line-height:0.94;letter-spacing:0.005em;} a{color:inherit;} img{max-width:100%;display:block;} /* ---------- TICKER ---------- */ .ticker{background:var(--ink);color:var(--white);border-bottom:1px solid #2a2a2a;overflow:hidden;white-space:nowrap;} .ticker__inner{display:inline-block;padding:9px 0;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.04em;animation:scroll 30s linear infinite;} .ticker__inner span{padding:0 14px;} .ticker__inner b{font-weight:700;} .ticker__inner b:nth-of-type(3n+1){color:var(--teal);} .ticker__inner b:nth-of-type(3n+2){color:var(--pink);} .ticker__inner b:nth-of-type(3n){color:var(--yellow);} @keyframes scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}} /* ---------- NAV ---------- */ .nav{position:sticky;top:0;z-index:60;background:var(--ink);color:var(--white);} .nav__bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto;} .brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:25px;letter-spacing:-0.01em;color:var(--white);text-decoration:none;cursor:pointer;} .brand .dot{color:var(--accent);} .brand-logo{height:32px;width:auto;display:block;} @media(min-width:1025px){.brand-logo{height:44px;}} .nav__links{display:flex;gap:2px;flex-wrap:wrap;align-items:center;} .nav__links a{font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:14px;letter-spacing:0.01em;text-decoration:none;color:var(--white);padding:7px 11px;border:2px solid transparent;cursor:pointer;} .nav__links a:hover{color:var(--accent);} .nav__links a.active{border-color:var(--accent);color:var(--accent);} .nav__toggle{display:none;background:none;border:2px solid var(--white);color:var(--white);font-family:"Space Grotesk",sans-serif;font-size:14px;padding:8px 12px;cursor:pointer;} /* ---------- PAGE / SECTION ---------- */ main{display:block;animation:fade .25s ease;} @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} section{padding:84px 0;} section.ink{background:var(--ink);color:#e8e8e8;--bord:rgba(255,255,255,.28);border-bottom:3px solid var(--ink);} section.paper{background:var(--white);color:var(--body);--bord:var(--ink);border-bottom:3px solid var(--ink);} section.soft{background:var(--accent-soft);color:var(--body);--bord:var(--ink);border-bottom:3px solid var(--ink);} .eyebrow{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.06em;display:flex;align-items:center;gap:9px;margin-bottom:18px;width:fit-content;} .eyebrow::before{content:"";width:26px;height:4px;background:var(--accent);display:inline-block;} .ink .eyebrow{color:var(--accent);} .paper .eyebrow,.soft .eyebrow{color:var(--dark);} /* ---------- HERO ---------- */ .hero{background:var(--ink);color:var(--white);padding:96px 0 90px;border-bottom:3px solid var(--ink);position:relative;} .hero h1{font-size:clamp(3rem,9vw,7.5rem);color:var(--accent);max-width:15ch;} .hero .lead{font-size:clamp(1.12rem,2.3vw,1.55rem);max-width:62ch;margin-top:28px;color:#e8e8e8;font-weight:400;} .hero .tag{position:absolute;top:28px;right:24px;font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:0.04em;color:#888;border:2px solid #444;padding:5px 9px;} /* ---------- TYPE ---------- */ .h-sec{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:18px;display:inline-block;padding-bottom:10px;border-bottom:6px solid var(--accent);} .ink .h-sec{color:var(--accent);} .paper .h-sec,.soft .h-sec{color:var(--dark);} p.body{font-size:1.08rem;max-width:64ch;margin-bottom:18px;} .lede{font-size:1.3rem;max-width:60ch;margin-bottom:26px;} /* ---------- CARDS ---------- */ .card.c-teal{--cardaccent:#3CDBC0;} .card.c-pink{--cardaccent:#FF00C7;} .card.c-yellow{--cardaccent:#FFCC00;} .grid{display:grid;gap:0;margin-top:40px;border-top:3px solid var(--bord);border-left:3px solid var(--bord);} .grid--4{grid-template-columns:repeat(2,1fr);} .card{border-right:3px solid var(--bord);border-bottom:3px solid var(--bord);padding:30px;cursor:pointer;transition:background .15s,color .15s;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;background:transparent;text-decoration:none;} a.card{text-decoration:none;color:inherit;} .card:hover{background:var(--cardaccent,var(--accent));color:var(--ink);} .card:hover h3,.card:hover p,.card:hover .go,.card:hover .num{color:var(--ink);} .card .num{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.04em;color:var(--body);display:flex;align-items:center;gap:9px;} .card .num::before{content:"";width:14px;height:14px;background:var(--cardaccent,var(--accent));display:inline-block;} .card h3{font-family:"Anton",sans-serif;font-size:1.7rem;margin:18px 0 10px;color:var(--dark);} .card p{font-size:1rem;color:var(--body);} .card .go{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.03em;margin-top:18px;text-decoration:underline;color:var(--dark);} .ink .card h3{color:#fff;} .ink .card p,.ink .card .go,.ink .card .num{color:#cfcfca;} /* ---------- BLOCK LIST ---------- */ .stack{margin-top:36px;display:grid;gap:0;border-top:3px solid var(--bord);} .stack .row{border-bottom:3px solid var(--bord);padding:30px 0;display:grid;grid-template-columns:64px 1fr;gap:18px;} .stack .row .n{font-family:"Anton",sans-serif;font-size:1.8rem;color:var(--accent);} .stack .row h3{font-family:"Anton",sans-serif;font-size:1.5rem;margin-bottom:10px;color:var(--dark);} .ink .stack .row h3{color:#fff;} /* ---------- PRINCIPLES / BELIEFS ---------- */ .beliefs{list-style:none;margin-top:30px;border-top:3px solid var(--bord);} .beliefs li{border-bottom:3px solid var(--bord);padding:22px 0;font-size:1.25rem;display:flex;gap:16px;align-items:flex-start;} .beliefs li::before{content:"";flex:0 0 auto;width:22px;height:14px;margin-top:8px;background:var(--accent);display:inline-block;} /* ---------- AI PAGE SPLIT ---------- */ .split{display:grid;grid-template-columns:1.6fr 1fr;gap:0;margin-top:40px;border:3px solid var(--bord);} .split__left{padding:36px;border-right:3px solid var(--bord);} .split__right{padding:0;background:var(--ink);color:var(--white);} .path{border-bottom:3px solid var(--bord);padding:24px 0;} .path:first-child{padding-top:0;} .path:last-child{border-bottom:none;padding-bottom:0;} .path h3{font-family:"Anton",sans-serif;font-size:1.4rem;color:var(--dark);margin-bottom:8px;} /* ---------- DOLLY CHAT BOX (light, June-style presentation) ---------- */ .chat{background:#fff;border:3px solid var(--ink);max-width:780px;padding:20px;display:flex;flex-direction:column;} .chat__messages{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;min-height:160px;max-height:380px;overflow-y:auto;} .chat__msg{display:flex;} .chat__msg.user{justify-content:flex-end;} .chat__bubble{font-size:1rem;line-height:1.55;padding:12px 15px;max-width:85%;color:var(--dark);} .chat__msg.bot .chat__bubble{background:var(--accent-soft);border-left:4px solid var(--accent);} .chat__msg.user .chat__bubble{background:#F2F2F2;border-right:4px solid #BDBDBD;} .chat__bubble p{margin:0 0 8px;} .chat__bubble p:last-child{margin:0;} .chat__bubble a{color:var(--dark);} .chat__starters{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 22px;} .chat__starters button{text-align:left;background:#fff;border:2px solid var(--ink);color:var(--dark);font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:0.85rem;padding:9px 13px;cursor:pointer;transition:.15s;} .chat__starters button:hover{background:var(--accent);color:var(--ink);} .chat__input-row{display:flex;gap:10px;align-items:stretch;} .chat__input{flex:1;background:#fff;border:2px solid var(--ink);color:var(--dark);font-family:"Inter",sans-serif;font-size:1rem;padding:11px 12px;resize:none;line-height:1.4;} .chat__input::placeholder{color:#999;} .chat__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .chat__send{background:var(--ink);color:#fff;border:2px solid var(--ink);padding:0 18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;} .chat__send:hover{background:var(--accent);color:var(--ink);} .chat__send:disabled{opacity:0.5;cursor:default;} .chat__small{font-size:12px;color:#777;margin-top:12px;line-height:1.5;max-width:780px;} .chat__small a{color:#555;} .chat__dots span{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin:0 2px;animation:blink 1s infinite;} .chat__dots span:nth-child(2){animation-delay:.2s;} .chat__dots span:nth-child(3){animation-delay:.4s;} @keyframes blink{0%,80%,100%{opacity:0.2;}40%{opacity:1;}} /* webinar + prompts */ .blockrow{margin-top:54px;} .video{margin-top:24px;aspect-ratio:16/9;width:100%;max-width:760px;border:3px solid var(--bord);} /* ---------- RESOURCE LIBRARY (expandable tracklist) ---------- */ .library{margin-top:36px;border-top:3px solid var(--bord);} .library details{border-bottom:3px solid var(--bord);} .library summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:22px 18px;transition:background .15s;} .library summary::-webkit-details-marker{display:none;} .library .ln{font-family:"Anton",sans-serif;font-size:1.8rem;color:var(--accent);line-height:1;} .library .lt{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-0.01em;color:var(--dark);} .library .marker{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.6rem;color:var(--dark);transition:transform .15s;line-height:1;} .library details[open] .marker{transform:rotate(45deg);} .library details:nth-of-type(3n+1) summary:hover{background:#3CDBC0;} .library details:nth-of-type(3n+2) summary:hover{background:#FF00C7;} .library details:nth-of-type(3n+3) summary:hover{background:#FFCC00;} .library summary:hover .ln,.library summary:hover .lt,.library summary:hover .marker{color:var(--ink);} .library .panel{padding:6px 18px 30px;} .library .panel .prompts{margin-top:18px;} .prompts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border-top:3px solid var(--bord);border-left:3px solid var(--bord);} .prompt{border-right:3px solid var(--bord);border-bottom:3px solid var(--bord);padding:26px;} .prompt h3{font-family:"Anton",sans-serif;font-size:1.3rem;margin-bottom:10px;color:var(--dark);} .prompt code{font-family:"Space Grotesk",monospace;font-size:0.85rem;display:block;background:var(--ink);color:var(--accent);padding:14px;margin-top:14px;white-space:pre-wrap;border-left:5px solid var(--accent);} .btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;} .btn{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;letter-spacing:0.01em;text-decoration:none;border:3px solid var(--ink);padding:12px 18px;display:inline-block;transition:.15s;cursor:pointer;color:var(--dark);} .paper .btn:hover,.soft .btn:hover{background:var(--ink);color:var(--white);} .hero .btnrow{margin-top:26px;} .btn--hero{border-color:var(--accent);color:var(--white);} .btn--hero:hover{background:var(--accent);color:var(--ink);} /* ---------- INSIGHTS FEED ---------- */ .feed{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:3px solid var(--bord);border-left:3px solid var(--bord);} .post{border-right:3px solid var(--bord);border-bottom:3px solid var(--bord);padding:26px;cursor:pointer;transition:.15s;} .post:hover{background:var(--accent);color:var(--ink);} .post:hover h3,.post:hover p,.post:hover .meta{color:var(--ink);} .feed .post:nth-child(3n+1):hover{background:#3CDBC0;} .feed .post:nth-child(3n+2):hover{background:#FF00C7;} .feed .post:nth-child(3n+3):hover{background:#FFCC00;} a.post{display:block;text-decoration:none;color:inherit;} .post .meta{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:12px;letter-spacing:0.03em;color:var(--body);} .post h3{font-family:"Anton",sans-serif;font-size:1.35rem;margin:14px 0 8px;color:var(--dark);} .post p{color:var(--body);} /* ---------- AGENTS / FOUNDERS ---------- */ .agents{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:36px;border-top:3px solid var(--bord);border-left:3px solid var(--bord);} .agent{border-right:3px solid var(--bord);border-bottom:3px solid var(--bord);padding:26px;} .agent .role{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.04em;color:var(--accent);} .agent h3{font-family:"Anton",sans-serif;font-size:1.5rem;margin:6px 0 10px;color:#fff;} .agent p{color:#cfcfca;font-size:0.98rem;} .founder{display:grid;grid-template-columns:220px 1fr;gap:34px;padding:36px 0;border-bottom:3px solid var(--bord);} .founder:first-of-type{border-top:3px solid var(--bord);} .photo{aspect-ratio:1/1;border:3px solid var(--accent);overflow:hidden;background:#eee;} .photo img{width:100%;height:100%;object-fit:cover;display:block;} .founder h3{font-family:"Anton",sans-serif;font-size:1.9rem;color:var(--dark);margin-bottom:4px;} .founder .title{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.03em;color:var(--body);margin-bottom:16px;} blockquote{border-left:5px solid var(--accent);padding:8px 0 8px 20px;margin:20px 0 8px;font-size:1.25rem;font-style:italic;color:var(--dark);} blockquote + .cite{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:0.03em;color:var(--body);} /* ---------- FOOTER ---------- */ footer{background:var(--ink);color:var(--white);padding:80px 0 40px;} footer .h-sec{color:var(--accent);font-size:clamp(2.6rem,8vw,6rem);border-bottom:none;padding-bottom:0;} footer a.mail{font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(1.3rem,4vw,2.2rem);color:var(--white);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;display:inline-block;margin-top:14px;} footer a.mail:hover{color:var(--accent);} footer .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:60px;padding-top:24px;border-top:2px solid #2a2a2a;font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:0.02em;color:#888;} footer .foot-bottom a{color:#888;text-decoration:none;} footer .foot-bottom a:hover{color:var(--accent);} footer .acknowledgement{margin-top:28px;padding-top:24px;border-top:2px solid #2a2a2a;font-size:0.92rem;line-height:1.65;color:#999;max-width:72ch;} /* ---------- RESPONSIVE ---------- */ @media(max-width:1024px){ .nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--ink);padding:12px 24px 20px;border-bottom:3px solid var(--accent);} .nav__links.open{display:flex;} .nav__links a{padding:12px 0;border:none;border-bottom:1px solid #222;} .nav__toggle{display:block;} .nav{position:relative;} .grid--4{grid-template-columns:1fr;} .split{grid-template-columns:1fr;} .split__left{border-right:none;border-bottom:3px solid var(--bord);} .prompts{grid-template-columns:1fr;} .feed{grid-template-columns:1fr;} .agents{grid-template-columns:1fr;} .founder{grid-template-columns:1fr;} .photo{max-width:240px;} } /* --- refinements: hierarchy, focus, motion --- */ .card h3,.stack .row h3,.path h3,.prompt h3,.agent h3,.founder h3,.chat__title{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-0.01em;line-height:1.12;} .ink .h-sec{border-bottom:0;padding-bottom:0;} a:focus-visible,[role="link"]:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--accent);} .ticker:hover .ticker__inner,.ticker:focus-within .ticker__inner{animation-play-state:paused;} @media (prefers-reduced-motion: reduce){ .ticker__inner{animation:none;transform:translateX(0);} main{animation:none;} html{scroll-behavior:auto;} }