/* ========================================================================== Satcore — main stylesheet ========================================================================== */ /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Design tokens ───────────────────────────────────────────────────────── */ :root { --bg: #0e080b; --bg-alt: #130a0f; --surface: #1a0f15; --shot-bg: #160c0f; /* matches the NetOps panel background */ --line: rgba(255, 236, 222, 0.08); --line-strong: rgba(255, 236, 222, 0.14); --plum: #572947; --plum-glow: rgba(122, 57, 99, 0.38); --gold: #c99762; --gold-soft: #e2bd8f; --gold-a10: rgba(201, 151, 98, 0.10); --gold-a20: rgba(201, 151, 98, 0.20); --gold-a35: rgba(201, 151, 98, 0.35); --heading: #f6ece2; --cream: #e3c9ae; --text: #bba596; --muted: #8e7880; --green: #62c28a; --red: #e2636f; --on-gold: #1c0e16; --radius-lg: 20px; --radius: 14px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --maxw: 1200px; --header-h: 72px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ── Base ────────────────────────────────────────────────────────────────── */ /* iOS Safari reveals the background during the rubber-band bounce — keep it dark so it never flashes white above the fixed header. */ html { background-color: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lb-open, html.menu-open { overflow: hidden; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; min-height: 100vh; min-height: 100dvh; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } ul, ol { list-style: none; } ::selection { background: rgba(201, 151, 98, 0.35); color: #fff; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--plum); border-radius: 3px; } /* Subtle grain so large flat colour fields don't read as one dead-flat wash — static, no animation, negligible paint cost. */ body::before { content: ''; position: fixed; inset: 0; z-index: 250; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 400; padding: 0.6rem 1rem; border-radius: 10px; background: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform 0.2s ease; } .skip-link:focus { transform: none; } /* ── Layout helpers ──────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .center { text-align: center; } .narrow { max-width: 54rem; margin-inline: auto; } .center .lead { max-width: 44rem; margin-inline: auto; } .section { position: relative; padding-block: clamp(5rem, 12vh, 9rem); } .section-head { margin-bottom: clamp(2.75rem, 6vh, 4rem); } /* ── Typography ──────────────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; font-family: var(--font-display); font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 600; letter-spacing: -0.01em; color: var(--gold); } .eyebrow svg { width: 20px; height: 20px; } .kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .display-xl, .display-l, .display-m { font-family: var(--font-display); font-weight: 700; color: var(--heading); text-wrap: balance; } .display-xl { font-size: clamp(2.9rem, 6.6vw, 5.9rem); line-height: 1.0; letter-spacing: -0.022em; } .display-l { font-size: clamp(2.3rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.02em; } .display-m { font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.07; letter-spacing: -0.018em; } /* one sentence per line, each balanced on its own (a
would stop text-wrap: balance from evening out the second sentence) */ .hl { display: block; text-wrap: balance; } .text-gradient { background: linear-gradient(180deg, #f3d6ae 0%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { font-size: clamp(1.06rem, 1.45vw, 1.27rem); line-height: 1.6; letter-spacing: -0.006em; color: var(--text); text-wrap: pretty; } .lead strong { color: var(--heading); font-weight: 600; } * + .lead { margin-top: 1.4rem; } .tile p, .pillars p, .feature-cols p, .svc-desc, .tab-copy p, .stat-label, .bundle-item p, .checklist li, .customer-note { text-wrap: pretty; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; height: 50px; padding: 0 1.55rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.975rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.25s var(--ease-out), background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.25s var(--ease-out); } .btn:hover .i-arrow { transform: translateX(3px); } .btn:hover .i-external { transform: translate(2px, -2px); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 30px -12px rgba(201, 151, 98, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .btn-primary:hover { background: #d6a672; transform: translateY(-1px); box-shadow: 0 16px 40px -14px rgba(201, 151, 98, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.32); } .btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--line-strong); color: var(--heading); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 236, 222, 0.26); } .btn-sm { height: 40px; padding: 0 1.05rem; font-size: 0.875rem; gap: 0.45rem; } .btn-sm svg { width: 14px; height: 14px; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2.25rem; } .actions.center { justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--gold); text-decoration: none; } .link-arrow svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); } .link-arrow:hover { color: var(--gold-soft); } .link-arrow:hover svg { transform: translateX(3px); } .link-arrow.down:hover svg { transform: translateY(3px); } /* ── Scroll reveal (only hidden when JS is available) ────────────────────── */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0ms); } .js .reveal.in { opacity: 1; transform: none; } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--header-h); border-bottom: 1px solid transparent; transition: background-color 0.35s ease, border-color 0.35s ease; } .site-header.scrolled, .site-header.nav-open { background: rgba(14, 8, 11, 0.74); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom-color: var(--line); } .header-inner { height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 1.5rem; } .brand { display: block; flex-shrink: 0; margin-left: -4px; } .brand img { height: 38px; width: auto; } .nav { flex: 1; display: flex; justify-content: center; } .nav-links { display: flex; align-items: center; gap: 0.15rem; } .nav-links a { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: var(--text); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } .nav-links a:hover { color: var(--heading); background: rgba(255, 255, 255, 0.05); } .nav-links a.is-active { color: var(--heading); background: rgba(255, 255, 255, 0.07); } .header-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .lang-link { display: grid; place-items: center; height: 40px; min-width: 42px; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } .lang-link:hover { color: var(--heading); border-color: var(--line-strong); } .lbl-short { display: none; } .nav-toggle { display: none; position: relative; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); cursor: pointer; } .nav-toggle span { position: absolute; left: 13px; right: 13px; height: 1.6px; border-radius: 2px; background: var(--heading); transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out); } .nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 24px; } .nav-open .nav-toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); } .nav-open .nav-toggle span:nth-child(2) { top: 20px; transform: rotate(-45deg); } .mobile-menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem var(--gutter) 2rem; background: var(--bg); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.35s; } .nav-open .mobile-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mobile-menu ul { display: grid; } .mobile-menu li + li { border-top: 1px solid var(--line); } .mobile-menu a:not(.btn) { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--heading); text-decoration: none; } .mobile-menu-actions { display: grid; gap: 0.6rem; margin-top: 1rem; } .mobile-menu-actions .btn { width: 100%; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-h) + 2.5rem) 0 clamp(3.5rem, 8vh, 6rem); overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 12% 58%, rgba(122, 57, 99, 0.34) 0%, transparent 62%), radial-gradient(ellipse 45% 50% at 78% 30%, rgba(201, 151, 98, 0.09) 0%, transparent 60%); } .hero-bg::after { content: ''; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(rgba(255, 236, 222, 0.08) 1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 65% 60% at 62% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 65% 60% at 62% 45%, #000 15%, transparent 72%); } .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; } .hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; align-items: center; } .hero-content { max-width: 640px; } .hero-pill { display: inline-flex; align-items: center; gap: 0.65rem; margin-bottom: 1.9rem; padding: 0.32rem 0.95rem 0.32rem 0.36rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); font-size: 0.87rem; font-weight: 500; color: var(--text); text-decoration: none; opacity: 0; animation: riseIn 0.8s var(--ease-out) 0.1s forwards; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .hero-pill:hover { border-color: var(--gold-a35); background: rgba(201, 151, 98, 0.06); color: var(--heading); } .hero-pill svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; transition: transform 0.25s var(--ease-out); } .hero-pill:hover .i-arrow { transform: translateX(3px); } .pill-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-a20); } .pill-icon svg { color: var(--gold-soft); } .hero-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 6.3vw, 5.8rem); line-height: 1.0; letter-spacing: -0.022em; color: var(--heading); } .hero-h1 .hline { display: block; overflow: hidden; padding: 0.1em 0 0.1em; margin: -0.1em 0 -0.1em; } .hero-h1 .hline-inner { display: block; opacity: 0; transform: translateY(110%); } .hero-h1 .hline:nth-child(1) .hline-inner { animation: slideUp 0.9s var(--ease-out) 0.22s forwards; } .hero-h1 .hline:nth-child(2) .hline-inner { animation: slideUp 0.9s var(--ease-out) 0.36s forwards; } .hero-h1 .hline:nth-child(3) .hline-inner { animation: slideUp 0.9s var(--ease-out) 0.50s forwards; } .hero-sub { max-width: 35rem; margin-top: 1.9rem; opacity: 0; animation: riseIn 0.8s var(--ease-out) 0.7s forwards; } .hero .actions { opacity: 0; animation: riseIn 0.8s var(--ease-out) 0.85s forwards; } .hero-canvas-wrap { width: 100%; height: 520px; opacity: 0; animation: riseIn 1.2s ease 0.5s forwards; } #netCanvas { width: 100%; height: 100%; display: block; } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── Satcore Shield ──────────────────────────────────────────────────────── */ .shield { background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg-alt) calc(100% - 220px), var(--bg) 100%); overflow: hidden; } .shield::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 82% 40%, rgba(201, 151, 98, 0.07) 0%, transparent 60%); } .shield::after, .chapter-deep::after, .bento-sec::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 236, 222, 0.12), transparent); } .shield-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } .feat-inline { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; } .feat-inline li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem 0.5rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); font-size: 0.88rem; font-weight: 500; color: var(--cream); } .feat-inline svg { width: 16px; height: 16px; color: var(--gold); } .shield-visual { width: 100%; height: 440px; } #ddosCanvas { width: 100%; height: 100%; display: block; } .stat-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 7vh, 4.5rem); border-top: 1px solid var(--line); } .stat { padding: 2rem 1.5rem 0 0; } .stat + .stat { padding-left: 2rem; border-left: 1px solid var(--line); } .stat-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -0.035em; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-num .unit { margin-left: 0.12em; font-size: 0.5em; font-weight: 600; letter-spacing: -0.02em; color: var(--gold); } .stat-label { margin-top: 0.7rem; font-size: 0.93rem; color: var(--muted); } .bundle { position: relative; margin-top: clamp(3rem, 7vh, 4.5rem); padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: 24px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); } .bundle-kicker { margin-bottom: 1.25rem; color: var(--gold); } .bundle-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; } .bundle-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.4rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.22); } .bundle-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--gold); background: var(--gold-a10); } .bundle-icon svg { width: 23px; height: 23px; } .bundle-item h3 { margin-bottom: 0.3rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; color: var(--heading); } .bundle-item p { font-size: 0.95rem; line-height: 1.55; color: var(--text); } .bundle-item .link-arrow { margin-top: 0.85rem; font-size: 0.95rem; } .bundle-plus { align-self: center; justify-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold-a35); background: var(--gold-a10); color: var(--gold-soft); font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1; } /* ── NetOps: intro ───────────────────────────────────────────────────────── */ .netops { position: relative; } .netops-intro { position: relative; padding: clamp(6rem, 14vh, 10rem) 0 clamp(4.5rem, 10vh, 7rem); overflow: hidden; } .netops-intro::before { content: ''; position: absolute; left: 50%; top: 0; width: 1500px; height: 1000px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 50% 45% at 50% 22%, rgba(122, 57, 99, 0.42) 0%, transparent 70%), radial-gradient(ellipse 30% 25% at 50% 26%, rgba(201, 151, 98, 0.10) 0%, transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 280px); mask-image: linear-gradient(180deg, transparent 0, #000 280px); } .netops-intro .container { position: relative; } .app-icon { width: 78px; height: 78px; margin: 0 auto 1.6rem; border-radius: 23px; display: grid; place-items: center; color: var(--gold-soft); background: linear-gradient(150deg, #43203a 0%, #1c0e17 100%); border: 1px solid rgba(255, 236, 222, 0.13); box-shadow: 0 24px 60px -20px rgba(122, 57, 99, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.09); } .app-icon svg { width: 38px; height: 38px; } .customer-note { margin-top: 1.2rem; font-size: 0.93rem; color: var(--muted); } .customer-note a { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; color: var(--gold); text-decoration: none; } .customer-note a svg { width: 13px; height: 13px; } .customer-note a:hover { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; } .intro-shot { position: relative; max-width: 1180px; margin: clamp(3.5rem, 8vh, 5.5rem) auto 0; padding: 0 var(--gutter); perspective: 2200px; } .intro-shot::before { content: ''; position: absolute; inset: 6% 8% -4%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(201, 151, 98, 0.20) 0%, transparent 70%), radial-gradient(ellipse 70% 60% at 50% 60%, rgba(122, 57, 99, 0.50) 0%, transparent 70%); filter: blur(50px); } .intro-shot .window { transform-origin: 50% 0%; transform: rotateX(calc((1 - var(--p, 1)) * 16deg)) scale(calc(0.9 + var(--p, 1) * 0.1)); will-change: transform; } .pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 7vh, 4.5rem); } .pillars a { display: block; height: 100%; padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); text-decoration: none; transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.45s var(--ease-out); } .pillars a:hover { border-color: rgba(201, 151, 98, 0.3); background: rgba(255, 255, 255, 0.035); transform: translateY(-3px); } .pillar-icon { width: 42px; height: 42px; margin-bottom: 1.15rem; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: var(--gold-a10); } .pillar-icon svg { width: 21px; height: 21px; } .pillar-title { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: var(--heading); } .pillar-title svg { width: 16px; height: 16px; color: var(--gold); opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.3s var(--ease-out); } .pillars a:hover .pillar-title svg { opacity: 1; transform: none; } .pillars p { font-size: 0.93rem; line-height: 1.5; color: var(--muted); } /* ── Screenshot window frame ─────────────────────────────────────────────── */ .window { position: relative; overflow: hidden; border-radius: 16px; background: var(--shot-bg); border: 1px solid rgba(255, 236, 222, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 50px 100px -40px rgba(0, 0, 0, 0.85), 0 30px 60px -30px rgba(40, 10, 30, 0.6); } .window-xl { border-radius: 20px; } .window-card { border-radius: 14px; } .window-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: linear-gradient(180deg, #1f1218 0%, #190e13 100%); border-bottom: 1px solid rgba(255, 236, 222, 0.07); } .window-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 236, 222, 0.13); } .window-url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px; border-radius: 7px; background: rgba(255, 255, 255, 0.045); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; } .window-url svg { width: 11px; height: 11px; } .shot { position: relative; display: block; cursor: zoom-in; } .shot:focus-visible { outline-offset: -3px; } .shot img { width: 100%; height: auto; } .zoom-hint { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--heading); background: rgba(14, 8, 11, 0.72); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: scale(0.9); transition: opacity 0.25s ease, transform 0.3s var(--ease-out); } .zoom-hint svg { width: 16px; height: 16px; } .shot:hover .zoom-hint, .shot:focus-visible .zoom-hint { opacity: 1; transform: none; } @media (hover: none) { .zoom-hint { opacity: 0.92; transform: none; width: 34px; height: 34px; top: 10px; right: 10px; } } .shot.stage { aspect-ratio: 2 / 1; background: var(--stage-bg, var(--shot-bg)); } .shot.stage img { width: 100%; height: 100%; object-fit: contain; object-position: var(--pos, 50% 0%); -webkit-mask-image: var(--mask, none); mask-image: var(--mask, none); } /* ── NetOps: chapters ────────────────────────────────────────────────────── */ .chapter { position: relative; padding: clamp(5rem, 12vh, 8.5rem) 0; overflow-x: clip; } .chapter-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .chapter-grid.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .chapter-grid.flip .chapter-copy { order: 2; } .step { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold); background: var(--gold-a10); border: 1px solid rgba(201, 151, 98, 0.22); } .checklist { display: grid; gap: 0.85rem; margin-top: 2rem; } .checklist li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.5; } .check { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); background: var(--gold-a10); } .check svg { width: 12px; height: 12px; } .chapter-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.75rem, 6vh, 4rem); } .chapter-head .lead { margin-top: 0; padding-bottom: 0.35rem; } /* Layered attack record + detail composition */ .layered { position: relative; padding-bottom: clamp(5rem, 15vw, 11.5rem); } .layer-back { width: 84%; } .layer-front { position: absolute; right: 0; bottom: 0; width: 44%; } .parallax-inner { transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform; } .layer-front .window { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 60px 120px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.45); } /* "From a real attack record" strip */ .record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: end; margin-top: clamp(2.75rem, 6vh, 4rem); padding: 1.75rem 2rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); } .record-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); } .record-meta { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: var(--text); } .record-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1; letter-spacing: -0.035em; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; } .record-num .unit { margin-left: 0.25em; font-size: 0.5em; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); } .record-item.is-peak .record-num { color: #ef8791; } .record-label { margin-top: 0.55rem; font-size: 0.86rem; color: var(--muted); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot-green { background: var(--green); box-shadow: 0 0 0 4px rgba(98, 194, 138, 0.15); } .dot-red { background: var(--red); box-shadow: 0 0 0 4px rgba(226, 99, 111, 0.16); } .dot-pulse { animation: dotPulse 2.2s ease-out infinite; } @keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(226, 99, 111, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(226, 99, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 99, 111, 0); } } /* In depth */ .chapter-deep { background: var(--bg-alt); overflow: hidden; } .chapter-deep::before { content: ''; position: absolute; left: 50%; top: 30%; width: 1200px; height: 700px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(122, 57, 99, 0.28) 0%, transparent 70%); } .chapter-deep .container { position: relative; } .deep-shot { max-width: 1000px; margin: clamp(2.75rem, 6vh, 4rem) auto 0; } .feature-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(2.75rem, 6vh, 3.75rem); } .feature-cols li { padding-top: 1.3rem; border-top: 1px solid var(--line); } .fc-icon { color: var(--gold); margin-bottom: 0.95rem; } .fc-icon svg { width: 22px; height: 22px; } .feature-cols h4, .tab-copy h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--heading); } .feature-cols h4 { margin-bottom: 0.35rem; font-size: 1.1rem; } .feature-cols p { font-size: 0.93rem; line-height: 1.55; color: var(--muted); } /* Control: segmented tabs */ .segmented-wrap { display: flex; justify-content: center; margin: clamp(2.25rem, 5vh, 3rem) 0 clamp(1.75rem, 4vh, 2.5rem); } .segmented { position: relative; display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); overflow-x: auto; scrollbar-width: none; } .segmented::-webkit-scrollbar { display: none; } .segmented [role="tab"] { position: relative; z-index: 1; flex-shrink: 0; padding: 0.65rem 1.25rem; border: 0; border-radius: 999px; background: none; font-size: 0.93rem; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer; transition: color 0.3s ease; } .segmented [role="tab"]:hover { color: var(--heading); } .segmented [role="tab"][aria-selected="true"] { color: var(--on-gold); } html:not(.js) .segmented [role="tab"][aria-selected="true"] { background: var(--gold); } .seg-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--gold); box-shadow: 0 6px 20px -8px rgba(201, 151, 98, 0.7); } .segmented.ready .seg-indicator { transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out); } .js .tab-panels { display: grid; } .js .tab-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(0.985); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s linear 0.5s; } .js .tab-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } html:not(.js) .tab-panel + .tab-panel { margin-top: 3rem; } .tab-panel:focus-visible { outline-offset: 6px; border-radius: 18px; } .tab-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 0.75rem 3rem; align-items: baseline; margin-top: 1.9rem; } .tab-copy h4 { font-size: clamp(1.3rem, 2vw, 1.6rem); } .tab-copy p { font-size: 1.02rem; line-height: 1.6; } /* Notify */ .notify-visual { position: relative; width: 100%; max-width: 470px; margin-inline: auto; } .notify-visual::before { content: ''; position: absolute; inset: 8% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 45% at 40% 35%, rgba(226, 99, 111, 0.16) 0%, transparent 70%), radial-gradient(ellipse 50% 45% at 60% 70%, rgba(98, 194, 138, 0.12) 0%, transparent 70%); filter: blur(40px); } .notify-card { overflow: hidden; border-radius: 22px; background: #1b1a1f; border: 1px solid rgba(255, 236, 222, 0.12); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9); } .float-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.05rem; border-radius: 16px; background: rgba(22, 12, 17, 0.84); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.85); pointer-events: none; animation: floatY 7s ease-in-out infinite; } .float-chip strong { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.25; color: var(--heading); white-space: nowrap; } .float-chip small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); white-space: nowrap; } .chip-start { bottom: calc(52% + 6px); left: -17%; } .chip-end { bottom: -4%; right: -12%; animation-delay: -3.5s; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ── NetOps: bento ───────────────────────────────────────────────────────── */ .bento-sec { position: relative; background: var(--bg-alt); padding: clamp(5.5rem, 13vh, 9rem) 0; overflow: hidden; } .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 7vh, 4.25rem); } .tile { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 220px; padding: 1.6rem; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); transition: border-color 0.3s ease; } .tile::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 151, 98, 0.12), transparent 45%); transition: opacity 0.35s ease; } .tile:hover { border-color: rgba(201, 151, 98, 0.26); } .tile:hover::before { opacity: 1; } .tile.span-2 { grid-column: span 2; } .tile-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: var(--gold-a10); } .tile-icon svg { width: 21px; height: 21px; } .tile-body { margin-top: auto; padding-top: 2rem; } .tile h3 { margin-bottom: 0.35rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; color: var(--heading); } .tile p { font-size: 0.92rem; line-height: 1.5; color: var(--muted); } .tile-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.25rem 1.75rem; align-items: end; } .tile-wide .tile-text { display: flex; flex-direction: column; height: 100%; } .tile-visual { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0.6rem; align-self: stretch; min-height: 140px; } .spark { width: 100%; height: auto; max-height: 150px; } .js .spark { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-out) 0.3s; } .tile.in .spark { clip-path: inset(0 0 0 0); } .geo-card { width: 100%; max-width: 280px; margin-left: auto; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); } .geo-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.92rem; font-weight: 500; color: var(--heading); } .toggle { position: relative; flex-shrink: 0; width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); transition: background-color 0.5s ease 0.6s; } .toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.5s var(--ease-out) 0.6s; } .tile.in .toggle, html:not(.js) .toggle { background: var(--gold); } .tile.in .toggle::after, html:not(.js) .toggle::after { transform: translateX(18px); } .geo-status { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.8rem; font-size: 0.8rem; color: var(--muted); } .log { display: grid; gap: 0.5rem; width: 100%; font-family: var(--font-mono); font-size: 0.74rem; } .log li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.65rem; align-items: center; padding: 0.55rem 0.75rem; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); color: var(--text); white-space: nowrap; } .log time { color: var(--muted); } .log .tag { color: var(--gold); } .log .val { overflow: hidden; text-overflow: ellipsis; } .toast { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 320px; margin-left: auto; padding: 0.8rem 1rem; border-radius: 14px; background: rgba(0, 0, 0, 0.26); border: 1px solid var(--line); } .toast strong { display: block; font-size: 0.87rem; font-weight: 600; color: var(--heading); } .toast small { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); } .js .tile .log li, .js .tile .toast { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .tile.in .log li, .tile.in .toast { opacity: 1; transform: none; } .tile .log li:nth-child(1), .tile .toast:nth-child(1) { transition-delay: 0.35s; } .tile .log li:nth-child(2), .tile .toast:nth-child(2) { transition-delay: 0.55s; } .tile .log li:nth-child(3) { transition-delay: 0.75s; } .bento-cta { margin-top: clamp(3rem, 7vh, 4rem); } .bento-cta .actions { margin-top: 0; } /* ── Services ────────────────────────────────────────────────────────────── */ .svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .svc-card { display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.85rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)); transition: border-color 0.3s ease, background-color 0.3s ease; } .svc-card:hover { border-color: rgba(201, 151, 98, 0.26); background-color: rgba(255, 255, 255, 0.015); } .svc-icon { width: 46px; height: 46px; margin-bottom: 1.5rem; border-radius: 13px; display: grid; place-items: center; color: var(--gold); background: var(--gold-a10); } .svc-icon svg { width: 22px; height: 22px; } .svc-title { margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; color: var(--heading); } .svc-desc { font-size: 0.94rem; line-height: 1.62; color: var(--muted); } /* ── Locations / world map ───────────────────────────────────────────────── */ .pop-sec { background: var(--bg-alt); overflow: hidden; } .pop-sec::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 55% at 85% 8%, rgba(201, 151, 98, 0.07) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 12% 62%, rgba(122, 57, 99, 0.18) 0%, transparent 65%); } .pop-sec::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 236, 222, 0.12), transparent); } .pop-sec .container { position: relative; z-index: 1; } .pop-layout { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); } .pop-map { position: relative; padding: clamp(0.75rem, 1.5vw, 1.25rem); overflow: hidden; border-radius: 22px; border: 1px solid rgba(255, 236, 222, 0.10); background: radial-gradient(ellipse 22% 26% at 66.7% 74.8%, rgba(201, 151, 98, 0.22) 0%, transparent 70%), radial-gradient(ellipse 22% 24% at 14.5% 32.8%, rgba(201, 151, 98, 0.13) 0%, transparent 70%), linear-gradient(160deg, #1d0f18 0%, #120a0f 100%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .pop-map::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #140a10 0%, transparent 7%, transparent 93%, #140a10 100%), linear-gradient(180deg, rgba(20, 10, 16, 0.9) 0%, transparent 9%, transparent 91%, rgba(20, 10, 16, 0.95) 100%); } .pop-map-inner { position: relative; width: 100%; aspect-ratio: 1000 / 781.89; } .pop-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .dots { fill: none; stroke-linecap: round; stroke-width: 3; } .dots-base { stroke: rgba(227, 201, 174, 0.26); } .dots-bright { stroke: rgba(227, 201, 174, 0.55); } /* Beacons — numbered, glowing, pulsing (transform/opacity only) */ .beacon { position: absolute; z-index: 2; width: 0; height: 0; } .beacon-core { position: absolute; left: 0; top: 0; height: 27px; min-width: 27px; transform: translate(-50%, -50%); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; color: #2b1120; background: linear-gradient(145deg, #eccfa4 0%, var(--gold) 100%); box-shadow: 0 0 0 3px rgba(201, 151, 98, 0.18), 0 0 22px rgba(201, 151, 98, 0.55), 0 6px 14px rgba(0, 0, 0, 0.35); cursor: default; transition: transform 0.25s ease, box-shadow 0.25s ease; } .beacon-ring { position: absolute; left: 0; top: 0; width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; pointer-events: none; animation: beaconPulse 2.8s ease-out infinite; animation-play-state: paused; } .beacon-ring.r2 { animation-delay: 1.4s; } @keyframes beaconPulse { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(2.7); opacity: 0; } } .map-live .beacon-ring { animation-play-state: running; } .beacon.is-active .beacon-core { transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 0 0 5px rgba(201, 151, 98, 0.26), 0 0 34px rgba(201, 151, 98, 0.85), 0 6px 14px rgba(0, 0, 0, 0.35); } .beacon-tag { position: absolute; z-index: 2; padding: 0.32rem 0.7rem; border-radius: 999px; border: 1px solid rgba(227, 201, 174, 0.14); background: rgba(20, 10, 16, 0.82); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; color: var(--cream); white-space: nowrap; pointer-events: none; } /* Default: label to the right, vertically centred (used by Langen) */ .beacon .beacon-tag { left: 21px; top: 0; transform: translateY(-50%); } /* Başakşehir + Sancaktepe sit close together, so their labels diverge up-left / down-right instead of overlapping. A fixed pixel nudge keeps the two Istanbul beacons separated at any width (percentage offsets collapse on narrow viewports since they scale down with the container). */ .beacon[data-loc="2"] { transform: translate(-15px, -9px); } .beacon[data-loc="3"] { transform: translate(15px, 9px); } .beacon.tag-nw .beacon-tag { left: auto; right: 15px; top: -3px; transform: translateY(-100%); text-align: right; } .beacon.tag-se .beacon-tag { left: 15px; top: 3px; transform: translateY(0); } /* Circular inline-SVG flag icons */ .flag { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); } .flag svg { width: 100%; height: 100%; display: block; } .pop-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 0 0.25rem 0.85rem; border-bottom: 1px solid var(--line); } .pop-list-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .pop-stats { display: flex; align-items: center; gap: 0.85rem; font-size: 0.84rem; color: var(--text); white-space: nowrap; } .pop-stat strong { margin-right: 0.35rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--heading); } .pop-stat-sep { width: 1px; height: 14px; background: var(--line-strong); } .pop-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .pop-row { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.15rem 1.25rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); transition: background-color 0.25s ease, border-color 0.25s ease; } .pop-row:hover, .pop-row.is-active { background: rgba(255, 255, 255, 0.045); border-color: rgba(201, 151, 98, 0.38); } .pop-row-top { display: flex; align-items: center; gap: 0.55rem; } .pop-row-top .pop-status { margin-left: auto; } .pop-num { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; color: var(--gold); border: 1.5px solid rgba(201, 151, 98, 0.45); background: rgba(201, 151, 98, 0.10); transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .pop-row:hover .pop-num, .pop-row.is-active .pop-num { background: var(--gold); color: #2b1120; box-shadow: 0 0 18px rgba(201, 151, 98, 0.45); } .pop-row-country { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } .pop-row-city { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--heading); } .pop-row-facility { font-size: 0.875rem; color: var(--muted); } .pop-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .pop-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: statusPulse 2.2s ease-out infinite; } @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(98, 194, 138, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(98, 194, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(98, 194, 138, 0); } } /* ── CTA ─────────────────────────────────────────────────────────────────── */ .cta-sec { position: relative; padding: clamp(6rem, 15vh, 10rem) 0; overflow: hidden; } .cta-sec::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 60% at 50% 55%, rgba(122, 57, 99, 0.42) 0%, transparent 70%), radial-gradient(ellipse 30% 35% at 50% 45%, rgba(201, 151, 98, 0.10) 0%, transparent 70%); } .cta-sec .container { position: relative; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { position: relative; padding: clamp(3.5rem, 8vh, 5rem) 0 2rem; background: #0a0508; border-top: 1px solid var(--line); } .ft-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 2.5rem; } .ft-brand img { height: 40px; width: auto; margin-left: -4px; opacity: 0.92; } .ft-brand p { max-width: 18rem; margin-top: 1rem; font-size: 0.9rem; color: var(--muted); } .ft-head { margin-bottom: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .ft-col ul { display: grid; gap: 0.65rem; } .ft-col a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; color: var(--text); text-decoration: none; transition: color 0.2s ease; } .ft-col a:hover { color: var(--heading); } .ft-col a svg { width: 13px; height: 13px; opacity: 0.7; } .ft-dl dt { margin-top: 1rem; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .ft-dl dt:first-child { margin-top: 0; } .ft-dl dd { font-size: 0.88rem; line-height: 1.6; color: var(--text); } .ft-dl dd a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .ft-dl dd a:hover { color: var(--gold); } .ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); } .ft-bottom a { color: var(--text); text-decoration: none; } .ft-bottom a:hover { color: var(--gold); } .ft-entity { font-variant-numeric: tabular-nums; } /* ── Lightbox ────────────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--heading); } .lightbox::backdrop { background: rgba(8, 4, 6, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lbIn 0.35s var(--ease-out); } @keyframes lbIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } } .lb-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: clamp(3.75rem, 7vh, 4.5rem) clamp(1rem, 6vw, 5.5rem) 1rem; } .lb-img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; border: 1px solid rgba(255, 236, 222, 0.1); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); transition: opacity 0.3s ease; } .lb-img.loading { opacity: 0; } .lb-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 1.5rem 1.5rem; text-align: center; } .lb-caption { font-size: 0.95rem; color: var(--text); } .lb-count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .lb-btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(30, 17, 24, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--heading); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .lb-btn svg { width: 20px; height: 20px; } .lb-btn:hover { background: rgba(60, 32, 48, 0.88); border-color: rgba(201, 151, 98, 0.4); } .lb-close { top: 1rem; right: 1rem; } .lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lb-next { right: 1rem; top: 50%; transform: translateY(-50%); } /* ── Back to top ─────────────────────────────────────────────────────────── */ .to-top { position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem); z-index: 190; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(20, 10, 16, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--gold); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .to-top:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .to-top svg { width: 18px; height: 18px; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chip-start { left: -5%; } .chip-end { right: -5%; } .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft-brand { grid-column: 1 / -1; } } @media (max-width: 960px) { :root { --header-h: 64px; } .nav, .header-actions .lang-link { display: none; } .nav-toggle { display: block; } .header-inner { justify-content: space-between; } .brand img { height: 34px; } .hero { min-height: auto; padding-top: calc(var(--header-h) + 3rem); } .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .hero-canvas-wrap { height: 320px; } .shield-grid, .chapter-grid, .chapter-grid.flip, .chapter-head { grid-template-columns: minmax(0, 1fr); } .chapter-grid.flip .chapter-copy { order: 0; } .shield-visual { height: 300px; } .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; } .tab-copy { grid-template-columns: minmax(0, 1fr); } .notify-visual { max-width: 420px; } } @media (max-width: 760px) { .layered { padding-bottom: 0; } .layer-back { width: 100%; } .layer-front { position: relative; width: 78%; margin: -18% 0 0 auto; } .bundle-grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } .bundle-plus { width: 34px; height: 34px; font-size: 1.15rem; } .record { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.5rem; gap: 1.5rem; } .bento { grid-template-columns: minmax(0, 1fr); } .tile.span-2 { grid-column: auto; } .tile-wide { grid-template-columns: minmax(0, 1fr); } .tile-wide .tile-visual { order: -1; min-height: 0; } .tile { min-height: 0; } .tile-body { padding-top: 1.5rem; } .geo-card, .toast { margin-left: 0; max-width: none; } .pop-rows { grid-template-columns: minmax(0, 1fr); } .pop-row { padding: 0.95rem 1.1rem; } .pop-list-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .beacon-core { height: 21px; min-width: 21px; font-size: 0.66rem; } .beacon-ring { width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; } .beacon-tag { font-size: 0.64rem; padding: 0.22rem 0.5rem; } .beacon .beacon-tag { left: 16px; } .beacon.tag-nw .beacon-tag { right: 11px; } /* the Sancaktepe label would run off the right edge on phones — drop it below the beacon and let it grow leftwards instead */ .beacon.tag-se .beacon-tag { left: auto; right: -9px; top: 13px; } .window { border-radius: 12px; } .window-bar { height: 26px; padding: 0 10px; gap: 5px; } .window-bar i { width: 7px; height: 7px; } .window-url { height: 17px; padding: 0 8px; font-size: 9.5px; } .window-url svg { width: 9px; height: 9px; } .lb-prev, .lb-next { top: auto; bottom: 0.9rem; transform: none; width: 42px; height: 42px; } .lb-bar { padding: 0 4.25rem 1.4rem; flex-direction: column; gap: 0.25rem; min-height: 4.2rem; } } @media (max-width: 600px) { .header-actions .btn-sm { padding: 0 0.85rem; } .lbl-long { display: none; } .lbl-short { display: inline; } .hero-actions .btn, .actions .btn { flex: 1 1 100%; } .actions .link-arrow { margin-inline: auto; } .stat-row { grid-template-columns: minmax(0, 1fr); } .stat, .stat + .stat { padding: 1.5rem 0; border-left: 0; } .stat + .stat { border-top: 1px solid var(--line); } .pillars { grid-template-columns: minmax(0, 1fr); } .pillars a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; padding: 1.2rem; } .pillar-icon { grid-row: span 2; margin-bottom: 0; } .feature-cols { grid-template-columns: minmax(0, 1fr); } .svc-grid { grid-template-columns: minmax(0, 1fr); } .segmented [role="tab"] { padding: 0.6rem 0.95rem; font-size: 0.86rem; } .float-chip { padding: 0.6rem 0.8rem; gap: 0.6rem; } .float-chip strong { font-size: 0.8rem; } .float-chip small { font-size: 0.68rem; } .chip-start { left: -2%; } .chip-end { right: -2%; bottom: -3%; } .ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 1.5rem; } .ft-contact { grid-column: 1 / -1; } .ft-bottom { flex-direction: column; align-items: flex-start; } .to-top { width: 42px; height: 42px; } } @media (max-width: 600px) and (orientation: portrait) { /* a phone-width image of a desktop panel is unreadable: show it tall and let it pan sideways (arrows/buttons still switch screenshots) */ .lb-stage { overflow: auto; justify-content: flex-start; padding: 4rem 1rem 1rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .lb-img { max-width: none; max-height: none; width: auto; height: min(60vh, 520px); margin: auto; } } @media (max-width: 420px) { .segmented { width: 100%; } .segmented [role="tab"] { flex: 1 1 auto; padding: 0.6rem 0.7rem; font-size: 0.84rem; } } @media (max-width: 400px) { .header-inner { gap: 0.75rem; } .brand { flex-shrink: 1; min-width: 0; } .brand img { width: auto; height: auto; max-width: 100%; max-height: 28px; } .header-actions { gap: 0.4rem; } .header-actions .btn-sm { padding: 0 0.75rem; } } @media (max-width: 360px) { .log li { gap: 0.5rem; padding-inline: 0.65rem; font-size: 0.7rem; } } /* ── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .beacon-ring { display: none; } .intro-shot .window, .parallax-inner { transform: none; } }