/* ========================================================================== "Science fiction and humanism" — virtual exhibition ========================================================================== Hand-written, and deliberately NOT part of the Prepros pipeline that builds css/style.css from css/style.less. Edit this file directly. Every rule is namespaced under .hh-scifi. The stylesheet is enqueued after style.css (see functions.scifi.php), so it wins on equal specificity, but the namespace is what stops the theme's own element styling leaking in and stops these rules leaking out. The exhibition uses the Humanists UK print-collateral treatment: Rubik throughout, square corners, the five-colour palette. It is intentionally distinct from the rest of Humanist Heritage, which sets body copy in Open Sans and rounds its cards. ========================================================================== */ /* * The page behind the exhibition. This is the one selector here that is not * namespaced under .hh-scifi, because it has to reach : the class is * added by hh_scifi_body_class(), which also drops the theme's * .single-exhibition class and the black background that came with it. */ .hh-scifi-page { background-color: #F5F5F5; } .hh-scifi { /* Brand palette */ --purple: #702F8A; --indigo: #4C4184; --teal: #00C7B1; --yellow: #FFCC33; --orange: #E87722; --green: #4FA754; /* Darkened variants, for coloured text on white (AA contrast) */ --teal-text: #007A6C; /* Neutrals */ --ink: #333; --ink-2: #444; --ink-3: #555; --muted: #767676; --faint: #C7C7C7; --border: #E4E4E4; --surface: #F7F7F7; --page: #F5F5F5; --night: #101528; /* Per-stop accent; overridden inline on .hh-tour */ --accent: var(--teal); --accent-text: var(--teal-text); /* * The site header is position:fixed and 80px tall at every width, so it * sits over the top of the page. The theme's own templates clear it with * margin-top:80px on .pageheader; this exhibition renders no .pageheader, * so it offsets itself — otherwise the header covers the top of the hero * copy, badly on narrow screens where the hero padding is smallest. */ --site-header: 80px; padding-top: var(--site-header); background: var(--page); color: var(--ink); font-family: 'Rubik', 'Calibri', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hh-scifi *, .hh-scifi *::before, .hh-scifi *::after { box-sizing: border-box; } /* * The theme sets margins and Open Sans on bare elements; reset inside here. * * `color: inherit` matters as much as the rest: foundation.css styles bare * `h1`/`h2` as #222, and a rule on the element itself beats anything this * exhibition inherits from .hh-scifi, however specific. The exhibition's * headings take the body ink instead, and the component rules further down * still override where a heading is deliberately coloured. */ .hh-scifi h1, .hh-scifi h2, .hh-scifi h3, .hh-scifi h4, .hh-scifi h5, .hh-scifi h6, .hh-scifi p, .hh-scifi ul, .hh-scifi li, .hh-scifi figure { margin: 0; padding: 0; font-family: inherit; color: inherit; } .hh-scifi ul { list-style: none; } .hh-scifi a { color: var(--indigo); text-decoration: none; } .hh-scifi a:hover, .hh-scifi a:focus { color: var(--teal-text); } .hh-scifi em { font-style: italic; } .hh-scifi strong { font-weight: 500; } .hh-scifi img { max-width: 100%; height: auto; } /* * The theme sets `.single-exhibition img { width:100%; aspect-ratio:4/3; * object-fit:cover }`. hh_scifi_body_class() removes that class, but restate * the defaults so a stray reinstatement cannot silently letterbox the * portraits and squash the logos. */ .hh-scifi img:not([style*="width"]) { width: auto; aspect-ratio: auto; object-fit: fill; } .hh-scifi :focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; } /* Body copy links carry an underline so they read as links without colour alone. */ .hh-scifi p a, .hh-scifi .hh-podcta-body a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- Shared scaffolding -------------------------------------------------------------------------- */ .hh-scifi .hh-x { padding-left: 32px; padding-right: 32px; } .hh-scifi .hh-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .hh-scifi .hh-eyebrow.hh-teal { color: var(--teal-text); } .hh-scifi .hh-eyebrow.hh-accent { color: var(--accent-text); } .hh-scifi .hh-rule { display: block; width: 44px; height: 2px; background: var(--teal); } /* -------------------------------------------------------------------------- Buttons Two parts: a filled leading word, then a label the fill sweeps across on hover. The sweep is a pseudo-element width transition, so it costs nothing on paint and degrades to a plain two-tone button without transitions. -------------------------------------------------------------------------- */ .hh-scifi .hh-swp { display: inline-flex; align-items: stretch; background: none; border: 0; padding: 0; font-family: inherit; font-size: 16px; text-align: left; cursor: pointer; } .hh-scifi .hh-swp .hh-s { position: relative; z-index: 2; display: flex; align-items: center; margin-right: 8px; padding: 12px 16px; background: var(--teal); color: #000; font-weight: 500; } .hh-scifi .hh-swp .hh-t { position: relative; display: flex; align-items: center; padding: 12px 16px 12px 8px; } .hh-scifi .hh-swp .hh-t::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; z-index: 0; width: 0; background: var(--teal); transition: width 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); } .hh-scifi .hh-swp .hh-label { position: relative; z-index: 1; transition: color 0.3s ease-out 0.15s; } .hh-scifi .hh-swp:hover .hh-t::before, .hh-scifi .hh-swp:focus-visible .hh-t::before { width: calc(100% + 8px); } .hh-scifi .hh-swp:hover .hh-label, .hh-scifi .hh-swp:focus-visible .hh-label { color: #000; } .hh-scifi .hh-swp.hh-dark .hh-label { color: #fff; } .hh-scifi .hh-swp.hh-light .hh-label { color: var(--ink); } .hh-scifi .hh-swp.hh-yellow .hh-s, .hh-scifi .hh-swp.hh-yellow .hh-t::before { background: var(--yellow); } .hh-scifi .hh-swp.hh-yellow .hh-label { color: #fff; } .hh-scifi .hh-swp.hh-nowrap .hh-s, .hh-scifi .hh-swp.hh-nowrap .hh-label { white-space: nowrap; } /* -------------------------------------------------------------------------- Hero (landing and conclusion) -------------------------------------------------------------------------- */ .hh-scifi .hh-hero { position: relative; display: flex; align-items: flex-end; background-color: #080b17; background-size: cover; background-position: center; } .hh-scifi .hh-hero-landing { min-height: 560px; background-image: url('../img/scifi/hero-landing.webp'); } .hh-scifi .hh-hero-conclusion { min-height: 460px; background-image: url('../img/scifi/hero-conclusion.webp'); } /* Protection gradient, so white text stays legible over the photograph. */ .hh-scifi .hh-hero-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 8, 18, 0.94) 0%, rgba(6, 8, 18, 0.80) 44%, rgba(6, 8, 18, 0.32) 100%); } .hh-scifi .hh-hero-inner { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding-top: 92px; padding-bottom: 68px; } .hh-scifi .hh-hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 730px; } .hh-scifi .hh-hero-conclusion .hh-hero-copy { gap: 22px; } .hh-scifi .hh-hero h1 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 400; line-height: 1.1; color: #fff; text-wrap: pretty; } .hh-scifi .hh-hero .hh-kicker { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--teal); } .hh-scifi .hh-hero p { max-width: 640px; font-size: 19px; line-height: 1.65; color: rgba(255, 255, 255, 0.84); } .hh-scifi .hh-hero-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 6px; } .hh-scifi .hh-hero-actions .hh-swp { font-size: 17px; } /* -------------------------------------------------------------------------- Landing: lead-in -------------------------------------------------------------------------- */ .hh-scifi .hh-lead { background: #fff; padding-top: 76px; padding-bottom: 76px; border-bottom: 1px solid var(--border); } .hh-scifi .hh-lead-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; align-items: start; max-width: 1080px; margin: 0 auto; } .hh-scifi .hh-lead-col { display: flex; flex-direction: column; gap: 22px; } .hh-scifi .hh-lead-col h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; line-height: 1.25; text-wrap: pretty; } .hh-scifi .hh-lead-echo { font-size: 18px; line-height: 1.5; color: var(--teal-text); } .hh-scifi .hh-lead-body { gap: 20px; max-width: 620px; } .hh-scifi .hh-lead-body p { font-size: 18px; line-height: 1.72; } .hh-scifi .hh-muted-body { color: var(--ink-2); } .hh-scifi .hh-start { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--border); } .hh-scifi .hh-start .hh-swp { font-size: 17px; } .hh-scifi .hh-start-note { max-width: 300px; font-size: 14px; line-height: 1.55; color: var(--muted); } /* One "Start" block on desktop, the other on mobile. */ .hh-scifi .hh-start-m { display: none; } /* -------------------------------------------------------------------------- Landing: the list of stops Real 1px borders on each cell rather than grid gaps — gaps disappear at fractional device pixel ratios and the hairlines drop out. -------------------------------------------------------------------------- */ .hh-scifi .hh-list { background: var(--page); padding-top: 64px; padding-bottom: 88px; } .hh-scifi .hh-list-inner { max-width: 1080px; margin: 0 auto; } .hh-scifi .hh-list-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; padding-top: 18px; border-top: 2px solid var(--ink); } .hh-scifi .hh-list-head h2 { font-size: 24px; font-weight: 400; } .hh-scifi .hh-list-head p { font-size: 14px; color: var(--muted); } .hh-scifi .hh-eralist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); background: #fff; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .hh-scifi .hh-eralist > li { background: #fff; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .hh-scifi .hh-eralist a { display: flex; align-items: flex-start; gap: 16px; min-height: 118px; padding: 22px; color: var(--ink); } .hh-scifi .hh-eralist a:hover { background: var(--surface); color: var(--ink); } .hh-scifi .hh-eranum { padding-top: 3px; font-size: 13px; font-weight: 600; } .hh-scifi .hh-eratext { display: flex; flex-direction: column; gap: 7px; } .hh-scifi .hh-eratitle { font-size: 17px; line-height: 1.3; } .hh-scifi .hh-erasub { font-size: 14px; line-height: 1.45; color: var(--muted); } .hh-scifi .hh-erameta { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* Stops already read are marked client-side from localStorage. */ .hh-scifi .hh-eralist a.is-read .hh-erameta { color: var(--teal-text); } .hh-scifi .hh-eralist a.is-read .hh-erameta::before { content: "Read · "; } /* -------------------------------------------------------------------------- Podcast note (landing) and podcast call to action (cards) -------------------------------------------------------------------------- */ .hh-scifi .hh-podnote { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; padding: 24px 26px; background: #fff; border: 1px solid var(--border); } .hh-scifi .hh-podnote-art { flex: 0 0 auto; } .hh-scifi .hh-podnote-art img { display: block; width: 112px; height: auto; } .hh-scifi .hh-podnote-text { display: flex; flex-direction: column; gap: 7px; max-width: 560px; } .hh-scifi .hh-podnote-text p { font-size: 15px; line-height: 1.65; color: var(--ink-3); } .hh-scifi .hh-podcta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); color: var(--ink); } .hh-scifi .hh-podcta:hover { color: var(--ink); } .hh-scifi .hh-podcta > img { flex: 0 0 auto; display: block; width: 140px; height: auto; } .hh-scifi .hh-podcta-text { display: flex; flex-direction: column; gap: 7px; max-width: 440px; } .hh-scifi .hh-podcta-body { font-size: 15px; line-height: 1.6; color: var(--ink-3); } /* -------------------------------------------------------------------------- Stop: chapter header min-height on desktop so the nav bar below lands at the same height on every stop, which is what makes clicking straight through feel steady. -------------------------------------------------------------------------- */ .hh-scifi .hh-tour { background: var(--page); } .hh-scifi .hh-erahead-wrap { background: #fff; border-bottom: 1px solid var(--border); padding-top: 56px; padding-bottom: 44px; } .hh-scifi .hh-erahead { display: flex; flex-direction: column; gap: 18px; max-width: 1080px; margin: 0 auto; } .hh-scifi .hh-erahead h1 { max-width: 820px; font-size: clamp(30px, 3.4vw, 42px); font-weight: 400; line-height: 1.18; text-wrap: pretty; } .hh-scifi .hh-erahead-sub { max-width: 720px; font-size: 16px; letter-spacing: 0.01em; color: var(--muted); } .hh-scifi .hh-erahead-intro { max-width: 760px; margin-top: 6px; font-size: 20px; line-height: 1.65; } /* -------------------------------------------------------------------------- Stop: navigation and jump chips -------------------------------------------------------------------------- */ .hh-scifi .hh-stopnav-wrap { padding-top: 36px; } .hh-scifi .hh-stopnav-inner { max-width: 1080px; margin: 0 auto; } .hh-scifi .hh-navm { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; min-height: 60px; } .hh-scifi .hh-navback, .hh-scifi .hh-navnext { display: flex; align-items: center; gap: 12px; max-width: 340px; padding: 12px 16px; } .hh-scifi .hh-navback { background: #fff; border: 1px solid var(--border); color: var(--ink); } .hh-scifi .hh-navnext { margin-left: auto; background: var(--night); color: #fff; } .hh-scifi .hh-navback:hover, .hh-scifi .hh-navnext:hover { color: inherit; } .hh-scifi .hh-navtext { display: flex; flex-direction: column; gap: 3px; } .hh-scifi .hh-navtext .hh-eyebrow { font-size: 10px; } .hh-scifi .hh-navnext .hh-eyebrow { color: var(--teal); } .hh-scifi .hh-navtitle { font-size: 15px; line-height: 1.2; } .hh-scifi .hh-navback .hh-navarrow { font-size: 17px; color: var(--teal-text); } .hh-scifi .hh-navnext .hh-navarrow { margin-left: auto; font-size: 17px; color: var(--teal); } .hh-scifi .hh-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0 4px; } .hh-scifi .hh-chip { display: flex; align-items: center; gap: 8px; padding: 7px 13px; background: #fff; border: 1px solid var(--border); color: var(--ink); font-size: 14px; } .hh-scifi .hh-chip:hover { border-color: var(--accent); color: var(--ink); } .hh-scifi .hh-chipdot { width: 6px; height: 6px; background: var(--accent); } /* -------------------------------------------------------------------------- Stop: figure cards -------------------------------------------------------------------------- */ .hh-scifi .hh-cards-wrap { padding-top: 44px; padding-bottom: 72px; } .hh-scifi .hh-cards { display: flex; flex-direction: column; gap: 52px; max-width: 1080px; margin: 0 auto; } .hh-scifi .hh-card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 38px; align-items: start; padding: 34px; background: #fff; border: 1px solid var(--border); /* Clears the site header when a jump chip scrolls a card into view. */ scroll-margin-top: 124px; } .hh-scifi .hh-cardside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 120px; } .hh-scifi .hh-portrait { position: relative; width: 100%; } /* * The portrait frame is a fixed 3:4 window. The image inside is absolutely * positioned and sized by the percentages in frames.json, reproducing the * crop chosen in the design tool. aspect-ratio means the card is measurable * before the image loads, so nothing reflows on arrival. */ .hh-scifi .hh-portrait-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 4; background: var(--page); border: 1px solid var(--border); } .hh-scifi .hh-portrait-frame img { position: absolute; max-width: none; transform: translate(-50%, -50%); -webkit-user-drag: none; user-select: none; } .hh-scifi .hh-portrait-bar { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--accent); pointer-events: none; } .hh-scifi .hh-cardname { font-size: 24px; font-weight: 400; line-height: 1.22; text-wrap: pretty; } .hh-scifi .hh-carddates { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); } .hh-scifi .hh-cardwork { font-size: 14px; line-height: 1.55; color: var(--muted); } /* * The hook is an editorial line, not a quotation — hence no quote marks. * Set apart from body copy by weight, italics and the accent colour. */ .hh-scifi .hh-cardhook { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 16px; font-weight: 500; font-style: italic; line-height: 1.5; color: var(--accent-text); } .hh-scifi .hh-cardbody { display: flex; flex-direction: column; gap: 20px; max-width: 660px; } .hh-scifi .hh-cardbody > p { font-size: 18px; line-height: 1.75; } .hh-scifi .hh-cardlinks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } /* -------------------------------------------------------------------------- Stop: footer navigation -------------------------------------------------------------------------- */ .hh-scifi .hh-stopfoot-wrap { background: #fff; border-top: 1px solid var(--border); padding-top: 40px; padding-bottom: 56px; } .hh-scifi .hh-stopfoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; } .hh-scifi .hh-stopfoot-prev { display: flex; flex-direction: column; gap: 5px; color: var(--ink); } .hh-scifi .hh-stopfoot-title { max-width: 280px; font-size: 17px; } .hh-scifi .hh-stopfoot-next { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; } /* -------------------------------------------------------------------------- Conclusion -------------------------------------------------------------------------- */ .hh-scifi .hh-conc { background: var(--page); padding-top: 56px; padding-bottom: 88px; } .hh-scifi .hh-conc-inner { max-width: 780px; margin: 0 auto; } .hh-scifi .hh-conc-copy { display: flex; flex-direction: column; gap: 24px; } .hh-scifi .hh-conc-copy h2 { margin-top: 18px; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--teal-text); } .hh-scifi .hh-conc-copy p { font-size: 18px; line-height: 1.75; } .hh-scifi .hh-pod { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; margin-top: 52px; padding: 32px; background: #fff; border: 1px solid var(--border); } .hh-scifi .hh-pod-art img { display: block; width: 100%; height: auto; } .hh-scifi .hh-pod-text { display: flex; flex-direction: column; gap: 18px; } .hh-scifi .hh-pod-text h2 { font-size: 26px; font-weight: 400; line-height: 1.25; } .hh-scifi .hh-pod-text > p { max-width: 560px; font-size: 17px; line-height: 1.7; color: var(--ink-2); } .hh-scifi .hh-pod-with { display: flex; flex-direction: column; gap: 14px; padding: 20px 0; border-top: 3px solid var(--teal); border-bottom: 3px solid var(--teal); } .hh-scifi .hh-pod-with p { font-size: 16px; line-height: 1.6; } .hh-scifi .hh-pod-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .hh-scifi .hh-pod-all { font-size: 15px; } /* -------------------------------------------------------------------------- Join panel -------------------------------------------------------------------------- */ .hh-scifi .hh-join { display: flex; flex-direction: column; gap: 24px; margin-top: 52px; padding: 44px 36px; background: var(--purple); } .hh-scifi .hh-join-logo { display: block; align-self: flex-start; width: auto; height: 44px; } .hh-scifi .hh-join-mission { max-width: 660px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.32; color: #fff; text-wrap: pretty; } .hh-scifi .hh-join-body { max-width: 560px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.86); } .hh-scifi .hh-join-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .hh-scifi .hh-join-actions .hh-swp { font-size: 17px; } /* -------------------------------------------------------------------------- Mobile — single breakpoint at 760px, matching the prototype -------------------------------------------------------------------------- */ @media (max-width: 760px) { .hh-scifi .hh-x { padding-left: 16px; padding-right: 16px; } /* Hero: shorter, smaller type, centred. */ .hh-scifi .hh-hero { min-height: 0; } .hh-scifi .hh-hero-inner { padding-top: 45px; padding-bottom: 45px; } .hh-scifi .hh-hero h1 { font-size: 30px; } .hh-scifi .hh-hero p { font-size: 17px; } .hh-scifi .hh-hero .hh-kicker { font-size: 16px; } .hh-scifi .hh-hero-copy { align-items: center; text-align: center; } .hh-scifi .hh-hero-actions { justify-content: center; } /* Cards: one column, identity centred, but body copy stays left-aligned. */ .hh-scifi .hh-card { grid-template-columns: 1fr; gap: 20px; padding: 20px; } .hh-scifi .hh-cardside { position: static; top: auto; align-items: center; text-align: center; } .hh-scifi .hh-cardhook { align-self: stretch; } .hh-scifi .hh-portrait { max-width: 250px; width: 100%; } /* Swap which "Start" block shows. */ .hh-scifi .hh-start-d { display: none; } .hh-scifi .hh-start-m { display: flex; margin-top: 0; padding-top: 22px; } .hh-scifi .hh-list { padding-bottom: 28px; } .hh-scifi .hh-conc { padding-top: 28px; padding-bottom: 44px; } .hh-scifi .hh-conc-copy h2:first-of-type { margin-top: 0; } /* Podcast boxes centre. */ .hh-scifi .hh-podnote, .hh-scifi .hh-podcta { flex-direction: column; justify-content: center; text-align: center; } .hh-scifi .hh-podnote-text, .hh-scifi .hh-podcta-text { align-items: center; } .hh-scifi .hh-pod { grid-template-columns: 1fr; } /* Stacked stop navigation. */ .hh-scifi .hh-navm { flex-direction: column; min-height: 0; } .hh-scifi .hh-navback, .hh-scifi .hh-navnext { margin-left: 0; max-width: none; } .hh-scifi .hh-swp { font-size: 15px; max-width: 100%; } .hh-scifi .hh-swp .hh-s { flex: 0 0 auto; } .hh-scifi .hh-swp .hh-s, .hh-scifi .hh-swp .hh-t { padding-top: 11px; padding-bottom: 11px; } /* Decorative jump chips and the reading-time note are desktop-only. */ .hh-scifi .hh-chips, .hh-scifi .hh-mins { display: none; } /* No min-height on mobile: the header should be as tall as its content. */ .hh-scifi .hh-erahead { min-height: 0; } } @media (min-width: 761px) { .hh-scifi .hh-erahead { min-height: 270px; } } @media (prefers-reduced-motion: reduce) { .hh-scifi *, .hh-scifi *::before, .hh-scifi *::after { transition-duration: 0.001ms !important; } }