/* toc-v2.css: V2, the European editorial design. Loaded after toc.css and only overrides it. Decisions and reasons: content_v2.py. Palette: paper #f3f0ea, warm white #fbfaf7, forest ink #1d2a24, warm grey #635f57, soft #c9c4b8. Headlines: Source Serif 4 (SIL OFL), body stays Geist. */ @font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } :root { --v2-paper: #f3f0ea; --v2-white: #fbfaf7; --v2-ink: #1d2a24; --v2-grey: #635f57; --v2-soft: #c9c4b8; --v2-line: rgba(29, 42, 36, 0.14); --v2-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif; /* toc.css reads these for everything this build authored */ --toc-ink: var(--v2-ink); --toc-ground: var(--v2-paper); --toc-white: var(--v2-white); --toc-grey: var(--v2-grey); --toc-soft: var(--v2-soft); --toc-line: var(--v2-line); } /* The template routes every colour through six tokens on : re-pointing them recolours the whole template at once, with no markup touched. */ body { --token-40bf9f5f-0c35-42f1-a0eb-e007e12b059e: #1d2a24 !important; /* ink */ --token-55dd0056-b4db-42e4-a60a-feb96b777a88: #f3f0ea !important; /* ground */ --token-5c96facf-bab7-4b55-bdd2-0a23c81ad879: #fbfaf7 !important; /* white */ --token-bc548318-ac90-4239-bbd2-520fc095b7d7: #635f57 !important; /* grey */ --token-b2823a99-e809-47cf-9f80-a4a66e030815: #c9c4b8 !important; /* soft */ --token-c926dece-7486-4b5e-b758-25e942e788ed: rgba(29, 42, 36, 0.14) !important; /* hairline on light */ background: #f3f0ea; } /* ---------------------------------------------------------------- headlines */ h1.framer-text, h2.framer-text, h3.framer-styles-preset-siuzz3, h3.framer-styles-preset-1eg444h { --framer-font-family: var(--v2-serif) !important; --framer-font-family-bold: var(--v2-serif) !important; --framer-font-open-type-features: normal !important; font-family: var(--v2-serif) !important; font-weight: 340 !important; letter-spacing: -0.022em !important; --framer-letter-spacing: -0.022em !important; } h3.framer-styles-preset-siuzz3, h3.framer-styles-preset-1eg444h { font-weight: 400 !important; letter-spacing: -0.01em !important; --framer-letter-spacing: -0.01em !important; } /* display text the template sets inline (its counters and the about page's credentials) */ p[style*="Geist"][style*="letter-spacing:-0.06em"] { font-family: var(--v2-serif) !important; font-weight: 340 !important; letter-spacing: -0.022em !important; } .toc-h2, .toc-acc__q, .toc-cur__list h3, .toc-quote blockquote, .toc-enrol__aside h3, .toc-enrol__price, .toc-wordmark, .toc-drawer .toc-nav__link { font-family: var(--v2-serif); } .toc-h2 { font-weight: 340; letter-spacing: -0.022em; } .toc-acc__q { font-weight: 400; letter-spacing: -0.01em; } .toc-acc--steps .toc-acc__q { font-size: 26px; } .toc-cur__list h3 { font-size: 21px; letter-spacing: -0.01em; } .toc-quote blockquote { font-size: 22px; font-weight: 380; letter-spacing: -0.01em; } .toc-enrol__price { font-weight: 300; letter-spacing: -0.03em; } .toc-enrol__aside h3 { font-size: 22px; letter-spacing: -0.01em; } .toc-wordmark { font-weight: 450; font-size: 21px; letter-spacing: -0.012em; } .toc-drawer .toc-nav__link { font-weight: 360; letter-spacing: -0.02em; } /* --------------------------------------------------------- light openings */ /* Inside a light opening the template's white and ink swap: its headline, paragraph, buttons, arrows and the fade under the photograph all turn to ink on paper together. */ [data-toc-hero="light"] { --token-5c96facf-bab7-4b55-bdd2-0a23c81ad879: #1d2a24 !important; /* white -> ink */ --token-40bf9f5f-0c35-42f1-a0eb-e007e12b059e: #f3f0ea !important; /* ink -> paper */ --token-8ae207ec-8f30-4d84-ba6d-5994417bd82a: rgba(29, 42, 36, 0.16) !important; /* hairline */ --token-b2823a99-e809-47cf-9f80-a4a66e030815: #4b534d !important; /* soft -> dark grey */ } /* paper at the top keeps the header legible, clear photograph in the middle, paper under the type */ [data-toc-hero="light"] [data-framer-name="Linear"] { background: linear-gradient(180deg, rgba(243, 240, 234, 0.7) 0, rgba(243, 240, 234, 0) 150px, rgba(243, 240, 234, 0) 32%, rgba(243, 240, 234, 0.8) 62%, rgba(243, 240, 234, 0.97) 100%) !important; } /* ------------------------------------------------ the home founder card, V2 */ [data-framer-name="Image Background"]:has(.toc-founder) { background: var(--v2-ink); } .toc-founder { position: absolute; top: 0; left: 0; right: 0; z-index: 1; margin: 0; padding: 44px 40px 0; color: var(--v2-white); } .toc-founder blockquote { margin: 0; font-family: var(--v2-serif); font-weight: 340; font-size: 30px; line-height: 1.28; letter-spacing: -0.012em; max-width: 22ch; } .toc-founder figcaption { display: none; } /* the card's own caption names her */ @media (max-width: 1199px) { .toc-founder { padding: 56px 48px 0; } .toc-founder blockquote { font-size: clamp(30px, 3.8vw, 44px); max-width: 21ch; } } @media (max-width: 809px) { .toc-founder { padding: 26px 22px 0; } .toc-founder blockquote { font-size: 19px; line-height: 1.32; max-width: none; } } /* ------------------------------------------------------------ credentials */ /* One row needs about 940px; below that the four credentials go two by two (V1 clips the last one off the right edge at tablet width). */ @media (max-width: 1023px) { .toc-strip ul { padding: 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .toc-strip li { white-space: normal; } .toc-strip li + li::before { display: none; } } /* The course page's "what you receive" chips never wrap in the template, so the longest one (her article's title) runs off a phone screen; on phones a chip may take two lines. */ @media (max-width: 809px) { div:has(> [data-framer-name="Regular Text"]), [data-framer-name="Regular Text"] { width: max-content !important; max-width: 100% !important; } [data-framer-name="Regular Text"] > [data-framer-component-type="RichTextContainer"] { white-space: normal !important; flex: 0 1 auto !important; min-width: 0; } [data-framer-name="Regular Text"] .framer-text { white-space: normal !important; } } /* ------------------------------------------------------------------ footer */ /* V1's footer sat on a dark abstract photograph (hidden in V2); V2's is plain forest ink. */ footer[as="footer"] { background-color: var(--v2-ink) !important; } /* ----------------------------------------------------------- speaker portrait */ /* Her one portrait is small and casual; in monochrome, smaller, it reads as an editorial figure. */ .toc-portrait img { max-width: 520px; filter: grayscale(1) contrast(1.04); }