/* =========================================================================== Styles for pages added after the original single-page site. Kept separate from site.css so that file remains a byte-for-byte extraction of what index.php used to carry inline, and can be diffed against it. Everything here builds on the variables already defined in site.css. =========================================================================== */ .ai-wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* ---------- hero ---------- The node canvas is the page's signature. It sits behind the type, masked so it dissolves at the edges instead of ending in a hard rectangle. */ .ai-hero{padding:186px 0 104px;text-align:left;position:relative;overflow:hidden;min-height:82vh; display:flex;align-items:center} .ai-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; -webkit-mask-image:radial-gradient(ellipse 78% 72% at 62% 46%,#000 38%,transparent 100%); mask-image:radial-gradient(ellipse 78% 72% at 62% 46%,#000 38%,transparent 100%)} .ai-hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(ellipse at 22% 8%,rgba(214,55,101,.18),transparent 58%)} .ai-hero .ai-wrap{position:relative;z-index:2;width:100%} .ai-hero .s-label{position:relative;z-index:2} .ai-hero h1{position:relative;z-index:2;font-family:'Playfair Display',serif;font-weight:700; font-size:clamp(2.3rem,6.4vw,5.1rem);line-height:1.02;margin:18px 0 26px;letter-spacing:-.028em; max-width:15ch} .ai-hero h1 em{font-style:italic;color:var(--p)} .ai-hero p{position:relative;z-index:2;max-width:520px;margin:0;font-size:clamp(.95rem,1.6vw,1.12rem); line-height:1.78;color:rgba(255,255,255,.6)} /* Hairline that ties the hero to the first section, echoing the .s-label rule. */ .ai-hero-rule{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(214,55,101,.5) 22%,rgba(255,255,255,.09) 55%,transparent)} /* ---------- generic section ---------- */ .ai-sec{padding:78px 0;border-top:1px solid rgba(255,255,255,.06)} .ai-sec h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.5rem,3.2vw,2.4rem); margin:10px 0 26px;letter-spacing:-.01em} .ai-sec h2 em{font-style:italic;color:var(--p)} .ai-sec-lede{max-width:640px;margin:-14px 0 0;font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.5)} .ai-prose{max-width:780px;font-size:.97rem;line-height:1.85;color:rgba(255,255,255,.68)} .ai-prose p{margin:0 0 1.1em} .ai-prose h3{font-size:1.12rem;font-weight:600;color:#fff;margin:1.7em 0 .6em} .ai-prose ul,.ai-prose ol{margin:0 0 1.2em;padding-left:1.25em} .ai-prose li{margin-bottom:.5em} .ai-prose a{color:var(--p);text-decoration:underline;text-underline-offset:3px} .ai-prose img{max-width:100%;height:auto;border-radius:12px;margin:1.2em 0} .ai-prose blockquote{border-left:2px solid var(--p);padding-left:18px;margin:1.4em 0; font-style:italic;color:rgba(255,255,255,.78)} /* ---------- services ---------- A six-column bed with a deliberate 4/2 - 2/4 - 3/3 rhythm, repeating every six cards. An even auto-fit grid of identical tiles is the templated look; uneven spans give the eye somewhere to go. */ .ai-svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:38px} .ai-svc{grid-column:span 2;position:relative;background:rgba(255,255,255,.026); border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:30px 28px 32px; transition:border-color .35s,transform .35s,background .35s;overflow:hidden} .ai-svc:nth-child(6n+1){grid-column:span 4} .ai-svc:nth-child(6n+2){grid-column:span 2} .ai-svc:nth-child(6n+3){grid-column:span 2} .ai-svc:nth-child(6n+4){grid-column:span 4} .ai-svc:nth-child(6n+5){grid-column:span 3} .ai-svc:nth-child(6n+6){grid-column:span 3} /* Accent hairline wiping in on hover - the only motion on these cards. */ .ai-svc::before{content:'';position:absolute;left:0;top:0;height:1px;width:0; background:linear-gradient(90deg,var(--p),transparent);transition:width .5s ease} .ai-svc:hover::before{width:100%} .ai-svc:hover{border-color:rgba(214,55,101,.34);transform:translateY(-3px);background:rgba(255,255,255,.045)} /* Line icons on a fixed box. The Unicode glyphs this replaced reported different heights per font, which knocked each card title off the baseline. */ .ai-svc-ico{width:38px;height:38px;margin-bottom:18px;display:flex;align-items:center; justify-content:center;border:1px solid rgba(214,55,101,.28);border-radius:11px; color:var(--p);background:rgba(214,55,101,.07); transition:background .35s,border-color .35s,transform .35s} .ai-ico-svg{width:19px;height:19px;display:block} .ai-svc:hover .ai-svc-ico{background:rgba(214,55,101,.15);border-color:rgba(214,55,101,.5); transform:translateY(-1px)} @media (prefers-reduced-motion: reduce){ .ai-svc,.ai-svc-ico,.ai-pj,.ai-pj-img,.ai-pj-more{transition:none!important} } .ai-svc h3{font-size:1.02rem;font-weight:600;margin:0 0 9px;letter-spacing:-.01em} .ai-svc p{font-size:.86rem;line-height:1.72;color:rgba(255,255,255,.54);margin:0;max-width:46ch} @media(max-width:900px){ .ai-svc-grid{grid-template-columns:repeat(2,1fr)} .ai-svc,.ai-svc:nth-child(6n+1),.ai-svc:nth-child(6n+2),.ai-svc:nth-child(6n+3), .ai-svc:nth-child(6n+4),.ai-svc:nth-child(6n+5),.ai-svc:nth-child(6n+6){grid-column:span 1} } @media(max-width:600px){.ai-svc-grid{grid-template-columns:1fr}} /* ---------- how we work ---------- Numbered because these steps genuinely are a sequence - discovery has to precede the pilot. Numbering unordered content would be decoration. */ .ai-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:42px; border-top:1px solid rgba(255,255,255,.09)} .ai-step{padding:28px 26px 32px 0;border-right:1px solid rgba(255,255,255,.07)} .ai-step:last-child{border-right:0} .ai-step:not(:first-child){padding-left:26px} .ai-step-n{font-family:'Playfair Display',serif;font-size:1.85rem;font-weight:700;font-style:italic; color:rgba(214,55,101,.6);line-height:1;margin-bottom:15px} .ai-step h3{font-size:.95rem;font-weight:600;margin:0 0 8px} .ai-step p{font-size:.84rem;line-height:1.68;color:rgba(255,255,255,.5);margin:0} @media(max-width:860px){ .ai-steps{grid-template-columns:1fr 1fr} .ai-step:nth-child(2n){border-right:0} .ai-step{border-bottom:1px solid rgba(255,255,255,.07)} } @media(max-width:520px){ .ai-steps{grid-template-columns:1fr} .ai-step{border-right:0;padding-left:0!important} } /* ---------- why KKTC ---------- */ .ai-why{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start} @media(max-width:860px){.ai-why{grid-template-columns:1fr;gap:30px}} /* ---------- portfolio ---------- The featured entry runs full width as a horizontal lead, the rest sit in a two-up grid beneath it. Three identical tiles in a row read as a template. */ .ai-pj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px} .ai-pj{display:block;text-decoration:none;color:inherit;background:rgba(255,255,255,.026); border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden; transition:border-color .35s,transform .35s} .ai-pj:hover{border-color:rgba(214,55,101,.4);transform:translateY(-4px)} .ai-pj:hover .ai-pj-img{transform:scale(1.035)} .ai-pj-imgwrap{overflow:hidden;background:#141418} .ai-pj-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1)} .ai-pj-ph{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#17171c,#232329);color:rgba(255,255,255,.16);font-size:2rem} .ai-pj-body{padding:24px 26px 26px} .ai-pj-meta{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p); font-weight:600;margin-bottom:10px;display:flex;gap:12px;flex-wrap:wrap;align-items:center} .ai-pj-body h3{font-size:1.06rem;font-weight:600;margin:0 0 9px;line-height:1.32;letter-spacing:-.01em} .ai-pj-body p{font-size:.86rem;line-height:1.68;color:rgba(255,255,255,.54);margin:0} .ai-pj-more{margin-top:16px;font-size:.78rem;color:rgba(255,255,255,.42); display:inline-flex;align-items:center;gap:7px;transition:color .3s,gap .3s} .ai-pj:hover .ai-pj-more{color:var(--p);gap:12px} /* Lead card: full width, image beside the copy. */ .ai-pj.is-lead{grid-column:1/-1;display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch} .ai-pj.is-lead .ai-pj-imgwrap{height:100%} .ai-pj.is-lead .ai-pj-img{height:100%;aspect-ratio:auto;min-height:290px} .ai-pj.is-lead .ai-pj-body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center} .ai-pj.is-lead .ai-pj-body h3{font-family:'Playfair Display',serif;font-size:1.62rem;font-weight:700; line-height:1.16;margin-bottom:13px} .ai-pj.is-lead .ai-pj-body p{font-size:.92rem;line-height:1.75} .ai-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px} .ai-tag{font-size:.68rem;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.58)} .ai-star{color:#eab308} @media(max-width:820px){ .ai-pj-grid{grid-template-columns:1fr} .ai-pj.is-lead{grid-template-columns:1fr} .ai-pj.is-lead .ai-pj-img{min-height:0;aspect-ratio:16/10} .ai-pj.is-lead .ai-pj-body{padding:24px 26px 26px} .ai-pj.is-lead .ai-pj-body h3{font-size:1.3rem} } /* ---------- empty state ---------- */ .ai-empty{text-align:center;padding:60px 20px;color:rgba(255,255,255,.4); border:1px dashed rgba(255,255,255,.12);border-radius:16px;margin-top:30px} .ai-empty-ico{font-size:2rem;margin-bottom:12px;opacity:.5} /* ---------- CTA ---------- */ .ai-cta{text-align:center;padding:84px 0} .ai-cta h2{margin-bottom:14px} .ai-cta p{color:rgba(255,255,255,.6);max-width:560px;margin:0 auto 28px;line-height:1.75} .ai-btn{display:inline-block;background:var(--p);color:#fff;text-decoration:none;font-weight:600; padding:15px 38px;border-radius:40px;font-size:.9rem;transition:transform .25s,box-shadow .25s} .ai-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(214,55,101,.34)} /* ---------- project detail ---------- */ .ai-detail{padding:150px 0 70px} .ai-back{display:inline-block;font-size:.82rem;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:26px} .ai-back:hover{color:var(--p)} .ai-detail h1{font-family:'Playfair Display',serif;font-weight:700; font-size:clamp(1.85rem,4.2vw,3.05rem);line-height:1.12;margin:0 0 18px;letter-spacing:-.02em} .ai-detail-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.48); padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08)} .ai-detail-meta b{color:rgba(255,255,255,.72);font-weight:600} .ai-cover{width:100%;max-height:460px;object-fit:cover;border-radius:18px;margin-bottom:38px} /* Lead paragraph: .ai-prose p only spaces child paragraphs, so when the lead IS the .ai-prose element it needs its own bottom margin. */ .ai-lead{font-size:1.06rem;color:rgba(255,255,255,.78);margin:0 0 1.6em} /* site.css styles every bare