/* ========================================================= OutBound Logistics — styles.css ========================================================= */ :root{ /* Brand */ --blue: #14467B; /* official blue */ --blue-dark: #0F3862; --blue-card: #2A5C96; /* card fill that reads lighter on the blue band */ --blue-icon: #1E5089; --ink: #142A44; /* headings on white */ --body: #5C6672; /* body copy on white */ --body-light: #FFFFFF; /* copy on the blue bands — full opacity */ --line: #E6E6E6; --white: #FFFFFF; /* Type */ --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* Layout */ --container: 1620px; /* wide grid used by nav, hero, cards */ --container-narrow: 1420px; --gutter: 40px; /* Diagonal band slope (offset of the angled edges) */ --slope: 3.5vw; --radius: 16px; --shadow: 0 24px 60px rgba(12, 39, 71, .18); --shadow-soft: 0 18px 44px rgba(12, 39, 71, .12); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; overflow-x:hidden; /* must be on too, or the photos' overhanging glow still widens the document and leaves a gap at the right */ } body{ margin:0; font-family:var(--font); font-size:16px; line-height:1.75; color:var(--body); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,p,ul{ margin:0; } ul{ list-style:none; padding:0; } button,input,textarea{ font:inherit; color:inherit; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- Layout helpers ---------- */ .container{ width:100%; max-width:calc(var(--container) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); } .container--narrow{ max-width:calc(var(--container-narrow) + var(--gutter) * 2); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; min-width:190px; padding:14px 30px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1; cursor:pointer; transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .btn--primary{ height:50px; padding:0 34px; background:var(--blue); color:var(--white); border-color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.2em; /* 20% */ } .btn--primary:hover{ background:var(--blue-dark); border-color:var(--blue-dark); } /* Fixed height + flex centring, rather than symmetric padding around a line-height:1 box, so the label sits dead centre in the pill. */ .btn--outline{ background:transparent; color:var(--blue); border-color:var(--blue); min-width:0; height:42px; padding:0 26px; line-height:normal; letter-spacing:.1em; } .btn--outline:hover{ background:var(--blue); color:var(--white); } .btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.7); min-width:0; height:42px; padding:0 26px; line-height:normal; letter-spacing:.1em; } .btn--ghost:hover{ background:var(--white); color:var(--blue); } /* ---------- Section typography ---------- */ .section-title{ font-size:clamp(24px, 2.1vw, 38px); font-weight:700; line-height:1.25; letter-spacing:-.01em; } .section-title--light{ color:var(--white); } .section-title--blue{ color:var(--blue); } .section-title--center{ text-align:center; } .section-sub{ margin-top:14px; font-size:15px; line-height:1.7; max-width:640px; } .section-sub--light{ color:var(--body-light); } .section-sub--center{ margin-inline:auto; text-align:center; } /* ========================================================= HEADER ========================================================= */ .site-header{ position:absolute; inset:0 0 auto 0; z-index:50; padding:26px 0; } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; } .header__logo img{ height:80px; width:auto; } .nav{ display:flex; align-items:center; gap:44px; } .nav__link{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); position:relative; transition:opacity .2s ease; } .nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .nav__link:hover::after{ transform:scaleX(1); } /* Mobile toggle */ /* Even gap + even height keeps all three bars on the same sub-pixel offset, so they rasterise to identical thickness at fractional DPR / browser zoom (an odd 5px gap put them on 1/4-pixel boundaries and the lower two rendered thinner). */ .nav-toggle{ display:none; width:44px; height:38px; flex-direction:column; justify-content:center; align-items:center; gap:6px; background:none; border:0; cursor:pointer; padding:0; } .nav-toggle span{ display:block; flex:0 0 2px; height:2px; width:26px; background:var(--blue); transition:transform .25s ease, opacity .25s ease; } /* ========================================================= HERO ========================================================= */ /* Hero.png is 2180x969 (aspect 2.2497 -> 44.45vw tall at full bleed). Holding the hero at 968px while the viewport grows past ~2178px would force `cover` to scale the image taller than the box and crop the baked-in white fade off the bottom. Letting the height follow the image's own aspect once it overtakes 968px means the image always fits vertically, so the fade is never cut — and anchoring to `bottom` keeps it pinned to the hero's bottom edge. */ .hero{ position:relative; height:max(968px, 44.45vw); min-height:968px; display:flex; align-items:center; isolation:isolate; } .hero__media{ position:absolute; inset:0; z-index:-1; background:url("Hero.png") center bottom / cover no-repeat, var(--white); } .hero__inner{ position:relative; top:-120px; /* lift the hero copy off centre */ } .hero__eyebrow{ font-size:30px; font-weight:400; line-height:1.3; color:var(--blue); margin-bottom:6px; } .hero__title{ font-size:52px; font-weight:800; line-height:1; letter-spacing:-.01em; color:var(--blue); margin-bottom:20px; /* headline -> Learn More button */ } /* ========================================================= WHO ARE WE ========================================================= */ .who{ position:relative; z-index:2; /* keeps cards above the blue band behind them */ padding-top:46px; /* -24px: pulls this section and all that follows up */ } .who__title img{ width:clamp(190px, 15.6vw, 300px); height:auto; } .who__intro{ margin-top:10px; max-width:1240px; font-size:15px; color:var(--body); } .cards{ margin-top:44px; display:grid; grid-template-columns:repeat(3, minmax(0, 500px)); justify-content:space-between; gap:60px; } /* No card chrome — the photo IS the card. Each PNG is a 668x668 canvas with the artwork square (500x500) at offset 84,40; the rest is glow + shadow. Sizing the image to 133.6% and pulling it back by 16.8%/8% lands that square exactly on the 500x500 card box, and keeps doing so as the card scales down. */ .card{ position:relative; aspect-ratio:1 / 1; color:var(--white); } .card__photo{ position:absolute; inset:0; } .card__photo img{ position:absolute; top:-8%; left:-16.8%; width:133.6%; height:133.6%; max-width:none; } /* Icon + copy, vertically centred inside the 500x500 box. The stack is left-aligned so the icon sits on the same edge as the paragraph. */ .card__content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:44px; padding:48px; } .card__icon{ align-self:center; /* centred in the box; the paragraph stays left-aligned */ height:60px; width:auto; max-width:100%; object-fit:contain; } .card__text{ width:100%; text-align:left; font-size:21px; font-weight:200; line-height:1.35; color:var(--white); } /* ========================================================= DIAGONAL BLUE BANDS ========================================================= */ .band{ position:relative; z-index:1; } .band::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--blue); /* flat top edge; only the bottom edge is angled (falls to the right) */ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slope))); } .band__content{ position:relative; } /* --- Air transportation band --- */ .band--air{ margin-top:-280px; /* slide the blue up behind the photos */ padding-top:420px; padding-bottom:90px; text-align:center; } .band--air .section-sub{ margin-inline:auto; max-width:1000px; /* keeps the sub-headline on a single line */ } /* air-transportation.png is a 1530x810 canvas with 53px of transparent shadow padding above the artwork and 68px below (3.46% / 4.44% of the displayed width). Cancelling it means the values below are the gaps you actually see. */ .band--air .feature-figure{ margin-top:calc(36px - 3.46%); /* 36px from the sub-heading to the photo */ margin-bottom:calc(-150px - 4.44%); /* photo overhangs the band's bottom edge */ } /* --- Mission & Values band: angled on the top edge as well --- */ .band--mission{ margin-top:-160px; /* rides up over the Travel Center photo */ padding-top:240px; /* tracks the margin, so content doesn't shift */ padding-bottom:40px; } /* Angled on the top edge as well. The bottom inset shortens the painted blue without touching layout, so nothing below the band shifts when it changes. */ .band--mission::before{ bottom:170px; clip-path:polygon(0 var(--slope), 100% 0, 100% 100%, 0 calc(100% - var(--slope))); } /* ========================================================= FEATURE IMAGES Corner radius + drop shadow are baked into the PNGs, so the figure itself stays completely transparent. ========================================================= */ .feature-figure{ margin:0; background:none; border-radius:0; box-shadow:none; } .feature-figure img{ width:100%; height:auto; } /* ========================================================= SPLIT SECTIONS (image + text) ========================================================= */ .split{ position:relative; z-index:2; /* images sit above the blue band edges */ padding:40px 0; /* -> 80px between the luggage and travel center photos */ } /* Clears the air photo's 150px overhang, leaving 100px between the two photos. */ .split--media-left{ padding-top:160px; } /* luggage-delivery.png / travel-center.png: 840x740 canvases carrying 52px of transparent padding on top and 68px underneath (6.19% / 8.10% of the column). */ .split .feature-figure{ margin-top:-6.19%; margin-bottom:-8.10%; } /* Luggage Delivery: 20px more air between the photo and the copy to its right. */ .split--media-left .split__body{ margin-left:20px; } /* Travel Center only: the photo stays where it is — the copy shifts right toward it instead. */ .split--media-right .split__body{ margin-left:45px; } /* Same max width as the air-transportation photo, so all three service sections line up on the same left/right edges. */ .split .container{ max-width:calc(var(--container-narrow) + var(--gutter) * 2); } .split__inner{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; /* the photos still carry ~57px of transparent shadow padding on each side, which is the only separation left between photo and copy */ } .split--media-left .split__inner{ grid-template-columns:1.05fr .95fr; } .split--media-right .split__inner{ grid-template-columns:.95fr 1.05fr; } .split__body p{ margin-top:18px; font-size:16px; line-height:1.65; color:var(--body); max-width:51ch; } /* ========================================================= MISSION & VALUES GRID ========================================================= */ .mv-grid{ width:88%; /* 80% -> 88%: 10% wider, still centred by auto margins */ margin:30px auto 0; padding:40px; display:grid; grid-template-columns:1fr 1fr; column-gap:90px; row-gap:0; } .mv{ padding:38px 0; position:relative; } /* vertical divider between the two columns — fades out at both ends */ .mv:nth-child(odd)::after{ content:""; position:absolute; top:0; bottom:0; right:-45px; width:1px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%); } /* horizontal divider between the two rows — fades out at both ends */ .mv:nth-child(1)::before, .mv:nth-child(2)::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%); } .mv:nth-child(1), .mv:nth-child(2){ padding-top:0; } .mv__title{ font-size:20px; font-weight:700; color:var(--white); margin-bottom:14px; } .mv__text{ font-size:16px; font-weight:300; line-height:1.65; color:var(--body-light); max-width:58ch; } .values{ display:grid; grid-template-columns:1fr 1fr; column-gap:40px; row-gap:14px; } .values li{ display:flex; align-items:center; gap:12px; font-size:16px; color:var(--white); line-height:1.2; } .values img{ width:16px; height:16px; flex:0 0 auto; } /* ========================================================= FOUNDER CARD ========================================================= */ .founder{ width:1400px; max-width:100%; height:550px; margin:110px auto -170px; /* overhangs the bottom edge of the blue band */ background:var(--white); border-radius:40px; box-shadow:var(--shadow); display:grid; grid-template-columns:max-content 1fr; gap:40px; padding:0 70px 0 0; overflow:hidden; } .founder__photo{ align-self:end; } .founder__photo img{ width:auto; height:540px; /* 578x547 source -> 570px wide */ max-width:none; display:block; } .founder__body{ align-self:center; padding:40px 0; max-width:730px; } .founder__eyebrow{ font-size:30px; font-weight:600; color:var(--blue); line-height:1.2; margin-bottom:24px; /* +16px */ } .founder__name{ font-size:34px; font-weight:600; color:var(--blue); line-height:1.2; margin-bottom:14px; } /* Both children share a 20px row and centre inside it, so the label and the LinkedIn mark sit on the same optical centre line. */ .founder__role{ display:flex; align-items:center; gap:16px; margin-bottom:22px; font-size:16px; font-weight:600; line-height:1; color:var(--blue); } .founder__role span, .founder__role a{ display:inline-flex; align-items:center; height:20px; } .founder__role img{ display:block; width:auto; height:18px; } .founder__bio{ font-size:16px; font-weight:400; line-height:1.5; color:var(--body); } /* ========================================================= CONTACT ========================================================= */ .contact{ position:relative; z-index:2; padding-top:300px; /* clears the overhanging founder card */ padding-bottom:100px; } .contact .section-title{ font-size:40px; font-weight:700; } .contact .section-sub{ font-size:18px; font-weight:400; color:var(--body); max-width:780px; } .contact__grid{ margin-top:60px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; } /* map.png: 841x598 canvas with 34px of transparent padding on every side (4.04% of the column) — cancelled so the 40px column gap is the real gap. */ .contact__map{ margin:-4.04%; background:none; border-radius:0; box-shadow:none; } .contact__map img{ width:100%; height:auto; } .contact__name{ font-size:26px; font-weight:700; color:var(--blue); margin-bottom:12px; } .contact__address{ font-size:14px; color:var(--body); } .contact__directions{ margin-left:14px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px; } .contact__directions:hover{ color:var(--blue); } .contact__list{ margin-top:18px; display:flex; flex-wrap:wrap; gap:14px 46px; } .contact__list li{ display:flex; align-items:center; gap:12px; font-size:14px; } .contact__list img{ width:16px; height:auto; } .contact__list a:hover{ color:var(--blue); } /* ---------- Form ---------- */ .form{ margin-top:34px; } /* Honeypot — pushed off-screen rather than display:none, so bots still fill it */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; } /* one spacing rule for every field, so the Name/Phone pair stays level */ .field{ margin-bottom:20px; } /* the row owns the gap between its own fields; without this the fields' bottom margin stacks on top of the row gap once they wrap to one column */ .form__row .field{ margin-bottom:0; } .form input, .form textarea{ display:block; width:100%; height:56px; padding:0 22px; border:1px solid #E6E6E6; border-radius:20px; background:var(--white); font-size:15px; font-weight:500; line-height:54px; color:var(--body); transition:border-color .2s ease, box-shadow .2s ease; } .form textarea{ height:auto; min-height:120px; padding:16px 22px; line-height:1.6; resize:vertical; } .form input::placeholder, .form textarea::placeholder{ color:var(--body); } .form input:focus, .form textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(20,70,123,.10); } .form input[aria-invalid="true"], .form textarea[aria-invalid="true"]{ border-color:#C0392B; } .form .h-captcha{ margin:4px 0 22px; } .form .btn--primary{ margin-top:8px; height:56px; font-size:12px; font-weight:700; } .form__status{ margin-top:14px; font-size:13px; min-height:20px; color:var(--blue); } /* ========================================================= FOOTER ========================================================= */ .site-footer{ background:var(--blue); color:var(--white); padding:34px 0 94px; /* +60px of blue below the content */ } .footer__inner{ display:flex; align-items:center; gap:24px; } .footer__brand{ display:flex; align-items:center; gap:16px; font-size:14px; font-weight:700; letter-spacing:.02em; } .footer__brand img{ height:34px; width:auto; } /* ========================================================= ENTRANCE ANIMATIONS The hidden state only applies when JS is running (), so the page still renders fully if JS fails or is disabled. Everything is opacity + transform only, so no layout is affected. ========================================================= */ @media (prefers-reduced-motion:no-preference){ .js-anim [data-animate]{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); transition-delay:var(--delay, 0s); } .js-anim [data-animate="fade"]{ transform:none; } .js-anim [data-animate="left"]{ transform:translateX(-38px); } .js-anim [data-animate="right"]{ transform:translateX(38px); } .js-anim [data-animate="zoom"]{ transform:scale(.965); } .js-anim [data-animate].is-visible{ opacity:1; transform:none; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1240px){ :root{ --gutter:32px; --slope:4.5vw; } .cards{ gap:28px; } .split__inner{ gap:36px; } .contact__grid{ gap:32px; } .mv-grid{ column-gap:56px; } .mv:nth-child(odd)::after{ right:-28px; } .founder{ gap:40px; padding-right:48px; } } @media (max-width:1024px){ .hero__eyebrow{ font-size:24px; } .hero__title{ font-size:40px; } .cards{ grid-template-columns:minmax(0, 500px); justify-content:center; gap:40px; } .band--air{ margin-top:-200px; padding-top:300px; padding-bottom:80px; } .band--air .feature-figure{ margin-bottom:calc(-90px - 4.44%); } .split--media-left{ padding-top:100px; } .band--mission{ margin-top:-260px; padding-top:340px; } .founder{ height:auto; } .split__inner{ grid-template-columns:1fr !important; gap:36px; } .split--media-left .split__body, .split--media-right .split__body{ margin-left:0; } .split--media-right .split__inner .split__body{ order:2; } .split--media-right .split__inner .feature-figure{ order:1; } .split__body p{ max-width:none; } .mv-grid{ width:100%; grid-template-columns:1fr; padding:40px 3%; } /* copy ~15% wider */ .mv{ padding:30px 0; } .mv:nth-child(odd)::after{ display:none; } .mv:nth-child(1)::before, .mv:nth-child(2)::before, .mv:nth-child(3)::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%); } .mv:nth-child(2){ padding-top:30px; } .founder{ grid-template-columns:1fr; padding:0 0 40px; gap:0; margin-bottom:-120px; text-align:left; } /* the desktop rule pins this to height:540px / width:auto (570px wide), which would blow the card past the viewport — go fluid, full card width instead */ .founder__photo{ padding:0; max-width:none; } .founder__photo img{ width:100%; height:auto; max-width:100%; } .founder__body{ padding:20px 32px 0; } .contact{ padding-top:190px; } .contact__grid{ grid-template-columns:1fr; gap:48px; } } @media (max-width:820px){ :root{ --gutter:22px; --slope:6vw; } /* Mobile nav */ .nav-toggle{ display:flex; } .nav{ position:absolute; top:100%; left:var(--gutter); right:var(--gutter); flex-direction:column; align-items:stretch; gap:0; padding:10px 0; background:var(--white); border-radius:12px; box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; } .nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); } .nav__link{ padding:14px 22px; } .nav__link::after{ display:none; } .nav__cta{ margin:10px 22px 12px; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .hero{ height:760px; min-height:760px; } /* 968px is unusable on a phone */ .hero__inner{ top:-80px; padding-top:0; } .hero__eyebrow{ font-size:19px; } .hero__title{ font-size:30px; } .header__logo img{ height:56px; } .contact .section-title{ font-size:28px; } /* Luggage + travel center: cancel the PNG's transparent side padding so the artwork sits flush with the container, corners and shadow intact. */ .split .feature-figure{ margin-inline:-8.33%; } /* Air transportation: same width and placement as the luggage photo, but much taller. Height can only come from zooming (it's a 1530x810 landscape crop), and zooming pushes the PNG's baked corners + shadow off the sides — so the figure is a clipping box that re-applies both in CSS. The img is scaled to 180% and centred; its negative margins cancel the transparent padding, so the box lands exactly on the artwork. ~40% of the width is cropped. Everything scales off that one width value: raise it for a taller/tighter crop, lower it for a wider/shorter one. */ .band--air .feature-figure{ margin:36px 0 -90px; overflow:hidden; border-radius:16px; box-shadow:0 14px 34px rgba(12, 39, 71, .16); } .band--air .feature-figure img{ width:180%; max-width:none; margin:-6.24% 0 -8% -40%; } .split .section-title{ text-align:center; } .who{ padding-top:50px; } .who__title img{ margin-inline:auto; } /* block img — auto margins, not text-align */ .who__intro{ text-align:center; } .split{ padding:40px 0; } /* top edge 140px lower; painted blue 200px shorter at the bottom */ .band--mission{ margin-top:0; padding-top:80px; padding-bottom:90px; } .band--mission::before{ bottom:370px; } .founder{ margin-top:80px; } /* -30px above Jason's photo */ .founder__eyebrow{ font-size:20px; text-align:center; } .founder__name{ font-size:24px; text-align:center; } .founder__role{ justify-content:center; } .contact{ padding-top:160px; } /* -30px between the bio and "Let's Build Something" */ .contact__grid{ margin-top:40px; gap:38px; } /* -20px above the map, -10px below it */ .contact__name{ text-align:center; } .contact .section-sub{ font-size:15px; } /* address centred, with "Get Directions" dropped onto its own line beneath it */ .contact__address{ text-align:center; } .contact__directions{ display:block; margin:8px 0 0; } /* phone + email share one row: no wrapping, tighter type and gaps */ .contact__list{ flex-wrap:nowrap; justify-content:space-between; gap:16px; } .contact__list li{ font-size:13px; gap:8px; white-space:nowrap; } .form__row{ grid-template-columns:1fr; gap:10px; margin-bottom:10px; } .field{ margin-bottom:10px; } .btn{ min-width:0; width:100%; } .nav__cta{ width:auto; } .footer__inner{ justify-content:center; text-align:center; } } @media (max-width:520px){ .card__content{ padding:28px; } .card__text{ font-size:19px; } .values{ grid-template-columns:1fr; } .founder__body{ padding:20px 22px; } .founder__eyebrow{ margin-bottom:20px; } } /* On phones the sideways slides read as jitter — make everything rise instead, and shorten the travel so the motion stays subtle. */ @media (max-width:820px) and (prefers-reduced-motion:no-preference){ .js-anim [data-animate], .js-anim [data-animate="left"], .js-anim [data-animate="right"]{ transform:translateY(20px); } .js-anim [data-animate="zoom"]{ transform:scale(.975); } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }