/* ============================================================ EDITORIAL SKIN — site-wide visual layer (meetcaddy.com) The look of /caddy-vs-viktor/ (Palatino serif display type, forest-black hero bands, cream-paper + deep-forest-green card colorways, grain texture, italic gradient emphasis) applied to every page WITHOUT changing copy, layout, spacing, or structure. HOW IT LOADS: injected as the LAST element of on every skinned page, so it wins cascade ties against each page's own head and body inline styles. The injector also adds scoping classes to : esk- (e.g. esk-home, esk-call) plus template groups (esk-t-industry, esk-t-solution, esk-t-blogpost, esk-t-funnel). All page-specific rules are scoped on those. CONSTRAINT: colors, font-family/weight/style, backgrounds, borders, shadows, and grain/band pseudo-elements ONLY. The only structural properties used are position:relative/overflow:hidden to host pseudo-elements, and the pseudo-elements themselves. NOT injected (see inject script): the three caddy-vs pages (the reference template itself), the go preview pages and the go preview harness (archive records of ads that ran), and the go v2 redirect stub. ============================================================ */ /* ───────────────────────── TOKENS ───────────────────────── */ :root { --serif: "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif; --forest-black: #101915; --cream: #F7F3E8; --cream-card: #FDFBF3; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } /* ────────────────── GLOBAL TYPE CORE ────────────────── .s-h2 is the shared section-heading class across the site; every skinned page that has it gets the serif + italic turn. */ .s-h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } .s-h2 .gradient-text { font-style: italic; } /* ============================================================ HOMEPAGE (.esk-home) — the validated original skin ============================================================ */ .esk-home .hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--cream); } .esk-home .hero h1 .gradient-text { font-style: italic; } .esk-home .hero-pitch { font-family: var(--serif); font-weight: 600; color: var(--cream); } .esk-home .rung-name { font-family: var(--serif); font-weight: 600; } .esk-home .fit-card h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; } .esk-home .phase-step h3 { font-family: var(--serif); font-weight: 600; } .esk-home .paper-card h3 { font-family: var(--serif); font-weight: 600; } .esk-home .math-step .num { font-family: var(--serif); font-weight: 700; } .esk-home .proof-tile .n { font-family: var(--serif); font-weight: 700; } .esk-home .steps li::before { font-family: var(--serif); font-weight: 700; } /* ---- Hero: fixed forest band (both themes) ---- */ .esk-home .hero::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: radial-gradient(1200px 800px at 85% -10%, rgba(64,145,108,.38), transparent 55%), radial-gradient(900px 600px at -5% 110%, rgba(45,106,79,.45), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 45%, #0C120E 100%); z-index: -1; pointer-events: none; } .esk-home .hero::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; z-index: -1; pointer-events: none; } .esk-home .hero-sub { color: rgba(247, 243, 232, .72); } .esk-home .hero .rword { color: #57B98A; } .esk-home .hero a[data-cta="hero-aimap"] { color: #57B98A !important; } html[data-theme="light"] .esk-home .hero h1 .gradient-text { background: linear-gradient(90deg, #FFFFFF 0%, #B7D9C4 20%, #52A17D 55%, #40916C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- The Alternatives: ACE column carries the green (desktop table) ---- */ @media (min-width: 721px) { .esk-home .ace-compare td.ace { background: linear-gradient(180deg, rgba(64,145,108,.14), rgba(64,145,108,.07)); border-left: 3px solid var(--green-bright); color: var(--text-strong); } .esk-home .ace-compare thead th:nth-child(2) { color: var(--green-text); } } /* ---- STEP 2 rung card: deep green (both themes) ---- */ .esk-home .rung-card.primary { position: relative; overflow: hidden; background: radial-gradient(420px 280px at 90% -10%, rgba(64,145,108,.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); } .esk-home .rung-card.primary::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .2; mix-blend-mode: overlay; pointer-events: none; } .esk-home .rung-card.primary .rung-num { color: #57B98A; } .esk-home .rung-card.primary .rung-name { color: #FFFFFF; } .esk-home .rung-card.primary .rung-desc { color: #B7D9C4; } html[data-theme="light"] .esk-home .rung-card.primary { background: radial-gradient(420px 280px at 90% -10%, rgba(64,145,108,.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); border-color: var(--green); } /* ---- Day 90 papers: cream (both themes) ---- */ .esk-home .paper-card { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, .14); } .esk-home .paper-card::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; } .esk-home .paper-card h3 { color: #1A1710; } .esk-home .paper-card .pnum { color: #2D6A4F; } .esk-home .paper-card p { color: #6A6455; } /* ---- The Math: one cream card, one green card (both themes) ---- */ .esk-home .math-cards .math-card:first-child { position: relative; overflow: hidden; background: linear-gradient(180deg, #F1EBDC, #EAE2CE); border-color: rgba(70, 60, 35, .14); } .esk-home .math-cards .math-card:first-child::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; } .esk-home .math-cards .math-card:first-child .math-step .num { color: #2B2822; } .esk-home .math-cards .math-card:first-child .math-step.result .num { color: #1B4332; } .esk-home .math-cards .math-card:first-child .math-step .lbl { color: #6A6455; } .esk-home .math-cards .math-card:first-child .math-arrow { color: #2D6A4F; } .esk-home .math-cards .math-card:last-child { position: relative; overflow: hidden; background: radial-gradient(400px 260px at 85% -10%, rgba(64,145,108,.45), transparent 60%), linear-gradient(165deg, #1B4332, #12301F); border-color: rgba(45, 106, 79, .4); } .esk-home .math-cards .math-card:last-child::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; } .esk-home .math-cards .math-card:last-child .math-step .num { color: #FFFFFF; } .esk-home .math-cards .math-card:last-child .math-step.result .num { color: #B7D9C4; } .esk-home .math-cards .math-card:last-child .math-step .lbl { color: rgba(183, 217, 196, .9); } .esk-home .math-cards .math-card:last-child .math-arrow { color: #57B98A; } /* ---- Fit Check: the "yes" card goes deep green (both themes) ---- */ .esk-home .fit-card.yes { position: relative; overflow: hidden; background: radial-gradient(460px 300px at 100% 0%, rgba(64,145,108,.5), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); border-color: rgba(45, 106, 79, .4); } .esk-home .fit-card.yes::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .2; mix-blend-mode: overlay; pointer-events: none; } .esk-home .fit-card.yes h3 { color: #FFFFFF; } .esk-home .fit-card.yes li { color: #E4EDE6; } .esk-home .fit-card.yes li strong { color: #FFFFFF; } .esk-home .fit-card.yes li::before { color: #57B98A; } html[data-theme="light"] .esk-home .fit-card.yes, html[data-theme="light"] .esk-home .fit-card.yes:hover { background: radial-gradient(460px 300px at 100% 0%, rgba(64,145,108,.5), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); border-color: rgba(45, 106, 79, .4); } /* ============================================================ SHARED HERO BAND — /call/, /ace/booked/, /caddy/ (their heroes reuse the homepage .hero class; explicit allowlist instead of letting the band leak site-wide) ============================================================ */ .esk-call .hero::before, .esk-ace-booked .hero::before, .esk-caddy .hero::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: radial-gradient(1200px 800px at 85% -10%, rgba(64,145,108,.38), transparent 55%), radial-gradient(900px 600px at -5% 110%, rgba(45,106,79,.45), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 45%, #0C120E 100%); z-index: -1; pointer-events: none; } .esk-call .hero::after, .esk-ace-booked .hero::after, .esk-caddy .hero::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; z-index: -1; pointer-events: none; } .esk-call .hero, .esk-ace-booked .hero, .esk-caddy .hero { position: relative; } .esk-call .hero h1, .esk-ace-booked .hero h1, .esk-caddy .hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--cream); } .esk-call .hero h1 .gradient-text, .esk-ace-booked .hero h1 .gradient-text, .esk-caddy .hero h1 .gradient-text { font-style: italic; } .esk-call .hero-sub, .esk-ace-booked .hero-sub, .esk-caddy .hero-sub { color: rgba(247, 243, 232, .72); } .esk-caddy .hero-pitch { font-family: var(--serif); font-weight: 600; color: var(--cream); } html[data-theme="light"] .esk-call .hero h1, html[data-theme="light"] .esk-ace-booked .hero h1, html[data-theme="light"] .esk-caddy .hero h1 { color: var(--cream); } html[data-theme="light"] .esk-call .hero h1 .gradient-text, html[data-theme="light"] .esk-ace-booked .hero h1 .gradient-text, html[data-theme="light"] .esk-caddy .hero h1 .gradient-text { background: linear-gradient(90deg, #FFFFFF 0%, #B7D9C4 20%, #52A17D 55%, #40916C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .esk-call .hero-sub, html[data-theme="light"] .esk-ace-booked .hero-sub, html[data-theme="light"] .esk-caddy .hero-sub { color: rgba(247, 243, 232, .72); } html[data-theme="light"] .esk-caddy .hero-pitch { color: var(--cream); } /* ============================================================ LEARN TEMPLATE (.page-header pages: 8 industries + 6 solutions + learn/digital-labor/fractional-ai-executive/operator-tax/ ai-assessment). The class exists only on these 19 pages, all of which load this skin, so the rules are unscoped by design. ============================================================ */ .page-header h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--cream); } .page-header h1 .gradient-text { font-style: italic; } .page-header { position: relative; } .page-header::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: radial-gradient(1200px 800px at 85% -10%, rgba(64,145,108,.38), transparent 55%), radial-gradient(900px 600px at -5% 110%, rgba(45,106,79,.45), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 45%, #0C120E 100%); z-index: -1; pointer-events: none; } .page-header::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; z-index: -1; pointer-events: none; } .page-header .s-eye { color: #57B98A; } .page-header .s-eye::before { background: #40916C; } .page-header .s-lede { color: rgba(247, 243, 232, .72); } html[data-theme="light"] .page-header h1 { color: var(--cream); } html[data-theme="light"] .page-header h1 .gradient-text { background: linear-gradient(90deg, #FFFFFF 0%, #B7D9C4 20%, #52A17D 55%, #40916C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .page-header .s-eye { color: #57B98A; } html[data-theme="light"] .page-header .s-eye::before { background: #40916C; } html[data-theme="light"] .page-header .s-lede { color: rgba(247, 243, 232, .72); } /* Definition box: cream paper riding the band (both themes) */ .page-header .def-box { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-left-color: #2D6A4F; color: #1A1710; box-shadow: 0 24px 60px rgba(16, 25, 21, .35), 0 4px 14px rgba(16, 25, 21, .18); } .page-header .def-box::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; } .page-header .def-box p { font-family: var(--serif); font-weight: 500; color: #2B2822; } html[data-theme="light"] .page-header .def-box { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-left-color: #2D6A4F; color: #1A1710; box-shadow: 0 24px 60px rgba(16, 25, 21, .28), 0 4px 14px rgba(16, 25, 21, .12); } html[data-theme="light"] .page-header .def-box p { color: #2B2822; } /* ai-assessment bridge card heading joins the serif */ .bridge .bridge-card h2 { font-family: var(--serif); font-weight: 600; } /* ============================================================ ABOUT (.esk-about) + PODCAST (.esk-podcast) ============================================================ */ .esk-about .about-h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-about .about-h2 { font-family: var(--serif); font-weight: 600; } /* Podcast episode header: forest band + cream serif */ .esk-podcast .post-header { position: relative; } .esk-podcast .post-header::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: radial-gradient(1200px 800px at 85% -10%, rgba(64,145,108,.38), transparent 55%), radial-gradient(900px 600px at -5% 110%, rgba(45,106,79,.45), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 45%, #0C120E 100%); z-index: -1; pointer-events: none; } .esk-podcast .post-header::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; z-index: -1; pointer-events: none; } .esk-podcast .post-header h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--cream); } .esk-podcast .post-byline { color: rgba(247, 243, 232, .72); } .esk-podcast .post-byline .post-author { color: #57B98A; } .esk-podcast .post-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, .45); } .esk-podcast .post-eyebrow:hover { color: #7BCBA4; border-color: rgba(87, 185, 138, .7); } html[data-theme="light"] .esk-podcast .post-header h1 { color: var(--cream); } html[data-theme="light"] .esk-podcast .post-byline { color: rgba(247, 243, 232, .72); } html[data-theme="light"] .esk-podcast .post-byline .post-author { color: #57B98A; } html[data-theme="light"] .esk-podcast .post-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, .45); } html[data-theme="light"] .esk-podcast .post-eyebrow:hover { color: #7BCBA4; border-color: rgba(87, 185, 138, .7); } .esk-podcast .post-body h2 { font-family: var(--serif); font-weight: 600; } /* Chapters: cream tracklist paper (both themes) */ .esk-podcast .chapters { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, .14); } .esk-podcast .chapters::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; } .esk-podcast .chapters li + li { border-top-color: rgba(70, 60, 35, .12); } .esk-podcast .chapter-time { color: #2D6A4F; } .esk-podcast .chapter-title { color: #2B2822; } html[data-theme="light"] .esk-podcast .chapters { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, .14); } html[data-theme="light"] .esk-podcast .chapters li + li { border-top-color: rgba(70, 60, 35, .12); } html[data-theme="light"] .esk-podcast .chapter-time { color: #2D6A4F; } html[data-theme="light"] .esk-podcast .chapter-title { color: #2B2822; } /* ============================================================ BLOG (.esk-blog index, .esk-t-blogpost posts) ============================================================ */ .esk-blog .blog-header::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: radial-gradient(1200px 800px at 85% -10%, rgba(64,145,108,.38), transparent 55%), radial-gradient(900px 600px at -5% 110%, rgba(45,106,79,.45), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 45%, #0C120E 100%); z-index: -1; pointer-events: none; } .esk-blog .blog-header::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; z-index: -1; pointer-events: none; } .esk-blog .blog-header { position: relative; } .esk-blog .blog-header h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--cream); } .esk-blog .blog-header h1 .gradient-text { font-style: italic; } .esk-blog .blog-intro { color: rgba(247, 243, 232, .72); } .esk-blog .blog-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, .45); } .esk-blog .blog-card h2 { font-family: var(--serif); font-weight: 600; } html[data-theme="light"] .esk-blog .blog-header h1 { color: var(--cream); } html[data-theme="light"] .esk-blog .blog-header h1 .gradient-text { background: linear-gradient(90deg, #FFFFFF 0%, #B7D9C4 20%, #52A17D 55%, #40916C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .esk-blog .blog-intro { color: rgba(247, 243, 232, .72); } html[data-theme="light"] .esk-blog .blog-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, .45); } /* Post template: serif display type */ .esk-t-blogpost .post .post-header h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-t-blogpost .post .post-body h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } .esk-t-blogpost .post .post-body h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } .esk-t-blogpost .post .post-body blockquote p { font-family: var(--serif); font-weight: 500; } /* Key-takeaways card: cream paper (both themes) */ .esk-t-blogpost .post .post-takeaways { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, .14); } .esk-t-blogpost .post .post-takeaways::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; } .esk-t-blogpost .post .post-takeaways h2 { color: #1A1710; } .esk-t-blogpost .post .post-takeaways li { color: #2B2822; } .esk-t-blogpost .post .post-takeaways li::marker { color: #2D6A4F; } .esk-t-blogpost .post .post-takeaways strong { color: #1A1710; } .esk-t-blogpost .post .post-takeaways a { color: #2D6A4F; } .esk-t-blogpost .post .post-takeaways a:hover { color: #1B4332; text-shadow: none; } html[data-theme="light"] .esk-t-blogpost .post .post-takeaways { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, .14); } /* ============================================================ UTILITY — /call/, /booked/, /ace/booked/, 404, legal ============================================================ */ /* /call/ + /ace/booked/: band-text compat (band supplied above) */ .esk-call .hero-eyebrow, .esk-ace-booked .hero-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, 0.45); } .esk-call .hero-sub strong, .esk-ace-booked .hero-sub strong { color: #FFFFFF; } html[data-theme="light"] .esk-call .hero-eyebrow, html[data-theme="light"] .esk-ace-booked .hero-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, 0.45); } html[data-theme="light"] .esk-call .hero-sub strong, html[data-theme="light"] .esk-ace-booked .hero-sub strong { color: #FFFFFF; } /* /call/: serif card headings */ .esk-call .booking-card h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } .esk-call .q11-alt-card h3 { font-family: var(--serif); font-weight: 600; } /* /call/: "You leave with" box -> cream paper */ .esk-call .walkaway { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, 0.14); } .esk-call .walkaway::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.22; mix-blend-mode: multiply; pointer-events: none; } .esk-call .walkaway-h { color: #2D6A4F; } .esk-call .walkaway li { color: #2B2822; } .esk-call .walkaway li::before { border-left-color: #2D6A4F; border-bottom-color: #2D6A4F; } .esk-call .walkaway-micro { color: #6A6455; } html[data-theme="light"] .esk-call .walkaway { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, 0.14); } /* /booked/: .b-hero forest band (both themes) */ .esk-booked .b-hero { position: relative; } .esk-booked .b-hero::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: radial-gradient(1200px 800px at 85% -10%, rgba(64,145,108,.38), transparent 55%), radial-gradient(900px 600px at -5% 110%, rgba(45,106,79,.45), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 45%, #0C120E 100%); z-index: -1; pointer-events: none; } .esk-booked .b-hero::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-image: var(--grain); opacity: 0.35; mix-blend-mode: overlay; z-index: -1; pointer-events: none; } .esk-booked .b-hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--cream); } .esk-booked .b-hero h1 .gradient-text { font-style: italic; } .esk-booked .b-hero-sub { color: rgba(247, 243, 232, 0.72); } .esk-booked .b-hero-sub strong { color: #FFFFFF; } .esk-booked .b-hero-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, 0.45); } html[data-theme="light"] .esk-booked .b-hero h1 { color: var(--cream); } html[data-theme="light"] .esk-booked .b-hero h1 .gradient-text { background: linear-gradient(90deg, #FFFFFF 0%, #B7D9C4 20%, #52A17D 55%, #40916C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .esk-booked .b-hero-sub { color: rgba(247, 243, 232, 0.72); } html[data-theme="light"] .esk-booked .b-hero-sub strong { color: #FFFFFF; } html[data-theme="light"] .esk-booked .b-hero-eyebrow { color: #57B98A; border-color: rgba(87, 185, 138, 0.45); } /* 404: serif display (page is permanently dark) */ .esk-404 .err-h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-404 .err-h1 .gradient-text { font-style: italic; } /* Legal: serif display type, no band */ .legal-h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .legal-h1 .gradient-text { font-style: italic; } .legal-section h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } /* ============================================================ AI-MAP (.esk-ai-map) — light-only interactive page ============================================================ */ .esk-ai-map #hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } /* Report header band: deep forest green */ .esk-ai-map .rhead-band { position: relative; overflow: hidden; background: radial-gradient(500px 300px at 90% -20%, rgba(64,145,108,.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 70%, #0F2A1F); } .esk-ai-map .rhead-band::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .28; mix-blend-mode: overlay; pointer-events: none; } .esk-ai-map .rhead-band h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-ai-map .rhead-band h2 .money { font-style: italic; } /* Report sheet: cream paper */ .esk-ai-map .rwrap .sheet { position: relative; background: linear-gradient(180deg, var(--cream-card), #F4EFE2); } .esk-ai-map .rwrap .sheet::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .14; mix-blend-mode: multiply; pointer-events: none; } .esk-ai-map .rsec h3 { font-family: var(--serif); font-weight: 600; } .esk-ai-map .rsec .leak h4, .esk-ai-map .rsec .play h4 { font-family: var(--serif); font-weight: 600; } /* KPI tiles: serif numerals; lead tile deep green */ .esk-ai-map .tiles .tile .v { font-family: var(--serif); font-weight: 700; } .esk-ai-map .tile.lead { position: relative; overflow: hidden; background: radial-gradient(220px 160px at 90% -10%, rgba(64,145,108,.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); border-color: #1B4332; } .esk-ai-map .tile.lead::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .2; mix-blend-mode: overlay; pointer-events: none; } /* Closing CTA band: deep green */ .esk-ai-map .ctaband { position: relative; overflow: hidden; background: radial-gradient(460px 300px at 100% 0%, rgba(64,145,108,.5), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); } .esk-ai-map .ctaband::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .18; mix-blend-mode: overlay; pointer-events: none; } .esk-ai-map .ctaband h3 { font-family: var(--serif); font-weight: 600; } /* Marketing bands below the tool */ .esk-ai-map #whatsBand h2 { font-family: var(--serif); font-weight: 600; } .esk-ai-map #whatsBand .cards3 .card h3 { font-family: var(--serif); font-weight: 600; } .esk-ai-map section.band:has(#faqCta) > .wrap > h2 { font-family: var(--serif); font-weight: 600; } /* Theme guards (inert on this light-only page; kept per convention) */ html[data-theme="light"] .esk-ai-map .rhead-band, html[data-theme="light"] .esk-ai-map .ctaband { background: radial-gradient(500px 300px at 90% -20%, rgba(64,145,108,.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 70%, #0F2A1F); } html[data-theme="light"] .esk-ai-map .tile.lead { background: radial-gradient(220px 160px at 90% -10%, rgba(64,145,108,.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); border-color: #1B4332; } /* ============================================================ CADDY PRODUCT (.esk-caddy) — /caddy/ (defaults to light theme) ============================================================ */ .esk-caddy .hero-title { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-caddy .section-title { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-caddy .section-title .gradient-text { font-style: italic; } .esk-caddy .jab-title { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-caddy .jab-title .gradient-text, .esk-caddy .jab-title .accent { font-style: italic; } .esk-caddy .final-cta h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-caddy .final-cta h2 .gradient-text { font-style: italic; } .esk-caddy .apply-h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-caddy .apply-h1 .gradient-text { font-style: italic; } .esk-caddy .inc-name { font-family: var(--serif); font-weight: 600; } .esk-caddy .phase-title { font-family: var(--serif); font-weight: 600; } .esk-caddy .pillar-name { font-family: var(--serif); font-weight: 600; } .esk-caddy .quad-cell h3 { font-family: var(--serif); font-weight: 600; } .esk-caddy .level-name { font-family: var(--serif); font-weight: 600; } .esk-caddy .level-name span { font-family: 'Inter', -apple-system, sans-serif; } .esk-caddy .apply-q { font-family: var(--serif); font-weight: 600; } .esk-caddy .apply-q .apply-q-sub { font-family: 'Inter', sans-serif; } .esk-caddy .apply-success h3 { font-family: var(--serif); font-weight: 600; } .esk-caddy .spec-num { font-family: var(--serif); font-weight: 700; } .esk-caddy .spec-num .gradient-text { font-style: italic; } .esk-caddy .pillar-num { font-family: var(--serif); font-weight: 700; } .esk-caddy .hybrid-col-80-head .pct, .esk-caddy .hybrid-col-20-head .pct { font-family: var(--serif); font-weight: 700; } .esk-caddy .leak-card-bottom-stat { font-family: var(--serif); font-weight: 600; } /* Hero ink guards on the fixed band */ .esk-caddy .hero .hero-eyebrow { color: #57B98A; } .esk-caddy .hero .green-faded { color: #57B98A; } .esk-caddy .hero .hero-microcopy { color: rgba(247, 243, 232, 0.66); } .esk-caddy .hero .hero-microcopy strong { color: var(--cream); } .esk-caddy .hero .guarantee-badge { color: #57B98A; } html[data-theme="light"] .esk-caddy .hero .hero-eyebrow { color: #57B98A; } html[data-theme="light"] .esk-caddy .hero .green-faded { color: #57B98A; } html[data-theme="light"] .esk-caddy .hero .hero-microcopy { color: rgba(247, 243, 232, 0.66); } html[data-theme="light"] .esk-caddy .hero .hero-microcopy strong { color: var(--cream); } html[data-theme="light"] .esk-caddy .hero .guarantee-badge { color: #57B98A; } html[data-theme="light"] .esk-caddy .hero .gradient-text-twin { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 20%, #B7D9C4 38%, #52A17D 58%, #40916C 78%, #57B98A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Founder note: cream paper letter (both themes) */ .esk-caddy .founder { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-top-color: rgba(70, 60, 35, 0.16); border-bottom-color: rgba(70, 60, 35, 0.16); } .esk-caddy .founder::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.22; mix-blend-mode: multiply; pointer-events: none; } .esk-caddy .founder .eyebrow { color: #2D6A4F; } .esk-caddy .founder .section-title { color: #1A1710; } .esk-caddy .founder-content p { color: #3A362C; } .esk-caddy .founder-content p a { color: #2D6A4F; } .esk-caddy .founder .founder-signoff { color: #1A1710 !important; } html[data-theme="light"] .esk-caddy .founder { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-top-color: rgba(70, 60, 35, 0.16); border-bottom-color: rgba(70, 60, 35, 0.16); } /* Leak diagnostic: forest black + grain (always-dark card) */ .esk-caddy .leak-card { position: relative; overflow: hidden; background: radial-gradient(420px 280px at 90% -10%, rgba(64, 145, 108, 0.28), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 55%, #0C120E 100%); border-color: rgba(87, 185, 138, 0.16); } .esk-caddy .leak-card::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.22; mix-blend-mode: overlay; pointer-events: none; } html[data-theme="light"] .esk-caddy .leak-card { background: radial-gradient(420px 280px at 90% -10%, rgba(64, 145, 108, 0.28), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 55%, #0C120E 100%); } html[data-theme="light"] .esk-caddy .leak-card-bottom-stat { color: #57B98A; } /* 80/20: the "Caddy installs" column deep green (both themes) */ .esk-caddy .hybrid-col-80-body { position: relative; overflow: hidden; background: radial-gradient(460px 300px at 100% 0%, rgba(64, 145, 108, 0.35), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); border-top-color: rgba(255, 255, 255, 0.10); } .esk-caddy .hybrid-col-80-body::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; pointer-events: none; } .esk-caddy .hybrid-col-80-body li::before { background: #57B98A; } html[data-theme="light"] .esk-caddy .hybrid-col-80-body { background: radial-gradient(460px 300px at 100% 0%, rgba(64, 145, 108, 0.35), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); } /* 4-quadrant: "The Owner" deep green (both themes) */ .esk-caddy .quad-cell.featured { position: relative; overflow: hidden; background: radial-gradient(420px 280px at 90% -10%, rgba(64, 145, 108, 0.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); border-color: rgba(45, 106, 79, 0.4); } .esk-caddy .quad-cell.featured::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; pointer-events: none; } .esk-caddy .quad-cell.featured h3 { color: #FFFFFF; } .esk-caddy .quad-cell.featured p { color: #B7D9C4; } html[data-theme="light"] .esk-caddy .quad-cell.featured { background: radial-gradient(420px 280px at 90% -10%, rgba(64, 145, 108, 0.5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); border-color: rgba(45, 106, 79, 0.4); } /* Fit Check: the "Caddy IS for you" card deep green (both themes) */ .esk-caddy .fitcheck-section .fit-grid .fit-card:first-child { position: relative; overflow: hidden; background: radial-gradient(460px 300px at 100% 0%, rgba(64, 145, 108, 0.5), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); border-color: rgba(45, 106, 79, 0.4); } .esk-caddy .fitcheck-section .fit-grid .fit-card:first-child::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.2; mix-blend-mode: overlay; pointer-events: none; } .esk-caddy .fitcheck-section .fit-card:first-child .fit-card-title-yes { color: #FFFFFF; } .esk-caddy .fitcheck-section .fit-card:first-child .fit-card-icon-yes { background: rgba(87, 185, 138, 0.14); border-color: rgba(87, 185, 138, 0.4); } .esk-caddy .fitcheck-section .fit-card:first-child .fit-list-yes li span { color: #E4EDE6; } .esk-caddy .fitcheck-section .fit-card:first-child .fit-list-yes li::before { background: #57B98A; } .esk-caddy .fitcheck-section .fit-card:first-child .fit-card-foot { color: #B7D9C4; border-top-color: rgba(255, 255, 255, 0.14); } .esk-caddy .fitcheck-section .fit-card:first-child .fit-card-foot strong { color: #FFFFFF; } html[data-theme="light"] .esk-caddy .fitcheck-section .fit-grid .fit-card:first-child { background: radial-gradient(460px 300px at 100% 0%, rgba(64, 145, 108, 0.5), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); border-color: rgba(45, 106, 79, 0.4); } /* Apply card: cream paper background only (live form, no grain overlay) */ .esk-caddy .apply-card { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); } html[data-theme="light"] .esk-caddy .apply-card { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); } /* ============================================================ FUNNEL (.esk-t-funnel) — /go/*, /go3/, /go4/, /p/charlie/ Copy, forms, quiz, consent language, CTAs, and the VSL player are untouched; this is the visual layer only. ============================================================ */ /* Hero: convert the page's blurred glow pseudo into the forest band. Every geometry/effect property is re-declared so the page's own .hero::before (height:500px + blur) cannot half-merge with it. */ .esk-t-funnel .hero::before { content: ""; position: absolute; top: 0; bottom: 0; height: auto; left: 50%; transform: translateX(-50%); width: 100vw; background: radial-gradient(1200px 800px at 85% -10%, rgba(64,145,108,.38), transparent 55%), radial-gradient(900px 600px at -5% 110%, rgba(45,106,79,.45), transparent 60%), linear-gradient(165deg, #141D18 0%, var(--forest-black) 45%, #0C120E 100%); filter: none; z-index: 0; pointer-events: none; } .esk-t-funnel .hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; z-index: 0; pointer-events: none; } .esk-t-funnel .hero-h1, .esk-t-funnel .hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; color: var(--cream); } /* go/confirmed: the add-to-calendar buttons are static-flow children of .hero, so the band pseudos (z-index:0) paint over them - lift them into the same layer as the rest of the hero content. Layout-neutral. */ .esk-go-confirmed .cal-btns { position: relative; z-index: 1; } .esk-t-funnel .hero-h1 .accent { font-style: italic; background: linear-gradient(90deg, #FFFFFF 0%, #B7D9C4 30%, #52A17D 70%, #40916C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .esk-t-funnel .hero-sub { color: rgba(247, 243, 232, .72); } .esk-t-funnel .hero-sub b { color: var(--cream); } .esk-t-funnel .hero .hero-check ~ p { color: rgba(247, 243, 232, 0.72); } .esk-t-funnel .hero-inner .hero-sub { color: rgba(247, 243, 232, 0.72); } html[data-theme="light"] .esk-t-funnel .hero-h1 { color: var(--cream); } html[data-theme="light"] .esk-t-funnel .hero-h1 .accent { background: linear-gradient(90deg, #FFFFFF 0%, #B7D9C4 30%, #52A17D 70%, #40916C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .esk-t-funnel .hero-sub { color: rgba(247, 243, 232, .72); } /* Display + card-heading serif (quiz internals excluded) */ .esk-t-funnel .section-h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-t-funnel .trust-card h3, .esk-t-funnel .guarantee-card h2, .esk-t-funnel .final h2, .esk-t-funnel .about h2, .esk-t-funnel .about-copy h2, .esk-t-funnel .five-item h3, .esk-t-funnel .proof-card h3, .esk-t-funnel .reciprocity-card h3, .esk-t-funnel .sec-center h3, .esk-t-funnel .step3 h4 { font-family: var(--serif); font-weight: 600; } .esk-t-funnel .q h1, .esk-t-funnel .q h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-t-funnel .faq > h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .esk-t-funnel .math-land, .esk-t-funnel .contrast-kicker { font-family: var(--serif); } .esk-t-funnel .reciprocity .proof-tile p { font-family: var(--serif); font-weight: 500; } /* Guarantee card: cream paper (the signed document) */ .esk-t-funnel .guarantee-card { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, .14); } .esk-t-funnel .guarantee-card::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; } .esk-t-funnel .guarantee-card h2 { color: #1A1710; } .esk-t-funnel .guarantee-card p { color: #6A6455; } .esk-t-funnel .guarantee-card p b { color: #1A1710; } .esk-t-funnel .guarantee-card .section-eyebrow { color: #2D6A4F; } .esk-t-funnel .guarantee-card .doc-slot { color: #6A6455; border-color: rgba(45, 106, 79, .45); background: rgba(255, 255, 255, .5); } .esk-t-funnel .guarantee-card .doc-slot .tag { color: #2D6A4F; } html[data-theme="light"] .esk-t-funnel .guarantee-card { background: linear-gradient(180deg, var(--cream-card), #F4EFE2); border-color: rgba(70, 60, 35, .14); } /* /go/ money-math card: deep forest (standalone card, no .math-cards wrapper) */ .esk-t-funnel .proof-section .math-card { position: relative; overflow: hidden; background: radial-gradient(400px 260px at 85% -10%, rgba(64,145,108,.45), transparent 60%), linear-gradient(165deg, #1B4332, #12301F); border-color: rgba(45, 106, 79, .4); } .esk-t-funnel .proof-section .math-card::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; } .esk-t-funnel .proof-section .math-card .section-eyebrow { color: #57B98A; } .esk-t-funnel .proof-section .math-card .math-list li { color: #E4EDE6; } .esk-t-funnel .proof-section .math-card .math-list li span { color: #57B98A; } .esk-t-funnel .proof-section .math-card .math-land { color: #FFFFFF; } .esk-t-funnel .proof-section .math-card .math-land strong { color: #B7D9C4; } .esk-t-funnel .proof-section .math-card .source { color: rgba(247, 243, 232, .55); } html[data-theme="light"] .esk-t-funnel .proof-section .math-card { background: radial-gradient(400px 260px at 85% -10%, rgba(64,145,108,.45), transparent 60%), linear-gradient(165deg, #1B4332, #12301F); border-color: rgba(45, 106, 79, .4); } /* p/charlie value-math result card: deep forest green */ .esk-t-funnel .story-grid + .math-card { position: relative; overflow: hidden; background: radial-gradient(420px 280px at 90% -10%, rgba(64, 145, 108, .5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); border-color: rgba(45, 106, 79, 0.4); } .esk-t-funnel .story-grid + .math-card::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .2; mix-blend-mode: overlay; pointer-events: none; } .esk-t-funnel .story-grid + .math-card .section-eyebrow { color: #57B98A; } .esk-t-funnel .story-grid + .math-card .math-list li { color: #E4EDE6; } .esk-t-funnel .story-grid + .math-card .math-list li span { color: #57B98A; } .esk-t-funnel .story-grid + .math-card .math-land { color: #FFFFFF; } .esk-t-funnel .story-grid + .math-card .math-land strong { color: #B7D9C4; } .esk-t-funnel .story-grid + .math-card .source { color: rgba(183, 217, 196, 0.66); } html[data-theme="light"] .esk-t-funnel .story-grid + .math-card { background: radial-gradient(420px 280px at 90% -10%, rgba(64, 145, 108, .5), transparent 60%), linear-gradient(160deg, #1B4332, #143327 65%, #0F2A1F); border-color: rgba(45, 106, 79, 0.4); } /* go/confirmed proof statement: deep forest green */ .esk-t-funnel .reciprocity .proof-tile { position: relative; overflow: hidden; background: radial-gradient(460px 300px at 100% 0%, rgba(64, 145, 108, .5), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); border-color: rgba(45, 106, 79, 0.4); border-left-color: #57B98A; } .esk-t-funnel .reciprocity .proof-tile::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .2; mix-blend-mode: overlay; pointer-events: none; } .esk-t-funnel .reciprocity .proof-tile p { color: #E4EDE6; } .esk-t-funnel .reciprocity .proof-tile strong { color: #B7D9C4; } html[data-theme="light"] .esk-t-funnel .reciprocity .proof-tile { background: radial-gradient(460px 300px at 100% 0%, rgba(64, 145, 108, .5), transparent 55%), linear-gradient(160deg, #1B4332 0%, #143327 60%, #0F2A1F 100%); border-color: rgba(45, 106, 79, 0.4); border-left-color: #57B98A; }