@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* ============ TOKENS ============ */ /* 'IBM Plex Sans Arabic' leads every stack, but its unicode-range means it only ever renders Arabic glyphs; Latin falls through to the next face. */ :root { --ink: #150A10; --surface: #1E1018; --card: #271620; --line: #3D2230; --maroon: #8A1538; --maroon-hot: #C42B57; --sand: #D8B36A; --bone: #F2E8E4; --muted: #AD93A0; --figure-head: #F2E8E4; --logo-filter: none; --nav-bg: rgba(21, 10, 16, .82); --hero-glow-a: rgba(138,21,56,.40); --hero-glow-b: rgba(216,179,106,.07); --cta-glow: rgba(138,21,56,.45); --reach-tint: rgba(138,21,56,.16); --btn-shadow: rgba(196,43,87,.35); --water: #1A0D14; --spot: rgba(216,179,106,.13); --grid: rgba(242,232,228,.028); --serif: 'IBM Plex Sans Arabic', Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'IBM Plex Sans Arabic', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Courier New', monospace; } /* Dark is the house style; light is an explicit visitor choice. */ :root[data-theme="light"] { --ink: #FAF6F0; --surface: #F1EAE0; --card: #FFFFFF; --line: #E3D6C6; --maroon: #8A1538; --maroon-hot: #A31942; --sand: #8A6A2F; --bone: #26141B; --muted: #70595F; --figure-head: #26141B; --logo-filter: brightness(0) opacity(.88); --nav-bg: rgba(250, 246, 240, .85); --hero-glow-a: rgba(138,21,56,.10); --hero-glow-b: rgba(138,106,47,.08); --cta-glow: rgba(138,21,56,.12); --reach-tint: rgba(138,21,56,.05); --btn-shadow: rgba(138,21,56,.25); --water: #EDE2D2; --spot: rgba(138,21,56,.08); --grid: rgba(38,20,27,.04); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ============ ARABIC / RTL ============ */ /* Arabic sets dir="rtl" on ; these flip the handful of places that use physical directions. Everything else is flex/grid and mirrors on its own. */ [dir="rtl"] body { font-family: var(--sans); } [dir="rtl"] .eyebrow::before { content: none; } [dir="rtl"] .eyebrow::after { content: " //"; color: var(--maroon-hot); } [dir="rtl"] .nav-progress { left: auto; right: 0; } [dir="rtl"] .totop { right: auto; left: 26px; } [dir="rtl"] .map-open { left: auto; right: 16px; } [dir="rtl"] .stab { text-align: right; } [dir="rtl"] .tl-does li { padding-left: 0; padding-right: 26px; } [dir="rtl"] .tl-does li::before { left: auto; right: 0; } [dir="rtl"] .stat { border-left: 0; border-right: 1px solid var(--line); } [dir="rtl"] .stat:first-child { border-right: 0; } [dir="rtl"] .nav-links a { font-size: .95rem; text-transform: none; } [dir="rtl"] .nav-links a i { margin-right: 0; margin-left: 8px; font-size: .85em; } /* In Arabic this line carries the English tagline, so it needs LTR run direction or the trailing full stop jumps to the wrong end. */ [dir="rtl"] .arch { padding: 6px 22px 6px 0; } [dir="rtl"] .arch::before { transform-origin: center right; } [dir="rtl"] .arch:hover { transform: translateX(-7px); } /* Phone numbers, emails and URLs are LTR runs: without isolation the leading "+" of a number is pushed to the far end. */ [dir="rtl"] .contact-list a { direction: ltr; } /* The map is drawn in a fixed LTR coordinate space; its labels use text-anchor, which would otherwise flip and collide with the pin. */ [dir="rtl"] .mapbox svg { direction: ltr; } /* Arabic reads better a touch larger and with more line height. */ [dir="rtl"] .lede, [dir="rtl"] .tl-panel > p { line-height: 1.85; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .tl-panel h3, [dir="rtl"] .reach h3 { font-style: normal; } [dir="rtl"] h1 em, [dir="rtl"] h2 em { font-style: normal; } /* The mono/serif faces have no Arabic; Plex Arabic carries these instead. */ /* Arabic script is cursive - letter-spacing breaks the joins, so it is switched off wholesale rather than element by element. */ [dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: normal !important; } /* Plex Arabic covers only the Arabic block, so the space character fell through to the monospace fallback - wide gaps that read as tracking. Redefining --mono for Arabic sends those spaces to the sans stack. */ [dir="rtl"] { --mono: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Hamburger: hidden on desktop, the only way into the menu on mobile. */ .nav-toggle { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .nav-toggle:hover { border-color: var(--sand); } .nav-toggle span { display: block; width: 15px; height: 1.5px; background: var(--muted); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav.open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav.open .nav-toggle span:nth-child(2) { opacity: 0; } .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .lang-toggle { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--sans); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0; } .lang-toggle:hover { color: var(--sand); border-color: var(--sand); } .lang-toggle .to-ar { display: inline; } .lang-toggle .to-en { display: none; } [dir="rtl"] .lang-toggle .to-ar { display: none; } [dir="rtl"] .lang-toggle .to-en { display: inline; } body { font-family: var(--sans); background: var(--ink); color: var(--bone); line-height: 1.65; overflow-x: hidden; transition: opacity .2s ease; } body.langswap { opacity: 0; } /* Theme switch: the outgoing theme blurs away over the incoming one. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { z-index: 1; } ::view-transition-old(root) { z-index: 2; animation: theme-blur-out .5s ease-out both; } @keyframes theme-blur-out { from { filter: blur(0); opacity: 1; } to { filter: blur(8px); opacity: 0; } } ::selection { background: var(--maroon); color: #F2E8E4; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } section { scroll-margin-top: 90px; } /* ============ PARTICLE FIELD ============ */ .pcanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .orbit-stage.particles svg.figure { opacity: 0; } /* ============ SCROLLY TIMELINE (desktop) ============ */ .tl-space { position: relative; } .timeline.scrolly { position: sticky; top: 88px; z-index: 1; } .timeline.scrolly .tl-ghost { position: absolute; inset-inline-end: -10px; top: 34%; font-family: var(--serif); font-size: clamp(8rem, 17vw, 14rem); line-height: 1; color: var(--bone); opacity: .05; pointer-events: none; font-variant-numeric: tabular-nums; z-index: 0; } .timeline.scrolly .tl-rail, .timeline.scrolly .tl-panels { position: relative; z-index: 1; } .timeline.scrolly .tl-panels { display: flex; overflow: hidden; } .timeline.scrolly .tl-panel { display: block; flex: 0 0 100%; transform: translateX(var(--tlx, 0%)); opacity: 0; /* Panels move in whole steps and cross-fade, so neighbouring years are never half-visible side by side while the reader scrolls. */ transition: opacity .3s ease, transform .55s cubic-bezier(.25,.7,.25,1); animation: none; } .timeline.scrolly .tl-panel.active { opacity: 1; transition-delay: .12s, 0s; } /* ============ HERO ENTRANCE ============ */ @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes heroStage { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .js .hero .eyebrow { animation: heroRise .7s cubic-bezier(.2,.7,.3,1) .05s both; } .js .hero h1 { animation: heroRise .7s cubic-bezier(.2,.7,.3,1) .14s both; } .js .hero .hero-sub { animation: heroRise .7s cubic-bezier(.2,.7,.3,1) .30s both; } .js .hero .cta-row { animation: heroRise .7s cubic-bezier(.2,.7,.3,1) .38s both; } .js .hero .chip-row { animation: heroRise .7s cubic-bezier(.2,.7,.3,1) .46s both; } .js .orbit-stage { animation: heroStage 1s ease .25s both; } /* ============ CURSOR SPOTLIGHT ============ */ @media (hover: hover) { .spot { position: relative; } .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%); } .spot:hover::after { opacity: 1; } } /* ============ SCROLL REVEAL ============ */ /* Hidden-until-revealed only when JS is actually running, so the page is never blank for crawlers or blocked scripts. */ .js .rv, .js .rv-group > * { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .rv.in, .rv-group.in > * { opacity: 1; transform: none; } .rv-group.in > *:nth-child(2) { transition-delay: .08s; } .rv-group.in > *:nth-child(3) { transition-delay: .16s; } .rv-group.in > *:nth-child(4) { transition-delay: .24s; } .rv-group.in > *:nth-child(5) { transition-delay: .32s; } .rv-group.in > *:nth-child(6) { transition-delay: .40s; } .rv-group.in > *:nth-child(n+7) { transition-delay: .48s; } /* ============ NAV ============ */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; position: relative; } .nav .logo img { height: 30px; width: auto; display: block; filter: var(--logo-filter); } .nav-links { display: flex; gap: 24px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .nav-links a { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 0; } .nav-links a i { font-style: normal; color: var(--sand); margin-right: 7px; opacity: .75; } .nav-links a:hover { color: var(--bone); } .nav-links a.active { color: var(--bone); } .nav-links a.active i { color: var(--maroon-hot); opacity: 1; } /* Logical margin, not margin-left: in Arabic the bar mirrors, so the controls must push to the inline end or they collide with the menu. */ .nav-cta { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; } /* Reading progress: a hairline along the very top edge of the bar. */ .nav-progress { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--maroon-hot), var(--sand)); } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { color: var(--sand); border-color: var(--sand); } .theme-toggle .sun { display: none; } :root[data-theme="light"] .theme-toggle .moon { display: none; } :root[data-theme="light"] .theme-toggle .sun { display: inline; } .btn { display: inline-block; padding: 14px 30px; border-radius: 3px; font-size: .95rem; font-weight: 600; text-decoration: none; letter-spacing: .02em; } .btn-primary { background: linear-gradient(135deg, var(--maroon-hot), var(--maroon)); color: #F2E8E4; box-shadow: 0 6px 28px var(--btn-shadow); } .btn-primary:hover { filter: brightness(1.12); } .btn-ghost { color: var(--sand); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--sand); } .nav .btn { padding: 10px 20px; font-size: .85rem; } .nav-drawer-cta { display: none; } /* ============ GO TO TOP ============ */ .totop { position: fixed; right: 26px; bottom: 26px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--nav-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--sand); font-size: 1.05rem; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, border-color .2s ease; } .totop.show { opacity: 1; pointer-events: auto; transform: none; } .totop:hover { border-color: var(--sand); } /* ============ HERO ============ */ .hero { position: relative; padding: 84px 0; background-color: var(--ink); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), radial-gradient(ellipse 900px 540px at 80% 8%, var(--hero-glow-a), transparent 65%), radial-gradient(ellipse 640px 420px at 8% 95%, var(--hero-glow-b), transparent 60%); background-size: 54px 54px, 54px 54px, auto, auto; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; } .eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sand); margin-bottom: 26px; } .eyebrow::before { content: "// "; color: var(--maroon-hot); } h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; } h1 em { font-style: italic; color: var(--sand); } .hero-sub { font-size: 1.1rem; color: var(--muted); max-width: 36em; margin-top: 18px; } .hero-sub strong { color: var(--bone); font-weight: 600; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: center; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .chip { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; } .chip b { color: var(--sand); font-weight: 600; } /* Orbit stage */ .orbit-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; } .orbit-stage svg.figure { width: min(220px, 55%); height: auto; display: block; } .arc { fill: none; stroke-linecap: round; } .arc.hot { stroke: var(--maroon-hot); stroke-width: 7; opacity: .9; } .arc.sand { stroke: var(--sand); stroke-width: 7; opacity: .95; } .arc.dim { stroke: var(--maroon); stroke-width: 7; opacity: .6; } .figure-head { fill: none; stroke: var(--figure-head); stroke-width: 7; } .orbit-ring { position: absolute; width: 360px; height: 360px; border: 1px dashed var(--line); border-radius: 50%; animation: orbit 60s linear infinite; } .orbit-ring.far { width: 460px; height: 460px; animation-duration: 90s; animation-direction: reverse; opacity: .7; } .orbit-ring .sat { position: absolute; width: 12px; height: 12px; top: -6px; left: calc(50% - 6px); /* Counter-rotation keeps each module label upright while its ring spins. */ animation: orbit 60s linear infinite reverse; } .orbit-ring.far .sat { animation: orbit 90s linear infinite; } .sat .dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 12px rgba(216,179,106,.7); } .sat.m .dot { background: var(--maroon-hot); box-shadow: 0 0 12px rgba(196,43,87,.7); } .sat .tag { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-weight: 400; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; opacity: .6; transition: opacity .35s ease, color .35s ease; } .orbit-stage:hover .sat .tag { opacity: 1; color: var(--sand); } .figure circle, .figure path { will-change: transform; } .orbit-ring .sat.p2 { top: calc(50% - 6px); left: -6px; } .orbit-ring .sat.p3 { top: auto; bottom: -6px; left: calc(50% - 6px); } .orbit-ring .sat.p4 { top: calc(50% - 6px); left: auto; right: -6px; } @keyframes orbit { to { transform: rotate(360deg); } } .pulse-ring { position: absolute; width: 300px; height: 300px; border: 1px solid var(--maroon-hot); border-radius: 50%; animation: pulse 3.6s ease-out infinite; opacity: 0; } .pulse-ring.late { animation-delay: 1.8s; } @keyframes pulse { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } } /* ============ STAT BAND ============ */ .stat-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .stat { padding: 28px 20px; text-align: center; border-left: 1px solid var(--line); } .stat:first-child { border-left: none; } .stat .num { font-family: var(--serif); font-size: 1.9rem; color: var(--bone); line-height: 1.15; } .stat .num i { font-style: normal; color: var(--sand); } .stat .lbl { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } /* ============ SECTIONS ============ */ section { padding: 88px 0; } .sec-eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--maroon-hot); margin-bottom: 16px; } h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; text-wrap: balance; max-width: 22em; } h2 em { font-style: italic; color: var(--sand); } .lede { color: var(--muted); font-size: 1.05rem; max-width: 42em; margin-top: 16px; } .lede strong { color: var(--bone); } /* ============ LAW TIMELINE ============ */ .timeline { margin-top: 46px; } .tl-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; } /* Progress fill: draws along the rail up to the active year. */ .tl-fill { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--maroon), var(--maroon-hot)); transition: width .5s ease; pointer-events: none; } [dir="rtl"] .tl-fill { left: auto; right: 0; background: linear-gradient(270deg, var(--maroon), var(--maroon-hot)); } .tl-year { position: relative; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 10px 18px; cursor: pointer; font-family: var(--sans); color: var(--muted); text-align: center; min-width: 92px; transition: color .2s ease, border-color .2s ease; } .tl-year b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.1; } .tl-year small { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 5px; opacity: .85; } /* The node sits on the rail itself, so the row reads as a timeline. */ .tl-year::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--line); transition: background .2s ease, transform .2s ease; } .tl-year:hover { color: var(--bone); } .tl-year.active { color: var(--sand); border-bottom-color: var(--maroon-hot); } .tl-year.active::after { background: var(--maroon-hot); transform: scale(1.35); } .tl-year.now b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--maroon-hot); vertical-align: super; margin-left: 5px; } .tl-panels { margin-top: 34px; min-height: 300px; } .tl-panel { display: none; } .tl-panel.active { display: block; animation: panelin .45s ease; } .tl-tag { display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; margin-bottom: 18px; } .tl-tag.is-new { color: #F2E8E4; background: var(--maroon); border-color: var(--maroon); } .tl-panel h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--bone); margin-bottom: 12px; } .tl-panel > p { color: var(--muted); max-width: 56em; font-size: 1.02rem; } .tl-does { list-style: none; margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 28px; } .tl-does li { position: relative; padding-left: 26px; color: var(--muted); font-size: .95rem; } .tl-does li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 2px; background: var(--maroon-hot); } .tl-does li b { color: var(--bone); font-weight: 600; } .tl-foot { margin-top: 40px; font-size: .82rem; color: var(--muted); opacity: .8; max-width: 62em; } /* ============ SUITE EXPLORER ============ */ .sec-dark { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .suite { display: grid; grid-template-columns: 300px 1fr; gap: 34px; margin-top: 48px; align-items: start; } .suite-tabs { display: grid; gap: 12px; } .stab { display: flex; gap: 16px; align-items: flex-start; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; cursor: pointer; color: var(--bone); font-family: var(--sans); transition: border-color .2s ease, background .2s ease; } .stab:hover { border-color: var(--sand); } .stab i { font-family: var(--mono); font-style: normal; font-size: .78rem; color: var(--sand); padding-top: 2px; } .stab b { display: block; font-size: 1rem; font-weight: 600; } .stab small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--muted); margin-top: 4px; } .stab.active { border-color: var(--maroon-hot); background: linear-gradient(160deg, var(--reach-tint), var(--card) 60%); } .stab.active i { color: var(--maroon-hot); } .stab.active b { color: var(--sand); } .suite-panels { min-height: 380px; } .spanel { display: none; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .spanel.active { display: grid; animation: panelin .45s ease; } @keyframes panelin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .feat { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 28px; transition: transform .25s ease, border-color .25s ease; display: flex; flex-direction: column; } .feat:hover { transform: translateY(-4px); border-color: var(--maroon-hot); } .feat .glyph { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; color: var(--sand); display: block; margin-bottom: 14px; } .feat h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; color: var(--bone); } .feat p { font-size: .9rem; color: var(--muted); flex: 1; } .feat .lawtag { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; align-self: flex-start; margin-top: 16px; } /* Line-art marks: same stroke language as the Centra arcs. */ .ic { width: 38px; height: 38px; display: block; fill: none; stroke: var(--sand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; } .reach .ic { stroke: var(--maroon-hot); margin-bottom: 18px; } .arch .ic { width: 30px; height: 30px; margin-bottom: 12px; } /* ============ PRODUCT / FLOW ============ */ .flow { margin-top: 46px; } .flow-wire { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 26px 30px 22px; } .fnode { text-align: center; flex: none; } .fic { width: 27px; height: 27px; display: block; margin: 0 auto 8px; fill: none; stroke: var(--sand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .fnode b { display: block; font-size: .84rem; font-weight: 600; color: var(--bone); } .fnode small { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--muted); margin-top: 2px; } .fseg { flex: 1; height: 2px; background: var(--line); position: relative; min-width: 30px; } .fdot { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 10px rgba(216,179,106,.8); opacity: 0; animation: fgo 7.5s linear infinite; } .fdot.d2 { animation-delay: 2.5s; } .fdot.d3 { animation-delay: 5s; } @keyframes fgo { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 26% { left: calc(100% - 10px); opacity: 1; } 31% { left: calc(100% - 10px); opacity: 0; } 100% { left: calc(100% - 10px); opacity: 0; } } [dir="rtl"] .fdot { animation-name: fgo-rtl; left: auto; right: 0; } @keyframes fgo-rtl { 0% { right: 0; opacity: 0; } 4% { opacity: 1; } 26% { right: calc(100% - 10px); opacity: 1; } 31% { right: calc(100% - 10px); opacity: 0; } 100% { right: calc(100% - 10px); opacity: 0; } } /* Each node flashes as its dot arrives (delays mirror the segment delays). */ .fnode.f2 .fic { animation: fflash 7.5s linear infinite; animation-delay: 0s; } .fnode.f3 .fic { animation: fflash 7.5s linear infinite; animation-delay: 2.5s; } .fnode.f4 .fic { animation: fflash 7.5s linear infinite; animation-delay: 5s; } @keyframes fflash { 0%, 25% { stroke: var(--sand); transform: none; } 28%, 31% { stroke: var(--maroon-hot); transform: scale(1.15); } 36%, 100% { stroke: var(--sand); transform: none; } } .flow-cap { text-align: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 14px; } .shot { position: relative; margin-top: 40px; } .shot-desktop { width: 88%; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 24px 60px rgba(0,0,0,.18); overflow: hidden; will-change: transform; } .chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); } .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .chrome-url { margin: 0 auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 14px; } .shot-body { display: grid; grid-template-columns: 168px 1fr; } .shot-nav { border-inline-end: 1px solid var(--line); padding: 16px 0; background: var(--surface); } .sn { display: block; font-size: .78rem; color: var(--muted); padding: 9px 18px; border-inline-start: 2px solid transparent; } .sn.active { color: var(--sand); border-inline-start-color: var(--maroon-hot); background: var(--reach-tint); } .shot-main { padding: 18px 22px 22px; } .shot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sm-title { font-size: .95rem; font-weight: 600; color: var(--bone); } .sm-badge { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; } .skpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .skpi { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; } .skpi small { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .skpi b { font-size: 1.05rem; color: var(--bone); font-variant-numeric: tabular-nums; } .skpi.warn b { color: var(--maroon-hot); } .schart { display: flex; align-items: flex-end; gap: 5px; height: 74px; border-bottom: 1px solid var(--line); padding-bottom: 1px; margin-bottom: 12px; } .schart i { flex: 1; border-radius: 2px 2px 0 0; background: var(--line); opacity: .55; } .schart i.hi { background: linear-gradient(180deg, var(--maroon-hot), var(--maroon)); opacity: 1; } .srows { display: grid; gap: 0; } .srow { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; font-size: .78rem; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line); } .srow:last-child { border-bottom: 0; } .srow b { color: var(--bone); font-variant-numeric: tabular-nums; } .shot-phone { position: absolute; right: -4px; bottom: -28px; width: 196px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 20px 50px rgba(0,0,0,.24); padding: 16px 16px 18px; will-change: transform; } [dir="rtl"] .shot-phone { right: auto; left: -4px; } .ph-notch { width: 64px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; } .ph-head { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ph-amount { font-family: var(--serif); font-size: 1.7rem; color: var(--bone); margin: 4px 0 2px; font-variant-numeric: tabular-nums; } .ph-amount small { font-size: .5em; color: var(--muted); font-family: var(--sans); } .ph-ok { font-size: .72rem; color: var(--sand); margin-bottom: 12px; } .ph-card { border: 1px solid var(--line); border-radius: 8px; font-size: .74rem; color: var(--muted); padding: 10px 12px; margin-bottom: 12px; } .ph-card b { color: var(--bone); display: block; font-size: .9rem; } .ph-btn { text-align: center; background: linear-gradient(135deg, var(--maroon-hot), var(--maroon)); color: #F2E8E4; font-size: .78rem; font-weight: 600; border-radius: 6px; padding: 9px 0; } /* ============ CALC CHART + MAIL ============ */ .calc-chart { display: flex; align-items: flex-end; gap: 3px; height: 62px; margin: 16px 0 4px; } .calc-chart i { flex: 1; border-radius: 2px 2px 0 0; background: var(--line); opacity: .4; transition: background .25s ease, opacity .25s ease; } .calc-chart i.on { background: linear-gradient(180deg, var(--maroon-hot), var(--maroon)); opacity: 1; } .calc-mail { margin-top: 20px; align-self: flex-start; font-size: .85rem; padding: 11px 22px; } /* ============ STICKY MOBILE CTA ============ */ .mcta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; gap: 10px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px)); background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s ease; } .mcta.show { transform: none; } .mcta-call { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; color: var(--sand); } .mcta-call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .mcta-demo { flex: 1; text-align: center; } /* ============ REACH ============ */ .reach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 46px; } .reach { border: 1px solid var(--line); border-radius: 6px; padding: 30px; background: linear-gradient(160deg, var(--reach-tint), var(--card) 60%); } .reach .glyph { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; color: var(--maroon-hot); display: block; margin-bottom: 14px; } .reach h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--sand); margin-bottom: 10px; } .reach p { font-size: .92rem; color: var(--muted); } .reach p strong { color: var(--bone); } /* ============ EOSB CALCULATOR ============ */ .calc { display: grid; grid-template-columns: 1fr .9fr; gap: 24px; margin-top: 46px; } .calc-controls { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 34px 36px; } .calc-field { display: block; margin-bottom: 30px; } .calc-field:last-of-type { margin-bottom: 18px; } .calc-label { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .calc-value { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--bone); margin-bottom: 14px; } .calc-field input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: var(--line); outline: none; cursor: pointer; } .calc-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--maroon-hot); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--maroon-hot); cursor: grab; } .calc-field input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--maroon-hot); border: 3px solid var(--card); cursor: grab; } .calc-field input[type="range"]:focus-visible { outline: 2px solid var(--sand); outline-offset: 6px; } .calc-flag { font-size: .88rem; color: var(--muted); min-height: 3em; padding-top: 4px; } .calc-flag b { color: var(--bone); } .calc-flag.warn { color: var(--maroon-hot); } .calc-flag.warn b { color: var(--maroon-hot); } .calc-result { border: 1px solid var(--line); border-radius: 8px; padding: 34px 36px; background: linear-gradient(160deg, var(--reach-tint), var(--card) 60%); display: flex; flex-direction: column; } .calc-result-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); } .calc-amount { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--bone); line-height: 1.1; margin: 12px 0 4px; font-variant-numeric: tabular-nums; } .calc-amount small { font-size: .3em; color: var(--muted); font-family: var(--sans); letter-spacing: .1em; } .calc-formula { font-size: .86rem; color: var(--muted); } .calc-bars { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; } .calc-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding-top: 10px; font-size: .88rem; color: var(--muted); } .calc-bar b { color: var(--bone); font-variant-numeric: tabular-nums; } /* ============ ADOPTION ============ */ .arch-list { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 26px; } .arch { position: relative; padding: 6px 0 6px 22px; transition: transform .35s cubic-bezier(.25,.7,.25,1); } /* The rail is a pseudo-element so it can thicken and light up on hover without nudging the text beside it. */ .arch::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--maroon); transform-origin: center left; transition: transform .35s cubic-bezier(.25,.7,.25,1), background .3s ease, box-shadow .3s ease; } .arch:hover::before { transform: scaleX(2.4); background: linear-gradient(180deg, var(--maroon-hot), var(--sand)); box-shadow: 0 0 14px rgba(196,43,87,.45); } .arch:hover { transform: translateX(7px); } .arch h3 { font-size: 1rem; font-weight: 600; color: var(--sand); margin-bottom: 6px; transition: color .25s ease; } .arch:hover h3 { color: var(--bone); } .arch p { font-size: .9rem; color: var(--muted); } .arch .ic { transition: stroke .3s ease, transform .4s cubic-bezier(.25,.7,.25,1); } .arch:hover .ic { stroke: var(--maroon-hot); transform: scale(1.12); } /* ============ CUSTOMERS ============ */ /* Featured customer: real logo beside a one-line proof. */ .cust-featured { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 46px; align-items: stretch; } /* Logo sits on a white plate so any brand's colours read correctly in both light and dark themes - the standard logo-wall treatment. */ .logo-plate { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 34px; min-height: 180px; } .logo-plate img { max-width: 100%; max-height: 150px; width: auto; height: auto; display: block; } .cust-quote { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(160deg, var(--reach-tint), var(--card) 60%); padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; } .cust-quote .who { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); margin-bottom: 14px; } .cust-quote p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; color: var(--bone); } .cust-quote .name { margin-top: 16px; font-size: .95rem; color: var(--muted); } .cust-quote .name b { color: var(--bone); font-weight: 600; } .sectors-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 40px 0 16px; } .cust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .cust { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 22px 16px; text-align: center; cursor: default; transition: transform .25s ease, border-color .25s ease, background .25s ease; } .cust:hover { transform: translateY(-4px); border-color: var(--maroon-hot); background: linear-gradient(160deg, var(--reach-tint), var(--card) 60%); } .cust:hover small { color: var(--sand); } .cust small { transition: color .25s ease; } .cust small { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } /* ============ CONTACT ============ */ .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; margin-top: 46px; align-items: stretch; } .addr { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 34px; display: flex; flex-direction: column; } .addr-row { margin-bottom: 22px; } .addr-row .lbl { font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); display: block; margin-bottom: 6px; } .addr-row p, .addr-row a { color: var(--bone); font-size: 1rem; text-decoration: none; } .addr-row a:hover { color: var(--sand); } .addr-row small { color: var(--muted); font-size: .85rem; display: block; } .addr .cta-row { margin-top: auto; padding-top: 10px; } .mapbox { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--water); position: relative; min-height: 340px; } .mapbox svg { display: block; width: 100%; height: 100%; position: absolute; inset: 0; } /* Production variant only: the live Google Maps embed swapped in by build.py */ .mapbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .map-land { fill: var(--surface); } .map-block { fill: var(--card); stroke: var(--line); stroke-width: 1; } .map-road { stroke: var(--line); stroke-width: 2; fill: none; } .map-road.major { stroke-width: 3.5; stroke: var(--muted); opacity: .5; } .map-wave { stroke: var(--line); stroke-width: 1.2; fill: none; opacity: .6; } .map-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); } .map-label.big { font-size: 12px; } .map-pin-dot { fill: var(--maroon-hot); } .map-pin-ring { fill: none; stroke: var(--maroon-hot); opacity: 0; transform-origin: center; animation: mappulse 2.8s ease-out infinite; } .map-pin-ring.late { animation-delay: 1.4s; } @keyframes mappulse { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } } .map-pin-label { font-family: var(--mono); font-size: 11px; fill: var(--bone); font-weight: 600; } .map-open { position: absolute; left: 16px; bottom: 14px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--sand); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; background: var(--nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .map-open:hover { border-color: var(--sand); } /* Icon-led contact rows: the glyph carries the meaning, not a text label. */ .contact-list { list-style: none; margin: 0 0 22px; display: grid; gap: 14px; } .contact-list li { display: flex; align-items: center; gap: 13px; } .ci { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--sand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .contact-list a { color: var(--bone); text-decoration: none; font-size: 1rem; } .contact-list a:hover { color: var(--sand); } .partner { margin-top: 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(160deg, var(--reach-tint), var(--card) 60%); padding: 28px 34px; } .partner-mark svg { width: 48px; height: 48px; fill: none; stroke: var(--maroon-hot); stroke-width: 1.6; } .partner-mark svg circle:last-of-type { stroke: var(--sand); } .partner-body .lbl { font-family: var(--mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); display: block; margin-bottom: 6px; } .partner-body h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--bone); } .partner-body p { font-size: .92rem; color: var(--muted); margin-top: 4px; max-width: 44em; } .partner-contact { margin: 0; gap: 9px; } .partner-contact a { font-size: .92rem; } /* ============ CTA ============ */ .cta-final { text-align: center; background-color: var(--ink); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), radial-gradient(ellipse 700px 380px at 50% 0%, var(--cta-glow), transparent 70%); background-size: 54px 54px, 54px 54px, auto; border-top: 1px solid var(--line); padding: 100px 0; } .cta-final h2 { margin: 0 auto; } .cta-final .lede { margin: 14px auto 0; } .cta-final .cta-row { justify-content: center; } .includes { margin: 30px auto 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); } .includes b { color: var(--sand); font-weight: 400; } /* ============ FOOTER ============ */ footer { border-top: 1px solid var(--line); background: var(--surface); padding: 64px 0 0; font-size: .88rem; color: var(--muted); } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 52px; } .foot-brand img { height: 28px; width: auto; display: block; filter: var(--logo-filter); margin-bottom: 16px; } .foot-brand p { max-width: 30em; } .foot-col h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); font-weight: 600; margin-bottom: 16px; } .foot-col ul { list-style: none; } .foot-col li { margin-bottom: 10px; } .foot-col a { color: var(--muted); text-decoration: none; } .foot-col a:hover { color: var(--sand); } .foot-legal { border-top: 1px solid var(--line); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: .78rem; } .foot-legal .ar { direction: rtl; } @media (max-width: 1100px) { /* The centred desktop rail becomes a drawer under the bar. */ .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; transform: none; flex-direction: column; gap: 0; padding: 6px 24px 18px; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: none; } .nav.open .nav-links { display: flex; } .nav-links a { padding: 14px 0; font-size: .82rem; border-bottom: 1px solid var(--line); } .nav-links a:last-child { border-bottom: 0; } } /* Keep the header CTA as long as it fits; below this it moves into the drawer. */ @media (max-width: 720px) { .mcta { display: flex; } .totop { bottom: 86px; } [dir="rtl"] .totop { bottom: 86px; } .nav-cta .btn-primary { display: none; } .nav-links .nav-drawer-cta { display: block; text-align: center; margin-top: 14px; border-bottom: 0; padding: 13px 20px; } } @media (max-width: 900px) { .hero { padding: 48px 0 56px; } .hero-grid { grid-template-columns: 1fr; } .orbit-stage { min-height: 300px; order: -1; } .orbit-ring { width: 260px; height: 260px; } .orbit-ring.far { width: 330px; height: 330px; } .sat .tag { display: none; } section { padding: 60px 0; } .law { grid-template-columns: 1fr; gap: 8px; padding: 20px 22px; } .suite { grid-template-columns: 1fr; } .suite-tabs { grid-template-columns: 1fr 1fr; } .stab { padding: 14px 16px; } .stab small { display: none; } .stat { border-left: none; border-top: 1px solid var(--line); } .stat:first-child { border-top: none; } .cust-featured { grid-template-columns: 1fr; } .shot-desktop { width: 100%; } .shot-phone { position: static; width: 216px; margin: 18px auto 0; } .shot-body { grid-template-columns: 1fr; } .shot-nav { display: flex; overflow-x: auto; padding: 0; border-inline-end: 0; border-bottom: 1px solid var(--line); } .sn { border-inline-start: 0; border-bottom: 2px solid transparent; white-space: nowrap; } .sn.active { border-inline-start-color: transparent; border-bottom-color: var(--maroon-hot); } .flow-wire { padding: 18px 14px 14px; gap: 8px; } .fnode b { font-size: .7rem; } .fnode small { font-size: .54rem; } .fic { width: 21px; height: 21px; } .calc { grid-template-columns: 1fr; } .partner { grid-template-columns: 1fr; gap: 20px; text-align: center; justify-items: center; } .contact-grid { grid-template-columns: 1fr; } .mapbox { min-height: 300px; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .foot-brand { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .pulse-ring, .orbit-ring, .orbit-ring .sat, .map-pin-ring { animation: none; } .fdot { animation: none; opacity: 0; } .fnode .fic { animation: none; } .mcta { transition: none; } .js .hero .eyebrow, .js .hero h1, .js .hero .hero-sub, .js .hero .cta-row, .js .hero .chip-row, .js .orbit-stage { animation: none; } .feat:hover { transform: none; } html { scroll-behavior: auto; } .rv, .rv-group > * { opacity: 1; transform: none; transition: none; } .spanel.active { animation: none; } .totop { transition: none; } }