/* ============================================================ AK brand CSS for augustkjerland.com (systeme.io). Served at the STABLE url (no version query): https://kacperkijno.github.io/august-styles/homepage-live.css Push changes here; they go live within ~10 min (GH Pages edge cache). UNIVERSAL / multi-page design: - Safe to load on EVERY page via one (homepage-live.snippet.html). - Each page's rules are namespaced by a body scope class so they only apply where that class is set. HOMEPAGE = body.ak-home (added by the snippet + homepage-live.js). Hero/Header/Courses/About/Framework below are all scoped to body.ak-home OR to homepage-only systeme IDs, so they never leak to other pages. To extend to another page: give it its own body class (e.g. body.ak-about) in that page's snippet, then add a new block here scoped to it. Single source of truth for ALL homepage CSS. Loaded via ONE in Page custom code → Header (see homepage-live.snippet.html). House pattern (same as sales-page.css / lesson.css): - SELF-CONTAINED: the live page loads only systeme.io's own CSS + marquee.css, NOT tokens.css/core.css. Tokens mirrored below. - Behaviour (card reveal, header scroll state, body class) lives in homepage-live.js — load it alongside this file. - systeme.io sets colour/size INLINE on spans → colour/size/transform overrides need !important. Section IDs are stable WITHIN a page; if you drag-drop rebuild a section in systeme.io the IDs change — re-export and swap them. Map: HERO = #section-e8a2d9b7 (+ body.ak-home header[type="WebsiteHeader"]) COURSES = #row-4332dc25 ABOUT = #section-cd54baff FRAMEWORK = #section-d56a75da ============================================================ */ /* ---------- Tokens (mirror tokens.css for systeme isolation) -- */ body.ak-home { --ak-forest: #1A3C2F; --ak-forest-45: rgba(26, 60, 47, 0.45); --ak-forest-72: rgba(26, 60, 47, 0.72); --ak-cream: #F9F7F1; --ak-cream-soft: #F3F0E7; --ak-terracotta: #B46A3C; --ak-ink: #2D2D2D; --ak-ink-10: rgba(45, 45, 45, 0.10); --ak-ink-72: rgba(45, 45, 45, 0.72); --ak-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ak-serif: "AdobeCaslonPro42448745", Georgia, "Times New Roman", serif; --ak-sans: "NeueHaasDisplay-Roman42448762", "Helvetica Neue", system-ui, sans-serif; } /* ---------- Global button radius (design system) ------------- Normal buttons = 8px (--radius-btn). Tiny nav "Log in" = 4px. Catches every systeme button-XXXX (hero CTAs, Enroll, Waitlist, About, magnet…); loginbutton-XXXX keeps its own 4px below. */ html body.ak-home [id^="button-"] { border-radius: 8px !important; } /* ---------- Global button hover (subtle lift + shadow) ------- Composes with each button's own colour-change hover. */ html body.ak-home [id^="button-"] { transition: transform 200ms var(--ak-ease), box-shadow 200ms var(--ak-ease), background-color 200ms var(--ak-ease), color 200ms var(--ak-ease) !important; } html body.ak-home [id^="button-"]:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(26, 60, 47, 0.16) !important; } /* ---------- Scroll-reveal (framework pillars, testimonials) --- .ak-reveal is added by homepage-live.js (so no-JS = visible); .ak-in plays the rise. animation-delay set inline for stagger. */ @keyframes ak-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } html body.ak-home .ak-reveal { opacity: 0; } html body.ak-home .ak-reveal.ak-in { animation: ak-rise 600ms cubic-bezier(0.2, 0.6, 0.2, 1) both; } @media (prefers-reduced-motion: reduce) { html body.ak-home [id^="button-"] { transition: none !important; } html body.ak-home [id^="button-"]:hover { transform: none !important; box-shadow: none !important; } html body.ak-home .ak-reveal { opacity: 1 !important; } html body.ak-home .ak-reveal.ak-in { animation: none !important; } } /* ============================================================ August Kjerland — Hero section override Target: section#section-e8a2d9b7 on augustkjerland.com (systeme.io) ============================================================ */ /* --- 1. Section: full height, dark base, image stage -------- */ #section-e8a2d9b7 { position: relative !important; min-height: 100vh; min-height: 100svh; /* iOS safe-area */ background-color: #0E2A20 !important; background-image: none !important; /* kill any inline systeme.io bg */ overflow: hidden; isolation: isolate; } /* --- 2. Background photo, mirrored (August → right side) --- */ #section-e8a2d9b7::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("https://d1yei2z3i6k35z.cloudfront.net/16369512/6a06dc552ce096.11526288_3L3A3638.jpg"); background-size: cover; background-position: 30% 50%; /* coords AFTER mirror — keeps August in frame */ background-repeat: no-repeat; transform: scaleX(-1); will-change: transform; } /* --- 3. Directional gradient: dark left (text) → photo right */ #section-e8a2d9b7::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 100deg, rgba(13, 32, 24, 0.75) 0%, rgba(13, 32, 24, 0.65) 40%, rgba(13, 32, 24, 0.30) 65%, rgba(13, 32, 24, 0.05) 90% ); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient( 90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0) 88% ); -webkit-mask-image: linear-gradient( 90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0) 88% ); } /* --- 4. Lift ALL inner content above the photo + gradient -- */ #section-e8a2d9b7 > div { position: relative; z-index: 2; } /* --- 5. Force readable text colors on dark background ------ */ /* Subhead (Ink → cream) */ #section-e8a2d9b7 #text-0ba2b9c9, #section-e8a2d9b7 #text-0ba2b9c9 * { color: rgba(249, 247, 241, 0.88) !important; } /* CTA cluster: tighten the gap between the two hero buttons. systeme lays them out in a 4/8 grid with justify-content:space-between → switch to a left-packed flex row with a small gap. */ body.ak-home #row-e6badb36 { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; } body.ak-home #row-e6badb36 > div[size] { width: auto !important; flex: 0 0 auto !important; } /* Tertiary text link "Or get the free Negotiation Playbook →" styled like index .hero__tertiary (arrow + subtle underline). */ #section-e8a2d9b7 #text-3f555439, #section-e8a2d9b7 #text-3f555439 * { color: rgba(249, 247, 241, 0.82) !important; } #section-e8a2d9b7 #text-3f555439 a { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 300 !important; letter-spacing: 0.01em !important; text-decoration: none !important; border-bottom: 1px solid rgba(249, 247, 241, 0.30) !important; padding-bottom: 2px !important; width: -moz-fit-content !important; width: fit-content !important; transition: color 180ms var(--ak-ease), border-color 180ms var(--ak-ease) !important; } #section-e8a2d9b7 #text-3f555439 a::after { content: "\2192"; /* → */ transition: transform 180ms var(--ak-ease) !important; } #section-e8a2d9b7 #text-3f555439 a:hover { color: #F9F7F1 !important; border-bottom-color: #F9F7F1 !important; } #section-e8a2d9b7 #text-3f555439 a:hover::after { transform: translateX(3px) !important; } /* Rating block (Ink → cream + softer subline) */ #section-e8a2d9b7 #text-f5bd235c, #section-e8a2d9b7 #text-f5bd235c * { color: #F9F7F1 !important; } #section-e8a2d9b7 #text-f5bd235c span { color: rgba(249, 247, 241, 0.70) !important; } /* --- 6. Mobile: shift focus + vertical gradient ------------ */ @media (max-width: 760px) { #section-e8a2d9b7 { min-height: 90vh; min-height: 90svh; } #section-e8a2d9b7::before { background-position: 65% 35%; /* keep August + slide visible in 9:16 */ } #section-e8a2d9b7::after { background: linear-gradient( 180deg, rgba(13, 32, 24, 0.55) 0%, rgba(13, 32, 24, 0.65) 35%, rgba(13, 32, 24, 0.85) 100% ); } } /* --- 7. Reduce motion: keep flip, no animations ------------ */ @media (prefers-reduced-motion: reduce) { #section-e8a2d9b7::before { will-change: auto; } } /* ============================================================ August Kjerland — Header transform on scroll Target:
on systeme.io (.is-scrolled toggled by homepage-live.js) ============================================================ */ /* --- 1. Fixed positioning across the page ------------------ */ body.ak-home header[type="WebsiteHeader"] { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background: transparent !important; border-bottom: 1px solid transparent; transition: background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease, padding 220ms ease, box-shadow 220ms ease; } /* --- 2. DEFAULT STATE (over the dark hero) ----------------- */ /* Logo: invert PNG to white silhouette */ body.ak-home header[type="WebsiteHeader"] #websitelogo-2841540c img { filter: brightness(0) invert(1); transition: filter 220ms ease, height 220ms ease; } /* Main menu links: cream */ body.ak-home header[type="WebsiteHeader"] #menu-c51d8fe2 a, body.ak-home header[type="WebsiteHeader"] #side-menu-c51d8fe2 a { color: #F9F7F1 !important; letter-spacing: 0.04em !important; transition: color 220ms ease, opacity 220ms ease; opacity: 0.92; } body.ak-home header[type="WebsiteHeader"] #menu-c51d8fe2 a:hover, body.ak-home header[type="WebsiteHeader"] #side-menu-c51d8fe2 a:hover { opacity: 1; } /* "Home page" span (sr label for logo, in case visible) */ body.ak-home header[type="WebsiteHeader"] #websitelogo-2841540c span { color: #F9F7F1 !important; } /* Login button: outline cream-on-dark */ body.ak-home header[type="WebsiteHeader"] #loginbutton-f0aa2f20 { background: transparent !important; color: #F9F7F1 !important; border: 1px solid rgba(249, 247, 241, 0.5) !important; border-radius: 4px !important; /* tiny nav button = 4px (--radius-sm) */ transition: background 220ms ease, color 220ms ease, border-color 220ms ease; } body.ak-home header[type="WebsiteHeader"] #loginbutton-f0aa2f20:hover { background: #F9F7F1 !important; color: #1A3C2F !important; border-color: #F9F7F1 !important; } /* Mobile burger lines: cream */ body.ak-home header[type="WebsiteHeader"] .sc-gEkIjA span { background-color: #F9F7F1 !important; transition: background-color 220ms ease; } /* Side-menu (mobile drawer): keep open-state working */ body.ak-home header[type="WebsiteHeader"] #side-menu-c51d8fe2 { /* When opened, force a solid cream panel so links read on light bg */ background: rgba(249, 247, 241, 0.98) !important; backdrop-filter: blur(10px); } body.ak-home header[type="WebsiteHeader"] #side-menu-c51d8fe2 a { color: #2D2D2D !important; /* dark text inside the drawer */ opacity: 1; } /* --- 3. SCROLLED STATE (after passing the hero) ------------ */ body.ak-home header[type="WebsiteHeader"].is-scrolled { background: rgba(249, 247, 241, 0.94) !important; backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: rgba(45, 45, 45, 0.10); box-shadow: 0 1px 12px rgba(26, 60, 47, 0.04); } /* Logo: back to original (dark) + slight shrink */ body.ak-home header[type="WebsiteHeader"].is-scrolled #websitelogo-2841540c img { filter: none; height: 44px !important; max-height: 44px; } body.ak-home header[type="WebsiteHeader"].is-scrolled #websitelogo-2841540c span { color: #2D2D2D !important; } /* Menu links: ink */ body.ak-home header[type="WebsiteHeader"].is-scrolled #menu-c51d8fe2 a { color: #2D2D2D !important; opacity: 1; } /* "Consulting" (last link, has its own class) — promote to terracotta accent */ body.ak-home header[type="WebsiteHeader"].is-scrolled #menu-c51d8fe2 a:last-of-type { color: #B46A3C !important; } /* Login button: solid Forest, cream text */ body.ak-home header[type="WebsiteHeader"].is-scrolled #loginbutton-f0aa2f20 { background: #1A3C2F !important; color: #F9F7F1 !important; border-color: #1A3C2F !important; } body.ak-home header[type="WebsiteHeader"].is-scrolled #loginbutton-f0aa2f20:hover { background: #122B23 !important; border-color: #122B23 !important; } /* Mobile burger lines: ink */ body.ak-home header[type="WebsiteHeader"].is-scrolled .sc-gEkIjA span { background-color: #2D2D2D !important; } /* --- 4. Reduced motion: keep state, skip transitions ------- */ @media (prefers-reduced-motion: reduce) { body.ak-home header[type="WebsiteHeader"], body.ak-home header[type="WebsiteHeader"] *, body.ak-home header[type="WebsiteHeader"]::before, body.ak-home header[type="WebsiteHeader"]::after { transition-duration: 0.01ms !important; } } /* ============================================================ Courses cards — border, shadow, hover, entrance reveal Target: #row-4332dc25 > 3 columns (size=4) Middle column = How to Pitch = featured (.is-visible toggled by homepage-live.js) ============================================================ */ /* === Base card visual (all 3) ============================== */ #row-4332dc25 > div[size="4"] > div { background: #F9F7F1; border: 1px solid rgba(45, 45, 45, 0.10); border-radius: 4px; height: 100%; position: relative; overflow: hidden; box-shadow: 0 2px 14px rgba(26, 60, 47, 0.04); /* Entrance state — invisible until revealed */ opacity: 0; transform: translateY(24px); /* Combined transitions: enter + hover */ transition: opacity 600ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.6, 0.2, 1), border-color 220ms cubic-bezier(0.2, 0.6, 0.2, 1); } /* Stagger entrance — only opacity + transform get a delay */ #row-4332dc25 > div[size="4"]:nth-child(1) > div { transition-delay: 0ms, 0ms, 0ms, 0ms; } #row-4332dc25 > div[size="4"]:nth-child(2) > div { transition-delay: 120ms, 120ms, 0ms, 0ms; } #row-4332dc25 > div[size="4"]:nth-child(3) > div { transition-delay: 240ms, 240ms, 0ms, 0ms; } /* Revealed state — set by IntersectionObserver in homepage-live.js */ #row-4332dc25 > div[size="4"] > div.is-visible { opacity: 1; transform: translateY(0); } /* === Hover (only after revealed) =========================== */ #row-4332dc25 > div[size="4"] > div.is-visible:hover { border-color: rgba(26, 60, 47, 0.30); box-shadow: 0 12px 32px rgba(26, 60, 47, 0.10); transform: translateY(-4px); } /* === Featured: How to Pitch (middle column) ================ */ #row-4332dc25 > div[size="4"]:nth-child(2) > div { border-color: rgba(26, 60, 47, 0.30); box-shadow: 0 8px 32px rgba(26, 60, 47, 0.09); } /* Terracotta hairline at top */ #row-4332dc25 > div[size="4"]:nth-child(2) > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #B46A3C; z-index: 2; } #row-4332dc25 > div[size="4"]:nth-child(2) > div.is-visible:hover { border-color: rgba(26, 60, 47, 0.55); box-shadow: 0 16px 44px rgba(26, 60, 47, 0.14); transform: translateY(-6px); /* lifts slightly higher than siblings */ } /* === Reduced motion: skip entrance + lift, keep border/shadow */ @media (prefers-reduced-motion: reduce) { #row-4332dc25 > div[size="4"] > div { opacity: 1; transform: none; transition: box-shadow 220ms ease, border-color 220ms ease; } #row-4332dc25 > div[size="4"] > div.is-visible:hover { transform: none; } } /* ============================================================ ABOUT — #section-cd54baff row-a9fc4063 > row-80b09385 [ size6 = portrait | size6 = body ] body stack: text-0a285057(eyebrow) headline-9045c554(h2) text-15bc2cb3(paragraphs) text-bc78e4a1(quote) button-4dceb9ce(CTA) ============================================================ */ /* Section surface — soft cream */ html body.ak-home #section-cd54baff { background: var(--ak-cream-soft) !important; } /* --- Portrait: rounded + soft shadow + location badge ------ */ html body.ak-home #image-8fa6b86d { border-radius: 4px !important; box-shadow: 0 2px 16px rgba(26, 60, 47, 0.10); display: block; } /* Badge anchored to the media column (verify alignment; remove if it drifts) */ html body.ak-home #row-80b09385 > div[size="6"]:first-child { position: relative; } html body.ak-home #row-80b09385 > div[size="6"]:first-child::after { content: "Kristiansand \00B7 2026"; position: absolute; left: 18px; bottom: 18px; font-family: var(--ak-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ak-cream); background: var(--ak-forest-72); padding: 8px 12px; border-radius: 2px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; } /* --- Eyebrow "About" — match OUR COURSES (16px terracotta, no rule) -- */ html body.ak-home #text-0a285057, html body.ak-home #text-0a285057 p, html body.ak-home #text-0a285057 span { letter-spacing: 0 !important; text-transform: uppercase !important; color: var(--ak-terracotta) !important; } /* --- Body paragraphs -------------------------------------- */ html body.ak-home #text-15bc2cb3, html body.ak-home #text-15bc2cb3 p, html body.ak-home #text-15bc2cb3 span { color: var(--ak-ink-72) !important; line-height: 1.6 !important; } /* --- Pull quote: Forest italic + hanging open-quote -------- */ html body.ak-home #text-bc78e4a1 { position: relative; padding-left: 0.65em !important; margin: 32px 0 !important; } html body.ak-home #text-bc78e4a1 p, html body.ak-home #text-bc78e4a1 span { color: var(--ak-forest) !important; font-style: italic !important; line-height: 1.25 !important; } html body.ak-home #text-bc78e4a1::before { content: "\201C"; position: absolute; left: -0.05em; top: -0.18em; font-family: var(--ak-serif); font-style: normal; font-size: 2.4em; line-height: 1; color: var(--ak-terracotta); opacity: 0.5; pointer-events: none; } /* --- CTA: outline button (forest), fills on hover --------- */ html body.ak-home #button-4dceb9ce { background: transparent !important; color: var(--ak-forest) !important; border: 1px solid var(--ak-forest-45) !important; border-radius: 8px !important; letter-spacing: 0.04em; transition: background 180ms var(--ak-ease), color 180ms var(--ak-ease), border-color 180ms var(--ak-ease); } html body.ak-home #button-4dceb9ce * { color: inherit !important; } html body.ak-home #button-4dceb9ce:hover { background: var(--ak-forest) !important; color: var(--ak-cream) !important; border-color: var(--ak-forest) !important; } /* ============================================================ THE FRAMEWORK — #section-d56a75da row-306c7c7c head [ size6 eyebrow+h2 | size6 intro ] row-feedd8db pillar 01 [ num+lead | title+body ] row-a1582001 pillar 02 row-47647d37 pillar 03 row-c4a521c7 flow strip (Idea -> Structure -> ...) ============================================================ */ /* Section surface — cream */ html body.ak-home #section-d56a75da { background: var(--ak-cream) !important; } /* --- Eyebrow "The Framework" — match OUR COURSES (no rule) -- */ html body.ak-home #text-4614e520, html body.ak-home #text-4614e520 p, html body.ak-home #text-4614e520 span { letter-spacing: 0 !important; text-transform: uppercase !important; color: var(--ak-terracotta) !important; } /* --- Head row: bottom-align the intro, add breathing room -- */ html body.ak-home #row-306c7c7c { align-items: flex-end; margin-bottom: 24px !important; } html body.ak-home #text-ef252a6d, html body.ak-home #text-ef252a6d p, html body.ak-home #text-ef252a6d span { color: var(--ak-ink-72) !important; line-height: 1.6 !important; } /* --- Pillars: row spacing + dividers (lines) are set in systeme.io. LEFT column (number + lead) top-aligns with the grid row. ----------- */ html body.ak-home #row-feedd8db > div[size="6"], html body.ak-home #row-a1582001 > div[size="6"], html body.ak-home #row-47647d37 > div[size="6"] { align-self: flex-start !important; } /* RIGHT column (title + body): stretch to the full row height and push the title to the TOP (level with the number) and the body to the BOTTOM. systeme makes it a flex column, so space-between does it. */ html body.ak-home #row-feedd8db > div[size="6"]:nth-child(2), html body.ak-home #row-a1582001 > div[size="6"]:nth-child(2), html body.ak-home #row-47647d37 > div[size="6"]:nth-child(2) { align-self: stretch !important; justify-content: space-between !important; } /* Big serif numbers → terracotta */ html body.ak-home #text-8b720090, html body.ak-home #text-8b720090 *, html body.ak-home #text-495af7cd, html body.ak-home #text-495af7cd *, html body.ak-home #text-70cc2123, html body.ak-home #text-70cc2123 * { color: var(--ak-terracotta) !important; line-height: 0.9 !important; } /* Pillar titles → bold, widely tracked uppercase forest label */ html body.ak-home #text-efd6b3d5, html body.ak-home #text-efd6b3d5 *, html body.ak-home #text-e988dc01, html body.ak-home #text-e988dc01 *, html body.ak-home #text-bd7b0d80, html body.ak-home #text-bd7b0d80 * { font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--ak-forest) !important; } /* Pillar bodies → muted ink */ html body.ak-home #text-2275655a, html body.ak-home #text-2275655a *, html body.ak-home #text-b6d1517e, html body.ak-home #text-b6d1517e *, html body.ak-home #text-e65755ec, html body.ak-home #text-e65755ec * { color: var(--ak-ink-72) !important; line-height: 1.65 !important; } /* --- Flow strip: text only (box bg/border/padding set in systeme.io) -- */ html body.ak-home #text-ae2ae713 { text-align: center; } html body.ak-home #text-ae2ae713 p, html body.ak-home #text-ae2ae713 span { font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--ak-forest) !important; } /* ============================================================ LEAD MAGNET — "The Cross-Cultural Negotiation Playbook" #section-22d30859 (bg cream-soft, set in systeme.io) row-6ed08c45 [ size6 = PDF cover image | size6 = text + CTA ] text-0654e64d(eyebrow "Free Resource") headline-502539e5(h2) text-afafbe98(desc) button-aab9edaf(CTA) ============================================================ */ /* Eyebrow "Free Resource" — match OUR COURSES (terracotta, no rule) */ html body.ak-home #text-0654e64d, html body.ak-home #text-0654e64d p, html body.ak-home #text-0654e64d span { letter-spacing: 0 !important; text-transform: uppercase !important; color: var(--ak-terracotta) !important; } /* Description — muted ink */ html body.ak-home #text-afafbe98, html body.ak-home #text-afafbe98 p, html body.ak-home #text-afafbe98 span { color: var(--ak-ink-72) !important; line-height: 1.6 !important; } /* Benefits list → numbered 01–05 + hairline dividers (match index mockup). systeme renders a