/* ============================================================= Nexus Shiptrans — Stylesheet Light & Dark themes via [data-theme] on Brand: #FD5523 orange · #062f3a navy · #F4F5F9 light bg ============================================================= */ /* ----------------------------------------------------------------- 1. Theme tokens ----------------------------------------------------------------- */ :root { /* brand */ --brand-orange: #FD5523; --brand-orange-soft: #ffb39a; --brand-orange-tint: #FFF1EC; --brand-navy: #062f3a; --brand-navy-2: #0a3d4a; /* fluid type */ --fs-eyebrow: .78rem; --fs-body: 1rem; --fs-lede: 1.0625rem; --fs-h3: 1.25rem; --fs-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); --fs-display: clamp(2.6rem, 1.4rem + 4.4vw, 4.6rem); /* spacing */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem; /* layout */ --container: 1180px; --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; /* motion */ --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 160ms; --t-base: 280ms; /* shadows */ --shadow-sm: 0 1px 2px rgba(6,47,58,.06), 0 1px 1px rgba(6,47,58,.04); --shadow: 0 12px 30px -12px rgba(6,47,58,.18), 0 4px 10px -4px rgba(6,47,58,.08); --shadow-lg: 0 30px 60px -20px rgba(6,47,58,.25), 0 8px 20px -8px rgba(6,47,58,.10); } /* Light theme (default) */ :root, [data-theme="light"] { --bg: #F4F5F9; --bg-elevated: #FFFFFF; --bg-section: #FFFFFF; --bg-muted: #EEF1F5; --bg-inverse: #062f3a; --text: #062f3a; --text-strong: #04212a; --text-muted: #4a5b63; --text-on-dark: #f4f5f9; --text-on-brand: #ffffff; --border: #e3e6ea; --border-strong: #cdd3d8; --accent: var(--brand-orange); --accent-text: var(--brand-orange); --hero-grad: radial-gradient(1200px 600px at 90% -10%, rgba(253,85,35,.18), transparent 60%), linear-gradient(160deg, #062f3a 0%, #0a3d4a 100%); --card-grad: linear-gradient(180deg, #fff, #f7f8fb); --shadow-card: var(--shadow-sm); --ring: 0 0 0 3px rgba(253,85,35,.25); color-scheme: light; } /* Dark theme */ [data-theme="dark"] { --bg: #04212a; --bg-elevated: #08303d; --bg-section: #062f3a; --bg-muted: #0a3d4a; --bg-inverse: #04212a; --text: #eef2f5; --text-strong: #ffffff; --text-muted: #a8b9c0; --text-on-dark: #f4f5f9; --text-on-brand: #ffffff; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16); --accent: #ff7a52; --accent-text: #ff8a66; --hero-grad: radial-gradient(1200px 600px at 90% -10%, rgba(253,85,35,.28), transparent 60%), linear-gradient(160deg, #04212a 0%, #08303d 100%); --card-grad: linear-gradient(180deg, #08303d, #062f3a); --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px -10px rgba(0,0,0,.5); --shadow: 0 16px 40px -16px rgba(0,0,0,.55); --ring: 0 0 0 3px rgba(255,122,82,.35); color-scheme: dark; } /* ----------------------------------------------------------------- 2. Reset & base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: var(--fs-body); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } img, svg { max-width: 100%; display: block; } a { color: var(--accent-text); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--brand-orange); } h1, h2, h3, h4 { font-family: 'Playfair Display', 'Georgia', serif; color: var(--text-strong); margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.01em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-family: 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -.005em; } p { margin: 0 0 1em; color: var(--text-muted); } ::selection { background: var(--brand-orange); color: #fff; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 0; padding: .75rem 1rem; background: var(--brand-orange); color: #fff; font-weight: 600; z-index: 1000; } .skip-link:focus { left: 1rem; top: 1rem; } /* ----------------------------------------------------------------- 3. Layout primitives ----------------------------------------------------------------- */ .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .section { padding: clamp(3rem, 4vw + 2rem, 6rem) 0; } .section--tight { padding: 3rem 0; } .section--alt { background: var(--bg-section); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section--inverse { background: var(--hero-grad); color: var(--text-on-dark); } .section--inverse h1, .section--inverse h2, .section--inverse h3 { color: #fff; } .section--inverse p { color: rgba(255,255,255,.78); } .eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .65rem; } .divider { width: 64px; height: 3px; background: var(--brand-orange); border-radius: 2px; margin: 0 0 1.4rem; } .lede { font-size: var(--fs-lede); line-height: 1.65; color: var(--text-muted); max-width: 62ch; } .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------- 4. Buttons ----------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.4rem; font: 600 .95rem/1 'Inter', sans-serif; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--brand-orange); color: #fff; box-shadow: 0 6px 18px -8px rgba(253,85,35,.7); } .btn--primary:hover { background: #e84a1d; color: #fff; } .btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--brand-orange); color: var(--brand-orange); } .btn--inverse { background: #fff; color: var(--brand-navy); } .btn--inverse:hover { background: var(--brand-orange-tint); color: var(--brand-orange); } .btn--lg { padding: 1rem 1.6rem; font-size: 1rem; } /* ----------------------------------------------------------------- 5. Header / Nav ----------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--border); transition: background-color var(--t-base), box-shadow var(--t-base); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } /* Navbar inner — uniquely named so Bootstrap's .nav can't override it */ .site-header__inner { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; display: flex; align-items: center; flex-wrap: nowrap; gap: 1rem; padding: .9rem 0; } .brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text-strong); } .brand:hover { color: var(--text-strong); } .brand__mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--brand-navy); color: var(--brand-orange); font: 700 1.05rem/1 'Playfair Display', serif; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); } [data-theme="dark"] .brand__mark { background: #061d24; } .brand__logo { height: 38px; width: auto; display: block; border-radius: 6px; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font: 700 1.05rem/1 'Playfair Display', serif; letter-spacing: -.005em; color: var(--brand-orange); } .brand__sub { font-size: .72rem; color: var(--text-muted); margin-top: .2rem; letter-spacing: .04em; } .brand--footer .brand__mark { background: var(--brand-navy-2); } .nav__primary { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; } .nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; font: 500 .92rem/1 'Inter', sans-serif; color: var(--text); border-radius: 8px; } .nav__link:hover { color: var(--brand-orange); background: var(--bg-muted); } .nav__link.is-active { color: var(--brand-orange); } .nav__link.is-active::after { content:""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem; height: 2px; background: var(--brand-orange); border-radius: 2px; } .caret { transition: transform var(--t-fast); } .has-dropdown:hover .caret, .has-dropdown.is-open .caret { transform: rotate(180deg); } .has-dropdown { position: relative; } .dropdown { position: absolute; top: calc(100% + .25rem); left: 0; min-width: 320px; padding: .5rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown, .has-dropdown.is-open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown li a { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; color: var(--text); border-radius: 8px; } .dropdown li a strong { color: var(--text-strong); font-weight: 600; } .dropdown li a span { color: var(--text-muted); font-size: .82rem; } .dropdown li a:hover { background: var(--bg-muted); color: var(--brand-orange); } .dropdown li a:hover strong { color: var(--brand-orange); } .nav__actions { display: flex; align-items: center; gap: .6rem; margin-left: .8rem; } .nav__toggle { display: none; align-items: center; justify-content: center; background: transparent; border: 0; padding: .4rem; cursor: pointer; margin-left: auto; position: relative; z-index: 10; color: var(--text-strong); font-size: 1.7rem; transition: color var(--t-fast), transform var(--t-fast); } .nav__toggle:hover { color: var(--brand-orange); } .nav__toggle .bi-list { display: inline-block; } .nav__toggle .bi-x-lg { display: none; } .nav__toggle[aria-expanded="true"] .bi-list { display: none; } .nav__toggle[aria-expanded="true"] .bi-x-lg { display: inline-block; } .theme-toggle { width: 40px; height: 40px; display: inline-grid; place-items: center; background: var(--bg-muted); color: var(--text); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .theme-toggle:hover { color: var(--brand-orange); transform: rotate(15deg); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Drawer-only chrome — hidden on desktop, shown on mobile via the media block below. */ .nav__drawer-head { display: none; } .nav__close { display: none; } .nav__backdrop { display: none; } /* Mobile navbar — drawer slides in from the LEFT with a soft backdrop dim and an in-drawer close (X) button. Selectors are scoped to `.site-header` so Bootstrap / third-party CSS can't override them when both are loaded. */ @media (max-width: 1024px) { .site-header__inner { gap: .6rem; } .site-header .nav__toggle { display: inline-flex !important; order: 3; } /* Remove backdrop-filter on mobile — it creates a containing block that traps position:fixed children (drawer + backdrop) inside the header bar instead of the viewport. Use solid bg instead. */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); } /* Backdrop — dims the page behind the drawer. Dual selectors: .site-header scope (desktop fallback) + body scope (mobile, where JS moves elements out of the sticky header). */ .site-header .nav__backdrop, body > .nav__backdrop { display: block; position: fixed; inset: 0; background: rgba(2, 16, 21, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease); z-index: 998; } .site-header .nav__backdrop.is-visible, body > .nav__backdrop.is-visible { opacity: 1; visibility: visible; } /* Drawer panel — slides from the LEFT, full viewport height */ .site-header .nav__primary, body > .nav__primary { display: flex !important; position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 340px); height: 100vh; height: 100dvh; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: var(--bg-elevated); padding: 0 1.1rem 2rem; margin: 0; transform: translateX(-100%); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--border); z-index: 999; box-shadow: 0 0 0 transparent; } .site-header .nav__primary.is-open, body > .nav__primary.is-open { transform: translateX(0); box-shadow: 16px 0 40px -10px rgba(0, 0, 0, .45); } /* Sticky drawer header — brand on the left, close (X) button on the right */ .site-header .nav__drawer-head, .nav__primary > .nav__drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; position: sticky; top: 0; margin: 0 -1.1rem 1rem; padding: 1rem 1.1rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border); z-index: 2; } .site-header .nav__drawer-head .brand__sub, .nav__primary > .nav__drawer-head .brand__sub { display: block; font-size: .7rem; } .site-header .nav__close, .nav__primary .nav__close { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--bg-muted); color: var(--text-strong); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 1.1rem; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast); } .site-header .nav__close:hover, .site-header .nav__close:focus-visible, .nav__primary .nav__close:hover, .nav__primary .nav__close:focus-visible { background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); transform: rotate(90deg); } .site-header .nav__list, .nav__primary > .nav__list { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; padding: 0; margin: 0; } .site-header .nav__link, .nav__primary .nav__link { padding: .9rem 1rem; font-size: 1rem; width: 100%; border-radius: 10px; } .site-header .nav__link.is-active::after, .nav__primary .nav__link.is-active::after { display: none; } .site-header .nav__link.is-active, .nav__primary .nav__link.is-active { background: var(--brand-orange-tint); } [data-theme="dark"] .site-header .nav__link.is-active, [data-theme="dark"] .nav__primary .nav__link.is-active { background: rgba(253,85,35,.12); } /* Services sub-menu — collapsible accordion inside the drawer */ .site-header .has-dropdown .dropdown, .nav__primary .has-dropdown .dropdown { position: static; box-shadow: none; border: 0; padding: 0 0 0 .8rem; background: transparent; min-width: 0; margin: 0; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transform: none; transition: max-height var(--t-base) var(--ease), opacity var(--t-base) var(--ease), padding var(--t-base) var(--ease); } .site-header .has-dropdown.is-open .dropdown, .nav__primary .has-dropdown.is-open .dropdown { max-height: 600px; opacity: 1; visibility: visible; padding: .25rem 0 .5rem .8rem; } .site-header .has-dropdown.is-open > .nav__link .caret, .nav__primary .has-dropdown.is-open > .nav__link .caret { transform: rotate(180deg); } .site-header .nav__actions, .nav__primary > .nav__actions { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); width: 100%; } .site-header .nav__cta, .nav__primary .nav__cta { flex: 1; text-align: center; } /* Brand in the top bar stays compact; full brand shows inside the drawer head */ .site-header__inner > .brand .brand__sub { display: none; } } /* Phone — tighter top bar */ @media (max-width: 480px) { .site-header__inner { padding: .7rem 0; gap: .4rem; } .site-header__inner > .brand .brand__mark { width: 34px; height: 34px; font-size: .95rem; } .site-header__inner > .brand .brand__name { font-size: .95rem; } } /* ----------------------------------------------------------------- 6. Hero ----------------------------------------------------------------- */ .hero { position: relative; background: var(--hero-grad); color: var(--text-on-dark); overflow: hidden; isolation: isolate; } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 400px at 10% 100%, rgba(253,85,35,.16), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px); z-index: -1; } .hero__inner { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); } .hero__badge { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .85rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; margin-bottom: 1.4rem; } .hero__badge .dot { width: 8px; height: 8px; background: var(--brand-orange); border-radius: 50%; box-shadow: 0 0 0 4px rgba(253,85,35,.25); } .hero__title { font-size: var(--fs-display); color: #fff; margin-bottom: 1rem; max-width: 18ch; } .hero__title em { color: var(--brand-orange); font-style: italic; } .hero__subtitle { font-size: clamp(1rem, .85rem + .5vw, 1.2rem); color: rgba(255,255,255,.78); max-width: 56ch; margin-bottom: 2rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; } .hero__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden; max-width: 760px; } .hero__stat { background: rgba(255,255,255,.04); padding: 1.1rem 1rem; text-align: center; } .hero__stat .num { display: block; font: 700 1.7rem/1.1 'Playfair Display', serif; color: #fff; } .hero__stat .lbl { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); } @media (max-width: 700px) { .hero__strip { grid-template-columns: repeat(2, 1fr); } } /* ----------------------------------------------------------------- 7. Page hero (sub pages) — Vibrant treatment matching home ----------------------------------------------------------------- */ .page-hero { position: relative; background: radial-gradient(50% 50% at 18% 22%, rgba(253,85,35,.55) 0%, rgba(253,85,35,0) 60%), radial-gradient(60% 60% at 88% 18%, rgba(255,138,82,.45) 0%, rgba(255,138,82,0) 60%), radial-gradient(60% 60% at 78% 90%, rgba(10,61,74,.85) 0%, rgba(10,61,74,0) 60%), radial-gradient(50% 50% at 8% 90%, rgba(253,85,35,.30) 0%, rgba(253,85,35,0) 60%), linear-gradient(135deg, #03161c 0%, #062f3a 50%, #08303d 100%); color: var(--text-on-dark); padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3.5rem, 6vw, 5rem); border-bottom: 4px solid var(--brand-orange); overflow: hidden; isolation: isolate; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); pointer-events: none; z-index: 0; } .page-hero::after { content: ''; position: absolute; width: 380px; height: 380px; top: -120px; right: -120px; background: radial-gradient(circle, rgba(253,85,35,.35), transparent 70%); filter: blur(50px); border-radius: 50%; z-index: 0; animation: pageHeroBlob 14s ease-in-out infinite alternate; } @keyframes pageHeroBlob { from { transform: translate(0, 0); } to { transform: translate(-30px, 20px); } } .page-hero > .container { position: relative; z-index: 1; } .page-hero h1 { color: #fff; max-width: 22ch; margin-bottom: .75rem; animation: pageHeroIn .8s var(--ease) both; } .page-hero p { color: rgba(255,255,255,.78); max-width: 64ch; animation: pageHeroIn .9s var(--ease) .15s both; } .page-hero .crumbs { color: rgba(255,255,255,.6); font-size: .85rem; margin-bottom: 1rem; letter-spacing: .04em; animation: pageHeroIn .7s var(--ease) both; } .page-hero .crumbs a { color: rgba(255,255,255,.85); } .page-hero .crumbs a:hover { color: var(--brand-orange); } .page-hero .badge { animation: pageHeroIn .9s var(--ease) .1s both; } @keyframes pageHeroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* Floating particles — auto-injected by main.js into every .page-hero. */ .page-hero__icons { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .page-hero__icons .ph-icon { position: absolute; color: rgba(255,255,255,.10); filter: drop-shadow(0 4px 12px rgba(253,85,35,.18)); will-change: transform; } .page-hero__icons .ph-icon--accent { color: rgba(253,85,35,.30); } .page-hero__icons .ph-icon--big { font-size: 2.2rem; } .page-hero__icons .ph-icon--mid { font-size: 1.6rem; } .page-hero__icons .ph-icon--sm { font-size: 1.2rem; } /* Motion modes — applied via JS classes for variety */ .page-hero__icons .ph-icon--drift { animation: phDrift 14s ease-in-out infinite; } .page-hero__icons .ph-icon--spin { animation: phSpin 26s linear infinite; } .page-hero__icons .ph-icon--rollX { animation: phRollX 11s ease-in-out infinite; } .page-hero__icons .ph-icon--cross { animation: phCross 22s linear infinite; } .page-hero__icons .ph-icon--pulse { animation: phPulse 3.4s ease-in-out infinite; } @keyframes phDrift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(18px, -14px) rotate(4deg); } 50% { transform: translate(-12px, 18px) rotate(-3deg); } 75% { transform: translate(12px, 8px) rotate(2deg); } } @keyframes phSpin { to { transform: rotate(360deg); } } @keyframes phRollX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(28px); } } @keyframes phCross { 0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(-680px, 60px) rotate(-15deg); opacity: 0; } } @keyframes phPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .55; } } /* Ship + container SVG sprites — float gently with the icons */ .page-hero__icons .ph-svg { position: absolute; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(253,85,35,.18)); } .page-hero__icons .ph-svg--ship { top: 52%; left: 16%; width: 76px; height: 32px; color: rgba(253,85,35,.30); animation: phDrift 18s ease-in-out infinite, phShipBob 4s ease-in-out infinite; } .page-hero__icons .ph-svg--container { top: 30%; left: 26%; width: 56px; height: 36px; color: rgba(255,255,255,.16); animation: phDrift 16s ease-in-out infinite reverse 0.5s; } @keyframes phShipBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } /* Dashed flight-path streak across the hero */ .page-hero__icons .ph-flightpath { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; } .page-hero__icons .ph-flightpath path { animation: phDashScroll 18s linear infinite; } @keyframes phDashScroll { to { stroke-dashoffset: -200; } } /* Tighten on small screens — hide noisier SVGs */ @media (max-width: 600px) { .page-hero__icons .ph-icon--big { font-size: 1.6rem; } .page-hero__icons .ph-icon--mid { font-size: 1.2rem; } .page-hero__icons .ph-icon--sm { font-size: 1rem; } .page-hero__icons .ph-svg--ship, .page-hero__icons .ph-svg--container { display: none; } } @media (prefers-reduced-motion: reduce) { .page-hero h1, .page-hero p, .page-hero .crumbs, .page-hero .badge, .page-hero::after, .page-hero__icons .ph-icon, .page-hero__icons .ph-svg, .page-hero__icons .ph-flightpath path { animation: none !important; } } /* ----------------------------------------------------------------- 8. Cards ----------------------------------------------------------------- */ .card { position: relative; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-card); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-orange-soft); } .card__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--brand-orange-tint); color: var(--brand-orange); border-radius: 10px; margin-bottom: .9rem; } [data-theme="dark"] .card__icon { background: rgba(253,85,35,.14); } .card h3 { margin-bottom: .35rem; color: var(--text-strong); } .card p { color: var(--text-muted); font-size: .96rem; margin-bottom: .8rem; } .card a.more { font-weight: 600; font-size: .9rem; color: var(--accent-text); display: inline-flex; align-items: center; gap: .35rem; } .card a.more::after { content: "→"; transition: transform var(--t-fast); } .card a.more:hover::after { transform: translateX(3px); } .card--accent { border-left: 3px solid var(--brand-orange); padding-left: 1.4rem; } .stat-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.2rem; text-align: center; } .stat-card .num { display: block; font: 700 2rem/1.1 'Playfair Display', serif; color: var(--brand-orange); letter-spacing: -.01em; } .stat-card .lbl { display: block; margin-top: .2rem; color: var(--text-muted); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; } /* ----------------------------------------------------------------- 9. Section blocks ----------------------------------------------------------------- */ .section__head { max-width: 720px; margin-bottom: 2.5rem; } .section__head--center { text-align: center; margin-inline: auto; } .section__head--center .divider { margin-inline: auto; } .feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; } .feature-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text); } .feature-list li::before { content: "›"; color: var(--brand-orange); font-weight: 700; margin-top: 0; font-size: 1.1rem; line-height: 1.4; } /* Industries grid */ .industry { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.1rem; display: flex; align-items: center; gap: .8rem; transition: border-color var(--t-fast), transform var(--t-fast); } .industry:hover { border-color: var(--brand-orange); transform: translateY(-2px); } .industry__icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--bg-muted); color: var(--brand-orange); border-radius: 8px; } .industry h4 { margin: 0; font-family: 'Inter'; font-size: .98rem; } .industry p { margin: .15rem 0 0; font-size: .82rem; } /* Testimonial */ .testimonial { background: var(--card-grad); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; position: relative; box-shadow: var(--shadow-card); } .testimonial::before { content: "“"; position: absolute; top: -.4rem; left: 1.2rem; font: 700 4rem/1 'Playfair Display', serif; color: var(--brand-orange); opacity: .35; } .testimonial p { color: var(--text); font-size: 1rem; line-height: 1.65; font-style: italic; } .testimonial__who { margin-top: 1rem; display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--border); padding-top: .9rem; } .testimonial__who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-navy); color: var(--brand-orange); display: grid; place-items: center; font-weight: 700; } .testimonial__who .av--photo { object-fit: cover; display: block; border: 2px solid var(--brand-orange); background: var(--bg-muted); } .testimonial__who strong { color: var(--text-strong); display: block; font-size: .92rem; } .testimonial__who span { color: var(--text-muted); font-size: .82rem; } /* CTA band */ .cta-band { background: var(--brand-navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(253,85,35,.35), transparent 70%); } .cta-band h2 { color: #fff; max-width: 22ch; margin-bottom: .4rem; position: relative; } .cta-band p { color: rgba(255,255,255,.78); max-width: 56ch; margin: 0; position: relative; } .cta-band .actions { display: flex; gap: .7rem; flex-wrap: wrap; position: relative; } /* FAQ accordion */ .accordion { border-top: 1px solid var(--border); } .accordion__item { border-bottom: 1px solid var(--border); } .accordion__btn { width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0; padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 600 1.02rem/1.4 'Inter', sans-serif; color: var(--text-strong); } .accordion__btn:hover { color: var(--brand-orange); } .accordion__btn .plus { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 50%; color: var(--brand-orange); transition: transform var(--t-fast), border-color var(--t-fast), background-color var(--t-fast); } .accordion__btn[aria-expanded="true"] .plus { transform: rotate(45deg); background: var(--brand-orange); color: #fff; border-color: var(--brand-orange); } .accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--t-base) var(--ease); } .accordion__panel-inner { padding: 0 0 1.2rem; color: var(--text-muted); } /* Comparison table */ .table { width: 100%; border-collapse: collapse; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table th, .table td { padding: 1rem 1.1rem; text-align: left; } .table thead th { background: var(--brand-navy); color: #fff; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; } .table tbody tr + tr td { border-top: 1px solid var(--border); } .table tbody td { color: var(--text); } .table tbody td:first-child { font-weight: 600; color: var(--text-strong); } /* Process steps */ .steps { display: grid; gap: 1rem; } .steps__item { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); } .steps__num { width: 56px; height: 56px; display: grid; place-items: center; background: var(--brand-navy); color: var(--brand-orange); font: 700 1.2rem/1 'Playfair Display', serif; border-radius: 12px; } [data-theme="dark"] .steps__num { background: #061d24; } .steps__item h4 { margin: 0 0 .25rem; color: var(--text-strong); } .steps__item p { margin: 0; } /* Blog cards */ .post { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-fast), border-color var(--t-fast); } .post:hover { transform: translateY(-3px); border-color: var(--brand-orange-soft); } .post__cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-2)); position: relative; overflow: hidden; display: block; } .post__cover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .post__cover--photo:hover img { transform: scale(1.05); } .post__cover::after { content: attr(data-tag); position: absolute; left: 1rem; bottom: 1rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-orange); background: rgba(0,0,0,.4); padding: .35rem .65rem; border-radius: 999px; } .post__cover svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .25; } .post__body { padding: 1.2rem 1.3rem 1.4rem; } .post__meta { font-size: .78rem; color: var(--text-muted); letter-spacing: .04em; } .post h3 { margin: .35rem 0 .4rem; font-family: 'Playfair Display', serif; font-size: 1.2rem; } .post p { font-size: .94rem; } /* Forms */ .form { display: grid; gap: 1rem; } .field { display: flex; flex-direction: column; gap: .35rem; } .field label { font-size: .85rem; font-weight: 600; color: var(--text-strong); } .field .hint { font-size: .78rem; color: var(--text-muted); } .field input, .field select, .field textarea { padding: .85rem 1rem; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; font: 400 .98rem/1.4 'Inter', sans-serif; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 4px rgba(253,85,35,.15); } .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 600px) { .field--row { grid-template-columns: 1fr; } } .honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; } /* Required-field asterisk — applied automatically to any