/* ========================================================================== Core - reset, self-hosted fonts, page background, type scale. The whole site is measured in `em` off a 12.8px root, because that is what the live Elementor kit does: `.elementor-kit-818 { font-size: 0.8em }` on , i.e. 0.8 x 16px. Every size below was read out of the live page's computed styles, not chosen. ========================================================================== */ /* --- Self-hosted fonts ----------------------------------------------------- The live site asks Google for FIVE families at all 18 weights each (Montserrat, Fira Code, Lato, Source Sans 3, Source Code Pro = 90 faces). Measured against the rendered page, the home page only ever paints Montserrat 500/700/900, Source Code Pro 400/500/600/700/900, Lato 400/700 and Fira Code 500 - so those are the only faces shipped. Montserrat and Source Code Pro are variable fonts, one file per subset covering every weight. -------------------------------------------------------------------------- */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/montserrat-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/montserrat-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/source-code-pro-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/source-code-pro-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Source Sans 3 paints almost no visible text (only the skip link), but it IS the kit's body font, so its metrics set the line-box strut under every inline-block button on the site. Shipping it is what keeps those boxes the same height as the live page's. */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/source-sans-3-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/fonts/source-sans-3-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/fira-code-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/fira-code-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Tokens ---------------------------------------------------------------- */ :root { --ink: #000; --yellow: #ffdd00; --bg: #e7e6e5; /* the live site's own --bg, read from wp-custom-css */ --dot: rgba(0, 0, 0, .05); --dot-size: 1.3px; --gap: 34px; --dots-speed: 160s; /* the live drift animation's duration */ --mono: 'Source Code Pro', monospace; --display: 'Montserrat', sans-serif; --code: 'Fira Code', monospace; --shell: 12.8px; /* container side padding on desktop */ } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; /* overflow-x: clip keeps the marquees from widening the document, exactly as the live site does it; without it the page scrolls sideways. */ overflow-x: clip; position: relative; background: var(--bg); color: var(--ink); font-family: 'Source Sans 3', sans-serif; font-size: 12.8px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* The drifting micro-dot page background. Fixed, behind everything, never clickable. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, var(--dot) var(--dot-size), transparent calc(var(--dot-size) + 0.6px)); background-size: var(--gap) var(--gap); background-position: 0 0; animation: dots-drift var(--dots-speed) linear infinite; transform: translateZ(0); } @keyframes dots-drift { from { background-position: 0 0; } to { background-position: 420px 0; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } img { max-width: 100%; height: auto; border: 0; } a { color: #2e2e2e; text-decoration: none; } a:hover { color: #000; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* Elementor's heading widget ships `line-height: 1` on every title, and its button base does the same. Reproduced here so headings stop inheriting the body's 1.5; the handful of headings the live site gives a different line-height override it in their own band's stylesheet. */ h1, h2, h3, h4, h5, h6 { line-height: 1; } /* --- Container system ------------------------------------------------------ A minimal stand-in for Elementor's flexbox containers, using the same model so the geometry falls out of the same maths at every viewport instead of being pinned to measured pixels at one width. Defaults are Elementor's own: 10px padding all round, 15px gap, content width min(100%, 1450px). .c boxed container - full-bleed outside, inner capped at --cw .cf full container - no inner wrapper .w widget box -------------------------------------------------------------------------- */ .c, .cf { --w: 100%; /* Declared on every container, not just where it is used: custom properties inherit, and a --w-mobile set on one container would otherwise leak into every container nested inside it. */ --w-mobile: 100%; --wrap-mobile: wrap; --cw: min(100%, 1450px); --dir: column; --just: normal; --align: normal; --wrap: nowrap; --rgap: 15px; --cgap: 15px; --pt: 10px; --pr: 10px; --pb: 10px; --pl: 10px; position: relative; width: var(--w); min-width: 0; flex: 0 1 auto; display: flex; } .c { flex-direction: column; padding-inline: var(--pl) var(--pr); } .c > .ci { display: flex; flex-direction: var(--dir); flex-wrap: var(--wrap); justify-content: var(--just); align-items: var(--align); gap: var(--rgap) var(--cgap); width: 100%; height: 100%; max-width: var(--cw); margin-inline: auto; padding-block: var(--pt) var(--pb); flex: 1 1 auto; } .cf { flex-direction: var(--dir); flex-wrap: var(--wrap); justify-content: var(--just); align-items: var(--align); gap: var(--rgap) var(--cgap); padding: var(--pt) var(--pr) var(--pb) var(--pl); } .w { position: relative; min-width: 0; max-width: 100%; } /* Screen-reader only text, matching the theme's skip link. */ .sp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } @media (max-width: 1024px) { :root { --shell: 12.8px; } } /* ========================================================================== Header - contact strips, sticky logo bar, off-canvas menu. Every width percentage below is the one Elementor declares on the live site (read out of elementor-post-841.css / -838.css), so the geometry falls out of the same maths at every viewport rather than being pinned to measured pixels. ========================================================================== */ .sp-header { position: relative; z-index: 9999; } /* Elementor's own breakpoints: mobile <= 767, tablet <= 1024, desktop > 1024. `hide-mobile` and `hide-desktop` are its hidden-* classes, which is why BOTH contact strips are visible at 768-1024 on the live site. */ .hide-mobile { display: flex; } .hide-desktop { display: none; } @media (max-width: 767px) { .hide-mobile { display: none; } } @media (max-width: 1024px) { .hide-desktop { display: flex; } } /* --- Buttons -------------------------------------------------------------- The Elementor kit's button defaults: Fira Code 500, 0.9em, uppercase, 1px solid black border, 1px radius. Individual widgets override family/size, so the base carries the kit and the modifiers carry the overrides. */ .btn { display: inline-block; font-family: var(--code); font-size: 0.9em; font-weight: 500; line-height: 1; text-transform: uppercase; color: #000; background-color: transparent; border: 1px solid #000; border-radius: 1px; padding: 0; /* Elementor's button base; the widget wrapper around it decides left/right. */ text-align: center; cursor: pointer; } .btn-t { display: block; } /* Elementor's "bob" hover animation, verbatim from e-animation-bob.min.css. */ @keyframes sp-bob { 0% { transform: translateY(-8px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(-8px); } } @keyframes sp-bob-float { 100% { transform: translateY(-8px); } } .bob:hover, .bob:focus, .bob:active { animation-name: sp-bob-float, sp-bob; animation-duration: .3s, 1.5s; animation-delay: 0s, .3s; animation-timing-function: ease-out, ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: forwards; animation-direction: normal, alternate; } /* --- Black contact strip (desktop + tablet) -------------------------------- Full-bleed on purpose - a deliberate departure from the live site, where the black is capped at the 1450px content width and stops short of the edges on a wide screen. The cap moves off the bar and into its padding instead: below 1450 the max() picks the plain 1em and the layout is identical to the original to the pixel, above it the padding grows by exactly the gutter the content box used to have, so the text sits where it always did while the black runs edge to edge. */ .tb { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; --dir: row; --just: center; --align: center; --cw: 100%; } .tb-bar { --dir: row; --align: center; --pt: 0em; --pb: 0em; --pl: max(1em, calc((100% - 1450px) / 2 + 1em)); --pr: max(1em, calc((100% - 1450px) / 2 + 1em)); background-color: #000; } .tb-l { --w: 30%; --dir: row; --just: flex-start; } .tb-c { --w: 50%; --dir: row; --just: center; } .tb-r { --w: 30%; --dir: row; --just: flex-end; } .tb-title { font-family: var(--mono); font-size: 1em; font-weight: 600; line-height: 1; text-transform: none; color: #fff; } .tb-bar .btn { font-family: var(--mono); font-size: 1em; font-weight: 600; text-transform: none; color: #fff; } .tb-bar .btn:hover { color: var(--yellow); } /* --- Compact contact strip (<= 1024) -------------------------------------- */ .mtb { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; --dir: row; --just: center; --align: center; } .mtb-bar { --dir: row; --align: center; --pt: 5px; --pb: 5px; --pl: 15px; --pr: 15px; background-color: #000; } .mtb-l { --w: 30%; --dir: row; --just: flex-start; } .mtb-r { --w: 30%; --dir: row; --just: flex-end; } .mtb-bar .btn { color: #fff; } /* "E-mail" is the one button in this strip the live site re-typed in Source Code Pro at 1em with no uppercase; the rest keep the kit's Fira Code. Replicated, inconsistency included. */ .mtb-bar .btn-scp { font-family: var(--mono); font-weight: 500; text-transform: none; } /* "Linked In" is the one social button the live strip does NOT uppercase. */ .mtb-bar .btn-nocaps { text-transform: none; } @media (max-width: 767px) { .mtb { --pt: 0px; --pb: 0px; } .mtb-bar { --pt: 6.4px; --pb: 6.4px; --pl: 1em; --pr: 1em; } .mtb-l { --w-mobile: 49%; --pt: 0px; --pb: 0px; --pl: 0px; --pr: 0px; } .mtb-r { --w-mobile: 46%; --pt: 0px; --pb: 0px; --pl: 0px; --pr: 0px; } /* Only on a phone does the live site step this one button up to 1em. */ .mtb-bar .btn-scp { font-size: 1em; } } /* --- Main header row ------------------------------------------------------- */ .hdr { --dir: row; --rgap: 0px; --cgap: 0px; --pt: 1em; --pr: 1em; --pb: 1em; --pl: 1em; border-radius: 30px; z-index: 99988; } .hdr-l { --w: 50%; --just: center; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; align-self: center; flex-grow: 0; flex-shrink: 0; } .logobox { --w: 33%; --just: center; --rgap: 0px; --cgap: 0px; --pt: 1em; --pr: 1em; --pb: 1em; --pl: 1em; } /* The frosted plate behind the logo, verbatim from the live custom CSS. */ .blur { background: rgba(255, 255, 255, .08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 40px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .25); border-radius: 15px; transition: transform .4s; } .logobox:hover { transform: translateX(10px); } .logoin { --w: 100%; --just: center; --rgap: 0px; --cgap: 0px; --pt: 5px; --pr: 0px; --pb: 5px; --pl: 0px; } .logo img { width: 95%; display: block; } .logo a { display: block; } .logo:hover img { filter: brightness(111%); } .hdr-r { --w: 50%; --dir: row; --just: flex-end; --align: center; --rgap: 20px; --cgap: 20px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; align-self: center; flex-grow: 0; flex-shrink: 0; } @media (max-width: 1024px) { .hdr-r > .w { padding-top: 15px; } } @media (max-width: 767px) { .hdr { --cw: 100%; --pt: 5px; --pr: 5px; --pb: 5px; --pl: 5px; --wrap-mobile: nowrap; border-radius: 0 0 30px 30px; } .logobox { --w-mobile: 76%; --pt: 0em; --pr: 0em; --pb: 0em; --pl: 0em; border-radius: 5px; } .logoin { --w-mobile: 100%; --pt: 1em; --pr: 1em; --pb: 1em; --pl: 1em; border-radius: 15px; } .hdr-l { --w-mobile: 50%; } .hdr-r { --w-mobile: 50%; --rgap: 0px; --cgap: 0px; } .hdr-r > .w { padding-top: 0; } } /* --- Sticky behaviour ------------------------------------------------------ Elementor's sticky module takes the row out of flow (position: fixed) and drops a spacer of the same height in its place. site.js does exactly that, so the page never jumps at the moment it sticks. */ .hdr.is-stuck { position: fixed; top: 10px; left: 0; right: 0; width: 100%; z-index: 9999; } .sticky-spacer { display: none; } .sticky-spacer.is-on { display: block; } /* --- Quick-quote pill ------------------------------------------------------ Collapsed to a 56px circle; widens to 160px and turns yellow on hover. Verbatim from the live inline style block. */ .appt { --appt-bg: #000; --appt-ink: #fff; --appt-bg-hover: var(--yellow); --appt-ink-hover: #000; display: inline-flex; align-items: center; height: 56px; width: 56px; padding: 0 18px; background: var(--appt-bg); border-radius: 999px; text-decoration: none; overflow: hidden; white-space: nowrap; vertical-align: middle; transition: width .35s ease, transform .15s ease, background .25s ease; transform-origin: right center; } .appt-in { display: flex; align-items: center; gap: 12px; } .appt-in svg { width: 22px; height: 22px; stroke: var(--appt-ink); flex: 0 0 auto; transition: stroke .25s ease; } .appt-t { font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--appt-ink); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease .1s, transform .25s ease, color .25s ease; } .appt:active { transform: scale(.98); } @media (min-width: 769px) { .appt:hover { width: 160px; background: var(--appt-bg-hover); } .appt:hover .appt-in svg { stroke: var(--appt-ink-hover); } .appt:hover .appt-t { opacity: 1; transform: translateX(0); color: var(--appt-ink-hover); } } @media (max-width: 768px) { .appt { transform: scale(.65); transform-origin: center center; } .appt:active { transform: scale(.62); } .appt-t { display: none; } } /* --- Burger + off-canvas menu ---------------------------------------------- */ .nav-control { position: absolute; left: -9999px; } .nav-button { --nav-bg: #000; --nav-hover: var(--yellow); --nav-ink: #fff; --nav-ink-hover: #000; width: 56px; height: 56px; border-radius: 999px; background: var(--nav-bg); border: 0; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; position: relative; z-index: 9999; transition: background .25s ease, transform .15s ease; transform-origin: center center; } /* 1px ring sitting just outside the circle. */ .nav-button::after { content: ''; position: absolute; inset: -1px; border: 1px solid #000; border-radius: inherit; pointer-events: none; z-index: 1; } .nav-button:active { transform: scale(.96); } .nav-burger { width: 24px; height: 18px; position: relative; display: block; z-index: 2; } .nav-burger span { position: absolute; left: 50%; top: 50%; width: 20px; height: 1px; background: var(--nav-ink); border-radius: 1px; transform-origin: center center; transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease, background .25s ease; } .nav-burger span:nth-child(1) { transform: translate(-50%, -50%) translateY(-6px); } .nav-burger span:nth-child(2) { transform: translate(-50%, -50%); } .nav-burger span:nth-child(3) { transform: translate(-50%, -50%) translateY(6px); } @media (min-width: 769px) { .nav-button:hover { background: var(--nav-hover); } .nav-button:hover .nav-burger span { background: var(--nav-ink-hover); } } .nav-control:checked + .nav-button { background: var(--nav-hover); } .nav-control:checked + .nav-button .nav-burger span { background: var(--nav-ink-hover); } .nav-control:checked + .nav-button .nav-burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } .nav-control:checked + .nav-button .nav-burger span:nth-child(2) { opacity: 0; } .nav-control:checked + .nav-button .nav-burger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } @media (max-width: 768px) { .nav-button { transform: scale(.65); } .nav-button:active { transform: scale(.62); } } .nav-panel { position: fixed; inset: 0; /* The live rule reads `background: var(--nav2-panel-bg)`, but that variable is declared on the button, not the panel - so it resolves to nothing and the backdrop is transparent. Replicated as found; see the build report. */ background: transparent; transform: translateX(100%); transition: transform .4s ease; z-index: 100; } .nav-control:checked ~ .nav-panel { transform: translateX(0); } /* The panel frosts whatever is behind it. The live rule also declares a 10% white background, but Elementor's own per-element rule overrides that back to fully transparent, so only the blur survives - replicated as found. */ .menu-shell { backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); --dir: row; --just: center; --align: center; --rgap: 0px; --cgap: 0px; --pt: 0%; --pr: 0%; --pb: 0%; --pl: 0%; --cw: min(100%, 1440px); z-index: 25; height: 100%; } .menu-shell > .ci { height: 100%; } /* The 60% transparent gutter the live panel keeps to the left of the card. */ .menu-shell > .ci::before { content: ''; display: block; width: 60%; flex: 0 1 auto; } @media (max-width: 1024px) { .menu-shell > .ci::before { display: none; } } .menu-body { --w: 40%; --just: center; --rgap: 0px; --cgap: 0px; --pt: 7%; --pr: 3%; --pb: 5%; --pl: 3%; min-height: 100vh; background-color: var(--yellow); overflow-y: auto; } @media (max-width: 767px) { .menu-shell { --w-mobile: 100vw; } .menu-body { --w-mobile: 100%; --pt: 0px; --pr: 20px; --pb: 0px; --pl: 20px; } /* The live panel drops the slide-left hover on touch. */ .menu-row:hover .menu-link { transform: none; } } .menu-top { --pt: 0vw; --pr: 0vw; --pb: 2vw; --pl: 0vw; } .menu-heading { font-family: var(--display); font-size: 6em; font-weight: 900; line-height: 1; } .menu-cols { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; --rgap: 0px; --cgap: 0px; position: relative; } .menu-main, .menu-sub { --rgap: 2px; --cgap: 2px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .menu-sub[hidden] { display: none; } .menu-row { text-align: right; } .menu-link { font-family: var(--mono); font-size: 2em; font-weight: 500; line-height: 1; text-transform: none; color: #000; background-color: transparent; border: 0; border-radius: 0; padding: 0; transition: transform .4s; } .menu-row:hover .menu-link { transform: translateX(-10px); } .menu-sep { padding-block: 12px; } .menu-sep .sep { display: block; width: 70%; margin-left: auto; border-top: 1px solid #000; } /* The live menu has one divider BETWEEN items, so the repeater's trailing one goes. */ .menu-main > .menu-sep:last-child { display: none; } .menu-foot-row { --dir: row; --just: flex-end; --align: center; --rgap: 15px; --cgap: 15px; } .menu-foot-social { margin-top: 20px; } .menu-small { font-family: var(--mono); font-size: .9em; font-weight: 500; line-height: 1; text-transform: none; color: rgba(0, 0, 0, .82); border: 0; border-radius: 0; padding: 0; transition: font-weight .2s ease; } .menu-small:hover { font-weight: 700; } /* ========================================================================== Hero - headline, rotating circular caption, background video, service list and the spinning outline graphic. ========================================================================== */ .hero { --dir: row; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .hero-l { --w: 60%; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; z-index: 1; } .hero-head { --rgap: 2em; --cgap: 2em; } /* Elementor's "fit to width" heading: one nowrap line scaled to the box. */ .fit-100 { display: block; width: 100%; white-space: nowrap; line-height: 1; transform-origin: left center; } .hero-title { font-family: var(--display); font-size: 8.5vw; font-weight: 900; line-height: .9em; color: #000; } /* The circle caption sits absolutely, bottom-right of the headline block. */ .hero-circle { position: absolute; align-self: flex-end; right: -12em; bottom: -1em; margin: 0em 8em -2em 0em; } .circle-text-container { width: 160px; height: 160px; } .circle-text-rotator { width: 100%; height: 100%; animation: spinText 22s linear infinite; transform-origin: center; } @keyframes spinText { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .circle-text { font-family: var(--mono); font-weight: 600; font-size: 2.5em; letter-spacing: 1px; fill: currentColor; text-transform: uppercase; } .hero-sub-w { z-index: 1; text-align: end; border-radius: 1px; } /* Two classes deep on purpose: on the live page Elementor's per-widget rule beats the shared .clean-outline helper on colour, weight and line-height, and only the letter-spacing and the text-shadow ring survive from the helper. */ .hero-sub-w .hero-sub { font-family: var(--display); font-size: 6em; font-weight: 900; text-transform: uppercase; line-height: .7em; color: #e7e6e5; } /* The outlined "ON TEXTILES" lettering: transparent fill plus a ring of 1px and half-pixel text shadows, verbatim from the live custom CSS. */ .clean-outline { font-weight: 800; letter-spacing: .04em; line-height: 1.1; color: transparent; transform: none !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -0.5px 0 0 #000, 0.5px 0 0 #000, 0 -0.5px 0 #000, 0 0.5px 0 #000; } /* --- Background video ------------------------------------------------------ */ .hero-video { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; min-height: 28em; border-radius: 20px; margin: 2em 0em 0em 0em; background-color: var(--yellow); } .hero-video-box { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; direction: ltr; } /* Fills the band exactly as Elementor's cover-sized iframe did: the source is 16:9, the band is wider than that, so `cover` scales to the band's width and crops top and bottom evenly - the same framing, arrived at by the browser instead of by JS. */ .hero-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; pointer-events: none; } /* --- Service list ---------------------------------------------------------- */ .hero-list { --rgap: 2px; --cgap: 2px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .hero-row { --dir: row; --align: center; --rgap: 45px; --cgap: 45px; display: inline-flex; width: fit-content; cursor: pointer; transition: background .3s; } .hero-row:hover { background-color: var(--yellow); } .hero-row-title { font-family: var(--display); font-size: 3.8em; font-weight: 900; } /* The arrow slides in from the left on hover; hidden, not absent, at rest. */ .hover-reveal { position: relative; overflow: hidden; } .hover-reveal .hover-img { opacity: 0; transform: translateX(-15px); transition: opacity .45s ease, transform .45s ease; } .hover-reveal:hover .hover-img { opacity: 1; transform: translateX(0); } .hover-img img { width: 3.4em; height: auto; display: block; } /* --- Spinning outline graphic ---------------------------------------------- */ .hero-r { --w: 40%; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; margin: 20em 0em 0em 0em; } .hero-art { position: absolute; top: 0; left: 22em; } .hero-rot { width: 280%; height: 280%; display: block; transform-origin: center center; transform-box: fill-box; animation: heroSpin 70s linear infinite; will-change: transform; z-index: 0; } .hero-rot img { display: block; width: 100%; height: auto; } @keyframes heroSpin { from { transform: scale(2.1) rotate(0deg); } to { transform: scale(2.1) rotate(360deg); } } @media (max-width: 1024px) { .hero-sub-w .hero-sub { font-size: 4.5em; } .hero-list { --rgap: 0px; --cgap: 0px; } .hero-row-title { font-size: 2em; } } @media (max-width: 767px) { .hero { --pt: 1em; --pr: 0em; --pb: 0em; --pl: 0em; } .hero-l { --rgap: 20px; --cgap: 20px; --pt: 0em; --pr: 0em; --pb: 0em; --pl: 0em; } .hero-head { --rgap: 10px; --cgap: 10px; --pt: 0em; --pr: 1em; --pb: 2em; --pl: 1em; } .hero-title { font-size: 3.8em; } .fit-100 { text-align: start; } .hero-circle { margin: 0em 10em 0em 0em; right: -9em; bottom: -0.9em; } .circle-text-container { width: 100px; height: 100px; } .hero-sub-w { text-align: end; padding: 0em 2em 0em 0em; } .hero-sub-w .hero-sub { font-size: 3.1em; } .hero-video { margin: 0em; z-index: 1; } .hero-row { --rgap: 10px; --cgap: 10px; --pt: 4px; --pr: 10px; --pb: 4px; --pl: 10px; } .hero-row-title { font-size: 1.7em; } .hover-img img { width: 2.9em; } } /* ========================================================================== Carousels - a 60-line stand-in for Elementor's nested carousel (Swiper 8). Measured off the live widgets: loop on, 5 slides per view on desktop (2 on tablet, 1 on mobile) for the products, 2/2/1 for the testimonials, 10px between slides, 500ms transition, 5s autoplay that pauses on hover. Slide width is Swiper's own formula - (track - (n-1) x gap) / n - so the numbers fall out at every viewport instead of being pinned. ========================================================================== */ .carousel { /* --per-desktop / -tablet / -mobile are set per widget in the markup; --per is resolved here so the media queries can win over the inline values. */ --per: var(--per-desktop, 1); --cgap-px: 10px; position: relative; display: flex; min-width: 0; } .carousel-vp { overflow: hidden; width: 100%; } .carousel-track { display: flex; gap: var(--cgap-px); will-change: transform; align-items: stretch; } .carousel-slide { flex: 0 0 calc((100% - (var(--per) - 1) * var(--cgap-px)) / var(--per)); max-width: calc((100% - (var(--per) - 1) * var(--cgap-px)) / var(--per)); height: auto; display: flex; } .carousel-slide > * { width: 100%; } /* Arrows: yellow pill with a 1px black ring, inverted on hover. */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 1.2em; line-height: 0; color: #000; background-color: var(--yellow); border: 1px solid #000; border-radius: 100px; padding: 15px; cursor: pointer; transition-duration: .25s; } .carousel-arrow svg { width: 1em; height: 1em; display: block; } .carousel-arrow:hover { background-color: #000; color: var(--yellow); border-color: #000; } .carousel-prev { left: -1.5em; } .carousel-next { right: -1.5em; } @media (max-width: 1024px) { .carousel { --per: var(--per-tablet, var(--per-desktop, 1)); } } @media (max-width: 767px) { .carousel { --per: var(--per-mobile, var(--per-tablet, var(--per-desktop, 1))); } .carousel-prev { left: -0.8em; } .carousel-next { right: -0.8em; } } /* --- Product cards --------------------------------------------------------- */ .products { --dir: column; } .pcard-outer { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; --cw: 100%; } .pcard { --rgap: 0px; --cgap: 0px; --pt: 1vw; --pr: 1vw; --pb: 1vw; --pl: 1vw; border-radius: 20px; background-color: var(--yellow); transition: transform .4s, background .3s, border .3s, box-shadow .3s; } .pcard:hover { transform: translateY(-8px); } .pcard-head { --dir: row; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .pcard-head-l { --just: center; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .pcard-head-r { --just: center; } .pcard-label { font-family: var(--mono); font-size: .8em; font-weight: 400; text-align: start; } .pcard-label-r { text-align: end; } .pcard-img { transition: transform .3s; } .pcard-img:hover { transform: translateY(-5px); } .pcard-img img { display: block; width: 100%; height: auto; } .pcard-marquee { margin: -1em 0em 0em 0em; } /* The per-card scrolling caption strip. */ .dekerta-marquee { position: relative; overflow: hidden; white-space: nowrap; width: 100%; background: transparent; } .dekerta-track { display: inline-block; animation: marquee 25s linear infinite; } .dekerta-track span { font-family: var(--display); font-weight: 900; font-size: 1em; color: #000; letter-spacing: 0em; line-height: .9; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 767px) { .pcard-head { --just: space-evenly; --rgap: 0px; --cgap: 0px; } .pcard-head-l, .pcard-head-r { --w-mobile: 50%; --pt: 1em; --pr: 1em; --pb: 1em; --pl: 1em; } .pcard-marquee { margin: -2em 0em 2em 0em; } } /* --- Divider bands --------------------------------------------------------- */ .rule { --dir: column; } .rule-in { display: flex; padding-block: 15px; } .rule-line { display: flex; width: 100%; border-top: 1px solid #000; } /* --- References headings --------------------------------------------------- */ .refhead { --dir: row; } .refhead-l, .refhead-r { } .refhead-title { font-family: var(--display); font-size: 3.6em; font-weight: 900; text-align: start; } .refhead-title-r { text-align: end; } @media (max-width: 1024px) { .refhead-title { font-size: 2em; } } @media (max-width: 767px) { .refhead { --cw: 100%; --pt: 0em; --pr: 1em; --pb: 3em; --pl: 1em; } .refhead-l { --w-mobile: 45%; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .refhead-r { --w-mobile: 48%; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .refhead-title { font-size: 1.4em; } } /* --- Testimonial cards ----------------------------------------------------- */ .testi { --dir: column; } /* Eleven of the twelve live cards space their two rows apart and let the quote block find its own height; the twelfth (Lee & Wrangler) is set up differently but its quote is the tallest of the set, so both settings render identically. One uniform rule reproduces all twelve. */ .tcard { --just: space-between; --pt: 20px; --pr: 20px; --pb: 20px; --pl: 20px; background-color: #fff; border: 1px solid #000; width: 100%; } .tcard.tcard-top { --just: normal; } .tcard.tcard-top .tcard-body { min-height: 12em; } .tcard-head { --dir: row; --rgap: 0px; --cgap: 0px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .tcard-role, .tcard-name { --w: 50%; background-color: var(--yellow); } .tcard-h { font-family: var(--display); font-size: 1em; font-weight: 900; text-align: start; } .tcard-h-r { text-align: end; } .tcard-body { --dir: row; --just: flex-end; } .tcard-text { --w: 70%; --just: flex-end; --rgap: 0px; --cgap: 0px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .tcard-logo { --w: 30%; --just: flex-end; --rgap: 0px; --cgap: 0px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .tcard-logo img { display: block; } .tcard-copy { font-family: var(--mono); font-size: 1em; font-weight: 400; line-height: 1.8em; color: #000; } /* WordPress's text editor gives every paragraph `margin: 0 0 14.4px`, including the last one - measured on the live card, not rounded to an em. */ .tcard-copy p { margin: 0 0 14.4px; } @media (max-width: 767px) { .tcard-role { --pt: 10px; --pr: 0px; --pb: 5px; --pl: 0px; } .tcard-name { --pt: 2px; --pr: 0px; --pb: 10px; --pl: 0px; } /* Every card's role and name line up centred on a phone. */ .tcard-h, .tcard-h-r { text-align: center; } } /* --- Add a review button --------------------------------------------------- */ .opinion { --dir: column; } .opinion-w { text-align: center; } .opinion-btn { font-family: var(--mono); font-size: .9em; font-weight: 500; text-transform: none; line-height: 1.2em; letter-spacing: .8px; border-radius: 50px; padding: 1em 3em; color: #000; } .opinion-btn:hover { background-color: #000; color: #fff; } /* ========================================================================== "Nasze wartości" - five numbered value cards plus the contact card. ========================================================================== */ .values-head { --dir: row; --pt: 4em; --pr: 0em; --pb: 2em; --pl: 0em; } /* A 1px-wide yellow tick to the left of the heading. The live site achieves it with a container whose width is literally declared as 1px. */ .values-tick { --w: 1px; background-color: var(--yellow); flex-grow: 0; flex-shrink: 0; } .values-dot { font-family: var(--display); font-size: 3em; font-weight: 500; color: var(--yellow); padding: 0% 40% 0% 0%; } .values-head-t { --w: 99%; --just: center; } .values-title { font-family: var(--display); font-size: 3em; font-weight: 500; padding: 0% 40% 0% 0%; } /* --pb is the row container's own 10px plus the 10em (128px) padding-bottom that the live shortcode wrapper around this whole block carries. */ .values-row { --dir: row; --wrap: wrap; --rgap: 20px; --cgap: 20px; --pb: 138px; } .vcard { /* 50% minus half the 20px gap: the live site lays these out as three separate two-up rows where flex-shrink takes 710 down to 700; one wrapping row needs the gap taken out of the declared width to land on the same number. */ --w: calc(50% - 10px); --dir: row; --rgap: 0px; --cgap: 0px; --pt: 1px; --pr: 1px; --pb: 1px; --pl: 1px; border: 1px solid transparent; margin: 0%; } /* The 3s "draw the border" animation, verbatim from the live custom CSS. */ .animated-border-container { position: relative; } .animated-border-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #000; box-sizing: border-box; clip-path: polygon(0 0, 0 0, 0 0, 0 0); animation: drawBorderSmooth 3s ease forwards; pointer-events: none; } @keyframes drawBorderSmooth { 0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } 50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); } 75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } .vcard-l { --w: 50%; --dir: column; --just: space-between; --pt: 2em; --pr: 2em; --pb: 2em; --pl: 2em; min-height: 40vh; } .vcard-lead { font-family: var(--display); font-size: 1.7em; font-weight: 900; color: #000; } .vcard-num { font-family: var(--display); font-size: 7.5em; font-weight: 900; line-height: 73px; letter-spacing: -5px; color: #000; } .vcard-r { --w: 50%; --just: space-between; --pt: 2em; --pr: 2em; --pb: 2em; --pl: 2em; } .vcard-copy { } .vcard-body { font-family: var(--mono); font-size: 1em; font-weight: 400; line-height: 1.5em; color: #000; } .vcard-tag { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; background-color: var(--yellow); } .vcard-tag-in { } .vcard-tag-t { font-family: var(--mono); font-size: 1.6em; font-weight: 900; color: #000; } /* --- Contact card ---------------------------------------------------------- */ .vcta { } .vcta-in { --w: 100%; --dir: column; --just: space-between; --pt: 2em; --pr: 2em; --pb: 2em; --pl: 2em; min-height: 40vh; } .vcta-title { font-family: var(--display); font-size: 4.5em; font-weight: 700; line-height: 73px; letter-spacing: -5px; color: #000; } .vcta-slot { --w: 50%; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .vcta-btn { --w: 100%; background-color: #000; cursor: pointer; transition: transform .4s; } .vcta-btn:hover { transform: translateX(10px); } .vcta-btn-t { font-family: var(--mono); font-size: 1.6em; font-weight: 900; color: var(--yellow); } /* A yellow sheen sweeping across the contact card, verbatim from the live CSS. */ .animated-yellow-bg { position: relative; overflow: hidden; } .animated-yellow-bg::before { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; pointer-events: none; background: linear-gradient(90deg, rgba(255, 222, 0, 0) 0%, rgba(255, 222, 0, .4) 25%, rgba(255, 222, 0, .8) 50%, rgba(255, 222, 0, .4) 75%, rgba(255, 222, 0, 0) 100%); animation: yellowSlide 4s linear infinite; } @keyframes yellowSlide { 0% { transform: translateX(0%); } 100% { transform: translateX(50%); } } @media (max-width: 767px) { .values-head { --rgap: 10px; --cgap: 10px; --pt: 3em; --pr: 1em; --pb: 2em; --pl: 1em; min-height: 10vh; } .values-tick { --w-mobile: 1%; } .values-dot { font-size: 1.4em; padding: 0%; } .values-head-t { --w-mobile: 89%; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .values-title { font-size: 2.5em; padding: 0%; } .vcard { --w-mobile: 100%; } .vcard-l { --rgap: 0px; --cgap: 0px; min-height: 30vh; } .vcard-num { margin: 0; text-align: end; } .vcard-tag-t { font-size: 1.4em; } .vcta-in { --just: flex-end; --rgap: 25px; --cgap: 25px; min-height: 30vh; } .vcta-title { font-size: 3em; line-height: 0em; letter-spacing: -1.7px; text-align: center; } .vcta-btn-t { font-size: 1.4em; text-align: center; } } /* --- Elementor entrance animations ---------------------------------------- `sp-anim` elements start hidden and fade into place the first time they scroll into view, matching Elementor's fadeInUp / fadeInDown / fadeInLeft. site.js adds `is-in`; the 0.5s duration is Elementor's `animated-fast`. */ .sp-anim { opacity: 0; } .sp-anim.is-in { animation-duration: .5s; animation-fill-mode: both; opacity: 1; } .sp-fade-up.is-in { animation-name: spFadeInUp; } .sp-fade-down.is-in { animation-name: spFadeInDown; } .sp-fade-left.is-in { animation-name: spFadeInLeft; } @keyframes spFadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } @keyframes spFadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } @keyframes spFadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sp-anim { opacity: 1; } .sp-anim.is-in { animation: none; } } /* ========================================================================== Video references - a two-up split of filmed client testimonials. New section, not on the live WordPress site. Drawn in the site's own language: black 1px frames, the yellow name band from the written testimonial cards, Montserrat for the name, the monospace face for everything else. Hidden outright under ?parity=1 so the coordinate harness still measures the original page. ========================================================================== */ .sp-parity .vrefs { display: none !important; } /* Side padding left at Elementor's 10px default so the cards line up with the written testimonial cards above and the heading with "Referencje". */ .vrefs { --dir: column; --pt: 4em; --pb: 2em; } .vrefs-head { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .vrefs-title { font-family: var(--display); font-size: 3.6em; font-weight: 900; } .vrefs-grid { --dir: row; --wrap: wrap; --rgap: 20px; --cgap: 20px; --pt: 20px; --pr: 0px; --pb: 0px; --pl: 0px; } .vref { /* Half the row minus half the gap - the same arithmetic the value cards use. */ --w: calc(50% - 10px); --rgap: 0px; --cgap: 0px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; background-color: #fff; border: 1px solid #000; } /* --- Media frame ---------------------------------------------------------- A fixed 4:5 box, so the poster, the preview and the empty state all occupy the same space and the page never shifts as media arrives. */ .vref-media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #000; } .vref-poster, .vref-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .vref-preview { opacity: 0; transition: opacity .35s ease; } .vref.is-playing .vref-preview { opacity: 1; } /* The whole frame is the control. */ .vref-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vref-open:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; } .vref-ring { width: 64px; height: 64px; border-radius: 999px; border: 1px solid #fff; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .vref-ring svg { width: 26px; height: 26px; margin-left: 3px; } .vref-open:hover .vref-ring, .vref-open:focus-visible .vref-ring { background: var(--yellow); border-color: #000; color: #000; transform: scale(1.06); } /* While the preview is running the ring steps back but stays as the affordance that a click opens the full clip with sound. */ .vref.is-playing .vref-ring { background: rgba(0, 0, 0, .2); transform: scale(.92); } /* --- Name band ------------------------------------------------------------ The same yellow strip the written testimonial cards use: name left, role right. */ .vref-band { --dir: row; --align: baseline; --rgap: 0px; --cgap: 10px; --pt: 10px; --pr: 20px; --pb: 10px; --pl: 20px; background-color: var(--yellow); border-top: 1px solid #000; } .vref-band > .w:first-child { flex: 0 1 auto; } .vref-band > .w:last-child { flex: 1 1 auto; text-align: end; } .vref-name { font-family: var(--display); font-size: 1em; font-weight: 900; color: #000; } .vref-role { font-family: var(--mono); font-size: .9em; font-weight: 500; line-height: 1.4; color: #000; } .vref-quote-w { padding: 20px 20px 0; } .vref-quote { margin: 0; font-family: var(--mono); font-size: 1em; font-weight: 400; line-height: 1.8em; color: #000; } .vref-src-w { padding: 14px 20px 20px; } .vref-src { font-family: var(--mono); font-size: .9em; font-weight: 500; text-transform: none; line-height: 1.2em; letter-spacing: .8px; border-radius: 50px; padding: .8em 2em; color: #000; } .vref-src:hover { background-color: #000; color: #fff; } @media (max-width: 767px) { .vrefs { --pt: 3em; --pr: 1em; --pb: 2em; --pl: 1em; } .vrefs-title { font-size: 1.4em; } .vref { --w-mobile: 100%; } .vref-quote-w { padding: 16px 16px 0; } .vref-src-w { padding: 12px 16px 16px; } /* On a phone the two halves of the band stack rather than fighting for one line. */ .vref-band { --dir: column; --align: stretch; --rgap: 2px; --pr: 16px; --pl: 16px; } .vref-band > .w:last-child { text-align: start; } } @media (max-width: 1024px) { .vrefs-title { font-size: 2em; } } /* --- Full-clip modal ------------------------------------------------------- The home page ships no lightbox (the live one does not either - Elementor's lightbox CSS is loaded but no widget uses it), so this is a small dialog of its own. Built by site.js on first use; it never exists until a card is clicked. */ .vref-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .vref-modal[hidden] { display: none; } /* Shrink-wrapped to the clip so a portrait video gets no black pillars. */ .vref-modal-inner { position: relative; width: fit-content; max-width: min(560px, 100%); border: 1px solid #000; background: #000; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); } .vref-modal video { display: block; max-height: 82vh; max-width: 100%; width: auto; height: auto; background: #000; } .vref-modal-close { position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid #000; background: var(--yellow); color: #000; font: 700 22px/1 var(--mono); cursor: pointer; } .vref-modal-close:hover { background: #000; color: var(--yellow); border-color: var(--yellow); } @media (max-width: 767px) { .vref-modal { padding: 14px; } .vref-modal-close { top: -14px; right: -6px; width: 38px; height: 38px; font-size: 19px; } } /* No hover on a phone and none under reduced motion: the poster and the ring are the whole resting state, and a tap goes straight to the full clip. */ @media (prefers-reduced-motion: reduce) { .vref-preview { display: none; } .vref-ring { transition: none; } } /* ========================================================================== Footer - scrolling headline, outlined wordmark, four link columns, the yellow quote bar and the credit line. ========================================================================== */ .sp-footer { position: relative; z-index: 1; } /* --- Scrolling headline ---------------------------------------------------- */ .fmarquee { --dir: column; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; --cw: 100%; margin: 50px 0 0; } .fmarquee-in { --dir: column; --rgap: 0px; --cgap: 0px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; --w: 100%; } .fmarquee .w { margin: 0% 0% 3% 0%; } .marquee { overflow: hidden; width: 100%; box-sizing: border-box; display: flex; flex-wrap: nowrap; } .marquee__content { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5rem; white-space: nowrap; animation: scroll 12s linear infinite; min-width: 200%; } .marquee__content span { display: inline-block; font-family: var(--display) !important; font-weight: 900 !important; font-size: 12vw; line-height: .9; color: #000; text-shadow: -1px -1px 0 #101820, 0 -1px 0 #101820, 1px -1px 0 #101820, 1px 0 0 #101820, 1px 1px 0 #101820, 0 1px 0 #101820, -1px 1px 0 #101820, -1px 0 0 #101820; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 768px) { .marquee__content { gap: 2.5rem; animation: scroll 12.8s linear infinite; min-width: 220%; } .marquee__content span { font-size: 8.8vw; text-shadow: none; } } @media (max-width: 767px) { .fmarquee { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; margin: 0; } .fmarquee-in { --w-mobile: 100%; --pt: 0%; --pr: 0%; --pb: 0%; --pl: 0%; } .fmarquee .w { margin: -5% 0% 5% 0%; } } /* --- Outlined wordmark band ------------------------------------------------ */ .flogo { --dir: column; --just: flex-end; min-height: 40vh; background-color: #000; } .flogo-w img { width: 100%; max-width: 100%; display: block; } /* --- Link columns, quote bar, credit --------------------------------------- */ .fmain { --dir: column; --just: center; --rgap: 0px; --cgap: 0px; --pt: 3%; --pr: 3%; --pb: 3%; --pl: 3%; min-height: 70vh; background-color: #000; } .fcols { --dir: row; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; margin: 40px 0 50px; } .fcol { --dir: column; --just: flex-end; --rgap: 20px; --cgap: 20px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .fcol-a { --w: 20%; --align: flex-start; } .fcol-a > .w { text-align: left; } .fcol-b > .w, .fcol-c > .w, .fcol-d > .w { text-align: right; } .fbar-l > .w { text-align: left; } .fcol-b { --w: 20%; --align: flex-end; } .fcol-c { --w: 30%; --align: flex-end; } .fcol-d { --w: 30%; --align: flex-end; } .flink { font-family: var(--mono); font-size: 1em; font-weight: 500; text-transform: none; line-height: 1.5em; letter-spacing: .6px; color: rgba(255, 255, 255, .59); border: 0; border-radius: 0; padding: 0; transition: transform .3s; } .fcol .w:hover .flink { transform: translateY(-4px); } .flink:hover { color: var(--yellow); } .fbar { --dir: row; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; background-color: var(--yellow); } .fbar-l { --just: flex-end; --pt: 20px; --pr: 20px; --pb: 20px; --pl: 20px; background-color: var(--yellow); } .fbar-r { --just: center; --align: flex-end; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .fbar-social { --dir: row; --just: flex-end; } .fcta { font-family: var(--mono); font-size: 21px; font-weight: 500; text-transform: uppercase; line-height: 1.5em; color: #000; border: 0; border-radius: 0; padding: 0; } .fcta-in { display: flex; gap: 5px; } .fcta-icon { display: flex; align-items: center; } /* The icon scales with the button, as Elementor's own button icon does. */ .fcta-icon svg { width: 1em; height: 1em; display: block; } .fsocial { font-family: var(--mono); font-size: 1em; font-weight: 600; text-transform: none; line-height: 1; color: #000; border: 0; border-radius: 0; padding: 0; } .fcredit { } .fcredit-t { font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .6px; line-height: 1; color: #a4a4a4; text-align: center; margin: 20px 0 0; transition: transform .3s; } .fcredit-t a { color: inherit; } .fcredit .w:hover .fcredit-t { transform: translateY(-8px); } /* --- 404 ------------------------------------------------------------------- The live 404 template is an empty yellow band and two empty spacers. */ .nf-band { --dir: column; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; } .nf-panel { --w: 100%; --just: flex-end; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; min-height: 45vh; border-radius: 0 50px 0 0; /* Yellow at 12% alpha, as declared - the solid yellow look comes from the animated sheen painted over it. */ background-color: #ffe5001f; } .nf-spacer { --dir: column; --cw: min(100%, 850px); } @media (max-width: 767px) { .nf-panel { min-height: 30vh; } } /* --- Responsive type, last so it beats the base rules above ---------------- */ @media (max-width: 1024px) { .flink, .fcta { font-size: 15px; } } @media (max-width: 767px) { .flink, .fcta { font-size: 14px; } } /* Mobile overrides last, so they beat the base rules above. */ @media (max-width: 767px) { /* The live buttons carry `elementor-mobile-align-center`. */ .fcol > .w, .fbar-l > .w { text-align: center; } .fbar { --dir: column; } .fbar-r { --align: center; } .fbar-social { --just: center; --rgap: 40px; --cgap: 40px; } .fcol { --align: center; } } /* ========================================================================== Elementor's mobile container rules, applied last so they beat every band. Two behaviours the live site gets for free and a hand-written stylesheet does not: 1. Every container width Elementor writes (`--width: 50%` and friends) is declared INSIDE `@media (min-width: 768px)`. Below that breakpoint the variable is simply absent and the container falls back to 100%, which is why the whole site stacks on a phone. `--w-mobile` is the escape hatch for the handful of containers the live site does give an explicit phone width. 2. `.e-con.e-flex` sets `--flex-wrap: var(--flex-wrap-mobile)` below 768, and `--flex-wrap-mobile` defaults to `wrap` - so every row wraps on a phone unless it opts out. `--wrap-mobile` is that opt-out. ========================================================================== */ @media (max-width: 767px) { .c, .cf { --w: var(--w-mobile, 100%); } .cf, .c > .ci { flex-wrap: var(--wrap-mobile, wrap); } }