/* stamm.ee starter kit — premium one-pager (no framework) */ /* Fonts for themes: Inter (warm), Manrope (soft-dark headings) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Manrope:wght@400;600;800&display=swap'); :root { --bg: #070a12; --panel: rgba(255,255,255,.06); --panel-2: rgba(255,255,255,.08); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.68); --muted2: rgba(255,255,255,.55); --border: rgba(255,255,255,.12); --shadow: 0 10px 35px rgba(0,0,0,.45); --radius: 16px; --radius2: 22px; --accent: #7c3aed; /* purple */ --accent2: #06b6d4; /* cyan */ --accent3: #22c55e; /* green */ } /* THEME PRESETS — change in index.html */ /* Light (premium, clean) */ body[data-theme="light"]{ --bg: #f6f7fb; --text: rgba(12,16,28,.92); --muted: rgba(12,16,28,.68); --muted2: rgba(12,16,28,.55); --panel: rgba(12,16,28,.04); --panel-2: rgba(12,16,28,.06); --border: rgba(12,16,28,.12); --shadow: 0 10px 35px rgba(0,0,0,.12); } /* Warm (premium, softer than stark white) */ body[data-theme="warm"]{ --bg: #fbf7f1; --text: rgba(20,16,12,.92); --muted: rgba(20,16,12,.80); --muted2: rgba(20,16,12,.65); --panel: rgba(20,16,12,.04); --panel-2: rgba(20,16,12,.06); --border: rgba(20,16,12,.12); --shadow: 0 10px 35px rgba(0,0,0,.12); /* optional: shift accents slightly warmer */ --accent: #6d28d9; --accent2: #0891b2; } /* ========================================================= THEME PACK — paste at END of styles.css Switch via: ========================================================= */ /* Make sure body background can be fully overridden by themes */ body[data-theme]{ /* keeps OS widgets consistent */ color-scheme: dark; } /* ------------------------- THEME 1: LIGHT (Apple-ish) ------------------------- */ body[data-theme="light"]{ color-scheme: light; --bg: #f6f7fb; --text: rgba(12,16,28,.92); --muted: rgba(12,16,28,.80); --muted2: rgba(12,16,28,.65); --panel: rgba(12,16,28,.04); --panel-2: rgba(12,16,28,.06); --border: rgba(12,16,28,.12); --shadow: 0 14px 40px rgba(20, 24, 40, .10); --radius: 16px; --radius2: 22px; /* premium blue */ --accent: #2563eb; --accent2: #06b6d4; --accent3: #16a34a; background: radial-gradient(1000px 700px at 10% 0%, rgba(37, 99, 235, .12), transparent 60%), radial-gradient(900px 700px at 95% 15%, rgba(6, 182, 212, .10), transparent 55%), radial-gradient(700px 500px at 45% 95%, rgba(22, 163, 74, .08), transparent 55%), var(--bg); } /* Header + nav */ body[data-theme="light"] .site-header{ background: rgba(246,247,251,.78); border-bottom: 1px solid rgba(12,16,28,.10); } body[data-theme="light"] .brand-name{ color: rgba(12,16,28,.92); } body[data-theme="light"] .site-nav a{ color: rgba(12,16,28,.62); } body[data-theme="light"] .site-nav a:hover{ background: rgba(12,16,28,.06); color: rgba(12,16,28,.90); } body[data-theme="light"] .site-nav .nav-cta{ background: rgba(12,16,28,.06); border: 1px solid rgba(12,16,28,.12); color: rgba(12,16,28,.90); } body[data-theme="light"] .nav-toggle{ border: 1px solid rgba(12,16,28,.12); background: rgba(12,16,28,.05); } body[data-theme="light"] .nav-toggle-lines, body[data-theme="light"] .nav-toggle-lines::before, body[data-theme="light"] .nav-toggle-lines::after{ background: rgba(12,16,28,.75); } /* Cards, surfaces */ body[data-theme="light"] .hero-card, body[data-theme="light"] .card, body[data-theme="light"] .trust-inner, body[data-theme="light"] .proof-card, body[data-theme="light"] .step, body[data-theme="light"] .services, body[data-theme="light"] .about-media, body[data-theme="light"] .about-copy, body[data-theme="light"] .contact-card, body[data-theme="light"] .faq{ background: rgba(255,255,255,.70); border: 1px solid rgba(12,16,28,.10); box-shadow: var(--shadow); } body[data-theme="light"] .card.highlight{ background: radial-gradient(900px 320px at 25% 0%, rgba(37,99,235,.14), transparent 60%), rgba(255,255,255,.78); border: 1px solid rgba(12,16,28,.12); } /* Pills / badges */ body[data-theme="light"] .pill, body[data-theme="light"] .badge, body[data-theme="light"] .service, body[data-theme="light"] .mini-item{ background: rgba(12,16,28,.04); border: 1px solid rgba(12,16,28,.10); color: rgba(12,16,28,.76); } /* Buttons */ body[data-theme="light"] .btn{ border: 1px solid rgba(12,16,28,.12); } body[data-theme="light"] .btn-primary{ color: white; border: 1px solid rgba(37,99,235,.25); background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(6,182,212,.88)); box-shadow: 0 12px 32px rgba(37,99,235,.18); } body[data-theme="light"] .btn-ghost{ background: rgba(12,16,28,.04); border: 1px solid rgba(12,16,28,.12); color: rgba(12,16,28,.86); } /* Code blocks */ body[data-theme="light"] code{ background: rgba(12,16,28,.05); border: 1px solid rgba(12,16,28,.10); color: rgba(12,16,28,.84); } /* Footer */ body[data-theme="light"] .site-footer{ background: rgba(255,255,255,.55); border-top: 1px solid rgba(12,16,28,.10); } body[data-theme="light"] .footer-links a{ color: rgba(12,16,28,.62); } /* ------------------------------ THEME 2: WARM (Scandinavian) ------------------------------ */ body[data-theme="warm"]{ color-scheme: light; /* Warm theme uses Inter for a clean Scandinavian feel */ font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji'; --bg: #fbf7f1; --text: rgba(20,16,12,.92); --muted: rgba(20,16,12,.80); --muted2: rgba(20,16,12,.65); --panel: rgba(20,16,12,.04); --panel-2: rgba(20,16,12,.06); --border: rgba(20,16,12,.12); --shadow: 0 14px 42px rgba(60, 40, 25, .12); /* warm premium palette */ --accent: #0f766e; /* deep teal */ --accent2: #f59e0b; /* amber */ --accent3: #16a34a; /* green */ background: radial-gradient(1100px 700px at 10% 5%, rgba(15,118,110,.12), transparent 62%), radial-gradient(900px 650px at 95% 20%, rgba(245,158,11,.10), transparent 55%), radial-gradient(700px 500px at 45% 95%, rgba(22,163,74,.06), transparent 55%), var(--bg); } body[data-theme="warm"] .site-header{ background: rgba(251,247,241,.78); border-bottom: 1px solid rgba(20,16,12,.10); } body[data-theme="warm"] .brand-name{ color: rgba(20,16,12,.92); } body[data-theme="warm"] .site-nav a{ color: rgba(20,16,12,.62); } body[data-theme="warm"] .site-nav a:hover{ background: rgba(20,16,12,.06); color: rgba(20,16,12,.90); } body[data-theme="warm"] .site-nav .nav-cta{ background: rgba(20,16,12,.05); border: 1px solid rgba(20,16,12,.12); color: rgba(20,16,12,.90); } body[data-theme="warm"] .nav-toggle{ border: 1px solid rgba(20,16,12,.12); background: rgba(20,16,12,.05); } body[data-theme="warm"] .nav-toggle-lines, body[data-theme="warm"] .nav-toggle-lines::before, body[data-theme="warm"] .nav-toggle-lines::after{ background: rgba(20,16,12,.75); } /* Surfaces */ body[data-theme="warm"] .hero-card, body[data-theme="warm"] .card, body[data-theme="warm"] .trust-inner, body[data-theme="warm"] .proof-card, body[data-theme="warm"] .step, body[data-theme="warm"] .services, body[data-theme="warm"] .about-media, body[data-theme="warm"] .about-copy, body[data-theme="warm"] .contact-card, body[data-theme="warm"] .faq{ background: rgba(255,255,255,.62); border: 1px solid rgba(20,16,12,.10); box-shadow: var(--shadow); } body[data-theme="warm"] .card.highlight{ background: radial-gradient(900px 320px at 25% 0%, rgba(15,118,110,.14), transparent 60%), rgba(255,255,255,.68); border: 1px solid rgba(20,16,12,.12); } /* Pills / badges */ body[data-theme="warm"] .pill, body[data-theme="warm"] .badge, body[data-theme="warm"] .service, body[data-theme="warm"] .mini-item{ background: rgba(20,16,12,.04); border: 1px solid rgba(20,16,12,.10); color: rgba(20,16,12,.76); } /* Buttons: teal → amber gradient */ body[data-theme="warm"] .btn{ border: 1px solid rgba(20,16,12,.12); } body[data-theme="warm"] .btn-primary{ color: #fff; border: 1px solid rgba(15,118,110,.25); background: linear-gradient(135deg, rgba(15,118,110,.98), rgba(245,158,11,.86)); box-shadow: 0 12px 30px rgba(15,118,110,.16); } body[data-theme="warm"] .btn-ghost{ background: rgba(20,16,12,.04); border: 1px solid rgba(20,16,12,.12); color: rgba(20,16,12,.86); } body[data-theme="warm"] code{ background: rgba(20,16,12,.05); border: 1px solid rgba(20,16,12,.10); color: rgba(20,16,12,.84); } body[data-theme="warm"] .site-footer{ background: rgba(255,255,255,.45); border-top: 1px solid rgba(20,16,12,.10); } body[data-theme="warm"] .footer-links a{ color: rgba(20,16,12,.62); } /* ----------------------------------- THEME 3: SOFT DARK (Luxury / softer) ----------------------------------- */ body[data-theme="soft-dark"]{ color-scheme: dark; --bg: #0b1020; --text: rgba(255,255,255,.90); --muted: rgba(255,255,255,.66); --muted2: rgba(255,255,255,.54); --panel: rgba(255,255,255,.06); --panel-2: rgba(255,255,255,.08); --border: rgba(255,255,255,.12); --shadow: 0 18px 55px rgba(0,0,0,.45); /* luxury accents: emerald + gold */ --accent: #10b981; /* emerald */ --accent2: #fbbf24; /* gold */ --accent3: #60a5fa; /* soft blue */ background: radial-gradient(1100px 800px at 12% 8%, rgba(16,185,129,.14), transparent 60%), radial-gradient(900px 700px at 88% 20%, rgba(251,191,36,.10), transparent 55%), radial-gradient(700px 600px at 40% 92%, rgba(96,165,250,.08), transparent 55%), var(--bg); } /* Soft-dark: use Manrope for headings to give a modern executive tone */ body[data-theme="soft-dark"] h1, body[data-theme="soft-dark"] h2, body[data-theme="soft-dark"] h3, body[data-theme="soft-dark"] h4, body[data-theme="soft-dark"] h5, body[data-theme="soft-dark"] h6{ font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial; } /* Slightly richer header for luxury feel */ body[data-theme="soft-dark"] .site-header{ background: rgba(11,16,32,.62); border-bottom: 1px solid rgba(255,255,255,.10); } /* Surfaces: softer contrast, more “glass” */ body[data-theme="soft-dark"] .hero-card, body[data-theme="soft-dark"] .card, body[data-theme="soft-dark"] .trust-inner, body[data-theme="soft-dark"] .proof-card, body[data-theme="soft-dark"] .step, body[data-theme="soft-dark"] .services, body[data-theme="soft-dark"] .about-media, body[data-theme="soft-dark"] .about-copy, body[data-theme="soft-dark"] .contact-card, body[data-theme="soft-dark"] .faq{ background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow); } body[data-theme="soft-dark"] .card.highlight{ background: radial-gradient(900px 320px at 25% 0%, rgba(16,185,129,.18), transparent 60%), rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); } /* Pills / badges: darker but clearer */ body[data-theme="soft-dark"] .pill, body[data-theme="soft-dark"] .badge, body[data-theme="soft-dark"] .service, body[data-theme="soft-dark"] .mini-item{ background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.78); } /* Buttons: emerald → gold */ body[data-theme="soft-dark"] .btn-primary{ border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(16,185,129,.92), rgba(251,191,36,.78)); box-shadow: 0 14px 38px rgba(16,185,129,.18); } body[data-theme="soft-dark"] .btn-ghost{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.86); } /* Code blocks */ body[data-theme="soft-dark"] code{ background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.86); } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; font-size: 18px; } body{ margin: 0; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 800px at 15% 10%, rgba(124, 58, 237, .18), transparent 60%), radial-gradient(900px 700px at 80% 30%, rgba(6, 182, 212, .12), transparent 55%), radial-gradient(700px 500px at 40% 85%, rgba(34, 197, 94, .10), transparent 55%), var(--bg); line-height: 1.65; } a{ color: inherit; text-decoration: none; } a:hover{ opacity: .95; } .container{ width: min(1100px, calc(100% - 40px)); margin: 0 auto; } .skip-link{ position: absolute; left: -999px; top: 12px; padding: 10px 12px; background: #fff; color: #000; border-radius: 10px; z-index: 9999; } .skip-link:focus{ left: 12px; } .sr-only{ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Header */ .site-header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(7,10,18,.55); border-bottom: 1px solid var(--border); } .header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; } .brand{ display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .2px; font-size: 16px; } .brand-mark{ width: 14px; height: 14px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 0 3px var(--panel); } .brand-name{ color: var(--text); } .site-nav{ display: flex; align-items: center; gap: 18px; } .site-nav a{ color: var(--muted); font-weight: 600; font-size: 15px; padding: 9px 12px; border-radius: 10px; } .site-nav a:hover{ background: var(--panel); color: var(--text); } .site-nav .nav-cta{ color: var(--text); background: var(--panel-2); border: 1px solid var(--border); } .nav-cta-group{ display: flex; align-items: center; gap: 10px; } .nav-lang-inline{ display: none; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--muted); } .nav-lang-link{ padding: 0; border: none; background: none; color: var(--muted); } .nav-lang-link:hover{ color: var(--text); background: none; } .nav-lang-sep{ color: var(--muted); } /* Utility to hide nav items that are not ready for public view */ .site-nav a.nav-hidden{ display: none !important; } /* Keep mobile nav hidden as well */ .site-nav.is-open a.nav-hidden{ display: none !important; } .nav-toggle{ display: none; border: 1px solid var(--border); background: var(--panel); border-radius: 12px; padding: 10px 12px; color: var(--text); } .nav-toggle-lines{ width: 22px; height: 2px; background: var(--text); display: block; position: relative; } .nav-toggle-lines::before, .nav-toggle-lines::after{ content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--text); } .nav-toggle-lines::before{ top: -7px; } .nav-toggle-lines::after{ top: 7px; } /* Theme toggle specific styling */ #theme-toggle{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 12px; font-size: 16px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); } #theme-toggle[aria-pressed="true"]{ background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); border-color: var(--border); } /* Hero */ .hero{ padding: 70px 0 40px; } .hero-grid{ display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: start; } .eyebrow{ color: var(--muted); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; margin: 0 0 14px; } h1{ margin: 0 0 14px; font-weight: 800; font-size: clamp(36px, 4.8vw, 56px); line-height: 1.03; letter-spacing: -.02em; } .gradient{ background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead{ color: var(--text); font-size: 20px; line-height: 1.6; margin: 0 0 22px; max-width: 66ch; } .cta-row{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } /* Page hero (sub-pages) — align look with the homepage hero */ .page-hero{ padding: 70px 0 40px; } /* kicker is the small uppercase line above h1 used on subpages */ .kicker, .page-hero .kicker{ color: var(--muted); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; margin: 0 0 14px; } /* breadcrumbs under the page title */ .breadcrumbs{ margin-top: 12px; color: var(--muted); font-size: 14px; } .page-hero .cta-row{ margin-top: 18px; } .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; border: 1px solid var(--border); transition: transform .15s ease, background .15s ease, border-color .15s ease; } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0px); } .btn-full{ width: 100%; } .btn-primary{ border: 1px solid var(--border); background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.85)); box-shadow: 0 10px 30px rgba(124,58,237,.20); } .btn-ghost{ background: var(--panel); border: 1px solid var(--border); color: var(--text); } .micro-proof{ display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; } .pill{ font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); padding: 8px 10px; border-radius: 999px; } /* Gradient underline for section headlines */ .headline-underline{ position: relative; display: inline-block; padding-bottom: 6px; } .headline-underline::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: .5; } /* Value chain: Clarity → Accountability → Delivery */ .value-chain{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .value-chain .chain-label{ font-weight: 700; color: var(--text); position: relative; display: inline-block; padding-bottom: 4px; } .chain-steps{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chain-step{ padding: 5px 9px; font-weight: 600; } .chain-arrow{ color: var(--muted2); } .chain-step .icon{ margin-right: 6px; font-size: 14px; line-height: 0; } /* Optional subtle color dots for each step */ .chain-step.is-clarity{ box-shadow: inset 0 0 0 2px rgba(6,182,212,.25); } .chain-step.is-accountability{ box-shadow: inset 0 0 0 2px rgba(124,58,237,.22); } .chain-step.is-delivery{ box-shadow: inset 0 0 0 2px rgba(34,197,94,.22); } /* Pill grid cards (used in "What I bring") */ .pill-grid{ display: flex; flex-direction: column; gap: 14px; margin-top: 10px; } .pill-card{ background: transparent; border: none; border-radius: 0; padding: 0; } .pill-title{ font-weight: 700; color: var(--text); margin: 0 0 4px; font-size: 15px; } .pill-body{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } /* Natural-flow story under What I bring */ .bring-story{ margin-top: 16px; } .bring-story p{ max-width: 78ch; } /* Softer body tone utility */ .muted2{ color: var(--muted2); } .fineprint{ margin: 12px 0 0; font-size: 13px; color: var(--muted2); } .muted{ color: var(--muted); } .hero-card{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius2); box-shadow: var(--shadow); overflow: hidden; } .profile{ display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid var(--border); } .headshot{ width: 62px; height: 62px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border); background: var(--panel); } .profile-name{ font-weight: 800; font-size: 16px; } .profile-title, .profile-loc{ color: var(--muted); font-size: 13px; margin-top: 2px; } .quick-box{ padding: 18px; border-bottom: 1px solid var(--border); } .quick-title{ color: var(--muted); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; } .quick-main{ margin-top: 8px; font-weight: 900; font-size: 20px; } .quick-sub{ color: var(--muted); margin-top: 4px; font-size: 13px; } .quick-actions{ display: grid; gap: 10px; margin-top: 14px; } .mini-list{ padding: 16px 18px 20px; display: grid; gap: 12px; } .mini-item{ background: rgba(0,0,0,.16); border: 1px solid var(--border); border-radius: 14px; padding: 12px; } .mini-k{ color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .mini-v{ margin-top: 6px; color: var(--text); font-size: 13px; } /* Trust bar */ .trust{ padding: 18px 0 40px; } .trust-inner{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--border); background: var(--panel-2); border-radius: var(--radius2); padding: 16px 18px; } .trust-badges{ display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 12px; max-width: 900px; margin-left: auto; margin-right: auto; } .trust-divider{ height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)); margin: 18px 0; opacity: .8; } .trust-head h4{ margin: 0 0 6px; font-size: 18px; letter-spacing: -.02em; text-align: center; } .trust-head p{ margin: 0; font-size: 14px; color: var(--muted); text-align: center; } .trust-badges .badge{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,0.06); transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease; } .trust-badges .badge:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); } /* Light theme tweak for better contrast */ body[data-theme="light"] .trust-badges .badge{ background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.86)); color: rgba(12,16,28,.92); border: 1px solid rgba(12,16,28,.08); box-shadow: 0 8px 20px rgba(20,24,40,.06); } .trust-note{ margin-top:10px; font-size:13px; color:var(--muted); } /* Sections */ .section{ padding: 70px 0; } .section-head{ margin-bottom: 22px; } .section-head h2{ margin: 0 0 10px; font-size: 32px; letter-spacing: -.02em; } /* Subhead used under section headings (e.g., 'I help founders...') */ #what .subhead{ margin: 6px 0 10px; font-size: 18px; font-weight: 700; color: var(--muted); } .cards{ display: grid; gap: 16px; } .card{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius2); padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.22); } .card.highlight{ background: radial-gradient(900px 300px at 30% 0%, rgba(124,58,237,.22), transparent 60%), var(--panel); border: 1px solid var(--border); } .card-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .card-top h3{ margin: 0; font-size: 22px; letter-spacing: -.01em; } .price{ font-weight: 900; font-size: 16px; } .card-lead{ margin: 10px 0 0; color: var(--text); } .card-grid{ display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-top: 18px; } .two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } h4{ margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .checklist, .bullets{ margin: 0; padding-left: 18px; color: var(--text); font-size: 15px; } .checklist li, .bullets li{ margin: 8px 0; } .callout{ margin: 14px 0; padding: 12px; background: rgba(0,0,0,.20); border: 1px solid var(--border); border-radius: 14px; color: var(--text); font-size: 13px; } /* Proof */ .proof-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .proof-card{ background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 16px; } .proof-kpi{ font-weight: 900; font-size: 18px; } .proof-label{ margin-top: 8px; color: var(--muted); font-size: 13px; } .proof-bullets{ margin-top: 18px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; } .testimonial{ border: 1px dashed var(--border); border-radius: 18px; padding: 24px; background: var(--panel-2); } .testimonial-quote{ position: relative; } .testimonial-quote::before{ display: none; } .testimonial-quote::after{ display: none; } .testimonial-text{ margin: 0; color: var(--text); font-size: 16px; line-height: 1.6; text-align: left; } .testimonial-attribution{ margin-top: 12px !important; color: var(--muted) !important; font-size: 14px; font-weight: 400; letter-spacing: 0; text-align: left; } /* Steps (How I work) — card layout */ .steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; margin: 26px 0 10px; align-items: stretch; } .step{ /* keep theme surfaces (warm/light) working, don't nuke background/border */ padding: 18px 18px 16px; border-radius: var(--radius2); text-align: left; display: flex; flex-direction: column; gap: 10px; position: relative; } /* Remove the big arrows (you already have the arrow sentence above) */ .step::after{ display: none; } .step-num{ width: 40px; height: 40px; border-radius: 14px; /* rounded-square like your other UI */ display: grid; place-items: center; font-weight: 900; font-size: 16px; background: var(--accent); border: none; color: white; margin-bottom: 4px; } /* Better contrast on dark themes */ body[data-theme="soft-dark"] .step-num{ background: var(--accent); } .step h3{ margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--text); } .step p{ margin: 0; max-width: none; /* <-- key: remove the cramped text */ font-size: 14px; line-height: 1.6; color: var(--muted); } /* Responsive */ @media (max-width: 980px){ .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .steps{ grid-template-columns: 1fr; } } /* Services */ .services{ margin-top: 22px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius2); padding: 18px; } .services-title{ margin: 0 0 12px; font-size: 18px; } .service-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .service{ padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(0,0,0,.16); color: var(--text); font-size: 14px; } /* How I work – cards layout */ .how-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; } /* About */ .about{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; align-items: start; } .about-media{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius2); padding: 18px; display: grid; gap: 14px; } .about-shot{ width: 100%; max-width: 360px; aspect-ratio: 1 / 1; border-radius: 22px; object-fit: cover; border: 1px solid var(--border); background: var(--panel); } .about-meta{ display: grid; gap: 4px; } .about-name{ font-weight: 900; font-size: 18px; } .about-role{ color: var(--muted); } .about-copy{ background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius2); padding: 18px; } .about-copy h2{ margin-top: 0; } .about-links{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .link{ padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 700; font-size: 14px; } /* Contact */ .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .contact-card{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius2); padding: 18px; } .contact-details{ margin-top: 14px; display: grid; gap: 10px; } .detail{ color: var(--text); } .detail-k{ display: inline-block; width: 54px; color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } code{ background: rgba(0,0,0,.25); border: 1px solid var(--border); padding: 2px 6px; border-radius: 10px; color: var(--text); } /* FAQ */ .faq{ margin-top: 18px; border: 1px solid var(--border); background: var(--panel-2); border-radius: var(--radius2); padding: 18px; } .faq h3{ margin: 0 0 10px; } details{ border-top: 1px solid var(--border); padding: 12px 0; } details:first-of-type{ border-top: none; } summary{ cursor: pointer; font-weight: 800; color: var(--text); } details p{ margin: 10px 0 0; } /* Footer */ .site-footer{ padding: 32px 0 44px; border-top: 1px solid var(--border); background: rgba(0,0,0,.12); } .footer-inner{ display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .footer-links{ display: flex; gap: 12px; } .footer-links a{ color: var(--muted); font-weight: 700; font-size: 13px; } /* Mobile */ @media (max-width: 680px){ .hero-grid{ grid-template-columns: 1fr; } .card-grid{ grid-template-columns: 1fr; } .two-col{ grid-template-columns: 1fr; } .proof-grid{ grid-template-columns: repeat(2, 1fr); } .proof-bullets{ grid-template-columns: 1fr; } .service-grid{ grid-template-columns: 1fr; } .about{ grid-template-columns: 1fr; } .contact-grid{ grid-template-columns: 1fr; } .site-nav{ display: none; position: absolute; top: 62px; right: 20px; left: 20px; background: rgba(7,10,18,.92); border: 1px solid var(--border); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); flex-direction: column; align-items: stretch; } .site-nav a{ padding: 12px 12px; } .nav-toggle{ display: inline-flex; } .site-nav.is-open{ display: flex; } } /* --- Mobile menu layering fix --- */ .menu-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; display: none; } .menu-overlay.is-open{ display:block; } /* Mobile menu: column layout + tap targets */ .mobile-menu{ display: none; position: fixed; top: 72px; left: 14px; right: 14px; z-index: 9999; background: var(--card, #fff); border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 18px; padding: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.22); } .mobile-menu.is-open{ display:block; } .m-item{ display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 14px; font-size: 16px; font-weight: 600; text-decoration: none; color: var(--text, #111); } .m-item:active{ transform: scale(0.99); } .m-item:hover{ background: rgba(0,0,0,.05); } .m-divider{ height: 1px; margin: 8px 6px; background: var(--border, rgba(0,0,0,.12)); } .m-lang{ display: none; align-items: center; gap: 8px; padding: 10px 12px; } .m-lang-btn{ border: 1px solid var(--border, rgba(0,0,0,.12)); background: transparent; color: var(--text, #111); padding: 8px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-decoration: none; display: inline-block; } .m-lang-btn:hover{ background: rgba(0,0,0,.08); } .m-lang-btn.is-active{ background: rgba(0,0,0,.08); } .m-lang-sep{ opacity: .55; font-weight: 700; } html.no-scroll, body.no-scroll{ overflow: hidden; } /* Blog Featured Section */ .featured-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2.5rem; } .post-card { padding: 1.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); transition: all 0.2s ease-out; display: flex; flex-direction: column; } .post-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08); transform: translateY(-2px); } .post-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; } .post-meta time { color: var(--muted); font-weight: 500; } .post-category { display: inline-block; padding: 0.25rem 0.75rem; background: var(--accent); color: white; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .post-title { font-size: 1.25rem; line-height: 1.4; margin-bottom: 0.75rem; color: var(--text); flex-grow: 1; } .post-excerpt { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; flex-grow: 1; } .post-link { color: var(--accent); font-weight: 600; text-decoration: none; display: inline-block; transition: color 0.2s ease-out; font-size: 0.95rem; } .post-link:hover { color: var(--accent2); text-decoration: underline; } .blog-cta { display: flex; justify-content: center; } /* Blog Page Styling */ .blog-header { margin-bottom: 2rem; } .blog-posts { display: grid; gap: 2rem; margin-bottom: 2rem; } .blog-post { padding: 1.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); } .blog-post h2 { margin: 0 0 0.5rem; font-size: 1.5rem; } .blog-post-meta { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--muted); } .blog-post-content { margin-top: 1rem; color: var(--muted); line-height: 1.6; } /* Responsive Blog Grid */ @media (max-width: 980px) { .featured-posts { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 640px) { .featured-posts { grid-template-columns: 1fr; gap: 1.5rem; } .post-card { padding: 1.25rem; } .post-title { font-size: 1.1rem; } } /* Calendly Widget Mobile Responsive */ .calendly-inline-widget { width: 100% !important; max-width: 100% !important; } @media (max-width: 640px) { .calendly-inline-widget { min-height: 600px !important; height: 600px !important; } .contact-grid { grid-template-columns: 1fr; } .contact-card { overflow: auto; } }