@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ============================================================ TOKENS — bright, Apple-system identity. Each page commits to one accent from Apple's own system palette (set via data-accent on ), the way each Apple product page owns its own color. ============================================================ */ :root { --ivory: #F5F5F7; --charcoal:#1D1D1F; --stone: #6E6E73; --slate: #000000; --amber: #FF453A; --amber-lt:#FF8981; --white: #FFFFFF; --accent: #0A84FF; --accent-lt: #5EB1FF; /* Semantic – light */ --bg: #FFFFFF; --bg-alt: var(--ivory); --bg-dark: #000000; --bg-darker: #000000; --text: var(--charcoal); --text-muted: var(--stone); --text-light: #FFFFFF; --border: rgba(0,0,0,.09); --shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px -14px rgba(0,0,0,.14); --shadow-lg: 0 24px 64px -20px rgba(0,0,0,.24); /* Layout */ --nav-h: 72px; --max-w: 1200px; --gutter: clamp(1.25rem,5vw,3.5rem); --section-py: clamp(4rem,8vw,8rem); /* Type scale */ --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-lg: 1.125rem; --t-xl: 1.25rem; --t-2xl: 1.5rem; --t-3xl: 2rem; --t-4xl: clamp(2.25rem,4.5vw,3.25rem); --t-5xl: clamp(2.75rem,5.5vw,4.5rem); --t-6xl: clamp(3.25rem,7vw,6.5rem); --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif; --ease: .3s cubic-bezier(.22,1,.36,1); --ease-slow: .5s cubic-bezier(.22,1,.36,1); } /* Per-page accents — one committed color per page, Apple-product-page style */ :root[data-accent="blue"] { --accent: #0A84FF; --accent-lt: #5EB1FF; } :root[data-accent="green"] { --accent: #30D158; --accent-lt: #7BE39C; } :root[data-accent="orange"] { --accent: #FF9F0A; --accent-lt: #FFC061; } :root[data-accent="pink"] { --accent: #FF375F; --accent-lt: #FF7A96; } :root[data-accent="purple"] { --accent: #BF5AF2; --accent-lt: #D699F7; } :root[data-accent="teal"] { --accent: #64D2FF; --accent-lt: #A3E6FF; } :root[data-accent="red"] { --accent: #FF453A; --accent-lt: #FF8981; } [data-theme="dark"] { --bg: #000000; --bg-alt: #1C1C1E; --bg-dark: #000000; --bg-darker: #000000; --text: #F5F5F7; --text-muted: #98989D; --border: rgba(255,255,255,.13); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6); --shadow-lg: 0 24px 64px -20px rgba(0,0,0,.7); } /* ============================================================ RESET ============================================================ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: hidden; transition: background .4s ease, color .4s ease; -webkit-font-smoothing: antialiased; } img { max-width:100%; height:auto; display:block; } a { color:inherit; text-decoration:none; } button { cursor:pointer; border:none; background:none; font-family:inherit; } ul,ol { list-style:none; } input,select,textarea,button { font-family:inherit; font-size:inherit; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1,h2,h3,h4,h5 { font-family: var(--font-serif); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--text); text-wrap: balance; } .overline { font-size: var(--t-xs); font-weight: 700; letter-spacing: -.005em; color: var(--accent); } .lead { font-size: var(--t-lg); line-height: 1.65; color: var(--text-muted); } /* ============================================================ LAYOUT HELPERS ============================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-py) 0; } .section--dark { background: var(--bg-dark); color: var(--text-light); } .section--darker { background: var(--bg-darker); color: var(--text-light); } .section--alt { background: var(--bg-alt); } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 200; display: flex; align-items: center; padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 1px 0 var(--border); transition: background .3s ease, box-shadow .3s ease; } .nav--transparent { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; color: var(--ivory); } .nav--transparent .nav-logo-text, .nav--transparent .nav-links a, .nav--transparent .dark-toggle { color: var(--ivory); } .nav--transparent .nav-logo-ring { border-color: rgba(255,255,255,.5); color: var(--ivory); } .nav--transparent .dark-toggle { border-color: rgba(255,255,255,.3); } .nav--transparent.nav--scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 1px 0 var(--border); color: var(--text); } .nav--transparent.nav--scrolled .nav-logo-text, .nav--transparent.nav--scrolled .nav-links a, .nav--transparent.nav--scrolled .dark-toggle { color: var(--text); } .nav--transparent.nav--scrolled .nav-logo-ring { border-color: var(--border); color: var(--text); } .nav--transparent.nav--scrolled .dark-toggle { border-color: var(--border); } .nav-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; } /* Logo */ .nav-logo { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; text-decoration: none; } .nav-logo-ring { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--text); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 800; font-size: .72rem; transition: border-color .25s ease, color .25s ease; flex-shrink: 0; } .nav-logo-text { font-family: var(--font-serif); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; transition: color .25s ease; white-space: nowrap; } /* Center links */ .nav-links { display: flex; align-items: center; gap: .1rem; flex: 1; justify-content: center; } .nav-links a { font-size: var(--t-sm); font-weight: 600; padding: .45rem .75rem; border-radius: 100px; white-space: nowrap; transition: opacity .2s ease; } .nav-links a:hover { opacity: .6; } .nav-links a.active { font-weight: 700; color: var(--accent); } /* Dropdown (e.g. Speaking > All Keynotes / Decision Laundering) */ .nav-dropdown { position: relative; } .nav-dropdown > a { display: inline-flex; align-items: center; gap: .3rem; } .nav-dropdown__chevron { transition: transform .2s ease; flex-shrink: 0; } .nav-dropdown:hover .nav-dropdown__chevron, .nav-dropdown:focus-within .nav-dropdown__chevron { transform: rotate(180deg); } .nav-dropdown__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 44px -14px rgba(0,0,0,.3); padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 60; } .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown__menu a { display: block; padding: .65rem .9rem; border-radius: 10px; font-size: var(--t-sm); font-weight: 700; color: var(--text) !important; white-space: nowrap; opacity: 1 !important; } .nav-dropdown__menu a:hover { background: var(--bg-alt); } .nav-dropdown__menu a small { display: block; font-weight: 500; color: var(--text-muted); font-size: .75rem; margin-top: .1rem; } .nav-drawer a.nav-drawer__sub { font-size: .95rem; font-weight: 600; padding: .5rem 0 .875rem 1.1rem; color: var(--text-muted); border-bottom: 1px solid var(--border); } /* Right */ .nav-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } .nav-social { display: flex; align-items: center; gap: .4rem; } .nav-social a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; opacity: .6; transition: opacity .2s ease; } .nav-social a:hover { opacity: 1; } .btn-nav { display: inline-flex; align-items: center; padding: .6rem 1.25rem; background: var(--amber); color: #FFFFFF !important; font-size: .85rem; font-weight: 700; border-radius: 100px; white-space: nowrap; transition: background .25s ease, transform .2s var(--ease); } .btn-nav:hover { background: var(--amber-lt); transform: translateY(-1px); } /* Dark mode toggle */ .dark-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text); transition: background .2s ease, border-color .25s ease, color .25s ease; flex-shrink: 0; } .dark-toggle:hover { background: rgba(128,128,128,.12); } .dark-toggle svg { width: 16px; height: 16px; } .icon-sun { display: none; } .icon-moon { display: block; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: .35rem; margin-left: auto; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav--transparent .nav-hamburger span { background: var(--ivory); } .nav--transparent.nav--scrolled .nav-hamburger span { background: var(--text); } /* Drawer */ .nav-drawer { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 199; padding: 2rem var(--gutter) 3rem; flex-direction: column; gap: .25rem; overflow-y: auto; transform: translateX(105%); transition: transform .4s var(--ease); } .nav-drawer.open { transform: translateX(0); } .nav-drawer a { font-size: 1.15rem; font-weight: 700; padding: .875rem 0; display: block; border-bottom: 1px solid var(--border); } .nav-drawer .drawer-social { display: flex; gap: .75rem; margin-top: 1.5rem; } .nav-drawer .drawer-cta { margin-top: 1.5rem; display: inline-flex; } /* ============================================================ HERO – FULL BLEED PHOTO ============================================================ */ .hero-photo { position: relative; min-height: min(100vh, 820px); display: flex; align-items: flex-end; overflow: hidden; } .hero-photo__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 8s ease; } .hero-photo:hover .hero-photo__bg { transform: scale(1); } .hero-photo__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.82) 100% ); } .hero-photo__content { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: calc(var(--nav-h) + 6rem) var(--gutter) clamp(4rem,8vh,7rem); color: #FFFFFF; } .hero-photo__content h1, .hero-photo__content h2 { color: #FFFFFF; } /* Hero – dark (no photo) */ .hero-dark { background: var(--bg-dark); color: #FFFFFF; padding: calc(var(--nav-h) + 5rem) 0 clamp(3rem,6vw,6rem); } .hero-dark__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } /* ============================================================ TYPOGRAPHY COMPONENTS ============================================================ */ .eyebrow { display: flex; align-items: center; gap: .55rem; font-size: var(--t-sm); font-weight: 700; color: var(--accent); margin-bottom: 1rem; } .eyebrow::before { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .display-headline { font-family: var(--font-serif); font-weight: 800; font-size: var(--t-6xl); line-height: .98; letter-spacing: -.035em; margin-bottom: 1.25rem; } .display-headline em { font-style: normal; color: var(--accent); } .hero-sub { font-size: var(--t-xl); line-height: 1.55; max-width: 580px; opacity: .92; margin-bottom: 2.25rem; font-weight: 500; } /* Section heading group */ .sh { margin-bottom: 3rem; } .sh--center { text-align: center; } .sh--center .eyebrow { justify-content: center; } .sh__title { font-size: var(--t-4xl); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; margin-bottom: .75rem; } .sh__sub { font-size: var(--t-lg); color: var(--text-muted); max-width: 640px; line-height: 1.6; } .sh--center .sh__sub { margin: 0 auto; } /* On dark backgrounds */ .on-dark .eyebrow { color: var(--accent); } .on-dark .sh__title, .on-dark h1, .on-dark h2, .on-dark h3 { color: #FFFFFF; } .on-dark .sh__sub, .on-dark .lead { color: rgba(245,245,247,.68); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.9rem; font-size: .95rem; font-weight: 700; border-radius: 100px; transition: background .25s ease, color .25s ease, transform .2s var(--ease), box-shadow .25s ease; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0) scale(.98); } .btn--primary { background: var(--charcoal); color: #FFFFFF; } .btn--primary:hover { background: var(--accent); } [data-theme="dark"] .btn--primary { background: #FFFFFF; color: var(--charcoal); } [data-theme="dark"] .btn--primary:hover { background: var(--accent); color: #FFFFFF; } .btn--amber { background: var(--amber); color: #FFFFFF; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--amber) 70%, transparent); } .btn--amber:hover { background: var(--amber-lt); } .btn--outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); } .btn--outline:hover { border-color: var(--accent); color: var(--accent); background: transparent; } .btn--outline-light { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.4); } .btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #FFFFFF; } .btn--ghost { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; font-weight: 700; } .btn--ghost::after { content: ' →'; } .btn--ghost:hover { opacity: .7; transform: none; box-shadow: none; } .btn-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ============================================================ LOGO STRIP ============================================================ */ .logo-strip { padding: 2rem 0; background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .logo-strip__label { text-align: center; font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); margin-bottom: 1.5rem; } .logo-strip__row { display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem,3vw,2.5rem); flex-wrap: wrap; padding: 0 var(--gutter); } .logo-strip__logo { height: 48px; width: auto; max-width: 140px; object-fit: contain; opacity: .95; padding: .65rem 1.1rem; background: var(--white); border-radius: 14px; box-shadow: var(--shadow); transition: opacity .25s ease, transform .25s var(--ease); } .logo-strip__logo:hover { opacity: 1; transform: translateY(-2px); } @media (max-width: 480px) { .logo-strip__logo { height: 38px; padding: .5rem .85rem; } } .logo-text-item { font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; color: var(--text-muted); opacity: .5; transition: opacity .25s ease; white-space: nowrap; } .logo-text-item:hover { opacity: .8; } /* ============================================================ CARDS ============================================================ */ /* Engagement card */ .eng-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 20px; padding: 2rem; overflow: hidden; transition: transform var(--ease-slow), box-shadow var(--ease-slow); } .eng-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .eng-card__event { font-size: var(--t-xs); font-weight: 700; color: var(--accent); margin-bottom: .4rem; } .eng-card__title { font-family: var(--font-serif); font-size: var(--t-xl); font-weight: 700; line-height: 1.28; margin-bottom: .9rem; color: var(--text); } .eng-card__body { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.7; } .eng-card__cover { height: 150px; margin: -2rem -2rem 1.25rem; background-size: cover; background-position: center; border-radius: 20px 20px 0 0; } /* Article card */ .art-card { display: block; text-decoration: none; } .art-card__thumb { border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--charcoal) 0%, #000000 100%); display: flex; align-items: flex-end; padding: 1.25rem; position: relative; transition: transform var(--ease-slow); } .art-card:hover .art-card__thumb { transform: translateY(-4px); } .art-card__thumb-date { font-size: var(--t-xs); font-weight: 600; color: rgba(245,245,247,.6); } .art-card__body { padding: 1.1rem .25rem .5rem; } .art-card__date { font-size: var(--t-xs); font-weight: 600; color: rgba(245,245,247,.55); margin-bottom: .35rem; } .art-card__title { font-family: var(--font-serif); font-size: var(--t-xl); font-weight: 700; line-height: 1.25; color: #FFFFFF; transition: color .2s ease; } .art-card:hover .art-card__title { color: var(--accent); } /* Feature card (three nav) */ .feature-card { display: flex; flex-direction: column; gap: .75rem; padding: 3.5rem var(--gutter); border-right: 1px solid rgba(255,255,255,.08); color: #FFFFFF; transition: background .25s ease; } .feature-card:last-child { border-right: none; } .feature-card:hover { background: rgba(255,255,255,.04); } .feature-card__label { font-size: var(--t-xs); font-weight: 700; color: var(--accent); } .feature-card__title { font-family: var(--font-serif); font-size: var(--t-2xl); font-weight: 800; color: #FFFFFF; line-height: 1.15; } .feature-card__body { font-size: var(--t-sm); color: rgba(245,245,247,.62); line-height: 1.65; flex: 1; } .feature-card__cover { aspect-ratio: 16/10; border-radius: 16px; background-size: cover; background-position: center; margin-bottom: .25rem; } /* ============================================================ GALLERY GRID ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 3rem; } .gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; transition: transform .4s var(--ease); } .gallery-grid img:hover { transform: scale(1.03); } @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } } /* ============================================================ GRIDS ============================================================ */ .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; } .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.5rem; } .grid-articles { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem 2.5rem; } .grid-features { display: grid; grid-template-columns: repeat(3,1fr); } /* Two-column split used on Decision Laundering and similar detail pages */ .split-2up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,6vw,6rem); } .split-2up-portrait { display: grid; grid-template-columns: auto 1fr; gap: clamp(2.5rem,5vw,5rem); align-items: center; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonial { padding: 1.75rem 1.75rem 1.75rem 1.5rem; border-left: 3px solid var(--accent); } .testimonial--dark { background: rgba(255,255,255,.05); border-radius: 20px; border-left: 3px solid var(--accent); padding: 2rem; } .testimonial__body { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: var(--t-lg); line-height: 1.6; margin-bottom: 1.25rem; color: inherit; } .testimonial__body::before { content: '\201C'; font-size: 2.8rem; line-height: 0; vertical-align: -.6em; color: var(--accent); margin-right: .1em; } .testimonial__name { font-weight: 700; font-size: var(--t-sm); } .testimonial__role { color: var(--text-muted); font-size: var(--t-sm); } .on-dark .testimonial__role { color: rgba(245,245,247,.55); } .testimonial__meta { display: flex; align-items: center; gap: .75rem; } .testimonial__logo { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .testimonial__avatar { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; flex-shrink: 0; } /* ============================================================ SPLIT LAYOUT ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,6vw,6rem); align-items: center; } .split--flip .split__media { order: -1; } .split__media { border-radius: 20px; overflow: hidden; } .split__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ CTA STRIP CARDS ============================================================ */ .cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .cta-cards--three { grid-template-columns: repeat(3, 1fr); } .cta-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 2.25rem; transition: background .25s ease; } .cta-card:hover { background: rgba(255,255,255,.1); } .cta-card__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .cta-card__title { font-family: var(--font-serif); font-size: var(--t-2xl); font-weight: 800; color: #FFFFFF; margin-bottom: .4rem; } .cta-card__body { font-size: var(--t-sm); color: rgba(245,245,247,.68); margin-bottom: 1.5rem; line-height: 1.65; } /* ============================================================ STATS ============================================================ */ .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; } .stat__num { font-family: var(--font-serif); font-size: clamp(2.5rem,4vw,3.5rem); font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: .2rem; font-variant-numeric: tabular-nums; } .stat__label { font-size: var(--t-sm); color: var(--text-muted); font-weight: 500; } /* ============================================================ ABOUT THREE-COL ============================================================ */ .about-col { display: flex; flex-direction: column; gap: 1rem; } .about-col__icon { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--bg-alt)); display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; } .about-col__cover { aspect-ratio: 16/10; border-radius: 16px; background-size: cover; background-position: center; margin-bottom: .5rem; } .about-col h3 { font-family: var(--font-serif); font-size: var(--t-2xl); font-weight: 800; } /* ============================================================ FORMS ============================================================ */ .form { display: flex; flex-direction: column; gap: 1.25rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: .4rem; } .form-label { font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); } .form-input, .form-select, .form-textarea { padding: .9rem 1.1rem; border: 1.5px solid var(--border); border-radius: 14px; background: var(--bg-alt); color: var(--text); width: 100%; font-size: var(--t-base); transition: border-color .2s ease, box-shadow .2s ease, background .3s ease, color .3s ease; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); background: var(--bg); } .form-textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .form-checkbox { display: flex; align-items: center; gap: .75rem; font-size: var(--t-sm); cursor: pointer; } .form-checkbox input { width: 16px; height: 16px; accent-color: var(--accent); } /* ============================================================ ARTICLE CONTENT ============================================================ */ .article-body { max-width: 720px; margin: 0 auto; padding: 4rem var(--gutter) 6rem; } .article-body p { font-size: var(--t-lg); line-height: 1.75; margin-bottom: 1.5rem; color: var(--text); } .article-body h2 { font-size: var(--t-3xl); margin: 3rem 0 .9rem; } .article-body h3 { font-size: var(--t-2xl); margin: 2.5rem 0 .75rem; } .article-body ul,.article-body ol { padding-left: 1.5rem; margin-bottom: 1.5rem; } .article-body li { font-size: var(--t-lg); line-height: 1.75; margin-bottom: .5rem; color: var(--text); } .article-body ul li { list-style: disc; } .article-body ol li { list-style: decimal; } .article-body blockquote { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin: 2.5rem 0; font-family: var(--font-serif); font-weight: 500; font-size: var(--t-xl); color: var(--text-muted); } .article-body hr { border: none; border-top: 1px solid var(--border); margin: 3rem 0; } .article-body strong { font-weight: 700; } .article-body em { font-style: italic; } .article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .article-body a:hover { color: var(--accent-lt); } /* ============================================================ FOOTER ============================================================ */ .footer { background: #000000; color: #FFFFFF; padding: 4.5rem 0 2rem; } .footer__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 2rem; } .footer__brand-name { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .6rem; } .footer__brand-sub { font-size: var(--t-sm); color: rgba(245,245,247,.5); line-height: 1.65; max-width: 300px; margin-bottom: 1.5rem; } .footer__social { display: flex; gap: .6rem; flex-wrap: wrap; } .footer__social-link { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: rgba(245,245,247,.7); transition: border-color .2s ease, color .2s ease, background .2s ease; } .footer__social-link:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .footer__col-label { font-size: var(--t-xs); font-weight: 700; color: var(--accent); margin-bottom: .9rem; } .footer__links { display: flex; flex-direction: column; gap: .55rem; } .footer__links a { font-size: var(--t-sm); color: rgba(245,245,247,.62); transition: color .2s ease; } .footer__links a:hover { color: #FFFFFF; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer__copy { font-size: var(--t-xs); color: rgba(245,245,247,.4); } .footer__bottom-links { display: flex; gap: 1.5rem; } .footer__bottom-links a { font-size: var(--t-xs); color: rgba(245,245,247,.4); transition: color .2s ease; } .footer__bottom-links a:hover { color: #FFFFFF; } /* ============================================================ COOKIE BANNER ============================================================ */ .cookie-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 640px; margin: 0 auto; background: color-mix(in srgb, var(--charcoal) 90%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #FFFFFF; padding: 1.1rem 1.5rem; border-radius: 20px; display: none; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; box-shadow: var(--shadow-lg); z-index: 300; } .cookie-banner.visible { display: flex; } .cookie-banner p { font-size: var(--t-sm); opacity: .85; margin-bottom: 0; line-height: 1.5; } /* ============================================================ TAGS ============================================================ */ .tag { display: inline-block; padding: .35rem .9rem; font-size: var(--t-xs); font-weight: 600; border-radius: 100px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } /* ============================================================ WORLD MAP ============================================================ */ .map-section { text-align: center; } .map-pin-group { max-width: 800px; margin: 3rem auto 0; background: linear-gradient(135deg,var(--bg-dark),#0d1e37); border-radius: 24px; overflow: hidden; position: relative; } .map-pin-group img { width: 100%; opacity: .4; filter: grayscale(1); } .world-map-static { border-radius: 24px; overflow: hidden; max-width: 900px; margin: 0 auto; background: #000000; } .world-map-static img { display: block; width: 100%; height: auto; } /* ============================================================ SCROLL ANIMATIONS ============================================================ */ .anim { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); } .anim.in { opacity: 1; transform: none; } .d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; } .d5 { transition-delay: .40s; } /* ============================================================ DIVIDERS ============================================================ */ .amber-line { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 1.5rem; } .amber-line--center { margin-left: auto; margin-right: auto; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2,1fr); } .grid-articles { grid-template-columns: repeat(2,1fr); } .grid-features { grid-template-columns: 1fr; } .feature-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); } .feature-card:last-child { border-bottom: none; } .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer__top > :first-child { grid-column: 1/-1; } .nav-links { display: none; } .nav-social { display: none; } .btn-nav { display: none; } .nav-hamburger { display: flex; } .nav-drawer { display: flex; } } @media (max-width: 768px) { :root { --nav-h: 60px; } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .grid-articles { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } .split--flip .split__media { order: 0; } .cta-cards, .cta-cards--three { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(3,1fr); gap: 1rem; } .form-row { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; gap: 2rem; } .footer__top > :first-child { grid-column: auto; text-align: center; } .footer__top > :first-child .footer__brand-sub { margin-left: auto; margin-right: auto; } .footer__top > :first-child > div:first-of-type { display: flex; justify-content: center; } .footer__social { justify-content: center; } .footer__bottom { flex-direction: column; align-items: flex-start; } .hero-photo { min-height: 90vh; } .about-hero__media { order: -1; width: 100% !important; max-width: 320px; margin: 0 auto 2rem; } .split-2up { grid-template-columns: 1fr; gap: 2.5rem; } .split-2up-portrait { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; text-align: center; } .split-2up__secondary { order: 2; } .portrait-collage { flex-direction: column; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .btn-group { flex-direction: column; align-items: stretch; } .btn-group .btn { justify-content: center; } .cookie-banner { padding: .875rem 1.25rem; gap: 1rem; left: .75rem; right: .75rem; } }