/* ========================================================================= IT-Franke — Redesign layer · "IF // SYSTEMS" An editorial-brutalist systems design: near-black canvas, bone type, heavy monospace, full-bleed accent bands, a live console panel, oversized ghost indices, hard colour-coded cards that invert on hover, film grain. Applies via , set statically on every production page — this is now the site's only design. Loaded AFTER styles.css. First-party & self-contained: no external fonts/scripts/assets. Grain and texture are inline SVG data URIs. ========================================================================= */ html[data-design="new"] { color-scheme: dark; --bg: #0a0a0f; --bg-2: #101017; --bg-3: #16161f; --ink: #f3f0e7; --ink-dim: #9b988f; --line: rgba(243, 240, 231, 0.14); --line-2: rgba(243, 240, 231, 0.30); --lime: #c6fb50; --violet: #8f82ff; --cyan: #34e7d6; --orange: #ff6a3d; --pink: #ff67c3; --blue: #5b8bff; --accent: var(--lime); --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --sans: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---- Canvas + film grain ------------------------------------------------ */ html[data-design="new"] .production-site { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[data-design="new"] .production-site::after { content: ""; position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* Reset the classic legibility shadows/filters */ html[data-design="new"] .production-site main h1, html[data-design="new"] .production-site main h2, html[data-design="new"] .production-site main h3, html[data-design="new"] .production-site .concept-kicker, html[data-design="new"] .production-site main p, html[data-design="new"] .production-site main li, html[data-design="new"] .production-site .expanded-card span, html[data-design="new"] .production-site .expanded-module span, html[data-design="new"] .production-site .expanded-process span, html[data-design="new"] .production-site .expanded-offer span { text-shadow: none; filter: none; } /* ---- Typography --------------------------------------------------------- */ html[data-design="new"] .production-site h1, html[data-design="new"] .production-site h2, html[data-design="new"] .production-site h3 { color: var(--ink); font-family: var(--sans); font-weight: 800; letter-spacing: -0.035em; line-height: 0.96; text-wrap: balance; overflow-wrap: break-word; } html[data-design="new"] .production-site main p, html[data-design="new"] .production-site main li { color: var(--ink-dim); font-size: 1.06rem; } html[data-design="new"] .production-site main a { color: var(--ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; } html[data-design="new"] a:focus-visible, html[data-design="new"] button:focus-visible, html[data-design="new"] [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none; } /* ---- Header ------------------------------------------------------------- */ html[data-design="new"] .production-site .concept-header { position: sticky; top: 0; z-index: 40; margin: 0; padding: 16px max(24px, calc(50vw - 620px)); width: 100vw; margin-left: calc(50% - 50vw); border-bottom: 1px solid var(--line); background: rgba(10, 10, 15, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html[data-design="new"] .production-site .concept-brand { gap: 12px; color: var(--ink); font-family: var(--mono); font-weight: 700; letter-spacing: -0.01em; } html[data-design="new"] .production-site .concept-brand span { width: 38px; height: 38px; border-radius: 0; background: var(--accent); color: #05050a; font-family: var(--mono); font-weight: 800; } html[data-design="new"] .production-site .concept-brand strong { font-size: 1.02rem; font-weight: 700; } html[data-design="new"] .production-site .concept-header nav { gap: 6px; } html[data-design="new"] .production-site .concept-header nav a { padding: 8px 12px; border-radius: 0; color: var(--ink-dim); font-family: var(--mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; transition: color 0.15s ease; } html[data-design="new"] .production-site .concept-header nav a:hover { color: var(--ink); text-decoration: none; } html[data-design="new"] .production-site .concept-header nav a[aria-current="page"] { color: #05050a; background: var(--accent); text-decoration: none; } /* ---- Marquee (injected by kinetic.js) ----------------------------------- */ html[data-design="new"] .production-site .itf-marquee { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; border-bottom: 1px solid #05050a; background: var(--accent); color: #05050a; } html[data-design="new"] .production-site .itf-marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; } html[data-design="new"] .production-site .itf-marquee__track span { display: inline-flex; align-items: center; padding: 11px 0; font-family: var(--mono); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; } html[data-design="new"] .production-site .itf-marquee__track span::before { content: "◆"; margin: 0 30px; font-size: 0.6rem; opacity: 0.55; } @media (prefers-reduced-motion: no-preference) { html[data-design="new"] .production-site .itf-marquee__track { animation: itf-marq 34s linear infinite; } } @keyframes itf-marq { to { transform: translateX(-50%); } } /* ---- Hero --------------------------------------------------------------- */ html[data-design="new"] .production-site .expanded-hero { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(48px, 8vw, 118px) 0 clamp(40px, 6vw, 80px); } html[data-design="new"] .production-site .expanded-hero > div { max-width: 760px; } html[data-design="new"] .production-site .expanded-hero h1 { font-size: clamp(2.8rem, 7vw, 6.2rem); letter-spacing: -0.045em; line-height: 0.92; margin-bottom: 26px; overflow-wrap: normal; hyphens: none; } html[data-design="new"] .production-site .expanded-hero p { max-width: 560px; color: var(--ink-dim); font-size: clamp(1.05rem, 1.5vw, 1.24rem); } /* Kicker → hard mono tag */ html[data-design="new"] .production-site .concept-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 13px; border-radius: 0; background: var(--accent); color: #05050a; font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; } html[data-design="new"] .production-site .concept-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #05050a; } @media (prefers-reduced-motion: no-preference) { html[data-design="new"] .production-site .concept-kicker::before { animation: itf-blink 3s ease-in-out infinite; } } @keyframes itf-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Console panel (was the schematic) */ html[data-design="new"] .production-site .cyanprint-map { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 0; background: var(--bg-2); box-shadow: none; counter-reset: node; overflow: hidden; } html[data-design="new"] .production-site .cyanprint-map::before { content: "// SYSTEMÜBERSICHT"; position: relative; inset: auto; height: auto; display: block; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--bg-3); color: var(--ink-dim); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; } html[data-design="new"] .production-site .cyanprint-map i { display: flex; align-items: center; gap: 16px; grid-column: auto; padding: 17px 18px; border: 0; border-top: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-style: normal; font-weight: 500; letter-spacing: 0.04em; transition: background 0.16s ease, color 0.16s ease; } html[data-design="new"] .production-site .cyanprint-map i:first-of-type { border-top: 0; } html[data-design="new"] .production-site .cyanprint-map i:hover { background: var(--accent); color: #05050a; } html[data-design="new"] .production-site .cyanprint-map i::before { counter-increment: node; content: counter(node, decimal-leading-zero); color: var(--accent); font-weight: 700; } html[data-design="new"] .production-site .cyanprint-map i:hover::before { color: #05050a; } html[data-design="new"] .production-site .cyanprint-map i::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } @media (prefers-reduced-motion: no-preference) { html[data-design="new"] .production-site .cyanprint-map i::after { animation: itf-blink 3.4s ease-in-out infinite; } html[data-design="new"] .production-site .cyanprint-map i:nth-child(2)::after { animation-delay: 0.25s; } html[data-design="new"] .production-site .cyanprint-map i:nth-child(3)::after { animation-delay: 0.5s; } html[data-design="new"] .production-site .cyanprint-map i:nth-child(4)::after { animation-delay: 0.75s; } html[data-design="new"] .production-site .cyanprint-map i:nth-child(5)::after { animation-delay: 1s; } } html[data-design="new"] .production-site .cyanprint-map i:hover::after { background: #05050a; box-shadow: none; } /* ---- Buttons ------------------------------------------------------------ */ html[data-design="new"] .production-site .concept-actions { gap: 12px; margin-top: 36px; } html[data-design="new"] .production-site .concept-actions a { min-height: 56px; padding: 0 26px; border-radius: 0; border: 1px solid var(--accent); background: var(--accent); color: #05050a; font-family: var(--mono); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.16s ease, color 0.16s ease; } html[data-design="new"] .production-site .concept-actions a::after { content: "↗"; margin-left: 12px; font-size: 1.05em; } html[data-design="new"] .production-site .concept-actions a:hover { background: transparent; color: var(--accent); text-decoration: none; } html[data-design="new"] .production-site .concept-actions a + a { border-color: var(--line-2); background: transparent; color: var(--ink); } html[data-design="new"] .production-site .concept-actions a + a:hover { border-color: var(--ink); background: var(--ink); color: #05050a; } /* ---- Page head (sub-pages) ---------------------------------------------- */ html[data-design="new"] .production-site .expanded-page-head { grid-template-columns: 1fr; gap: 22px; max-width: 1000px; padding: clamp(48px, 8vw, 104px) 0 clamp(20px, 3vw, 34px); } html[data-design="new"] .production-site .expanded-page-head h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.92; } html[data-design="new"] .production-site .expanded-page-head > p { max-width: 680px; color: var(--ink-dim); font-size: clamp(1.05rem, 1.5vw, 1.22rem); } /* ---- Intro / split (editorial rows) ------------------------------------- */ html[data-design="new"] .production-site .expanded-intro, html[data-design="new"] .production-site .expanded-split { gap: clamp(24px, 5vw, 64px); align-items: start; padding: clamp(40px, 6vw, 76px) 0; border-top: 1px solid var(--line); } html[data-design="new"] .production-site .expanded-intro h2, html[data-design="new"] .production-site .expanded-split h2 { font-size: clamp(1.7rem, 3.4vw, 3rem); letter-spacing: -0.04em; } html[data-design="new"] .production-site .expanded-intro > p, html[data-design="new"] .production-site .expanded-split > p { color: var(--ink-dim); font-size: 1.14rem; } /* ---- Card grids: hard, colour-coded, invert on hover -------------------- */ /* one continuous card counter per page, so multiple grids on the same page (e.g. Impressum, Datenschutz) number through 01, 02, 03, 04 … instead of restarting at 01 in each grid */ html[data-design="new"] .production-site main { counter-reset: card; } html[data-design="new"] .production-site .expanded-card-grid, html[data-design="new"] .production-site .expanded-module-grid, html[data-design="new"] .production-site .expanded-process-grid, html[data-design="new"] .production-site .expanded-offer-grid { gap: 0; padding: 0; margin-top: clamp(28px, 4vw, 48px); margin-bottom: clamp(52px, 8vw, 88px); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); } html[data-design="new"] .production-site .expanded-card, html[data-design="new"] .production-site .expanded-module, html[data-design="new"] .production-site .expanded-process, html[data-design="new"] .production-site .expanded-offer { --c: var(--accent); position: relative; overflow: hidden; min-height: 250px; padding: 30px 26px 26px; border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-radius: 0; background: var(--bg); box-shadow: none; transition: background 0.16s ease, color 0.16s ease; } html[data-design="new"] .production-site .expanded-card-grid > *:nth-child(6n+1) { --c: var(--lime); } html[data-design="new"] .production-site .expanded-card-grid > *:nth-child(6n+2), html[data-design="new"] .production-site .expanded-module-grid > *:nth-child(6n+2), html[data-design="new"] .production-site .expanded-process-grid > *:nth-child(6n+2), html[data-design="new"] .production-site .expanded-offer-grid > *:nth-child(6n+2) { --c: var(--violet); } html[data-design="new"] .production-site .expanded-module-grid > *:nth-child(6n+1), html[data-design="new"] .production-site .expanded-process-grid > *:nth-child(6n+1), html[data-design="new"] .production-site .expanded-offer-grid > *:nth-child(6n+1) { --c: var(--lime); } html[data-design="new"] .production-site .expanded-card-grid > *:nth-child(6n+3), html[data-design="new"] .production-site .expanded-module-grid > *:nth-child(6n+3), html[data-design="new"] .production-site .expanded-process-grid > *:nth-child(6n+3), html[data-design="new"] .production-site .expanded-offer-grid > *:nth-child(6n+3) { --c: var(--cyan); } html[data-design="new"] .production-site .expanded-card-grid > *:nth-child(6n+4), html[data-design="new"] .production-site .expanded-module-grid > *:nth-child(6n+4), html[data-design="new"] .production-site .expanded-process-grid > *:nth-child(6n+4), html[data-design="new"] .production-site .expanded-offer-grid > *:nth-child(6n+4) { --c: var(--orange); } html[data-design="new"] .production-site .expanded-card-grid > *:nth-child(6n+5), html[data-design="new"] .production-site .expanded-module-grid > *:nth-child(6n+5), html[data-design="new"] .production-site .expanded-process-grid > *:nth-child(6n+5), html[data-design="new"] .production-site .expanded-offer-grid > *:nth-child(6n+5) { --c: var(--pink); } html[data-design="new"] .production-site .expanded-card-grid > *:nth-child(6n+6), html[data-design="new"] .production-site .expanded-module-grid > *:nth-child(6n+6), html[data-design="new"] .production-site .expanded-process-grid > *:nth-child(6n+6), html[data-design="new"] .production-site .expanded-offer-grid > *:nth-child(6n+6) { --c: var(--blue); } /* oversized ghost index */ html[data-design="new"] .production-site .expanded-card::before, html[data-design="new"] .production-site .expanded-module::before, html[data-design="new"] .production-site .expanded-process::before, html[data-design="new"] .production-site .expanded-offer::before { counter-increment: card; content: counter(card, decimal-leading-zero); position: absolute; top: 10px; right: 16px; font-family: var(--mono); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--c); opacity: 0.5; pointer-events: none; } html[data-design="new"] .production-site .expanded-card span, html[data-design="new"] .production-site .expanded-module span, html[data-design="new"] .production-site .expanded-process span, html[data-design="new"] .production-site .expanded-offer span { display: inline-flex; margin-bottom: 20px; padding: 0; border-radius: 0; background: transparent; color: var(--c); font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } html[data-design="new"] .production-site .expanded-card h2, html[data-design="new"] .production-site .expanded-module h2, html[data-design="new"] .production-site .expanded-process h2, html[data-design="new"] .production-site .expanded-offer h2 { margin-bottom: 12px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; } html[data-design="new"] .production-site .expanded-card p, html[data-design="new"] .production-site .expanded-module p, html[data-design="new"] .production-site .expanded-process p, html[data-design="new"] .production-site .expanded-offer p { margin-bottom: 0; color: var(--ink-dim); font-size: 1rem; line-height: 1.6; } /* hover: toned-down accent wash + accent outline; content stays readable */ html[data-design="new"] .production-site .expanded-card:hover, html[data-design="new"] .production-site .expanded-module:hover, html[data-design="new"] .production-site .expanded-process:hover, html[data-design="new"] .production-site .expanded-offer:hover { background: var(--bg-3); background: color-mix(in srgb, var(--c) 30%, var(--bg-2)); } html[data-design="new"] .production-site .expanded-card:hover h2, html[data-design="new"] .production-site .expanded-module:hover h2, html[data-design="new"] .production-site .expanded-process:hover h2, html[data-design="new"] .production-site .expanded-offer:hover h2 { color: #ffffff; } html[data-design="new"] .production-site .expanded-card:hover p, html[data-design="new"] .production-site .expanded-card:hover li, html[data-design="new"] .production-site .expanded-module:hover p, html[data-design="new"] .production-site .expanded-module:hover li, html[data-design="new"] .production-site .expanded-process:hover p, html[data-design="new"] .production-site .expanded-offer:hover p, html[data-design="new"] .production-site .expanded-offer:hover li { color: var(--ink); } /* ghost number brightens on hover and keeps its own colour (readable on the dark wash) instead of vanishing into a same-colour fill */ html[data-design="new"] .production-site .expanded-card:hover::before, html[data-design="new"] .production-site .expanded-module:hover::before, html[data-design="new"] .production-site .expanded-process:hover::before, html[data-design="new"] .production-site .expanded-offer:hover::before { opacity: 0.95; } /* ---- Lists -------------------------------------------------------------- */ html[data-design="new"] .production-site .expanded-copy-block ul, html[data-design="new"] .production-site .expanded-offer ul, html[data-design="new"] .production-site .expanded-contact-card ul { margin-top: 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; } html[data-design="new"] .production-site .expanded-copy-block li, html[data-design="new"] .production-site .expanded-offer li, html[data-design="new"] .production-site .expanded-contact-card li { position: relative; margin: 0; padding-left: 24px; color: var(--ink-dim); } html[data-design="new"] .production-site .expanded-copy-block li::before, html[data-design="new"] .production-site .expanded-offer li::before, html[data-design="new"] .production-site .expanded-contact-card li::before { content: "▸"; position: absolute; left: 2px; top: 0; color: var(--c, var(--accent)); } /* ---- Copy block / contact card (console panels) ------------------------- */ html[data-design="new"] .production-site .expanded-copy-block, html[data-design="new"] .production-site .expanded-contact-card { border: 1px solid var(--line-2); border-radius: 0; background: var(--bg-2); box-shadow: none; } html[data-design="new"] .production-site .expanded-copy-block { padding: clamp(26px, 3.5vw, 42px); } html[data-design="new"] .production-site .expanded-contact-card { gap: 14px; padding: clamp(26px, 3vw, 36px); } html[data-design="new"] .production-site .expanded-copy-block h2, html[data-design="new"] .production-site .expanded-contact-card h2 { margin-bottom: 6px; font-size: 1.5rem; letter-spacing: -0.03em; } html[data-design="new"] .production-site .expanded-contact-card address { color: var(--ink-dim); font-family: var(--mono); line-height: 1.7; } html[data-design="new"] .production-site .expanded-contact-card a { min-height: 54px; gap: 12px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; transition: background 0.16s ease, color 0.16s ease; } html[data-design="new"] .production-site .expanded-contact-card a::after { content: "↗"; margin-left: auto; color: var(--accent); } html[data-design="new"] .production-site .expanded-contact-card a:hover { background: var(--accent); color: #05050a; text-decoration: none; } html[data-design="new"] .production-site .expanded-contact-card a:hover::after { color: #05050a; } /* ---- Callout: full-bleed violet band ------------------------------------ */ html[data-design="new"] .production-site .expanded-callout { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: clamp(20px, 4vw, 44px); margin-bottom: clamp(56px, 9vw, 96px); gap: 20px; padding: clamp(48px, 9vw, 104px) max(24px, calc(50vw - 560px)); border: 0; border-top: 1px solid #05050a; border-bottom: 1px solid #05050a; border-radius: 0; background: #1d4ed8; color: #f3f0e7; box-shadow: none; } html[data-design="new"] .production-site .expanded-callout::before { content: none; } html[data-design="new"] .production-site .expanded-callout h2 { max-width: 16ch; font-size: clamp(2.2rem, 5.2vw, 4.6rem); letter-spacing: -0.045em; color: #ffffff; } html[data-design="new"] .production-site .expanded-callout p { max-width: 60ch; color: rgba(243, 240, 231, 0.92); font-size: 1.1rem; } html[data-design="new"] .production-site .expanded-callout p a { color: #ffffff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 0.09em; } html[data-design="new"] .production-site .expanded-callout .concept-actions a { border-color: #05050a; background: #05050a; color: var(--accent); } html[data-design="new"] .production-site .expanded-callout .concept-actions a:hover { background: transparent; border-color: var(--accent); color: var(--accent); } html[data-design="new"] .production-site .expanded-callout .concept-actions a + a { border-color: rgba(243, 240, 231, 0.55); background: transparent; color: #f3f0e7; } html[data-design="new"] .production-site .expanded-callout .concept-actions a + a:hover { border-color: #f3f0e7; background: #f3f0e7; color: #05050a; } /* ---- Contact grid spacing ----------------------------------------------- */ html[data-design="new"] .production-site .expanded-contact-grid { gap: clamp(20px, 3vw, 32px); padding: clamp(28px, 4vw, 44px) 0 clamp(52px, 8vw, 76px); } /* When the contact card is the only item: full-width block with two large Telefon / E-Mail tiles instead of a small left-hugging box. */ html[data-design="new"] .production-site .expanded-contact-card:only-child { grid-column: 1 / -1; max-width: none; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; border: 0; background: transparent; } html[data-design="new"] .production-site .expanded-contact-card:only-child > h2 { grid-column: 1 / -1; margin: 0 0 6px; } html[data-design="new"] .production-site .expanded-contact-card:only-child a { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; min-height: 172px; padding: 26px 28px; font-size: clamp(1.3rem, 2.3vw, 1.95rem); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; } html[data-design="new"] .production-site .expanded-contact-card:only-child a::before { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } html[data-design="new"] .production-site .expanded-contact-card:only-child a[href^="tel:"]::before { content: "Telefon"; } html[data-design="new"] .production-site .expanded-contact-card:only-child a[href^="mailto:"]::before { content: "E-Mail"; } html[data-design="new"] .production-site .expanded-contact-card:only-child a::after { position: absolute; top: 22px; right: 24px; margin: 0; font-size: 1.15rem; } html[data-design="new"] .production-site .expanded-contact-card:only-child a:hover::before { color: #05050a; } @media (max-width: 680px) { html[data-design="new"] .production-site .expanded-contact-card:only-child { grid-template-columns: 1fr; } } /* ---- Footer ------------------------------------------------------------- */ html[data-design="new"] .production-site .concept-footer { margin-top: 8px; padding: 30px 0 46px; border-top: 1px solid var(--line-2); color: var(--ink-dim); gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.84rem; } html[data-design="new"] .production-site .concept-footer a { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; } html[data-design="new"] .production-site .concept-footer a:hover { color: var(--accent); } html[data-design="new"] .production-site .concept-footer a[aria-current="page"] { color: var(--accent); } /* ---- Scroll reveal (paired with reveal.js) ------------------------------ */ html.itf-reveal[data-design="new"] .production-site [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } html.itf-reveal[data-design="new"] .production-site [data-reveal].is-visible { opacity: 1; transform: none; } html.itf-reveal[data-design="new"] .production-site [data-reveal]:nth-child(2) { transition-delay: 0.05s; } html.itf-reveal[data-design="new"] .production-site [data-reveal]:nth-child(3) { transition-delay: 0.10s; } html.itf-reveal[data-design="new"] .production-site [data-reveal]:nth-child(4) { transition-delay: 0.15s; } html.itf-reveal[data-design="new"] .production-site [data-reveal]:nth-child(5) { transition-delay: 0.20s; } html.itf-reveal[data-design="new"] .production-site [data-reveal]:nth-child(6) { transition-delay: 0.25s; } /* ---- Small screens ------------------------------------------------------ */ @media (max-width: 680px) { html[data-design="new"] .production-site .expanded-hero { grid-template-columns: 1fr; } html[data-design="new"] .production-site .concept-header { position: static; padding: 14px 20px; } html[data-design="new"] .production-site .concept-header nav { flex-wrap: wrap; justify-content: flex-start; } html[data-design="new"] .production-site .concept-footer { padding-bottom: 92px; /* clear the floating design toggle */ } } /* ---- Forced colours ----------------------------------------------------- */ @media (forced-colors: active) { html[data-design="new"] .production-site .expanded-callout, html[data-design="new"] .production-site .itf-marquee, html[data-design="new"] .production-site .concept-kicker { forced-color-adjust: none; } }