/* The home page (2026-11-05; index.html and home-fr.html, which build_home_fr.py makes from it): its sections, from
the welcome to the footer. The same colours as before: IR-Win's dark grey header, its orange, the light blue-grey of
the Quick Start Guide and the footer. An accounting application (2026-11-05): precise rather than playful, cards with
fine lines and small rounded corners, what IR-Win does said at once (a drawn report, its four parts); one style of
section title; the cards lift a little when pointed at. Nothing moves by itself (no animation on scroll).
The colours are css/irwin-colors.css's names (light and dark); the header, the menu and the language button, shared
with the site's other pages, are in css/irwin-base.css (2026-11-06). Loaded after irwin-base.css.
- the section titles, the welcome and its drawn report - Quick Start Guide, videos, contact, server status
- what IR-Win does, why IR-Win, the two buttons, products - useful links, the footer
- smaller windows; the animations; the workbook of Why IR-Win; half and quarter of a screen */
/* the menu stays at the top: a section reached from it starts below it */
#home, #features, #why, #our-products, #doc, #videos, #contact-us, #server-status, #links { scroll-margin-top: 96px; }
/* section titles: one style, dark (light in the dark theme) with a short orange line under them */
.heading-gris, .heading-gris-cccopy, .heading-video-copy-copy {
margin: 0 auto 36px; font-family: Lato, sans-serif; font-size: 34px; line-height: 1.2; font-weight: 700; color: var(--ih-text); text-align: center; }
.heading-gris:after, .heading-gris-cccopy:after, .heading-video-copy-copy:after {
content: ""; display: block; width: 56px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: var(--ih-orange); }
html[data-theme="dark"] .heading-gris, html[data-theme="dark"] .heading-gris-cccopy, html[data-theme="dark"] .heading-video-copy-copy { color: var(--ih-text); }
/* welcome (2026-11-05, an accounting application: precise rather than playful): on the left what IR-Win is, the
promise, what it does and the two buttons; on the right a drawn report (bars of a cash flow, its running total, the
probability curve of a simulation; no real figures). One column on narrow screens. */
.welcome { padding: 128px 0 72px; background:
radial-gradient(800px 360px at 85% 0, rgba(var(--ih-orange-rgb), .10), transparent 70%), linear-gradient(180deg, var(--ih-band), var(--ih-page)); }
.welcome .div-block-11, html[data-theme="dark"] .welcome .div-block-11 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center; gap: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.welcome .heading { margin: 0 0 16px; font-size: 50px; line-height: 1.08; font-weight: 700; letter-spacing: -.5px; text-align: left; }
.welcome .line { max-width: 560px; margin: 0 0 14px; font-size: 20px; line-height: 1.45; font-weight: 500; text-align: left; color: var(--ih-text); }
.irwin-hero-sub { max-width: 560px; margin: 0 0 28px; font: 400 16px/1.7 Lato, sans-serif; color: var(--ih-muted); }
.welcome .irwin-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
html[data-theme="dark"] .welcome .line { color: var(--ih-text); }
/* the drawn report */
.irwin-viz-card { padding: 20px 22px 18px; border: 1px solid var(--ih-card-line); border-radius: var(--ih-radius); background: var(--ih-card); box-shadow: var(--ih-shadow-up); }
.irwin-viz-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.irwin-viz-title { font: 700 15px/1.2 Lato, sans-serif; color: var(--ih-text); }
.irwin-viz-tag { padding: 2px 8px; border-radius: 6px; background: rgba(var(--ih-orange-rgb), .12); font: 700 11px/1.5 Lato, sans-serif; color: var(--ih-orange); }
.irwin-viz-chart { display: block; width: 100%; height: auto; }
.irwin-viz-axis { stroke: var(--ih-card-line); stroke-width: 1.5; }
.irwin-viz-up { fill: var(--ih-blue-deep); }
.irwin-viz-down { fill: #d9a07a; }
.irwin-viz-line { fill: none; stroke: var(--ih-orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.irwin-viz-dot { fill: var(--ih-orange); }
.irwin-viz-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ih-card-line); }
.irwin-viz-label { display: block; margin-bottom: 6px; font: 700 11px/1.3 Lato, sans-serif; letter-spacing: .4px; text-transform: uppercase; color: var(--ih-muted); }
.irwin-viz-mini svg { display: block; width: 100%; height: 54px; }
.irwin-viz-bell { fill: rgba(var(--ih-orange-rgb), .12); stroke: var(--ih-orange); stroke-width: 2; }
.irwin-viz-mark { stroke: var(--ih-text); stroke-width: 1.5; stroke-dasharray: 3 3; }
.irwin-viz-list { margin: 0; padding: 0; list-style: none; font: 400 13px/1.9 Lato, sans-serif; color: var(--ih-text); }
.irwin-viz-list li:before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--ih-orange); }
html[data-theme="dark"] .irwin-viz-up { fill: #4b6b78; }
html[data-theme="dark"] .irwin-viz-down { fill: #8a5a3c; }
/* what IR-Win does: four parts, an icon each */
.irwin-features { padding: 72px 0 40px; background: var(--ih-page); }
.irwin-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.irwin-feature { padding: 24px 22px; border: 1px solid var(--ih-card-line); border-radius: var(--ih-radius); background: var(--ih-card); }
.irwin-feature-icon { display: block; width: 40px; height: 40px; padding: 8px; margin-bottom: 14px; box-sizing: border-box; border-radius: 10px;
background: rgba(var(--ih-orange-rgb), .12); color: var(--ih-orange); }
.irwin-feature-title { margin: 0 0 8px; font: 700 17px/1.3 Lato, sans-serif; color: var(--ih-text); }
.irwin-feature-text { margin: 0; font: 400 14px/1.65 Lato, sans-serif; color: var(--ih-muted); }
/* why IR-Win: the welcome's text, in a card */
.irwin-why { padding: 48px 0 16px; background: var(--ih-page); }
.irwin-why .paragraph-4 { max-width: 860px; margin: 0 auto; padding: 32px 40px; border: 1px solid var(--ih-card-line); border-left: 4px solid var(--ih-orange);
border-radius: var(--ih-radius); background: var(--ih-card); font-size: 16px; line-height: 1.75; color: var(--ih-muted); }
.irwin-why .paragraph-4 strong { color: var(--ih-muted); font-family: Lato, sans-serif; }
html[data-theme="dark"] .irwin-why .paragraph-4, html[data-theme="dark"] .irwin-why .paragraph-4 strong { color: var(--ih-muted); }
/* the two buttons of the welcome: orange (Sign up), outlined (our products) */
.irwin-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border-radius: 8px;
font: 700 15px/1 Lato, sans-serif; letter-spacing: .6px; text-decoration: none; cursor: pointer;
transition: filter .15s ease-out, background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .08s ease-out; }
.irwin-cta-main { background: var(--ih-orange); color: #fff; box-shadow: 0 6px 16px rgba(var(--ih-orange-rgb), .35); }
.irwin-cta-main:hover, .irwin-cta-main:focus-visible { filter: brightness(.88); color: #fff; box-shadow: 0 8px 20px rgba(var(--ih-orange-rgb), .42); }
.irwin-cta-ghost { border: 2px solid var(--ih-header); color: var(--ih-header); background: transparent; }
.irwin-cta-ghost:hover, .irwin-cta-ghost:focus-visible { background: var(--ih-header); color: #fff; }
html[data-theme="dark"] .irwin-cta-ghost { border-color: #d0d3d8; color: var(--ih-text); }
html[data-theme="dark"] .irwin-cta-ghost:hover, html[data-theme="dark"] .irwin-cta-ghost:focus-visible { background: var(--ih-text); color: var(--ih-page); }
.irwin-cta:active { transform: translateY(1px); }
.irwin-cta:focus-visible { outline: 3px solid rgba(var(--ih-orange-rgb), .45); outline-offset: 2px; } /* (the site's buttons: irwin-base.css) */
/* products: four cards of the same height, lifting a little when pointed at, the button at the bottom */
.our-products { margin: 0; padding: 72px 0 84px; background: var(--ih-page); }
.our-products .container-6 { margin-top: 0; }
.our-products .w-row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.our-products .w-row:before, .our-products .w-row:after { display: none; }
.our-products .w-col { display: flex; float: none; padding: 0 10px; }
.our-products .div-block-10 { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; height: auto; margin: 0; padding: 30px 24px 26px;
border: 1px solid var(--ih-card-line); border-top: 3px solid transparent; border-radius: var(--ih-radius); background: var(--ih-card); box-shadow: var(--ih-shadow);
transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
.our-products .div-block-10:hover { transform: translateY(-2px); box-shadow: var(--ih-shadow-up); border-top-color: var(--ih-orange); }
.our-products .div-block-10 img { width: 88px; max-width: 100%; height: auto; margin-bottom: 14px; border-radius: var(--ih-radius); }
.our-products .products { margin: 4px 0 10px; font-size: 24px; font-weight: 700; color: var(--ih-text); }
.our-products .text1, .our-products .text1 strong { flex: 1; margin-bottom: 22px; font-size: 15px; line-height: 1.6; text-align: center; color: var(--ih-muted); }
.our-products .open-pro, .our-products .open-business, .our-products .open-enterprise { margin-top: auto; padding: 10px 22px; border-radius: 10px; font-weight: 700; }
html[data-theme="dark"] .our-products .div-block-10 { background: var(--ih-card); border-color: var(--ih-card-line); border-top-color: transparent; }
html[data-theme="dark"] .our-products .div-block-10:hover { border-top-color: var(--ih-orange); }
html[data-theme="dark"] .our-products .text1, html[data-theme="dark"] .our-products .text1 strong { color: var(--ih-muted); }
/* the products' popups: their close button (2026-11-05): a square with an X drawn in its middle (the letter "x" sat
low and was underlined when pointed at); a hand when pointed at, an orange square then; it does not move */
.pop-close, .close-business, .close-enterprise, .close-enterprisee { position: relative; display: block; box-sizing: border-box;
width: 34px; height: 34px; margin: -21px -11px -27px auto; padding: 0; border-radius: 7px; font-size: 0; line-height: 0;
color: transparent; text-decoration: none !important; cursor: pointer; user-select: none; -webkit-user-select: none;
transition: background-color .2s ease-out; }
.pop-close:before, .pop-close:after, .close-business:before, .close-business:after, .close-enterprise:before, .close-enterprise:after,
.close-enterprisee:before, .close-enterprisee:after {
content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px;
background: var(--ih-header); transition: background-color .2s ease-out; }
.pop-close:before, .close-business:before, .close-enterprise:before, .close-enterprisee:before { transform: rotate(45deg); }
.pop-close:after, .close-business:after, .close-enterprise:after, .close-enterprisee:after { transform: rotate(-45deg); }
.pop-close:hover, .close-business:hover, .close-enterprise:hover, .close-enterprisee:hover { background: var(--ih-orange); font-size: 0; color: transparent;
text-decoration: none !important; } /* (the old pointed-at rule showed the letter again, 19px, underlined) */
.pop-close:hover:before, .pop-close:hover:after, .close-business:hover:before, .close-business:hover:after,
.close-enterprise:hover:before, .close-enterprise:hover:after, .close-enterprisee:hover:before, .close-enterprisee:hover:after { background: #fff; }
html[data-theme="dark"] .pop-close:before, html[data-theme="dark"] .pop-close:after, html[data-theme="dark"] .close-business:before,
html[data-theme="dark"] .close-business:after, html[data-theme="dark"] .close-enterprise:before, html[data-theme="dark"] .close-enterprise:after,
html[data-theme="dark"] .close-enterprisee:before, html[data-theme="dark"] .close-enterprisee:after { background: var(--ih-text); }
html[data-theme="dark"] .pop-close:hover, html[data-theme="dark"] .close-business:hover, html[data-theme="dark"] .close-enterprise:hover,
html[data-theme="dark"] .close-enterprisee:hover { background: var(--ih-orange-light); }
html[data-theme="dark"] .pop-close:hover:before, html[data-theme="dark"] .pop-close:hover:after, html[data-theme="dark"] .close-business:hover:before,
html[data-theme="dark"] .close-business:hover:after, html[data-theme="dark"] .close-enterprise:hover:before, html[data-theme="dark"] .close-enterprise:hover:after,
html[data-theme="dark"] .close-enterprisee:hover:before, html[data-theme="dark"] .close-enterprisee:hover:after { background: var(--ih-page); }
/* the products' popups: a rounded card */
.div-block-19 { border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.pop-txt { line-height: 1.7; }
/* Quick Start Guide: the blue-grey band, its button orange */
.documentation .div-block-15-copy { display: none; }
.documentation .div-block-15 { padding: 0; background: linear-gradient(135deg, var(--ih-blue), var(--ih-blue-deep)); }
html[data-theme="dark"] .documentation .div-block-15 { background: linear-gradient(135deg, var(--ih-blue), var(--ih-blue-deep)); }
.documentation .container-2 { padding: 64px 20px 60px; }
.documentation .text1, .documentation .text1 strong { margin-bottom: 24px; font-size: 17px; line-height: 1.6; text-align: center; color: var(--ih-text); }
.documentation .link.w-button { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 48px; min-width: 250px;
margin-top: 0; padding: 0 28px; border-radius: 10px; background: var(--ih-orange); box-shadow: 0 6px 16px rgba(var(--ih-orange-rgb), .35); }
.documentation .link.w-button:hover, .documentation .link.w-button:focus-visible { filter: brightness(.88); }
html[data-theme="dark"] .documentation .link.w-button { background: var(--ih-orange); }
html[data-theme="dark"] .documentation .link.w-button:hover { background: var(--ih-orange); filter: brightness(.88); }
.div-block-4-coopy { display: none; }
/* videos: rounded, shadowed */
.videos { margin: 0; padding: 0; background: var(--ih-page); }
.videos .container-5 { padding-top: 72px; }
.videos .w-video { overflow: hidden; border-radius: 14px; box-shadow: var(--ih-shadow); transition: transform .2s ease-out, box-shadow .2s ease-out; }
.videos .w-video:hover { transform: translateY(-3px); box-shadow: var(--ih-shadow-up); }
/* contact: a card */
.contact-us { margin: 0; padding: 72px 0 80px; background: var(--ih-page); }
.contact-us .contact-form { padding: 40px 32px 24px; border: 1px solid var(--ih-card-line); border-radius: var(--ih-radius); background: var(--ih-card); box-shadow: var(--ih-shadow); }
html[data-theme="dark"] .contact-us .contact-form { background: var(--ih-card); border-color: var(--ih-card-line); }
.contact-us .div-block-12 { width: auto; max-width: 600px; }
/* server status: the sand band; its card already rounded (irwin-status.css) */
.server-status { min-height: 0; padding: 64px 0 72px; background: var(--ih-sand); }
.links .div-block-17 { display: none; }
html[data-theme="dark"] .server-status { background: var(--ih-sand); }
.server-status .irwin-status-card { border-radius: var(--ih-radius); }
/* useful links: a grid of cards (two side by side), the address cut to fit */
.links { margin: 0; border: 0; }
.links .div-block-16 { padding: 72px 0 80px; border: 0; background: var(--ih-band); }
html[data-theme="dark"] .links .div-block-16 { background: var(--ih-band); }
.links .div-block-16 > .w-container, .links .div-block-16 .w-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.links .heading-video-copy-copy { grid-column: 1 / -1; margin-bottom: 16px; }
.links .div-block-6 { margin: 0; padding: 24px 26px; border: 1px solid var(--ih-card-line); border-radius: var(--ih-radius); background: var(--ih-card); box-shadow: var(--ih-shadow);
transition: transform .2s ease-out, box-shadow .2s ease-out; }
.links .div-block-6:hover { transform: translateY(-2px); box-shadow: var(--ih-shadow-up); }
.links .div-block-7 { display: none; }
.links .text1-copy { margin-bottom: 8px; font-size: 18px; }
.links .text1, .links .text1 strong { margin-bottom: 10px; font-size: 14px; line-height: 1.6; color: var(--ih-muted); font-weight: 400; }
.links .text1 a { overflow-wrap: anywhere; }
html[data-theme="dark"] .links .text1, html[data-theme="dark"] .links .text1 strong { color: var(--ih-muted); }
/* footer: the blue-grey band, the icons lifting when pointed at */
.footer { margin-bottom: 0; padding: 56px 0 22px; border-top: 0; }
.footer .w-inline-block { transition: transform .15s ease-out, opacity .15s ease-out; }
.footer .w-inline-block:hover { transform: translateY(-2px); }
.footer .paragraph-2-copy { transition: color .15s ease-out; }
.footer a:hover .paragraph-2-copy { color: var(--ih-orange); }
/* small screens: one column, smaller titles */
@media (max-width: 991px) {
.welcome .div-block-11, html[data-theme="dark"] .welcome .div-block-11 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.irwin-hero-visual { max-width: 560px; }
.irwin-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.our-products .w-col { width: 50%; margin-bottom: 20px; }
}
@media (max-width: 767px) {
.welcome { padding-top: 110px; }
.welcome .div-block-11 { margin: 0; }
.welcome .heading { font-size: 38px; }
.welcome .line { font-size: 17px; }
.irwin-why .paragraph-4 { padding: 24px 20px; }
.links .div-block-16 .w-container { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
.our-products .w-col { width: 100%; }
.irwin-feature-grid { grid-template-columns: minmax(0, 1fr); }
.irwin-viz-split { grid-template-columns: minmax(0, 1fr); }
.heading-gris, .heading-gris-cccopy, .heading-video-copy-copy { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.our-products .div-block-10, .links .div-block-6, .videos .w-video, .irwin-cta { transition: none; }
.our-products .div-block-10:hover, .links .div-block-6:hover, .videos .w-video:hover { transform: none; }
}
/* ---- 2026-11-05: the animations ------------------------------------------------------------------------------- */
/* the drawn report, once when the page opens: the card rises, the bars grow from the line, the running total draws itself,
the probability curve draws and fills, the statements come in one after the other (nothing when the system asks for
less motion: the report is simply there) */
@media (prefers-reduced-motion: no-preference) {
.irwin-viz-card { animation: irwin-rise .6s ease-out both; }
.irwin-viz-chart rect[style] { transform-box: fill-box; transform-origin: 50% 100%; animation: irwin-bar .55s cubic-bezier(.2, .8, .2, 1) both;
animation-delay: calc(.3s + var(--i) * .07s); }
.irwin-viz-chart rect.irwin-viz-down { transform-origin: 50% 0; }
.irwin-viz-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: irwin-draw 1.1s ease-in-out 1.15s forwards; }
.irwin-viz-dot { transform-box: fill-box; transform-origin: center; animation: irwin-pop .4s ease-out 2.2s both; }
.irwin-viz-bell { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: irwin-draw 1s ease-out 1.4s forwards, irwin-fill .6s ease-out 2.3s forwards; }
.irwin-viz-mark { opacity: 0; animation: irwin-fade .4s ease-out 2.4s forwards; }
.irwin-viz-list li { opacity: 0; animation: irwin-slide .4s ease-out forwards; }
.irwin-viz-list li:nth-child(1) { animation-delay: 1.5s; } .irwin-viz-list li:nth-child(2) { animation-delay: 1.65s; }
.irwin-viz-list li:nth-child(3) { animation-delay: 1.8s; }
}
@keyframes irwin-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes irwin-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes irwin-draw { to { stroke-dashoffset: 0; } }
@keyframes irwin-pop { 0% { transform: scale(0); } 60% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes irwin-fill { to { fill-opacity: 1; } }
@keyframes irwin-fade { to { opacity: 1; } }
@keyframes irwin-slide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* pointed at: the cards and their details answer */
.irwin-viz-card { transition: transform .3s ease-out, box-shadow .3s ease-out; }
.irwin-viz-card:hover { transform: translateY(-3px); }
.irwin-feature { transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out; }
.irwin-feature:hover { transform: translateY(-3px); box-shadow: var(--ih-shadow-up); border-color: rgba(var(--ih-orange-rgb), .55); }
.irwin-feature-icon { transition: background-color .25s ease-out, color .25s ease-out, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.irwin-feature:hover .irwin-feature-icon { background: var(--ih-orange); color: #fff; transform: rotate(-8deg) scale(1.1); }
.irwin-feature-title { transition: color .2s ease-out; }
.irwin-feature:hover .irwin-feature-title { color: var(--ih-orange); }
.our-products .div-block-10 img { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.our-products .div-block-10:hover img { transform: scale(1.07); }
.our-products .products { transition: color .2s ease-out; }
.our-products .div-block-10:hover .products { color: var(--ih-orange); }
.links .text1-copy strong { transition: color .2s ease-out; }
.links .div-block-6:hover .text1-copy strong { color: var(--ih-orange); }
.irwin-video:after { transition: background-color .15s ease-out, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.irwin-video:hover:after, .irwin-video:focus-visible:after { transform: scale(1.12); }
/* See our products: black comes in from both ends, their edges at 45 degrees, and meets in the middle */
.irwin-cta-ghost { position: relative; z-index: 0; overflow: hidden; }
.irwin-cta-ghost:before, .irwin-cta-ghost:after { content: ""; position: absolute; top: -2px; bottom: -2px; z-index: -1; width: calc(50% + 34px); background: #000; }
.irwin-cta-ghost:before { right: calc(50% - 1px); transform-origin: 100% 50%; transform: skewX(-45deg) scaleX(0); }
.irwin-cta-ghost:after { left: calc(50% - 1px); transform-origin: 0 50%; transform: skewX(-45deg) scaleX(0); }
.irwin-cta-ghost:hover:before, .irwin-cta-ghost:hover:after, .irwin-cta-ghost:focus-visible:before, .irwin-cta-ghost:focus-visible:after { transform: skewX(-45deg) scaleX(1); }
/* dark theme: black would hardly show on the dark page: it fills in light grey, its words dark */
html[data-theme="dark"] .irwin-cta-ghost:before, html[data-theme="dark"] .irwin-cta-ghost:after { background: #e9eaec; }
.irwin-cta-ghost:hover, .irwin-cta-ghost:focus-visible { background: transparent; color: #fff; border-color: #000; }
html[data-theme="dark"] .irwin-cta-ghost:hover, html[data-theme="dark"] .irwin-cta-ghost:focus-visible { background: transparent; color: var(--ih-page); border-color: #e9eaec; }
@media (prefers-reduced-motion: no-preference) {
.irwin-cta-ghost:before, .irwin-cta-ghost:after { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
}
@media (max-width: 640px) {
.welcome { padding-top: 170px; }
}
@media (prefers-reduced-motion: reduce) {
.irwin-feature, .irwin-feature-icon, .our-products .div-block-10 img, .irwin-viz-card { transition: none; }
}
/* Dark theme (2026-11-05): the home page's orange buttons, pointed at, as the site's (css/irwin-site-theme.css): light
orange, dark words, a soft glow */
html[data-theme="dark"] .irwin-cta-main:hover, html[data-theme="dark"] .irwin-cta-main:focus-visible,
html[data-theme="dark"] .documentation .link.w-button:hover, html[data-theme="dark"] .documentation .link.w-button:focus-visible {
background: var(--ih-orange-light); color: var(--ih-page); filter: none; box-shadow: var(--ih-glow); }
/* ---- Why IR-Win: on the left, an IR-Win report workbook seen at an angle (2026-11-05; tools/home_sheet.py) -------- */
.irwin-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.irwin-why .irwin-why-grid .paragraph-4 { max-width: none; margin: 0; }
.irwin-sheet3d { position: relative; padding: 18px 8px 34px 4px; perspective: 1500px; }
.irwin-sheet, .irwin-sheet-back { transform: rotateY(20deg) rotateX(7deg) rotateZ(-2deg); transform-origin: 70% 50%; }
.irwin-sheet { position: relative; z-index: 1; overflow: hidden; border: 1px solid #d5dade; border-radius: 10px; background: #ffffff;
box-shadow: 34px 44px 70px -26px rgba(16, 24, 32, .45), 0 2px 6px rgba(16, 24, 32, .08); font: 11px/1.25 Lato, sans-serif; color: #2c2f32; }
.irwin-sheet-sway { position: relative; perspective: 1500px; } /* (its own perspective: the sheet behind stays behind; it is turned as a whole) */
.irwin-sheet-back { position: absolute; z-index: 0; top: 12px; right: -14px; bottom: -16px; left: 18px; border-radius: 10px;
background: linear-gradient(135deg, #e9edf0, #d6dde2); box-shadow: 20px 30px 50px -24px rgba(16, 24, 32, .35); }
@media (prefers-reduced-motion: no-preference) {
.irwin-sheet, .irwin-sheet-back { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.irwin-sheet3d:hover .irwin-sheet, .irwin-sheet3d:hover .irwin-sheet-back { transform: rotateY(9deg) rotateX(3deg) rotateZ(-.8deg); }
}
/* the window: IR-Win's dark grey bar, the file's name */
.irwin-sheet-top { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #2c2f32; color: #d7e3e8; font-weight: 700; }
.irwin-sheet-dots { display: inline-flex; gap: 5px; }
.irwin-sheet-dots i { width: 8px; height: 8px; border-radius: 50%; background: #5d6268; }
.irwin-sheet-dots i:first-child { background: var(--ih-orange); }
.irwin-sheet-file { letter-spacing: .3px; }
/* the formula bar: the selected cell and its formula */
.irwin-sheet-fx { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid #e3e6e9; background: #f7f8f9; font-family: Consolas, "Courier New", monospace; }
.irwin-sheet-ref { min-width: 30px; padding: 1px 6px; border: 1px solid #d5dade; border-radius: 3px; background: #fff; text-align: center; }
.irwin-sheet-fx-sign { font-style: italic; color: #8a9096; }
.irwin-sheet-formula { color: #2c2f32; }
/* the cells */
.irwin-sheet-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.irwin-sheet-grid th { width: 24px; padding: 3px 0; border: 1px solid #e3e6e9; background: #f1f3f5; color: #8a9096; font-weight: 400; text-align: center; }
.irwin-sheet-grid tr:first-child th:nth-child(2) { width: 30%; }
.irwin-sheet-grid td { padding: 4px 6px; border: 1px solid #edf0f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irwin-sheet-title { font-weight: 700; font-size: 12px; color: var(--ih-orange); }
.irwin-sheet-head td { font-weight: 700; text-align: right; background: #fbf3ec; border-bottom: 1px solid var(--ih-orange); }
.irwin-sheet-num { text-align: right; }
.irwin-sheet-red { color: #c0392b; }
.irwin-sheet-strong td { font-weight: 700; border-top: 1px solid #c8ced3; }
.irwin-sheet-selected { position: relative; outline: 2px solid var(--ih-orange); outline-offset: -2px; background: #fff7f0; }
/* the chart on the sheet */
.irwin-sheet-chart { margin: 10px 12px 8px 36px; padding: 8px 10px 6px; border: 1px solid #d5dade; border-radius: 4px; background: #fff;
box-shadow: 0 2px 8px rgba(16, 24, 32, .08); }
.irwin-sheet-chart-title { margin-bottom: 2px; font-weight: 700; text-align: center; color: #2c2f32; }
.irwin-sheet-chart svg { display: block; width: 100%; height: auto; }
.irwin-sheet-zero { stroke: #c8ced3; stroke-width: 1; }
.irwin-sheet-bar { fill: #7fa7b8; }
.irwin-sheet-bar.irwin-sheet-neg { fill: #d98b6a; }
.irwin-sheet-line { fill: none; stroke: var(--ih-orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.irwin-sheet-dot { fill: #fff; stroke: var(--ih-orange); stroke-width: 2; }
.irwin-sheet-axis { font: 10px Lato, sans-serif; fill: #6b7177; text-anchor: middle; }
.irwin-sheet-legend { display: flex; justify-content: center; gap: 16px; margin-top: 2px; color: #5d6268; }
.irwin-sheet-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.irwin-sheet-key-bar { background: #7fa7b8; border-radius: 2px; }
.irwin-sheet-key-line { height: 3px !important; vertical-align: 3px !important; background: var(--ih-orange); border-radius: 2px; }
/* the report's tabs */
.irwin-sheet-tabs { display: flex; gap: 2px; padding: 0 8px; border-top: 1px solid #e3e6e9; background: #f1f3f5; overflow: hidden; }
.irwin-sheet-tab { padding: 5px 10px; color: #6b7177; white-space: nowrap; }
.irwin-sheet-tab-on { background: #fff; color: #2c2f32; font-weight: 700; box-shadow: inset 0 -2px 0 var(--ih-orange); }
/* dark theme: the sheet stays a light sheet (as in Excel), its shadow deeper, the sheet behind it grey */
html[data-theme="dark"] .irwin-sheet { border-color: #3e4045; box-shadow: 34px 44px 70px -26px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .irwin-sheet-back { background: linear-gradient(135deg, #3a3d42, #2a2c30); box-shadow: 20px 30px 50px -24px rgba(0, 0, 0, .7); }
/* the chart draws itself once the sheet comes into view (js/irwin-home.js adds irwin-sheet-wait, then irwin-sheet-go) */
.irwin-sheet3d.irwin-sheet-wait .irwin-sheet-bar { transform: scaleY(0); }
.irwin-sheet3d.irwin-sheet-wait .irwin-sheet-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.irwin-sheet3d.irwin-sheet-wait .irwin-sheet-dot { opacity: 0; }
.irwin-sheet3d.irwin-sheet-wait .irwin-sheet-selected { outline-color: transparent; background: transparent; }
.irwin-sheet-bar, .irwin-sheet-dot { transform-box: fill-box; }
.irwin-sheet-bar { transform-origin: 50% 100%; }
.irwin-sheet-bar.irwin-sheet-neg { transform-origin: 50% 0; }
.irwin-sheet3d.irwin-sheet-go .irwin-sheet-bar { transform: scaleY(1); transition: transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(2.1s + var(--i) * .18s); }
.irwin-sheet3d.irwin-sheet-go .irwin-sheet-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease-in-out 2.7s; }
.irwin-sheet3d.irwin-sheet-go .irwin-sheet-dot { opacity: 1; transition: opacity .3s ease-out; transition-delay: calc(2.8s + var(--i) * .3s); }
.irwin-sheet3d.irwin-sheet-go .irwin-sheet-selected { transition: outline-color .3s ease-out 1.9s, background-color .3s ease-out 1.9s; }
/* the rows come in one after the other (their numbers count up meanwhile: js/irwin-home.js), the formula is typed */
.irwin-sheet3d.irwin-sheet-wait .irwin-sheet-grid tr { opacity: 0; transform: translateX(-10px); }
.irwin-sheet3d.irwin-sheet-wait .irwin-sheet-grid tr:first-child { opacity: 1; transform: none; }
.irwin-sheet3d.irwin-sheet-go .irwin-sheet-grid tr { opacity: 1; transform: none; transition: opacity .35s ease-out, transform .35s ease-out;
transition-delay: calc(var(--r, 0) * 70ms); }
.irwin-sheet-fx.irwin-sheet-typing .irwin-sheet-formula:after { content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 1px;
vertical-align: -1px; background: #2c2f32; animation: irwin-caret .8s steps(1) infinite; }
@keyframes irwin-caret { 50% { opacity: 0; } }
/* then the sheet floats, turning slowly a few degrees and back; still while pointed at (it turns towards the reader) */
@media (prefers-reduced-motion: no-preference) {
.irwin-sheet3d.irwin-sheet-go .irwin-sheet-sway { animation: irwin-sheet-sway 9s ease-in-out 3.6s infinite alternate; }
.irwin-sheet3d:hover .irwin-sheet-sway { animation-play-state: paused; }
}
@keyframes irwin-sheet-sway { from { transform: rotateY(0) rotateX(0) translateY(0); } to { transform: rotateY(-8deg) rotateX(2.5deg) translateY(-10px); } }
/* narrow screens: the sheet above the text, turned less */
@media (max-width: 991px) {
.irwin-why-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.irwin-sheet3d { max-width: 520px; margin: 0 auto; }
.irwin-sheet, .irwin-sheet-back { transform: rotateY(10deg) rotateX(4deg) rotateZ(-1deg); }
}
@media (max-width: 600px) {
.irwin-sheet { font-size: 9px; }
.irwin-sheet-grid th { width: 16px; }
.irwin-sheet-grid tr:first-child th:nth-child(2) { width: 27%; }
.irwin-sheet-grid td { padding: 3px 3px; text-overflow: clip; }
.irwin-sheet-title { font-size: 10px; }
}
@media (max-width: 479px) {
.irwin-sheet-tab:nth-child(n+4) { display: none; }
.irwin-sheet-chart { margin-left: 12px; }
}
/* ---- half and quarter of a screen (2026-11-06): the browser applies these again at every resize (snapping the window
to half or a quarter of the screen, dragging its edge) ---------------------------------------------------------------- */
/* half a screen side by side (about 860 to 991px wide): the welcome keeps its two columns, the report beside the text */
@media (min-width: 860px) and (max-width: 991px) {
.welcome .div-block-11, html[data-theme="dark"] .welcome .div-block-11 { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 28px; }
.welcome .heading { font-size: 40px; }
.welcome .line { font-size: 18px; }
.irwin-hero-visual { max-width: none; }
}
/* narrower, one column: the text and the report in the middle (they stayed on the left, the right half empty) */
@media (max-width: 859px) {
.irwin-hero-text, .irwin-hero-visual { box-sizing: border-box; width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; }
}
/* a short window (a quarter of the screen, or its top or bottom half): the sections closer together, so that more of
the page shows (the header lower: irwin-base.css) */
@media (max-height: 620px) and (min-width: 641px) {
.welcome { padding-top: 100px; padding-bottom: 40px; }
.welcome .heading { font-size: 38px; }
.irwin-features, .irwin-why, .our-products, .contact-us, .server-status { padding-top: 44px; padding-bottom: 44px; }
.links .div-block-16 { padding: 44px 0 52px; }
.documentation .container-2 { padding: 40px 20px 38px; }
.videos .container-5 { padding-top: 44px; }
.heading-gris, .heading-gris-cccopy, .heading-video-copy-copy { margin-bottom: 24px; font-size: 30px; }
#home, #features, #why, #our-products, #doc, #videos, #contact-us, #server-status, #links { scroll-margin-top: 76px; }
}
/* very short (a quarter of a small screen): the header scrolls away with the page (irwin-base.css), the sections' tops
no longer kept below it */
@media (max-height: 420px) and (min-width: 641px) {
#home, #features, #why, #our-products, #doc, #videos, #contact-us, #server-status, #links { scroll-margin-top: 8px; }
}
/* ---- the light / dark button in the home pages' header (2026-11-07): as the app's (css/irwin-theme.css), on the dark
header in both themes, so it has one look; js/irwin-home.js ---------------------------------------------------------- */
.irwin-home-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 8px 0 0; padding: 0;
vertical-align: middle; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: transparent; color: var(--ih-header-text);
cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.irwin-home-theme:hover { border-color: var(--ih-orange); color: var(--ih-orange); }
.irwin-home-theme:focus-visible { outline: 2px solid var(--ih-orange); outline-offset: 2px; }
.irwin-home-theme svg { display: block; width: 18px; height: 18px; }
.irwin-home-theme .irwin-theme-sun { display: none; }
html[data-theme="dark"] .irwin-home-theme { color: #f2c14e; }
html[data-theme="dark"] .irwin-home-theme .irwin-theme-sun { display: block; }
html[data-theme="dark"] .irwin-home-theme .irwin-theme-moon { display: none; }
.irwin-home-theme { flex: none; } /* (a phone's header: it keeps its round size) */
/* (desktop: the header's row already spaces its buttons; 992 to 1079px, the French menu's tightest room: a little smaller) */
@media (min-width: 992px) { .menu .column-6 .irwin-home-theme { margin-right: 0; } }
@media (min-width: 992px) and (max-width: 1079px) { .menu .column-6 .irwin-home-theme { width: 28px; height: 28px; } .irwin-home-theme svg { width: 15px; height: 15px; } }
/* ---- the light / dark button beside the language button (2026-11-08): both in .irwin-lang-group, kept together on
every screen. On a computer screen the group takes the language button's place at the header's right edge (it was
placed alone there, irwin-base.css), and the room kept for it grows by the theme button's width; on tablets and
phones it is one item of the buttons' row, which may now wrap onto a second line on narrow phones (the French row
went past the window's edge) */
.irwin-lang-group { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.menu .column-6 .irwin-lang-group .irwin-lang-switch { margin-top: 0 !important; }
.menu .column-6 .irwin-lang-group .irwin-home-theme { margin: 0; }
@media (min-width: 992px) {
.menu .irwin-lang-group { position: absolute; top: 26px; right: 24px; }
.menu .irwin-lang-group .irwin-lang-switch { position: relative; top: auto; right: auto; }
.menu > .w-container { margin-right: max(262px, calc((100vw - 1120px) / 2)); }
}
@media (min-width: 992px) and (max-width: 1199px) {
.menu .irwin-lang-group { right: 16px; gap: 6px; }
.menu > .w-container { margin-right: 168px; }
}
@media (max-height: 620px) and (min-width: 992px) { .menu .irwin-lang-group { top: 16px; } }
@media (max-height: 620px) and (min-width: 641px) and (max-width: 991px) { .menu .column-6 .irwin-lang-group { margin-top: 15px; } }
@media (max-width: 991px) { .irwin-lang-group { gap: 6px; } }
@media (max-width: 640px) { .menu .row-5 > .column-6 { flex-wrap: wrap; row-gap: 8px; } }