/* Goscore — base typography, palette and layout. Ported from the Claude Design source 'Goscore Website.dc.html'. The design computed its responsive grids in JavaScript; here they are CSS classes at the same three breakpoints (1180 / 900 / 860) so layout never depends on JS. */ /* Avenir first. local() picks up the licensed family wherever it is installed; add url("fonts/AvenirNext-*.woff2") to each block once the web files are in place. */ @font-face{font-family:"Goscore Avenir";font-weight:400;font-style:normal;font-display:swap; src:local("Avenir Next Regular"),local("AvenirNext-Regular"),local("Avenir Next"),local("Avenir Book"),local("Avenir Roman"),local("Avenir")} @font-face{font-family:"Goscore Avenir";font-weight:500;font-style:normal;font-display:swap; src:local("Avenir Next Medium"),local("AvenirNext-Medium"),local("Avenir Medium"),local("Avenir Next Demi Bold"),local("Avenir Heavy")} @font-face{font-family:"Goscore Avenir";font-weight:600;font-style:normal;font-display:swap; src:local("Avenir Next Demi Bold"),local("AvenirNext-DemiBold"),local("Avenir Next Bold"),local("Avenir Black"),local("Avenir Heavy")} :root{ --sans:"Goscore Avenir","Avenir Next","Avenir",Figtree,"Nunito Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --paper:#F6F4EF; --paperTint:rgba(246,244,239,.94); --card:#FFFFFF; --ink:#0B1B3F; --navy:#102463; --blue:#2E6CC6; --mint:#00DB90; --teal:#00C3C1; --muted:#5A6B86; --line:rgba(11,27,63,.15); --line2:rgba(11,27,63,.28); } *{box-sizing:border-box} /* The design styles elements inline, so an inline display: would otherwise win over the UA rule for [hidden]. Everything toggled with `hidden` relies on this. */ [hidden]{display:none!important} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.5;font-size:17px} /* Never use overflow-x:hidden here: it turns into the scroll container, which zeroes window.scrollY and freezes the scroll-driven figures. clip does not. */ html{overflow-x:clip} h1,h2,h3,h4,p,dl,dd,dt,ul,figure{margin:0;padding:0} ul{list-style:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} img{max-width:100%} a{color:var(--navy);text-decoration:none} a:hover{color:var(--blue)} ::selection{background:var(--mint);color:var(--navy)} :focus-visible{outline:2px solid var(--blue);outline-offset:3px} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} .wrap{width:min(1320px,100% - 56px);margin:0 auto} .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200} .skip:focus{left:12px;top:12px;color:#fff} /* ---- responsive grids (design `g` object) ---- */ .gc-hero{grid-template-columns:1.02fr .98fr} .gc-ev{grid-template-columns:1.25fr 1fr 1fr 1fr} .gc-intro{grid-template-columns:1fr 1.3fr} .gc-rowSales{grid-template-columns:64px 1.35fr 1.15fr 250px} .gc-rowProd{grid-template-columns:64px 1fr 1.4fr 40px} .gc-dark{grid-template-columns:1.1fr .9fr} .gc-phero{grid-template-columns:1.15fr .85fr} .gc-even{grid-template-columns:1fr 1fr} .gc-steps{grid-template-columns:repeat(4,1fr)} .gc-shero{grid-template-columns:1.14fr .86fr} .gc-three{grid-template-columns:repeat(3,1fr)} .gc-why{grid-template-columns:1.1fr .9fr} .gc-behind{grid-template-columns:1.05fr .95fr} .gc-legal{grid-template-columns:280px 1fr} .gc-foot{grid-template-columns:1.4fr 1fr 1fr} .gc-footBot{grid-template-columns:1.6fr 1fr} .gc-menuCols{grid-template-columns:274px 1fr} .gc-menuRowCols{grid-template-columns:1fr 1fr} .gap{gap:56px} .gapWide{gap:72px} .tilt{transform:rotateY(-4deg) rotateX(1.5deg)} .ctaJust{justify-content:flex-end} .heroCanvas{height:clamp(240px,29vh,390px)} @media (max-width:1179px){ .gc-ev{grid-template-columns:1fr 1fr} .gc-rowSales{grid-template-columns:56px 1.3fr 1fr 190px} .gc-three{grid-template-columns:1fr 1fr} .gc-foot{grid-template-columns:1fr 1fr} } @media (max-width:899px){ .gc-hero,.gc-ev,.gc-intro,.gc-rowSales,.gc-rowProd,.gc-dark,.gc-phero,.gc-even, .gc-shero,.gc-three,.gc-why,.gc-behind,.gc-legal,.gc-footBot,.gc-menuCols,.gc-menuRowCols{grid-template-columns:1fr} .gc-steps{grid-template-columns:1fr 1fr} .gc-foot{grid-template-columns:1fr 1fr} .gap{gap:34px} .gapWide{gap:38px} .tilt{transform:none} .ctaJust{justify-content:flex-start} .heroCanvas{height:340px} } @media (max-width:640px){ .wrap{width:min(1320px,100% - 40px)} .gc-steps,.gc-foot{grid-template-columns:1fr} } /* ---- ruled cell groups: first cell of each visual row drops its divider ---- */ .cells > *{border-left:1px solid var(--line);padding-left:24px} .cells-4 > :nth-child(4n+1),.cells-3 > :nth-child(3n+1),.cells-2 > :nth-child(2n+1){border-left-color:transparent;padding-left:0} @media (max-width:1179px){ .cells-3 > *{border-left-color:var(--line);padding-left:24px} .cells-3 > :nth-child(2n+1){border-left-color:transparent;padding-left:0} } @media (max-width:899px){ .cells-4 > *{border-left-color:var(--line);padding-left:24px} .cells-4 > :nth-child(2n+1){border-left-color:transparent;padding-left:0} .cells-3 > *,.cells-2 > *{border-left-color:transparent;padding-left:0} } @media (max-width:640px){ .cells-4 > *{border-left-color:transparent;padding-left:0} } /* ---- hover states (design `style-hover` attributes) ---- */ .hv-nav:hover{opacity:1;color:var(--blue)} .hv-navy:hover{background:#0A1840;color:#fff} .hv-mint:hover{background:#fff;color:#071539} .hv-rule:hover{border-color:var(--navy)} .hv-row:hover{background:var(--card);padding-left:18px;padding-right:18px} .hv-menurow:hover{background:var(--paper);padding-left:12px} .hv-fade:hover{opacity:.72} .hv-flat:hover{transform:rotateY(0deg) rotateX(0deg)} .hv-soft:hover{background:var(--paper)} .hv-blue:hover{color:var(--blue)} /* ---- header / pinned sections ---- */ .site-head{position:sticky;top:0;z-index:60;background:var(--paperTint);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .head-in{display:flex;align-items:center;gap:30px;height:70px} .nav-desk{display:flex;gap:26px;align-items:center} .nav-desk > *{font-size:14.5px;color:var(--ink);opacity:.74;letter-spacing:-.005em;padding:24px 0;border-bottom:2px solid transparent;background:none} .nav-desk > .on{opacity:1;color:var(--blue);border-bottom-color:var(--mint)} .lang{display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;border-left:1px solid var(--line);padding-left:30px} .lang a{padding:4px 3px;color:var(--muted)} .lang a.on{color:var(--navy)} .burger{display:none;margin-left:auto;padding:12px;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)} .burger b{display:block;width:20px;height:1.5px;background:var(--navy);position:relative} .burger b::before,.burger b::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--navy);transition:transform .2s} .burger b::before{top:-6px}.burger b::after{top:6px} .megamenu{position:absolute;left:0;right:0;top:70px;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line2);box-shadow:0 26px 46px rgba(11,27,63,.07);animation:menuIn .2s cubic-bezier(.2,.7,.2,1) both} .megamenu[hidden]{display:none} [data-pin]{position:relative;height:320vh;border-bottom:1px solid var(--line)} [data-pin] > .pin-inner{position:sticky;top:70px;min-height:calc(100vh - 70px);display:flex;align-items:center} [data-pin].pin2{height:230vh} [data-pin].unpinned{height:auto} [data-pin].unpinned > .pin-inner{position:static;min-height:0} @media (max-width:899px){ [data-pin]{height:auto} [data-pin] > .pin-inner{position:static;min-height:0} } /* ---- mobile drawer ---- */ .drawer{position:fixed;inset:0;z-index:120;background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 max(40px,env(safe-area-inset-bottom))} .drawer[hidden]{display:none} .drawer-head{position:sticky;top:0;background:var(--paperTint);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)} .drawer-close{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);padding:12px} .drawer h2{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:26px 0 10px} .drawer a.d-row{display:grid;grid-template-columns:30px 1fr 16px;gap:12px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);min-height:56px} .drawer a.d-row b{font-size:16px;font-weight:500;letter-spacing:-.012em;color:var(--navy);display:block} .drawer a.d-row span.d-sub{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted)} .drawer .d-num{font-family:var(--mono);font-size:10px;color:var(--mint)} .drawer .d-arrow{font-family:var(--mono);font-size:12px;color:var(--mint);opacity:.55} body.locked{overflow:hidden} @media (max-width:859px){ /* !important: these carry inline display from the design's markup. */ .nav-desk,.lang,.head-cta{display:none!important} .burger{display:flex} .head-in{height:auto;padding:6px 0} .megamenu{display:none!important} } @media (min-width:860px){.drawer{display:none!important}} /* ---- contact form ---- */ .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:640px){.f-grid{grid-template-columns:1fr}} .field{display:block} .field > span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .field input,.field textarea,.field select{width:100%;font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper);border:1px solid var(--line2);padding:13px 14px;border-radius:0;min-height:48px} .field textarea{min-height:120px;resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent} .field .err{display:none;margin-top:6px;font-family:var(--mono);font-size:10.5px;color:#B3261E} .field.invalid .err{display:block} .field.invalid input,.field.invalid textarea{border-color:#B3261E} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .f-note{font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--muted)} .f-status{margin-top:18px;padding:16px 18px;border-left:3px solid var(--mint);background:var(--paper);font-size:15px;line-height:1.6;color:var(--navy)} .f-status[hidden]{display:none} .f-status.bad{border-left-color:#B3261E} button[disabled]{opacity:.55;cursor:progress} /* ---- cookie consent ---- */ .consent{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--card);border-top:1px solid var(--line2);box-shadow:0 -18px 40px rgba(11,27,63,.09);padding:20px 0 max(20px,env(safe-area-inset-bottom))} .consent[hidden]{display:none} .consent-in{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center} @media (max-width:859px){.consent-in{grid-template-columns:1fr;gap:16px}} .consent p{font-size:14.5px;line-height:1.6;color:#2C3C5B;max-width:76ch} .consent .btns{display:flex;gap:12px;flex-wrap:wrap} .consent .btns button{padding:13px 20px;font-size:14.5px;font-weight:500;min-height:48px} .btn-accept{background:var(--navy);color:#fff} .btn-accept:hover{background:#0A1840} .btn-decline{border:1px solid var(--line2);color:var(--navy)} .btn-decline:hover{border-color:var(--navy)} /* ---- legal prose ---- */ .legal-body h3{font-size:17px;font-weight:500;color:var(--navy);margin-top:20px} .legal-body p + p{margin-top:14px} .legal-body ul.bul{margin-top:12px} .legal-body ul.bul li{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:5px 0;font-size:16px;line-height:1.6;color:#2C3C5B} .legal-body ul.bul li::before{content:"—";color:var(--mint);font-family:var(--mono);font-size:12px} .legal-body table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px} .legal-body th,.legal-body td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top} .legal-body th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400} .tw{overflow-x:auto}