/* ================================ DESIGN SYSTEM — BOLD & ENERGETIC LIGHT Target: Senior Devs/TPMs → SaaS Founders Vibe: ProductHunt × IndieHackers ================================ */ /* ── Body font: Plus Jakarta Sans from Google Fonts ── Syne (display font) is self-hosted — load syne-selfhosted.css BEFORE this file in your . No Google Fonts link for Syne. ── */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); :root { /* ── Backgrounds ── */ --bg-primary: #f8faff; /* crisp cool white */ --bg-soft: #f1f5fd; /* subtle blue-white wash */ --bg-muted: #e8edf8; /* for alternating sections */ --bg-elevated: #ffffff; /* cards, panels */ /* ── Typography ── */ --text-primary: #0f172a; /* near-black, sharp */ --text-secondary:#334155; /* body copy */ --text-muted: #64748b; /* captions, labels */ --text-inverse: #ffffff; /* ── Brand Accent (electric blue) ── */ --accent: #2563eb; --accent-strong: #1d4ed8; --accent-soft: rgba(37,99,235,0.10); --accent-pale: #eff6ff; /* ── Highlight Colors (for emphasis & callouts) ── */ --highlight-orange: #f97316; --highlight-orange-pale: #fef3c7; --highlight-green: #16a34a; --highlight-green-pale: #f0fdf4; --highlight-purple: #7c3aed; --highlight-purple-pale: #f5f3ff; --highlight-red: #dc2626; --highlight-red-pale: #fef2f2; --highlight-yellow: #d97706; --highlight-yellow-pale: #fffbeb; /* ── Borders ── */ --border-light: #e2e8f0; --border-strong: #cbd5e1; /* ── Shadows ── */ --shadow-soft: 0 4px 16px rgba(15,23,42,0.07); --shadow-strong: 0 16px 48px rgba(15,23,42,0.13); --shadow-accent: 0 8px 32px rgba(37,99,235,0.18); /* ── Radii ── */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; /* ── Layout ── */ --container-width: 1200px; /* ── Fonts ── */ --font-display: 'Syne', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; } /* ================================ GLOBAL ================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* heading overflow + metric safety: managed in syne-selfhosted.css */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 1.2rem; line-height: 1.75; background-color: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subtle dot-grid texture on the page bg */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle, #c7d5f0 1px, transparent 1px); background-size: 28px 28px; opacity: 0.35; pointer-events: none; z-index: 0; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; } section { padding:60px 40px; margin: 20px 0; position: relative; z-index: 1; } /* Alternating section tint for visual rhythm */ section:nth-of-type(even) { background-color: var(--bg-soft); border:Solid 1px var(--accent); border-radius:20px; background-color: #e6eef7 0.75; background-image: linear-gradient(rgba(249, 17, 17, 0.053) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 17, 17, 0.053) 1px, transparent 1px); background-size: 64px 64px; border-radius: 16px; } /* Alternating section tint for visual rhythm */ section:nth-of-type(odd) { background-color: var(--highlight-orange-pale); border:Solid 1px var(--highlight-orange); border-radius:20px; margin:10px 0; } section:nth-of-type(odd) h2{ color: var(--highlight-orange); padding-top:0; } /* Ensure sections can position absolute children */ section { position: relative; overflow: hidden; /* prevents circle overflow if needed */ } /* Target even-numbered sections */ section:nth-of-type(even)::after { content: ""; position: absolute; /* Size of the circle */ width: 180px; height: 180px; /* Position: top-right corner */ top: 40px; right: -60px; /* Make it a circle */ border-radius: 50%; /* Blue → Green gradient */ background: linear-gradient(135deg, #007cf0, #00dfd8); /* Optional: subtle blur + softness */ filter: blur(20px); ; opacity: 0.6; pointer-events: none; /* prevent interaction issues */ z-index: 0; } .execution-box { border-radius: var(--radius-lg); padding: 2rem 2.5rem; position: relative; border:none; overflow: visible; /* changed: was hidden, clips descenders */ } .execution-box::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: var(--accent-soft); border-radius: 50%; } /* ================================ TYPOGRAPHY ================================ */ /* ── Heading sizes + font rules live in syne-selfhosted.css ── Only colour and margin overrides here to avoid conflicts. ── */ h1, h2, h3, h4 { color: var(--text-primary); margin-bottom: 18px; } p { color: var(--text-secondary); margin-bottom: 16px; } .split-authority{ display: flex; align-items: center; gap: 12px; margin-top: 12px; border-left:Solid 3px saddlebrown; font-size: larger; padding:20px; } /* ── Emphasis helpers for in-copy color ── */ .em-blue { color: var(--accent); font-weight: 600; } .em-orange { color: var(--highlight-orange); font-weight: 600; } .em-green { color: var(--highlight-green); font-weight: 600; } .em-purple { color: var(--highlight-purple); font-weight: 600; } .em-red { color: var(--highlight-red); font-weight: 600; } .curved-border{border-radius: 10px;} /* ── Section label / eyebrow ── */ .label { display: inline-block; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; background: var(--accent-pale); padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(37,99,235,0.2); margin-bottom: 18px; } .large{font-size: larger;} .two-columns { display: grid; grid-template-columns: 50% 50%; gap: 24px; /* space between columns */ } .three-columns { display: grid; grid-template-columns: 40% 10% 40%; gap: 24px; /* space between columns */ } /* ── Inline callout pill ── */ .pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .pill-blue { background: var(--accent-pale); color: var(--accent); } .pill-orange { background: var(--highlight-orange-pale); color: var(--highlight-orange); } .pill-green { background: var(--highlight-green-pale); color: var(--highlight-green); } .pill-purple { background: var(--highlight-purple-pale); color: var(--highlight-purple); } /* ================================ HERO ================================ */ .hero { text-align: center; padding-top: 120px; padding-bottom: 120px; background: linear-gradient(160deg, #ffffff 0%, #eff6ff 60%, #f8faff 100%); overflow: visible; /* changed: was hidden, clips descenders */ position: relative; } /* Bold decorative ring behind hero */ .hero::before { content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; border-radius: 50%; border: 60px solid rgba(37,99,235,0.06); pointer-events: none; } .hero h1 { max-width: 860px; margin: 0 auto 28px; color: var(--text-primary); } /* The word that pops — wrap key phrase in */ .hero-em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; } .hero-em::after { content: ''; position: absolute; bottom: 6px; left: 0; right: 0; height: 4px; background: var(--highlight-orange); border-radius: 2px; opacity: 0.7; } .subheadline { font-size: 1.2rem; max-width: 640px; margin: 0 auto 44px; color: var(--text-secondary); font-weight: 400; line-height: 1.7; } /* Small trust-builder line under the headline */ .authority-line { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 40px; padding: 10px 22px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); font-size: 0.88rem; box-shadow: var(--shadow-soft); } .authority-line strong { color: var(--text-primary); } .devtofounder-brand { background: linear-gradient(90deg, #1e3a8a, #f5c542, hwb(356 2% 11%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; text-transform:uppercase; } .strong{font-weight: 700;} /* ================================ BUTTONS ================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 32px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: none; transition: all 0.22s ease; position: relative; overflow: visible; /* changed: was hidden, clips descenders */ white-space: nowrap; } /* Primary — electric blue, punchy */ .btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 6px 24px rgba(37,99,235,0.35); } .btn-primary:hover { background: var(--accent-strong); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(37,99,235,0.40); } .btn-primary:active { transform: translateY(0px); box-shadow: 0 4px 12px rgba(37,99,235,0.30); } /* Secondary — outlined, ghost */ .btn-secondary { background: transparent; color: var(--text-primary); border: 2px solid var(--border-strong); box-shadow: var(--shadow-soft); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-pale); transform: translateY(-3px); box-shadow: var(--shadow-accent); } .btn-secondary:active { transform: translateY(0px); } /* Orange CTA variant — for urgency moments */ .btn-orange { background: var(--highlight-orange); color: #ffffff; box-shadow: 0 6px 24px rgba(249,115,22,0.30); } .btn-orange:hover { background: #ea6c0a; transform: translateY(-3px); box-shadow: 0 14px 36px rgba(249,115,22,0.38); } /* ================================ CARDS / PANELS ================================ */ .card { background: var(--bg-elevated); padding: 36px; border-radius: var(--radius-md); border: 1px solid var(--border-light); box-shadow: var(--shadow-soft); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; max-width:45%; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); border-color: var(--border-strong); } /* Accent-left-border variant */ .card-accent { border-left: 4px solid var(--accent); } .card-orange { border-left: 4px solid var(--highlight-orange); } .card-green { border-left: 4px solid var(--highlight-green); } .card-purple { border-left: 4px solid var(--highlight-purple); } .ladder { max-width: 700px; margin: 10px auto; font-family: system-ui, sans-serif; } .stage { padding: 28px 32px; margin: 10px 0; border-radius: 14px; background: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.05); } .stage h3 { margin: 0 0 8px 0; font-size: 20px; } .stage p { margin: 0; color: #64748b; } .highlight { border: 2px solid #0f172a; } .muted { opacity: 0.6; } .divider { text-align: center; padding:20px; font-weight: 600; border-top: 3px solid #0f172a; border-bottom: 3px solid #0f172a; width:90%; margin:0; } .progression-system { display: flex; flex-direction: column; gap: 16px; margin: 20px auto; border:Solid 1px pink; padding:20px 20px; border-radius: 20px; } /* ================================ CALLOUT BOXES (emoji-friendly) ================================ */ .callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: var(--radius-md); margin: 28px 0; font-size: 0.96rem; line-height: 1.65; } .callout-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; } .callout-blue { background: var(--accent-pale); border: 1px solid rgba(37,99,235,0.18); color: #1e3a8a; } .callout-orange { background: var(--highlight-orange-pale); border: 1px solid rgba(249,115,22,0.18); color: #92400e; } .callout-green { background: var(--highlight-green-pale); border: 1px solid rgba(22,163,74,0.18); color: #14532d; } .callout-purple { background: var(--highlight-purple-pale); border: 1px solid rgba(124,58,237,0.18); color: #4c1d95; } .callout-red { background: var(--highlight-red-pale); border: 1px solid rgba(220,38,38,0.18); color: #7f1d1d; } .callout-yellow { background: var(--highlight-yellow-pale); border: 1px solid rgba(217,119,6,0.18); color: #78350f; } /* ================================ PROBLEM GRID ================================ */ .problem-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 56px; list-style: none; padding: 0; } .problem-item { background: var(--bg-elevated); padding: 36px; border-radius: var(--radius-md); border: 1px solid #dc2626; transition: all 0.28s ease; position: relative; overflow: visible; /* changed: was hidden, clips descenders */ } .problem-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--highlight-orange), var(--highlight-red)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .problem-item:hover::before { transform: scaleX(1); } .problem-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-strong); transform: translateY(-4px); } .problem-number { width: 40px; height: 40px; border-radius: 50%; background: var(--highlight-orange-pale); color: var(--highlight-orange); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 18px; border: 1.5px solid rgba(249,115,22,0.2); } /* ================================ STATS BAR ================================ */ .stats-bar { background: var(--text-primary); /* dark strip — high contrast pop */ padding: 56px 0; border-top: none; border-bottom: none; } .stats-inner { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; } .stat-item { text-align: center; } .stat-number { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--highlight-orange); line-height: 1; display: block; } .stat-label { color: rgba(255,255,255,0.65); font-size: 0.88rem; margin-top: 6px; display: block; } /* Google Fonts Import */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&family=Space+Grotesk:wght@700&display=swap'); .progression-title { display: flex; align-items: center; letter-spacing: -0.04em; } .dev-text { font-family: 'JetBrains Mono', monospace; color: #1091c0; font-weight: 400; } .brand-text { font-family: 'JetBrains Mono', monospace; color: hwb(356 2% 11%); font-weight: 400; margin: 0 8px; } .connector { color: #024554; /* "Flow" Blue */ margin: 0 0; font-weight: 300; font-family: 'Space Grotesk', sans-serif; } .founder-text { font-family: 'Space Grotesk', sans-serif; font-weight: 800; /* Founder "Gold/Growth" Gradient */ background: linear-gradient(135deg, #3a7bd5 0%, #ffcc00 100%); -webkit-background-clip: text; background-clip: var(--text-primary); -webkit-text-fill-color: transparent; text-transform: uppercase; } /* ================================ SYSTEM FLOW GRID ================================ */ .system-grid { max-width: 860px; margin: 0 auto; padding: 3rem 0; display: grid; grid-template-columns: 10% 40% 10% 40%; align-items: center; gap: 16px; } /* Stage card */ .stage { background: var(--bg-elevated); padding: 2rem 1.75rem; border-radius: var(--radius-md); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .stage:hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); } .stage-highlight { border: 2px solid var(--accent); box-shadow: var(--shadow-accent); background: var(--accent-pale); } .stage h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1rem; color: var(--text-primary); } .circle { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,0.3); } .flow-arrow { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--highlight-orange); } .ghost-list { list-style: none; padding: 0; font-size: 1.1rem; color: var(--text-muted); line-height: 1.65; } .ghost-list li::before { content: '→ '; color: var(--accent); font-weight: 700; } .intro { position: relative; padding: 40px; padding-right: 220px; /* image width (160px) + gap */ } .intro-photo { position: absolute; top: -40px; right:-220px; width: 260px; height: 260px; object-fit: cover; border-radius: 12px; } .stage-note { margin-top: 14px; font-size: 0.85rem; font-weight: 700; color: var(--accent); } /* ================================ BOOK GRID (covers / previews) ================================ */ .book-grid { max-width: var(--container-width); margin: 0 auto; padding: 80px 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .premium-card { position: relative; border-radius: var(--radius-lg); overflow: visible; /* changed: was hidden, clips descenders */ background: var(--bg-elevated); box-shadow: var(--shadow-md); transition: transform 0.35s ease, box-shadow 0.35s ease; aspect-ratio: 4 / 5; } .premium-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; } .premium-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .premium-card:hover img { transform: scale(1.05); } .gates-container { grid-template-columns: 1fr auto; gap:10px; flex-wrap:wrap; align-items: center; display: flex; gap: 20px; /* space between cards */ justify-content: flex-start; /* left align */ align-items: stretch; flex-wrap: wrap; } /* ================================ EDITIONS / PRICING ================================ */ .editions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; align-items: start; max-width: var(--container-width); margin: 0 auto; } .edition-card { background: var(--bg-elevated); padding: 44px 20px; border-radius: var(--radius-lg); border: 1.5px solid var(--border-light); box-shadow: var(--shadow-soft); transition: all 0.28s ease; max-width:90%; overflow-x: hidden !important; overflow: hidden; } .edition-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); border-color: var(--border-strong); } /* Featured / recommended tier */ .edition-card.featured { border: 2.5px solid var(--accent); box-shadow: var(--shadow-accent), var(--shadow-strong); transform: scale(1.03); position: relative; } .edition-card.featured::before { content: '⭐ Most Popular'; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 5px 18px; border-radius: 999px; letter-spacing: 0.05em; white-space: nowrap; } .edition-card.featured:hover { transform: scale(1.03) translateY(-6px); } .price { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--text-primary); line-height: 1; margin: 20px 0 8px; } .price-sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 28px; } .edition-card ul { list-style: none; padding: 0; margin: 0 0 32px; } .edition-card ul li { color: var(--text-secondary); padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 0.95rem; display: flex; align-items: flex-start; gap: 10px; } .edition-card ul li::before { content: '✓'; color: var(--highlight-green); font-weight: 700; flex-shrink: 0; } /* ================================ NAVBAR ================================ */ .navbar { top: 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(248,250,255,0.88); background-color: var(--highlight-orange-pale); border-bottom: 1px solid var(--border-light); z-index: 1000; box-shadow: 0 2px 16px rgba(15,23,42,0.06); } .nav-inner { max-width: var(--container-width); margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo-image{ width:300px; border-radius: 15px; } .advantage-block{ padding-left:5%; } /* ================================ ENGINE / GATE SECTION ================================ */ .engine-title { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.15; letter-spacing: -0.04em; margin-bottom: 1.25rem; color: var(--text-primary); } .engine-lead { font-size: 1.15rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 0.75rem; } .engine-intro { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 2.5rem; } /* Gate rows */ .gate { padding: 2.25rem 0; border-top: 1px solid var(--border-light); } .gate:first-of-type { border-top: none; } .gate h2 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.875rem; color: var(--text-primary); } .gate p { line-height: 1.75; margin-bottom: 0.875rem; color: var(--text-secondary); font-size: 0.97rem; } .gate ul { margin: 0.75rem 0 1.25rem 1.1rem; padding: 0; } .gate li { margin-bottom: 0.5rem; line-height: 1.65; color: var(--text-secondary); font-size: 0.95rem; } .closing-line { font-weight: 700; color: var(--text-primary); font-size: 1rem; } .rotating-five { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; font-size: 40px; font-weight: 700; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; border-radius: 50%; background: #eef2f7; color: #1e293b; animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Good/Bad example blocks */ .example { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 0.92rem; line-height: 1.6; } .example span { display: block; font-weight: 700; margin-bottom: 5px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; } .example.good { background: var(--highlight-green-pale); border: 1px solid rgba(22,163,74,0.2); color: #14532d; } .example.good span { color: var(--highlight-green); } .example.bad{ background-color: rgba(140, 205, 240, 0.19); color: #1906c4; font-size:larger; } .example.highlight { background: var(--highlight-red-pale); border: 1px solid rgba(220,38,38,0.18); color:var(--highlight-red); } .example.highlight p { font-weight: 700; color: var(--highlight-red); } /* ================================ UTILITY / LAYOUT ================================ */ #book-page { max-width: var(--container-width); width: 100%; margin: 0 auto; padding: 20px; box-sizing: border-box; background-color: var(--bg-primary); } /* Divider with text */ .divider { display: flex; align-items: center; gap: 16px; margin: 48px 0; color: var(--text-muted); font-size: 0.85rem; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); } /* Highlight strip — for pull quotes / key takeaways */ .highlight-strip { border-left: 5px solid var(--accent); background: var(--accent-pale); padding: 20px 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.05rem; color: var(--text-primary); font-weight: 500; margin: 28px 0; } .highlight-strip.orange { border-color: var(--highlight-orange); background: var(--highlight-orange-pale); } .highlight-strip.green { border-color: var(--highlight-green); background: var(--highlight-green-pale); } .highlight-strip.purple { border-color: var(--highlight-purple); background: var(--highlight-purple-pale); } /* Tag row */ .tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; } .tag { background: var(--bg-muted); border: 1px solid var(--border-light); color: var(--text-muted); border-radius: 999px; padding: 5px 16px; font-size: 0.82rem; font-weight: 600; } /* ================================ ANIMATIONS (CSS only) ================================ */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .anim-fade-up { animation: fadeSlideUp 0.7s ease both; } .anim-fade-up-2 { animation: fadeSlideUp 0.7s 0.15s ease both; } .anim-fade-up-3 { animation: fadeSlideUp 0.7s 0.30s ease both; } .anim-fade-up-4 { animation: fadeSlideUp 0.7s 0.45s ease both; } .anim-fade-in { animation: fadeIn 0.6s ease both; } .guarantee-box { position: relative; padding: 40px; text-align: right; overflow: hidden; } .guarantee-box::before { content: ""; position: absolute; inset: 0; padding-top: 100px; /* pushes the image down from the top */ background-image: url("https://devtofounder.io/assets/images/100pctguaranteed.png"); background-repeat: no-repeat; background-position: left top; background-size: 400px; opacity: 0.5; /* controls transparency */ padding-top: 100px; /* pushes the image down from the top */ z-index: 0; } .guarantee-box * { position: relative; z-index: 1; } /* ================================ RESPONSIVE ================================ */ @media (max-width: 1024px) { .problem-list, .editions-grid { grid-template-columns: 1fr; } .system-grid { grid-template-columns: 10% 40% ; gap: 12px; } .flow-arrow { transform: rotate(90deg); color:var(--accent); } .stats-inner { flex-direction: column; gap: 36px; } .edition-card.featured { transform: scale(1); } .book-grid { grid-template-columns: repeat(2, 1fr); } } .check-list-modern { list-style: none; padding: 0; margin: 0; } .check-list-modern li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 1rem; } .check-list-modern li::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #00c853, #00bfa5); display: inline-flex; align-items: center; justify-content: center; } .check-list-modern li::after { content: "✓"; position: absolute; transform: translate(6px, 2px); color: white; font-size: 14px; font-weight: bold; } @media (max-width: 640px) { h1 { font-size: 2.4rem; } h2 { font-size: 1.8rem; } section { padding: 64px 0; } .hero { padding-top: 80px; padding-bottom: 80px; } .book-grid { grid-template-columns: 1fr; } .nav-inner { padding: 14px 20px; } } .artifacts-toggle { color: #f5c542; cursor: pointer; font-weight: 600; text-decoration: underline; } .artifacts-list { display: none; margin-top: 10px; padding-left: 18px; } .artifacts-list li { margin-bottom: 4px; } /* ================================ DESCENDER SAFETY NET Targets every container in the HTML that wraps an h1/h2/h3 ================================ */ /* premium-card clips images (intentional) but must not clip text */ .premium-card { overflow: visible; } .premium-card img { overflow: hidden; /* scope clip to image only */ border-radius: var(--radius-lg); } /* execution-box decorative ring is ::before — doesn't need overflow:hidden */ .execution-box { overflow: visible; } /* hero decorative ring — same fix */ .hero { overflow: visible; } /* stage cards */ .stage, .stage-highlight { overflow: visible; } /* edition cards */ .edition-card, .edition-card.featured { overflow: visible; } /* problem items */ .problem-item { overflow: visible; } /* gate rows */ .gate { overflow: visible; } /* Syne metric overrides moved to syne-selfhosted.css */