/* ===== PRESETS — PTG brand-color hard override across all three ===== */ /* PRIMARY — "Maritime": ivory background, full PTG cobalt, decisive snap, dense editorial */ html[data-preset="primary"] { --color-bg: #F5F7FA; --color-surface: #FFFFFF; --color-primary: #034694; --color-accent: #0EA5E9; --color-text: #0B1A2B; --color-muted: #5A6373; --color-line: #D6DEE8; --font-heading: 'Inter Tight'; --font-drama: 'Space Grotesk'; --font-mono: 'JetBrains Mono'; --motion-duration: 0.55s; --motion-ease: power2.out; --motion-stagger: 0.08; --radius-card: 0.75rem; --radius-pill: 9999px; --section-py: 6rem; --content-max-w: 76rem; } html, body { background: var(--color-bg); color: var(--color-text); } body { font-family: var(--font-heading), sans-serif; -webkit-font-smoothing: antialiased; } /* Noise overlay — pure decoration */ .noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.04; background-image: url("data:image/svg+xml;utf8,"); } /* Scroll progress bar */ .progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--color-accent); z-index: 100; transition: width 0.08s linear; } /* Magnetic CTA */ .btn-magnetic { position: relative; overflow: hidden; isolation: isolate; transition: transform 300ms cubic-bezier(.25,.46,.45,.94); } .btn-magnetic:hover { transform: translateY(-1px) scale(1.02); } .btn-magnetic .fill { position: absolute; inset: 0; background: var(--color-accent); transform: translateX(-101%); transition: transform 350ms cubic-bezier(.4,0,.2,1); z-index: -1; } .btn-magnetic:hover .fill { transform: translateX(0); } /* Subtle line under hovered nav links */ .nav-link { position: relative; } .nav-link::after { content:''; position:absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 250ms ease; } .nav-link:hover::after { transform: scaleX(1); } /* Card hover lift */ .lift { transition: transform 350ms ease, border-color 350ms ease, box-shadow 350ms ease; } .lift:hover { transform: translateY(-4px); } /* Terminal node animation */ @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .25; } } .pulse-dot { animation: pulse-dot 2.2s ease-in-out infinite; } /* Marquee */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee 38s linear infinite; } /* Section reveal — default to VISIBLE so content shows even if JS/GSAP fails. When GSAP loads, it adds .js-anim to and we hide them for animation. */ html.js-anim .reveal { opacity: 0; transform: translateY(24px); } html.js-anim .reveal-x { opacity: 0; transform: translateX(-24px); } html.js-anim .reveal-x-r { opacity: 0; transform: translateX(24px); } /* Hide instantly-cycling content while language switches to avoid flash */ [data-i18n] { transition: opacity .15s ease; } /* Dot grid background utility */ .dot-grid { background-image: radial-gradient(var(--color-line) 1px, transparent 1px); background-size: 28px 28px; } /* Status pulse */ .status-dot { width: 8px; height: 8px; border-radius: 9999px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: ping 2s infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6);} 100% { box-shadow: 0 0 0 12px rgba(34,197,94,0);} } /* Hero gradient overlay */ .hero-overlay { background: linear-gradient(120deg, color-mix(in srgb, var(--color-text) 78%, transparent) 0%, color-mix(in srgb, var(--color-text) 50%, transparent) 45%, color-mix(in srgb, var(--color-primary) 35%, transparent) 100%); } /* Tasteful underline accent on key words */ .accent-bar { display: inline-block; box-shadow: inset 0 -0.35em 0 color-mix(in srgb, var(--color-accent) 35%, transparent); } /* Preset/lang toggle */ .toggle-card { background: color-mix(in srgb, var(--color-surface) 92%, transparent); border: 1px solid var(--color-line); backdrop-filter: blur(14px); } .toggle-btn { transition: background 200ms ease, color 200ms ease; } .toggle-btn[aria-current="true"] { background: var(--color-primary); color: #fff; } /* Section number tag */ .sec-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted); } /* Terminal map grid */ .terminal-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); } /* Mobile: reduce section vertical padding */ @media (max-width: 767px) { html[data-preset="primary"] { --section-py: 3.5rem; } }