/* ========================================================================== Locate2u Sales Pitch Deck Design tokens lifted verbatim from https://www.locate2u.com/css/styles.min.css so this extension is visually identical to the main site. ========================================================================== */ :root { /* Brand — matches locate2u.com exactly */ --color-primary: #2B93FF; --color-primary-dark: #1a6fa3; --color-primary-light: #5bb8f0; --color-primary-50: #eef7fc; --color-primary-100: #d4ecf8; --color-navy: #1a3c6e; --color-navy-dark: #0f2847; --color-navy-light: #2a5494; --color-green: #1ecb9d; --color-green-light: #e8f5f0; --color-pink: #e8457a; --color-amber: #f5a623; --color-purple: #8b5cf6; /* Product category colours (same mapping as the marketing site) */ --color-cat-route: #2B93FF; --color-cat-route-bg: #eef7fc; --color-cat-delivery: #1a3c6e; --color-cat-delivery-bg: #e8eef5; --color-cat-lastmile: #1ecb9d; --color-cat-lastmile-bg: #e8f5f0; --color-cat-fleet: #8b5cf6; --color-cat-fleet-bg: #f0e6ff; --color-cat-logistics: #f5a623; --color-cat-logistics-bg: #fef3e2; /* Neutrals */ --color-white: #ffffff; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; /* Semantic tokens — the theme blocks below remap only these. Everything else (brand blue, navy, green, amber, purple) stays constant across both themes. */ --surface-page: var(--color-gray-50); --surface-card: var(--color-white); --surface-sunken: var(--color-gray-100); --surface-bar: rgba(255, 255, 255, .95); --text-heading: var(--color-navy); --text-body: var(--color-gray-700); --text-muted: var(--color-gray-500); --text-faint: var(--color-gray-400); --border-color: var(--color-gray-200); --border-subtle: var(--color-gray-100); --accent-text: var(--color-primary-dark); --danger-wash: #fdf2f6; --gradient-tint: linear-gradient(135deg, #f8fafc 0, #eef7fc 30%, #f0f9ff 60%, #f8fafc 100%); --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .15); --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; --deck-bar-height: 64px; --container-max: 1200px; } /* ========================================================================== THEME — light by default, dark follows the OS unless the viewer picks one. An explicit choice sets data-theme on and wins in both directions. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-page: #0a1523; --surface-card: #122032; --surface-sunken: #1a2b40; --surface-bar: rgba(10, 21, 35, .95); --text-heading: #f1f5f9; --text-body: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --border-color: #24384f; --border-subtle: #1b2b3f; --accent-text: #7cc4ff; --danger-wash: rgba(232, 69, 122, .14); --gradient-tint: linear-gradient(135deg, #0a1523 0, #102338 30%, #0e2035 60%, #0a1523 100%); /* Tinted washes go translucent so they read on a dark ground. */ --color-primary-50: rgba(43, 147, 255, .16); --color-primary-100: rgba(43, 147, 255, .30); --color-cat-route-bg: rgba(43, 147, 255, .16); --color-cat-delivery-bg: rgba(124, 180, 255, .16); --color-cat-lastmile-bg: rgba(30, 203, 157, .16); --color-cat-fleet-bg: rgba(139, 92, 246, .20); --color-cat-logistics-bg: rgba(245, 166, 35, .16); /* The 'delivery' category colour is brand navy, invisible on a dark card. */ --color-cat-delivery: #7cb3ff; } } :root[data-theme="dark"] { --surface-page: #0a1523; --surface-card: #122032; --surface-sunken: #1a2b40; --surface-bar: rgba(10, 21, 35, .95); --text-heading: #f1f5f9; --text-body: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --border-color: #24384f; --border-subtle: #1b2b3f; --accent-text: #7cc4ff; --danger-wash: rgba(232, 69, 122, .14); --gradient-tint: linear-gradient(135deg, #0a1523 0, #102338 30%, #0e2035 60%, #0a1523 100%); /* Tinted washes go translucent so they read on a dark ground. */ --color-primary-50: rgba(43, 147, 255, .16); --color-primary-100: rgba(43, 147, 255, .30); --color-cat-route-bg: rgba(43, 147, 255, .16); --color-cat-delivery-bg: rgba(124, 180, 255, .16); --color-cat-lastmile-bg: rgba(30, 203, 157, .16); --color-cat-fleet-bg: rgba(139, 92, 246, .20); --color-cat-logistics-bg: rgba(245, 166, 35, .16); /* The 'delivery' category colour is brand navy, invisible on a dark card. */ --color-cat-delivery: #7cb3ff; } /* Logo swap: the classic mark is dark navy (unreadable on a dark bar), the blue mark has white counters (invisible on a light one). Ship both, show one. */ .brand-logo--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo--light { display: none; } :root:not([data-theme="light"]) .brand-logo--dark { display: block; } } :root[data-theme="dark"] .brand-logo--light { display: none; } :root[data-theme="dark"] .brand-logo--dark { display: block; } /* Theme toggle shows the icon for the mode you'd switch TO. */ .theme-toggle__moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__sun { display: none; } :root:not([data-theme="light"]) .theme-toggle__moon { display: block; } } :root[data-theme="dark"] .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: block; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-x: hidden; } body { font-family: var(--font-family); color: var(--text-body); line-height: 1.6; background: var(--surface-sunken); -webkit-font-smoothing: antialiased; overflow-x: hidden; } [hidden] { display: none !important; } img { max-width: 100%; } /* -------------------------------------------------------------------------- Buttons — same shape/weights as the marketing site -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: inherit; font-weight: 600; font-size: var(--font-size-base); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 2px solid transparent; transition: all var(--transition-base); white-space: nowrap; text-decoration: none; cursor: pointer; } .btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn--outline { background: transparent; color: var(--text-heading); border-color: var(--border-color); } .btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn--white { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); } .btn--white:hover { background: #eef7fc; } .btn--lg { font-size: var(--font-size-lg); padding: var(--space-4) var(--space-8); } .btn--full { width: 100%; } .btn:disabled { opacity: .55; cursor: not-allowed; } /* ========================================================================== 1. LOGIN GATE ========================================================================== */ .gate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: radial-gradient(1000px 600px at 15% 10%, rgba(43, 147, 255, .22), transparent 60%), radial-gradient(800px 500px at 85% 85%, rgba(30, 203, 157, .16), transparent 60%), linear-gradient(145deg, #1a3c6e 0%, #0f2847 100%); } .gate__grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; } .gate__card { position: relative; width: 100%; max-width: 440px; background: var(--surface-card); border-radius: var(--radius-2xl); padding: var(--space-10); box-shadow: var(--shadow-2xl); text-align: center; } .gate__logo { height: 46px; width: auto; object-fit: contain; margin-bottom: var(--space-6); } .gate__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-4); } .gate__title { font-size: var(--font-size-2xl); font-weight: 800; color: var(--text-heading); letter-spacing: -.02em; margin-bottom: var(--space-2); } .gate__subtitle { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-8); } .gate__label { display: block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); } .gate__code { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-6); } .gate__digit { width: 60px; height: 70px; text-align: center; font-family: inherit; font-size: var(--font-size-3xl); font-weight: 700; color: var(--text-heading); background: var(--surface-sunken); border: 2px solid var(--border-color); border-radius: var(--radius-lg); transition: all var(--transition-fast); -moz-appearance: textfield; /* Mask the code without using type="password", which invites password-manager autofill into single-character boxes. Firefox shows the digit, which is fine for an internal code. */ -webkit-text-security: disc; text-security: disc; caret-color: var(--color-primary); } .gate__digit::-webkit-outer-spin-button, .gate__digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .gate__digit:focus { outline: none; background: var(--surface-card); border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(43, 147, 255, .14); } .gate__digit--filled { background: var(--surface-card); border-color: var(--color-primary-light); } .gate--error .gate__card { animation: gate-shake 420ms ease; } .gate--error .gate__digit { border-color: var(--color-pink); background: var(--danger-wash); } @keyframes gate-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } } .gate__error { min-height: 20px; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-pink); margin-bottom: var(--space-4); } .gate__footnote { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--font-size-xs); color: var(--text-faint); line-height: 1.5; } /* ========================================================================== 2. DECK CHROME (top bar, progress, nav) ========================================================================== */ .deck { min-height: 100vh; padding-top: var(--deck-bar-height); } .deck-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--deck-bar-height); z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-6); background: var(--surface-bar); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); } .deck-bar__logo { height: 34px; width: auto; object-fit: contain; flex-shrink: 0; } .deck-bar__left, .deck-bar__right { display: flex; align-items: center; gap: var(--space-3); } .deck-bar__tag { display: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } @media (min-width: 900px) { .deck-bar__tag { display: inline-flex; } } .deck-bar__counter { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; } .deck-bar__counter strong { color: var(--text-heading); font-weight: 800; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-body); cursor: pointer; transition: all var(--transition-fast); } .icon-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-50); } .icon-btn:disabled { opacity: .35; cursor: not-allowed; } .deck-progress { position: fixed; top: var(--deck-bar-height); left: 0; right: 0; height: 3px; background: var(--surface-sunken); z-index: 1000; } .deck-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--color-primary), var(--color-green)); transition: width var(--transition-slow); } /* Slide index drawer */ .deck-index { position: fixed; inset: 0; z-index: 1500; display: none; } .deck-index[data-open="true"] { display: block; } .deck-index__scrim { position: absolute; inset: 0; background: rgba(15, 40, 71, .45); backdrop-filter: blur(2px); } .deck-index__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--surface-card); box-shadow: var(--shadow-2xl); padding: var(--space-6); overflow-y: auto; } .deck-index__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } .deck-index__title { font-size: var(--font-size-lg); font-weight: 800; color: var(--text-heading); } .deck-index__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); } .deck-index__btn { display: flex; align-items: baseline; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-3); border: none; border-radius: var(--radius-md); background: transparent; font-family: inherit; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-body); cursor: pointer; transition: all var(--transition-fast); } .deck-index__btn:hover { background: var(--surface-sunken); color: var(--text-heading); } .deck-index__btn[aria-current="true"] { background: var(--color-primary-50); color: var(--accent-text); font-weight: 700; } .deck-index__num { font-size: var(--font-size-xs); font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 20px; } .deck-index__btn[aria-current="true"] .deck-index__num { color: var(--color-primary); } /* Floating prev/next */ .deck-nav { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--surface-bar); backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); } .deck-nav__hint { display: none; padding: 0 var(--space-3); font-size: var(--font-size-xs); font-weight: 600; color: var(--text-faint); } @media (min-width: 700px) { .deck-nav__hint { display: block; } } /* On phones the pill would float over the content it's meant to help you read — the header already carries prev/next there, and swipe works. */ @media (max-width: 767px) { .deck-nav { display: none; } .slide { padding-bottom: var(--space-12); } } kbd { display: inline-block; padding: 1px 5px; border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-sunken); font-family: inherit; font-size: 10px; font-weight: 700; color: var(--text-body); } /* ========================================================================== 3. SLIDES ========================================================================== */ .slide { display: none; min-height: calc(100vh - var(--deck-bar-height)); padding: var(--space-16) var(--space-6) calc(var(--space-20) + var(--space-8)); } .slide[data-active="true"] { display: flex; animation: slide-in var(--transition-slow) both; } @keyframes slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .slide[data-active="true"], .gate--error .gate__card { animation: none; } } /* `margin: auto` centres the slide vertically when there is room, but unlike `align-items: center` it never overflows past the slide's own padding — so tall slides on short screens stay clear of the floating nav pill and scroll properly. */ .slide__inner { width: 100%; max-width: var(--container-max); margin: auto; } /* Short viewports (laptops in a meeting room, projectors) get tighter padding. */ @media (max-height: 800px) { .slide { padding-top: var(--space-10); padding-bottom: calc(var(--space-16) + var(--space-6)); } } /* Navy slides are dark in BOTH themes — they use the literal brand navy, never the theme surface tokens, so the deck keeps its signature look when the lights go out. */ .slide--navy { background: radial-gradient(900px 600px at 12% 12%, rgba(43, 147, 255, .25), transparent 62%), radial-gradient(700px 500px at 88% 82%, rgba(30, 203, 157, .18), transparent 60%), linear-gradient(145deg, #1a3c6e 0%, #0f2847 100%); color: var(--color-white); } .slide--tint { background: var(--gradient-tint); } .slide--white { background: var(--surface-card); } /* Slide typography */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-50); color: var(--accent-text); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-4); } .slide--navy .eyebrow { background: rgba(255, 255, 255, .12); color: #bfe0ff; } .slide__title { font-size: clamp(1.75rem, 3.6vw, var(--font-size-5xl)); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--text-heading); margin-bottom: var(--space-4); } .slide--navy .slide__title { color: var(--color-white); } .slide__lead { font-size: var(--font-size-lg); color: var(--text-muted); max-width: 760px; margin-bottom: var(--space-10); } .slide--navy .slide__lead { color: rgba(255, 255, 255, .78); } .text-primary { color: var(--color-primary); } /* -------------------------------------------------------------------------- Cover slide -------------------------------------------------------------------------- */ .cover { display: grid; gap: var(--space-12); align-items: center; } @media (min-width: 1000px) { .cover { grid-template-columns: 1.15fr .85fr; } } .cover__logo { height: 58px; width: auto; object-fit: contain; margin-bottom: var(--space-8); } .cover__title { font-size: clamp(2.25rem, 5.2vw, var(--font-size-6xl)); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; color: var(--color-white); margin-bottom: var(--space-5); } .cover__title span { background: linear-gradient(90deg, #7cc4ff, var(--color-green)); -webkit-background-clip: text; background-clip: text; color: transparent; } .cover__lead { font-size: var(--font-size-xl); color: rgba(255, 255, 255, .8); max-width: 560px; margin-bottom: var(--space-8); } .cover__meta { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, .15); } .cover__meta-item { font-size: var(--font-size-sm); } .cover__meta-label { display: block; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: 2px; } .cover__meta-value { font-weight: 700; color: var(--color-white); } .cover__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .cover__stat { padding: var(--space-6); border-radius: var(--radius-xl); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); } .cover__stat-value { font-size: var(--font-size-4xl); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--color-white); margin-bottom: var(--space-2); } .cover__stat-label { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .65); } /* -------------------------------------------------------------------------- Generic card grids -------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .card { padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); transition: all var(--transition-base); } .card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-lg); transform: translateY(-3px); } .slide--navy .card { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); } .slide--navy .card:hover { border-color: rgba(255, 255, 255, .3); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .card__icon--route { background: var(--color-cat-route-bg); color: var(--color-cat-route); } .card__icon--delivery { background: var(--color-cat-delivery-bg); color: var(--color-cat-delivery); } .card__icon--lastmile { background: var(--color-cat-lastmile-bg); color: var(--color-cat-lastmile); } .card__icon--fleet { background: var(--color-cat-fleet-bg); color: var(--color-cat-fleet); } .card__icon--logistics { background: var(--color-cat-logistics-bg); color: var(--color-cat-logistics); } .slide--navy .card__icon { background: rgba(255, 255, 255, .12); color: var(--color-white); } .card__title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-heading); margin-bottom: var(--space-2); } .slide--navy .card__title { color: var(--color-white); } .card__text { font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.6; } .slide--navy .card__text { color: rgba(255, 255, 255, .72); } .card__list { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .card__list li { position: relative; padding-left: var(--space-5); font-size: var(--font-size-sm); color: var(--text-body); } .card__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); } .slide--navy .card__list li { color: rgba(255, 255, 255, .75); } .slide--navy .card__list li::before { background: var(--color-green); } /* -------------------------------------------------------------------------- Problem slide (pain vs. gain) -------------------------------------------------------------------------- */ .pain-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); } .pain-list li { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-color); border-left: 4px solid var(--color-pink); border-radius: var(--radius-lg); } .pain-list--gain li { border-left-color: var(--color-green); } .pain-list strong { display: block; color: var(--text-heading); font-size: var(--font-size-base); margin-bottom: 2px; } .pain-list span { font-size: var(--font-size-sm); color: var(--text-muted); } /* -------------------------------------------------------------------------- Stats strip -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); } .stat { padding: var(--space-6); text-align: center; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); } .slide--navy .stat { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); } .stat__value { font-size: var(--font-size-4xl); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--color-primary); margin-bottom: var(--space-2); } .slide--navy .stat__value { color: var(--color-white); } .stat__label { font-size: var(--font-size-sm); color: var(--text-muted); } .slide--navy .stat__label { color: rgba(255, 255, 255, .65); } /* -------------------------------------------------------------------------- Team -------------------------------------------------------------------------- */ .team { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .team__card { display: flex; flex-direction: column; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); transition: all var(--transition-base); } .team__card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-lg); } .team__card--lead { border-color: var(--color-primary); box-shadow: var(--shadow-md); } @media (min-width: 900px) { .team__card--lead { grid-column: span 2; flex-direction: row; gap: var(--space-6); align-items: flex-start; } } .team__avatar { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary), var(--color-navy)); color: var(--color-white); font-size: var(--font-size-xl); font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--space-4); } .team__card--lead .team__avatar { width: 84px; height: 84px; font-size: var(--font-size-2xl); } /* Photo avatars reuse the initials circle's box so sizing stays in one place. */ .team__avatar--photo { display: block; object-fit: cover; background: var(--surface-sunken); box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--color-primary); } @media (min-width: 900px) { .team__card--lead .team__avatar { margin-bottom: 0; } } .team__name { font-size: var(--font-size-xl); font-weight: 800; color: var(--text-heading); letter-spacing: -.02em; } .team__role { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-3); } .team__bio { font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.65; } .team__bio+.team__bio { margin-top: var(--space-3); } .team__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .tag { padding: 3px var(--space-3); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--text-body); font-size: var(--font-size-xs); font-weight: 600; } .tag--accent { background: var(--color-primary-50); color: var(--accent-text); } /* -------------------------------------------------------------------------- Build process timeline -------------------------------------------------------------------------- */ .timeline { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: step; } .timeline__step { position: relative; padding: var(--space-6); padding-top: var(--space-10); background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); } .timeline__step::before { counter-increment: step; content: counter(step); position: absolute; top: var(--space-5); left: var(--space-6); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-sm); font-weight: 800; } .timeline__title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-heading); margin-bottom: var(--space-2); } .timeline__text { font-size: var(--font-size-sm); color: var(--text-muted); } .timeline__meta { display: inline-block; margin-top: var(--space-3); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-green); } /* -------------------------------------------------------------------------- Pricing -------------------------------------------------------------------------- */ .plans { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .plan { padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); } .plan--featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-xl); position: relative; } .plan__flag { position: absolute; top: -13px; left: var(--space-8); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .plan__name { font-size: var(--font-size-xl); font-weight: 800; color: var(--text-heading); margin-bottom: var(--space-2); } .plan__price { font-size: var(--font-size-3xl); font-weight: 900; color: var(--text-heading); letter-spacing: -.03em; margin-bottom: var(--space-1); } .plan__price small { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-muted); letter-spacing: normal; } .plan__note { font-size: var(--font-size-sm); color: var(--text-muted); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); } .plan__features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .plan__features li { position: relative; padding-left: var(--space-6); font-size: var(--font-size-sm); color: var(--text-body); } .plan__features li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 8px; border-left: 2px solid var(--color-green); border-bottom: 2px solid var(--color-green); transform: rotate(-45deg); } /* -------------------------------------------------------------------------- Logos / industries / misc -------------------------------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--space-3); } .chip { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--surface-card); border: 1px solid var(--border-color); font-size: var(--font-size-sm); font-weight: 600; color: var(--text-body); transition: all var(--transition-fast); } .chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .slide--navy .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .85); } .callout { display: flex; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-primary-50); border: 1px solid var(--color-primary-100); margin-top: var(--space-8); } .callout__icon { flex-shrink: 0; color: var(--color-primary); } .callout__title { font-weight: 700; color: var(--text-heading); margin-bottom: var(--space-1); } .callout__text { font-size: var(--font-size-sm); color: var(--text-body); } .slide--navy .callout { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); } .slide--navy .callout__title { color: var(--color-white); } .slide--navy .callout__text { color: rgba(255, 255, 255, .75); } .slide--navy .callout__icon { color: var(--color-green); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); } .split { display: grid; gap: var(--space-10); align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } } .split__heading { font-size: var(--font-size-lg); font-weight: 800; color: var(--text-heading); margin-bottom: var(--space-4); } .slide--navy .split__heading { color: var(--color-white); } /* -------------------------------------------------------------------------- Print / PDF export -------------------------------------------------------------------------- */ @media print { .deck-bar, .deck-progress, .deck-nav, .deck-index, .gate { display: none !important; } .deck { padding-top: 0; } .slide { display: flex !important; min-height: auto; page-break-after: always; break-after: page; padding: var(--space-8); animation: none !important; } .slide--navy { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .card:hover { transform: none; } }