/* ========================================================================= Pac Technologies — site stylesheet, design-system build. Replaces tokens.css + components.css + site.css on rebuilt pages. Pages are migrated onto this file one at a time; the old stylesheets stay in place until the last page moves across. Tokens mirror the design system. Do not hard-code values in pages. ========================================================================= */ /* ------------------------------------------------------------------ FONTS Trial cuts are scoped by unicode-range because they are missing ~38 glyphs (apostrophe, ampersand, brackets, currency). When the licensed retail cuts land, drop them in under the same names and delete every unicode-range plus the font-variant-ligatures rule below. Nothing else changes. */ /* Outfit is loaded from the page as a , not @import — an @import at the top of this file is a render-blocking second hop on every page. */ @font-face{font-family:"Nexa";src:url("assets/fonts/NexaDemo-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+20-22,U+24,U+26-2E,U+30-3B,U+3D,U+3F-5B,U+5D,U+5F,U+61-7B,U+7D,U+A3,U+A9,U+AE,U+D7,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2122,U+20AC} @font-face{font-family:"Nexa";src:url("assets/fonts/NexaDemo-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+20-22,U+24,U+26-2E,U+30-3B,U+3D,U+3F-5B,U+5D,U+5F,U+61-7B,U+7D,U+A3,U+A9,U+AE,U+D7,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2122,U+20AC} @font-face{font-family:"Nexa Text";src:url("assets/fonts/NexaText-Trial-Book.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+20-21,U+2C-2E,U+30-3B,U+3F,U+41-5A,U+61-7A,U+A0,U+2013-2014,U+2018-201D,U+2026} @font-face{font-family:"Nexa Text";src:url("assets/fonts/NexaText-Trial-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+20-21,U+2C-2E,U+30-3B,U+3F,U+41-5A,U+61-7A,U+A0,U+2013-2014,U+2018-201D,U+2026} :root{ /* Brand */ --navy:#070d17;--navy-800:#111c2e;--navy-700:#1b2c48;--navy-600:#243a5f; --pac:#385a93;--pac-300:#92a8cb;--pac-100:#dce4f0;--pac-50:#eef2f8; /* Emphasis — safety orange. Navy ink on orange, never white. */ --orange:#ff6a13;--orange-600:#e05304;--orange-700:#b34103;--orange-50:#fff3ec; /* Neutrals */ --paper:#fff;--mist:#f4f6f9;--line:#e9edf2;--line-strong:#d6dce5; --ink:#0d1728;--ink-600:#4b5768;--ink-500:#667487;--ink-400:#8b97a8; /* Status */ --ok:#1e8e5a;--warn:#c8871b;--fault:#c3392c; /* Type */ --display:"Nexa","Outfit","Segoe UI",system-ui,sans-serif; --body:"Nexa Text","Nexa","Outfit","Segoe UI",system-ui,sans-serif; /* Layout */ --pad:clamp(24px,4vw,56px);--head-h:74px; --ease:cubic-bezier(.16,.84,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-ligatures:none} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} a:hover{color:var(--orange-700)} h1,h2,h3,h4{margin:0;text-wrap:pretty} p{margin:0} ul{margin:0;padding:0;list-style:none} ::selection{background:var(--orange);color:#fff} /* ------------------------------------------------------------ PRIMITIVES */ .wrap{padding-inline:var(--pad)} .u-dark{background:var(--navy);color:#fff} .u-light{background:var(--paper);color:var(--ink)} .u-mist{background:var(--mist);color:var(--ink)} /* Small label. Brand type only — no monospace anywhere on this site. */ .lbl{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} .lbl--muted{color:var(--ink-500)} .lbl--onDark{color:rgba(255,255,255,.6)} .lbl--accent{color:var(--orange-700)} .u-dark .lbl--accent{color:var(--orange)} /* Display heading. Caps, tight, heavy — one voice for every heading. */ .d{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:.9;text-transform:uppercase} .d--xl{font-size:clamp(34px,8.1vw,150px);line-height:.84;letter-spacing:-.055em} .d--lg{font-size:clamp(34px,5.4vw,86px)} .d--md{font-size:clamp(26px,3.4vw,52px)} .d--sm{font-size:clamp(20px,2.4vw,32px);letter-spacing:-.035em} .d .thin{font-weight:300;color:rgba(255,255,255,.42)} .u-light .d .thin,.u-mist .d .thin{color:rgba(13,23,40,.34)} .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-600);max-width:58ch} .u-dark .lede{color:rgba(255,255,255,.7)} .rule{height:14px;background:var(--orange)} .rule--thin{height:4px} /* Section index — a rule, a number, a label */ .ix{display:flex;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line-strong)} .u-dark .ix{border-color:rgba(255,255,255,.2)} .ix i{width:40px;height:4px;background:var(--orange);flex:none} /* Buttons — hard edges, no radius */ .btn{display:inline-flex;align-items:center;gap:12px;padding:19px 30px;border:0;cursor:pointer;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;transition:background var(--ease) .18s,color var(--ease) .18s;white-space:nowrap} .btn--accent{background:var(--orange);color:var(--navy)} .btn--accent:hover{background:var(--orange-600);color:var(--navy)} .btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)} .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff} .btn--ghostDark{background:transparent;color:var(--ink);border:1px solid rgba(13,23,40,.3)} .btn--ghostDark:hover{background:rgba(13,23,40,.06);color:var(--ink)} .btn svg{width:15px;height:15px;flex:none} /* ---------------------------------------------------------------- HEADER */ .hdr{position:sticky;top:0;z-index:60;background:rgba(7,13,23,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.16)} .hdr__in{display:flex;align-items:stretch;height:var(--head-h)} .brand{display:flex;align-items:center;gap:11px;padding:0 26px 0 var(--pad);border-right:1px solid rgba(255,255,255,.16);color:#fff} .brand:hover{color:#fff} .brand img{height:26px} .brand span{font-family:var(--display);font-size:19px;line-height:1;letter-spacing:-.02em;font-weight:300;white-space:nowrap} .brand span b{font-weight:700} .nav{display:flex;align-items:stretch} .nav>a,.nav__drop>a{display:flex;align-items:center;gap:6px;padding:0 22px;border-right:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;transition:background .16s,color .16s} .nav>a:hover,.nav__drop:hover>a{background:rgba(255,255,255,.06);color:#fff} .nav>a[aria-current="page"]{color:var(--orange)} .nav__drop{position:relative;display:flex} .nav__menu{position:absolute;top:100%;left:0;min-width:180px;background:var(--navy-800);border:1px solid rgba(255,255,255,.16);border-top:0;display:none} .nav__drop:hover .nav__menu{display:block} .nav__menu a{display:block;padding:13px 20px;color:rgba(255,255,255,.75);font-size:14px} .nav__menu a:hover{background:rgba(255,255,255,.07);color:#fff} .hdr .btn{margin-left:auto;height:var(--head-h);padding:0 32px} .navToggle{display:none;align-items:center;padding:0 var(--pad);background:0;border:0;color:#fff;cursor:pointer} .navToggle svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none} /* ------------------------------------------------------------------ HERO */ .hero{background:var(--navy);color:#fff;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)} .hero__copy{padding:clamp(44px,5.2vw,88px) clamp(24px,3vw,48px) clamp(36px,4vw,64px) var(--pad)} .hero h1{max-width:14ch} .hero .lede{margin-top:clamp(26px,3vw,40px);max-width:46ch;color:rgba(255,255,255,.78);font-size:clamp(17px,1.4vw,19px)} .hero__cta{display:flex;margin-top:clamp(28px,3vw,40px);flex-wrap:wrap} .hero__fig{position:relative;overflow:hidden;min-height:420px;background:var(--navy-800)} .hero__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero__fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,23,.85),rgba(7,13,23,0) 42%)} .hero__cap{position:absolute;left:0;bottom:0;z-index:2;background:var(--navy);padding:18px 24px;max-width:78%;border-top:4px solid var(--orange)} .hero__cap p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);margin-top:6px} .hero__stat{position:absolute;top:0;right:0;z-index:2;background:var(--orange);color:var(--navy);padding:18px 26px} .hero__stat b{display:block;font-family:var(--display);font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1} /* --------------------------------------------------------------- MARQUEE */ @keyframes pac-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mq{overflow:hidden} .mq__track{display:flex;width:max-content;animation:pac-marquee var(--mq-dur,46s) linear infinite} .mq--accent{background:var(--orange);padding:20px 0} .mq--accent .mq__item{display:inline-flex;align-items:center;gap:30px;padding-right:30px;font-family:var(--display);font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;color:var(--navy);white-space:nowrap} .mq--accent .mq__item i{width:9px;height:9px;background:var(--navy);transform:rotate(45deg);flex:none} .mq--logos{padding:26px 0} .mq--logos .mq__logo{flex:none;width:170px;display:grid;place-items:center;padding-inline:22px} .mq--logos img{max-height:40px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s} .mq--logos .mq__logo:hover img{filter:none;opacity:1} .mq--logos .is-invert img{filter:grayscale(1) invert(1)} @media (prefers-reduced-motion:reduce){.mq__track{animation:none}} /* ----------------------------------------------------------------- STATS */ .stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)} .stats__c{padding:clamp(32px,3.6vw,56px) clamp(24px,3vw,44px);border-left:1px solid var(--line)} .stats__c:first-child{border-left:0;padding-left:var(--pad)} .stats__c:last-child{padding-right:var(--pad)} .stats__n{font-family:var(--display);font-size:clamp(40px,5vw,76px);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink)} .stats__n em{font-style:normal;color:var(--orange-700)} .stats__c .lbl{margin-top:14px;display:block} .stats__c p{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-500);max-width:30ch} /* --------------------------------------------------------------- SECTION */ .sec{padding:clamp(72px,8vw,132px) 0} .sec--tight{padding:clamp(52px,6vw,88px) 0} .sec__head{margin:clamp(34px,4vw,58px) 0 clamp(38px,4.4vw,64px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end} /* Service index rows — hover grows the row and lets the copy out */ .idx{border-top:1px solid var(--line-strong)} .idx:last-of-type{border-bottom:1px solid var(--line-strong)} .u-dark .idx,.u-dark .idx:last-of-type{border-color:rgba(255,255,255,.2)} .idx__row{display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,.9fr) 40px;gap:24px;align-items:start;padding:24px 0;transition:padding .32s var(--ease)} .idx__row:hover{padding:34px 0 38px} .idx__n{padding-top:.5em;color:var(--ink-500)} .idx__row:hover .idx__n{color:var(--orange-700)} .idx__t{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.2vw,44px);letter-spacing:-.045em;line-height:.92;text-transform:uppercase;color:rgba(13,23,40,.55);transition:font-size .32s var(--ease),color .22s} .idx__row:hover .idx__t{font-size:clamp(28px,4.2vw,58px);color:var(--ink)} .idx__b{padding-top:6px} .idx__b p{font-size:16px;line-height:1.6;color:var(--ink-600);max-height:0;opacity:0;overflow:hidden;transition:max-height .38s var(--ease),opacity .26s} .idx__row:hover .idx__b p{max-height:180px;opacity:1} .idx__b .lbl{display:block;margin-top:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .38s var(--ease),opacity .26s,margin .32s} .idx__row:hover .idx__b .lbl{margin-top:16px;max-height:40px;opacity:1} /* Documentation row — a deliverables list rather than a platform label. */ .idx__docs{display:grid;grid-template-columns:1fr 1fr;gap:1px 20px;margin-top:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .38s var(--ease),opacity .26s,margin .32s} .idx__row:hover .idx__docs{margin-top:16px;max-height:220px;opacity:1} .idx__docs li{position:relative;padding-left:15px;font-size:14px;line-height:1.65;color:var(--ink-600)} .idx__docs li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:6px;background:var(--orange)} .idx__go{justify-self:end;padding-top:.4em;color:var(--ink-500);transition:transform .3s var(--ease),color .22s} .idx__row:hover .idx__go{transform:translateX(6px);color:var(--orange-700)} .idx__go svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none} /* Project rows — full-bleed, alternating */ .prow{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(255,255,255,.16);background:transparent;transition:background .26s} .prow:hover{background:rgba(255,255,255,.035)} .prow--flip .prow__fig{order:2} .prow--flip .prow__body{order:1} .prow__fig{position:relative;overflow:hidden;min-height:clamp(280px,34vw,460px)} .prow__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .prow:hover .prow__fig img{transform:scale(1.04)} .prow__tag{position:absolute;top:0;left:0;background:var(--orange);color:var(--navy);padding:9px 15px;z-index:2} .prow__loc{position:absolute;bottom:16px;left:20px;z-index:2;color:rgba(255,255,255,.75)} .prow__body{padding:clamp(30px,4vw,64px);display:flex;flex-direction:column;justify-content:center;gap:18px} .prow__body p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.62);max-width:44ch} .arrowLink{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:6px;padding-bottom:8px;border-bottom:3px solid var(--orange);color:#fff} .arrowLink:hover{color:#fff} .u-light .arrowLink,.u-mist .arrowLink{color:var(--ink)} .arrowLink svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none} /* Split feature — image beside copy */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:center} .split__fig{position:relative;aspect-ratio:5/6;overflow:hidden;background:var(--mist)} .split__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .split__fig::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;background:var(--orange)} .points{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:0} .points li{padding:16px 20px 16px 0;border-top:1px solid var(--line-strong)} .points strong{display:block;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin-bottom:6px} .points span{font-size:14px;line-height:1.5;color:var(--ink-500)} /* Guide cards — square, hairline, no shadow */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)} .card{background:var(--paper);display:flex;flex-direction:column;transition:background .22s} .card:hover{background:var(--mist);color:inherit} .card__img{aspect-ratio:16/10;width:100%;object-fit:cover} .card__b{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;flex:1} .card h3{font-family:var(--display);font-size:clamp(19px,1.8vw,25px);font-weight:700;letter-spacing:-.03em;line-height:1.05;text-transform:uppercase} .card p{font-size:15px;line-height:1.55;color:var(--ink-600)} .card .arrowLink{margin-top:auto} /* ------------------------------------------------------------------- CTA */ .cta{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:clamp(28px,5vw,72px);align-items:end} /* ---------------------------------------------------------------- FOOTER */ .ftr{background:var(--navy);color:var(--ink-400);border-top:4px solid var(--orange);overflow:hidden} .ftr__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;padding-top:clamp(52px,6vw,88px)} .ftr__cols p{font-size:15px;line-height:1.6;max-width:280px} .ftr__col{display:flex;flex-direction:column;gap:12px} .ftr__col .lbl{color:var(--orange);margin-bottom:6px} .ftr__col a{font-size:15px;color:var(--ink-400)} .ftr__col a:hover{color:#fff} .ftr__base{margin-top:56px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:20px;color:var(--ink-400)} .ftr__base a{color:var(--ink-400)} .ftr__word{margin-top:30px;margin-bottom:-2.2vw;font-family:var(--display);font-size:clamp(76px,12.4vw,200px);font-weight:700;letter-spacing:-.055em;line-height:.76;color:rgba(255,255,255,.06);white-space:nowrap;user-select:none} /* ------------------------------------------------------------------ MOTION Reveals are opt-in: pac.js sets .js on before paint. Without JS — or if the script fails to load — every element renders visible rather than leaving the page blank. */ .js .rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity .64s ease,transform .82s var(--ease)} .js .rv.is-in{opacity:1;transform:none} .js .rv[data-d="1"]{transition-delay:.08s}.js .rv[data-d="2"]{transition-delay:.16s}.js .rv[data-d="3"]{transition-delay:.24s} @media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}} /* -------------------------------------------------------------- RESPONSIVE */ /* Nav only. Brand + 6 items + CTA need ~1180px; below that the CTA would sit off-screen behind overflow-x:hidden, so the hamburger takes over early. Layout rules stay at 860px — do not merge these two blocks. */ @media (max-width:1180px){ .nav,.hdr .btn{display:none} .navToggle{display:flex;margin-left:auto} .hdr.is-open .nav{display:flex;flex-direction:column;position:absolute;top:var(--head-h);left:0;right:0;background:var(--navy-800);border-bottom:1px solid rgba(255,255,255,.16)} .hdr.is-open .nav>a,.hdr.is-open .nav__drop>a{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:18px var(--pad)} .hdr.is-open .nav__drop{flex-direction:column} .hdr.is-open .nav__menu{position:static;display:block;border:0} } @media (max-width:1080px){ .hero{grid-template-columns:1fr} .stats__c p{max-width:none} .hero__fig{min-height:340px;order:-1} .hero__fig::after{background:linear-gradient(180deg,rgba(7,13,23,.5),rgba(7,13,23,0) 50%)} .cards{grid-template-columns:1fr 1fr} .split{grid-template-columns:1fr} .split__fig{aspect-ratio:16/10} } /* Layout collapse — independent of the nav breakpoint above. */ @media (max-width:860px){ .sec__head{grid-template-columns:1fr} .idx__row,.idx__row:hover{grid-template-columns:54px 1fr 30px;padding:22px 0} .idx__b{display:none} .prow{grid-template-columns:1fr} .prow--flip .prow__fig{order:0} .prow--flip .prow__body{order:0} .cta{grid-template-columns:1fr} .ftr__cols{grid-template-columns:1fr 1fr} .points{grid-template-columns:1fr} } @media (max-width:700px){ .stats{grid-template-columns:1fr} .stats__c{border-left:0;border-top:1px solid var(--line);padding-inline:var(--pad)} .stats__c:first-child{border-top:0} } @media (max-width:560px){ .cards{grid-template-columns:1fr} .ftr__cols{grid-template-columns:1fr} .ftr__base{flex-direction:column;gap:10px} .btn{width:100%;justify-content:center} }