/* Axxion design system — BURGUNDY scheme (recolored from canonical; steel->#6B1C2E, navy->#2B0F16, skyblue->#D89AA6). */ /* ============================================================ Axxion Web Design System — canonical stylesheet Source: approved home build, 21 Jun 2026. Pair with axxion-core.js. Page-specific canvas motifs (hero line-art) are NOT here — each page ships its own script (see the design manual, section 8). Link in : ============================================================ */ :root{ --steel:#6B1C2E; --navy:#2B0F16; --black:#231F20; --ink:#191919; --white:#FFFFFF; --copper:#C96E3C; --sage:#5A8F7A; --skyblue:#D89AA6; --accent:var(--sage); /* per-page hero signature colour — override per page */ --hair:rgba(255,255,255,0.16); --hair-dark:rgba(35,31,32,0.14); --maxw:1280px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:"Roboto Condensed",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--black); background:var(--white); font-size:18px; line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.04;letter-spacing:-0.01em;} a{color:inherit;text-decoration:none;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;} .eyebrow{ font-family:"Roboto Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.22em; font-size:0.74rem; font-weight:500; color:var(--steel); } .eyebrow.on-dark{color:#D89AA6;} .btn{ display:inline-flex;align-items:center;gap:0.6em; font-family:"Roboto Condensed",sans-serif; text-transform:uppercase;letter-spacing:0.12em;font-weight:500;font-size:0.86rem; padding:1rem 1.9rem;border-radius:2px; transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease; } .btn-primary{background:var(--steel);color:#fff;} .btn-primary:hover{background:var(--navy);transform:translateY(-2px);} .btn-ghost{border:1px solid var(--hair);color:#fff;} .btn-ghost:hover{background:#fff;color:var(--navy);transform:translateY(-2px);} .btn-dark{background:var(--navy);color:#fff;} .btn-dark:hover{background:var(--steel);transform:translateY(-2px);} .btn-outline-dark{border:1px solid var(--hair-dark);color:var(--navy);} .btn-outline-dark:hover{background:var(--navy);color:#fff;transform:translateY(-2px);} .arrow{transition:transform .25s ease;} .btn:hover .arrow{transform:translateX(4px);} /* ---------- NAV ---------- */ header.nav{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .35s ease,border-color .35s ease,padding .35s ease; border-bottom:1px solid transparent; } .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:22px 40px;transition:padding .35s ease;} .nav.scrolled{background:rgba(255,255,255,0.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair-dark);} .nav.scrolled .nav-inner{padding:14px 40px;} .logo img{height:34px;display:block;transition:opacity .3s ease;} .logo .light-logo{display:none;} .nav-menu{display:flex;gap:34px;align-items:center;} .nav-menu a{ font-size:0.93rem;font-weight:400;letter-spacing:0.02em;color:#fff; position:relative;padding:4px 0;transition:color .25s ease; } .nav-menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .25s ease;} .nav-menu a:hover::after{width:100%;} .nav.scrolled .logo .dark-logo{display:none;} .nav.scrolled .logo .light-logo{display:block;} .nav.scrolled .nav-menu a{color:var(--navy);} .nav-cta{font-size:0.86rem!important;text-transform:uppercase;letter-spacing:0.12em;font-weight:500;border:1px solid var(--hair);padding:0.7rem 1.3rem;border-radius:2px;transition:all .25s ease;} .nav-cta:hover{background:#fff;color:var(--navy)!important;} .nav-cta::after{display:none!important;} .nav.scrolled .nav-cta{border-color:var(--steel);color:var(--steel)!important;} .nav.scrolled .nav-cta:hover{background:var(--steel);color:#fff!important;} .menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;} .menu-toggle span{width:26px;height:2px;background:#fff;display:block;transition:background .3s;} .nav.scrolled .menu-toggle span{background:var(--navy);} /* ---------- HERO ---------- */ .hero{ background-color:var(--navy); background-image: linear-gradient(rgba(216,154,166,0.045) 1px,transparent 1px), linear-gradient(90deg,rgba(216,154,166,0.045) 1px,transparent 1px); background-size:48px 48px; color:#fff; position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:170px 0 110px; overflow:hidden; } #heroCanvas{ position:absolute;inset:0;width:100%;height:100%; z-index:1;display:block; } .hero::before{ content:"";position:absolute;inset:0;z-index:2; background: linear-gradient(90deg,rgba(43,15,22,0.92) 0%,rgba(43,15,22,0.62) 30%,rgba(43,15,22,0.0) 60%), linear-gradient(180deg,rgba(43,15,22,0.0) 50%,rgba(43,15,22,0.55) 100%), radial-gradient(ellipse 60% 70% at 88% 12%,rgba(107,28,46,0.30),transparent 60%); pointer-events:none; } .hero .wrap{position:relative;z-index:3;} .hero-scroll{z-index:3;} .hero h1{ font-size:clamp(2.9rem,6.6vw,6.2rem); font-weight:800; max-width:16ch; margin:26px 0 0; } .hero-scroll{ position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2; text-transform:uppercase;letter-spacing:0.22em;font-size:0.7rem;font-weight:500; color:rgba(255,255,255,0.55);display:flex;flex-direction:column;align-items:center;gap:10px; } .hero-scroll span{ width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent); position:relative;overflow:hidden; } .hero-scroll span::after{ content:"";position:absolute;top:-50%;left:0;width:1px;height:50%;background:var(--steel); animation:scrollDot 1.9s ease-in-out infinite; } @keyframes scrollDot{0%{top:-50%}60%,100%{top:100%}} .hero-lead{ max-width:60ch;margin-top:34px;font-size:1.18rem;line-height:1.62; color:rgba(255,255,255,0.82);font-weight:300; } .hero-lead p+p{margin-top:1em;} .hero-cta{margin-top:46px;display:flex;gap:16px;flex-wrap:wrap;} /* ---------- STAT STRIP (Civitta signature) ---------- */ .statband{background:var(--black);color:#fff;border-top:1px solid var(--hair);} .statband .grid{ display:grid;grid-template-columns:repeat(4,1fr); } .statband .cell{ padding:64px 34px;border-right:1px solid var(--hair); } .statband .cell:last-child{border-right:none;} .stat-num{ font-family:"Playfair Display",serif;font-weight:800; font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1;color:#D89AA6; } .stat-num .unit{color:inherit;} .stat-label{ margin-top:14px;font-size:0.96rem;line-height:1.4;color:rgba(255,255,255,0.66); text-transform:uppercase;letter-spacing:0.08em;font-weight:400; } /* ---------- BENTO ---------- */ .bento-sec{padding:120px 0;} .bento{ display:grid;grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(178px,auto);gap:18px;margin-top:56px; } .tile{ border:1px solid var(--hair-dark);border-radius:6px;padding:32px; display:flex;flex-direction:column;justify-content:space-between; background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease; position:relative;overflow:hidden; } .tile:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(43,15,22,0.10);border-color:rgba(107,28,46,0.45);} .tile .kicker{text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:500;color:var(--steel);} .tile h3{font-size:1.5rem;font-weight:700;line-height:1.12;} .tile h4{font-family:"Roboto Condensed",sans-serif;font-size:1.02rem;font-weight:700;color:var(--navy);margin-top:10px;} .tile p{font-size:1rem;color:rgba(35,31,32,0.72);line-height:1.55;} .tile .stat{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(2.6rem,3.6vw,3.6rem);line-height:1;color:var(--steel);} .tile .stat .unit{color:inherit;} .tile .stat-cap{margin-top:14px;font-size:0.96rem;color:rgba(35,31,32,0.66);line-height:1.4;} .tile.t-accent{border-top:3px solid var(--steel);} .tile .ghost{ position:absolute;top:20px;right:26px; font-family:"Playfair Display",serif;font-weight:800;font-size:3.2rem;line-height:1; color:rgba(107,28,46,0.14);transition:color .35s ease;pointer-events:none; } .tile:hover .ghost{color:rgba(107,28,46,0.26);} /* dark bento tiles (for the outcomes section on black) */ .tile.t-dark{background:rgba(255,255,255,0.03);border-color:var(--hair);color:#fff;} .tile.t-dark:hover{background:rgba(255,255,255,0.06);border-color:rgba(216,154,166,0.55);box-shadow:none;} .tile.t-dark h3{color:#fff;} .tile.t-dark .kicker{color:#D89AA6;} .tile.t-dark p{color:rgba(255,255,255,0.7);} .tile.t-dark .stat{color:#D89AA6;} .tile.t-dark .stat-cap{color:rgba(255,255,255,0.66);} .t-big{grid-column:span 2;grid-row:span 2;background:var(--navy);color:#fff;} .t-big .kicker{color:#D89AA6;} .t-big h3{font-size:clamp(1.8rem,2.6vw,2.5rem);margin-top:6px;} .t-big .xmark{width:60px;height:60px;opacity:0.9;} .t-big .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;} .t-big .chip{ border:1px solid var(--hair);border-radius:100px;padding:7px 15px; font-size:0.82rem;letter-spacing:0.04em;color:rgba(255,255,255,0.85); text-transform:uppercase;font-weight:500; } .t-big .chip .dot{color:var(--steel);margin-right:2px;} .t-big p{color:rgba(255,255,255,0.82);} .t-wide{grid-column:span 2;} .t-tint{background:#FBF3F4;border-color:rgba(107,28,46,0.18);} .tile .more{margin-top:18px;display:inline-flex;gap:0.5em;align-items:center;text-transform:uppercase;letter-spacing:0.1em;font-size:0.8rem;font-weight:500;color:var(--steel);} .tile .more:hover .arrow{transform:translateX(4px);} @media(max-width:1024px){ .bento{grid-template-columns:repeat(2,1fr);} .t-big{grid-column:span 2;grid-row:span 1;} .t-wide{grid-column:span 2;} } @media(max-width:720px){ .bento{grid-template-columns:1fr;} .t-big,.t-wide{grid-column:span 1;} } /* ---------- SECTION SHELL ---------- */ section{padding:120px 0;} .section-head{max-width:62ch;} .section-head h2{font-size:clamp(2rem,3.8vw,3.4rem);margin-top:18px;font-weight:700;} .section-head p{margin-top:22px;font-size:1.12rem;color:rgba(35,31,32,0.72);line-height:1.6;} .lead-narrative p{font-size:1.18rem;line-height:1.7;color:rgba(35,31,32,0.82);max-width:64ch;} .lead-narrative p+p{margin-top:1.1em;} /* ---------- AUDIENCE CARDS ---------- */ .watermark-row{display:flex;align-items:center;justify-content:space-between;gap:30px;} .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border-top:1px solid var(--hair-dark);} .acard{ padding:44px 36px 40px;border-right:1px solid var(--hair-dark); transition:background .3s ease;position:relative; } .acard:last-child{border-right:none;} .acard:hover{background:#FBF3F4;} .acard .icon{width:58px;height:58px;object-fit:contain;margin-bottom:26px;} .acard h3{font-size:1.5rem;font-weight:700;} .acard p{margin-top:16px;font-size:1.02rem;color:rgba(35,31,32,0.74);line-height:1.6;} .acard .more{ margin-top:26px;display:inline-flex;gap:0.5em;align-items:center; text-transform:uppercase;letter-spacing:0.1em;font-size:0.82rem;font-weight:500;color:var(--steel); } .acard .more:hover .arrow{transform:translateX(4px);} /* ---------- PROCESS ---------- */ .proc{background:var(--navy);color:#fff;} .proc .section-head h2{color:#fff;} .proc .section-head p{color:rgba(255,255,255,0.72);} .proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:64px;} .pstep{background:#fff;border-radius:6px;padding:30px 24px 28px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;} .pstep:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(0,0,0,0.24);} .pstep .n{ font-family:"Playfair Display",serif;font-weight:800;font-size:2.7rem;color:var(--steel);line-height:1; } .pstep h3{font-size:1.18rem;margin-top:20px;font-weight:700;color:var(--navy);} .pstep p{margin-top:12px;font-size:0.96rem;color:rgba(35,31,32,0.7);line-height:1.5;} /* ---------- COMPOUNDING (animated timeline) ---------- */ .comp-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:80px;align-items:start;} .comp-intro{position:sticky;top:118px;} .comp-intro h2{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:700;margin-top:18px;} .comp-lead{margin-top:22px;font-size:1.12rem;color:rgba(35,31,32,0.78);line-height:1.65;max-width:46ch;} .comp-lead+.comp-lead{margin-top:1em;} .timeline{position:relative;padding-left:64px;} .spine{position:absolute;left:16px;top:10px;bottom:34px;width:2px;background:rgba(107,28,46,0.16);border-radius:2px;} .spine-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--steel),#D89AA6);transition:height .12s linear;} .spine-fill::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:#D89AA6;box-shadow:0 0 12px 3px rgba(216,154,166,0.65);} .tstep{position:relative;padding:6px 0 46px;opacity:.32;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);} .tstep:last-child{padding-bottom:0;} .tnode{ position:absolute;left:-64px;top:-2px;width:36px;height:36px;border-radius:50%; border:2px solid rgba(107,28,46,0.35);background:#fff; display:flex;align-items:center;justify-content:center; font-family:"Roboto Condensed",sans-serif;font-size:0.78rem;font-weight:700;color:var(--steel); transition:all .45s cubic-bezier(.2,.7,.2,1);z-index:2; } .tstep.active{opacity:1;transform:none;} .tstep.active .tnode{border-color:var(--steel);background:var(--steel);color:#fff;box-shadow:0 0 0 6px rgba(107,28,46,0.12);} .tlabel{display:block;text-transform:uppercase;letter-spacing:0.14em;font-size:0.74rem;font-weight:500;color:var(--steel);margin-bottom:10px;} .tstep p{font-size:1.12rem;line-height:1.62;color:rgba(35,31,32,0.82);max-width:52ch;} @media(prefers-reduced-motion:reduce){ .tstep{opacity:1;transform:none;} .spine-fill{height:100%!important;transition:none;} } @media(max-width:1024px){ .comp-grid{grid-template-columns:1fr;gap:40px;} .comp-intro{position:static;} } /* ---------- GATES ---------- */ .gates{background:#FBF3F4;} .gates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;} .gcard{ background:#fff;border:1px solid var(--hair-dark);border-radius:4px;padding:34px 28px; transition:transform .3s ease,box-shadow .3s ease; border-top:3px solid var(--steel); } .gcard:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(43,15,22,0.12);} .gcard .tag{text-transform:uppercase;letter-spacing:0.12em;font-size:0.72rem;font-weight:500;color:var(--copper);} .gcard h3{font-size:1.32rem;margin-top:18px;font-weight:700;} .gcard h4{font-family:"Roboto Condensed",sans-serif;font-size:1.04rem;font-weight:700;margin-top:14px;color:var(--navy);} .gcard p{margin-top:10px;font-size:0.98rem;color:rgba(35,31,32,0.72);line-height:1.55;} /* ---------- OUTCOMES ---------- */ .outcomes{background:var(--navy);color:#fff;} .outcomes .section-head h2{color:#fff;} .out-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:70px;border-top:1px solid var(--hair);} .ocell{padding:54px 30px;border-right:1px solid var(--hair);} .ocell:last-child{border-right:none;} .ocell .big{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(2.6rem,4.4vw,4rem);line-height:1;} .ocell .big .unit{color:inherit;} .ocell .cap{margin-top:16px;font-size:0.98rem;color:rgba(255,255,255,0.66);line-height:1.45;} /* ---------- QUOTE ---------- */ .quote{background:#fff;color:var(--black);} .pull{max-width:820px;margin:0 auto;border-left:3px solid var(--steel);padding-left:34px;} .pull blockquote{ font-family:"Playfair Display",serif;font-style:italic;font-weight:500; font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.45;color:var(--black);margin:0; } .pull blockquote::before{content:"\201C";} .pull blockquote::after{content:"\201D";} .pull figcaption{ margin-top:26px;font-family:"Roboto Condensed",sans-serif; text-transform:uppercase;letter-spacing:0.1em;font-size:0.84rem; } .pull .who{font-weight:700;color:var(--black);} .pull .sep{color:var(--steel);margin:0 8px;} .pull .role{color:rgba(35,31,32,0.6);} /* ---------- PILOT CTA ---------- */ .pilot{background:var(--steel);color:#fff;} .pilot .twocol{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:center;} .pilot h2{font-size:clamp(2.1rem,4vw,3.4rem);font-weight:700;} .pilot p{font-size:1.14rem;line-height:1.65;color:rgba(255,255,255,0.9);} .pilot p+p{margin-top:1em;} .pilot .cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;} .pilot .btn-white{background:#fff;color:var(--navy);} .pilot .btn-white:hover{background:var(--navy);color:#fff;transform:translateY(-2px);} .pilot .btn-line{border:1px solid rgba(255,255,255,0.5);color:#fff;} .pilot .btn-line:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px);} /* ---------- FOOTER ---------- */ footer{background:var(--black);color:#fff;padding:90px 0 40px;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;} footer h4{font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:0.12em;font-size:0.8rem;font-weight:500;color:rgba(255,255,255,0.55);margin-bottom:20px;} footer ul{list-style:none;} footer li{margin-bottom:12px;} footer li a{font-size:1rem;color:rgba(255,255,255,0.85);transition:color .2s;} footer li a:hover{color:var(--steel);} .foot-brand img{height:40px;margin-bottom:22px;} .foot-brand p{color:rgba(255,255,255,0.6);font-size:0.98rem;max-width:34ch;} .foot-social{display:flex;gap:14px;margin-top:22px;} .foot-social a{width:40px;height:40px;border:1px solid var(--hair);border-radius:2px;display:flex;align-items:center;justify-content:center;transition:all .25s;} .foot-social a:hover{background:var(--steel);border-color:var(--steel);} .foot-social img{height:16px;} .foot-bottom{margin-top:64px;padding-top:26px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;} .foot-bottom img{height:34px;} .foot-bottom span{font-size:0.86rem;color:rgba(255,255,255,0.5);} /* ---------- REVEAL ANIMATION ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);} .reveal.in{opacity:1;transform:none;} .reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;} /* ---------- RESPONSIVE ---------- */ @media(max-width:1024px){ .statband .grid{grid-template-columns:repeat(2,1fr);} .statband .cell:nth-child(2){border-right:none;} .statband .cell:nth-child(1),.statband .cell:nth-child(2){border-bottom:1px solid var(--hair);} .proc-grid{grid-template-columns:repeat(2,1fr);} .out-grid{grid-template-columns:repeat(2,1fr);} .ocell{border-bottom:1px solid var(--hair);} .gates-grid{grid-template-columns:repeat(2,1fr);} .compound .twocol,.pilot .twocol{grid-template-columns:1fr;gap:40px;} .foot-grid{grid-template-columns:1fr 1fr;} } @media(max-width:720px){ .wrap{padding:0 22px;} .nav-inner{padding:18px 22px;} .nav-menu,.nav-cta{display:none;} .menu-toggle{display:flex;} section{padding:80px 0;} .hero{padding:150px 0 70px;} .cards3,.proc-grid,.out-grid,.gates-grid{grid-template-columns:1fr;} .acard{border-right:none;border-bottom:1px solid var(--hair-dark);} .statband .grid{grid-template-columns:1fr;} .statband .cell{border-right:none;border-bottom:1px solid var(--hair);} .foot-grid{grid-template-columns:1fr;} } /* ---------- PAGE-LOAD CUES (added 21 Jun 2026) ---------- */ /* Scroll progress bar — fixed top; signals the page is live and tracks depth. */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--steel),var(--accent));box-shadow:0 0 8px rgba(107,28,46,0.45);} /* Hero intro — runs on load (not scroll), so navigating to a page reads as arrival. Put .hero-in on each hero element and stagger with inline style="--d:.18s". */ .hero-in{opacity:0;transform:translateY(24px);animation:heroUp .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s);} @keyframes heroUp{to{opacity:1;transform:none;}} /* Sage/accent rule that sweeps in under the hero eyebrow — per-page colour identity. */ .hero-rule{height:2px;width:0;background:linear-gradient(90deg,var(--accent),transparent);margin:20px 0 0;animation:ruleSweep 1s cubic-bezier(.2,.7,.2,1) .55s forwards;} @keyframes ruleSweep{to{width:130px;}} @media(prefers-reduced-motion:reduce){ .hero-in{animation:none;opacity:1;transform:none;} .hero-rule{animation:none;width:130px;} } /* nav-cta sits outside .nav-menu on the app pages — keep it legible white over the dark hero (the .nav.scrolled rule above already flips it to burgundy on scroll). */ header.nav .nav-cta{color:#fff;}