/* ============================================ VeloGuardian — Design 10: Security Command Center Main Stylesheet ============================================ DESIGN SYSTEM: - Theme: Dark ("Security Command Center" aesthetic) - Primary: #4CAF50 (Material Green 500) — used for CTAs, accents, active states - Danger: #C62828 (Material Red 800) — reserved for error states (not widely used) - Background: #0a0a0a (near-black) — main page background - Surface: #111 — card/panel backgrounds - Text: #b0b0b0 (body), #fff (headings), #777/#666 (muted), #999 (content) - Font: Inter (loaded via Google Fonts in HTML) - Base size: 15px (set on ) - Spacing: letter-spacing: -0.01em (body), -0.02em (headings) FILE STRUCTURE (in order): 1. Reset & Base styles 2. Container 3. Navigation (desktop + mobile + dropdown) 4. Buttons 5. Hero section (animated shield, grid background, radial glow) 6. Generic sections 7. Pillars (3-column feature cards) 8. Timeline (How It Works steps) 9. Network Architecture Visual (traffic flow diagram) 10. Feature Cards (2-column grid) 11. CTA section 12. Pricing cards & grid 13. Content sections (about, privacy, articles) 14. Contact/Get-Started forms 15. Download page cards 16. Page header (non-hero pages) 17. Feature detail (features.html) 18. FAQ / Common Questions 19. Footer 20. Resource cards grid (resources.html) 21. Scroll reveal animation 22. Responsive breakpoints (768px, 480px) ============================================ */ /* Google Fonts — loaded via in HTML for performance. Inter is used at weights 400 (body), 500 (labels), 600 (subheadings), 700 (headings), 800 (hero heading). */ /* ---- Reset & Base ---- Universal box-sizing reset ensures padding/border are included in element dimensions. All margins/padding cleared for consistent spacing. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Smooth scrolling for anchor links */ font-size: 15px; /* Base font size — all rem values derive from this */ overflow-x: hidden; /* Prevent horizontal scroll from decorative elements */ } body { /* Font stack: Inter first, then platform system fonts as fallbacks */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0a0a0a; /* Near-black page background */ color: #b0b0b0; /* Default body text color (light grey) */ line-height: 1.6; /* Comfortable reading line height */ min-height: 100vh; /* Ensure body fills viewport */ letter-spacing: -0.01em; /* Slightly tighter tracking for Inter */ overflow-x: hidden; /* Prevent horizontal scroll on mobile WebKit */ } /* Noise texture overlay — adds subtle grain/texture over the entire page for a more tactile dark-mode feel. Uses an inline SVG data URI with fractalNoise filter. Fixed position so it doesn't scroll. Pointer-events disabled so it never interferes with clicks. Very low opacity (2.5%). */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* ---- Link Styles ---- Links use the primary green color with a subtle hover transition. */ a { color: #4CAF50; /* Primary green for all links */ text-decoration: none; /* No underlines — clean aesthetic */ transition: color 0.2s; /* Smooth color transition on hover */ } a:hover { color: #66BB6A; /* Lighter green on hover (Material Green 400) */ } /* ---- Image Reset ---- Prevent images from overflowing their containers. */ img { max-width: 100%; height: auto; } /* ---- Container ---- Centered content wrapper with a max-width of 1100px. Horizontal padding ensures content doesn't touch screen edges on mobile. */ .container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; } /* ============================================ Navigation ============================================ Fixed top navigation bar with a semi-transparent dark background and backdrop-filter blur for a frosted-glass effect. The nav is injected into #nav-placeholder by js/components.js at runtime. On mobile (<768px), the nav links collapse into a hamburger menu. */ .nav { background: rgba(10, 10, 10, 0.92); /* Semi-transparent dark background */ backdrop-filter: blur(16px); /* Frosted glass blur effect */ -webkit-backdrop-filter: blur(16px); /* Safari prefix for backdrop-filter */ border-bottom: 1px solid rgba(255,255,255,0.06); /* Subtle bottom border */ position: fixed; /* Stays at top while scrolling */ top: 0; left: 0; right: 0; width: 100%; max-width: 100vw; /* Prevent any overflow */ z-index: 1000; /* Above all other content */ } /* Nav container — flex layout with logo on the left and links on the right. Fixed 56px height keeps the nav compact. */ .nav .container { display: flex; align-items: center; justify-content: space-between; height: 56px; } /* Brand logo + text link — always visible on all screen sizes */ .nav-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; } .nav-brand img { width: 30px; height: 30px; } .nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; } .nav-links a { color: #777; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; letter-spacing: 0; } .nav-links a:hover, .nav-links a.active { color: #fff; } /* Nav CTA button — the green "Download" button in the nav bar. Uses !important on color to override link hover color. */ .nav-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: #4CAF50; color: #fff !important; padding: 0.4rem 1rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; transition: background 0.2s; } .nav-cta:hover { background: #43A047; color: #fff !important; } .nav-cta svg { width: 14px; height: 14px; } /* Nav DNS pill — outlined badge to signal a distinct product offering. Visually separated from standard nav links but not as prominent as the CTA. */ .nav-dns { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border: 1px solid rgba(76,175,80,0.35); border-radius: 20px; color: #4CAF50 !important; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; transition: all 0.2s; } .nav-dns:hover { background: rgba(76,175,80,0.1); border-color: rgba(76,175,80,0.6); color: #66BB6A !important; } .nav-dns svg { width: 14px; height: 14px; } /* Hamburger menu toggle button — hidden on desktop, shown on mobile. Contains two child spans: .hamburger-icon (3 horizontal lines) and .close-icon (X). Only one is visible at a time based on the .open class. */ .nav-toggle { display: none; appearance: none; background: none; border: none; cursor: pointer; padding: 0.5rem; position: relative; width: 44px; height: 44px; overflow: visible; z-index: 10; } .nav-toggle .hamburger-icon, .nav-toggle .close-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s; pointer-events: none; } .nav-toggle .close-icon { opacity: 0; } .nav-toggle.open .hamburger-icon { opacity: 0; } .nav-toggle.open .close-icon { opacity: 1; } .nav-toggle svg { display: block; width: 20px; height: 20px; stroke: #ccc; } /* ---- Nav Dropdown ---- Dropdown menu for "Resources" nav item. On desktop, shown on hover. On mobile, toggled by tap via JavaScript (adds .open class). The dropdown menu is absolutely positioned below the toggle link with an upward-pointing arrow pseudo-element (::before). */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; } .nav-dropdown-toggle svg { width: 12px; height: 12px; transition: transform 0.2s; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(17, 17, 17, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px 0 0.5rem; min-width: 220px; list-style: none; box-shadow: 0 12px 40px rgba(0,0,0,0.5); z-index: 100; } .nav-dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(17, 17, 17, 0.98); } .nav-dropdown-menu li { margin: 0; } .nav-dropdown-divider { height: 1px; margin: 6px 1rem; background: rgba(255, 255, 255, 0.08); list-style: none; } .section-title[id] { scroll-margin-top: 80px; } .nav-dropdown-menu a { display: block; padding: 0.5rem 1rem; color: #888; font-size: 0.84rem; font-weight: 500; transition: color 0.2s, background 0.2s; white-space: nowrap; } .nav-dropdown-menu a:hover { color: #fff; background: rgba(76, 175, 80, 0.08); } /* Desktop: show dropdown on hover (769px+). The :hover pseudo-class on the parent .nav-dropdown reveals the child .nav-dropdown-menu. */ @media (min-width: 769px) { .nav-dropdown:hover .nav-dropdown-menu { display: block; } .nav-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); } } /* ---- Mobile Nav ---- On screens 768px and below: show hamburger toggle, collapse nav-links into a full-width vertical dropdown below the nav bar. Dropdown items use left border instead of arrows for visual hierarchy. */ @media (max-width: 768px) { .nav-toggle { display: block; } .nav-links { display: none; flex-direction: column; position: absolute; top: 56px; left: 0; right: 0; background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 1rem 1.25rem; gap: 0; } .nav-links > li > a { display: block; padding: 0.6rem 0; } .nav-cta { display: block; text-align: center; margin-top: 0.5rem; } .nav-dns { display: flex; justify-content: center; border: none; border-radius: 0; background: none; padding: 0.6rem 0; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; } .nav-dns:hover { background: none; border: none; } .nav-dropdown-toggle { padding: 0.6rem 0; } .nav-links.open { display: flex; } .nav-dropdown-menu { position: static; transform: none; background: transparent; backdrop-filter: none; border: none; border-radius: 0; padding: 0.25rem 0 0 1rem; min-width: 0; box-shadow: none; border-left: 2px solid rgba(76, 175, 80, 0.2); } .nav-dropdown-menu a { padding: 0.5rem 1rem; } .nav-dropdown-divider { background: rgba(76, 175, 80, 0.15); } .nav-dropdown-menu::before { display: none; } .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); } } /* ============================================ Buttons ============================================ Reusable button component with three variants: .btn-primary — solid green background, white text (main CTA) .btn-secondary — transparent with grey border, hover turns green .btn-large — larger padding/font for hero and CTA sections All buttons use inline-flex for icon+text alignment with gap. Active state has a subtle scale-down press effect. */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem; border-radius: 6px; font-size: 0.93rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; letter-spacing: -0.01em; font-family: inherit; } .btn:active { transform: scale(0.98); } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-primary { background: #4CAF50; color: #fff; } .btn-primary:hover { background: #43A047; color: #fff; box-shadow: 0 0 24px rgba(76, 175, 80, 0.25); } .btn-secondary { background: transparent; color: #ccc; border: 1px solid #333; } .btn-secondary:hover { border-color: #4CAF50; color: #fff; background: rgba(76, 175, 80, 0.06); } .billing-btn.active { border-color: #4CAF50; color: #fff; background: rgba(76, 175, 80, 0.12); } .btn-large { padding: 0.85rem 2rem; font-size: 1rem; } /* ============================================ Hero Section — Security Command Center ============================================ Full-width hero banner on the homepage. Uses three visual layers: 1. ::before — faint green grid lines (CSS background-image) with a radial mask so they fade out toward the edges 2. ::after — radial green glow behind the shield SVG 3. .hero-content — the actual text/buttons (z-index: 2 to sit on top) The animated shield SVG uses stroke-dashoffset animation to "draw" the shield outline, then the lock icon, creating a reveal effect. */ .hero { padding: 8rem 0 3rem; /* Large top padding to clear the fixed nav */ text-align: center; position: relative; overflow: hidden; /* Clip the decorative grid/glow layers */ background: linear-gradient(180deg, #0d120d 0%, #0a0a0a 60%, #0a0a0a 100%); } /* Layer 1: Animated grid background — green grid lines that fade out via a radial mask-image. Centered and wider than viewport (1400px) so edges always appear to fade naturally. */ .hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1400px; height: 100%; background-image: linear-gradient(rgba(76, 175, 80, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 175, 80, 0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 100%); } /* Layer 2: Radial glow behind the shield — a large, soft green circle positioned behind the animated SVG shield to create a subtle backlight. */ .hero::after { content: ''; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(76, 175, 80, 0.08) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 2; } /* Animated Shield SVG container — sized at 120x120px on desktop, scales down on mobile via media queries. The SVG inside uses CSS stroke-dasharray/dashoffset animation to draw paths sequentially: shield outline first (0.3s delay), then lock body and shackle (1.2s delay). */ .hero-shield { width: 120px; height: 120px; margin: 0 auto 2rem; } .hero-shield svg { width: 100%; height: 100%; } /* Shield outline path — starts fully hidden (dashoffset == dasharray) and animates to fully visible (dashoffset: 0) over 2 seconds. */ .shield-path { stroke-dasharray: 300; /* Total dash length matching path length */ stroke-dashoffset: 300; /* Initially hidden (offset == array = invisible) */ animation: drawShield 2s ease forwards 0.3s; /* 0.3s delay before drawing starts */ } /* Lock icon paths (body, shackle, keyhole, line) — same animation technique but starts later (1.2s delay) so lock draws after shield. */ .lock-path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawShield 1.2s ease forwards 1.2s; } /* Shared keyframe animation for SVG path drawing effect. Animates stroke-dashoffset from its initial value to 0, which progressively reveals the stroke from start to end. */ @keyframes drawShield { to { stroke-dashoffset: 0; } } .hero h1 { font-size: 3.2rem; font-weight: 800; color: #fff; margin-bottom: 0.75rem; line-height: 1.15; letter-spacing: -0.03em; } .hero h1 .highlight { color: #4CAF50; } .hero-sub { font-size: 1.1rem; color: #777; max-width: 540px; margin: 0 auto 2rem; line-height: 1.6; } .hero-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ============================================ Generic Sections ============================================ Base styles for page content sections. .section provides consistent vertical padding. .section-dark adds a slightly lighter dark background to create visual separation between alternating sections. .section-title and .section-subtitle are centered headings used above feature grids, timelines, and other grouped content. */ .section { padding: 4rem 0; position: relative; } .section-dark { background: #0d0d0d; } .section-title { font-size: 1.75rem; font-weight: 700; color: #fff; text-align: center; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .section-subtitle { text-align: center; color: #666; font-size: 0.95rem; max-width: 520px; margin: 0 auto 2.5rem; } /* ============================================ Pillars — Three Columns ============================================ Used on homepage for the three main value propositions (VPN, Web Security, Remote Access). 3-column CSS Grid that collapses to 2 columns on tablets and 1 column on mobile. Each .pillar card has a centered icon, heading, and description with hover effects (green border, lift, shadow). */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 1024px) { .pillars { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } } .pillar { background: #111; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 1.5rem; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .pillar:hover { border-color: rgba(76, 175, 80, 0.3); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .pillar-icon { width: 48px; height: 48px; margin: 0 auto 1rem; background: rgba(76, 175, 80, 0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .pillar-icon svg { width: 24px; height: 24px; color: #4CAF50; } .pillar h3 { font-size: 1.05rem; color: #fff; margin-bottom: 0.4rem; font-weight: 600; letter-spacing: -0.01em; } .pillar p { color: #777; font-size: 0.87rem; line-height: 1.55; } /* ============================================ Product Showcase — Homepage product cards ============================================ Two-column grid showing VPN and DNS product cards side-by-side. Each card has an icon, title, description, feature list, and CTA. */ .product-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .product-card { background: #111; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid #4CAF50; border-radius: 12px; padding: 2.5rem; text-align: left; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .product-card:hover { transform: translateY(-4px); border-color: rgba(76, 175, 80, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 24px rgba(76, 175, 80, 0.1); } .product-card-icon { width: 56px; height: 56px; background: rgba(76, 175, 80, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .product-card-icon svg { width: 28px; height: 28px; color: #4CAF50; } .product-card h3 { font-size: 1.3rem; color: #fff; font-weight: 700; margin-bottom: 0.6rem; letter-spacing: -0.01em; } .product-card-desc { color: #999; font-size: 0.93rem; line-height: 1.6; margin-bottom: 1.25rem; } .product-card-features { list-style: none; padding: 0; margin: 0 0 1.5rem; } .product-card-features li { color: #b0b0b0; font-size: 0.9rem; padding: 0.35rem 0; padding-left: 1.5rem; position: relative; line-height: 1.5; } .product-card-features li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .product-card .btn { margin-top: 0.5rem; } /* ============================================ Platform Benefits — Why VeloGuardian ============================================ Four-column grid for platform-level benefit cards. */ .platform-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .platform-benefit { text-align: center; padding: 2rem 1.5rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; } .platform-benefit:hover { border-color: rgba(76, 175, 80, 0.3); transform: translateY(-3px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 16px rgba(76, 175, 80, 0.06); } .platform-benefit-icon { width: 48px; height: 48px; background: rgba(76, 175, 80, 0.1); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .platform-benefit-icon svg { width: 24px; height: 24px; color: #4CAF50; } .platform-benefit h3 { font-size: 1.05rem; color: #fff; margin-bottom: 0.5rem; font-weight: 600; letter-spacing: -0.01em; } .platform-benefit p { color: #777; font-size: 0.87rem; line-height: 1.6; } /* Product pills — subtle badges below hero buttons */ .hero-pills { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; } .hero-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; background: rgba(76, 175, 80, 0.08); border: 1px solid rgba(76, 175, 80, 0.2); border-radius: 100px; color: #4CAF50; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .hero-pill svg { width: 14px; height: 14px; } /* ============================================ How It Works — Timeline ============================================ Horizontal 3-step timeline used on the homepage. Each step has: - .timeline-dot — circular icon container that highlights green on scroll - .timeline-line — horizontal connecting line with an animated fill bar - Heading + description text Steps receive a "visible" class via IntersectionObserver in main.js, which triggers the dot highlight and line fill transitions. On mobile, the timeline stacks vertically and lines are hidden. */ .timeline { display: flex; align-items: flex-start; justify-content: center; gap: 0; position: relative; max-width: 800px; margin: 0 auto; } .timeline-step { flex: 1; text-align: center; position: relative; padding: 0 1rem; } .timeline-dot { width: 44px; height: 44px; border-radius: 50%; background: #111; border: 2px solid #333; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; position: relative; z-index: 2; transition: all 0.3s ease; } .timeline-dot svg { width: 20px; height: 20px; color: #4CAF50; } .timeline-dot.visible { border-color: #4CAF50; background: rgba(76, 175, 80, 0.1); box-shadow: 0 0 16px rgba(76, 175, 80, 0.2); } .timeline-line { position: absolute; top: 22px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; background: #222; z-index: 1; } .timeline-line-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #4CAF50; transition: width 0.6s ease; } .timeline-step.visible .timeline-line .timeline-line-fill { width: 100%; } .timeline-step:last-child .timeline-line { display: none; } .timeline-step h3 { color: #fff; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem; } .timeline-step p { color: #666; font-size: 0.8rem; line-height: 1.5; } @media (max-width: 768px) { .timeline { flex-direction: column; align-items: center; gap: 1.5rem; } .timeline-line { display: none; } .timeline-step { padding: 0; } } /* ============================================ Network Architecture Visual ============================================ Horizontal traffic flow diagram on the homepage: Device --> WireGuard --> Cloud Shield --> Internet Each node is a circular icon with a label below. Nodes are connected by .network-line elements with animated pulse dots (CSS @keyframes networkPulse). The "active" class highlights the WireGuard and Cloud Shield nodes in green to show they're the protection layers. On small screens (<480px), the diagram rotates to vertical layout. */ .network-visual { padding: 2.5rem 0 1rem; max-width: 720px; margin: 0 auto; overflow: hidden; } .network-row { display: flex; align-items: center; justify-content: center; gap: 0; } .network-node { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; z-index: 2; } .node-icon { width: 72px; height: 72px; border-radius: 50%; background: #111; border: 2px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; } .node-icon svg { width: 28px; height: 28px; color: #777; transition: color 0.3s; } .network-node:hover .node-icon { border-color: #4CAF50; box-shadow: 0 0 20px rgba(76, 175, 80, 0.15); } .network-node:hover .node-icon svg { color: #4CAF50; } .node-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; transition: color 0.3s; } .network-node.active .node-icon { border-color: #4CAF50; background: rgba(76, 175, 80, 0.06); } .network-node.active .node-icon svg { color: #4CAF50; } .network-node.active .node-label { color: #4CAF50; } .network-line { width: 80px; height: 2px; background: linear-gradient(90deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.35), rgba(76, 175, 80, 0.1)); position: relative; flex-shrink: 0; } /* Animated pulse dot on lines — a small green circle that travels from left to right along each connecting line, simulating data flowing through the network. Uses @keyframes networkPulse for horizontal, @keyframes networkPulseVertical for mobile vertical layout. */ .network-line::after { content: ''; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #4CAF50; box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); animation: networkPulse 2.5s ease-in-out infinite; } @keyframes networkPulse { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } } /* Stagger the pulse dot animations so they appear to flow sequentially from left to right across the three connecting lines. */ .network-line ~ .network-node ~ .network-line::after { animation-delay: 0.6s; } .network-line ~ .network-node ~ .network-line ~ .network-node ~ .network-line::after { animation-delay: 1.2s; } @media (max-width: 600px) { .network-node .node-icon { width: 56px; height: 56px; } .node-icon svg { width: 22px; height: 22px; } .network-line { width: 36px; } .node-label { font-size: 0.75rem; } } @media (max-width: 480px) { .network-row { flex-direction: column; gap: 0; } .network-node .node-icon { width: 52px; height: 52px; } .node-icon svg { width: 22px; height: 22px; } .network-line { width: 2px; height: 28px; background: linear-gradient(180deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.35), rgba(76, 175, 80, 0.1)); } .network-line::after { top: 0; left: -3px; animation: networkPulseVertical 2.5s ease-in-out infinite; } .node-label { font-size: 0.72rem; } } @keyframes networkPulseVertical { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } } /* ============================================ Feature Cards — 2 Column Grid ============================================ Used on the homepage to display six security features in a 2-column responsive grid. Each card has an icon (left) and text (right). Cards have hover effects: green border, slight upward lift, shadow, and a subtle icon rotation. Collapses to 1 column on mobile. */ .feature-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (max-width: 768px) { .feature-grid-2col { grid-template-columns: 1fr; } } .feature-card { display: flex; align-items: flex-start; gap: 1rem; background: #111; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 1.25rem; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .feature-card:hover { border-color: rgba(76, 175, 80, 0.3); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .feature-card:hover .feature-icon svg { transform: rotate(5deg); } .feature-icon { width: 48px; height: 48px; min-width: 48px; background: rgba(76, 175, 80, 0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .feature-icon svg { width: 24px; height: 24px; color: #4CAF50; transition: transform 0.25s ease; } .feature-text h3 { color: #fff; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; letter-spacing: -0.01em; } .feature-text p { color: #666; font-size: 0.82rem; line-height: 1.55; } /* ============================================ CTA Section — Full Width Dark Gradient ============================================ Call-to-action banner used at the bottom of most pages. Dark gradient background with green-tinted top/bottom borders. A radial green glow (::before pseudo-element) sits behind the centered heading, paragraph, and primary CTA button. */ .cta-section { background: linear-gradient(135deg, #0f170f 0%, #0a0a0a 50%, #0d0d0d 100%); border-top: 1px solid rgba(76, 175, 80, 0.1); border-bottom: 1px solid rgba(76, 175, 80, 0.1); padding: 3.5rem 0; text-align: center; position: relative; } .cta-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 100%; background: radial-gradient(ellipse at center, rgba(76, 175, 80, 0.04) 0%, transparent 70%); pointer-events: none; } .cta-content { position: relative; z-index: 2; } .cta-content h2 { color: #fff; font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .cta-content p { color: #666; font-size: 0.95rem; margin-bottom: 1.5rem; max-width: 450px; margin-left: auto; margin-right: auto; } /* ============================================ Pricing ============================================ 4-column responsive grid for pricing cards on pricing.html. Each card shows: tier icon, plan name, price, features list, CTA button. The .featured card (Citadel) gets a green top border and "Popular" badge via ::before pseudo-element. Grid collapses to 2 columns on tablet, 1 column on mobile. */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; } @media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto; } .pricing-card { padding: 1.5rem 1.25rem; } } .pricing-card { background: #111; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 2rem 1.5rem; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; position: relative; } .pricing-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .pricing-card.featured { border-color: #4CAF50; border-top-width: 3px; } .pricing-card.featured::before { content: "Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #4CAF50; color: #fff; padding: 0.2rem 0.85rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; } .pricing-card .pricing-icon { width: 48px; height: 48px; color: #4CAF50; margin: 0 auto 0.75rem; display: block; opacity: 0.9; } .pricing-card:hover .pricing-icon { opacity: 1; } .pricing-card h3 { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.35rem; } .pricing-card .price { font-size: 2.25rem; color: #4CAF50; font-weight: 700; margin-bottom: 1.25rem; letter-spacing: -0.03em; } .pricing-features { list-style: none; margin-bottom: 1.5rem; text-align: left; } .pricing-features li { padding: 0.4rem 0; color: #999; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; gap: 0.5rem; } .pricing-features li svg { width: 16px; height: 16px; color: #4CAF50; flex-shrink: 0; } /* ============================================ About / Content Sections ============================================ Styles for long-form content pages (about.html, privacy.html, and all resource articles). .content-section constrains width to 720px for readable line lengths. Headings have subtle bottom borders for visual separation. Lists and paragraphs use muted colors for comfortable reading. */ .content-section { max-width: 720px; margin: 0 auto; } .content-section h2 { color: #fff; font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.06); letter-spacing: -0.01em; } .content-section p { margin-bottom: 0.85rem; color: #999; line-height: 1.7; font-size: 0.93rem; } .content-section ul { margin: 0.5rem 0 1.25rem 1.25rem; } .content-section li { margin-bottom: 0.35rem; color: #999; font-size: 0.93rem; } .content-section strong { color: #fff; } /* ============================================ Contact Form ============================================ Shared form styles used by contact.html and get-started.html. Max-width 540px, centered. Form inputs have dark backgrounds with subtle borders that turn green on focus with a soft glow ring. The .form-checkbox component provides a custom-styled checkbox using appearance:none and a CSS-only checkmark (::after pseudo-element). .plan-details is a collapsible info box below the plan dropdown on get-started.html, shown/hidden via the .visible class in main.js. .form-success is hidden by default, shown after successful form submit. */ .contact-form { max-width: 540px; margin: 0 auto; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; color: #999; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.7rem 0.85rem; background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #eee; font-size: 0.93rem; font-family: inherit; transition: border-color 0.2s; } .form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.5rem; cursor: pointer; } .form-group select option { background: #111; color: #eee; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #4CAF50; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); } .form-group textarea { min-height: 130px; resize: vertical; } .form-checkbox label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.75rem 0.85rem; background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; transition: border-color 0.2s; } .form-checkbox label:hover { border-color: rgba(255,255,255,0.15); } .form-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-width: 18px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; background: transparent; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s; } .form-checkbox input[type="checkbox"]:checked { background: #4CAF50; border-color: #4CAF50; } .form-checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .form-checkbox input[type="checkbox"]:focus { outline: none; border-color: #4CAF50; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); } .form-checkbox span { color: #ccc; font-size: 0.93rem; } .plan-details { display: none; margin-top: 0.6rem; padding: 0.85rem 1rem; background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; font-size: 0.85rem; color: #b0b0b0; line-height: 1.6; } .plan-details.visible { display: block; } .plan-details strong { color: #fff; font-weight: 600; } .plan-details ul { list-style: none; padding: 0; margin: 0.4rem 0 0; } .plan-details ul li { padding: 0.15rem 0; padding-left: 1.2rem; position: relative; } .plan-details ul li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; border-radius: 50%; background: #4CAF50; } /* ---- Download Page ---- 4-column grid of platform download cards (Windows, macOS, iOS, Android). Each card has a platform icon, name, OS requirement, and a CTA button. .btn-disabled greys out the button when downloads are not yet available. */ .download-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; } .download-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 2.25rem 1.5rem; text-align: center; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s; display: flex; flex-direction: column; align-items: center; } .download-card:hover { background: rgba(255,255,255,0.055); border-color: rgba(76,175,80,0.3); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(76,175,80,0.06); } .download-card svg { width: 48px; height: 48px; color: #4CAF50; margin-bottom: 1.25rem; filter: drop-shadow(0 0 12px rgba(76,175,80,0.2)); transition: filter 0.3s, transform 0.3s; } .download-card:hover svg { filter: drop-shadow(0 0 18px rgba(76,175,80,0.35)); transform: scale(1.08); } .download-card h3 { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; } .download-card p { color: #999; font-size: 0.88rem; margin-bottom: 1.25rem; flex-grow: 1; } .download-card .btn { width: 100%; } .btn-disabled, .download-card .btn-disabled { opacity: 0.5; cursor: default; pointer-events: none; } @media (max-width: 1024px) { .download-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .download-grid { grid-template-columns: 1fr; } } /* ---- Platform Landing Pages ---- Setup steps, feature grid, FAQ accordion, and compatibility sections used on vpn-for-windows/mac/iphone/android pages. */ /* 3-step setup row */ .setup-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2.5rem 0; position: relative; } /* Connecting line between steps */ .setup-steps::before { content: ''; position: absolute; top: 68px; left: calc(16.67% + 36px); right: calc(16.67% + 36px); height: 2px; background: linear-gradient(90deg, rgba(76,175,80,0.5) 0%, rgba(76,175,80,0.25) 50%, rgba(76,175,80,0.5) 100%); box-shadow: 0 0 8px rgba(76,175,80,0.15); } .setup-step { text-align: center; padding: 2rem 1.25rem; position: relative; z-index: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; display: flex; flex-direction: column; align-items: center; } .setup-step:hover { border-color: rgba(76,175,80,0.3); box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 20px rgba(76,175,80,0.06); transform: translateY(-3px); } .setup-step-number { width: 72px; height: 72px; border-radius: 50%; background: rgba(76, 175, 80, 0.15); border: 2px solid rgba(76,175,80,0.4); color: #4CAF50; font-size: 1.5rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; box-shadow: 0 0 20px rgba(76,175,80,0.1); } .setup-step:hover .setup-step-number { background: rgba(76,175,80,0.22); border-color: rgba(76,175,80,0.5); box-shadow: 0 0 30px rgba(76,175,80,0.2), 0 0 60px rgba(76,175,80,0.08); } .setup-step h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; } .setup-step p { color: #999; font-size: 0.9rem; line-height: 1.5; } @media (max-width: 600px) { .setup-steps { grid-template-columns: 1fr; gap: 1rem; } .setup-steps::before { display: none; } .setup-step-number { width: 60px; height: 60px; font-size: 1.25rem; } } /* Platform feature grid — extends resource-grid/resource-card */ .platform-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 2.5rem 0; } .platform-feature { display: flex; gap: 1.25rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s, background 0.3s; } .platform-feature:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(76, 175, 80, 0.35); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 24px rgba(76, 175, 80, 0.08); transform: translateY(-3px); } /* Direct SVG fallback for features without .platform-feature-icon wrapper */ .platform-feature > svg { width: 28px; height: 28px; flex-shrink: 0; color: #4CAF50; margin-top: 2px; } .platform-feature h3 { color: #fff; font-size: 0.98rem; font-weight: 600; margin-bottom: 0.4rem; } .platform-feature p { color: #999; font-size: 0.88rem; line-height: 1.55; } @media (max-width: 768px) { .platform-features { grid-template-columns: 1fr; } } /* FAQ accordion */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.25rem 0; background: none; border: none; color: #fff; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; font-family: inherit; } .faq-question svg { width: 18px; height: 18px; flex-shrink: 0; color: #777; transition: transform 0.3s; } .faq-item.open .faq-question svg { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer p { padding: 0 0 1.25rem; color: #999; font-size: 0.9rem; line-height: 1.7; } .faq-item.open .faq-answer { max-height: 500px; } /* Compatibility box */ .compat-box { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 2.25rem 2.5rem; text-align: center; max-width: 640px; margin: 0 auto; position: relative; } .compat-box::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent, rgba(76,175,80,0.3), transparent); } .compat-box h3 { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; } .compat-box p { color: #999; font-size: 0.93rem; line-height: 1.65; } /* Platform hero with download button */ .page-header .btn { margin-top: 1.25rem; } .page-header .hero-secondary { display: block; margin-top: 0.75rem; color: #777; font-size: 0.85rem; } .page-header .hero-secondary a { color: #4CAF50; } /* ============================================ Platform Landing Page Redesign ============================================ Enhanced visual design for vpn-for-windows/mac/iphone/android pages. Includes: platform hero, tab bar, alternating backgrounds, two-column "what is", numbered benefits, enhanced features, enhanced setup steps, and section separators. */ /* ---- Alternating Section Backgrounds ---- */ .section-alt-1 { background: #0a0a0a; } .section-alt-2 { background: #101010; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } .section-alt-3 { background: #141414; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .section-alt-2, .section-alt-3 { padding: 4.5rem 0; } /* ---- Section Separator ---- */ .section-separator { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(76,175,80,0.3) 20%, rgba(76,175,80,0.6) 50%, rgba(76,175,80,0.3) 80%, transparent 100%); border: none; margin: 0; } /* ---- Platform Tab Bar ---- */ .platform-tabs { background: #0d0d0d; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; z-index: 3; } .platform-tabs .container { display: flex; justify-content: center; gap: 0; } .platform-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; color: #666; font-size: 0.85rem; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; white-space: nowrap; } .platform-tab:hover { color: #b0b0b0; } .platform-tab.active { color: #4CAF50; border-bottom-color: #4CAF50; } .platform-tab svg { width: 18px; height: 18px; flex-shrink: 0; } /* ---- Platform Hero ---- */ .platform-hero { padding: 8rem 0 4rem; text-align: left; position: relative; overflow: hidden; background: linear-gradient(180deg, #0d120d 0%, #0a0a0a 60%, #0a0a0a 100%); } .platform-hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1400px; height: 100%; background-image: linear-gradient(rgba(76,175,80,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(76,175,80,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 100%); } .platform-hero::after { content: ''; position: absolute; top: 50%; right: 10%; transform: translateY(-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(76,175,80,0.08) 0%, transparent 70%); pointer-events: none; } .platform-hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; } .platform-hero-text h1 { font-size: 2.75rem; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1.25rem; } .platform-hero-text h1 .highlight { color: #4CAF50; } .platform-hero-text .hero-subtitle { color: #888; font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 480px; } .hero-value-props { list-style: none; margin: 0 0 2rem 0; padding: 0; } .hero-value-props li { display: flex; align-items: center; gap: 0.75rem; color: #b0b0b0; font-size: 0.95rem; margin-bottom: 0.65rem; } .hero-value-props li svg { width: 20px; height: 20px; color: #4CAF50; flex-shrink: 0; } .platform-hero-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; } .platform-hero-secondary { display: block; margin-top: 0.75rem; color: #666; font-size: 0.85rem; } .platform-hero-secondary a { color: #4CAF50; } .platform-hero-visual { display: flex; align-items: center; justify-content: center; } .platform-hero-icon { width: 200px; height: 200px; color: #4CAF50; filter: drop-shadow(0 0 40px rgba(76,175,80,0.3)) drop-shadow(0 0 80px rgba(76,175,80,0.15)); opacity: 0.85; } .platform-hero-graphic { width: 100%; max-width: 320px; height: auto; } /* ---- Two-Column "What Is" Layout ---- */ .what-is-section { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .what-is-text h2 { color: #fff; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; } .what-is-text p { color: #999; font-size: 0.93rem; line-height: 1.7; margin-bottom: 0.85rem; } .what-is-visual { display: flex; align-items: center; justify-content: center; position: relative; } .what-is-visual svg { width: 100%; max-width: 280px; height: auto; } /* ---- Numbered Benefits ---- */ .benefits-list { max-width: 700px; margin: 0 auto; } .benefit-item { display: flex; gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .benefit-item:last-child { border-bottom: none; } .benefit-number { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.25); color: #4CAF50; font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .benefit-content h3 { color: #fff; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; } .benefit-content p { color: #888; font-size: 0.9rem; line-height: 1.6; } /* ---- Enhanced Feature Cards ---- */ .platform-feature-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 12px; background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } .platform-feature:hover .platform-feature-icon { background: rgba(76,175,80,0.18); border-color: rgba(76,175,80,0.35); box-shadow: 0 0 16px rgba(76,175,80,0.12); } .platform-feature-icon svg { width: 24px; height: 24px; color: #4CAF50; } /* ---- Platform Page Responsive ---- */ @media (max-width: 768px) { .platform-hero { padding: 6rem 0 3rem; text-align: center; } .platform-hero .container { grid-template-columns: 1fr; gap: 2rem; } .platform-hero-text h1 { font-size: 2rem; } .platform-hero-text .hero-subtitle { margin-left: auto; margin-right: auto; } .platform-hero-buttons { justify-content: center; } .platform-hero-visual { order: -1; } .platform-hero-icon { width: 120px; height: 120px; } .platform-hero-graphic { max-width: 240px; } .what-is-section { grid-template-columns: 1fr; text-align: center; } .what-is-visual { order: -1; margin-bottom: 1rem; } .what-is-visual svg { max-width: 200px; } } @media (max-width: 600px) { .platform-tabs .container { justify-content: space-between; padding: 0 0.5rem; } .platform-tab { padding: 0.75rem 0.75rem; font-size: 0.78rem; gap: 0.35rem; } .platform-tab svg { width: 16px; height: 16px; } } @media (max-width: 480px) { .platform-hero { padding: 5.5rem 0 2rem; } .platform-hero-text h1 { font-size: 1.65rem; } .platform-hero-buttons { flex-direction: column; align-items: center; } .benefit-item { flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } } @media (max-width: 400px) { .platform-tab span { display: none; } .platform-tab { padding: 0.75rem 1rem; } } .field-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important; } .error-message { display: block; color: #ef4444; font-size: 0.8rem; margin-top: 0.3rem; } .form-success { display: none; text-align: center; padding: 2rem; } .form-success h3 { color: #4CAF50; font-size: 1.25rem; margin-bottom: 0.5rem; } .form-success p { color: #777; } @media (max-width: 480px) { .contact-form { max-width: 100%; } .form-group input, .form-group textarea, .form-group select { font-size: 16px; /* prevents iOS zoom on focus */ } } /* ---- Page Header (non-hero pages) ---- Used on all pages except the homepage. Provides a dark gradient background with a large title and subtitle, padded to clear the fixed navigation bar. Simpler than the hero section — no animations or decorative layers. */ .page-header { padding: 7rem 0 2.5rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.04); background: linear-gradient(180deg, #0d120d 0%, #0a0a0a 100%); } .page-header h1 { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.03em; } .page-header p { color: #666; font-size: 0.95rem; max-width: 480px; margin: 0 auto; } /* ============================================ Feature Detail (features.html) ============================================ Used on the features page for each security feature's detailed card. Horizontal layout with a large icon on the left and text block on the right. On mobile, stacks vertically with centered alignment. Each card is separated by a subtle bottom border. */ .feature-detail { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); } @media (max-width: 768px) { .feature-detail { flex-direction: column; align-items: center; text-align: center; } .feature-card { padding: 1rem; } .resource-card { padding: 1.25rem; } } @media (max-width: 480px) { .feature-card { flex-direction: column; align-items: center; text-align: center; } .resource-card { flex-direction: column; align-items: center; text-align: center; } } .feature-detail-icon { width: 56px; height: 56px; min-width: 56px; background: rgba(76, 175, 80, 0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .feature-detail-icon svg { width: 28px; height: 28px; color: #4CAF50; } .feature-detail h2 { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.35rem; letter-spacing: -0.01em; } .feature-detail p { color: #777; line-height: 1.7; font-size: 0.9rem; } /* ============================================ FAQ / Common Questions ============================================ Simple FAQ list used on pricing.html. Each .faq-item has a heading (question) and paragraph (answer), separated by subtle bottom borders. Constrained to 700px max-width for readability. */ .faq-list { max-width: 700px; margin: 0 auto; } .faq-item { border-bottom: 1px solid rgba(255,255,255,0.04); padding: 1.25rem 0; } .faq-item h3 { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; } .faq-item p { color: #777; font-size: 0.9rem; line-height: 1.6; } /* ============================================ Footer ============================================ Site footer injected by js/components.js into #footer-placeholder. Two-column layout: brand + description on the left, link list on the right. Below that, a centered copyright line with top border. On mobile, stacks vertically with centered text and horizontal link row. */ .footer { background: #080808; border-top: 1px solid rgba(255,255,255,0.04); padding: 2.5rem 0 1.5rem; } .footer-content { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; } .footer-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 0.4rem; } .footer-brand img { width: 24px; height: 24px; } .footer-text { color: #555; font-size: 0.8rem; max-width: 280px; line-height: 1.5; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 0.35rem; } .footer-links a { color: #666; font-size: 0.82rem; display: inline-block; padding: 0.25rem 0; } .footer-links a:hover { color: #4CAF50; } .footer-bottom { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.04); text-align: center; color: #444; font-size: 0.78rem; } @media (max-width: 600px) { .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } .footer-text { max-width: 100%; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; } .footer-links li { margin-bottom: 0; } } /* ============================================ Resource Cards Grid (resources.html) ============================================ 2-column responsive grid of clickable resource cards linking to deep-dive articles. Each card is an tag styled as a horizontal card with icon (left) and text (right), plus a "Read more" link with an arrow icon. Hover effects: green border, lift, shadow, icon scale, and heading color change to green. */ .resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 768px) { .resource-grid { grid-template-columns: 1fr; } } .resource-card { display: flex; align-items: flex-start; gap: 1.25rem; background: #111; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 1.5rem; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; text-decoration: none; color: inherit; } .resource-card:hover { border-color: rgba(76, 175, 80, 0.3); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); color: inherit; } .resource-card:hover .resource-icon svg { transform: scale(1.08); } .resource-card:hover h3 { color: #4CAF50; } .resource-icon { width: 56px; height: 56px; min-width: 56px; background: rgba(76, 175, 80, 0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .resource-icon svg { width: 28px; height: 28px; color: #4CAF50; transition: transform 0.25s ease; } .resource-text h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; letter-spacing: -0.01em; transition: color 0.2s; } .resource-text p { color: #666; font-size: 0.85rem; line-height: 1.6; } .resource-text .resource-link { display: inline-flex; align-items: center; gap: 0.3rem; color: #4CAF50; font-size: 0.82rem; font-weight: 600; margin-top: 0.5rem; } .resource-text .resource-link svg { width: 14px; height: 14px; transition: transform 0.2s; } .resource-card:hover .resource-link svg { transform: translateX(3px); } /* ============================================ Scroll Reveal Animation ============================================ Elements with the .reveal class start invisible and shifted down 20px. When they scroll into view, main.js adds the .visible class via IntersectionObserver, triggering a fade-in-up transition. Elements without JS support get .visible immediately (fallback in main.js). */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ---- DNS Landing Page ---- */ /* Two-column requirements grid inside .compat-box */ .dns-requirements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; text-align: left; margin-top: 1.25rem; } .dns-requirements-grid h4 { color: #fff; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.6rem; } .dns-requirements-grid ul { list-style: none; padding: 0; } .dns-requirements-grid li { color: #999; font-size: 0.9rem; padding: 0.3rem 0; padding-left: 1.25rem; position: relative; } .dns-requirements-grid li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(76,175,80,0.5); } /* VPN integration callout card */ .dns-vpn-callout { max-width: 720px; margin: 0 auto; padding: 2rem 2.5rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(76,175,80,0.15); border-left: 3px solid #4CAF50; border-radius: 8px; text-align: left; } .dns-vpn-callout h3 { color: #fff; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; } .dns-vpn-callout p { color: #999; font-size: 0.93rem; line-height: 1.7; margin-bottom: 1.25rem; } /* Use-case card grid (DNS page — "Who It's For") */ .dns-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .dns-usecase-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 2rem 1.5rem; text-align: center; transition: border-color 0.25s, transform 0.25s; } .dns-usecase-card:hover { border-color: rgba(76,175,80,0.3); transform: translateY(-3px); } .dns-usecase-card h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin: 0.75rem 0 0.5rem; } .dns-usecase-card p { color: #999; font-size: 0.9rem; line-height: 1.6; margin: 0; } .dns-usecase-icon { width: 48px; height: 48px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(76,175,80,0.1); color: #4CAF50; } .dns-usecase-icon svg { width: 24px; height: 24px; } /* Comparison table (DNS page — "How It Compares") */ .dns-comparison-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2rem; } .dns-comparison-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.9rem; } .dns-comparison-table thead th { background: rgba(76,175,80,0.12); color: #fff; font-weight: 600; padding: 0.85rem 1rem; text-align: left; border-bottom: 2px solid rgba(76,175,80,0.25); } .dns-comparison-table tbody td { padding: 0.75rem 1rem; color: #ccc; border-bottom: 1px solid rgba(255,255,255,0.06); } .dns-comparison-table tbody tr:hover { background: rgba(255,255,255,0.03); } .dns-comparison-highlight { background: rgba(76,175,80,0.06); } /* ============================================ Responsive Breakpoints ============================================ Three breakpoints: - 1024px (small desktop): platform benefits → 2-col - 768px (tablet): reduce base font, shrink hero/section padding, adjust heading sizes, product cards stack, benefits → 2-col - 480px (phone): further reduce hero, buttons go full-width stacked, smallest heading sizes, most compact spacing */ @media (max-width: 1024px) { .platform-benefits { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { html { font-size: 14px; } .hero { padding: 6rem 0 2rem; } .hero h1 { font-size: 2.2rem; } .hero-sub { font-size: 1rem; padding: 0 0.5rem; } .hero-shield { width: 90px; height: 90px; } .section { padding: 3rem 0; } .section-title { font-size: 1.5rem; } .page-header { padding: 5.5rem 0 1.75rem; } .page-header h1 { font-size: 1.65rem; } .page-header p { font-size: 0.88rem; padding: 0 0.5rem; } .dns-requirements-grid { grid-template-columns: 1fr; gap: 1.25rem; } .dns-usecase-grid { grid-template-columns: 1fr; } .product-showcase { grid-template-columns: 1fr; } .product-card { padding: 2rem; } } @media (max-width: 600px) { .platform-benefits { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero { padding: 5.5rem 0 1.5rem; } .hero h1 { font-size: 1.75rem; } .hero-sub { font-size: 0.92rem; } .hero-shield { width: 72px; height: 72px; margin-bottom: 1.5rem; } .hero-buttons { flex-direction: column; align-items: center; } .hero-buttons .btn { width: 100%; justify-content: center; } .section { padding: 2.5rem 0; } .section-title { font-size: 1.3rem; } .section-subtitle { font-size: 0.88rem; } .page-header { padding: 5rem 0 1.5rem; } .page-header h1 { font-size: 1.45rem; } .cta-content h2 { font-size: 1.4rem; } .cta-content p { font-size: 0.88rem; } .btn-large { padding: 0.75rem 1.5rem; font-size: 0.93rem; } }