/* FontAwesome CDN for icons (add in if not already there) */ @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"); body { margin: 0; font-family: "Poppins"; width: 100%; padding-top: 4.5rem; } html { scroll-behavior: smooth; } nav { top: 0; width: 100%; display: flex; position: fixed; z-index: 100; background-color: rgba(255, 255, 255, 0.2); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 0 1.25rem; box-shadow: 0 2px 0.63rem rgba(0, 0, 0, 0.2); } .nav-links { display: flex; width: 77%; justify-content: end; align-items: center; } .hamburger { display: none; font-size: 1.5rem; cursor: pointer; z-index: 1001; } nav a, .dropbtn { color: black; padding: 0.4rem 1rem; text-decoration: none; text-align: center; background: none; border: none; cursor: pointer; font-size: 1rem; display: inline-flex; } nav a.active { background-color: #004b8d; color: white; border-radius: 6px; } nav a:hover, .dropdown:hover .dropbtn { background-color: #004b8d; color: white; border-radius: 6px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: white; padding: 0.5rem 1rem; min-width: 10rem; box-shadow: 0 8px 1.5rem rgba(0, 0, 0, 0.12); border-radius: 6px; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; z-index: 999; } .dropdown-content a { color: black; padding: 0.5rem 1rem; text-decoration: none; display: flex; text-align: center; } .dropdown-content a:hover { background-color: #004b8d; } .dropdown:hover .dropdown-content { display: grid; } .dropdown:hover { display: grid; } .logo-title { width: 20%; display: flex; align-items: center; gap: 0.5vw; } .logo-title img { height: 4rem; } .logo-title h3 { font-size: large; align-content: center; margin: 0; } .logo-title p { font-size: smaller; color: #666; margin: 0; } :root { --card: #0f2a44; --muted: #94a3b8; --accent: #38bdf8; --white: #f8fafc; --surface: #ffffff; --text: #07243a; padding-top: 0; } /* Container */ .case-hero { background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)), /* black tint */ url("/Images/ddos-case.jpg") center/cover no-repeat; color: var(--white); padding: 80px 20px; display: flex; align-items: center; justify-content: center; height: 30vh; } .hero-inner { max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 20px; } .eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 0.6px; font-size: 0.9rem; margin-bottom: 6px; } h1 { margin: 0; font-size: 2rem; line-height: 1.05; } .hero-sub { color: var(--muted); margin-top: 12px; font-size: 1.05rem; max-width: 850px; } .hero-cta { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; } .btn { padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; display: inline-block; } .btn-primary { background: var(--accent); color: #02314a; width: auto; } .btn-ghost { background: transparent; color: var(--white); width: auto; border: 1px solid rgba(255, 255, 255, 0.12); } /* Content area */ .case-wrap { max-width: 1200px; margin: -30px auto 80px; padding: 24px; display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding-top: 0; } .card-main { background: var(--surface); border-radius: 12px; padding: 28px; box-shadow: 0 8px 30px rgba(14, 30, 50, 0.1); } .card-aside { background: linear-gradient(180deg, #fff, #f7fbff); border-radius: 12px; padding: 22px; box-shadow: 0 8px 30px rgba(14, 30, 50, 0.1); } /* Sections */ .section { margin-bottom: 22px; } .section h2 { font-size: 1.1rem; margin: 0 0 12px; color: var(--text); } .kpi { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .kpi .item { background: #0f2a44; color: var(--white); padding: 14px; border-radius: 10px; min-width: 120px; text-align: center; } .kpi .num { font-size: 1.5rem; font-weight: 700; color: var(--accent); display: block; } /* small visuals for meta area */ .meta-row { display: flex; gap: 12px; align-items: center; color: var(--muted); font-weight: 600; font-size: 0.95rem; margin-top: 8px; } .tag-pill { background: #eef9ff; color: #046; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; } /* print/download hint */ .download-hint { font-size: 0.9rem; color: var(--muted); margin-top: 12px; } p { color: #333; line-height: 1.6; margin: 0 0 12px; } /* Result highlight */ .result-badge { background: linear-gradient(90deg, #e6fffe, #e3f7ff); border-left: 4px solid var(--accent); padding: 16px; border-radius: 8px; color: #02314a; font-weight: 600; } .footer-bottom { text-align: center; border-top: 1px solid #eee; margin-top: 2rem; padding-top: 0.63rem; font-size: 0.9rem; color: #777; } .footer-bottom a { color: #004b8d; text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; } /* responsive */ @media (max-width: 432px) { body { padding-top: 3.5rem; } nav { flex-direction: column; align-items: flex-start; width: 90%; } .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 65px; right: 0; background-color: #fff; width: 40%; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.show { display: flex; width: 40%; background-color: rgba(255, 255, 255, 0.9); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ } .nav-links a, .dropbtn { padding: 5px 0; width: 60%; justify-content: center; } .dropdown-content a { font-size: small; } .dropdown { width: 100%; padding: 5px; } .dropdown-content { display: none; background-color: transparent; box-shadow: none; position: static; padding: 1px; justify-items: center; } .dropdown:hover .dropdown-content, .dropdown:hover { display: block; } .dropbtn { width: 100%; justify-content: center; } .logo-title { align-items: flex-start; width: 55%; } .logo-title img { width: 50px; height: 50px; padding-top: 5px; } .logo-title h3 { font-size: medium; padding-top: 12px; } .logo-title p { font-size: x-small; margin: 0; } .hamburger { display: block; position: absolute; right: 30px; top: 15px; z-index: 9999; color: #333; } /* Container */ .case-hero { padding: 1rem; height: fit-content; } .hero-inner { width: 100%; display: grid; grid-template-columns: 1fr; } .eyebrow { font-size: 0.7rem; } h1 { line-height: 0.95; font-size: x-large; } .hero-sub { font-size: 0.75rem; } .hero-cta { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .hero-cta a { border-radius: 6px; height: fit-content; padding: 0.3rem; width: fit-content; font-size: small; } .tag-pill { font-size: x-small; } .meta-row { font-size: 0.75rem; margin-top: 8px; justify-content: center; } /* Content area */ .card-main { box-shadow: 0 8px 30px rgba(14, 30, 50, 0.2); } .card-main p { font-size: smaller; } .card-main li { font-size: small; } .result-badge p { font-size: smaller; font-weight: 500; } .result-badge strong { font-weight: bold; } .card-aside { box-shadow: 0 8px 30px rgba(14, 30, 50, 0.2); } .card-aside h2 { font-size: larger; } .card-aside li { font-size: small; } .card-aside a { border-radius: 6px; height: fit-content; padding: 0.3rem; width: fit-content; font-size: small; } /* Sections */ .section { margin-bottom: 22px; } .section h2 { font-size: 1.1rem; margin: 0 0 12px; color: var(--text); } .kpi .item { text-align: center; height: fit-content; display: flex; gap: 1rem; } .kpi .num { font-size: 0.9rem; font-weight: 700; color: var(--accent); display: block; } p { color: #333; line-height: 1.6; margin: 0 0 12px; } .footer-bottom { text-align: center; border-top: 1px solid #eee; margin-top: 2rem; padding-top: 0.63rem; font-size: 0.9rem; color: #777; } .footer-bottom a { color: #004b8d; text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; } .case-wrap { grid-template-columns: 1fr; margin-top: 20px; padding: 18px; } .hero-inner { padding: 0 6px; text-align: center; } } @media screen and (width: 540px) { body { padding-top: 4rem; } nav { flex-direction: column; align-items: flex-start; width: 93%; } .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 65px; right: 0; background-color: #fff; width: 40%; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.show { display: flex; width: 40%; background-color: rgba(255, 255, 255, 0.9); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ } .nav-links a, .dropbtn { padding: 5px 0; width: 60%; justify-content: center; } .dropdown-content a { font-size: small; } .dropdown { width: 100%; padding: 5px; } .dropdown-content { display: none; background-color: transparent; box-shadow: none; position: static; padding: 1px; justify-items: center; } .dropdown:hover .dropdown-content, .dropdown:hover { display: block; } .dropbtn { width: 100%; justify-content: center; } .logo-title { align-items: flex-start; width: 55%; } .logo-title img { width: 50px; height: 50px; padding-top: 5px; } .logo-title h3 { font-size: medium; padding-top: 12px; } .logo-title p { font-size: x-small; margin: 0; } .hamburger { display: block; position: absolute; right: 30px; top: 15px; z-index: 9999; color: #333; } /* Container */ .case-hero { padding: 1rem; height: fit-content; } .hero-inner { width: 100%; display: grid; grid-template-columns: 1fr; } .eyebrow { font-size: 0.7rem; } h1 { line-height: 0.95; font-size: x-large; } .hero-sub { font-size: 0.75rem; } .hero-cta { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .hero-cta a { border-radius: 6px; height: fit-content; padding: 0.3rem; width: fit-content; font-size: small; } .tag-pill { font-size: x-small; } .meta-row { font-size: 0.75rem; margin-top: 8px; justify-content: center; } /* Content area */ .card-main { box-shadow: 0 8px 30px rgba(14, 30, 50, 0.2); } .card-main p { font-size: smaller; } .card-main li { font-size: small; } .result-badge p { font-size: smaller; font-weight: 500; } .result-badge strong { font-weight: bold; } .card-aside { box-shadow: 0 8px 30px rgba(14, 30, 50, 0.2); } .card-aside h2 { font-size: larger; } .card-aside li { font-size: small; } .card-aside a { border-radius: 6px; height: fit-content; padding: 0.3rem; width: fit-content; font-size: small; } /* Sections */ .section { margin-bottom: 22px; } .section h2 { font-size: 1.1rem; margin: 0 0 12px; color: var(--text); } .kpi .item { text-align: center; height: fit-content; display: flex; gap: 1rem; } .kpi .num { font-size: 0.9rem; font-weight: 700; color: var(--accent); display: block; } p { color: #333; line-height: 1.6; margin: 0 0 12px; } .footer-bottom { text-align: center; border-top: 1px solid #eee; margin-top: 2rem; padding-top: 0.63rem; font-size: 0.9rem; color: #777; } .footer-bottom a { color: #004b8d; text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; } .case-wrap { grid-template-columns: 1fr; margin-top: 20px; padding: 18px; } } @media (width: 768px) { body { padding-top: 4rem; } nav { flex-direction: column; align-items: flex-start; width: 95%; } .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 65px; right: 0; background-color: #fff; width: 40%; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.show { display: flex; width: 40%; background-color: rgba(255, 255, 255, 0.9); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ } .nav-links a, .dropbtn { padding: 5px 0; width: 60%; justify-content: center; } .dropdown-content a { font-size: small; } .dropdown { width: 100%; padding: 5px; } .dropdown-content { display: none; background-color: transparent; box-shadow: none; position: static; padding: 1px; justify-items: center; } .dropdown:hover .dropdown-content, .dropdown:hover { display: block; } .dropbtn { width: 100%; justify-content: center; } .logo-title { align-items: flex-start; width: 55%; } .logo-title img { width: 50px; height: 50px; padding-top: 5px; } .logo-title h3 { font-size: medium; padding-top: 12px; } .logo-title p { font-size: x-small; margin: 0; } .hamburger { display: block; position: absolute; right: 30px; top: 15px; z-index: 9999; color: #333; } } @media screen and (width: 820px) { body { padding-top: 4rem; } nav { flex-direction: column; align-items: flex-start; width: 95%; } .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 65px; right: 0; background-color: #fff; width: 40%; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.show { display: flex; width: 40%; background-color: rgba(255, 255, 255, 0.9); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ } .nav-links a, .dropbtn { padding: 5px 0; width: 60%; justify-content: center; } .dropdown-content a { font-size: small; } .dropdown { width: 100%; padding: 5px; } .dropdown-content { display: none; background-color: transparent; box-shadow: none; position: static; padding: 1px; justify-items: center; } .dropdown:hover .dropdown-content, .dropdown:hover { display: block; } .dropbtn { width: 100%; justify-content: center; } .logo-title { align-items: flex-start; width: 55%; } .logo-title img { width: 50px; height: 50px; padding-top: 5px; } .logo-title h3 { font-size: medium; padding-top: 12px; } .logo-title p { font-size: x-small; margin: 0; } .hamburger { display: block; position: absolute; right: 30px; top: 15px; z-index: 9999; color: #333; } } @media screen and (width: 853px) { body { padding-top: 4rem; } nav { flex-direction: column; align-items: flex-start; width: 95.6%; } .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 65px; right: 0; background-color: #fff; width: 40%; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.show { display: flex; width: 40%; background-color: rgba(255, 255, 255, 0.9); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ } .nav-links a, .dropbtn { padding: 5px 0; width: 60%; justify-content: center; } .dropdown-content a { font-size: small; } .dropdown { width: 100%; padding: 5px; } .dropdown-content { display: none; background-color: transparent; box-shadow: none; position: static; padding: 1px; justify-items: center; } .dropdown:hover .dropdown-content, .dropdown:hover { display: block; } .dropbtn { width: 100%; justify-content: center; } .logo-title { align-items: flex-start; width: 55%; } .logo-title img { width: 50px; height: 50px; padding-top: 5px; } .logo-title h3 { font-size: medium; padding-top: 12px; } .logo-title p { font-size: x-small; margin: 0; } .hamburger { display: block; position: absolute; right: 30px; top: 15px; z-index: 9999; color: #333; } } @media screen and (width: 912px) { body { padding-top: 4rem; } nav { flex-direction: column; align-items: flex-start; width: 95.6%; } .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 65px; right: 0; background-color: #fff; width: 40%; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.show { display: flex; width: 40%; background-color: rgba(255, 255, 255, 0.9); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ } .nav-links a, .dropbtn { padding: 5px 0; width: 60%; justify-content: center; } .dropdown-content a { font-size: small; } .dropdown { width: 100%; padding: 5px; } .dropdown-content { display: none; background-color: transparent; box-shadow: none; position: static; padding: 1px; justify-items: center; } .dropdown:hover .dropdown-content, .dropdown:hover { display: block; } .dropbtn { width: 100%; justify-content: center; } .logo-title { align-items: flex-start; width: 55%; } .logo-title img { width: 50px; height: 50px; padding-top: 5px; } .logo-title h3 { font-size: medium; padding-top: 12px; } .logo-title p { font-size: x-small; margin: 0; } .hamburger { display: block; position: absolute; right: 30px; top: 15px; z-index: 9999; color: #333; } } @media screen and (width: 1024px) { nav { width: 96%; } .logo-title { width: 30%; } .nav-links { width: 70%; justify-content: center; } } @media (min-width: 1600px) { .case-hero { padding: 40px 40px; background-size: cover; height: fit-content; } h1 { font-size: 4rem; } .case-wrap { max-width: 1500px; gap: 36px; padding: 0; } .eyebrow { font-size: 1.8rem; } .hero-sub { font-size: 1.8rem; } .hero-cta a { border-radius: 6px; height: fit-content; padding: 0.3rem; width: fit-content; font-size: x-large; } .tag-pill { font-size: large; } .meta-row { font-size: 1.4rem; margin-top: 8px; } /* Content area */ main h2 { font-size: 1.7rem; } .section h2 { font-size: 1.7rem; } .card-main { box-shadow: 0 8px 30px rgba(14, 30, 50, 0.2); } .card-main p { font-size: x-large; } .card-main li { font-size: larger; } .result-badge p { font-size: x-large; font-weight: 500; } .result-badge strong { font-weight: bold; } .card-aside { box-shadow: 0 8px 30px rgba(14, 30, 50, 0.2); } .card-aside h2 { font-size: 1.7rem; } .card-aside li { font-size: larger; } .card-aside a { border-radius: 6px; height: fit-content; padding: 0.3rem; width: fit-content; font-size: larger; } /* Sections */ .section { margin-bottom: 22px; } .section h2 { margin: 0 0 12px; color: var(--text); } .kpi .item { text-align: center; height: fit-content; display: flex; gap: 1rem; } .kpi .num { font-size: 0.9rem; font-weight: 700; color: var(--accent); display: block; } p { color: #333; line-height: 1.6; margin: 0 0 12px; } .footer-bottom { text-align: center; border-top: 1px solid #eee; margin-top: 2rem; padding-top: 0.63rem; font-size: 0.9rem; color: #777; } .footer-bottom a { color: #004b8d; text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; } }