/* ============================================================================ UX Ronin — site chrome: global nav (pill) + curved page-transition curtain Loaded render-blocking in so the curtain covers before first paint. ========================================================================== */ /* ---- page-transition curtain (SVG path morph = curved "drag" edge) ------ */ #pt{ position:fixed; inset:0; z-index:9999; pointer-events:none; } #pt.is-hidden{ visibility:hidden; } .pt-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .pt-path{ fill:#1E2A38; } .pt-l{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; opacity:0; color:#F5F3EE; font-family:"Helvetica Neue",Helvetica,system-ui,-apple-system,sans-serif; letter-spacing:.01em; } .pt-name{ display:block; font-weight:600; font-size:clamp(26px,4.6vw,46px); line-height:1.04; } .pt-role{ display:block; margin-top:.6em; font-weight:500; font-size:clamp(12px,1.5vw,16px); letter-spacing:.06em; color:color-mix(in srgb, #F5F3EE 58%, transparent); } /* ---- global nav (semi-transparent pill) --------------------------------- */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:20px clamp(16px,3vw,36px); font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; pointer-events:none; } .site-nav a{ pointer-events:auto; text-decoration:none; } .site-brand{ display:inline-flex; align-items:center; gap:12px; color:#1E2A38; } .site-brand::before{ content:""; width:24px; height:24px; border-radius:6px; flex-shrink:0; background:linear-gradient(155deg, #4FBEFF, #2FA8F2); box-shadow:0 5px 14px -5px rgba(61,183,255,.6), inset 0 1px 0 rgba(255,255,255,.35); } .site-brand__id{ display:flex; flex-direction:column; line-height:1.1; } .site-brand__name{ font-weight:700; font-size:18px; letter-spacing:-.005em; } .site-brand__role{ font-weight:500; font-size:11.5px; letter-spacing:.02em; color:#4A6A8A; margin-top:2px; } .site-links{ display:flex; align-items:center; gap:2px; pointer-events:auto; background:color-mix(in srgb, #F5F3EE 66%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid color-mix(in srgb, #1E2A38 9%, transparent); border-radius:999px; padding:5px; box-shadow:0 6px 20px -14px #1E2A3855; } .site-links a{ color:#4A6A8A; font-size:14px; font-weight:500; padding:8px 16px; border-radius:999px; transition:color .2s, background .2s; } .site-links a:hover{ color:#1E2A38; background:color-mix(in srgb, #1E2A38 7%, transparent); } .site-links a.is-active{ color:#fff; background:#3DB7FF; } /* language switch — lives inside the pill, set off by a hairline divider. Minimal EN / PT, active state echoes the nav's own "selected" background. */ .lang-switch{ display:inline-flex; align-items:center; gap:1px; margin-left:5px; padding-left:7px; border-left:1px solid color-mix(in srgb, #1E2A38 15%, transparent); } .lang-opt{ appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.05em; color:#4A6A8A; padding:7px 9px; border-radius:999px; transition:color .2s, background .2s; } .lang-opt:hover{ color:#1E2A38; } .lang-opt.is-active{ color:#1E2A38; font-weight:700; background:color-mix(in srgb, #1E2A38 8%, transparent); } .lang-opt:focus-visible{ outline:2px solid #3DB7FF; outline-offset:2px; } @media (max-width:620px){ .lang-switch{ margin-left:3px; padding-left:5px; } .lang-opt{ padding:6px 6px; font-size:12px; letter-spacing:.03em; } } @media (max-width:620px){ .site-nav{ padding:14px 10px; } .site-links a{ padding:7px 10px; font-size:13px; } .site-brand span{ display:none; } } /* very small phones: the longer PT labels + switcher must still fit the pill */ @media (max-width:400px){ .site-nav{ padding:12px 8px; } .site-links{ padding:4px; } .site-links a{ padding:6px 8px; font-size:12.5px; } .lang-opt{ padding:6px 5px; } } @media (max-width:360px){ .site-nav{ padding:12px 6px; } .site-links a{ padding:6px 6px; font-size:12px; } .lang-switch{ margin-left:2px; padding-left:4px; } .lang-opt{ padding:6px 4px; font-size:11.5px; letter-spacing:0; } } /* hide the brand icon a little earlier than the full brand collapse */ @media (max-width:720px){ .site-brand::before{ display:none; } } /* ---- case-study TOP project nav — quiet tertiary utility ---------------- Injected by site.js as the first element inside the hero .wrap, mirrored from the page's own footer nav. Deliberately small and discreet so it never competes with the case number, title, description or hero imagery. */ .case-topnav{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 clamp(30px,6vh,64px); } .case-topnav .ca-link{ display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:46%; text-decoration:none; color:var(--soft,#4A6A8A); font-family:var(--body,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif); font-size:15px; font-weight:500; line-height:1.3; letter-spacing:.01em; transition:color .2s ease; } .case-topnav .ca-empty{ max-width:none; } .case-topnav .ca-next{ margin-left:auto; text-align:right; } .case-topnav .ca-tx{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .case-topnav .ca-generic{ display:none; } .case-topnav .ca-ar{ flex:none; font-size:16px; line-height:1; transition:transform .2s ease; } .case-topnav .ca-link:hover{ color:var(--ink,#1E2A38); } .case-topnav .ca-prev:hover .ca-ar{ transform:translateX(-3px); } .case-topnav .ca-next:hover .ca-ar{ transform:translateX(3px); } .case-topnav .ca-link:focus-visible{ outline:2px solid var(--accent,#3DB7FF); outline-offset:4px; border-radius:6px; color:var(--ink,#1E2A38); } /* small screens: swap long project names for compact labels, keep one line */ @media (max-width:520px){ .case-topnav .ca-name{ display:none; } .case-topnav .ca-generic{ display:inline; } .case-topnav .ca-link{ max-width:none; } } @media (prefers-reduced-motion:reduce){ .case-topnav .ca-ar{ transition:none; } } /* ---- blank subpage scaffold (work/about/contact placeholders) ----------- */ .page{ min-height:100vh; min-height:100dvh; background:#F5F3EE; color:#1E2A38; display:grid; place-items:center; padding:120px 24px 80px; font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; } .page__inner{ text-align:center; } .page__eyebrow{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#4A6A8A; } .page__title{ font-size:clamp(40px,9vw,92px); font-weight:600; letter-spacing:-.02em; margin:10px 0 0; } .page__note{ margin-top:14px; color:#4A6A8A; font-size:15px; }