/* ========================================================================== Ledomar International Private Limited — site stylesheet Design system: "Modernist" tokens (Archivo, flat, navy accent). ========================================================================== */ /* The font is linked from each page's , not @import-ed here: an @import is only discovered after this file has downloaded and parsed, so the font request queued behind it instead of running alongside it. */ :root { --color-bg: #ffffff; --color-surface: #f4f6fa; --color-text: #16202c; --color-muted: #5c6675; /* body copy / secondary text */ --color-accent: #14448c; --color-accent-2: #14448c; --color-divider: color-mix(in srgb, #14448c 16%, transparent); --color-hairline: color-mix(in srgb, #14448c 10%, transparent); --color-accent-100: #eef3fa; --color-accent-200: #d6e2f2; --color-accent-300: #adc4e4; --color-accent-400: #7096cf; --color-accent-500: #2f63ad; --color-accent-600: #10386f; --color-accent-700: #0c2c58; --color-accent-800: #091f3e; --color-accent-900: #061428; --color-neutral-100: #f7f8fa; --color-neutral-200: #eceef2; --color-neutral-300: #d9dde4; --color-neutral-400: #b6bcc7; --color-neutral-500: #8d95a3; --color-neutral-600: #6b7382; --color-neutral-700: #4d5462; --color-neutral-800: #2f3743; --color-neutral-900: #16202c; --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --shadow-sm: 0 1px 2px color-mix(in srgb, #16202c 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #16202c 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #16202c 22%, transparent); --maxw: 1440px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* keep in-page anchors clear of the sticky header (JS measures the real height into --header-h; the fallback covers the pre-script paint) */ scroll-padding-top: calc(var(--header-h, 92px) + var(--space-5)); } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 var(--space-2); text-wrap: balance; } h1 { font-size: 42px; letter-spacing: -0.032em; } h2 { font-size: 32px; letter-spacing: -0.028em; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } a:hover { color: var(--color-accent-700); } img { display: block; max-width: 100%; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-6); } .text-muted { color: var(--color-muted); } /* kicker: small caps label with a short leading rule */ .kicker { display: flex; align-items: center; gap: 11px; color: var(--color-accent); margin: 0 0 var(--space-4); font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; } .kicker::before { content: ""; width: 26px; height: 2px; background: var(--color-accent); flex: none; } .section-head.reveal .kicker::before { transform-origin: left; } .accent { color: var(--color-accent); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); letter-spacing: 0.06em; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease; } .btn svg { display: block; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-600); color: #fff; } .btn-primary:active { background: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); color: var(--color-text); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-lg { font-size: 15px; padding: var(--space-3) var(--space-6); } .btn-block { width: 100%; margin-top: var(--space-2); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); border: 1px solid var(--color-divider); } /* — forms — */ .field { position: relative; } .field > label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; color: color-mix(in srgb, var(--color-text) 62%, transparent); transition: color .2s ease; } .field:focus-within > label { color: var(--color-accent); } .input { width: 100%; min-height: 48px; padding: 12px 15px; font: inherit; font-size: 15px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-bg); border: 1px solid var(--color-divider); border-bottom-width: 2px; transition: border-color .2s ease, box-shadow .22s ease, background .2s ease; } .input::placeholder { color: color-mix(in srgb, var(--color-text) 34%, transparent); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 32%, transparent); } .input:focus, .input:focus-visible { outline: none; background: #fff; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent); } textarea.input { min-height: 118px; resize: vertical; line-height: 1.6; } input[type="date"].input { color: color-mix(in srgb, var(--color-text) 78%, transparent); } input[type="file"].input { padding: 10px 12px; font-size: 13.5px; background: var(--color-surface); cursor: pointer; } input[type="file"].input::file-selector-button { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-right: 14px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-accent); transition: background .2s ease, color .2s ease, border-color .2s ease; } input[type="file"].input::file-selector-button:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-3); border-bottom: 2px solid var(--color-divider); } .table td { padding: var(--space-3); border-bottom: 1px solid var(--color-divider); vertical-align: top; } .table td.k { font-family: var(--font-heading); font-weight: 800; width: 260px; } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* ── site header shell ─────────────────────────────────────────────────── #site-header is the wrapper the JS fills; it is what actually sticks. (The inner
used to carry position:sticky, but a sticky element can only travel inside its own parent — so it scrolled away with the wrapper on every page except home, where the .overlay rule made the wrapper fixed.) */ #site-header { position: sticky; top: 0; z-index: 70; } /* ── top contact bar ─────────────────────────────────────────────────── */ .topbar { background: var(--color-accent-900); color: var(--color-neutral-100); font-size: 13.5px; font-weight: 500; letter-spacing: 0.03em; /* 1fr → 0fr collapses the bar to nothing on scroll, and animates */ display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, background .3s ease; } .topbar > .container { /* grid items default to min-height:auto — without min-height:0 the row cannot collapse to 0fr and the bar leaves a stub behind */ overflow: hidden; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding-top: 11px; padding-bottom: 11px; transition: padding .32s cubic-bezier(.4, 0, .2, 1); } .topbar a { color: inherit; text-decoration: none; position: relative; transition: color .18s ease; } .topbar a:hover { color: var(--color-accent-300); } .topbar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .24s cubic-bezier(.4, 0, .2, 1); } .topbar a:hover::after { transform: scaleX(1); } .topbar .welcome { text-transform: uppercase; letter-spacing: 0.11em; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--color-neutral-100) 68%, transparent); margin-right: auto; } /* The bar sheds items as it narrows so it always stays one line — a wrapped contact bar made the sticky header 218px tall on a phone. Everything hidden here is still in the footer, and the floating WhatsApp button is always up. */ @media (max-width: 1320px) { .topbar .welcome { display: none; } .topbar > .container { justify-content: flex-end; } } @media (max-width: 1050px) { .topbar .tb-wa2 { display: none; } } @media (max-width: 860px) { .topbar .tb-tel { display: none; } } @media (max-width: 680px) { .topbar .tb-wa { display: none; } .topbar { font-size: 12.5px; } } @media (max-width: 460px) { .topbar .tb-mail { display: none; } .topbar > .container { justify-content: center; } } /* ── header bar ──────────────────────────────────────────────────────── */ .site-header { background: var(--color-bg); border-bottom: 1px solid var(--color-divider); transition: box-shadow .28s ease, border-color .28s ease, background .3s ease; } .header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); transition: padding .28s cubic-bezier(.4, 0, .2, 1); } /* brand lockup */ .brand { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; color: inherit; margin-right: auto; } .brand img { height: 52px; width: auto; display: block; transition: height .28s cubic-bezier(.4, 0, .2, 1), filter .3s ease; } .brand .b-name { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 23px; letter-spacing: -0.025em; line-height: 1.02; transition: color .3s ease; } .brand .b-sub { display: block; margin-top: 3px; overflow: hidden; font-size: 11.5px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; /* the cap exists so the line can collapse to 0 on scroll; 20px clipped the tagline where it wraps to two lines on a narrow screen */ color: var(--color-muted); max-height: 40px; transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease, color .3s ease; } .brand:hover .b-name { color: var(--color-accent); } /* ── main navigation ─────────────────────────────────────────────────── */ .main-nav { display: flex; align-items: center; gap: var(--space-5); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; } .main-nav > a, .mega-trigger { position: relative; padding: 7px 0; white-space: nowrap; transition: color .18s ease; } .main-nav a { color: inherit; text-decoration: none; } .main-nav > a::after, .mega-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.4, 0, .2, 1); } .main-nav > a:hover::after, .mega-trigger:hover::after, .has-mega:hover .mega-trigger::after, .main-nav > a[aria-current="page"]::after { transform: scaleX(1); } .main-nav > a:hover, .mega-trigger:hover, .main-nav > a[aria-current="page"] { color: var(--color-accent); } .has-mega { position: relative; } /* invisible bridge so the pointer can cross the gap into the panel */ .has-mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px; } .mega-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: 0; font: inherit; color: inherit; } .mega-trigger svg { transition: transform .24s ease; } .has-mega:hover .mega-trigger svg, .mega-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } /* ── products mega panel ─────────────────────────────────────────────── */ .mega { /* anchored to the bottom of the header bar rather than to the trigger, so the panel always sits flush beneath it — including in the compact state, where the header is 70px shorter (--header-h is measured by site.js) */ position: fixed; top: var(--header-h, 92px); left: 50%; transform: translateX(-50%) translateY(-8px); width: min(1040px, calc(100vw - 48px)); background: var(--color-bg); border: 1px solid var(--color-divider); border-top: 3px solid var(--color-accent); padding: var(--space-6) var(--space-6) var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0 var(--space-8); box-shadow: 0 26px 60px -26px color-mix(in srgb, var(--color-accent-900) 55%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .22s cubic-bezier(.4, 0, .2, 1), visibility .22s; z-index: 80; } .has-mega:hover .mega, .mega.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega a { display: block; color: var(--color-text); font-weight: 500; font-size: 13.5px; text-decoration: none; text-shadow: none; padding: 8px 10px; margin: 0 -10px; border-radius: 3px; border-bottom: 1px solid var(--color-hairline); transition: background .16s ease, color .16s ease, padding-left .18s cubic-bezier(.4, 0, .2, 1); } .mega a:hover { background: var(--color-accent-100); color: var(--color-accent); padding-left: 16px; } .mega a.mega-feature { color: var(--color-accent); font-weight: 800; letter-spacing: 0.02em; border-bottom: 0; margin-top: var(--space-2); } .mega a.mega-feature:first-of-type { border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-3); } .burger { display: none; width: 46px; height: 46px; padding: 0; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease, border-color .18s ease; } /* ── mobile nav ──────────────────────────────────────────────────────── */ .mobile-nav { display: none; border-top: 1px solid var(--color-divider); background: var(--color-bg); /* never taller than the space the sticky header leaves */ max-height: calc(100dvh - var(--header-h, 120px)); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg); } .mobile-nav.open { display: block; } .mobile-nav .container { padding-top: var(--space-4); padding-bottom: var(--space-6); } .mobile-nav a, .mobile-nav .m-prod-toggle { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-divider); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; cursor: pointer; transition: color .16s ease, padding-left .16s ease; } .mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--color-accent); padding-left: 6px; } .mobile-nav .m-sub { display: none; padding: var(--space-2) 0 var(--space-2) var(--space-4); } .mobile-nav .m-sub.open { display: block; } .mobile-nav .m-sub a { font-size: 14px; font-weight: 600; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-hairline); } /* Ten nav items plus the full wordmark do not fit between 1181px (where the burger takes over) and ~1340px, so the lockup and nav tighten in that band rather than wrapping onto a second row. Placed after the base rules — a media query adds no specificity, so source order decides. */ @media (min-width: 1181px) and (max-width: 1340px) { .brand { gap: var(--space-3); } .brand img { height: 44px; } .brand .b-name { font-size: 18.5px; } .brand .b-sub { font-size: 10px; letter-spacing: 0.13em; } .main-nav { gap: 13px; font-size: 13px; } } /* ── compact state — every page, once the page has scrolled ──────────── */ #site-header.is-scrolled .topbar { grid-template-rows: 0fr; opacity: 0; } /* box-sizing:border-box floors the row at its own padding, so drop that too */ #site-header.is-scrolled .topbar > .container { padding-top: 0; padding-bottom: 0; } #site-header.is-scrolled .site-header { border-bottom-color: transparent; box-shadow: 0 6px 28px -14px color-mix(in srgb, var(--color-accent-900) 42%, transparent); } #site-header.is-scrolled .header-inner { padding-top: var(--space-2); padding-bottom: var(--space-2); } #site-header.is-scrolled .brand img { height: 42px; } #site-header.is-scrolled .brand .b-sub { max-height: 0; opacity: 0; margin-top: 0; } /* ── overlay header (home): transparent over the hero, solid on scroll ─ */ #site-header.overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: linear-gradient(180deg, rgba(6,15,30,.72) 0%, rgba(6,15,30,.40) 55%, rgba(6,15,30,.05) 100%); transition: background .3s ease, box-shadow .3s ease; } #site-header.overlay .topbar { background: transparent; } #site-header.overlay .site-header { background: transparent; border-bottom-color: transparent; } #site-header.overlay .topbar a:hover { color: #fff; } #site-header.overlay .brand .b-name { color: #fff; } #site-header.overlay .brand:hover .b-name { color: var(--color-accent-300); } #site-header.overlay .brand .b-sub { color: rgba(255,255,255,.72); } /* over the hero the navy mark is rendered white so it reads on the video */ #site-header.overlay .brand img { filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(0,0,0,.5)); } #site-header.overlay .main-nav > a, #site-header.overlay .mega-trigger { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); } #site-header.overlay .main-nav > a:hover, #site-header.overlay .mega-trigger:hover, #site-header.overlay .main-nav > a[aria-current="page"] { color: var(--color-accent-300); } #site-header.overlay .burger { color: #fff; border-color: rgba(255,255,255,.55); } /* scrolled → solid white, brand & nav dark and crisp */ #site-header.overlay.is-scrolled { background: var(--color-bg); box-shadow: var(--shadow-md); } #site-header.overlay.is-scrolled .site-header { box-shadow: none; } #site-header.overlay.is-scrolled .brand .b-name { color: var(--color-text); } #site-header.overlay.is-scrolled .brand:hover .b-name { color: var(--color-accent); } #site-header.overlay.is-scrolled .brand img { filter: none; } #site-header.overlay.is-scrolled .main-nav > a, #site-header.overlay.is-scrolled .mega-trigger { color: var(--color-text); text-shadow: none; } #site-header.overlay.is-scrolled .main-nav > a:hover, #site-header.overlay.is-scrolled .mega-trigger:hover, #site-header.overlay.is-scrolled .main-nav > a[aria-current="page"] { color: var(--color-accent); } #site-header.overlay.is-scrolled .burger { color: var(--color-text); border-color: var(--color-divider); } /* ── sections ────────────────────────────────────────────────────────── */ .section { border-bottom: 2px solid var(--color-divider); } .section.pad { padding: calc(var(--space-8) * 2.5) 0; } .section.surface { background: var(--color-surface); } .section-head { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-6); margin-bottom: calc(var(--space-8) * 1.5); } /* measure wide enough for two comfortable lines; 20ch forced short, ragged three-line headings with a large empty gap on the right */ .section-head h2 { font-size: clamp(29px, 3.3vw, 44px); letter-spacing: -0.022em; line-height: 1.18; margin: 0 0 var(--space-6); max-width: 38ch; } .section-head > p, .section-head .text-muted { font-size: 16px; line-height: 1.7; } .section-head h2.nomargin { margin-bottom: 0; } /* ── hero ────────────────────────────────────────────────────────────── */ .hero { position: relative; border-bottom: 2px solid var(--color-divider); } .hero .hero-bg { position: absolute; inset: 0; } .hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-neutral-900) 88%, transparent) 0%, color-mix(in srgb, var(--color-neutral-900) 62%, transparent) 58%, color-mix(in srgb, var(--color-neutral-900) 35%, transparent) 100%); } .hero .container { position: relative; padding-top: calc(var(--space-8) * 3); padding-bottom: calc(var(--space-8) * 3); } .hero-inner { max-width: 900px; animation: rise .7s ease both; } .hero-eyebrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .hero-eyebrow span.line { width: 56px; height: 2px; background: var(--color-accent-400); } .hero-eyebrow span.txt { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-neutral-200); } .hero h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.028em; color: var(--color-neutral-100); margin: 0 0 var(--space-6); max-width: 22ch; text-wrap: balance; } .hero p.lead { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; max-width: 720px; color: var(--color-neutral-200); margin: 0 0 var(--space-8); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); animation: rise .7s .15s ease both; } .hero .btn-ghost-light { border-color: var(--color-neutral-300); color: var(--color-neutral-100); } .hero .btn-ghost-light:hover { background: color-mix(in srgb, #fff 12%, transparent); } .hero .note { margin: var(--space-8) 0 0; font-size: 13px; color: var(--color-neutral-300); border-top: 1px solid color-mix(in srgb, var(--color-neutral-100) 30%, transparent); padding-top: var(--space-3); max-width: 560px; } /* page hero (inner pages) */ .page-hero { border-bottom: 2px solid var(--color-divider); } .page-hero .container { padding-top: calc(var(--space-8) * 2.5); padding-bottom: calc(var(--space-8) * 1.5); } /* 74px against an 18ch measure broke long titles into four short, ragged lines ("Marine supply across India, the UAE, Singapore & the Suez Canal"). 56px on a 26ch measure settles every page hero at one or two full lines. */ .page-hero h1 { font-size: clamp(33px, 4vw, 56px); line-height: 1.08; letter-spacing: -0.026em; margin: 0 0 var(--space-6); max-width: 28ch; } .page-hero p { font-size: 18px; line-height: 1.65; max-width: 62ch; margin: 0; color: var(--color-muted); } /* ── cinematic hero ──────────────────────────────────────────────────── */ .hero.cinematic { overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .hero.cinematic .container { width: 100%; padding-top: calc(var(--space-8) * 3.5); padding-bottom: calc(var(--space-8) * 4); z-index: 4; } /* full-screen background video — object-fit cover fills any ratio, no bars */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: var(--color-neutral-900); pointer-events: none; transition: opacity .8s ease; } /* 3D cube-break slideshow */ .hero-cube { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: grid; grid-template-columns: repeat(var(--cols, 8), 1fr); grid-template-rows: repeat(var(--rows, 4), 1fr); perspective: 1600px; background: var(--color-neutral-900); /* seam colour during flips */ opacity: 0; transition: opacity .8s ease; /* crossfades with the video slide */ } .hero-cube.show { opacity: 1; } .tile { position: relative; transform-style: preserve-3d; } .tile.pop { animation: tilePop 1.15s cubic-bezier(.62, 0, .2, 1) both; } /* 3D lift as it flips */ .tile-inner { position: absolute; inset: -0.5px; /* hairline overlap hides seams */ transform-style: preserve-3d; will-change: transform; transition: transform 1.15s cubic-bezier(.62, 0, .2, 1); } .tile.ax-y.flip .tile-inner { transform: rotateY(180deg); } .tile.ax-x.flip .tile-inner { transform: rotateX(180deg); } .face { position: absolute; inset: 0; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: brightness(1.07) contrast(1.03) saturate(1.06); /* lift the photo */ } .tile.ax-y .face.back { transform: rotateY(180deg); } .tile.ax-x .face.back { transform: rotateX(180deg); } .hero.cinematic .hero-overlay { z-index: 2; pointer-events: none; background: linear-gradient(96deg, rgba(8,18,36,.60) 0%, rgba(8,18,36,.32) 38%, rgba(8,18,36,.08) 66%, rgba(8,18,36,0) 100%), linear-gradient(0deg, rgba(8,18,36,.42) 0%, rgba(8,18,36,0) 42%); } /* keep white text crisp on the brighter image */ .hero.cinematic h1 { text-shadow: 0 2px 20px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); } .hero.cinematic .lead, .hero.cinematic .hero-eyebrow .txt, .hero.cinematic .note { text-shadow: 0 1px 12px rgba(0,0,0,.55); } /* moving light sweep */ .hero-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, #cfe4ff 65%, transparent) 48%, transparent 62%); background-size: 260% 100%; background-repeat: no-repeat; animation: sheen 9s ease-in-out 1.2s infinite; } /* drifting particles */ .hero-particles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; } .hero-particles span { position: absolute; bottom: -10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, #dff0ff 90%, transparent), color-mix(in srgb, var(--color-accent-400) 60%, transparent)); opacity: 0; filter: blur(0.4px); animation: floatUp linear infinite; } /* animated waves at the bottom */ .hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; height: 130px; pointer-events: none; } .hero-waves svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; } .hero-waves .wave-a { animation: waveShift 14s linear infinite; opacity: .5; } .hero-waves .wave-b { animation: waveShift 22s linear infinite reverse; opacity: .32; } .hero-waves .wave-c { animation: waveShift 30s linear infinite; opacity: .2; } /* slide indicator dots */ .hero-dots { position: absolute; z-index: 4; bottom: calc(var(--space-8) * 1.4); left: 0; right: 0; pointer-events: none; } .hero-dots .container { display: flex; align-items: flex-end; gap: var(--space-3); padding-top: 0; padding-bottom: 0; pointer-events: none; } .hero-dots button { pointer-events: auto; } .hero-dots button { width: 40px; height: 4px; padding: 0; border: 0; cursor: pointer; background: color-mix(in srgb, #fff 35%, transparent); position: relative; overflow: hidden; } .hero-dots button::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--color-accent-400); } .hero-dots button.active::after { width: 100%; transition: width 6s linear; } /* scroll cue */ .hero-scroll { position: absolute; z-index: 4; right: var(--space-8); bottom: calc(var(--space-8) * 1.2); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-neutral-200); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } .hero-scroll .m { width: 22px; height: 34px; border: 2px solid color-mix(in srgb, #fff 55%, transparent); border-radius: 12px; position: relative; } .hero-scroll .m::before { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: scrollDot 1.8s ease-in-out infinite; } /* staggered text reveal */ .hero.cinematic .hero-inner > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; } .hero.cinematic .hero-eyebrow { animation-delay: .15s; } .hero.cinematic h1 { animation-delay: .3s; } .hero.cinematic .lead { animation-delay: .5s; } .hero.cinematic .hero-actions { animation-delay: .68s; } .hero.cinematic .note { animation-delay: .85s; } @keyframes sheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } } @keyframes floatUp { 0% { opacity: 0; transform: translateY(0) translateX(0) scale(1); } 12% { opacity: .55; } 88% { opacity: .4; } 100% { opacity: 0; transform: translateY(-96vh) translateX(24px) scale(.6); } } @keyframes waveShift { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollDot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } } @keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.09); } } @keyframes tilePop { 0% { transform: translateZ(0) scale(1); } 45% { transform: translateZ(52px) scale(1.06); } 100% { transform: translateZ(0) scale(1); } } @media (max-width: 760px) { .hero.cinematic { min-height: 86vh; } .hero-scroll { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-cube { animation: none !important; } .tile-inner { transition: none !important; } .tile.pop { animation: none !important; } .hero-sheen, .hero-particles, .hero-waves .wave-a, .hero-waves .wave-b, .hero-waves .wave-c, .hero-scroll .m::before { animation: none !important; } .hero-dots button.active::after { transition: none; } } /* ── stats ───────────────────────────────────────────────────────────── */ .stats { border-bottom: 2px solid var(--color-divider); background: var(--color-bg); } .stats .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-neutral-200); } .stat { position: relative; background: var(--color-bg); padding: calc(var(--space-8) * 1.25) var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); transition: background .22s ease; } .stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .stat:hover { background: var(--color-accent-100); } .stat:hover::after { transform: scaleX(1); } .stat-ic { width: 48px; height: 48px; display: grid; place-items: center; flex: none; background: var(--color-accent-100); color: var(--color-accent); transition: background .22s ease, color .22s ease; } .stat-ic svg { width: 24px; height: 24px; display: block; } .stat:hover .stat-ic { background: var(--color-accent); color: #fff; } .stat .v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.02em; line-height: 1; color: var(--color-text); } .stat .l { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); } /* ── product grid ────────────────────────────────────────────────────── */ .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .prod-card { display: block; text-decoration: none; color: inherit; border: 2px solid var(--color-divider); background: var(--color-bg); transition: box-shadow .2s ease, transform .2s ease; } .prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .prod-card .media { aspect-ratio: 16 / 9; overflow: hidden; } .prod-card .media img { width: 100%; height: 100%; object-fit: cover; } .prod-card .media.placeholder { background: repeating-linear-gradient(135deg, var(--color-accent-100) 0 12px, var(--color-accent-200) 12px 24px); display: grid; place-items: center; } .prod-card .media.placeholder span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 800; } .prod-card .body { padding: var(--space-6); border-top: 2px solid var(--color-divider); } .prod-card .idx { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); } .prod-card h4 { margin: var(--space-2) 0 var(--space-3); font-size: 21px; letter-spacing: -0.015em; } .prod-card p { margin: 0 0 var(--space-6); font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .prod-card .more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; color: var(--color-accent-700); } /* ── split (about teaser) ────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .split .media { position: relative; border-right: 2px solid var(--color-divider); overflow: hidden; } .split .media img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; display: block; } .split .media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(165deg, rgba(20,68,140,.16) 0%, rgba(6,15,30,.42) 100%); } .media-badge { position: absolute; left: 0; bottom: calc(var(--space-8) * 1.6); z-index: 2; max-width: 312px; background: var(--color-accent); color: #fff; padding: var(--space-5) var(--space-6); box-shadow: 0 18px 44px rgba(6, 15, 30, .34); } .media-badge .mb-k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .78; } .media-badge .mb-v { font-family: var(--font-heading); font-weight: 800; font-size: 27px; line-height: 1.08; letter-spacing: -.022em; margin-top: 7px; } .media-badge .mb-s { font-size: 13px; line-height: 1.5; margin-top: 8px; opacity: .86; } .split .content { padding: calc(var(--space-8) * 2.5) 0 calc(var(--space-8) * 2.5) calc(var(--space-8) * 1.5); } .split .content .p-lead { margin: 0 0 var(--space-5); font-size: 17.5px; line-height: 1.62; color: var(--color-text); max-width: 630px; } .split .content p { font-size: 15.5px; line-height: 1.72; max-width: 630px; color: color-mix(in srgb, var(--color-text) 74%, transparent); } .about-points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-7) 0; max-width: 630px; } .about-points div { display: flex; gap: var(--space-3); align-items: center; font-size: 14.5px; font-weight: 600; background: var(--color-surface); border-left: 3px solid var(--color-accent-300); padding: var(--space-3) var(--space-4); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .about-points div:hover { background: var(--color-accent-100); border-left-color: var(--color-accent); transform: translateX(3px); } .about-points .tick { flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%; background: var(--color-accent); color: #fff; display: grid; place-items: center; } .about-creds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-7); max-width: 630px; } .about-creds span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--color-divider); background: var(--color-bg); padding: 7px 13px; color: color-mix(in srgb, var(--color-text) 66%, transparent); } /* ── why us ──────────────────────────────────────────────────────────── */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .why-item { position: relative; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-divider); padding: var(--space-7) var(--space-6); transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; } .why-item::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .why-item:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-md); transform: translateY(-4px); } .why-item:hover::before { transform: scaleX(1); } .why-item .num { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; color: var(--color-accent); } .why-item h4 { margin: var(--space-3) 0; font-size: 21px; letter-spacing: -0.015em; } .why-item p { margin: 0; font-size: 15px; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 72%, transparent); max-width: none; } /* ── services ────────────────────────────────────────────────────────── */ /* ── services ────────────────────────────────────────────────────────── */ .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); background: none; } .svc-item { position: relative; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-divider); padding: var(--space-6) var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1); } .svc-item::before { /* accent bar that draws in on hover */ content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-400) 100%); transform: scaleY(0); transform-origin: top; transition: transform .38s cubic-bezier(.22,1,.36,1); } .svc-item:hover { border-color: var(--color-accent-300); box-shadow: 0 16px 38px rgba(16, 32, 64, .12); transform: translateY(-5px); } .svc-item:hover::before { transform: scaleY(1); } .svc-item .svc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .svc-item .svc-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--color-accent-100); color: var(--color-accent); transition: background .28s ease, color .28s ease, transform .38s cubic-bezier(.22,1,.36,1); } .svc-item:hover .svc-ic { background: var(--color-accent); color: #fff; transform: translateY(-2px) rotate(-6deg); } .svc-item .svc-n { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--color-accent); opacity: .32; transition: opacity .28s ease; } .svc-item:hover .svc-n { opacity: .7; } .svc-item h4 { margin: 0; font-size: 17px; letter-spacing: -0.018em; line-height: 1.25; transition: color .25s ease; } .svc-item:hover h4 { color: var(--color-accent); } .svc-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--color-muted); } @media (max-width: 1180px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .svc-item:hover { transform: none; } .svc-item:hover .svc-ic { transform: none; } } /* ── CTA band ────────────────────────────────────────────────────────── */ .cta-band { background: var(--color-accent); color: #fff; border-bottom: 2px solid var(--color-divider); } .cta-band .container { padding-top: calc(var(--space-8) * 2); padding-bottom: calc(var(--space-8) * 2); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: end; } .cta-band h2 { font-size: clamp(32px, 4.2vw, 60px); letter-spacing: -0.025em; line-height: 1.06; margin: 0 0 var(--space-6); color: #fff; max-width: 19ch; } .cta-band p { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; max-width: 720px; margin: 0; color: #fff; } .cta-actions { display: flex; flex-direction: column; gap: var(--space-3); } .cta-actions .btn { justify-content: flex-start; } .cta-actions .btn.dark { background: var(--color-neutral-900); color: var(--color-neutral-100); } .cta-actions .btn.dark:hover { background: #000; } .cta-actions .btn.outline { border-color: #fff; color: #fff; } .cta-actions .btn.outline:hover { background: color-mix(in srgb, #fff 15%, transparent); } /* ── ports ───────────────────────────────────────────────────────────── */ .ports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-divider); } .port-cell { background: var(--color-bg); padding: var(--space-6); } .port-cell .n { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; } .port-cell .s { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 4px; } .port-cell .tag { margin-top: var(--space-3); } /* ports page — summary strip, region groups, port cards */ .ports-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid var(--color-divider); } .ports-summary .s { padding: var(--space-8) var(--space-6); border-left: 2px solid var(--color-divider); } .ports-summary .s:first-child { border-left: 0; } .ports-summary .v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1; color: var(--color-accent-700); } .ports-summary .l { margin-top: var(--space-2); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); } .port-region { padding: calc(var(--space-8) * 2) 0; } .port-region:nth-child(even) { background: var(--color-surface); } .region-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-bottom: 2px solid var(--color-divider); padding-bottom: var(--space-6); margin-bottom: calc(var(--space-8) * 1.2); } .region-head h2 { font-size: clamp(24px, 2.8vw, 40px); letter-spacing: -0.025em; margin: 0; } .region-head .region-count { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); border: 1px solid var(--color-divider); padding: 6px 14px; white-space: nowrap; } .port-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); } .port-card { position: relative; border: 1px solid var(--color-divider); background: var(--color-bg); padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; overflow: hidden; transition: border-color .18s ease, box-shadow .2s ease, transform .2s ease; } .port-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-accent); transform: scaleY(0); transform-origin: top; transition: transform .22s ease; } .port-card:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-md); transform: translateY(-3px); } .port-card:hover::before { transform: scaleY(1); } .port-card .pin { width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent-100); color: var(--color-accent); display: grid; place-items: center; margin-bottom: var(--space-3); } .port-card:hover .pin { background: var(--color-accent); color: #fff; } .port-card .pname { font-family: var(--font-heading); font-weight: 800; font-size: 18px; letter-spacing: -0.015em; line-height: 1.2; } .port-card .psub { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .port-card .pnote { margin-top: var(--space-3); } .tag-accent { background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent); } .tag-outline { background: transparent; color: var(--color-accent-700); border: 1px solid var(--color-accent-400); } /* ── interactive coverage map ────────────────────────────────────────── */ .map-wrap { position: relative; max-width: 800px; margin: 0 auto; } .map-stage { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--color-divider); background: linear-gradient(180deg, #eaf6fd 0%, #d3ecf8 55%, #bfe3f4 100%); cursor: crosshair; } .map-svg { width: 100%; height: 100%; display: block; } .land path { fill: #e7ebf1; stroke: #cbd5e2; stroke-width: 0.8; stroke-linejoin: round; stroke-linecap: round; } .land path.land-active { fill: #ffffff; stroke: #9fb6d6; stroke-width: 1; } .map-pins { position: absolute; inset: 0; pointer-events: none; } .map-pin { position: absolute; width: 0; height: 0; } .pin-mark { position: absolute; left: 0; top: 0; width: 17px; height: 23px; transform: translate(-50%, -100%); color: var(--color-accent); pointer-events: auto; transition: transform .15s ease; } .pin-mark svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(9,20,40,.4)); } .map-pin.head .pin-mark { width: 22px; height: 30px; color: #c99700; } .map-pin.special .pin-mark { color: #e07a1f; } .map-pin:hover { z-index: 6; } .map-pin:hover .pin-mark { transform: translate(-50%, -100%) scale(1.18); } .pin-label { position: absolute; bottom: 5px; white-space: nowrap; display: none; font-family: var(--font-heading); font-weight: 800; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--color-accent-800); padding: 2px 6px; border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); } .lbl-right .pin-label { left: 10px; } .lbl-left .pin-label { right: 10px; } .map-pin:hover .pin-label { display: block; z-index: 7; background: var(--color-accent); color: #fff; border-color: var(--color-accent); } /* magnifier lens */ .map-lens { position: absolute; border-radius: 50%; overflow: hidden; pointer-events: none; border: 4px solid #fff; box-shadow: 0 12px 30px rgba(9,20,40,.4), inset 0 0 0 1px rgba(9,20,40,.15); background: #d3ecf8; opacity: 0; transition: opacity .12s ease; z-index: 20; } .map-lens.on { opacity: 1; } .lens-clone { position: absolute; transform-origin: 0 0; } .lens-clone { cursor: default; } .lens-clone .pin-label { display: block !important; } /* magnifier always reveals every label */ .lens-clone .pin-mark { transition: none; } /* shown only by the offline SVG fallback, for ports outside its frame */ .field-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-muted); text-transform: none; letter-spacing: 0; } .map-offframe { margin: var(--space-4) 0 0; font-size: 13px; line-height: 1.6; color: var(--color-muted); border-left: 3px solid var(--color-accent); padding-left: var(--space-4); } .map-offframe b { color: var(--color-text); font-weight: 600; } .map-legend { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-4); font-size: 12px; color: color-mix(in srgb, var(--color-text) 65%, transparent); } .map-legend i.lg { width: 12px; height: 12px; border-radius: 50%; display: inline-block; vertical-align: -1px; margin-right: 6px; } .lg-head { background: #c99700; } .lg-supply { background: var(--color-accent); } .lg-special { background: #e07a1f; } @media (max-width: 760px) { .map-stage { cursor: default; } .map-pin .pin-label { display: none; } .map-pin.head .pin-mark, .pin-mark { width: 13px; height: 18px; } } .port-row { display: grid; grid-template-columns: 60px minmax(0, 1.2fr) auto minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-bottom: 2px solid var(--color-divider); } .port-row .i { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; color: var(--color-accent-700); } .port-row .nm { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; } .port-row .meta { font-size: 14px; color: color-mix(in srgb, var(--color-text) 65%, transparent); } /* ── steps ───────────────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); } .step { border-top: 2px solid var(--color-accent); padding: var(--space-6) var(--space-8) 0 0; } .step .num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1; color: var(--color-neutral-400); } .step h4 { margin: var(--space-4) 0 var(--space-3); font-size: 20px; letter-spacing: -0.015em; } .step p { margin: 0; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* ── brands marquee ──────────────────────────────────────────────────── */ .brands { border-bottom: 2px solid var(--color-divider); background: var(--color-bg); overflow: hidden; } .brands .intro { padding: calc(var(--space-8) * 2.2) var(--space-6) calc(var(--space-8) * 1.6); max-width: 900px; margin: 0 auto; text-align: center; } /* headings inside a split column sit in a ~640px well, so they need their own scale — the section scale wrapped them onto three ragged lines */ .split .content h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.024em; margin: 0 0 var(--space-6); } .brands .intro h2 { margin-left: auto; margin-right: auto; } .brands .intro p { font-size: 15px; max-width: 600px; margin: 0 auto; color: color-mix(in srgb, var(--color-text) 62%, transparent); } .brand-rows { display: flex; flex-direction: column; border-top: 1px solid #e5e5e5; } /* ── logo carousel (adapted from provided spec) ──────────────────────── */ .logo-carousel { position: relative; width: 100%; overflow: hidden; background: #ffffff; border-bottom: 1px solid #e5e5e5; } .logo-carousel::before, .logo-carousel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 170px; z-index: 3; pointer-events: none; } .logo-carousel::before { left: 0; background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.95) 20%, rgba(255,255,255,0) 100%); } .logo-carousel::after { right: 0; background: linear-gradient(to left, #fff 0%, rgba(255,255,255,.95) 20%, rgba(255,255,255,0) 100%); } .logo-track { display: flex; width: max-content; animation: logo-scroll 42s linear infinite; } .logo-track.reverse { animation: logo-scroll-reverse 46s linear infinite; } .logo-carousel:hover .logo-track { animation-play-state: paused; } .logo-item { width: 260px; height: 140px; flex: 0 0 260px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e5e5; box-sizing: border-box; padding: 24px 32px; background: #ffffff; transition: background-color .3s ease, transform .3s ease; } .logo-item img.brand-logo { display: block; max-width: 185px; max-height: 78px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: .42; /* faded look; full colour on hover */ transition: filter .35s ease, opacity .35s ease, transform .35s ease; } .logo-item:hover img.brand-logo { filter: grayscale(0%); opacity: 1; transform: scale(1.05); } /* text wordmark fallback — shown until a real logo file is added */ .logo-item .wordmark { display: inline-block; white-space: nowrap; max-width: 100%; text-align: center; line-height: 1.05; font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-neutral-400); transition: color .35s ease, transform .35s ease; } .logo-item:hover .wordmark { color: var(--color-accent); transform: scale(1.05); } @keyframes logo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes logo-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @media (max-width: 1200px) { .logo-item { width: 224px; flex-basis: 224px; height: 128px; } .logo-item img.brand-logo { max-width: 165px; max-height: 70px; } .logo-item .wordmark { font-size: 22px; } } @media (max-width: 768px) { .logo-item { width: 190px; flex-basis: 190px; height: 112px; padding: 20px; } .logo-item img.brand-logo { max-width: 130px; max-height: 58px; } .logo-item .wordmark { font-size: 19px; } .logo-carousel::before, .logo-carousel::after { width: 80px; } } @media (max-width: 480px) { .logo-item { width: 165px; flex-basis: 165px; height: 100px; } .logo-item img.brand-logo { max-width: 115px; max-height: 52px; } .logo-item .wordmark { font-size: 17px; } .logo-carousel::before, .logo-carousel::after { width: 55px; } } /* ── real coverage map (Leaflet) ─────────────────────────────────────── */ .map-real { height: 560px; width: 100%; background: #e8eef5; border: 1px solid var(--color-divider); z-index: 0; } .map-real .leaflet-container { font-family: var(--font-body); } .map-real .leaflet-control-zoom a { color: var(--color-accent); font-weight: 700; } .map-real .leaflet-control-attribution { font-size: 10.5px; } /* markers */ .mp-icon { display: grid; place-items: center; } .mp-dot { display: block; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 7px rgba(6,15,30,.4); transition: transform .18s ease; } .mp-icon:hover .mp-dot { transform: scale(1.35); } .mp-icon.mp-head .mp-dot { width: 19px; height: 19px; box-shadow: 0 0 0 4px rgba(217,154,43,.32), 0 2px 8px rgba(6,15,30,.4); } .mp-tip { background: var(--color-accent); color: #fff; border: 0; border-radius: 3px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: -.01em; padding: 5px 10px; box-shadow: 0 4px 14px rgba(6,15,30,.3); } .mp-tip::before { border-top-color: var(--color-accent) !important; } .leaflet-popup-content-wrapper { border-radius: 3px; } .leaflet-popup-content { margin: 12px 15px; } .mp-pop { display: flex; flex-direction: column; gap: 3px; } .mp-pop b { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: -.015em; } .mp-pop i { font-style: normal; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); } .mp-pop em { font-style: normal; margin-top: 5px; align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; } .mp-pop em.r-head { background: rgba(217,154,43,.18); color: #8a6110; } .mp-pop em.r-supply { background: var(--color-accent-100); color: var(--color-accent); } .mp-pop em.r-special { background: rgba(232,121,43,.16); color: #a3521a; } .map-reset { margin-left: auto; cursor: pointer; background: var(--color-bg); border: 1px solid var(--color-divider); color: var(--color-accent); font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; transition: background .2s ease, color .2s ease, border-color .2s ease; } .map-reset:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } @media (max-width: 760px) { .map-real { height: 420px; } .map-reset { margin-left: 0; } } /* ── IMPA catalogue ──────────────────────────────────────────────────── */ .im-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-5); } .im-searchwrap { position: relative; flex: 1 1 340px; min-width: 260px; } .im-mag { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; } .im-search { padding-left: 45px; } .im-sect { min-height: 48px; max-width: 260px; cursor: pointer; } .im-az { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-5); } .im-l { cursor: pointer; min-width: 34px; padding: 8px 10px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); transition: background .18s ease, color .18s ease, border-color .18s ease; } .im-l:hover { border-color: var(--color-accent-300); color: var(--color-accent); } .im-l.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .im-status { margin: 0 0 var(--space-4); font-size: 13px; color: var(--color-muted); } .im-table-wrap { border: 1px solid var(--color-divider); overflow-x: auto; } .im-table { width: 100%; border-collapse: collapse; min-width: 680px; } .im-table th { text-align: left; padding: 13px var(--space-4); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--color-accent); position: sticky; top: 0; z-index: 1; } .im-table td { padding: 11px var(--space-4); border-bottom: 1px solid var(--color-hairline); font-size: 14px; vertical-align: top; } .im-table th.c, .im-table td.c { width: 96px; } .im-table th.u, .im-table td.u { width: 70px; } .im-table th.s, .im-table td.s { width: 24%; } .im-table th.a, .im-table td.a { width: 92px; text-align: right; } .im-row td.c b { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: .01em; color: var(--color-accent); } .im-row td.s { font-size: 12.5px; color: var(--color-muted); } .im-row td.u { font-size: 12.5px; color: var(--color-muted); } .im-size { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; } .im-row:hover { background: var(--color-surface); } .im-row.on { background: var(--color-accent-100); } .im-add { cursor: pointer; padding: 6px 13px; font-family: var(--font-heading); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; border: 1px solid var(--color-accent); background: var(--color-bg); color: var(--color-accent); transition: background .18s ease, color .18s ease; } .im-add:hover { background: var(--color-accent); color: #fff; } .im-row.on .im-add { background: var(--color-accent); color: #fff; } .im-more-wrap { padding: var(--space-5); text-align: center; border-top: 1px solid var(--color-divider); } .im-empty { border: 1px dashed var(--color-accent-300); background: var(--color-surface); padding: calc(var(--space-8) * 1.6) var(--space-6); text-align: center; } .im-empty-in { max-width: 560px; margin: 0 auto; color: var(--color-muted); } .im-empty-in svg { color: var(--color-accent-300); margin-bottom: var(--space-4); display: inline-block; } .im-empty-in h3 { margin: 0 0 var(--space-3); color: var(--color-text); font-size: 21px; } .im-empty-in p { font-size: 14.5px; line-height: 1.7; margin: 0 0 var(--space-4); } .im-empty-how { background: var(--color-bg); border-left: 3px solid var(--color-accent); padding: var(--space-4) var(--space-5); text-align: left; } .im-empty-in code { background: var(--color-accent-100); padding: 1px 6px; font-size: 13px; color: var(--color-accent-800); } .im-empty-note { font-size: 13px !important; margin-top: var(--space-4) !important; } .im-tray { position: sticky; bottom: 0; z-index: 40; background: var(--color-accent); color: #fff; box-shadow: 0 -8px 30px rgba(6,15,30,.28); } .im-tray-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-4) 0; } .im-tray b { font-family: var(--font-heading); font-weight: 800; font-size: 15px; } .im-tray span { font-size: 13px; opacity: .8; } .im-tray-btns { display: flex; gap: var(--space-2); flex-wrap: wrap; } .im-tray-btns .btn { font-size: 11.5px; padding: 10px 16px; } .im-tray-btns .btn-secondary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; } .im-tray-btns .btn-secondary:hover { background: #fff; border-color: #fff; color: var(--color-accent); } .im-tray-btns .btn-primary { background: #fff; border-color: #fff; color: var(--color-accent); } @media (max-width: 760px) { .im-sect { max-width: none; flex: 1 1 100%; } .im-tray-in { flex-direction: column; align-items: stretch; gap: var(--space-3); } .im-tray-btns .btn { flex: 1; justify-content: center; } } /* ── checklist planner ───────────────────────────────────────────────── */ .pl-bar { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; justify-content: space-between; border: 1px solid var(--color-divider); background: var(--color-bg); padding: var(--space-5); box-shadow: 0 8px 26px rgba(16,32,64,.06); } .pl-progress { flex: 1 1 260px; min-width: 240px; } .pl-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: -.01em; margin-bottom: 9px; } .pl-prog-top span:last-child { color: var(--color-accent); } .pl-track { height: 6px; background: var(--color-surface); overflow: hidden; } .pl-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-400) 100%); transition: width .4s cubic-bezier(.22,1,.36,1); } .pl-tools { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .pl-tools .btn { font-size: 11.5px; padding: 10px 15px; } .pl-search { min-height: 40px; width: 210px; font-size: 14px; } .pl-tools .on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .pl-danger:hover { border-color: #c0392b; color: #c0392b; } .pl-saved { margin: var(--space-3) 0 0; font-size: 12.5px; color: var(--color-muted); } .pl-doc { padding-top: var(--space-8); } .pl-block { border: 1px solid var(--color-divider); background: var(--color-bg); padding: calc(var(--space-8) * 1.1); margin-bottom: var(--space-6); } .pl-head { display: flex; align-items: flex-start; gap: var(--space-4); border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-4); margin-bottom: var(--space-6); } .pl-head h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; } .pl-no { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--color-accent); padding-top: 5px; } .pl-sub { margin: 5px 0 0; font-size: 13px; color: var(--color-muted); } .pl-tally { margin-left: auto; flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .04em; color: var(--color-muted); border: 1px solid var(--color-divider); padding: 6px 12px; } .pl-tally.has { color: #fff; background: var(--color-accent); border-color: var(--color-accent); } .pl-intro { margin: 0 0 var(--space-5); font-size: 14px; color: var(--color-muted); } .pl-vessel { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .pl-timeline { list-style: none; margin: 0; padding: 0; counter-reset: s; } .pl-step { border-bottom: 1px solid var(--color-hairline); } .pl-step label { display: flex; align-items: flex-start; gap: var(--space-4); padding: 12px 0; cursor: pointer; font-size: 14.5px; line-height: 1.5; } .pl-step input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--color-accent); cursor: pointer; } .pl-when { flex: none; width: 92px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .04em; color: var(--color-accent); padding-top: 2px; } .pl-step.on > label { color: var(--color-muted); } .pl-step.on span { text-decoration: line-through; } .pl-table { width: 100%; border-collapse: collapse; } .pl-table th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); padding: 0 var(--space-3) 10px; border-bottom: 1px solid var(--color-divider); } .pl-table th.c, .pl-table td.c { width: 40px; padding-left: 0; } .pl-table th.q, .pl-table td.q { width: 92px; } .pl-table th.r, .pl-table td.r { width: 34%; } .pl-row td { padding: 7px var(--space-3); border-bottom: 1px solid var(--color-hairline); font-size: 14px; vertical-align: middle; } .pl-row td.c { padding-left: 0; } .pl-row td.i { font-weight: 500; } .pl-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; } .pl-row.on { background: var(--color-accent-100); } .pl-row.on td.i { font-weight: 700; color: var(--color-accent-800); } .pl-in { width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; background: var(--color-bg); border: 1px solid var(--color-divider); transition: border-color .18s ease, box-shadow .18s ease; } .pl-in:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 14%, transparent); } /* custom items added by the vessel */ .pl-row td.i { display: flex; align-items: center; gap: var(--space-3); } .pl-tagc { display: inline-block; margin-left: 8px; padding: 2px 7px; vertical-align: 1px; background: var(--color-accent-100); color: var(--color-accent); border: 1px solid var(--color-accent-300); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .pl-iname { min-width: 0; } .pl-del { flex: none; margin-left: auto; width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 17px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-muted); transition: background .18s ease, color .18s ease, border-color .18s ease; } .pl-del:hover { background: #c0392b; border-color: #c0392b; color: #fff; } .pl-addrow td { padding: 10px var(--space-3) 14px 0 !important; border-bottom: 0 !important; } .pl-addrow td[colspan] { display: flex; gap: var(--space-2); } .pl-addin { flex: 1; min-width: 0; border-style: dashed !important; } .pl-addbtn { flex: none; cursor: pointer; padding: 0 18px; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .1em; border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff; transition: background .18s ease, color .18s ease; } .pl-addbtn:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); } .pl-notes { width: 100%; } .pl-lines { display: none; } .pl-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: calc(var(--space-8) * 1.2); } .pl-sign span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 30px; } .pl-sign i { display: block; border-bottom: 1px solid var(--color-text); } .pl-send { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; background: linear-gradient(165deg, var(--color-accent) 0%, var(--color-accent-800) 100%); color: #fff; padding: calc(var(--space-8) * 1.1); box-shadow: 0 16px 44px rgba(20,68,140,.3); } .pl-send h3 { margin: 0 0 6px; color: #fff; font-size: 22px; letter-spacing: -.025em; } .pl-send p { margin: 0; font-size: 14px; opacity: .85; } .pl-send-btns { display: flex; gap: var(--space-3); flex-wrap: wrap; } .pl-send-btns .btn-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; } .pl-send-btns .btn-secondary:hover { background: #fff; border-color: #fff; color: var(--color-accent); } .pl-send-btns .btn-primary { background: #fff; color: var(--color-accent); border-color: #fff; } .pl-send-btns .btn-primary:hover { background: var(--color-accent-100); color: var(--color-accent-800); } .pl-cover { display: none; } @media (max-width: 1180px) { .pl-vessel { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .pl-vessel { grid-template-columns: repeat(2, 1fr); } .pl-block { padding: var(--space-6); } .pl-table th.r, .pl-table td.r { display: none; } .pl-sign { grid-template-columns: 1fr; } .pl-search { width: 100%; } } @media (max-width: 560px) { .pl-vessel { grid-template-columns: 1fr; } .pl-table th.q, .pl-table td.q { width: 70px; } .pl-when { width: 100%; } .pl-step label { flex-wrap: wrap; } } @media print { @page { size: A4 portrait; margin: 12mm 12mm 14mm; } .pl-doc { padding: 0; } .pl-doc .container { max-width: none; padding: 0; } .pl-block { border: 0; padding: 0; margin: 0; break-after: page; } .pl-page:last-child { break-after: auto; } .pl-sect { break-inside: auto; } .pl-head { border-bottom: 2px solid var(--color-accent); } .pl-tally { display: none; } .pl-row td { padding: 6px var(--space-3); font-size: 12px; } .pl-row.on { background: none !important; } .pl-in { border: 0; border-bottom: 1px solid var(--color-divider); padding: 3px 0; } .pl-table th { font-size: 9px; } .pl-row input[type="checkbox"], .pl-step input { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border: 1.4px solid var(--color-text); background: #fff; } .pl-addrow { display: none; } /* the add field is screen-only */ .pl-tagc { border: 0; background: none; padding: 0 0 0 6px; color: var(--color-accent); } .pl-step.on span { text-decoration: none; } .pl-notes { border: 0; min-height: 0; height: 26mm; } .pl-lines { display: block; height: 120mm; background-image: repeating-linear-gradient(to bottom, transparent 0 9mm, var(--color-divider) 9mm 9mm, transparent 9mm 10mm); } .pl-cover { display: flex; align-items: center; justify-content: center; text-align: center; height: 262mm; break-after: page; background: var(--color-accent); color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .plc-in img { height: 74px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; } .plc-in h2 { margin: 0; font-size: 34px; letter-spacing: -.03em; line-height: 1.1; color: #fff; } .plc-sub { margin: 12px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .82; } .plc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm 10mm; margin: 18mm auto 0; max-width: 150mm; text-align: left; } .plc-fields span { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; margin-bottom: 7mm; } .plc-fields i { display: block; border-bottom: 1px solid rgba(255,255,255,.5); } .plc-con { margin: 20mm 0 0; font-size: 10px; opacity: .8; } } /* ── company brochure ────────────────────────────────────────────────── */ .br-doc { max-width: 900px; margin: 0 auto; padding: var(--space-8) var(--space-6) calc(var(--space-8) * 2); display: flex; flex-direction: column; gap: var(--space-6); } .br-page { position: relative; background: #fff; border: 1px solid var(--color-divider); padding: calc(var(--space-8) * 1.5); display: flex; flex-direction: column; } .br-head { display: flex; align-items: baseline; gap: var(--space-4); border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-4); margin-bottom: var(--space-6); } .br-no { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .12em; color: var(--color-accent); } .br-head h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; } .br-lead { font-size: 18px; line-height: 1.55; color: var(--color-text); margin-bottom: var(--space-6); max-width: 56ch; } .br-intro { font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 68%, transparent); margin: 0 0 var(--space-5); max-width: 68ch; } .br-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: calc(var(--space-8) * 1.2); align-items: start; } .br-cols p { font-size: 13.5px; line-height: 1.68; margin: 0 0 var(--space-4); color: color-mix(in srgb, var(--color-text) 76%, transparent); } .br-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } .br-fig { background: var(--color-surface); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: 4px; } .br-fig .v { font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.03em; color: var(--color-accent); } .br-fig .l { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 58%, transparent); } .br-creds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-7) 0 0; } .br-creds span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--color-divider); padding: 7px 12px; color: color-mix(in srgb, var(--color-text) 66%, transparent); } .br-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); } .br-three > div { border-top: 3px solid var(--color-accent); padding-top: var(--space-4); } .br-three h4 { margin: 0 0 8px; font-size: 15px; letter-spacing: -.01em; } .br-three p { margin: 0; font-size: 12.5px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 68%, transparent); } .br-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--space-8) * 1.1); } .br-cat { display: flex; gap: var(--space-4); padding: 11px 0; border-bottom: 1px solid var(--color-divider); } .br-cat .n { flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 11px; color: var(--color-accent); padding-top: 3px; } .br-cat .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .br-cat b { font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; letter-spacing: -.01em; } .br-cat i { font-style: normal; font-size: 11.5px; line-height: 1.45; color: color-mix(in srgb, var(--color-text) 60%, transparent); } .br-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .br-s { border: 1px solid var(--color-divider); padding: var(--space-4); display: flex; flex-direction: column; gap: 5px; } .br-s b { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: -.01em; } .br-s i { font-style: normal; font-size: 11.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 62%, transparent); } .br-sub-h { margin: calc(var(--space-8) * 1.2) 0 var(--space-5); font-size: 19px; letter-spacing: -.02em; padding-bottom: 10px; border-bottom: 1px solid var(--color-divider); } .br-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .br-steps > div { background: var(--color-surface); padding: var(--space-4); } .br-steps .s-n { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-accent); opacity: .35; line-height: 1; } .br-steps h4 { margin: 8px 0 6px; font-size: 13.5px; letter-spacing: -.01em; } .br-steps p { margin: 0; font-size: 11.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 64%, transparent); } .br-pg { margin-bottom: var(--space-4); } .br-pg h4 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-2); padding-bottom: 6px; border-bottom: 1px solid var(--color-divider); font-size: 15px; letter-spacing: -.015em; color: var(--color-accent); } .br-pg h4 .c { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 52%, transparent); } .br-pg .pl { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2) var(--space-3); } .br-pg .p { display: flex; flex-direction: column; gap: 1px; } .br-pg .p b { font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; letter-spacing: -.01em; } .br-pg .p i { font-style: normal; font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .br-bg { margin-bottom: var(--space-6); } .br-bg h4 { margin: 0 0 var(--space-3); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); } .br-bg .bl { display: flex; flex-wrap: wrap; gap: var(--space-2); } .br-bg .bl span { border: 1px solid var(--color-divider); padding: 8px 14px; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; letter-spacing: -.01em; } .br-quote { margin-top: auto; padding-top: calc(var(--space-8) * 1.2); display: flex; gap: var(--space-4); align-items: flex-start; } .br-quote .q { font-family: var(--font-heading); font-weight: 800; font-size: 52px; line-height: .7; color: var(--color-accent); opacity: .25; } .br-quote p { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1.3; max-width: 30ch; } /* cover + back cover */ .br-cover, .br-back { border: 0; padding: 0; overflow: hidden; background: var(--color-accent); color: #fff; min-height: 560px; } .br-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; } .br-cover-in, .br-back-in { position: relative; z-index: 2; padding: calc(var(--space-8) * 1.8); display: flex; flex-direction: column; height: 100%; flex: 1; } .br-cover-in { justify-content: flex-end; } .br-logo { height: 74px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--space-6); align-self: flex-start; } .br-cover h1 { margin: 0; font-size: clamp(34px, 5vw, 54px); line-height: 1.02; letter-spacing: -.03em; color: #fff; } .br-sub { margin: 8px 0 0; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; opacity: .82; } .br-tag { margin: var(--space-5) 0 0; font-size: 14px; letter-spacing: .06em; opacity: .92; } .br-cover-foot { margin-top: calc(var(--space-8) * 1.4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.3); display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; } .br-back-in { justify-content: center; } .br-back h2 { margin: 0 0 var(--space-4); font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.025em; color: #fff; } .br-back-p { margin: 0 0 var(--space-7); font-size: 14px; line-height: 1.6; opacity: .88; max-width: 52ch; } .br-contact { width: 100%; border-collapse: collapse; } .br-contact td { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.22); font-size: 13px; vertical-align: top; } .br-contact td:first-child { width: 130px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; padding-top: 14px; } .br-back-foot { margin: var(--space-7) 0 0; font-size: 11px; letter-spacing: .1em; opacity: .7; } @media (max-width: 860px) { .br-page { padding: var(--space-6); } .br-cols, .br-cats, .br-svc, .br-steps, .br-three { grid-template-columns: 1fr; gap: var(--space-5); } .br-pg .pl { grid-template-columns: 1fr 1fr; } .br-cover-in, .br-back-in { padding: var(--space-7); } } @media print { .br-doc { max-width: none; margin: 0; padding: 0; gap: 0; display: block; } .br-page { border: 0; break-after: page; padding: 14mm 15mm; width: 210mm; min-height: 292mm; box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .br-page:last-child { break-after: auto; } .br-cover, .br-back { padding: 0; min-height: 292mm; } .br-cover-in, .br-back-in { padding: 22mm 18mm; } .br-cats { gap: 0 12mm; } .br-quote { padding-top: 10mm; } } /* ── downloads list ──────────────────────────────────────────────────── */ .dl-list { display: flex; flex-direction: column; } .dl-row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-4); border-bottom: 1px solid var(--color-divider); transition: background .22s ease, padding-left .25s ease; animation: dlIn .5s cubic-bezier(.22,1,.36,1) both; } .dl-row:first-child { border-top: 1px solid var(--color-divider); } .dl-row:hover { background: var(--color-surface); padding-left: var(--space-6); } @keyframes dlIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .dl-ic { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; background: var(--color-accent-100); color: var(--color-accent); transition: background .22s ease, color .22s ease, transform .25s ease; } .dl-row:hover .dl-ic { background: var(--color-accent); color: #fff; transform: translateY(-2px); } .dl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .dl-title { font-family: var(--font-heading); font-weight: 800; font-size: 18px; letter-spacing: -.015em; line-height: 1.25; } .dl-meta { font-size: 13px; color: var(--color-muted); } .dl-badge { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 3px 9px; background: var(--color-accent); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .dl-act { flex: none; display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; } .dl-btn { gap: 9px; font-size: 12.5px; padding: 11px 20px; } @media (max-width: 760px) { .dl-row { flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) 0; } .dl-row:hover { padding-left: 0; } .dl-txt { flex: 1 1 60%; } .dl-act { flex: 1 1 100%; justify-content: flex-start; } } /* calendar edition cards on the downloads page */ .dl-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); } .dc-card { border: 1px solid var(--color-divider); background: var(--color-bg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color .22s ease, box-shadow .25s ease, transform .25s ease; animation: dlIn .5s cubic-bezier(.22,1,.36,1) both; } .dc-card:hover { border-color: var(--color-accent-300); box-shadow: var(--shadow-md); transform: translateY(-4px); } .dc-card h4 { margin: 0; font-size: 18px; letter-spacing: -.015em; } .dc-sub { margin: 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .dc-years { display: flex; gap: var(--space-2); margin-top: var(--space-3); } .dc-y { flex: 1; text-align: center; text-decoration: none; padding: 9px 0; border: 1px solid var(--color-divider); color: var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 14px; transition: background .2s ease, color .2s ease, border-color .2s ease; } .dc-y:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .dc-dl { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); transition: gap .2s ease; } .dc-dl:hover { gap: 12px; } /* ── wall calendar ───────────────────────────────────────────────────── */ .cal-editions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-5); } .cal-e { cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); transition: background .22s ease, color .22s ease, border-color .22s ease, transform .2s ease; } .cal-e:hover { border-color: var(--color-accent-300); transform: translateY(-2px); } .cal-e.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .cal-e .ce-n { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: -.01em; } .cal-e .ce-s { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .cal-e.on .ce-s { color: rgba(255,255,255,.75); } .cal-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; } .cal-years { display: flex; gap: var(--space-2); } .cal-y { cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -.01em; padding: 11px 26px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); transition: background .22s ease, color .22s ease, border-color .22s ease, transform .2s ease; } .cal-y:hover { border-color: var(--color-accent-300); transform: translateY(-2px); } .cal-y.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .cal-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } .cal-note { margin: var(--space-4) 0 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 58%, transparent); } .cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-7); font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); } .cal-legend .lg { display: inline-flex; align-items: center; gap: 8px; } .cal-legend i { width: 11px; height: 11px; display: inline-block; } .cal-legend .d-hol { background: var(--color-accent); } .cal-legend .d-sun { background: color-mix(in srgb, var(--color-text) 26%, transparent); } .cal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .cal-month { border: 1px solid var(--color-divider); background: var(--color-bg); display: flex; flex-direction: column; overflow: hidden; } .cm-photo { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; background: var(--color-neutral-900); } .cm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .cm-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,15,30,.82) 0%, rgba(6,15,30,.12) 46%, rgba(6,15,30,.28) 100%); } .cm-cap { position: absolute; left: var(--space-5); right: var(--space-5); bottom: 10px; z-index: 2; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .04em; } /* quote set over the photograph */ .cm-quote { position: absolute; left: var(--space-5); right: var(--space-5); bottom: 34px; z-index: 2; display: flex; flex-direction: column; color: #fff; } .cm-quote .q-mark { font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: .6; opacity: .5; } .cm-quote .q-text { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.5); margin-top: 4px; } .cm-quote .q-by { margin-top: 7px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; } .cm-brand { position: absolute; top: var(--space-4); left: var(--space-5); z-index: 2; display: flex; align-items: center; gap: 9px; color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .13em; } .cm-brand img { height: 22px; width: auto; filter: brightness(0) invert(1); } .cm-body { padding: var(--space-5) var(--space-5) var(--space-4); display: flex; flex-direction: column; flex: 1; } .cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .cm-head h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; line-height: 1; color: var(--color-accent); } .cm-yr { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: color-mix(in srgb, var(--color-text) 52%, transparent); } .cm-num { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.04em; color: var(--color-accent); opacity: .13; } .cm-grid { width: 100%; border-collapse: collapse; table-layout: fixed; } .cm-grid thead tr { background: linear-gradient(100deg, var(--color-accent) 0%, var(--color-accent-700) 100%); } .cm-grid th { padding: 9px 0; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cm-grid th.sun { color: #fff; background: rgba(255,255,255,.14); } .cm-grid td { text-align: center; padding: 8px 0; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--color-text); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); border-right: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); } .cm-grid td:last-child, .cm-grid th:last-child { border-right: 0; } .cm-grid td.pad { color: transparent; } .cm-grid td.sun { color: color-mix(in srgb, var(--color-text) 45%, transparent); } .cm-grid td.hol { color: var(--color-accent); font-weight: 800; position: relative; } .cm-grid td.hol::after { content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 4px; height: 4px; background: var(--color-accent); border-radius: 50%; } .cm-grid td.fest { color: var(--color-accent-700); font-weight: 700; position: relative; } .cm-grid td.fest::after { content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 4px; height: 4px; border: 1px solid var(--color-accent); border-radius: 50%; } .cm-grid td.now { background: var(--color-accent); color: #fff; font-weight: 800; } .cm-hol { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 58%, transparent); min-height: 34px; } .cm-hol b { font-weight: 800; margin-right: 5px; } .cm-hol .is-h b { color: var(--color-accent); } .cm-hol .is-f b { color: color-mix(in srgb, var(--color-accent) 55%, transparent); } .cm-foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; gap: 4px var(--space-4); font-size: 10.5px; letter-spacing: .05em; color: color-mix(in srgb, var(--color-text) 52%, transparent); } .cal-legend .d-fes { background: transparent; border: 1.5px solid var(--color-accent); border-radius: 50%; } .cc-ed { margin: 10px 0 0; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; opacity: .9; } .cal-cover { display: none; } @media (max-width: 980px) { .cal-grid { grid-template-columns: 1fr; } } /* ---- print: one month per A4 landscape page ---- */ @media print { .no-print, .wa-float, .side-rail, .cta-band, .page-hero { display: none !important; } @page { size: A4 landscape; margin: 8mm; } body { background: #fff; } .section { padding: 0 !important; } .container { max-width: none; padding: 0; } .cal-cover { display: flex; align-items: center; justify-content: center; text-align: center; height: 190mm; break-after: page; background: var(--color-accent); color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cc-inner img { height: 82px; width: auto; filter: brightness(0) invert(1); margin-bottom: 18px; } .cc-inner h2 { margin: 0; font-size: 40px; letter-spacing: -.02em; color: #fff; } .cc-sub { margin: 8px 0 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; opacity: .82; } .cc-year { margin: 26px 0 0; font-family: var(--font-heading); font-weight: 800; font-size: 96px; line-height: 1; letter-spacing: -.04em; } .cc-tag { margin: 18px 0 0; font-size: 13px; letter-spacing: .06em; opacity: .9; } .cc-con { margin: 40px 0 0; font-size: 12px; opacity: .82; } .cal-grid { display: block; } .cal-month { break-inside: avoid; break-after: page; border: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 8mm; height: 186mm; align-items: stretch; } .cal-month:last-child { break-after: auto; } .cm-photo { aspect-ratio: auto; height: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cm-body { padding: 4mm 0; justify-content: center; } .cm-head h2 { font-size: 34px; } .cm-num { font-size: 44px; } .cm-grid td { padding: 10px 0; font-size: 16px; } .cm-quote .q-text { font-size: 20px; } .cm-quote .q-mark { font-size: 54px; } .cm-grid td.now { background: none; color: var(--color-accent); } .cm-hol { font-size: 11px; } } /* ── gallery ─────────────────────────────────────────────────────────── */ .gal-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: calc(var(--space-8) * 1.2); } .gal-f { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; padding: 11px 18px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } .gal-f .n { font-size: 10.5px; letter-spacing: 0; padding: 2px 7px; border-radius: 20px; background: var(--color-surface); color: color-mix(in srgb, var(--color-text) 62%, transparent); transition: background .22s ease, color .22s ease; } .gal-f:hover { border-color: var(--color-accent-300); transform: translateY(-2px); } .gal-f.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .gal-f.on .n { background: rgba(255,255,255,.2); color: #fff; } .gal-grid { columns: 3; column-gap: var(--space-5); } .gal-item { break-inside: avoid; margin: 0 0 var(--space-5); cursor: pointer; animation: galIn .6s cubic-bezier(.22,1,.36,1) both; } .gal-item.hide { display: none; } .gal-grid.replay .gal-item { animation: galIn .6s cubic-bezier(.22,1,.36,1) both; } @keyframes galIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } } .gal-shot { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-divider); } .gal-shot img { display: block; width: 100%; height: auto; transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s ease; } .gal-item:hover .gal-shot img { transform: scale(1.07); filter: saturate(1.06); } /* placeholder shown until the photo file is added */ .gal-ph { display: none; } .gal-shot.missing { aspect-ratio: 4 / 3; display: grid; place-items: center; border-style: dashed; } .gal-shot.missing img { display: none; } .gal-shot.missing .gal-ph { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: color-mix(in srgb, var(--color-text) 48%, transparent); text-align: center; padding: var(--space-5); } .gal-shot.missing .gal-ov { opacity: 0; } .gal-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5); opacity: 0; transition: opacity .34s ease; background: linear-gradient(to top, rgba(6,15,30,.86) 0%, rgba(6,15,30,.32) 52%, rgba(6,15,30,0) 100%); } .gal-item:hover .gal-ov, .gal-item:focus-within .gal-ov { opacity: 1; } .gal-ov .gal-zoom { position: absolute; top: var(--space-5); right: var(--space-5); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); transform: scale(.7) rotate(-25deg); transition: transform .4s cubic-bezier(.22,1,.36,1) .05s; } .gal-item:hover .gal-zoom { transform: scale(1) rotate(0); } .gal-ov .gal-cap { color: #fff; font-size: 14px; line-height: 1.5; font-weight: 600; transform: translateY(12px); transition: transform .4s cubic-bezier(.22,1,.36,1) .04s; } .gal-item:hover .gal-ov .gal-cap { transform: none; } /* lightbox */ .gal-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; gap: var(--space-4); background: rgba(6, 15, 30, .93); padding: var(--space-6); opacity: 0; transition: opacity .26s ease; } /* must beat the `display:flex` above, or the closed lightbox stays a full-screen invisible click-trap over the whole page */ .gal-lightbox[hidden] { display: none; } .gal-lightbox:not(.on) { pointer-events: none; } .gal-lightbox.on { opacity: 1; pointer-events: auto; } .gl-stage { margin: 0; max-width: min(1180px, 92vw); max-height: 88vh; display: flex; flex-direction: column; gap: var(--space-4); } .gl-stage img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: glPop .38s cubic-bezier(.22,1,.36,1) both; } @keyframes glPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .gl-stage figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); color: #fff; } .gl-stage .gl-cap { font-size: 15px; line-height: 1.5; } .gl-stage .gl-count { flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.6); } .gl-close, .gl-nav { flex: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; transition: background .2s ease, transform .2s ease, border-color .2s ease; } .gl-close { position: absolute; top: var(--space-6); right: var(--space-6); } .gl-close:hover, .gl-nav:hover { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.08); } @media (max-width: 1180px) { .gal-grid { columns: 2; } } @media (max-width: 760px) { .gal-grid { columns: 1; } .gal-f { font-size: 11.5px; padding: 9px 14px; } .gl-nav { position: absolute; bottom: var(--space-6); width: 44px; height: 44px; } .gl-prev { left: var(--space-6); } .gl-next { right: var(--space-6); } .gl-stage { max-width: 100%; } .gl-stage img { max-height: 62vh; } } @media (prefers-reduced-motion: reduce) { .gal-item, .gal-grid.replay .gal-item, .gl-stage img { animation: none; } .gal-item:hover .gal-shot img { transform: none; } } /* ── testimonials ────────────────────────────────────────────────────── */ /* ── client reviews carousel ─────────────────────────────────────────── */ .reviews { background: var(--color-bg); } .rv-head { text-align: center; margin-bottom: calc(var(--space-8) * 1.5); } .rv-kicker { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: .005em; color: var(--color-accent); } .rv-title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(27px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.022em; color: var(--color-accent); } .rv-carousel { position: relative; display: flex; align-items: center; gap: var(--space-4); } .rv-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 30px 10px 34px 54px; } .rv-track { display: flex; gap: 80px; will-change: transform; } .rv-card { position: relative; box-sizing: border-box; flex: 0 0 calc((100% - 80px) / 2); background: #fff; border-radius: 4px; box-shadow: 0 14px 36px rgba(16, 32, 64, .11); padding: 36px 38px 36px 64px; min-height: 212px; display: flex; flex-direction: column; justify-content: center; gap: 15px; transition: box-shadow .28s ease, transform .28s ease; } .rv-card:hover { box-shadow: 0 20px 46px rgba(16, 32, 64, .17); transform: translateY(-4px); } .rv-av { position: absolute; left: -44px; top: 50%; transform: translateY(-50%); width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--color-accent); color: #fff; border: 4px solid #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(16, 32, 64, .2); font-family: var(--font-heading); font-weight: 800; font-size: 23px; letter-spacing: .02em; } .rv-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .rv-stars { color: var(--color-accent); font-size: 16px; letter-spacing: 4px; line-height: 1; } .rv-quote { margin: 0; font-size: 16.5px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 76%, transparent); } .rv-by { margin-top: 4px; font-size: 15px; } .rv-by .n { font-family: var(--font-heading); font-weight: 800; color: var(--color-accent); } .rv-by .l { font-style: italic; margin-left: 8px; color: color-mix(in srgb, var(--color-text) 60%, transparent); } .rv-nav { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; border: 1px solid var(--color-divider); background: #fff; color: var(--color-accent); display: grid; place-items: center; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .rv-nav:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); transform: scale(1.09); } .rv-nav:active { transform: scale(.96); } @media (max-width: 1180px) { .rv-track { gap: 60px; } .rv-card { flex-basis: calc((100% - 60px) / 2); } } @media (max-width: 900px) { .rv-track { gap: 48px; } .rv-card { flex-basis: 100%; } } @media (max-width: 760px) { .rv-viewport { padding: 26px 6px 30px 40px; } .rv-card { padding: 30px 26px 30px 50px; min-height: 0; } .rv-av { width: 68px; height: 68px; left: -32px; font-size: 18px; border-width: 3px; } .rv-quote { font-size: 15.5px; } } @media (max-width: 560px) { .rv-nav { display: none; } .rv-carousel { gap: 0; } } /* ── category page ───────────────────────────────────────────────────── */ .cat-hero { position: relative; border-bottom: 2px solid var(--color-divider); } .cat-hero .bg { position: absolute; inset: 0; } .cat-hero .bg img { width: 100%; height: 100%; object-fit: cover; } .cat-hero .ov { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 78%, transparent); } .cat-hero .container { position: relative; padding-top: calc(var(--space-8) * 2.5); padding-bottom: calc(var(--space-8) * 2.5); } .cat-hero .back { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-300); text-decoration: none; margin-bottom: var(--space-6); } .cat-hero h1 { font-size: clamp(34px, 4.8vw, 72px); line-height: 0.99; letter-spacing: -0.03em; color: var(--color-neutral-100); margin: 0 0 var(--space-4); max-width: 1000px; } .cat-hero p { font-size: clamp(16px, 1.4vw, 20px); max-width: 760px; color: var(--color-neutral-200); margin: 0; } .cat-layout { display: grid; grid-template-columns: 300px minmax(0, 2fr) minmax(0, 1fr); gap: calc(var(--space-8) * 1.5); padding-top: calc(var(--space-8) * 2); padding-bottom: calc(var(--space-8) * 2); } /* ── category sidebar: gliding indicator nav ─────────────────────────── */ .cat-side { position: sticky; top: 104px; align-self: start; } .cat-side .side-head { position: relative; padding-left: var(--space-4); margin-bottom: var(--space-5); font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; color: var(--color-accent); } .cat-side .side-head::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent); transform-origin: top; animation: headBar .75s cubic-bezier(.22,1,.36,1) both; } @keyframes headBar { from { transform: scaleY(0); } to { transform: scaleY(1); } } .cat-side .list { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--color-surface); border: 1px solid var(--color-divider); padding: 6px; } /* the single navy block that glides between items */ .cat-side .list .glide { position: absolute; left: 6px; right: 6px; top: 0; z-index: 0; height: 0; opacity: 0; background: linear-gradient(100deg, var(--color-accent) 0%, var(--color-accent-700) 100%); box-shadow: 0 10px 26px rgba(20, 68, 140, .32); pointer-events: none; overflow: hidden; transition: transform .46s cubic-bezier(.22,1,.36,1), height .46s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .cat-side .list .glide.on { opacity: 1; } .cat-side .list .glide::after { /* travelling sheen */ content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.20) 50%, transparent 66%); transform: translateX(-100%); animation: glideSheen 3.2s ease-in-out infinite; } @keyframes glideSheen { 0%, 58% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .cat-side .list a { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); text-decoration: none; padding: 13px var(--space-4); font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.3; background: transparent; color: var(--color-text); transition: color .28s ease, transform .3s cubic-bezier(.22,1,.36,1); animation: navIn .55s cubic-bezier(.22,1,.36,1) both; } @keyframes navIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } .cat-side .list a .ix { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--color-text) 36%, transparent); transition: color .28s ease; } .cat-side .list a .nm { flex: 1; min-width: 0; } .cat-side .list a .dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg); color: var(--color-accent); transition: transform .34s cubic-bezier(.22,1,.36,1), background .28s ease, color .28s ease, opacity .28s ease; opacity: .55; } /* the item the glide is currently sitting behind */ .cat-side .list a.lit { color: #fff; transform: translateX(5px); } .cat-side .list a.lit .ix { color: rgba(255,255,255,.62); } .cat-side .list a.lit .dot { background: #fff; color: var(--color-accent); opacity: 1; transform: translateX(3px) scale(1.1); } @media (prefers-reduced-motion: reduce) { .cat-side .list a { animation: none; } .cat-side .list .glide { transition: opacity .2s ease; } .cat-side .list .glide::after { animation: none; } } .cat-main h2 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.02em; margin: 0 0 var(--space-6); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-divider); color: var(--color-accent); } .cat-main h2.dark { color: var(--color-text); } .item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-6); } .item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); } .item .tick { flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--color-accent); color: #fff; display: grid; place-items: center; } .cat-aside .box { border: 2px solid var(--color-divider); padding: var(--space-6); margin-bottom: var(--space-6); } .cat-aside .box .media { aspect-ratio: 4 / 3; margin-bottom: var(--space-6); overflow: hidden; } .cat-aside .box .media img { width: 100%; height: 100%; object-fit: cover; } .cat-aside .box .media.placeholder { background: repeating-linear-gradient(135deg, var(--color-accent-100) 0 12px, var(--color-accent-200) 12px 24px); display: grid; place-items: center; } .cat-aside .box .media.placeholder span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 800; } .cat-aside .brands-here { border-top: 2px solid var(--color-divider); padding-top: var(--space-4); } .cat-aside .brands-here .h { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--space-3); } .cat-aside .brands-here .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ── products index ──────────────────────────────────────────────────── */ /* ── product category index: cards with a rising navy wash ───────────── */ .cat-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .cat-index a { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; min-height: 158px; background: var(--color-bg); border: 1px solid var(--color-divider); padding: var(--space-5) var(--space-5) var(--space-4); transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1); animation: ciIn .55s cubic-bezier(.22,1,.36,1) both; } @keyframes ciIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* navy wash rises from the bottom on hover */ .cat-index a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--color-accent) 0%, var(--color-accent-700) 100%); transform: translateY(101%); transition: transform .45s cubic-bezier(.22,1,.36,1); } .cat-index a:hover { border-color: var(--color-accent); box-shadow: 0 18px 44px rgba(20, 68, 140, .28); transform: translateY(-6px); } .cat-index a:hover::before { transform: translateY(0); } /* oversized ghost index number */ .cat-index .ci-idx { position: absolute; top: 8px; right: var(--space-4); pointer-events: none; font-family: var(--font-heading); font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.045em; color: var(--color-accent); opacity: .1; transition: opacity .3s ease, color .3s ease, transform .45s cubic-bezier(.22,1,.36,1); } .cat-index a:hover .ci-idx { color: #fff; opacity: .22; transform: scale(1.09); } .cat-index .ci-name { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 18px; letter-spacing: -.018em; line-height: 1.25; margin-bottom: 7px; padding-right: 40px; transition: color .28s ease; } .cat-index .ci-desc { display: block; font-size: 13.5px; line-height: 1.55; max-width: 42ch; color: color-mix(in srgb, var(--color-text) 64%, transparent); transition: color .28s ease; } .cat-index .ci-arrow { margin-top: auto; flex: none; color: var(--color-accent); transition: transform .35s cubic-bezier(.22,1,.36,1), color .28s ease; } .cat-index a:hover .ci-name { color: #fff; } .cat-index a:hover .ci-desc { color: rgba(255,255,255,.82); } .cat-index a:hover .ci-arrow { color: #fff; transform: translateX(9px); } /* single column: let the card hug its content instead of stretching */ @media (max-width: 760px) { .cat-index a { min-height: 0; padding: var(--space-4) var(--space-5); } .cat-index .ci-idx { font-size: 32px; top: 6px; } .cat-index .ci-arrow { margin-top: var(--space-3); } .cat-index .ci-desc { max-width: none; } } @media (prefers-reduced-motion: reduce) { .cat-index a { animation: none; } .cat-index a:hover { transform: none; } .cat-index a::before { transition: none; } } /* ── certificates ────────────────────────────────────────────────────── */ .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .cert .frame { border: 10px solid var(--color-accent-300); background: #fff; } .cert .frame .inner { position: relative; aspect-ratio: 3 / 4; background: repeating-linear-gradient(135deg, var(--color-neutral-100) 0 12px, var(--color-neutral-200) 12px 24px); display: grid; place-items: center; text-align: center; padding: var(--space-4); } .cert .frame .inner span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); font-weight: 800; } .cert .cap { padding: var(--space-4) 0 0; } .cert .cap .nm { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--color-accent); } .cert .cap .st { font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); margin-top: 4px; } .cert .cap .mt { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: var(--space-2); } /* ── RFQ / contact ───────────────────────────────────────────────────── */ .form-split { display: grid; grid-template-columns: 2fr 1fr; gap: calc(var(--space-8) * 1.6); align-items: start; } .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-divider); padding: calc(var(--space-8) * 1.2); box-shadow: 0 10px 34px rgba(16, 32, 64, .06); } .form-grid .full { grid-column: 1 / -1; } .form-grid .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); border-top: 1px solid var(--color-divider); padding-top: var(--space-6); margin-top: var(--space-2); } /* "what to include" panel */ .form-aside { position: sticky; top: 104px; align-self: start; border: 0; padding: calc(var(--space-8) * 1.1) var(--space-7); background: linear-gradient(165deg, var(--color-accent) 0%, var(--color-accent-800, #0d2f63) 100%); color: #fff; box-shadow: 0 14px 40px rgba(20, 68, 140, .28); } .form-aside h4 { color: #fff; } .form-aside .tip { position: relative; font-size: 14px; line-height: 1.5; padding: 11px 0 11px 30px; border-bottom: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.92); } .form-aside .tip:last-of-type { border-bottom: 0; } .form-aside .tip::before { content: ""; position: absolute; left: 0; top: 15px; width: 15px; height: 8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); opacity: .9; } .form-aside .text-muted { color: rgba(255,255,255,.66) !important; } .form-note { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); } .form-msg { padding: var(--space-5); font-size: 14px; line-height: 1.55; border-left-width: 4px; } .form-success { border: 1px solid var(--color-accent-300); border-left: 4px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); } .form-error { border: 1px solid #e5b4ae; border-left: 4px solid #c0392b; background: #fdecea; color: #7a1f16; } .form-error a { color: #7a1f16; } .check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; padding: 12px 14px; border: 1px solid var(--color-divider); background: var(--color-surface); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; } .check-item:hover { border-color: var(--color-accent-300); background: var(--color-bg); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(16,32,64,.07); } .check-item input { margin: 1px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--color-accent); cursor: pointer; } .check-item.on { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; } @media (max-width: 1180px) { .check-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .check-grid { grid-template-columns: 1fr; } } .contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-8) * 1.6); align-items: start; } .map-embed { margin-top: var(--space-7); border: 1px solid var(--color-divider); width: 100%; height: 340px; filter: grayscale(.15); display: block; } .contact-form { display: grid; gap: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-divider); padding: calc(var(--space-8) * 1.2); box-shadow: 0 10px 34px rgba(16, 32, 64, .06); } @media (max-width: 980px) { .form-aside { position: static; } } /* ── legal pages (privacy / terms) ───────────────────────────────────── */ .legal-split { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: calc(var(--space-8) * 1.6); align-items: start; } .legal-toc { position: sticky; top: 104px; align-self: start; border-left: 2px solid var(--color-divider); padding-left: var(--space-5); } .legal-toc .toc-head { font-family: var(--font-heading); font-weight: 800; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); } .legal-toc a { display: block; position: relative; padding: 6px 0 6px 0; font-size: 13px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 62%, transparent); text-decoration: none; transition: color .2s ease, padding-left .22s cubic-bezier(.22,1,.36,1); } .legal-toc a:hover { color: var(--color-accent); padding-left: 8px; } .legal-toc a.on { color: var(--color-accent); font-weight: 700; padding-left: 8px; } .legal-toc a.on::before { content: ""; position: absolute; left: calc(var(--space-5) * -1 - 2px); top: 8px; bottom: 8px; width: 2px; background: var(--color-accent); } .legal-toc .toc-top { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); font-size: 12px; font-weight: 700; color: var(--color-accent); } .legal-body { max-width: 74ch; } .legal-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 0 0 var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-divider); font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 58%, transparent); } .legal-meta span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); } .legal-lead { font-size: 17.5px; line-height: 1.6; color: var(--color-text); margin: 0 0 calc(var(--space-8) * 1.1); } .legal-body h2 { font-size: 21px; letter-spacing: -.02em; line-height: 1.25; margin: calc(var(--space-8) * 1.3) 0 var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); scroll-margin-top: 100px; } .legal-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .legal-body h3 { font-size: 15.5px; letter-spacing: -.01em; margin: var(--space-6) 0 var(--space-3); color: var(--color-accent); } .legal-body p { font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--color-text) 82%, transparent); margin: 0 0 var(--space-4); } .legal-body ul { margin: 0 0 var(--space-4); padding-left: 0; list-style: none; } .legal-body li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 82%, transparent); } .legal-body li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; background: var(--color-accent); } .legal-body strong { color: var(--color-text); font-weight: 700; } .legal-note { border-left: 3px solid var(--color-accent-300); background: var(--color-surface); padding: var(--space-4) var(--space-5); font-size: 13.5px !important; line-height: 1.65; } .legal-todo { background: rgba(232, 168, 43, .18); border-bottom: 1px dashed #b1801f; padding: 1px 6px; color: #7a5711; font-weight: 700; } .legal-table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); } .legal-table { font-size: 13.5px; } .legal-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .legal-contact { display: grid; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); margin: 0 0 var(--space-5); } .legal-contact > div { background: var(--color-bg); padding: var(--space-4) var(--space-5); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; } .legal-contact span { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .legal-contact b { font-size: 14px; font-weight: 600; line-height: 1.5; } @media (max-width: 980px) { .legal-split { grid-template-columns: 1fr; gap: var(--space-7); } .legal-toc { position: static; border-left: 0; border-top: 2px solid var(--color-divider); padding: var(--space-5) 0 0; } .legal-toc a.on::before { display: none; } .legal-body { max-width: none; } } @media (max-width: 600px) { .legal-contact > div { grid-template-columns: 1fr; gap: 5px; } } /* ── footer ──────────────────────────────────────────────────────────── */ .site-footer { position: relative; color: var(--color-neutral-200); background: radial-gradient(1100px 420px at 12% -8%, rgba(20, 68, 140, .40) 0%, transparent 62%), var(--color-neutral-900); } .site-footer::before { /* accent hairline across the top */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-300) 45%, transparent 100%); } .site-footer .container { padding-top: calc(var(--space-8) * 2.2); padding-bottom: calc(var(--space-8) * 1.6); } .footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: calc(var(--space-8) * 1.4); } .footer-logo { display: inline-block; } .footer-logo img { height: 64px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .96; } .site-footer .f-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -0.015em; margin: var(--space-5) 0 var(--space-3); color: #fff; } .site-footer p { font-size: 14px; line-height: 1.65; max-width: 340px; color: color-mix(in srgb, var(--color-neutral-100) 68%, transparent); } /* social as circular icon buttons */ .social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); font-size: 12px; } .social a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; border-radius: 40px; text-decoration: none; font-weight: 700; letter-spacing: .05em; color: var(--color-neutral-200); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.045); transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } .social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); } .f-head { font-family: var(--font-heading); font-weight: 800; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.16); position: relative; } .f-head::after { /* short accent underline */ content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px; background: var(--color-accent-300); } .f-link { display: block; position: relative; padding: 7px 0 7px 0; font-size: 14px; color: color-mix(in srgb, var(--color-neutral-100) 74%, transparent); text-decoration: none; transition: color .2s ease, padding-left .22s cubic-bezier(.22,1,.36,1); } .f-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--color-accent-300); transform: translateY(-50%); transition: width .22s cubic-bezier(.22,1,.36,1); } .f-link:hover { color: #fff; padding-left: 18px; } .f-link:hover::before { width: 12px; } .footer-bottom { margin-top: calc(var(--space-8) * 1.8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: space-between; align-items: center; font-size: 12.5px; color: color-mix(in srgb, var(--color-neutral-100) 52%, transparent); } .footer-bottom a { color: color-mix(in srgb, var(--color-neutral-100) 62%, transparent); text-decoration: none; transition: color .2s ease; } .footer-bottom a:hover { color: #fff; } /* ── floating rail + whatsapp ────────────────────────────────────────── */ .rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); } .rail a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--color-accent); text-decoration: none; box-shadow: var(--shadow-md); transition: transform .15s ease; } .rail a:hover { transform: scale(1.08); } .wa-float { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 85; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 15px; border-radius: 999px; background: linear-gradient(135deg, #25d366 0%, #12b257 100%); color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; box-shadow: 0 10px 26px rgba(18,178,87,.45), 0 2px 6px rgba(0,0,0,.18); transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease; } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: waPulse 2.4s cubic-bezier(.66,0,.2,1) infinite; } .wa-float svg { position: relative; transition: transform .5s ease; } .wa-float:hover { color: #fff; background: linear-gradient(135deg, #2ee06f 0%, #14c261 100%); transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 36px rgba(18,178,87,.5), 0 3px 8px rgba(0,0,0,.22); } .wa-float:hover svg { transform: rotate(-8deg) scale(1.08); } .wa-float:active { transform: translateY(-1px) scale(1); } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 20px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* ── animations ──────────────────────────────────────────────────────── */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ── responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .main-nav { display: none; } .burger { display: inline-flex; } .prod-grid, .why-grid, .svc-grid, .ports-grid, .steps, .cat-index, .cert-grid { grid-template-columns: repeat(2, 1fr); } .stats .grid { grid-template-columns: repeat(3, 1fr); } .split { grid-template-columns: 1fr; } .split .media { border-right: 0; border-bottom: 2px solid var(--color-divider); } .split .media img { min-height: 320px; } .split .content { padding: calc(var(--space-8) * 1.6) 0; } .cat-layout { grid-template-columns: 1fr; } .cat-side { position: static; } .form-split, .contact-split, .cta-band .container { grid-template-columns: 1fr; } .form-aside { border-left: 0; padding-left: 0; } .ports-summary { grid-template-columns: repeat(2, 1fr); } .ports-summary .s:nth-child(odd) { border-left: 0; } } @media (max-width: 760px) { .prod-grid, .why-grid, .svc-grid, .ports-grid, .steps, .cat-index, .cert-grid, .form-grid, .about-points, .item-grid { grid-template-columns: 1fr; } .stats .grid { grid-template-columns: repeat(2, 1fr); } .footer-cols { grid-template-columns: 1fr; gap: calc(var(--space-8) * 1.4); } .topbar .welcome { display: none; } .topbar .container { justify-content: center; gap: var(--space-2) var(--space-4); font-size: 12px; } .rail { display: none; } .wa-float { padding: var(--space-3) var(--space-4); font-size: 14px; } .port-row { grid-template-columns: 1fr; gap: var(--space-2); } .ports-summary { grid-template-columns: 1fr; } .ports-summary .s { border-left: 0; border-top: 2px solid var(--color-divider); } .ports-summary .s:first-child { border-top: 0; } .why-item { padding: var(--space-6) var(--space-5); } .stat { padding: var(--space-6) var(--space-4); } .section.pad { padding: calc(var(--space-8) * 1.6) 0; } /* declutter header: brand + burger only; CTA lives in the menu */ .site-header .header-inner > a.btn-primary { display: none; } .header-inner { gap: var(--space-3); flex-wrap: nowrap; } .brand img { height: 42px; } .brand .b-name { font-size: 18px; } .brand .b-sub { font-size: 9.5px; letter-spacing: 0.13em; } .cert-grid { gap: var(--space-8); } .cta-band h2 { font-size: clamp(30px, 8vw, 44px); } .section-head { margin-bottom: var(--space-8); } } /* stack data tables into label/value blocks on small screens */ @media (max-width: 600px) { .table, .table tbody, .table tr, .table td { display: block; width: 100% !important; } .table thead { display: none; } .table tr { padding: var(--space-3) 0; border-bottom: 2px solid var(--color-divider); } .table td { border: 0; padding: 2px 0; } .table td.k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 2px; } } /* Never allow a horizontal scrollbar on the page body. `clip` rather than `hidden`: `overflow-x: hidden` computes overflow-y to `auto`, which turns into a scroll container and silently kills position:sticky on the header. `clip` contains the overflow without creating one. */ html, body { max-width: 100%; overflow-x: clip; } /* ── date picker ───────────────────────────────────────────────────────── Replaces the native popup, which is browser chrome and cannot be styled. Built from the site tokens so it matches the RFQ form. */ .dp-wrap { position: relative; display: block; } .dp-input { width: 100%; padding-right: 46px !important; cursor: pointer; caret-color: transparent; } .dp-input::selection { background: transparent; } .dp-input:not(.dp-has) { color: var(--color-muted); } .dp-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--color-accent); opacity: .62; transition: opacity .18s ease, color .18s ease; } .dp-btn svg { width: 19px; height: 19px; } .dp-wrap:hover .dp-btn, .dp-input:focus + .dp-btn { opacity: 1; } .dp-input[aria-expanded="true"] + .dp-btn { opacity: 1; color: var(--color-accent-700); } .dp-panel { position: fixed; z-index: 120; width: 322px; background: var(--color-bg); border: 1px solid var(--color-divider); border-top: 3px solid var(--color-accent); box-shadow: 0 28px 64px -28px color-mix(in srgb, var(--color-accent-900) 60%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--color-accent-900) 20%, transparent); font-family: var(--font-body); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity .18s ease, transform .2s cubic-bezier(.4, 0, .2, 1), visibility .2s; } .dp-panel.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* header */ .dp-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-3); } .dp-title { flex: 1; min-width: 0; padding: 6px 8px; border: 0; background: none; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; color: var(--color-text); text-align: center; white-space: nowrap; transition: background .16s ease, color .16s ease; } .dp-title b { font-weight: 800; color: var(--color-accent); } .dp-title:hover { background: var(--color-accent-100); } .dp-nav { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--color-divider); background: none; cursor: pointer; color: var(--color-text); transition: background .16s ease, color .16s ease, border-color .16s ease; } .dp-nav svg { width: 15px; height: 15px; } .dp-prev svg { transform: rotate(180deg); } .dp-nav:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .dp-nav:disabled { opacity: .3; cursor: not-allowed; } /* weekday rule */ .dp-wd { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 var(--space-4) 6px; margin-bottom: 4px; border-bottom: 1px solid var(--color-hairline); } .dp-wd span { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); } .dp-wd span.we { color: color-mix(in srgb, var(--color-accent) 62%, transparent); } /* day grid */ .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 var(--space-4) var(--space-3); } .dp-d { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--color-text); position: relative; transition: background .14s ease, color .14s ease; } .dp-d.we { color: color-mix(in srgb, var(--color-text) 74%, transparent); } .dp-d.out { color: color-mix(in srgb, var(--color-text) 26%, transparent); font-weight: 500; } .dp-d:hover:not(:disabled):not(.on) { background: var(--color-accent-100); color: var(--color-accent-700); } .dp-d.now:not(.on)::after { content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); } .dp-d.on { background: var(--color-accent); color: #fff; font-weight: 800; } .dp-d:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .dp-d:disabled { color: color-mix(in srgb, var(--color-text) 18%, transparent); cursor: not-allowed; } .dp-d:disabled:hover { background: none; } /* month / year chooser */ .dp-my { padding: 0 var(--space-4) var(--space-3); } .dp-years, .dp-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .dp-years { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-hairline); } .dp-my button { padding: 9px 4px; border: 0; background: none; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--color-text); transition: background .14s ease, color .14s ease; } .dp-my button:hover { background: var(--color-accent-100); color: var(--color-accent-700); } .dp-my button.on { background: var(--color-accent); color: #fff; font-weight: 800; } /* footer */ .dp-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); background: var(--color-surface); } .dp-sel { font-size: 12px; font-weight: 600; color: var(--color-text); letter-spacing: -0.005em; } .dp-acts { display: flex; gap: var(--space-3); flex: none; } .dp-a { padding: 0; border: 0; background: none; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent); transition: color .16s ease; } .dp-a:hover:not(:disabled) { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; } .dp-a:disabled { color: color-mix(in srgb, var(--color-text) 26%, transparent); cursor: not-allowed; } .dp-note { padding: var(--space-2) var(--space-4) var(--space-3); font-size: 11.5px; line-height: 1.5; color: var(--color-muted); border-top: 1px solid var(--color-hairline); background: var(--color-surface); } @media (max-width: 400px) { .dp-panel { width: calc(100vw - 24px); } } @media print { .dp-panel { display: none !important; } .dp-btn { display: none; } } /* ── hero video stack + quote ──────────────────────────────────────────── One