/* fonts: Carlito, hosted on the site (SIL Open Font License) */ @font-face { font-family: 'Carlito'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/carlito-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Carlito'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/carlito-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Carlito'; font-style: italic; font-weight: 700; font-display: swap; src: url('../assets/fonts/carlito-700-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Carlito'; font-style: italic; font-weight: 700; font-display: swap; src: url('../assets/fonts/carlito-700-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/carlito-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/carlito-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/carlito-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/carlito-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* end fonts */ /* ===================================================================== STRAT.EXE — DESIGN SYSTEM One stylesheet, in four layers. Pages are built only from these parts. 1. TOKENS colour, type, space, radius, elevation, motion, layout 2. UI KIT the basic elements every component is made of (type, buttons, links, eyebrow, chips, icons, numerals, lists, pills, form controls, choice tiles, modal, brand lockup) 3. CHROME site frame shared by every page (nav, menu panel, footer, scroll line) — not content components 4. COMPONENTS the 15 reusable content components (prefix c-) C01 c-hero C06 c-course C11 c-quote C02 c-heading C07 c-compare C12 c-cta C03 c-card C08 c-timeline C13 c-form C04 c-feature C09 c-logos C14 c-model C05 c-steps C10 c-stats C15 c-article The living reference for all of this is ui-kit.html. ===================================================================== */ /* ===================================================================== 1. TOKENS ===================================================================== */ :root { /* colour: brand */ --orange: #E8670A; /* Strat.exe orange: accents, primary actions, the execution line */ --orange-dark: #CE5A08; /* hover / pressed, small orange text on light surfaces */ --orange-soft: rgba(232, 103, 10, .12); --green: #2FB59B; /* The Strat.egy Network accent ("free / priceless", WhatsApp): the original teal-green */ --teal: #008E40; /* sustainability course accent only: the green of its brochure */ --blue: #0D71BA; /* master course accent only: the blue of its brochure */ /* colour: neutrals (dark-first) */ --black: #000; --ground: #0A0A0A; /* page background */ --ground-alt: #0F0F0F; /* alternate section band */ --surface: #141414; /* cards, panels */ --surface-2: #1B1B1B; /* raised / hover surface, table head */ --field: #0E0E0E; /* form fields */ --charcoal: #2B2B2B; --mid: #595959; --grey: #9A9A9A; /* secondary text */ --muted: #C9C9C9; /* body copy on dark */ --offwhite: #F5F5F5; /* light text, article paper */ --white: #FFFFFF; /* headings */ --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .22); --error: #FF8A65; /* type */ --font: Calibri, Carlito, "Segoe UI", Lato, system-ui, sans-serif; --fs-display: clamp(44px, 6.4vw, 88px); /* home hero */ --fs-h1: clamp(40px, 5.6vw, 72px); --fs-h2: clamp(32px, 3.8vw, 48px); --fs-h3: clamp(22px, 2vw, 26px); --fs-title: 22px; /* card titles */ --fs-lead: clamp(18px, 1.6vw, 21px); --fs-eyebrow: clamp(20px, 1.9vw, 24px); --fs-body: 18px; --fs-sm: 15px; --fs-xs: 13px; --lh-tight: 1.08; --lh-body: 1.6; /* space (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --section-y: clamp(72px, 9vw, 120px); --section-y-tight: clamp(48px, 6vw, 72px); /* radius */ --r-sm: 10px; /* buttons, fields */ --r-md: 14px; /* inner media, small tiles */ --r-card-sm: 16px; /* compact cards */ --r-card: 20px; /* cards, panels, media frames */ --r-xl: 24px; /* banners */ --r-pill: 999px; /* elevation */ --sh-1: 0 10px 24px rgba(0, 0, 0, .3); --sh-2: 0 30px 70px rgba(0, 0, 0, .55); --sh-glow: 0 10px 24px rgba(232, 103, 10, .3); /* motion */ --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: .18s; --t-med: .35s; /* photos: black and white, lifted a little so they don't read as darkened */ --photo: grayscale(1) brightness(1.12) contrast(1.04); /* layout */ --max: 1200px; --gutter: 24px; --nav-h: 68px; --r: var(--r-card-sm); /* legacy alias */ } @media (max-width: 767px) { :root { --gutter: 16px; --nav-h: 58px; } } /* ===================================================================== BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); scrollbar-color: #3a3a3a var(--ground); } body { margin: 0; background: var(--ground); color: var(--offwhite); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } em, .i { font-style: italic; } [hidden] { display: none !important; } ::selection { background: var(--orange); color: var(--white); } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--white); color: #0A0A0A; font-weight: 700; border-radius: 8px; text-decoration: none; } .skip:focus { top: 12px; } /* layout primitives */ .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-y) 0; } .section--tight { padding: var(--section-y-tight) 0; } .section--alt { background: var(--ground-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .grid > * { min-width: 0; } .grid--2 { --cols: 2; } .grid--3 { --cols: 3; } .grid--4 { --cols: 4; } .grid--5 { --cols: 5; } .grid--tight { gap: var(--s-4); } .stack { display: grid; gap: var(--gap, var(--s-4)); align-content: start; } @media (max-width: 900px) { .grid--3, .grid--4 { --cols: 2; } .grid--5 { --cols: 3; } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { --cols: 1; } .grid--5 { --cols: 2; } } /* ===================================================================== 2. UI KIT ===================================================================== */ /* --- type --- */ .h1 { font-size: var(--fs-h1); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; color: var(--white); } .h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 700; color: var(--white); } .h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; color: var(--white); } .lead { font-size: var(--fs-lead); color: var(--muted); max-width: 680px; } .fine { color: var(--grey); font-size: 14px; } .o { color: var(--orange); } .g { color: var(--green); } .grey { color: var(--grey); } .sx { font-style: italic; text-transform: none !important; } /* Strat.exe is always italic */ .prose p { color: var(--offwhite); font-size: var(--fs-body); line-height: 1.75; } .prose p + p { margin-top: 1.1em; } /* --- eyebrow: the small orange label above a heading --- */ .eyebrow { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--orange); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .01em; line-height: 1.2; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--orange); flex: none; margin-top: calc(.6em - 1px); } /* level with the first line, also when the label wraps */ /* --- buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--r-sm); border: 0; cursor: pointer; font-weight: 700; font-size: 19px; /* ≥19px bold: white on orange passes AA as large text */ text-decoration: none; line-height: 1.1; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast); } .btn--primary { background: var(--orange); color: var(--white); } .btn--primary:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: var(--sh-glow); } .btn--ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, .3); } .btn--ghost:hover { border-color: var(--orange); background: var(--orange-soft); } .btn--quiet { background: transparent; color: var(--charcoal); border: 1px solid #ccc; } /* on light paper */ .btn--sm { padding: 9px 16px; } .btn--block { width: 100%; } .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .btn .arr { transition: transform var(--t-fast) var(--ease); } .btn:hover .arr { transform: translateX(3px); } .btn .wa { width: 22px; height: 22px; } .btn-group { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* --- text link with arrow --- */ .link { color: var(--white); font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; padding: 8px 0; margin: -8px 0; } /* padding = a bigger tap area without changing the layout */ .link .arr { color: var(--orange); transition: transform var(--t-fast) var(--ease); } .link:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 5px; } .link:hover .arr { transform: translateX(4px); } .links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); } /* --- chips (labels) and tags (category text) --- */ .chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; justify-self: start; padding: 4px 10px; border-radius: var(--r-pill); background: var(--orange-soft); color: var(--orange); font-size: var(--fs-xs); font-weight: 700; } .chip--outline { background: transparent; border: 1px solid rgba(232, 103, 10, .55); } .chip--neutral { background: transparent; border: 1px solid var(--line); color: var(--muted); } .chip--wa { background: rgba(47, 181, 155, .1); border: 1px solid rgba(47, 181, 155, .45); color: var(--green); } /* WhatsApp group label */ .chip--lg { padding: 8px 14px; font-size: var(--fs-sm); } .chip--teal { background: rgba(0, 142, 64, .14); color: var(--teal); } .chip--date { background: transparent; border: 1px solid var(--line-strong); color: var(--offwhite); } /* next course date */ .chip--date[data-next-date] { border-color: rgba(232, 103, 10, .55); color: var(--white); } .chip .wa { width: 20px; height: 20px; } .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .tag { color: var(--orange); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* --- icons (Strat.exe set, drawn as masks in currentColor) --- */ .ico { display: inline-block; width: 24px; height: 24px; background: currentColor; flex: none; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .ico--target { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Target %E2%80%94 Strategic Initiatives'%3E %3Ctitle%3ETarget %E2%80%94 Strategic Initiatives%3C/title%3E %3Ccircle cx='12' cy='12' r='9'/%3E %3Ccircle cx='12' cy='12' r='5.5'/%3E %3Ccircle cx='12' cy='12' r='2'/%3E %3C/svg%3E"); } .ico--graduationcap { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Graduation cap %E2%80%94 Training / Capability'%3E %3Ctitle%3EGraduation cap %E2%80%94 Training / Capability%3C/title%3E %3Cpath d='M2 9l10-4 10 4-10 4-10-4z'/%3E %3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5'/%3E %3Cline x1='22' y1='9' x2='22' y2='14'/%3E %3C/svg%3E"); } .ico--megaphone { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Megaphone %E2%80%94 Communication'%3E %3Ctitle%3EMegaphone %E2%80%94 Communication%3C/title%3E %3Cpath d='M3 10v4l3 1 11 5V4L6 9l-3 1z'/%3E %3Cpath d='M17 8a4 4 0 0 1 0 8'/%3E %3Cpath d='M6 15v4h3v-3'/%3E %3C/svg%3E"); } .ico--compass { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Compass %E2%80%94 Strategy / Vision'%3E %3Ctitle%3ECompass %E2%80%94 Strategy / Vision%3C/title%3E %3Ccircle cx='12' cy='12' r='9'/%3E %3Cpath d='M16.24 7.76 13.5 13.5 7.76 16.24 10.5 10.5z'/%3E %3C/svg%3E"); } .ico--scorecard { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Bar chart %E2%80%94 Balanced Scorecard'%3E %3Ctitle%3EBar chart %E2%80%94 Balanced Scorecard%3C/title%3E %3Cline x1='3' y1='20' x2='21' y2='20'/%3E %3Crect x='5' y='11' width='3.2' height='9'/%3E %3Crect x='10.4' y='7' width='3.2' height='13'/%3E %3Crect x='15.8' y='14' width='3.2' height='6'/%3E %3C/svg%3E"); } .ico--users { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Users %E2%80%94 People / Team'%3E %3Ctitle%3EUsers %E2%80%94 People / Team%3C/title%3E %3Ccircle cx='9' cy='8' r='3.5'/%3E %3Cpath d='M2.5 20c0-3 2.7-5.5 6.5-5.5s6.5 2.5 6.5 5.5'/%3E %3Ccircle cx='17' cy='9' r='2.5'/%3E %3Cpath d='M14.5 14.5c2.7 0 5 1.5 5 4'/%3E %3C/svg%3E"); } .ico--usercheck { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='User check %E2%80%94 Personal Scorecard'%3E %3Ctitle%3EUser check %E2%80%94 Personal Scorecard%3C/title%3E %3Ccircle cx='9' cy='7.5' r='3.5'/%3E %3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E %3Cpath d='M16 11.5l2 2 4-4'/%3E %3C/svg%3E"); } .ico--globe { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Globe %E2%80%94 Strategic Altitude'%3E %3Ctitle%3EGlobe %E2%80%94 Strategic Altitude%3C/title%3E %3Ccircle cx='12' cy='12' r='9'/%3E %3Cellipse cx='12' cy='12' rx='9' ry='3.5'/%3E %3Cline x1='12' y1='3' x2='12' y2='21'/%3E %3C/svg%3E"); } .ico--workflow { --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' aria-label='Workflow %E2%80%94 Process'%3E %3Ctitle%3EWorkflow %E2%80%94 Process%3C/title%3E %3Crect x='3' y='3' width='6' height='5' rx='1'/%3E %3Crect x='15' y='9' width='6' height='5' rx='1'/%3E %3Crect x='3' y='16' width='6' height='5' rx='1'/%3E %3Cpath d='M9 5.5h3a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H9'/%3E %3Cpath d='M14 11.5L9 18.5'/%3E %3C/svg%3E"); } .ico--mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E"); } .ico--calendar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); } .ico--africa { --icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACGCAMAAADAZWmdAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAzUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKMFRskAAAARdFJOUwAQMEBQj6+An8/v/99wIL9g5sNdogAAAAlwSFlzAAAXEQAAFxEByibzPwAABCRJREFUeF7tm0uWrCAMQMW/YKn7X20fERRSCgETqwfe2euDmMo/yCuKl5eXl6cQZVU3bSXg35+i6vpBKiWVRv5GDtEN2/stI1zBSiU/kxCF6IwWHGq4lpMWvn1nnOBaRqpvNVhKuJYP0VyLoXq4mo1phu/2GLvKX88UQCIsxka72OXLoAYW1/3Ad55j3l3rf7QLvVJG+MZzZKcDZ5d6bLW9qk+zq+oeAR8FjEtRdP5fth/RwD1zwMuhlALJ1iDhnhlUcNN0WnU/1wUyGJp6+MBtEwlmMDRj2cKNk6CRQil1Ux2+799A3vIPCtcw3ClCNZ0Y6k7AXLccGeQrpKRUR75CxHlmzCZXIWSxYshM7ROtVbLb6R5ucxuZ08iWcBcCciwj4CYUgDYWBb1d8qrMAjchoIMvQUDQ/Xwxw5cg+DcOAvcgIV0QFn0olTzVbOMQOcmjDGnRP0h1VUFeXgyJHsJkluRkxlFfDENSR8Rll9TCixzys0gRhKPO7aR0AByFzuL0qmI7NQnAUeksW/SKuptlPJI5TdN8mtmEQkwfRYE5n7sNwleoR5hTMM3RBB+iB/e1gqnaOWDU8YCL4NRxdYgrh5ko3+KrXgnfKOd6/REklTCpHWm2Z6SOnqGzmiQYxFMKzfrTZzl/9Osn50ExrPaBWyeBdNIYq2h3GiaS025Lfj3ssbGCIrsczqRi5BpGbg5Hx2mCiUL/xSqrO2iJlYErQXLu/fge6MXADFyrDUwy1DCIgXGPtdNxD4VZPoAjzgXWiwiOXRKTOZZ4/pDT5CxiEgNlGQdJHrA7SZFLVNpOCbTTEgg5MoTKTqCdHkHa51RHyDISxBNHyB4EesTKz6S8cgSSe+/HdVJDmk5AIaVnNO7LVbCpP5CeFw/wQWKu5fBvQCCm6lsE5PBJPshN4zpyN3rrycwOEutS+30Br0ICKVXT7vns3g2MGDF9tPuBLK8cMf+Y9+85vhz4eR9FtBk66ownR51w8IAhPm4vdokrhxhoE1vMO1ycCiPWYKZsSK7L3DeHPoSeJSjlQGdT57qBuV9MeQ8RMTtYpPXLBX2ajCeWxA5mOzTYu0ekaR6rD2dmsMMGabgg/cP9IGbHXdKjKdzZlHf+Y58gnqoQCvEnBmNK9HEykngiA+XNPEBe9KKJHTTqJvMRmwUTul6iMP09tVnCM+6GV1hN2JKbBREy3n06E7a0RV8TzWWeHEYflEndkCbH1jcxmCWaQqT3mXaTmqV1dw8mv5AdOBWrlZK0Od0SctSTqxaCsvFwCTkIzy+/IOAguXdgswg4yKP6ENcKiV5pIOXyUOhRdVxXf47PC2FOLcN2oH7NaQ5hyZoRThTytHNovhVC/HUUyVdSfd5HNTB0aT9Z4/Ejdx9mn+doU2Wrr4n8CNEq+cP/sf3y8vLyH/gDazUWayllBNQAAAAASUVORK5CYII="); } .ico--team-idea { --icon: url("data:image/png;base64,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"); } .ico--speaker { --icon: url("data:image/png;base64,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"); } .ico--chess { --icon: url("data:image/png;base64,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"); } .ico--rocket { --icon: url("data:image/png;base64,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"); } .ico--presentation { --icon: url("data:image/png;base64,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"); } .ico--hand { --icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACGCAMAAADAZWmdAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAzUExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKMFRskAAAARdFJOUwBAj8+vgBD/71Aw3yBgn79wvHIx6gAAAAlwSFlzAAAXEQAAFxEByibzPwAAAgpJREFUeF7t2Nt2rCAQBNAgCqgo/v/XZo2XNdIDSqMy81D7USNWtClzzt8fAAAAAAAAAAAAAECIqGTdKHq0NCH1i2npiaJUZeYYWuuOnitnl0Lrnp4tpu3fKbTWlp4vYx2Mt69MiK1Iiq/k8AZjZYpvXTX4g7Go6I897WMwZrLw4+hGmmDmsneLsmJqTrX++qHBeM3GlPs0bHjBgN1vGh6MC6UuXGqK1122IOHB0NplPozYejFuvsrW9PjCTHT9NNwUW2NbenQhs75vKiPF2pSKHp1VOe9ETTkptsamR1/vZKC3SKCa8LSfi72XnNJQDWOL+OS8QEsP55RGpH+SGDEvQbdLzy+N9NIKkMv9LFmCXxriPIWsY6p2vV/jXcAvDTGeptC6oVd96LxV2KUh3P7yqNMcfgxuaSSX1lmObr/jmV81TnUe5/A3G6801JCe4jCH8secVxrc6uxdhCRDvm7iNBeq88TIeBhXqvMYpzQuVecxzoCqx1IwS6Ojl9+EWRpPBeG8k9UDQXilsfG/BTdgf9VWNwfhlIbvziCOO6B7SUFML+tqmoahjRP8+fScBDFynLrsx81xEMS4oUiERSyI2/7gLCUUxDSZW/CKjyB5dXSdH8SMF2c/3/7fPrmleIt3EN5X+3ZrEPZX+3ZzEPm1yXizpvh/sYbZ+idiAAAAAAAAAAAAAMBv+AcjK0nZWF9w+QAAAABJRU5ErkJggg=="); } .icon-badge { width: 54px; height: 54px; border-radius: var(--r-md); background: var(--orange-soft); display: grid; place-items: center; color: var(--orange); flex: none; } .icon-badge .ico { width: 28px; height: 28px; } .icon-ring { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange); } .icon-ring .ico { width: 26px; height: 26px; } .wa { width: 20px; height: 20px; flex: none; } .wa--title { display: inline-block; width: .9em; height: .9em; vertical-align: -.08em; margin-left: .15em; color: var(--green); } /* WhatsApp symbol after "Join The Strat.egy Network" */ /* --- outlined numeral (01, 02 …) --- */ .num { font-size: 52px; line-height: .9; font-weight: 700; font-style: italic; color: transparent; -webkit-text-stroke: 1.5px rgba(232, 103, 10, .75); } .num--xl { font-size: clamp(64px, 8vw, 120px); line-height: .8; -webkit-text-stroke-color: rgba(232, 103, 10, .7); } /* --- lists --- */ .ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .ticks li { position: relative; padding-left: 30px; color: var(--offwhite); font-size: 17px; line-height: 1.5; } .ticks li::before { content: ""; position: absolute; left: 0; top: .25em; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-soft); border: 1.5px solid var(--accent, var(--orange)); } .ticks li::after { content: ""; position: absolute; left: 7px; top: calc(.25em + 4px); width: 5px; height: 9px; border: solid var(--accent, var(--orange)); border-width: 0 2px 2px 0; transform: rotate(45deg); } .dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--offwhite); } .dots li { display: flex; gap: 10px; } .dots li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--orange); } /* --- pills: one style for filters, selectors and the in-page sub-navigation --- */ .pills { display: flex; flex-wrap: wrap; gap: var(--s-2); } .pill { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--offwhite); font-size: 16px; font-weight: 400; text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); } .pill:hover { border-color: var(--orange); } .pill[aria-pressed="true"], .pill[aria-current="true"], .pill.is-current { background: rgba(232, 103, 10, .16); color: var(--white); border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); } /* --- form controls --- */ .field { display: grid; gap: 8px; align-content: start; } .field > .fine { margin-top: -2px; font-size: 13px; color: var(--muted); } .field label, .label { font-size: var(--fs-sm); font-weight: 700; color: var(--white); } .field label .opt, .opt { color: var(--grey); font-weight: 400; } input, select, textarea { width: 100%; padding: 13px 14px; border-radius: var(--r-sm); background: var(--field); border: 1px solid rgba(255, 255, 255, .16); color: var(--white); font-size: 16px; transition: border-color .15s, box-shadow .15s; } textarea { min-height: 130px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 103, 10, .3); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; } .err { display: none; color: var(--error); font-size: 14px; } .is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--error); } .is-invalid .err { display: block; } .full { grid-column: 1 / -1; } /* spam trap: a field kept off-screen (not display:none, which some bots skip); people never see or reach it */ .hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* checkbox option (newsletter opt-in, multi-choice) */ .check-opt { display: flex; gap: 10px; align-items: flex-start; color: var(--offwhite); cursor: pointer; line-height: 1.4; font-size: var(--fs-sm); } .check-opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange); flex: none; } .check-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; } .check-group legend { font-weight: 700; color: var(--white); margin-bottom: 8px; padding: 0; } .check-group--courses { grid-template-columns: 1fr 1fr; column-gap: 20px; } /* contact form: tick one or more courses */ .check-group--courses legend, .check-group--courses .fine { grid-column: 1 / -1; } .check-group--courses legend { font-size: var(--fs-sm); } @media (max-width: 640px) { .check-group--courses { grid-template-columns: 1fr; } } /* choice tile (one of several, with icon) */ .choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } .choice { position: relative; display: grid; gap: 10px; padding: 18px 16px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .18); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice .ico { width: 26px; height: 26px; color: var(--orange); } .choice b { color: var(--white); font-size: 16px; line-height: 1.25; } .choice span { color: var(--grey); font-size: 14px; line-height: 1.4; } .choice:hover { border-color: rgba(232, 103, 10, .5); } .choice:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); } .choice:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; } @media (max-width: 1100px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .choices { grid-template-columns: 1fr; } } /* success state after a form is sent */ .done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 12px; outline: none; } .done .ico { width: 44px; height: 44px; color: var(--orange); } .done h2 { color: var(--white); font-size: 24px; } .done p { color: var(--muted); } .gform-fail { color: #ffb38a; } /* --- breadcrumb trail above a page title --- */ .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--grey); } .crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--orange); } .crumbs a { color: var(--muted); text-underline-offset: 3px; } .crumbs a:hover { color: var(--white); text-decoration-color: var(--orange); } .crumbs [aria-current] { color: var(--offwhite); } /* --- media frame: every photo sits in one of these --- */ .frame { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--black); } .frame img:not(.fl__logo), .frame video { width: 100%; height: 100%; object-fit: cover; } .frame--bw img:not(.fl__logo) { filter: var(--photo); } /* --- modal (event details, WhatsApp registration) --- */ .modal { width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: #101010; color: var(--offwhite); overflow: auto; } .modal::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); } .modal[open] { animation: fadeUp .3s var(--ease); } .modal--narrow { width: min(720px, calc(100vw - 24px)); } .modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .6); color: var(--white); font-size: 18px; cursor: pointer; } .modal__close:hover { background: var(--orange); border-color: var(--orange); } .modal__body { padding: clamp(22px, 4vw, 36px); display: grid; gap: 8px; } .modal__body .h3, .modal__body .eyebrow { padding-right: 56px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } } /* --- brand lockup on photos: "Follow the Strategy execution line" / logo + line, ending at the traveller's foot --- */ .fl { position: absolute; z-index: 1; display: flex; align-items: flex-end; gap: .35em; pointer-events: none; white-space: nowrap; line-height: 1; visibility: hidden; } .fl.is-placed { visibility: visible; } .fl .fl__logo { width: 1.45em !important; height: 1.45em !important; max-width: none; flex: none; margin-bottom: -.32em; } /* no shadow on the logo */ .fl__text { font-style: italic; font-weight: 600; color: var(--white); margin-right: -.35em; text-shadow: 0 0 2px rgba(0, 0, 0, .6), 0 1px 10px rgba(0, 0, 0, .8); } .fl__line { width: var(--len, 3.2em); height: 2px; flex: none; background: var(--orange); border-radius: 2px; box-shadow: 0 0 8px rgba(232, 103, 10, .45); transform-origin: right center; } .fl[data-scale]:not(.fl--mark) .fl__logo { margin-bottom: -.12em; } /* larger lockups: logo centred on the words */ .fl--mark { gap: 0; } .fl--mark .fl__text { display: none; } .fl.fl--mark .fl__logo { width: 1.55em !important; height: 1.55em !important; margin: 0 -.775em 2px 0; } .fl--mark .fl__line { width: var(--len, 4.6em); } .fl--on-mid .fl__logo { filter: brightness(0) invert(1) !important; } .fl:has(.fl__logo[src*="iso-teal"]) .fl__line { background: #009E47; box-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 158, 71, .45); } .js .fl .fl__line { transform: scaleX(0); transition: transform 1s var(--ease) .2s; } .js .fl .fl__logo, .js .fl .fl__text { opacity: 0; transition: opacity .6s ease 1s; } .js .fl.is-in .fl__line { transform: none; } .js .fl.is-in .fl__logo, .js .fl.is-in .fl__text { opacity: 1; } /* --- The Strat.egy Network wordmark --- */ .tsn-logo { width: min(320px, 100%); height: auto; } .tsn-logo text { font-family: Calibri, Carlito, sans-serif; font-style: italic; } /* --- reveal on scroll --- */ .js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--rvd, 0s), transform .7s var(--ease) var(--rvd, 0s); } .js .rv.is-in { opacity: 1; transform: none; } /* ===================================================================== 3. CHROME (site frame) ===================================================================== */ .nav { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h); background: rgba(10, 10, 10, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.is-scrolled { background: rgba(8, 8, 8, .96); border-color: var(--line); } .nav__inner { height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; } /* header alignment: the logo starts where the "Follow the Strategy execution line" lockup starts (its words stand ~23px left of the line), and "Book a free assessment" ends exactly where the page content ends */ .nav__inner { max-width: none; padding-left: calc(max(34px, (100vw - 1320px) / 2 - 8px) - 27px); padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); } /* the menu links spread evenly across the space between the logo and the button */ .nav__inner > nav { flex: 1; min-width: 0; } .nav__inner .nav__links { margin-left: 0; justify-content: space-evenly; } .nav .nav__links a { font-size: 20px; } /* larger than the 16px base rule below */ @media (max-width: 1359px) { .nav__inner { padding-left: 8px; } } /* the smaller line sits at 24px, its words ~13px left of it */ @media (max-width: 767px) { .nav__inner { padding-left: var(--gutter); } } /* phones: the line is on the right, so the logo lines up with the content */ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; padding: 5px 0; } .brand img:first-child { width: 34px; height: 34px; } .brand img:last-child { height: 24px; width: auto; } .nav__links { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; } .nav__links a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 16px; transition: color .15s, background .15s; } .nav__links a:hover { color: var(--white); background: rgba(255, 255, 255, .05); } .nav__links a[aria-current="page"] { color: var(--orange); } .nav__cta { flex: none; } .nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav__toggle span { width: 22px; height: 2px; background: var(--white); transition: transform .2s, opacity .2s; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .panel { display: none; } @media (max-width: 1180px) { .nav__links, .nav__cta--desk { display: none; } .nav__toggle { display: flex; } .panel { display: block; position: fixed; z-index: 59; top: calc(var(--nav-h) + 8px); right: var(--gutter); width: min(320px, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - var(--nav-h) - 24px); overflow-y: auto; background: #121212; border: 1px solid var(--line); border-top: 2px solid var(--orange); border-radius: var(--r-md); box-shadow: 0 18px 48px rgba(0, 0, 0, .65); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right; transition: opacity .2s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; } .panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .22s var(--ease); } .panel a { display: block; padding: 12px; border-radius: 8px; color: var(--white); text-decoration: none; font-weight: 700; } .panel a:hover { background: rgba(255, 255, 255, .05); } .panel a[aria-current="page"] { color: var(--orange); } .panel .sub { padding: 6px 12px 6px 24px; font-weight: 400; font-size: var(--fs-sm); color: var(--muted); } .panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; } .panel .btn { margin-top: 8px; } } /* in-page sub-navigation (uses pills) */ .subnav { position: sticky; top: var(--nav-h); z-index: 30; background: rgba(10, 10, 10, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .subnav .pills { flex-wrap: nowrap; overflow-x: auto; padding: 10px 0; } .subnav .pill { min-height: 40px; border-color: transparent; color: var(--muted); font-weight: 700; font-size: var(--fs-sm); } /* the execution line: scroll progress with a walker */ .xline { position: fixed; z-index: 40; left: max(34px, calc((100vw - 1320px) / 2 - 8px)); /* down the left-hand margin; at least 34px in, so the walker (who stands to the left of the line) is never cut off by the screen edge */ top: calc(var(--nav-h) + 24px); bottom: 372px; width: 2px; /* room below for the end of the line */ background: rgba(255, 255, 255, .08); pointer-events: none; } /* the line ahead of the walker shrinks as he follows it, but a short stretch always stays between him and the words (as on the photos) */ .xline { --rest: 46px; } .xline__fill { position: absolute; left: 0; bottom: 0; width: 100%; height: calc((1 - var(--p, 0)) * (100% - var(--rest)) + var(--rest)); background: var(--orange); box-shadow: 0 0 10px rgba(232, 103, 10, .5); } /* the walker, lying along the line: head to the left, feet on the line, facing and walking down it */ .xline__walker { position: absolute; left: -23px; top: calc(var(--p, 0) * (100% - var(--rest))); width: 16px; height: 32px; margin: -24px 0 0 0; transform: rotate(-90deg) scaleX(-1); overflow: visible; max-width: none; } .xline__walker path, .xline__walker circle, .xline__walker ellipse { fill: var(--orange); } /* a solid silhouette, like the original */ .xline__walker .w-back path, .xline__walker .w-back circle, .xline__walker .w-back ellipse { fill: var(--orange-dark); } /* far arm and leg a shade darker */ /* app.js sets each joint as you scroll: hips and shoulders swing, knees bend on the back stroke, elbows stay a little bent */ .xline__walker .w-leg.w-front { transform-origin: 19.6px 39px; transform: rotate(var(--hf, 0deg)); } .xline__walker .w-leg.w-back { transform-origin: 18.6px 39px; transform: rotate(var(--hb, 0deg)); } .xline__walker .w-front .w-shin { transform-origin: 19.6px 52.4px; transform: rotate(var(--kf, 0deg)); } .xline__walker .w-back .w-shin { transform-origin: 18.6px 52.4px; transform: rotate(var(--kb, 0deg)); } .xline__walker .w-arm.w-front { transform-origin: 22.4px 15px; transform: rotate(var(--af, 0deg)); } .xline__walker .w-arm.w-back { transform-origin: 17.2px 15px; transform: rotate(var(--ab, 0deg)); } .xline__walker .w-arm.w-front .w-fore { transform-origin: 22.4px 26.6px; transform: rotate(-24deg); } .xline__walker .w-arm.w-back .w-fore { transform-origin: 17.2px 26.6px; transform: rotate(-24deg); } /* phones: the same lockup, moved to the right-hand edge (walker and words on its inner, left side) */ @media (max-width: 767px) { html .xline { left: auto; right: 10px; } } /* "html" so it wins over the smaller-screen rule further down */ /* an invisible handle over the walker: grab him and drag him along the line to scroll the page (app.js) */ .xline__grab { position: absolute; left: -36px; top: calc(var(--p, 0) * (100% - var(--rest))); width: 46px; height: 46px; margin-top: -32px; pointer-events: auto; cursor: grab; touch-action: none; border-radius: 50%; } .xline.is-dragging .xline__walker { filter: drop-shadow(0 0 6px rgba(232, 103, 10, .9)); } .xline__grab:hover { background: radial-gradient(circle, rgba(232, 103, 10, .18), transparent 70%); } .xline.is-dragging .xline__grab { cursor: grabbing; } /* the end of the line: logo + "Follow the Strategy execution line", vertical, reading upwards */ .xline__end { position: absolute; left: 50%; top: calc(100% + 6px); margin: 0; writing-mode: vertical-rl; transform: translateX(calc(-50% - 13.6px)) rotate(180deg); /* words to the left of the line: the line sits along the base of the letters, as on the photos */ white-space: nowrap; font-size: 20px; font-style: italic; font-weight: 600; letter-spacing: .02em; line-height: 1; color: var(--white); } .xline__logo { display: inline-block; width: 1.45em; height: 1.45em; max-width: none; margin-bottom: .3em; vertical-align: middle; transform: rotate(90deg); } /* turned with the words, as in the horizontal lockup */ /* narrower screens (laptops under 1360px, tablets, phones): a smaller line, walker and words close to the left edge, with the page content moved in a little so they have their own margin */ @media (max-width: 1359px) { :root { --gutter: 33px; } .xline { left: 24px; top: calc(var(--nav-h) + 18px); bottom: 250px; --rest: 30px; } .xline__walker { left: -16px; width: 11px; height: 22px; margin-top: -17px; } .xline__end { top: calc(100% + 4px); font-size: 12px; transform: translateX(calc(-50% - 8px)) rotate(180deg); } } } /* footer */ .foot { border-top: 1px solid var(--line); padding: 56px 0 28px; background: #070707; } .foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } .foot__brand img { height: 30px; width: auto; } .foot__brand p { margin-top: 12px; color: var(--grey); font-size: var(--fs-sm); max-width: 320px; } .foot__brand .foot__tag { color: var(--white); font-style: italic; font-size: 18px; } .foot__h { color: var(--white); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } /* the links' own padding gives the spacing */ .foot a { color: var(--grey); text-decoration: none; font-size: var(--fs-sm); } .foot ul a { display: inline-block; padding: 4px 0; } /* easier to tap on a phone (at least 24px tall) */ .foot a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; } .foot__bar { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #8f8f8f; font-size: 14px; } @media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } } /* ===================================================================== 4. COMPONENTS ===================================================================== */ /* --------------------------------------------------------------------- C01 · HERO — page opening. Variants: --photo (full-bleed photograph), --home (taller, larger headline), --plain (text only: contact, articles) --------------------------------------------------------------------- */ .c-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(48px, 7vw, 88px)) 0 clamp(40px, 5vw, 64px); } .c-hero__copy { display: grid; gap: 20px; max-width: 760px; } .c-hero__copy .lead { color: var(--offwhite); } .c-hero__tagline { display: block; margin-top: .6em; color: var(--white); font-weight: 700; font-size: 1.3em; line-height: 1.3; } /* "Simplify your strategy to amplify results." on its own line */ .c-hero__copy .btn-group { margin-top: 8px; } .c-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-repeat: no-repeat; filter: var(--photo); }.js .c-hero__bg { animation: heroZoom 14s var(--ease) both; } @keyframes heroZoom { from { transform: scale(1.08); } } .c-hero--photo { min-height: min(78svh, 760px); display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 48px) 0 clamp(48px, 7vh, 88px); isolation: isolate; } /* dark behind the heading on the left only; the right half of the photo (the figure and the scene) stays clear */ .c-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 5, 5, .82) 0%, rgba(5, 5, 5, .6) 35%, rgba(5, 5, 5, .28) 60%, rgba(5, 5, 5, .05) 78%, rgba(5, 5, 5, 0) 88%), linear-gradient(0deg, var(--ground) 0%, rgba(10, 10, 10, 0) 18%); } .c-hero--photo .c-hero__copy { text-shadow: 0 2px 16px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); } /* keeps the heading readable where it runs onto the lighter part of the photo */ .c-hero--photo .c-hero__copy .btn, .c-hero--photo .c-hero__copy .chip { text-shadow: none; } .c-hero--photo:has(> .fl--full) { align-items: center; padding-bottom: clamp(120px, 20vh, 200px); } .c-hero--home { min-height: min(100svh, 940px); align-items: center; padding-bottom: clamp(140px, 22vh, 240px); } .c-hero--home::after { background: linear-gradient(90deg, rgba(5, 5, 5, .85) 0%, rgba(5, 5, 5, .62) 35%, rgba(5, 5, 5, .28) 60%, rgba(5, 5, 5, .05) 78%, rgba(5, 5, 5, 0) 88%), linear-gradient(0deg, var(--ground) 0%, rgba(10, 10, 10, 0) 18%); } .c-hero--home .c-hero__copy { gap: 24px; } .c-hero--home .h1 { font-size: var(--fs-display); } .c-hero--plain .c-hero__copy { max-width: 900px; gap: 16px; } .c-hero--article .h1 { font-size: clamp(32px, 4.4vw, 54px); } .c-hero--article { padding-bottom: 40px; } .c-hero--article .container { max-width: 1100px; } /* copy lines up with the cover photo below */ @media (max-width: 640px) { .c-hero--home .h1 { font-size: clamp(40px, 11vw, 56px); } .c-hero__copy .btn-group .btn { flex: 1 1 100%; } } /* --------------------------------------------------------------------- C02 · SECTION HEADING — eyebrow, title, optional lead. --center --------------------------------------------------------------------- */ .c-heading { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); } .c-heading--center { text-align: center; justify-items: center; } .c-heading--flush { margin-bottom: 0; } /* --------------------------------------------------------------------- C03 · CARD — one card, five variants: --media photo on top, icon badge, title, text, bullets, link (services, blog) --wide media beside the body (featured article) --panel padded text panel (WhatsApp / newsletter, people, forms, notes) --profile compact person: photo, name, role --bio person with photo, name, field and a short biography Cards that are links () lift and glow on hover. --------------------------------------------------------------------- */ .c-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; color: inherit; text-decoration: none; } a.c-card { transition: border-color .2s, transform .2s var(--ease), background .2s; } a.c-card:hover { border-color: rgba(232, 103, 10, .45); transform: translateY(-4px); background: var(--surface-2); } a.c-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); } a.c-card:hover::after { transform: scaleX(1); } .c-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--black) center / cover no-repeat; flex: none; } .c-card__media img:not(.fl__logo) { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); transition: transform .8s var(--ease); } .c-card__media--bg:not(:has(.fl)) { filter: var(--photo); } a.c-card:hover .c-card__media img:not(.fl__logo) { transform: scale(1.05); } .c-card__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 26px; flex: 1; } .c-card__icon { margin-top: -49px; position: relative; background: #2a1708; border: 1px solid rgba(232, 103, 10, .4); } .c-card__title { font-size: var(--fs-title); line-height: 1.22; color: var(--white); font-weight: 700; } .c-card__text { color: var(--muted); font-size: 16px; } .c-card__foot { margin-top: auto; padding-top: 8px; } /* wide */ .c-card--wide { flex-direction: row; grid-column: 1 / -1; } .c-card--wide .c-card__media { flex: 0 0 45%; aspect-ratio: auto; min-height: 300px; } .c-card--wide .c-card__body { justify-content: center; padding: clamp(24px, 4vw, 44px); } .c-card--wide .c-card__title { font-size: clamp(24px, 2.6vw, 32px); } /* panel */ .c-card--panel { display: grid; gap: 16px; align-content: start; padding: clamp(26px, 3.5vw, 40px); } .c-card--panel > p:not(.eyebrow):not(.fine) { color: var(--muted); } .c-card--glow { background: linear-gradient(160deg, rgba(232, 103, 10, .14), transparent 55%), var(--surface); } /* profile */ .c-card--profile { flex-direction: row; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-card-sm); } .c-card__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1); border: 2px solid var(--orange); background: #1a1a1a; flex: none; } .c-card__name { display: block; color: var(--white); font-size: 18px; font-weight: 700; line-height: 1.3; } .c-card__role { color: var(--orange); font-weight: 700; font-size: 14px; } .c-card--profile-lg .c-card__name { font-size: 20px; } .c-card--profile-lg .c-card__role { font-size: var(--fs-sm); } .c-card--bare { padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; } /* a card's content without its box, e.g. a profile heading a panel */ /* bio */ .c-card--bio { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-card-sm); } .c-card--bio .c-card__avatar { width: 84px; height: 84px; border: 2px solid var(--line); margin-bottom: 4px; } .c-card--bio .c-card__title { font-size: 20px; } .c-card--bio .c-card__role { font-size: var(--fs-sm); } .c-card--bio p:not(.c-card__role) { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; } @media (max-width: 900px) { .c-card--wide { flex-direction: column; } .c-card--wide .c-card__media { min-height: 220px; } } /* --------------------------------------------------------------------- C04 · FEATURE — media beside content (any media: photo, video, animated visual, wheel, timeline, form). Columns via --cols. Variants: --story (numbered, alternating), --panel (boxed), --bridge (media → message → media), --top (align to the top), --sticky (media stays in view), --reverse (media on the right). --------------------------------------------------------------------- */ .c-feature { display: grid; grid-template-columns: var(--cols, 1fr 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .c-feature > * { min-width: 0; } .c-feature--top { align-items: start; } .c-feature__media { position: relative; border-radius: var(--r-card); overflow: hidden; } .c-feature__media img:not(.fl__logo) { width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; filter: var(--photo); } .c-feature__media--plain { border-radius: 0; overflow: visible; } .c-feature__media--plain img:not(.fl__logo) { aspect-ratio: auto; filter: none; } .c-feature--sticky .c-feature__media { position: sticky; top: calc(var(--nav-h) + 24px); } .c-feature--reverse .c-feature__media { order: 2; } .c-feature__body { display: grid; gap: 18px; align-content: start; } /* story: alternating numbered rows with an animated visual */ .c-features { display: grid; gap: clamp(56px, 8vw, 110px); } .c-feature--story { --cols: 1.25fr 1fr; } .c-feature--story.c-feature--reverse { --cols: 1fr 1.25fr; } .c-feature--story .c-feature__media { aspect-ratio: 16 / 10; background: #000; border: 1px solid var(--line); box-shadow: var(--sh-2); container-type: inline-size; } .c-feature--story .c-feature__body h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; color: var(--white); } .c-feature--story .c-feature__body p { color: var(--muted); font-size: 19px; max-width: 460px; } .c-feature--story .c-feature__body .c-feature__more { color: var(--white); font-style: italic; } .c-feature--story:has(> .c-feature__wide) > .c-feature__media { align-self: end; margin-bottom: 6px; } /* image lines up with the end of the text above the wide paragraph */ .c-feature--story > .c-feature__wide { position: relative; z-index: 1; grid-column: 1 / -1; margin: calc(-1 * clamp(28px, 5vw, 72px) + 20px) 0 0; color: var(--white); font-style: italic; font-size: 19px; line-height: 1.6; } /* closing paragraph across the whole row */ .c-feature--story .c-feature__body .c-feature__note { color: var(--grey); font-size: var(--fs-sm); } /* footnote, e.g. "* Willy Fog …" */ /* video */ .c-feature__media--video { aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 103, 10, .15); } .c-feature__media--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.012); } /* pause / play button for the intro film (app.js): two bars when playing, a triangle when paused */ .film-ctl { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 10, 10, .6); cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; } .film-ctl:hover, .film-ctl:focus-visible { background: var(--orange); border-color: var(--orange); } .film-ctl::before { content: ""; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; } .film-ctl.is-paused::before { width: 0; height: 0; border: solid transparent; border-width: 8px 0 8px 13px; border-left-color: #fff; margin-left: 3px; } /* panel */ .c-feature--panel { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: radial-gradient(circle at 20% 50%, rgba(232, 103, 10, .12), transparent 55%), var(--surface); border: 1px solid var(--line); } /* bridge: blue globe → message → city map */ .c-feature--bridge { --cols: 1fr auto 1.2fr; margin-top: clamp(56px, 8vw, 110px); gap: clamp(20px, 4vw, 48px); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: radial-gradient(circle at 15% 50%, rgba(31, 90, 168, .22), transparent 45%), var(--surface); border: 1px solid var(--line); } .c-feature--bridge .c-feature__body { justify-items: center; text-align: center; max-width: 300px; gap: 14px; } .c-feature--bridge .c-feature__body h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; color: var(--white); } .c-feature--bridge .c-feature__body p { color: var(--muted); font-size: 16px; } .c-feature--bridge .c-feature__body svg { width: 120px; color: var(--orange); } .c-feature--bridge .globe { display: block; width: 100%; filter: drop-shadow(0 0 40px rgba(31, 90, 168, .5)); } .c-feature--bridge .map { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); } /* the routes drawn on the globe and the city map (Fernando's drawings), with the logo's pin and X */ .route-wrap { position: relative; } .route-wrap--globe { width: min(260px, 100%); justify-self: center; } .route-wrap--map { width: 100%; } .route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .route__line { fill: none; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); } .route--globe .route__line { stroke-width: 3.6; } .route--map .route__line { stroke-width: 3; } .route__start, .route__end { fill: var(--orange); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } .js .route__line { stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease) .5s; } .js .route--map .route__line { transition-delay: 2.4s; } .js .route__start, .js .route__end { opacity: 0; transform: translateY(-8px); transform-box: fill-box; transition: opacity .5s var(--ease), transform .5s var(--ease); } .js .route__end { transform: scale(.4); transform-origin: center; transition-delay: 2.7s; } .js .is-in .route__line { stroke-dashoffset: 0; } .js .is-in .route__start, .js .is-in .route__end { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .route__line, .js .route__start, .js .route__end { transition: none; } } @media (max-width: 900px) { .c-feature, .c-feature--story, .c-feature--story.c-feature--reverse { grid-template-columns: 1fr; } .c-feature--reverse .c-feature__media { order: 0; } .c-feature--sticky .c-feature__media { position: relative; top: auto; } .c-feature--sticky .c-feature__media img:not(.fl__logo) { aspect-ratio: 16 / 9; } .c-feature--bridge { justify-items: center; } .c-feature--bridge .c-feature__body svg { transform: rotate(90deg); width: 60px; margin: 22px 0; } /* turned to point down: room above and below so it clears the heading and the text */ } /* the animated visuals inside story rows (.is-playing starts them; .vis-reset jumps back to the start for a replay) */ .vis-reset .vis, .vis-reset .vis * { transition: none !important; animation: none !important; } .vis { position: absolute; inset: 0; overflow: hidden; background: #000; } .vis .a { opacity: 0; transform: var(--from, translateY(14px)); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); display: inline-block; } .is-playing .vis .a { opacity: 1; transform: none; } .vis__bg { position: absolute; inset: -4%; background-size: cover; background-position: center; } .vis--spiral { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 4cqw; padding: 0 4cqw; } .vis__spiral { position: relative; aspect-ratio: 1; } .vis__disc { position: absolute; inset: 0; border-radius: 50%; background: center / 118% no-repeat; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); } .is-near .vis__disc { background-image: url("../assets/img/hallucination.gif"); } .vis__glow { position: absolute; inset: 8%; border-radius: 50%; box-shadow: 0 0 6cqw 1cqw rgba(232, 103, 10, .25), inset 0 0 0 2px rgba(232, 103, 10, .5); } .is-playing .vis__disc { animation: spin 24s linear infinite; } .is-playing .vis__glow { animation: glowPulse 3s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes glowPulse { 50% { box-shadow: 0 0 9cqw 2cqw rgba(232, 103, 10, .38), inset 0 0 0 2px rgba(232, 103, 10, .85); } } .vis__quote { display: flex; flex-direction: column; gap: .1em; font-weight: 700; line-height: 1; color: var(--white); font-size: 4.4cqw; } .vis__quote .sm { font-size: .62em; font-weight: 400; font-style: italic; padding-left: .2em; } .vis__quote b { font-size: 1.3em; } .vis__quote b.big { font-size: 1.7em; letter-spacing: -.01em; white-space: nowrap; } .vis__quote .cite { margin-top: .8em; font-size: .5em; font-style: italic; } .wave span { display: inline-block; } .is-playing .wave span { animation: woozy 3.2s ease-in-out calc(2.2s + var(--i) * .09s) infinite; } @keyframes woozy { 0%, 100% { transform: none; text-shadow: none; } 50% { transform: translateY(-.07em) skewX(-6deg); text-shadow: .06em .02em 0 rgba(232, 103, 10, .35), -.05em -.02em 0 rgba(255, 255, 255, .12); } } .vis__bg.kb { transform: scale(1.12); transition: transform 9s linear; } .is-playing .vis__bg.kb { transform: scale(1.02); } .vis__band { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .7) 38%, rgba(0, 0, 0, .7) 62%, rgba(0, 0, 0, .15) 100%); } .vis__plan { position: absolute; left: 4cqw; right: 4cqw; top: 50%; transform: translateY(-60%); text-align: center; color: var(--white); font-weight: 700; font-size: 5cqw; line-height: 1.15; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); } .vis__plan .neq { font-size: 1.25em; margin: 0 .15em; } .vis__rule { position: absolute; left: 50%; bottom: 26%; width: 34cqw; margin-left: -17cqw; height: 2px; background: var(--orange); transform-origin: center; } /* the whole plane stays in view: the frame takes the photo's shape (1280 x 662) and the photo only drifts gently */ .c-feature__media:has(.vis--plane) { aspect-ratio: 1280 / 662; } .vis--plane .vis__bg { inset: -1.5%; } .is-playing .vis__float { animation: planeIn 1.6s cubic-bezier(.2, .6, .3, 1) forwards, planeFloat 6s ease-in-out infinite; } @keyframes planeIn { from { opacity: .85; } to { opacity: 1; } } @keyframes planeFloat { 0%, 100% { translate: 0 0; } 50% { translate: -.6% -.9%; } } .vis__sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, .6), transparent 55%); } .vis__fly { position: absolute; left: 4cqw; bottom: 4cqw; display: flex; flex-direction: column; gap: .06em; font-weight: 700; font-size: 5.4cqw; line-height: 1.05; color: var(--white); text-shadow: 0 2px 14px rgba(0, 0, 0, .6); } .vis__half { position: absolute; left: 0; right: 0; top: -1%; height: 102%; } .vis__half img { width: 100%; height: 100%; object-fit: cover; } /* ideas 02–04 play slowly enough to follow: each line fades in over 1.2s, one after the other */ .vis--plane .a { transition-duration: 1.2s; } .vis--split .a, .vis--explorer .a { transition-duration: 1s; } .vis__half--top { clip-path: inset(0 0 49.6% 0); transform: translateX(-100%); transition: transform 1.6s var(--ease) .1s; } .vis__half--bottom { clip-path: inset(51.6% 0 0 0); transform: translateX(100%); transition: transform 1.6s var(--ease) .6s; } .is-playing .vis__half--top, .is-playing .vis__half--bottom { transform: none; } .vis__line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent); transform: scaleX(0); transition: transform .9s var(--ease) 1.9s; } .is-playing .vis__line { transform: scaleX(1); } .vis__vs { position: absolute; left: 50%; top: 50%; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border-radius: 50%; background: var(--orange); color: var(--white); display: grid; place-items: center; font-weight: 700; font-style: italic; font-size: max(12px, 3.4cqw); box-shadow: 0 0 0 .5cqw #fff, 0 10px 30px rgba(0, 0, 0, .6); transform: scale(0); transition: transform .8s cubic-bezier(.3, 1.6, .5, 1) 2.5s; } .is-playing .vis__vs { transform: scale(1); } .vis__t1, .vis__t2 { position: absolute; max-width: 46%; font-weight: 700; font-size: max(13px, 3.8cqw); line-height: 1.1; color: var(--white); text-shadow: 0 2px 14px rgba(0, 0, 0, .85); } .vis__t1 { left: 4cqw; top: 12%; } .vis__t2 { right: 4cqw; top: 58%; text-align: right; } .vis__t3 { --from: translate(-50%, 14px); position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); white-space: nowrap; padding: .4em .9em; border-radius: var(--r-pill); background: rgba(0, 0, 0, .6); color: var(--white); font-weight: 700; font-size: max(12px, 2.8cqw); } .is-playing .vis__t3.a { transform: translateX(-50%); } .vis__tag { position: absolute; padding: .3em .8em; border-radius: var(--r-pill); background: var(--orange); color: var(--white); font-weight: 800; font-size: max(11px, 2.1cqw); letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); } .vis__tag--speed { right: 4cqw; bottom: 56%; } .vis__tag--turn { left: 4cqw; top: 56%; } @media (max-width: 640px) { .vis__quote { font-size: 4.6cqw; } .vis__quote .sm { font-size: max(.62em, 12px); } .vis__quote .cite { font-size: max(.5em, 12px); } } /* --------------------------------------------------------------------- C05 · STEPS — an ordered list of points. Variants: --numbered (outlined 01–04 + title + text, divided rows), --icons (icon dots joined by a line, short label) --------------------------------------------------------------------- */ .c-steps { list-style: none; margin: 0; padding: 0; display: grid; } .c-steps--numbered li { display: grid; grid-template-columns: 84px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); } .c-steps--numbered li:first-child { border-top: 0; padding-top: 0; } .c-steps--numbered h3 { font-size: 24px; color: var(--white); margin-bottom: 8px; } .c-steps--numbered p { color: var(--muted); font-size: 17px; line-height: 1.6; } .c-steps--icons { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; position: relative; } .c-steps--icons::before { content: ""; position: absolute; left: 7%; right: 7%; top: 32px; height: 2px; background: linear-gradient(90deg, rgba(232, 103, 10, .2), var(--orange), rgba(232, 103, 10, .2)); } .c-steps--icons li { display: grid; justify-items: center; text-align: center; gap: 14px; position: relative; } .c-steps__dot { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ground); border: 2px solid rgba(255, 255, 255, .7); color: var(--white); transition: border-color .2s, color .2s, transform .2s var(--ease); } .c-steps--icons li:hover .c-steps__dot { border-color: var(--orange); color: var(--orange); transform: scale(1.06); } .c-steps__dot .ico { width: 30px; height: 30px; } .c-steps--icons p { font-size: var(--fs-sm); line-height: 1.4; color: var(--offwhite); } .section--alt .c-steps__dot { background: var(--ground-alt); } @media (max-width: 1100px) { .c-steps--icons { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; } .c-steps--icons::before { display: none; } } @media (max-width: 640px) { .c-steps--numbered li { grid-template-columns: 56px 1fr; gap: 14px; } .c-steps--numbered .num { font-size: 38px; } .c-steps--icons { grid-template-columns: 1fr; gap: 0; } .c-steps--icons::before { display: block; left: 31px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(232, 103, 10, .2), var(--orange), rgba(232, 103, 10, .2)); } .c-steps--icons li { grid-template-columns: 64px 1fr; justify-items: start; text-align: left; align-items: center; gap: 16px; padding: 8px 0; } } /* --faq: questions that open to show the answer (
) */ .c-steps--faq { border-top: 1px solid var(--line); } .c-steps--faq details { border-bottom: 1px solid var(--line); } .c-steps--faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 20px 4px 20px 0; list-style: none; cursor: pointer; color: var(--white); font-size: 20px; font-weight: 700; line-height: 1.3; } .c-steps--faq summary::-webkit-details-marker { display: none; } .c-steps--faq summary::after { content: ""; flex: none; width: 11px; height: 11px; margin: -6px 6px 0 0; border: solid var(--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); } .c-steps--faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); } .c-steps--faq summary:hover { color: var(--orange); } .c-steps__answer { padding: 0 40px 24px 0; } .c-steps__answer p { color: var(--muted); font-size: 17px; line-height: 1.65; } .c-steps__answer b { color: var(--white); } .c-steps__answer .link { display: inline-flex; margin-left: 4px; } @media (max-width: 640px) { .c-steps--faq summary { font-size: 18px; } .c-steps__answer { padding-right: 0; } } /* --------------------------------------------------------------------- C06 · COURSE — a training course: photo, duration/format chips, title, ticks, price and actions. --teal for the sustainability course. --------------------------------------------------------------------- */ .c-course { display: grid; grid-template-columns: 420px 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(32px, 4vw, 48px); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 20px); transition: box-shadow .4s; } .c-course + .c-course { margin-top: 20px; } .c-course.is-flash { box-shadow: 0 0 0 3px var(--orange); } .c-course__media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; } .c-course__media img:not(.fl__logo) { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); } .c-course__body { display: grid; gap: 16px; align-content: start; } .c-course__title { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; color: var(--white); } .c-course__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); } .c-course__price { color: var(--white); font-weight: 700; font-size: 20px; flex: 1 0 100%; } /* price on its own row, both buttons together beneath it */ .c-course__price small { display: block; color: var(--grey); font-weight: 400; font-size: 14px; } .c-course__price .c-course__date { margin-top: 4px; color: var(--offwhite); font-weight: 700; } /* "Not quite sure yet?" reassurance under "Pre-book your seat" (course cards and course pages) */ /* "Not quite sure yet?" + "Pre-book your seat" form one block on the left; "Email me the brochure" stands apart on the far right */ .prebook { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 300px; } .prebook + .btn { margin-left: auto; align-self: flex-end; } .prebook-note { margin: 0; padding-left: 2px; } .prebook-note__q { color: var(--orange); font-weight: 700; font-size: 16px; } .prebook-note__t { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 460px; } @media (max-width: 600px) { .prebook + .btn { align-self: flex-start; } } /* whenever a course card is too narrow for the two buttons side by side (phones, narrow windows, tablets), they become two full-width buttons, one under the other, instead of the brochure button hanging off to the right */ .c-course__foot { container-type: inline-size; } @container (max-width: 560px) { .prebook { max-width: none; width: 100%; } .prebook .btn, .prebook + .btn { width: 100%; justify-content: center; margin-left: 0; align-self: stretch; text-align: center; white-space: nowrap; padding-inline: 14px; } } .c-course__future { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); } /* "Can't make this date? …" under a shown date */ .c-course__future[hidden] { display: none; } .c-course--teal { --accent: var(--teal); } .c-course--teal .ticks li::before { background: rgba(0, 142, 64, .14); } .c-course--teal .c-course__title .o, .c-course--teal .c-heading .o, .c-hero:has(.chip--teal) .h1 .o { color: var(--teal); } a.c-card[href="course-sustainability.html"] .c-card__title .o, a.c-card[href="course-sustainability.html"] .tag { color: var(--teal); } .c-course__title a { color: inherit; text-decoration: none; } .c-course__title a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 5px; } .c-course > .c-course__body > .link { justify-self: start; } /* course page: photo, fact panels, the model wheel */ .c-feature__media--course { --ratio: 4 / 3; } .c-feature__media--wheel { border-radius: 0; overflow: visible; } .c-feature__media--wheel .wheel { width: min(420px, 100%); margin: 0 auto; } .c-card--fact { gap: 8px; padding: 20px; } .c-card--fact .icon-badge { width: 44px; height: 44px; margin-bottom: 4px; } .c-card--fact .icon-badge .ico { width: 24px; height: 24px; } .c-card--fact .c-card__title { font-size: 18px; font-weight: 400; color: var(--offwhite); } .c-card--fact .c-card__title strong { color: var(--white); font-size: 20px; } .c-feature__body > .grid { margin-top: 12px; } .c-feature__media--portrait { --ratio: 4 / 5; border: 2px solid rgba(232, 103, 10, .5); } /* facilitator photo */ .c-feature__media--portrait img { object-position: 50% 20%; } .c-card--fact-wide { grid-column: 1 / -1; border-color: rgba(232, 103, 10, .45); } /* next course date, across the top */ .c-card--fact-wide .link { justify-self: start; margin-top: 2px; } @media (max-width: 640px) { .grid:has(> .c-card--fact) { --cols: 2; gap: 10px; } .c-card--fact { padding: 14px; } .c-card--fact .c-card__title { font-size: 16px; } } .c-course--teal .c-card--fact .icon-badge { background: rgba(0, 142, 64, .14); color: var(--teal); } @media (max-width: 900px) { .c-course { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- C07 · COMPARE — "which one is right for you?" selector pills above a comparison table. The matching column is outlined. --------------------------------------------------------------------- */ .c-compare__result { margin-top: 18px; color: var(--muted); min-height: 1.6em; } .c-compare__result a { color: var(--white); font-weight: 700; } /* phones: the same table, made for a small screen. The row labels stay pinned on the left, two courses show at a time, and a swipe snaps from one course to the next; a hint under the table says there is more to see */ .c-compare__hint { display: none; margin: 10px 2px 0; color: var(--muted); font-size: 14px; } .c-compare__hint span { color: var(--orange); font-weight: 700; } @media (max-width: 767px) { .c-compare__hint { display: block; } .c-compare .c-compare__table { scroll-snap-type: x mandatory; scroll-padding-left: 96px; overscroll-behavior-x: contain; } .c-compare .compare { --col: calc((100vw - 2 * var(--gutter) - 2px - 96px) / 2); min-width: 0; width: max-content; table-layout: fixed; font-size: 14px; } .c-compare .compare th, .c-compare .compare td { box-sizing: border-box; padding: 12px 10px; line-height: 1.4; } .c-compare .compare thead th[data-col], .c-compare .compare td { width: var(--col); min-width: var(--col); max-width: var(--col); scroll-snap-align: start; } .c-compare .compare thead th { font-size: 15px; line-height: 1.3; vertical-align: bottom; } .c-compare .compare thead th small { font-size: 12px; } .c-compare .compare tbody th, .c-compare .compare thead th:first-child { position: sticky; left: 0; z-index: 2; width: 96px; min-width: 96px; max-width: 96px; font-size: 13px; box-shadow: 2px 0 6px rgba(0, 0, 0, .12); } .c-compare .compare thead th:first-child { box-shadow: 2px 0 6px rgba(0, 0, 0, .35); } .c-compare .compare td .link { white-space: nowrap; } } .c-compare__table { position: relative; margin-top: 22px; overflow-x: auto; border-radius: var(--r-card-sm); border: 1px solid #DCDCDC; background: #fff; } .compare { width: 100%; min-width: 860px; border-collapse: collapse; font-size: var(--fs-sm); } /* light table on the dark page: dark header (keeps the orange / teal course names readable), white and light-grey rows */ .compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid #DCDCDC; border-left: 1px solid #E4E4E4; } .compare th:first-child { border-left: 0; } .compare thead th { background: #1B1B1B; color: var(--white); font-size: 16px; border-bottom: 3px solid var(--orange); border-left-color: rgba(255, 255, 255, .12); } .compare thead th small { display: block; color: var(--orange); font-weight: 700; font-size: 13px; margin-top: 4px; } .compare tbody th { color: #1A1A1A; font-weight: 700; width: 150px; background: #EDEDED; } .compare td { color: #1A1A1A; background: #FFFFFF; } .compare tbody tr:nth-child(even) td { background: #F5F5F5; } .compare tbody tr:nth-child(even) th { background: #E5E5E5; } .compare td a, .compare td .link { color: #1A1A1A; } /* banded rows: easier to follow across */ .compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; } .compare td.is-rec, .compare th.is-rec { box-shadow: inset 0 0 0 2px var(--orange); } .compare [data-col="sustainability"] { --accent: var(--teal); } .compare thead th[data-col="sustainability"] { min-width: 236px; } .compare thead th[data-col="sustainability"] .o, .compare thead th[data-col="sustainability"] small { color: var(--teal); } .compare .is-rec[data-col="sustainability"] { box-shadow: inset 0 0 0 2px var(--teal); } /* --------------------------------------------------------------------- C08 · TIMELINE — dated events on a line; each opens its details in a modal. --------------------------------------------------------------------- */ .c-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; } .c-timeline::before { content: ""; position: absolute; left: 66px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--orange), rgba(232, 103, 10, .15)); } .c-timeline li { display: grid; grid-template-columns: 52px 1fr; gap: 32px; align-items: start; } .c-timeline__year { color: var(--orange); font-weight: 700; font-size: 18px; text-align: right; padding-top: 14px; } .c-timeline__event { position: relative; display: block; width: 100%; padding: 14px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, background .2s, transform .2s var(--ease); } .c-timeline__event::before { content: ""; position: absolute; left: -23px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--ground); border: 2px solid var(--orange); } .c-timeline__event:hover, .c-timeline__event:focus-visible { border-color: rgba(232, 103, 10, .55); background: var(--surface-2); transform: translateX(4px); } .c-timeline__event b { display: block; color: var(--white); } .c-timeline__event span { color: var(--grey); font-size: var(--fs-sm); } .c-timeline__more { display: block; width: fit-content; margin-top: 8px; color: var(--orange); font-style: normal; font-size: 14px; font-weight: 700; } .c-timeline__more::after { content: " →"; transition: margin-left .2s var(--ease); } .c-timeline__event:hover .c-timeline__more::after { margin-left: 4px; } @media (max-width: 640px) { .c-timeline::before { left: 50px; } .c-timeline li { grid-template-columns: 40px 1fr; gap: 26px; } } /* the details modal */ .c-timeline__fig { margin: 0; } .c-timeline__gallery { display: flex; flex-direction: column; background: #000; min-width: 0; } .c-timeline__photo { position: relative; flex: 1; aspect-ratio: 16 / 9; background: #000; } .c-timeline__photo img { width: 100%; height: 100%; object-fit: contain; } .c-timeline__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; background: radial-gradient(ellipse at 50% 40%, #1f1f1f, #0b0b0b 70%); color: var(--muted); } .c-timeline__thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; background: #0b0b0b; } .c-timeline__thumbs button { flex: none; width: 76px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; } .c-timeline__thumbs button img { width: 100%; height: 100%; object-fit: cover; } .c-timeline__thumbs button:hover, .c-timeline__thumbs button:focus-visible { opacity: 1; } .c-timeline__thumbs button[aria-pressed="true"] { opacity: 1; border-color: var(--orange); } .c-timeline__info { display: grid; gap: 14px; align-content: start; padding: 20px 24px 24px; } .c-timeline__info h3 { color: var(--white); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; padding-right: 40px; } .c-timeline__meta { color: var(--orange); font-weight: 700; } .c-timeline__sec { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); } .c-timeline__sec p:not(.eyebrow) { color: var(--offwhite); line-height: 1.6; } .c-timeline__info .btn { justify-self: start; margin-top: 6px; } @media (min-width: 860px) { .c-timeline__fig { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 460px; } .c-timeline__photo { aspect-ratio: auto; min-height: 380px; } .c-timeline__info { padding: 32px; } } /* --------------------------------------------------------------------- C09 · LOGOS — client logos as supplied, on white tiles. Variants: --wall (grid) and --marquee (slow scrolling strip) --------------------------------------------------------------------- */ .c-logos__tile { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: 14px 20px; } .c-logos__tile img { display: block; max-width: 88%; max-height: 58px; width: auto; height: auto; object-fit: contain; } .c-logos--wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } /* 24 logos = 6 × 4, every row full */ .c-logos--wall .c-logos__tile { height: 96px; } .c-logos--marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .c-logos__track { display: flex; gap: 16px; align-items: center; width: max-content; animation: marquee 50s linear infinite; padding: 22px 0; } .c-logos--marquee:hover .c-logos__track { animation-play-state: paused; } .c-logos--marquee .c-logos__tile { width: 168px; height: 76px; flex: none; padding: 12px 18px; } .c-logos--marquee .c-logos__tile img { max-width: 136px; max-height: 50px; } @keyframes marquee { to { transform: translateX(-50%); } } @media (max-width: 900px) { .c-logos--wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .c-logos--wall { grid-template-columns: 1fr 1fr; } .c-logos--wall .c-logos__tile { height: 80px; } .c-logos--wall .c-logos__tile img { max-height: 46px; } } /* --------------------------------------------------------------------- C10 · STATS — key numbers in a row, with an optional link. --------------------------------------------------------------------- */ .c-stats { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .c-stats__list { display: flex; flex-wrap: wrap; gap: 14px 40px; } .c-stats__item { display: grid; } .c-stats__item b { font-size: 34px; line-height: 1; color: var(--white); } .c-stats__item b .o { font-size: .75em; } .c-stats__item span { margin-top: 6px; color: var(--grey); font-size: 14px; max-width: 170px; line-height: 1.35; } @media (max-width: 900px) { .c-stats { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- C11 · QUOTE — a large statement with its source. --------------------------------------------------------------------- */ .c-quote { margin: 0; text-align: center; } .c-quote p { font-size: clamp(30px, 4vw, 52px); line-height: 1.12; font-weight: 700; font-style: italic; color: var(--white); max-width: 980px; margin: 0 auto; } .c-quote cite { display: block; margin-top: 16px; color: var(--grey); font-style: italic; } /* --card: delegate feedback in a card */ .c-quote--card { position: relative; text-align: left; padding: 28px 28px 24px 64px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); } .c-quote--card::before { content: "“"; position: absolute; left: 22px; top: 6px; color: var(--orange); font-size: 64px; font-weight: 700; line-height: 1; } .c-quote--card p { font-size: 20px; line-height: 1.45; font-weight: 400; color: var(--offwhite); max-width: none; } .c-quote--card cite { margin-top: 12px; font-size: 15px; font-style: normal; color: var(--orange); font-weight: 700; } /* delegate feedback grid: compact cards that pop in across each row, and lift on hover */ .c-feedback { gap: 14px; } .c-feedback .c-quote--card { padding: 20px 20px 18px 50px; transition: border-color .2s, transform .2s var(--ease); } .c-feedback .c-quote--card::before { left: 17px; top: 4px; font-size: 48px; } .c-feedback .c-quote--card p { font-size: 17px; line-height: 1.45; } .c-feedback .c-quote--card cite { margin-top: 10px; font-size: 14px; } .js .c-feedback .c-quote--card.rv { opacity: 0; transform: scale(.88) translateY(14px); transition: opacity .45s var(--ease) var(--pop, 0s), transform .55s cubic-bezier(.34, 1.56, .64, 1) var(--pop, 0s), border-color .2s; } .js .c-feedback .c-quote--card.rv.is-in { opacity: 1; transform: none; } .c-feedback > :nth-child(3n + 2) { --pop: .12s; } .c-feedback > :nth-child(3n) { --pop: .24s; } .js .c-feedback .c-quote--card.rv.is-in:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(232, 103, 10, .5); transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .js .c-feedback .c-quote--card.rv { transform: none; transition: opacity .3s; } } /* "Get notified about new dates": a slim band on the Training page; the form opens in a pop-up */ .notify-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; } .notify-band .c-heading { margin: 0; max-width: 640px; } /* only the first three quotes until "More testimonials" is clicked (without JavaScript all show) */ .js .c-feedback:not(.is-open) .c-feedback__extra { display: none; } .c-feedback__toggle { margin-top: 24px; text-align: center; } .js .c-feedback:not(.is-open) ~ [data-feedback-tail] { display: none; } .c-feedback.is-open ~ .c-feedback__toggle { display: none; } .c-quote__more { margin-top: 22px; text-align: center; color: var(--orange); font-size: 22px; font-weight: 700; font-style: italic; } /* "+ many more" under the delegate quotes */ .c-steps--numbered .chip { margin-left: 0; } .c-steps--numbered li > div > h3:only-child { margin: 8px 0 0; } /* --------------------------------------------------------------------- C12 · CTA BANNER — the next step. Variants: --photo (photo background; button or a short form beside it), --compact (one line + button), --plain (panel without photo). --------------------------------------------------------------------- */ .c-cta { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(36px, 5vw, 64px); background: #0E0E0E; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr minmax(300px, 440px); gap: clamp(28px, 4vw, 56px); align-items: center; isolation: isolate; } .c-cta--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: center / cover; filter: grayscale(1) brightness(.6); } .c-cta--photo.is-near::before { background-image: url("../assets/img/photos/cta-band.webp?v=hd1"); } /* loaded only when the banner is near */ .c-cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .25)); } .c-cta__copy { display: grid; gap: 14px; } .c-cta__form { background: rgba(14, 14, 14, .92); border: 1px solid var(--line); border-radius: var(--r-card-sm); padding: 24px; backdrop-filter: blur(8px); } .c-cta--compact { grid-template-columns: 1fr auto; } .c-cta--plain { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-card); background: var(--surface); } .c-cta--plain .c-cta__copy { max-width: 640px; gap: 12px; } .c-cta .btn[aria-expanded="true"] .arr { transform: rotate(-90deg); } @media (max-width: 900px) { .c-cta, .c-cta--compact { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- C13 · FORM — every form on the site. Variants: --stack (one column), --grid (two columns), --inline (one field + button). Built from the kit's fields, choice tiles and check options; shows the .done state once sent. --------------------------------------------------------------------- */ .c-form { display: grid; gap: 14px; } .c-form--grid .c-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .c-form--inline { display: flex; flex-wrap: wrap; gap: 10px; } .c-form--inline .field { flex: 1 1 220px; } .c-form__choices { border: 0; padding: 0; margin: 0 0 12px; } .c-form__actions { margin-top: 6px; display: grid; gap: 14px; justify-items: start; } @media (max-width: 640px) { .c-form--grid .c-form__fields { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- C14 · MODEL — the interactive Strat.exe Model: the pinned wheel journey (Zero to Hero) and the optional health check. --------------------------------------------------------------------- */ .wheel { width: 100%; height: auto; overflow: visible; } .wheel__ring { fill: none; stroke: var(--orange); stroke-width: 9; } .wedge { cursor: pointer; outline: none; } .wedge path { stroke: var(--ground); stroke-width: 5; transition: fill .2s, transform .35s var(--ease); transform-box: view-box; transform-origin: 200px 200px; } .wedge--dark path { fill: #474747; } .wedge--light path { fill: #D5D5D5; } .wedge text { font-family: var(--font); text-anchor: middle; pointer-events: none; } .wedge .t1 { font-size: 19px; fill: #8a8a8a; } .wedge--dark .t1 { fill: var(--white); } .wedge .t2 { font-size: 20px; font-weight: 700; fill: var(--orange); } .wedge.is-active path { fill: var(--orange); } .wedge.is-active .t1, .wedge.is-active .t2 { fill: var(--white); font-weight: 700; } .hub { fill: #E6E6E6; stroke: var(--ground); stroke-width: 5; } .hub-t { fill: #6f6f6f; font-size: 15px; text-anchor: middle; font-family: var(--font); } /* a quadrant grows, moves out and lights up on hover */ .wheel:not(.wheel--score) .wedge > path, .wheel:not(.wheel--score) .wedge > text { transform-box: view-box; transform-origin: 200px 200px; transition: transform .35s var(--ease), fill .2s, stroke .2s, filter .25s; } .wheel:not(.wheel--score) .wedge[data-q="1"]:is(:hover, :focus-visible) > :is(path, text) { transform: translate(10px, -10px) scale(1.07); } .wheel:not(.wheel--score) .wedge[data-q="2"]:is(:hover, :focus-visible) > :is(path, text) { transform: translate(10px, 10px) scale(1.07); } .wheel:not(.wheel--score) .wedge[data-q="3"]:is(:hover, :focus-visible) > :is(path, text) { transform: translate(-10px, 10px) scale(1.07); } .wheel:not(.wheel--score) .wedge[data-q="4"]:is(:hover, :focus-visible) > :is(path, text) { transform: translate(-10px, -10px) scale(1.07); } .wheel:not(.wheel--score) .wedge:is(:hover, :focus-visible) > path { stroke: var(--orange); stroke-width: 4; filter: brightness(1.2) drop-shadow(0 0 14px rgba(232, 103, 10, .65)); } .wheel:not(.wheel--score) .wedge--light:hover > .t1 { fill: #4a4a4a; } .c-feature--panel .wedge { pointer-events: none; } .wheel a .wedge { pointer-events: auto; } /* the Consulting page wheel: each wedge links to its step on the Model page */ .wheel a:focus-visible .wedge > path { stroke: var(--orange); stroke-width: 4; } /* score wheel (health check) */ .wheel--score .wedge path { fill: #2a2a2a; } .wheel--score .wedge .t1 { fill: #bdbdbd; } .wheel--score .wedge.is-scored path { fill: rgba(232, 103, 10, var(--s, 0)); } .wheel--score .wedge.is-weak path { stroke: var(--white); stroke-width: 3; } @media (prefers-reduced-motion: reduce) { .wheel .wedge > path, .wheel .wedge > text { transition: none; } } /* journey: base = stacked screens (reduced motion); pinned on wider/narrow screens below */ .c-model__intro { padding-bottom: 32px; } .c-model__intro--page { padding-top: calc(var(--nav-h) + clamp(28px, 5vw, 56px)); } /* the Model page has no photo banner: start below the fixed header */ .zh__pin { background: var(--ground); display: flex; flex-direction: column; border-top: 1px solid var(--line); } .zh__stage { flex: 1; padding: clamp(40px, 6vw, 72px) var(--gutter) 32px; } .zh__title, .zq__title { text-align: center; color: var(--white); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; } .zh__grid { max-width: var(--max); margin: 32px auto 0; display: grid; grid-template-columns: 1fr minmax(300px, 460px) 1fr; grid-template-rows: auto auto; gap: 20px 40px; align-items: center; } .zh__wheel { position: relative; grid-column: 2; grid-row: 1 / span 2; } .zh__desc { color: var(--white); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; max-width: 330px; text-align: center; transition: opacity .5s var(--ease); } .zh__desc--4 { grid-column: 1; grid-row: 1; justify-self: end; } .zh__desc--3 { grid-column: 1; grid-row: 2; justify-self: end; } .zh__desc--1 { grid-column: 3; grid-row: 1; } .zh__desc--2 { grid-column: 3; grid-row: 2; } .zh__line { margin: 28px auto 0; max-width: 900px; text-align: center; color: var(--white); font-style: italic; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; transition: opacity .5s var(--ease); } .zh__line strong { font-weight: 700; font-size: 1.1em; } .zh__num { display: none; } .zh__strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(var(--gutter), calc((100% - 1320px) / 2)); background: var(--charcoal); border-top: 1px solid var(--line); } .zh__strip p { color: var(--white); font-size: clamp(17px, 1.9vw, 24px); line-height: 1.2; } .zh__strip img { height: clamp(22px, 2.3vw, 30px); width: auto; flex: none; } .zh__fixstrip { display: none; } .zh__pin > .zh__strip, .zh__fixstrip { transition: opacity .35s ease; } .zh.is-done .zh__pin > .zh__strip, .zh.is-done .zh__fixstrip { opacity: 0; pointer-events: none; } .zq { min-height: calc(100vh - var(--nav-h)); background: var(--ground); display: flex; flex-direction: column; border-top: 1px solid var(--line); } .zq__stage { flex: 1; padding: 40px var(--gutter) 48px; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 3.5vw, 44px); } .zq__body { max-width: 980px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: end; } .zq__visual { display: flex; flex-direction: column; align-items: flex-end; } .zq__num { font-size: clamp(110px, 13vw, 170px); line-height: .8; font-weight: 700; font-style: italic; color: var(--orange); margin: 0 8% -8px 0; } .zq__wedge { width: min(100%, 280px); } .zq__wedge path { fill: #474747; stroke: var(--white); stroke-width: 4; } .qw-g { fill: var(--white); font-size: 20px; font-family: var(--font); } .qw-o { fill: var(--orange); font-size: 21px; font-weight: 700; font-family: var(--font); } .zq__copy .icon-ring { margin-bottom: 14px; } .zq__name { display: flex; flex-direction: column; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; font-weight: 700; margin-bottom: 22px; } .zq__name .grey { font-weight: 400; } .zq__list { margin: 0; padding-left: 1.6em; color: var(--white); font-size: clamp(18px, 1.9vw, 24px); line-height: 1.55; } .zq__list li::marker { color: var(--orange); font-weight: 700; } .zq__statement { max-width: 980px; margin: 0 auto; text-align: center; color: var(--white); font-size: clamp(21px, 2.6vw, 32px); line-height: 1.3; } @keyframes numPop { from { opacity: 0; transform: translateY(20px) scale(.7); } } @media (min-width: 1025px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) { .zh { position: relative; } .zh__pin { position: sticky; top: var(--nav-h); z-index: 0; height: calc(100vh - var(--nav-h)); overflow: hidden; } .zh__stage { min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 18px var(--gutter) 10px; } .zh__grid { grid-template-columns: 1fr min(44vh, 460px) 1fr; margin-top: 16px; gap: 14px 40px; } .zh__line { margin-top: 16px; font-size: clamp(20px, 2.2vw, 30px); } .zh__wheel { transition: transform .9s var(--ease); } .zh .wedge { transform-box: view-box; transform-origin: 200px 200px; transition: transform .8s var(--ease), opacity .6s var(--ease); } .zh .wheel__ring, .zh .hub, .zh .hub-t { transition: opacity .6s var(--ease); } .zh.is-active .zh__wheel { transform: translateX(calc(-1 * min(23vw, 290px))); } .zh.is-active .zh__desc, .zh.is-active .zh__line { opacity: 0; pointer-events: none; } .zh.is-active .wedge { opacity: .14; } .zh.is-active .wheel__ring, .zh.is-active .hub, .zh.is-active .hub-t { opacity: .25; } .zh[data-active="1"] .wedge[data-q="1"] { opacity: 1; transform: translate(26px, -26px) scale(1.14); } .zh[data-active="2"] .wedge[data-q="2"] { opacity: 1; transform: translate(26px, 26px) scale(1.14); } .zh[data-active="3"] .wedge[data-q="3"] { opacity: 1; transform: translate(-26px, 26px) scale(1.14); } .zh[data-active="4"] .wedge[data-q="4"] { opacity: 1; transform: translate(-26px, -26px) scale(1.14); } .zh__num { display: block; position: absolute; top: -1%; right: -16%; z-index: 2; font-size: clamp(110px, 10vw, 170px); line-height: 1; font-weight: 700; font-style: italic; color: var(--orange); opacity: 0; pointer-events: none; } .zh.is-active .zh__num { opacity: 1; } .zh__num.is-pop { animation: numPop .6s cubic-bezier(.3, 1.5, .5, 1); } .zq { position: relative; z-index: 1; margin-left: 50%; width: 50%; background: transparent; border-top: 0; } .zq .zh__strip, .zq__title, .zq__visual { display: none; } .zq__stage { padding: clamp(96px, 14vh, 130px) var(--gutter) clamp(84px, 12vh, 110px) 24px; gap: clamp(16px, 2.6vh, 28px); } .zq__body { grid-template-columns: 1fr; max-width: 560px; margin: 0; } .zq__name { font-size: clamp(32px, min(3.6vw, 6vh), 52px); margin-bottom: clamp(10px, 2vh, 20px); } .zq__list { font-size: clamp(17px, min(1.7vw, 2.9vh), 23px); line-height: 1.5; } .zq__statement { max-width: 560px; margin: 0; text-align: left; font-size: clamp(18px, min(1.9vw, 3.2vh), 27px); } } /* phones and tablets: the wheel stays pinned at the top of the screen the whole way through the four steps, and each step's text scrolls up underneath it (never over it); the brand strip shows once, after step 4 */ @media (max-width: 1024px) { .zh { position: relative; } .zh__pin { position: sticky; top: var(--nav-h); z-index: 2; border-top: 0; box-shadow: 0 14px 18px -10px rgba(0, 0, 0, .7); } .zh__pin > .zh__strip, .zh__fixstrip, .zq:not(#zq4) .zh__strip, .zq__title, .zq__visual, .zh__desc, .zh__line { display: none; } .zh__stage { padding: 12px var(--gutter) 14px; } .zh__title { font-size: clamp(20px, 5.4vw, 28px); } .zh__grid { display: block; margin: 8px auto 0; } .zh__wheel { width: min(70vw, 34svh, 360px); margin: 0 auto; } .zh .wedge { transform-box: view-box; transform-origin: 200px 200px; transition: transform .8s var(--ease), opacity .6s var(--ease); } .zh .wheel__ring, .zh .hub, .zh .hub-t { transition: opacity .6s var(--ease); } .zh.is-active .wedge { opacity: .2; } .zh.is-active .wheel__ring, .zh.is-active .hub, .zh.is-active .hub-t { opacity: .3; } .zh[data-active="1"] .wedge[data-q="1"] { opacity: 1; transform: translate(14px, -14px) scale(1.08); } .zh[data-active="2"] .wedge[data-q="2"] { opacity: 1; transform: translate(14px, 14px) scale(1.08); } .zh[data-active="3"] .wedge[data-q="3"] { opacity: 1; transform: translate(-14px, 14px) scale(1.08); } .zh[data-active="4"] .wedge[data-q="4"] { opacity: 1; transform: translate(-14px, -14px) scale(1.08); } .zh__num { display: block; position: absolute; top: -4%; right: -14%; z-index: 2; font-size: clamp(60px, 16vw, 96px); line-height: 1; font-weight: 700; font-style: italic; color: var(--orange); opacity: 0; pointer-events: none; } .zh.is-active .zh__num { opacity: 1; } .zh__num.is-pop { animation: numPop .6s cubic-bezier(.3, 1.5, .5, 1); } .zq { position: relative; z-index: 1; min-height: 0; border-top: 0; } .zq__stage { padding: 28px var(--gutter) 44px; gap: 16px; } .zq#zq4 .zq__stage { padding-bottom: 56px; } .zq__body { grid-template-columns: 1fr; margin: 0; } .zq__copy .icon-ring { width: 44px; height: 44px; margin-bottom: 8px; } .zq__name { font-size: clamp(28px, 7.4vw, 40px); margin-bottom: 10px; } .zq__list { font-size: clamp(17px, 4.6vw, 21px); line-height: 1.5; } .zq__statement { margin: 0; text-align: left; font-size: clamp(18px, 5vw, 23px); } .zq#zq4 .zh__strip { display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: center; padding: 16px var(--gutter); } .zq#zq4 .zh__strip p { font-size: 16px; } .zq#zq4 .zh__strip img { height: 22px; } } @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .zh__pin { position: static; box-shadow: none; } } @media (prefers-reduced-motion: reduce), (min-width: 1025px) and (max-height: 639px) { .zh__pin > .zh__strip, .zq:not(#zq4) .zh__strip { display: none; } } @media (max-width: 900px) { .zh__grid, .zq__body { grid-template-columns: 1fr; } .zq__visual { align-items: center; } .zq__num { margin: 0 0 -8px; } } /* health check */ .check { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 32px; scroll-margin-top: 96px; } .check:not([hidden]) { animation: fadeUp .4s var(--ease); } .check__progress { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; color: var(--grey); font-size: 14px; } .check__bar { flex: 1; height: 6px; border-radius: 3px; background: #262626; overflow: hidden; } .check__bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .35s var(--ease); } .q { margin: 0; min-width: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--line); } .q:first-of-type { border-top: 0; padding-top: 0; } .q legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; color: var(--white); font-size: 18px; line-height: 1.4; } .q .scale { clear: both; } .q legend small { display: block; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; } .scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .scale label { position: relative; cursor: pointer; } .scale input { position: absolute; opacity: 0; } .scale span { display: grid; place-items: center; min-height: 46px; padding: 6px; border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .18); color: var(--muted); font-size: 14px; text-align: center; line-height: 1.2; transition: all .15s; } .scale label:hover span { border-color: var(--orange); color: var(--white); } .scale input:checked + span { background: rgba(232, 103, 10, .18); color: var(--white); box-shadow: inset 0 0 0 2px var(--orange); border-color: var(--orange); font-weight: 700; } .scale input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; } .check__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; } .check__side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 16px; } .check__side .wheel { max-width: 380px; margin: 0 auto; } .check__legend { color: var(--grey); font-size: 14px; text-align: center; } .results { display: grid; gap: 18px; animation: fadeUp .5s var(--ease); } .results h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--white); } .bars { display: grid; gap: 12px; } .bars div { display: grid; grid-template-columns: 170px 1fr 48px; gap: 12px; align-items: center; font-size: var(--fs-sm); color: var(--offwhite); } .bars i { height: 10px; border-radius: 5px; background: #262626; overflow: hidden; display: block; } .bars i b { display: block; height: 100%; background: var(--orange); border-radius: 5px; transition: width .8s var(--ease); } .bars div.is-low span:first-child { color: var(--orange); font-weight: 700; } .bars em { font-style: normal; color: var(--grey); text-align: right; } .reco { display: grid; gap: 10px; padding: 18px; border-radius: var(--r-md); background: var(--orange-soft); border: 1px solid rgba(232, 103, 10, .35); } .reco b, .reco a { color: var(--white); } .reco a { font-weight: 700; } .disclaim { color: var(--grey); font-size: 13px; } @media (max-width: 900px) { .check { grid-template-columns: 1fr; } .check__side { position: static; order: -1; } .check__side .wheel { max-width: 260px; } } @media (max-width: 640px) { .scale { grid-template-columns: 1fr 1fr; } .bars div { grid-template-columns: 1fr 48px; } .bars i { grid-column: 1 / -1; grid-row: 2; } } /* --------------------------------------------------------------------- C15 · ARTICLE — long-form reading on light paper: body text, headings, the post's own image or video, and share buttons. --------------------------------------------------------------------- */ .c-article__cover { position: relative; border-radius: var(--r-card); overflow: hidden; } .c-article__cover img:not(.fl__logo) { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; filter: var(--photo); } .c-article { background: var(--offwhite); color: var(--charcoal); padding: 110px 0 clamp(48px, 7vw, 88px); margin-top: -60px; } .c-article__body { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); font-size: var(--fs-body); line-height: 1.7; } .c-article__body h2 { margin: 1.6em 0 .5em; color: #151515; font-size: 28px; } .c-article__body p + p { margin-top: 1em; } .c-article .link { color: var(--orange-dark); } .c-article__fig { margin: 28px 0 32px; text-align: center; } .c-article__fig img { display: block; margin: 0 auto; max-width: 100%; max-height: 520px; width: auto; border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); } .c-article__fig video { display: block; width: auto; max-width: 100%; height: min(70vh, 640px); aspect-ratio: 480 / 848; margin: 0 auto; border-radius: var(--r-md); background: #000; object-fit: cover; } .c-article__fig figcaption { margin-top: 10px; font-size: 14px; color: #6b6b6b; font-style: italic; } .c-article__play { position: relative; display: inline-block; } .c-article__play span { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(232, 103, 10, .92); color: #fff; display: grid; place-items: center; font-size: 26px; padding-left: 4px; } .c-article__share { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; } /* ===================================================================== REDUCED MOTION ===================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .c-logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .js .fl .fl__line, .js .fl .fl__logo, .js .fl .fl__text { transform: none; opacity: 1; transition: none; } } /* ---------- C15 · ARTICLE: plain variant (legal pages) ---------- */ .c-article--plain { margin-top: 0; padding-top: clamp(40px, 5vw, 64px); } .c-article__updated { color: #6b6b6b; font-size: 15px; } .c-article__body ul, .c-article__body ol { margin: .8em 0 0; padding-left: 1.3em; display: grid; gap: .45em; } .c-article__body h2 { scroll-margin-top: calc(var(--nav-h) + 20px); } .c-article__toc { margin: 28px 0 8px; padding: 20px 24px; border-radius: var(--r-md); background: #fff; border: 1px solid #e3e3e3; } .c-article__toc .eyebrow { font-size: 17px; color: var(--orange-dark); } .c-article__toc .eyebrow::before { background: var(--orange-dark); } .c-article__toc ol { columns: 2; column-gap: 32px; display: block; margin-top: 10px; font-size: 16px; } .c-article__toc li { margin-bottom: 4px; break-inside: avoid; } .c-article a:not(.btn):not(.link) { color: #1A1A1A; font-weight: 700; text-decoration-color: var(--orange-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* dark text keeps AA contrast on the light paper; the underline carries the brand orange */ .c-article a:not(.btn):not(.link):hover { color: var(--orange-dark); } .c-article .link { color: #1A1A1A; } .c-article .link .arr { color: var(--orange-dark); } mark.fill { background: #FFE2CC; color: #7A3300; padding: 0 4px; border-radius: 4px; font-weight: 700; } /* details still to be filled in */ @media (max-width: 640px) { .c-article__toc ol { columns: 1; } } /* privacy link in form notes */ .fine-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .fine-link:hover { color: var(--white); text-decoration-color: var(--orange); } /* ========================================================= SCROLL EFFECTS: Training and course pages (app.js adds .fx to ; none with reduced motion) ========================================================= */ /* headings rise in word by word; the orange words then get an underline sweep */ .fx .fx-h .fxw { display: inline-block; vertical-align: top; } .fx .fx-h .fxw__i { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s var(--ease) calc(var(--i) * 55ms), transform .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 55ms); } .fx .fx-h.is-fx .fxw__i { opacity: 1; transform: none; } .fx .fx-h .o { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .7s var(--ease) calc(var(--words, 6) * 55ms + .35s); } .fx .fx-h.is-fx .o { background-size: 100% 2px; } /* the section label's dash draws itself in */ .fx .c-heading .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .1s; } .fx .c-heading:has(.is-fx) .eyebrow::before { transform: none; } /* lists, chips, table rows and grids: one after another */ .fx .fx-st > * { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease) calc(var(--i) * 70ms), transform .6s var(--ease) calc(var(--i) * 70ms); } .fx .fx-st.is-fx > * { opacity: 1; transform: none; } .fx .chips.fx-st > * { transform: scale(.8); } .fx .chips.fx-st.is-fx > * { transform: none; transition-timing-function: var(--ease), cubic-bezier(.34, 1.56, .64, 1); } .fx tbody.fx-st > * { transform: translateX(-24px); } .fx tbody.fx-st.is-fx > * { transform: none; } /* photos: a wipe from the left, then they drift with the scroll */ .fx .fx-m { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); } .fx .fx-m.is-fx { clip-path: inset(0 0 0 0); } .fx .fx-m--drift img { scale: 1.14; translate: 0 var(--py, 0); } .fx .fx-m--drift.is-fx img { animation: fxSettle 1.4s cubic-bezier(.2, .8, .2, 1); } @keyframes fxSettle { from { scale: 1.3; } to { scale: 1.14; } } /* the hero photo moves slower than the page; its text rises and fades as you leave */ .fx .c-hero__bg { translate: 0 var(--hy, 0); } .fx .c-hero--photo > .container { translate: 0 calc(var(--hy, 0) * -1); will-change: opacity; } /* forms that start collapsed (the free assessment): just the button until it is clicked, then the fields pop in */ .js .c-form.is-collapsed > :not(button[type="submit"]) { display: none; } .js .c-form.is-opening > .field, .js .c-form.is-opening > .check-opt { animation: fadeUp .45s var(--ease) both; } .js .c-form.is-opening > .field:nth-child(2) { animation-delay: .05s; } .js .c-form.is-opening > .field:nth-child(3) { animation-delay: .1s; } .js .c-form.is-opening > .field:nth-child(4) { animation-delay: .15s; } .js .c-form.is-opening > .field:nth-child(5) { animation-delay: .2s; } /* contact: no option is chosen at first; the fields appear once the visitor picks one */ .c-form__pick { margin: 4px 0 0; color: var(--muted); font-size: 15px; text-align: center; } .js .c-form.is-unchosen .c-form__fields, .js .c-form.is-unchosen .c-form__actions { display: none; } .c-form:not(.is-unchosen) .c-form__pick, html:not(.js) .c-form__pick { display: none; } .js .c-form[data-intent-form].is-opening .c-form__fields, .js .c-form[data-intent-form].is-opening .c-form__actions { animation: fadeUp .45s var(--ease) both; } /* "Why strategies stall": the plane and the ship / speedboat photos brighter (they read too dark on the black page) */ .vis--plane .vis__bg { filter: brightness(1.12); } .vis--plane .vis__sky { background: radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, .45), transparent 50%); } .vis--split .vis__half img { filter: grayscale(1) contrast(.88) brightness(1.32); } /* master course in the blue of its brochure (mirrors the sustainability teal) */ .chip--blue { background: rgba(13, 113, 186, .18); color: #4FA3E0; } .c-course--blue { --accent: var(--blue); } .c-course--blue .ticks li::before { background: rgba(13, 113, 186, .18); } .c-course--blue .c-course__title .o, .c-course--blue .c-heading .o, .c-hero:has(.chip--blue) .h1 .o { color: var(--blue); } a.c-card[href="course-master.html"] .c-card__title .o, a.c-card[href="course-master.html"] .tag { color: var(--blue); } .c-course--blue .c-card--fact .icon-badge { background: rgba(13, 113, 186, .18); color: var(--blue); } .compare [data-col="master"] { --accent: var(--blue); } .compare thead th[data-col="master"] .o, .compare thead th[data-col="master"] small { color: var(--blue); } .compare .is-rec[data-col="master"] { box-shadow: inset 0 0 0 2px var(--blue); } /* footer: a clear "Follow us on LinkedIn" button */ .foot__li { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 16px; border: 1px solid var(--orange); border-radius: var(--r-pill); color: var(--white); font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s, color .2s; } .foot__li svg { width: 18px; height: 18px; color: var(--orange); transition: color .2s; } .foot__li:hover, .foot__li:focus-visible { background: var(--orange); color: var(--white); } .foot__li:hover svg, .foot__li:focus-visible svg { color: var(--white); } /* master course photo lockup: line in the same blue as its logo */ .fl:has(.fl__logo[src*="iso-blue"]) .fl__line { background: #2E8FD6; box-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 0 8px rgba(46, 143, 214, .45); } /* course chips: a lighter tint of the course colour so the small text stays readable on the dark background */ .chip--teal { color: #2BBF6A; } /* "Follow us on LinkedIn" band, in LinkedIn's colours: LinkedIn blue (#0A66C2) for the button, its lighter dark-mode blue (#378FE9) for text on the dark band; its own photo (the road trip), used nowhere else */ .c-cta--li { --li: #0A66C2; --li-text: #378FE9; } .c-cta--li.is-near::before { background-image: url("../assets/img/photos/post-hero.webp"); background-position: 60% 62%; } .c-cta--li .o, .c-cta--li .eyebrow { color: var(--li-text); } .c-cta--li .eyebrow::before { background: var(--li-text); } .btn--li { background: var(--li, #0A66C2); border-color: var(--li, #0A66C2); color: #fff; } .btn--li:hover, .btn--li:focus-visible { background: #004182; border-color: #004182; color: #fff; } .btn__li { width: 18px; height: 18px; flex: none; margin-right: 10px; } /* Insights, keynotes: the collage of Fernando speaking, under "Invite Fernando to speak"; it stays in view beside the timeline */ #keynotes .c-feature__body { align-self: stretch; } /* full height of the timeline, so the collage can stay in view */ .k-collage { margin: 32px 0 0; } /* tall enough to fill the column beside the timeline */ .k-collage img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--sh-2); } .k-collage figcaption { margin-top: 10px; } @media (max-width: 900px) { .k-collage { position: static; } } /* Insights, blog: "Follow us on LinkedIn" card in the open space beside "Notes from the field" */ .blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 8px; } .blog-head .c-heading { margin-bottom: 0; } .li-follow { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; border: 1px solid rgba(10, 102, 194, .55); border-radius: var(--r-card); background: rgba(10, 102, 194, .1); color: var(--white); text-decoration: none; transition: background .2s, border-color .2s, transform .2s var(--ease); } .li-follow:hover, .li-follow:focus-visible { background: rgba(10, 102, 194, .2); border-color: #378FE9; transform: translateY(-2px); } .li-follow__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: #0A66C2; color: #fff; } .li-follow__icon .btn__li { margin: 0; width: 22px; height: 22px; } .li-follow__text { display: grid; gap: 2px; line-height: 1.25; } .li-follow__text b { font-size: 16px; } .li-follow__text small { color: var(--muted); font-size: 14px; } .li-follow .btn--li { pointer-events: none; } /* LinkedIn: follow Strat.exe (solid LinkedIn blue) or Fernando Baz (outlined) */ .btn--li-outline { background: transparent; border: 1px solid #378FE9; color: #fff; } .btn--li-outline .btn__li { color: #378FE9; } .btn--li-outline:hover, .btn--li-outline:focus-visible { background: #0A66C2; border-color: #0A66C2; color: #fff; } .btn--li-outline:hover .btn__li, .btn--li-outline:focus-visible .btn__li { color: #fff; } .li-actions { display: grid; gap: 12px; } .li-follow__btns { display: flex; gap: 8px; flex-wrap: wrap; } .li-follow .btn--li { pointer-events: auto; } .li-follow .btn__li { width: 15px; height: 15px; margin-right: 7px; } .li-follow .li-follow__icon .btn__li { width: 22px; height: 22px; margin: 0; } .li-follow:hover { transform: none; } .foot__lis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .foot__lis .foot__li { margin-top: 0; } /* ========================================================= "Follow us on LinkedIn" panel (home and About): LinkedIn-style, no photo ========================================================= */ .li-band { --li: #0A66C2; --li-text: #378FE9; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 40px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-card); border: 1px solid rgba(55, 143, 233, .28); background: radial-gradient(120% 140% at 100% 0%, rgba(10, 102, 194, .32), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(10, 102, 194, .14), transparent 60%), #0f1216; box-shadow: var(--sh-2); } .li-band__copy { position: relative; z-index: 1; } .li-band__logo { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 12px; background: var(--li); color: #fff; box-shadow: 0 10px 30px rgba(10, 102, 194, .45); } .li-band__logo .btn__li { width: 28px; height: 28px; margin: 0; } .li-band .eyebrow { color: var(--li-text); } .li-band .eyebrow::before { background: var(--li-text); } .li-band .h2 { margin-top: 8px; } .li-band .lead { margin-top: 12px; max-width: 520px; } .li-blue { color: var(--li-text); } .li-band__cards { position: relative; z-index: 1; display: grid; gap: 14px; } .li-card { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--white); text-decoration: none; transition: transform .25s var(--ease), border-color .25s, background .25s; } .li-card:hover, .li-card:focus-visible { transform: translateY(-3px); border-color: rgba(55, 143, 233, .7); background: rgba(10, 102, 194, .12); } .li-card__avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: #1a1d22; border: 2px solid rgba(255, 255, 255, .14); display: grid; place-items: center; } .li-card__avatar img { width: 100%; height: 100%; object-fit: cover; } .li-card__avatar--logo { border-radius: 12px; background: none; border: 0; } .li-card__avatar--logo img { width: 100%; height: 100%; object-fit: contain; } .li-card__who { display: grid; gap: 3px; min-width: 0; flex: 1; line-height: 1.25; } .li-card__who b { font-size: 17px; } .li-card__who small { color: var(--muted); font-size: 13.5px; } .li-card__btn { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 9px 16px; border-radius: var(--r-pill); background: var(--li); color: #fff; font-weight: 700; font-size: 14px; transition: background .2s; } .li-card__btn .btn__li { width: 15px; height: 15px; margin: 0; } .li-card:hover .li-card__btn, .li-card:focus-visible .li-card__btn { background: #004182; } @media (max-width: 860px) { .li-band { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 420px) { .li-card__who small { display: none; } } /* ========================================================= Phones and small tablets ========================================================= */ .c-steps--numbered h3 { line-height: 1.25; } /* two-line step titles (Kaplan & Norton, course outline) */ } @media (max-width: 600px) { /* course cards: "Pre-book your seat" and "Email me the brochure" as two full-width buttons, one under the other */ .prebook { max-width: none; width: 100%; } .prebook .btn, .prebook + .btn { width: 100%; justify-content: center; margin-left: 0; align-self: stretch; } .c-course { padding: 22px 20px; } /* more room inside the course cards */ /* Insights: LinkedIn follow card stacks, buttons side by side underneath */ .li-follow { flex-wrap: wrap; } .li-follow__text { flex: 1 1 0; min-width: 0; } .li-follow__btns { flex: 1 0 100%; } .li-follow__btns .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-inline: 12px; } }