/* ============================================================ DESIGN SYSTEM — netguruworld.com Advertorial Source: .stitch/DESIGN.md (Tech Editorial System) Color palette: Deep navy/slate dark mode Typography: Geist (editorial) + JetBrains Mono (labels) ============================================================ */ /* ── Google Fonts import is handled in ── */ /* ── CSS Custom Properties (Design Tokens) ── */ :root { /* Surfaces */ --surface: #101415; --surface-dim: #101415; --surface-bright: #363a3b; --surface-container-lowest: #0b0f10; --surface-container-low: #191c1e; --surface-container: #1d2022; --surface-container-high: #272a2c; --surface-container-highest: #323537; --surface-variant: #323537; /* On-surface */ --on-surface: #e0e3e5; --on-surface-variant: #c6c6cd; --inverse-surface: #e0e3e5; --inverse-on-surface: #2d3133; /* Borders */ --outline: #909097; --outline-variant: #45464d; /* Primary */ --primary: #482A7B; --on-primary: #ffffff; --primary-container: #0f172a; --on-primary-container: #798098; /* Secondary */ --secondary: #8E967A; --on-secondary: #ffffff; --secondary-container: #00a6e0; --on-secondary-container: #00374d; /* Tertiary */ --tertiary: #b9c8de; /* Background */ --background: #101415; --on-background: #e0e3e5; /* Spacing tokens */ --stack-sm: 8px; --stack-md: 16px; --stack-lg: 32px; --section-gap: 80px; --gutter: 24px; --container-max: 720px; --margin-mobile: 20px; /* Border radius */ --radius-sm: 0.125rem; --radius: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--background); color: var(--on-surface); font-family: "Geist", system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } img { display: block; max-width: 100%; height: auto; } a { color: var(--secondary); text-decoration: underline; text-decoration-color: rgba(123, 208, 255, 0.4); text-underline-offset: 3px; transition: color 0.15s ease, opacity 0.15s ease; } a:hover { opacity: 0.85; } main { flex: 1; } /* ── Layout Utility ── */ .page-wrap { width: min(100% - calc(var(--margin-mobile) * 2), var(--container-max)); margin-inline: auto; } /* ============================================================ TOP BAR — "Advertorial" label only ============================================================ */ .top-bar { width: 100%; background-color: var(--surface-container-lowest); border-bottom: 1px solid var(--outline-variant); padding: 7px var(--gutter); text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-variant); } /* ============================================================ HEADER — Logo left, CTA button right (Flexbox) ============================================================ */ .site-header { width: 100%; background-color: rgba(16, 20, 21, 0.92); border-bottom: 1px solid var(--outline-variant); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 14px var(--gutter); top: 0; z-index: 100; } .header-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--stack-md); } .brand-mark { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .site-logo { width: 160px; height: auto; display: block; } /* Header CTA Button */ .header-cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px; background-color: var(--primary); color: var(--on-primary); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); border: none; white-space: nowrap; transition: opacity 0.18s ease, transform 0.18s ease; } .header-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); } /* ============================================================ HERO SECTION ============================================================ */ .hero-section { padding: var(--section-gap) 0 var(--stack-lg); } .hero-wrap { /* uses .page-wrap */ } /* Category Tag */ .category-tag { margin-bottom: var(--stack-md); } .tag-chip { display: inline-block; background-color: var(--primary-container); color: var(--tertiary); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--outline-variant); } /* Headline */ .article-headline { font-family: "Geist", system-ui, sans-serif; font-size: clamp(28px, 5vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--on-surface); margin-bottom: var(--stack-md); } /* Sub-headline / deck */ .article-deck { font-size: 20px; font-weight: 400; line-height: 1.7; color: var(--on-surface-variant); margin-bottom: var(--stack-lg); } /* Hero Image */ .hero-figure { margin-bottom: var(--stack-lg); } .hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--outline-variant); display: block; } /* Author / Meta Bar */ .article-meta-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--stack-sm); border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); padding: var(--stack-sm) 0; font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); } .meta-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .meta-author { font-weight: 500; color: var(--on-surface); } .meta-dot { color: var(--outline); } .meta-right { font-size: 14px; color: var(--on-surface-variant); } /* ============================================================ ARTICLE BODY ============================================================ */ .article-body { padding: var(--section-gap) 0; } .article-wrap { /* uses .page-wrap */ } /* Prose paragraphs */ .prose-block { margin-bottom: var(--section-gap); } .prose-block p { font-size: 16px; line-height: 1.7; color: var(--on-surface-variant); } .prose-block p + p { margin-top: var(--stack-md); } /* Content Image */ .content-figure { margin-bottom: var(--section-gap); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--surface-container-low); border: 1px solid var(--outline-variant); } .content-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .content-caption { padding: var(--stack-md); font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); text-align: center; border-top: 1px solid var(--outline-variant); font-style: italic; } /* Section Heading */ .section-heading { font-family: "Geist", system-ui, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--on-surface); margin-bottom: var(--stack-md); text-align: center; } /* ============================================================ BENEFITS GRID (Bento layout) ============================================================ */ .benefits-section { margin-bottom: var(--section-gap); } .benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--stack-md); } .benefit-card { background-color: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: var(--stack-md); transition: border-color 0.2s ease; } .benefit-card:hover { border-color: var(--outline); } .benefit-card--wide { grid-column: 1 / -1; background-color: var(--primary-container); border-color: var(--primary); display: flex; align-items: flex-start; gap: var(--stack-md); } .benefit-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--stack-sm); } .benefit-card-title { font-family: "Geist", system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--on-surface); line-height: 1.3; } .benefit-card p { font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); } .benefit-card--wide p { color: var(--on-primary-container); } /* Benefit Icon */ .benefit-icon-wrap { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-full); background-color: rgba(41, 171, 133, 0.12); color: var(--secondary); display: inline-flex; align-items: center; justify-content: center; } .benefit-icon-wrap svg { width: 16px; height: 16px; } .benefit-icon-wrap--primary { background-color: rgba(41, 171, 133, 0.15); color: var(--primary); margin-top: 2px; } /* Wide card header layout */ .benefit-card--wide .benefit-card-header { align-items: flex-start; flex-direction: row; gap: var(--stack-md); margin-bottom: 4px; } /* ============================================================ HOW TO GET STARTED — Steps ============================================================ */ .steps-section { background-color: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: var(--stack-lg); margin-bottom: var(--section-gap); } .steps-intro { font-size: 16px; color: var(--on-surface-variant); text-align: center; margin-bottom: var(--stack-lg); } .steps-list { display: flex; flex-direction: column; gap: var(--stack-lg); margin-bottom: var(--stack-lg); } .step-item { display: flex; align-items: flex-start; gap: var(--stack-md); } .step-number { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-full); background-color: var(--surface-variant); color: var(--on-surface); border: 1px solid var(--outline); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; line-height: 1; } .step-number--active { background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); } .step-title { font-family: "Geist", system-ui, sans-serif; font-size: 15px; font-weight: 600; color: var(--on-surface); margin-bottom: 4px; } .step-content p { font-size: 14px; color: var(--on-surface-variant); line-height: 1.5; } .steps-note { font-size: 14px; color: var(--on-surface-variant); text-align: center; line-height: 1.6; } /* ============================================================ CTA SECTION — Full width block ============================================================ */ .cta-section { width: 100%; background-color: var(--surface-container-low); border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); padding: var(--section-gap) var(--margin-mobile); text-align: center; } .cta-inner { max-width: var(--container-max); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--stack-lg); } /* Main CTA Button */ .cta-main-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 18px 32px; background-color: var(--primary); color: var(--on-primary); font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); border: 1px solid transparent; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); } .cta-main-btn:hover { background-color: #351f5c; /* Slightly darker green */ color: #ffffff; border-color: var(--outline-variant); transform: translateY(-2px); opacity: 1; } /* CTA Logo Link with required outline */ .cta-logo-link { display: inline-block; border-radius: var(--radius-lg); text-decoration: none; transition: transform 0.18s ease, opacity 0.18s ease; } .cta-logo-link:hover { transform: translateY(-2px); opacity: 1; } /* CTA Logo Image — required visible CSS outline */ .cta-logo-img { width: min(260px, 70vw); height: auto; border-radius: var(--radius-lg); outline: 3px solid var(--secondary); outline-offset: 4px; padding: 8px; background-color: #ffffff; } /* ============================================================ DISCLAIMER — directly below CTA ============================================================ */ .disclaimer-section { padding: var(--stack-lg) 0 var(--section-gap); } .disclaimer-wrap { /* uses .page-wrap */ } .disclaimer-text { font-size: 12px; line-height: 1.65; color: var(--on-surface-variant); text-align: center; } .disclaimer-text a { color: var(--secondary); font-size: inherit; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background-color: var(--surface-container-lowest); border-top: 1px solid var(--outline-variant); padding: var(--section-gap) 0 var(--stack-lg); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--stack-lg); text-align: center; } /* Footer Navigation */ .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; } .footer-nav a { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); text-decoration: none; transition: color 0.15s ease; } .footer-nav a:hover { color: var(--secondary); opacity: 1; } /* Footer Contact Details */ .footer-contact { font-size: 13px; color: var(--on-surface-variant); line-height: 1.7; } .footer-contact-label { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tertiary); margin-bottom: 6px; } .footer-contact a { color: var(--on-surface-variant); text-decoration: none; } .footer-contact a:hover { color: var(--secondary); opacity: 1; } /* Footer Copyright */ .footer-copy { font-size: 12px; color: var(--outline); font-family: "Geist", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; } /* ============================================================ RESPONSIVE — Mobile ============================================================ */ @media (max-width: 720px) { .page-wrap { width: min(100% - 32px, var(--container-max)); } .hero-section { padding: 40px 0 var(--stack-md); } .article-deck { font-size: 17px; } .article-meta-bar { flex-direction: column; align-items: flex-start; gap: 4px; } .benefits-grid { grid-template-columns: 1fr; } .benefit-card--wide { flex-direction: column; gap: var(--stack-sm); } .steps-section { padding: var(--stack-md); } .cta-section { padding: 48px var(--margin-mobile); } .cta-main-btn { font-size: 11px; padding: 15px 20px; } .site-logo { width: 130px; } .header-cta-btn { font-size: 10px; padding: 8px 14px; letter-spacing: 0.07em; } }