/* ========================================================================== Sibambo (Pty) Ltd Design values measured off the reference site overnightlogistics.co.za on 2026-08-30, then corrected where the reference fails legibility or WCAG. Every deviation from the reference is commented at the point it happens. ========================================================================== */ /* --- 1. Tokens ---------------------------------------------------------- */ :root { /* Colour. Reference amber is #E09900, kept exactly. Its navy-to-purple hero gradient is dropped: purple gradients are the clearest tell of a generated page, and the reference only has one because Divi ships it by default. */ --navy-900: #0B1F3F; --navy-800: #12294F; --navy-700: #1B3A6B; --amber: #E09900; --amber-dk: #8F6000; /* 5.47:1 on white, 5.01:1 on bone. #B57C00 measured 3.59 and failed AA */ --ink: #16181C; --grey-700: #4A4F58; --grey-500: #6C737E; --grey-300: #C3C7CE; --grey-200: #DCDEE3; --grey-100: #EDEEF1; --paper: #FFFFFF; --bone: #F5F5F3; --charcoal: #23252A; /* Type. Reference: Lato 900 uppercase display over Open Sans 14px body. Lato 900 kept for the family resemblance. Body moved to 17px because 14px/1.7 in #666 sits under the comfortable reading floor on desktop. */ --f-display: "Lato", "Arial Black", system-ui, sans-serif; --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --t-hero: clamp(2.25rem, 6.2vw, 4.75rem); --t-h2: clamp(1.9rem, 4vw, 3.25rem); --t-h3: clamp(1.35rem, 2.2vw, 1.75rem); --t-eyebrow: 0.8125rem; --t-body: 1.0625rem; --t-lead: clamp(1.0625rem, 1.5vw, 1.25rem); --t-small: 0.9375rem; /* Space */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --section-y: clamp(72px, 9vw, 122px); --wrap: 1200px; --gutter: clamp(20px, 5vw, 56px); --prose: 66ch; --radius: 3px; --rule: 1px solid var(--grey-200); --shadow-lift: 0 24px 60px -24px rgba(11, 31, 63, 0.45); --dur: 420ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- 2. Reset ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--f-body); font-size: var(--t-body); line-height: 1.7; color: var(--grey-700); background: var(--paper); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; } h1, h2, h3, h4 { margin: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } /* --- 3. Type ------------------------------------------------------------ */ .display { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; color: var(--ink); text-wrap: balance; } h1.display { font-size: var(--t-hero); line-height: 0.94; letter-spacing: 0.005em; overflow-wrap: break-word; } /* A single long word ("INFRASTRUCTURE") measured the full container width on a 375px handset, leaving nothing for a narrower phone. Below 560px let it hyphenate properly instead of clipping at the edge. is what makes hyphens: auto pick sensible break points. */ @media (max-width: 560px) { h1.display { hyphens: auto; } } h2.display { font-size: var(--t-h2); line-height: 1.04; letter-spacing: 0.012em; } h3.display { font-size: var(--t-h3); line-height: 1.15; letter-spacing: 0.02em; } .eyebrow { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--t-eyebrow); letter-spacing: 0.16em; line-height: 1.4; color: var(--amber-dk); margin: 0 0 var(--s-4); } .eyebrow--onDark { color: var(--amber); } .lead { font-size: var(--t-lead); line-height: 1.6; color: var(--grey-700); } .prose { max-width: var(--prose); } .onDark { color: rgba(255,255,255,0.78); } .onDark .display, .onDark h2, .onDark h3 { color: #fff; } /* --- 4. Layout ---------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--bone { background: var(--bone); } .section--navy { background: var(--navy-900); color: rgba(255,255,255,0.78); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: var(--s-3) var(--s-5); font-weight: 700; text-decoration: none; } .skip:focus { left: var(--s-4); top: var(--s-4); } main:focus { outline: none; } :where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 0 6px #fff; } /* Inverted on dark surfaces. .cta is in this list because it is the amber band: an amber ring there measures 1.00:1 and is invisible. */ .section--navy :where(a, button, input, textarea, select):focus-visible, .band :where(a, button):focus-visible, .footer :where(a, button, input, textarea):focus-visible, .infoCard :where(a, button):focus-visible, .hero :where(a, button):focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); } .cta :where(a, button):focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px #fff; } /* --- 5. Buttons --------------------------------------------------------- */ /* The reference puts WHITE text on #E09900. That measures 2.4:1 and fails WCAG AA outright. Ink on the same amber measures 8.7:1. Brand colour kept, contrast fixed. */ .btn { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-display); font-weight: 900; font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 28px; border-radius: var(--radius); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 180ms var(--ease); } .btn:active { transform: translateY(1px); } .btn--amber { background: var(--amber); color: var(--ink); } .btn--amber:hover { background: #C98A00; } .btn--ghost { border-color: var(--grey-300); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .btn--ghostLight { border-color: rgba(255,255,255,0.45); color: #fff; background: transparent; } .btn--ghostLight:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: var(--navy-900); } .btn__arrow { transition: transform var(--dur) var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } /* --- 6. Header ---------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: saturate(150%) blur(10px); border-bottom: var(--rule); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 82px; } .logo { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; } .logo__mark { width: 40px; height: 40px; flex: none; } .logo__word { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.375rem; letter-spacing: 0.04em; color: var(--navy-900); line-height: 1; } .logo__sub { display: block; font-family: var(--f-body); font-weight: 600; font-size: 0.5625rem; letter-spacing: 0.22em; color: var(--grey-500); text-transform: uppercase; margin-top: 4px; } .nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); } .nav a { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.1em; text-decoration: none; color: var(--ink); padding: 6px 0; position: relative; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav a[aria-current="page"]:not(.nav__cta) { color: var(--amber-dk); } .nav a.nav__cta[aria-current="page"] { color: var(--ink); } .nav a.nav__cta::after { display: none; } .nav__cta { margin-left: var(--s-2); } .burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; } .burger__bar { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform var(--dur) var(--ease), opacity 200ms; } .burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 940px) { .burger { display: block; } .nav { position: fixed; inset: 82px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: var(--rule); padding: var(--s-4) var(--gutter) var(--s-6); transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 260ms var(--ease), transform 260ms var(--ease); max-height: calc(100dvh - 82px); overflow-y: auto; } .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; visibility: visible; } .nav a { padding: 16px 0; border-bottom: var(--rule); font-size: 1rem; } .nav a::after { display: none; } /* Colour alone cannot carry "you are here". */ .nav a[aria-current="page"] { border-left: 3px solid var(--amber); padding-left: 12px; } .nav__cta { margin: var(--s-5) 0 0; justify-content: center; } } /* --- 7. Hero ------------------------------------------------------------ */ .hero { position: relative; background: var(--navy-900); overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,22,45,0.94) 0%, rgba(8,22,45,0.80) 38%, rgba(8,22,45,0.24) 100%), linear-gradient(0deg, rgba(8,22,45,0.70) 0%, rgba(8,22,45,0) 55%); } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.72fr); gap: clamp(32px, 5vw, 72px); align-items: end; padding-block: clamp(90px, 12vw, 168px) clamp(90px, 11vw, 142px); } .hero__rule { width: 84px; height: 5px; background: var(--amber); margin-bottom: var(--s-5); } .hero h1 { color: #fff; } .hero__sub { margin-top: var(--s-5); max-width: 46ch; color: rgba(255,255,255,0.84); font-size: var(--t-lead); line-height: 1.6; } .hero__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4); } /* The contact card overlaps the section below. This is the one element that is allowed to break the grid. The reference does the same thing. */ .hero__card { background: var(--paper); color: var(--ink); padding: var(--s-6) var(--s-6) var(--s-7); border-top: 5px solid var(--amber); box-shadow: var(--shadow-lift); margin-bottom: clamp(-104px, -7vw, -52px); } .hero__card h2 { font-size: 1.5rem; line-height: 1.15; } .hero__card dl { margin: var(--s-5) 0 var(--s-6); display: grid; gap: var(--s-4); } .hero__card dt { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--grey-500); } .hero__card dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); font-size: 1.0625rem; } .hero__card dd a { text-decoration: none; border-bottom: 2px solid var(--grey-200); } .hero__card dd a:hover { border-color: var(--amber); } @media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; align-items: start; } .hero__card { margin-bottom: clamp(-84px, -8vw, -44px); } } /* Interior page head, shorter than the home hero */ .pagehead { position: relative; background: var(--navy-900); overflow: hidden; } .pagehead__media { position: absolute; inset: 0; } .pagehead__media img { width: 100%; height: 100%; object-fit: cover; } .pagehead__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,22,45,0.93) 0%, rgba(8,22,45,0.74) 50%, rgba(8,22,45,0.30) 100%), linear-gradient(0deg, rgba(8,22,45,0.55) 0%, rgba(8,22,45,0) 60%); } .pagehead__inner { position: relative; z-index: 2; padding-block: clamp(68px, 9vw, 124px); } .pagehead h1 { color: #fff; max-width: 18ch; } .pagehead p { margin-top: var(--s-5); max-width: 58ch; color: rgba(255,255,255,0.84); font-size: var(--t-lead); } .pagehead__rule { width: 84px; height: 5px; background: var(--amber); margin-bottom: var(--s-5); } /* --- 8. Value grid ------------------------------------------------------ */ /* Four columns with a rule and a number. No cards, no icons in circles. */ .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .value { padding: var(--s-6) var(--s-5) var(--s-6) 0; border-top: 3px solid var(--ink); } .value + .value { padding-left: var(--s-6); } .value__no { font-family: var(--f-display); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--amber-dk); display: block; margin-bottom: var(--s-3); } .value h3 { font-size: 1.0625rem; letter-spacing: 0.08em; margin-bottom: var(--s-3); } .value p { font-size: var(--t-small); line-height: 1.65; } @media (max-width: 940px) { .values { grid-template-columns: repeat(2, 1fr); } .value + .value { padding-left: 0; } .value:nth-child(even) { padding-left: var(--s-5); } } @media (max-width: 560px) { .values { grid-template-columns: 1fr; } .value:nth-child(even) { padding-left: 0; } } /* --- 9. Divisions ------------------------------------------------------- */ /* The single visual idea: two divisions running down the page, alternating sides. Deliberately not three equal cards. */ .division { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .division + .division { margin-top: clamp(64px, 9vw, 118px); } .division__media { grid-column: 1 / span 6; position: relative; } .division__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .division__body { grid-column: 8 / span 5; } .division--flip .division__media { grid-column: 7 / span 6; } .division--flip .division__body { grid-column: 1 / span 5; } .division__tag { position: absolute; bottom: 0; left: 0; background: var(--amber); color: var(--ink); font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.16em; padding: 12px 20px; } .division h2 { margin-bottom: var(--s-5); } .division__list { margin: var(--s-6) 0 var(--s-7); display: grid; gap: 0; } .division__list li { padding: 14px 0 14px 30px; border-bottom: var(--rule); position: relative; font-size: var(--t-small); color: var(--grey-700); } .division__list li:first-child { border-top: var(--rule); } .division__list li::before { content: ""; position: absolute; left: 0; top: 23px; width: 14px; height: 2px; background: var(--amber); } @media (max-width: 940px) { .division, .division--flip { grid-template-columns: 1fr; } .division__media, .division__body, .division--flip .division__media, .division--flip .division__body { grid-column: 1 / -1; } .division--flip .division__media { order: -1; } } /* --- 10. Statement band ------------------------------------------------- */ .band { position: relative; overflow: hidden; background: var(--navy-900); } .band__media { position: absolute; inset: 0; } .band__media img { width: 100%; height: 100%; object-fit: cover; } .band__media::after { content: ""; position: absolute; inset: 0; background: rgba(8,22,45,0.84); } .band__inner { position: relative; z-index: 2; padding-block: var(--section-y); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 6vw, 90px); align-items: start; } .band__inner h2 { max-width: 14ch; } @media (max-width: 880px) { .band__inner { grid-template-columns: 1fr; } } /* --- 11. Numbers strip -------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } .stat { border-left: 3px solid var(--amber); padding-left: var(--s-5); } .stat__n { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.05; color: var(--ink); } .section--navy .stat__n, .onDark .stat__n, .band .stat__n { color: #fff; } .stat__l { display: block; margin-top: var(--s-3); font-size: 0.875rem; line-height: 1.5; } @media (max-width: 840px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-6); } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } } /* --- 12. Steps ---------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); counter-reset: step; } .step { counter-increment: step; border-top: 3px solid var(--grey-200); padding-top: var(--s-5); } .step::before { content: "0" counter(step); font-family: var(--f-display); font-weight: 900; font-size: 2.25rem; color: var(--grey-300); line-height: 1; display: block; margin-bottom: var(--s-4); } .step h3 { font-size: 1rem; letter-spacing: 0.08em; margin-bottom: var(--s-3); } .step p { font-size: var(--t-small); } @media (max-width: 880px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } /* --- 13. CTA ------------------------------------------------------------ */ .cta { background: var(--amber); color: var(--ink); } .cta__inner { padding-block: clamp(56px, 7vw, 88px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); } .cta h2 { max-width: 20ch; color: var(--ink); } .cta p { margin-top: var(--s-4); max-width: 46ch; color: rgba(22,24,28,0.80); } /* --- 14. Forms ---------------------------------------------------------- */ .form { display: grid; gap: var(--s-5); } .field { display: grid; gap: var(--s-2); } .field label { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--ink); } .field .req { color: var(--amber-dk); } .field input, .field select, .field textarea { font: inherit; font-size: var(--t-body); color: var(--ink); padding: 14px 16px; border: 2px solid var(--grey-200); border-radius: var(--radius); background: var(--paper); width: 100%; transition: border-color 200ms var(--ease); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey-300); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-700); } .field textarea { min-height: 150px; resize: vertical; } .field__hint { font-size: 0.8125rem; color: var(--grey-500); } .field__err { font-size: 0.8125rem; color: #A5170F; font-weight: 600; display: none; } .field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #A5170F; } .field[data-invalid="true"] .field__err { display: block; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } @media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } } .form__status { padding: var(--s-4) var(--s-5); border-left: 4px solid var(--navy-700); background: var(--grey-100); font-size: var(--t-small); color: var(--ink); } /* Never display:none. The region has to exist in the accessibility tree from first paint or the first message is not announced. Empty means invisible, not absent. */ .form__status:empty { padding: 0; border: 0; background: none; } .form__status[data-state="ok"] { border-color: #17663A; } .form__status[data-state="err"] { border-color: #A5170F; } /* display:none, not off-screen. Off-screen fields are precisely the ones password managers autofill, and a filled trap silently binned a real enquiry. */ .hp { display: none; } /* QA-002: the form cannot work without main.js, and a native submit would GET the visitor's name, phone and email into the URL bar and browser history. No script, no form; they get the phone number instead. */ html:not(.js) .form { display: none; } .noJs { display: none; } html:not(.js) .noJs { display: block; } /* --- 15. Contact panels ------------------------------------------------- */ .contactGrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 76px); align-items: start; } @media (max-width: 940px) { .contactGrid { grid-template-columns: 1fr; } } .infoCard { background: var(--navy-900); color: rgba(255,255,255,0.82); padding: var(--s-7) var(--s-6); } .infoCard h3 { color: #fff; font-size: 1.125rem; letter-spacing: 0.1em; margin-bottom: var(--s-5); } .infoCard dl { display: grid; gap: var(--s-5); margin: 0; } .infoCard dt { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--amber); } .infoCard dd { margin: 4px 0 0; color: #fff; font-weight: 500; } .infoCard dd a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); } .infoCard dd a:hover { border-color: var(--amber); } /* --- 16. Footer --------------------------------------------------------- */ .footer { background: var(--charcoal); color: rgba(255,255,255,0.68); font-size: var(--t-small); } .footer__top { padding-block: clamp(56px, 7vw, 84px); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); } .footer .footer__h { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.16em; color: #fff; margin-bottom: var(--s-4); } .footer a { color: rgba(255,255,255,0.74); text-decoration: none; } .footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer li { padding: 0; } .footer li a { display: inline-block; padding: 7px 0; } .footer__logo .logo__word { color: #fff; } .footer__logo .logo__sub { color: rgba(255,255,255,0.55); } .footer__blurb { margin-top: var(--s-4); max-width: 34ch; } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-block: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between; font-size: 0.8125rem; } @media (max-width: 940px) { .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } } /* --- 17. Utilities and motion ------------------------------------------- */ .stack > * + * { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .tbc { border-bottom: 2px dotted var(--amber-dk); } /* Scoped to .js on purpose. If the script fails to load, is blocked, or throws, every .reveal section would otherwise stay at opacity 0 and the page would render blank below the hero. Content visible by default, hidden only once JS has confirmed it is running and can show it again. */ .js .reveal { opacity: 0; transform: translateY(18px); } .js .reveal[data-shown="true"] { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); } /* If focus reaches a block before the observer has revealed it, show it now rather than leaving a focused control at opacity 0. */ .js .reveal:focus-within { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal[data-shown="true"] { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media print { .header, .burger, .cta { position: static; background: none !important; } .hero__media, .band__media, .pagehead__media { display: none; } .footer { color: #000; background: none; } }