/* ========================================================= The Global Leadership Summit — Singapore 2027 "Almost-exact" restyle of globalleadership.org Display: Fraunces (elegant serif, italic emphasis) Body: Figtree (warm humanist sans) Signatures: blue brush underline · topographic lines · wavy dividers · cream + near-black sections · pill buttons ========================================================= */ :root { --blue: #009CDE; --blue-2: #0089c4; --blue-deep: #0a4d70; --ink: #0c1418; /* near-black dark sections */ --black: #0a0a0b; --charcoal: #272523; /* warm charcoal footer (matches GLS) */ --cream: #f2f0ea; /* warm paper light sections */ --cream-2: #eae7df; --text: #33383b; --muted: #6c7378; --line: #e0ddd4; --white: #ffffff; --max: 1180px; --pad: clamp(20px, 5vw, 56px); --radius: 10px; --shadow-sm: 0 6px 22px rgba(12,20,24,.08); --shadow-md: 0 24px 60px rgba(12,20,24,.20); /* Exact GLS fonts via Adobe Fonts (kit txx6oxh) */ --serif: "freight-display-pro", "Fraunces", Georgia, "Times New Roman", serif; --sans: "proxima-nova", "Figtree", "Helvetica Neue", Arial, sans-serif; } *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--text); background: var(--cream); line-height: 1.62; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--blue-2); text-decoration: none; } ul { list-style: none; padding: 0; } /* ---------- Typography ---------- */ h1,h2,h3,h4,h5 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); } h1 { font-size: clamp(2.9rem, 7.2vw, 5.6rem); } h2 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); } h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); } h4 { font-size: 1.1rem; } .em { font-style: italic; } p { color: var(--text); } .lead { font-size: clamp(1.06rem, 1.7vw, 1.28rem); color: var(--text); } .muted { color: var(--muted); } /* Keyword with hand-drawn blue brush underline */ .brush { position: relative; white-space: nowrap; } .brush::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.16em; height: 0.5em; background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .brush--tight::after { left: 0; right: 0; } .brush.br1::after { background-image: url("data:image/svg+xml;utf8,"); } .brush.br2::after { background-image: url("data:image/svg+xml;utf8,"); height:0.56em; bottom:-0.18em; } .brush.br3::after { background-image: url("data:image/svg+xml;utf8,"); height:0.44em; } .brush.br4::after { background-image: url("data:image/svg+xml;utf8,"); height:0.58em; bottom:-0.2em; } .brush.br5::after { background-image: url("data:image/svg+xml;utf8,"); } .brush.br6::after { background-image: url("data:image/svg+xml;utf8,"); } .eyebrow { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--blue); display: inline-block; margin-bottom: 16px; } .section--dark .eyebrow, .hero .eyebrow { color: #7fd3f4; } /* ---------- Layout ---------- */ .container { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); } .section { padding: clamp(120px, 14.5vw, 230px) 0; position: relative; } .section--cream { background: var(--cream); } .section--white { background: #fff; } .section--dark { background: var(--ink); color: #d7e2e8; } .section--black { background: var(--black); color: #d7e2e8; } .section--dark h1,.section--dark h2,.section--dark h3, .section--black h1,.section--black h2,.section--black h3 { color: #fff; } .section--dark p,.section--black p { color: #aab6bd; } .center { text-align: center; } .mx-auto { margin-inline: auto; } .maxw-560{max-width:560px}.maxw-680{max-width:680px}.maxw-760{max-width:760px}.maxw-860{max-width:860px} .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px} /* ---------- Buttons (pill + chevron) ---------- */ .btn { --bg: var(--blue); --fg: #fff; --bd: var(--blue); display: inline-flex; align-items: center; gap: .55em; font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .82rem; padding: 14px 28px; border-radius: 999px; background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s; white-space: nowrap; } .btn::before { content: "›"; font-size: 1.25em; line-height: 0; font-weight: 400; margin-top: -0.06em; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,156,222,.34); } .btn--outline { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.6); } .btn--outline:hover { --bg: #fff; --fg: var(--ink); --bd:#fff; box-shadow: none; } .btn--dark { --bg: var(--ink); --fg:#fff; --bd: var(--ink); } .btn--ghostdark { --bg: transparent; --fg: var(--ink); --bd: rgba(12,20,24,.35); } .btn--ghostdark:hover { --bg: var(--ink); --fg:#fff; --bd:var(--ink); box-shadow:none; } .btn--lg { padding: 17px 36px; font-size: .9rem; } .btn--block { width: 100%; justify-content: center; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- Header / Nav ---------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: linear-gradient(180deg, rgba(8,20,28,.58) 0%, rgba(8,20,28,.34) 46%, rgba(8,20,28,0) 100%); } .site-header--onlight { background: none; } a.topbar__lead { text-decoration:none; opacity:.9; transition:opacity .2s; } a.topbar__up:hover { opacity:1; color:#fff; } .chips { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 22px; } .offer h3 { margin-top:6px; } .site-header--solid { position: sticky; background: rgba(12,20,24,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); } .nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; } /* ---- Top utility bar (Give · Sponsor) ---- */ .topbar { } .topbar__inner { display: flex; align-items: center; justify-content: flex-end; height: 42px; } .topbar__lead { display: none; } .topbar__links { display: flex; gap: 22px; } .topbar__links a { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: #fff; } .topbar__links a:hover { color: var(--blue); } .site-header--onlight .topbar { border-color: var(--line); } .site-header--onlight .topbar__lead { color: var(--muted); } .site-header--onlight .topbar__links a { color: var(--ink); } /* ---- Brand logo (real GLN logo + graceful fallback) ---- */ .brand__logo-img { height: 56px; width: auto; display: block; flex: none; } /* Nav logo: force white (matches white nav text) and larger */ .brand .brand__logo-img { height: 68px; filter: brightness(0) invert(1); } .brand__fallback { display: none; align-items: center; gap: 12px; } .brand__fallback .brand__sub { display: none; } .brand { flex-wrap: nowrap; } .brand__tag { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; color: #9fb6c2; padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.28); align-self: center; } .site-header--onlight .brand__tag { color: var(--muted); border-color: var(--line); } .brand--footer .brand__logo-img { height: 42px; } .brand--footer .brand__tag { color:#7f9099; border-color: rgba(255,255,255,.2); } .brand { display: flex; align-items: center; gap: 12px; } .brand__logo { width: 44px; height: 44px; flex: none; } .brand__txt { line-height: 1.05; } .brand__name { font-family: var(--sans); font-weight: 700; font-size: 1.18rem; letter-spacing: .01em; color: #fff; text-transform: none; } .brand__name span { color: var(--blue); } .brand__sub { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .58rem; color: #9fb6c2; display: block; margin-top: 2px; } .nav__links { display: flex; align-items: center; gap: 30px; } .nav__links a { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: #fff; position: relative; padding: 6px 0; } /* keep header text legible over the clear top of the hero photo */ .site-header .nav__links a, .site-header .topbar__links a { text-shadow: 0 1px 14px rgba(0,8,14,.45); } .nav__links a::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--blue); transition:width .2s; } .nav__links a:hover::after, .nav__links a.active::after { width:100%; } .nav__cta { display:flex; align-items:center; gap:14px; } .nav__toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; } .nav__toggle span { display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.25s; } /* header on light interior pages */ .site-header--onlight .brand__name { color: var(--ink); } .site-header--onlight .brand__sub { color: var(--muted); } .site-header--onlight .nav__links a { color: var(--ink); } .site-header--onlight .nav__toggle span { background: var(--ink); } /* ---------- Topographic line texture ---------- */ .topo { position:absolute; inset:0; z-index:0; opacity:.6; pointer-events:none; background-image: url("data:image/svg+xml;utf8,"); background-size: 100% 100%; background-repeat: no-repeat; } .hero .topo, .stats-topo { inset: 0; height: auto; opacity: .8; background-size: 100% 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); } .stats-topo { inset: 0 auto 0 0; width: 40%; background-size: auto 780px; background-position: left bottom; background-repeat: no-repeat; opacity: .32; -webkit-mask-image: linear-gradient(90deg,#000 42%, transparent 100%); mask-image: linear-gradient(90deg,#000 42%, transparent 100%); } .topo--dashed::after { content:""; position:absolute; inset:0; background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 220px 100%; } /* ---------- Wavy dividers ---------- */ .wave { display:block; width:100%; height: clamp(48px, 7vw, 104px); } .wave svg { display:block; width:100%; height:100%; } /* ---------- HERO ---------- */ .hero { position: relative; background: var(--ink); color:#fff; overflow: hidden; } .hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; background: linear-gradient(120deg,#06222f,#0a1a22); } .hero__bg img { width:100%; height:100%; object-fit:cover; opacity:1; } /* Clear at the top (real photo shows), overlay fades in over the lower ~70% */ .hero__scrim { position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(8,20,28,0) 0%, rgba(8,20,28,0) 24%, rgba(8,20,28,.74) 60%, var(--ink) 100%); } /* main hero only: soft dark cap so white nav + kicker stay legible over bright photos */ .site-header + .hero .hero__scrim { background: linear-gradient(180deg, rgba(8,20,28,.42) 0%, rgba(8,20,28,.22) 13%, rgba(8,20,28,0) 26%, rgba(8,20,28,.74) 60%, var(--ink) 100%); } /* in-hero divider waves: the photo bleeds edge-to-edge and the wavy neighbour-coloured shape sits ON TOP of it, so there is no straight photo seam at the divider */ .hero__wave { position:absolute; left:0; width:100%; z-index:2; line-height:0; pointer-events:none; } .hero__wave svg { display:block; width:100%; height: clamp(48px, 7vw, 104px); } .hero__wave--top { top:0; } .hero__wave--bottom { bottom:0; } .hero__kicker, .hero h1, .hero h2, .hero__sub { text-shadow: 0 2px 20px rgba(0,10,16,.45); } .hero__inner { position: relative; z-index: 3; padding-block: clamp(150px,17vw,220px) clamp(70px,10vw,130px); } .hero__kicker { font-family: var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; color:#fff; margin-bottom:22px; } .hero__kicker b { color:#fff; font-weight:700; border-bottom:2px solid var(--blue); padding-bottom:3px; } .hero h1 { color:#fff; max-width: 20ch; } .hero__sub { max-width: 54ch; margin-top: 26px; color:#cdd9df; font-size: clamp(1.05rem,1.7vw,1.3rem); margin-left: 0; } /* Stack: big headline fills left-to-right, sub + actions sit below */ .hero__grid { display:block; } .hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } /* ---------- Stat strip ---------- */ .stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; } .stat__num { font-family: var(--serif); font-weight:500; line-height:1; font-size: clamp(2.2rem,4vw,3.2rem); color: var(--blue); } .section--cream .stat__num, .section--white .stat__num { color: var(--blue-2); } .stat__label { font-family: var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; color:#9fb6c2; margin-top:8px; font-weight:700; } .section--cream .stat__label,.section--white .stat__label { color: var(--muted); } .stats--line .stat { border-left: 2px solid rgba(0,156,222,.4); padding-left: 18px; } /* ---------- Section head ---------- */ .section-head { max-width: 720px; margin-bottom: 46px; } .section-head.center { margin-inline:auto; } /* ---------- Offset photo frame (collage) ---------- */ .frame { position: relative; } .frame__box { position: relative; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/4.4; z-index: 2; background: linear-gradient(150deg,#0a5c85,#0c2330); } .frame__box img { width:100%; height:100%; object-fit:cover; } .frame::before { content:""; position:absolute; left:-22px; top:-22px; width:62%; height:70%; background: rgba(0,156,222,.16); border-radius:4px; z-index:1; } .frame__topo { position:absolute; right:-16px; bottom:-16px; width:120px; height:120px; z-index:3; opacity:.7; background-image: url("data:image/svg+xml;utf8,"); } /* ---------- Diagonal-clipped photo ---------- */ .diag { min-height: 560px; background: linear-gradient(150deg,#0a5c85,#0c2330); overflow:hidden; position:relative; clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); } .diag img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } /* ---------- Split ---------- */ .split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,80px); align-items:center; } .split--wide-l { grid-template-columns: 1.05fr .95fr; } /* ---------- Feature icons (ringed line icons) ---------- */ .feat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; } .feat { text-align:center; } .feat__ico { width:74px; height:74px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; border:1.5px solid rgba(0,156,222,.5); color: var(--blue); background: rgba(0,156,222,.06); } .section--dark .feat__ico,.section--black .feat__ico { background: rgba(0,156,222,.1); } .feat__ico svg { width:30px; height:30px; } .feat h4 { font-family: var(--sans); font-weight:600; text-transform:none; font-size:1.02rem; letter-spacing:0; color: inherit; } .feat p { font-size:.94rem; margin-top:6px; } /* ---------- Cards ---------- */ .grid { display:grid; gap:26px; } .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px 28px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card h3 { font-size:1.35rem; margin-bottom:10px; } .card p { font-size:.97rem; color:var(--muted); } /* ---------- Media cards (year-round) ---------- */ .media-card { border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; } .media-card:hover { transform:translateY(-4px); box-shadow: var(--shadow-md); } .media-card__img { aspect-ratio:16/10; background: linear-gradient(150deg,#0a5c85,#0c2330); position:relative; overflow:hidden; } .media-card__img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .media-card__body { padding:22px 22px 26px; } .media-card__kicker { font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--blue); font-weight:700; } .media-card__body h3 { font-size:1.25rem; margin:8px 0 8px; } .media-card__body p { font-size:.94rem; color:var(--muted); } /* ---------- Speaker cards ---------- */ .speaker { position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; } .speaker__photo { position:relative; aspect-ratio:3/3.5; background: linear-gradient(160deg,#0a5c85,#0c2330); display:grid; place-items:center; } .speaker__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: top center; } .speaker__initials { font-family:var(--serif); font-weight:500; font-size:3.2rem; color:rgba(255,255,255,.9); } .speaker__tag { position:absolute; top:12px; left:12px; z-index:2; background:var(--blue); color:#fff; font-family:var(--sans); text-transform:uppercase; letter-spacing:.09em; font-size:.64rem; font-weight:700; padding:5px 11px; border-radius:999px; } .speaker__body { padding:18px 20px 22px; } .speaker__name { font-family:var(--serif); font-weight:500; font-size:1.25rem; color:var(--ink); line-height:1.1; } .speaker__role { font-size:.9rem; color:var(--muted); margin-top:5px; } /* ---------- Testimonial (serif + diagonal photo + arrows) ---------- */ .testi { display:grid; grid-template-columns: 1fr 1fr; gap:0; align-items:stretch; min-height: 660px; } .testi__text { padding: clamp(60px,8vw,110px) clamp(24px,4vw,64px); } .testi blockquote { font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2.3vw,1.9rem); line-height:1.35; color:var(--muted); font-weight:400; } .testi__rule { height:1px; background:var(--line); margin:26px 0 20px; } .testi__name { font-family:var(--sans); font-weight:700; color:var(--ink); } .testi__role { font-family:var(--sans); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--muted); margin-top:3px; } .testi__arrows { display:flex; gap:12px; margin-top:26px; } .arrow { width:46px; height:46px; border-radius:50%; border:0; background:var(--blue); color:#fff; display:grid; place-items:center; cursor:pointer; font-size:1.1rem; transition:background .2s, transform .15s; } .arrow:hover { background:var(--blue-2); transform:translateY(-2px); } /* ---------- Pricing ---------- */ .price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; } .price { background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 30px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); } .price--feature { border-color:var(--blue); box-shadow:0 22px 55px rgba(0,156,222,.20); position:relative; } .price--feature::before { content:"Most Popular"; position:absolute; top:0; right:26px; transform:translateY(-50%); background:var(--blue); color:#fff; font-family:var(--sans); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700; padding:6px 14px; border-radius:999px; } .price__name { font-family:var(--serif); font-weight:500; color:var(--ink); font-size:1.5rem; } .price__desc { font-size:.92rem; color:var(--muted); margin:6px 0 20px; } .price__amt { font-family:var(--serif); font-weight:500; color:var(--ink); line-height:1; font-size:3.1rem; } .price__amt small { font-size:.95rem; color:var(--muted); font-weight:400; } .price__cur { font-size:1.1rem; color:var(--muted); vertical-align:super; margin-right:2px; } .price ul { margin:22px 0 26px; display:grid; gap:12px; } .price li { display:flex; gap:10px; font-size:.96rem; color:var(--text); } .price li svg { flex:none; width:18px; height:18px; color:var(--blue); margin-top:4px; } .price .btn { margin-top:auto; } /* ---------- Schedule ---------- */ .day-tabs { display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; } .day-tab { font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; padding:12px 24px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; } .day-tab.active { background:var(--ink); color:#fff; border-color:var(--ink); } .day-panel { display:none; } .day-panel.active { display:block; } .sesh { display:grid; grid-template-columns:150px 1fr; gap:22px; padding:22px 4px; border-bottom:1px solid var(--line); align-items:start; } .sesh:last-child { border-bottom:0; } .sesh__time { font-family:var(--serif); font-weight:500; color:var(--blue-2); font-size:1.15rem; } .sesh__title { font-family:var(--serif); font-weight:500; color:var(--ink); font-size:1.3rem; } .sesh__desc { font-size:.96rem; color:var(--muted); margin-top:4px; } .pill { display:inline-block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.09em; font-size:.64rem; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(0,156,222,.12); color:var(--blue-2); margin-top:8px; } /* ---------- FAQ ---------- */ .faq { max-width:840px; margin-inline:auto; } .faq__item { border-bottom:1px solid var(--line); } .faq__q { width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:24px 44px 24px 4px; position:relative; font-family:var(--serif); font-weight:500; font-size:1.28rem; color:var(--ink); } .faq__q::after { content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:1.7rem; color:var(--blue); font-family:var(--sans); line-height:1; } .faq__item.open .faq__q::after { content:"\2013"; } .faq__a { max-height:0; overflow:hidden; transition:max-height .3s ease; } .faq__a p { padding:0 4px 24px; color:var(--muted); } /* ---------- Bulleted list (dark, blue squares) ---------- */ .blist { display:grid; gap:14px; margin:24px 0 8px; } .blist li { position:relative; padding-left:22px; } .blist li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--blue); } /* ---------- Page banner ---------- */ .page-banner { position:relative; background: var(--ink); color:#fff; padding: clamp(140px,15vw,190px) 0 clamp(60px,7vw,90px); overflow:hidden; } .page-banner .container { position:relative; z-index:3; } .page-banner__scrim { position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(8,18,24,.5), rgba(8,18,24,.9)); } .page-banner h1 { color:#fff; } .page-banner p { color:#cdd9df; max-width:60ch; margin-top:16px; } .crumbs { font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:#7fd3f4; margin-bottom:16px; } .crumbs a { color:#7fd3f4; } /* ---------- CTA ---------- */ .cta-band { background: var(--ink); border-radius:18px; padding: clamp(44px,6vw,76px); text-align:center; position:relative; overflow:hidden; } .cta-band h2 { color:#fff; } .cta-band p { color:#aab6bd; max-width:56ch; margin:16px auto 30px; } /* ---------- Logos ---------- */ .logo-row { display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:center; } .logo-chip { font-family:var(--serif); font-weight:500; letter-spacing:.02em; color:#9aa6ac; font-size:1.2rem; border:1px dashed var(--line); padding:14px 22px; border-radius:8px; } /* ---------- Footer (matches GLS: charcoal, centered, watermark) ---------- */ .wave--to-footer { background: var(--cream); height: clamp(70px, 9vw, 130px); } .site-footer { background: var(--charcoal); color:#b7b2ac; position:relative; overflow:hidden; padding: clamp(70px,9vw,120px) 0 0; } .site-footer .topo { inset: 0 auto 0 0; width: 34%; opacity: .3; background-size: cover; background-position: left center; -webkit-mask-image: linear-gradient(90deg,#000 45%, transparent 100%); mask-image: linear-gradient(90deg,#000 45%, transparent 100%); } .footer-inner { position:relative; z-index:2; text-align:center; padding-bottom: clamp(40px,6vw,80px); } .footer-logo { display:inline-flex; align-items:center; justify-content:center; } .footer-logo .brand__logo-img { height: 78px; } .footer-logo .brand__fallback .brand__logo { width:64px; height:64px; } .footer-nav { display:grid; grid-template-columns: repeat(2, minmax(120px,max-content)); justify-content:center; gap: 16px clamp(48px,8vw,110px); margin: clamp(34px,5vw,54px) 0 0; } .footer-nav a { font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:#c9c4bd; text-align:left; padding:4px 0; } .footer-nav a:hover { color:var(--blue); } .footer-watermark { font-family:var(--sans); font-weight:700; text-align:center; white-space:nowrap; font-size: clamp(1.6rem, 6.4vw, 6.2rem); line-height:1; letter-spacing:-.02em; color: rgba(255,255,255,.05); margin-top: clamp(30px,5vw,64px); user-select:none; } .footer-legal { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.1); } .footer-legal__inner { display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between; align-items:center; padding:22px 0 26px; } .footer-copy { font-size:.8rem; color:#8b867f; max-width:70ch; } .footer-legal__links { display:flex; gap:24px; } .footer-legal__links a { font-size:.8rem; color:#8b867f; } .footer-legal__links a:hover { color:var(--blue); } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .feat-grid { grid-template-columns: repeat(2,1fr); } .footer-top { grid-template-columns: 1fr; gap:36px; } .footer-grid { grid-template-columns: 1fr 1fr; } .split, .split--wide-l, .testi { grid-template-columns: 1fr; } .hero__grid { grid-template-columns: 1fr; align-items:start; } .hero__sub { margin-left:0; } .diag { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); min-height:320px; } } @media (max-width: 860px) { .nav__links { display:none; } .nav__toggle { display:block; } .nav { gap: 12px; } .nav__cta { margin-left: auto; } .nav__cta .btn { padding: 9px 15px; font-size: .72rem; } .nav.open .nav__links { display:flex; flex-direction:column; align-items:flex-start; gap:2px; position:absolute; top:100%; left:calc(-1 * var(--pad)); right:calc(-1 * var(--pad)); background:var(--ink); border-top:1px solid rgba(255,255,255,.1); padding:16px var(--pad) 24px; box-shadow:var(--shadow-md); } .topbar__lead { display:none; } .nav.open .nav__links a { width:100%; padding:13px 0; color:#eaf1f4; border-bottom:1px solid rgba(255,255,255,.08); } .nav.open .nav__links .btn { display:inline-flex; margin-top:14px; } .site-header--onlight .nav.open .nav__links a { color:#eaf1f4; } .grid-3,.grid-4,.grid-2,.price-grid { grid-template-columns: 1fr 1fr; } .price-grid { grid-template-columns:1fr; } .stats { grid-template-columns: 1fr 1fr; gap:24px; } } @media (max-width: 560px) { .feat-grid,.grid-3,.grid-4,.grid-2 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .sesh { grid-template-columns: 1fr; gap:6px; } .footer-cols { grid-template-columns: 1fr 1fr; gap:24px; } .footer-grid { grid-template-columns: 1fr; } .hero__inner { padding-top: 130px; } } /* GLS NOW — low-key band on the GLN home offerings section */ .glsnow { margin-top: clamp(44px, 5vw, 66px); border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 42px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; } .glsnow__text { max-width: 660px; } .glsnow__text h3 { margin: 8px 0 10px; } .glsnow__text p { margin: 0; } .glsnow .btn { flex: none; } @media (max-width: 560px) { .glsnow .btn { width: 100%; justify-content: center; } } /* One-page anchor scrolling (Summit landing) */ #experience, #speakers, #schedule, #attend, #faq { scroll-margin-top: 28px; } /* ---- Summit hero: match the real GLS summit hero (Arsenal, bottom-left) ---- */ .hero--summit { min-height: 100vh; display: flex; align-items: flex-end; } .hero--summit .hero__inner { width: 100%; padding-block: clamp(140px,18vh,220px) clamp(56px,8vh,100px); } .hero--summit .hero__kicker { font-family: "Open Sans", var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.8rem,1.05vw,1.05rem); color: #efeeec; margin-bottom: clamp(14px,1.6vw,20px); } .hero--summit .hero__kicker b { border-bottom: 0; padding: 0; color: #efeeec; font-weight: 700; } .hero--summit h1 { font-family: "Arsenal", var(--sans), "Open Sans", system-ui, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2.3rem,7vw,6rem); line-height: 1.14; letter-spacing: 0; color: #efeeec; max-width: 22ch; margin: 0; } .hero--summit .hero__actions { margin-top: clamp(26px,3vw,40px); } @media (max-width: 700px){ .hero--summit { min-height: 90vh; } } /* Legal pages (privacy / terms) */ .legal { max-width: 760px; } .legal > h2 { margin: 40px 0 12px; } .legal > h2:first-child { margin-top: 0; } .legal h3 { margin: 26px 0 8px; } .legal p { margin: 0 0 14px; line-height: 1.75; } .legal ul { margin: 0 0 18px; padding-left: 22px; } .legal li { margin-bottom: 8px; line-height: 1.7; } .legal a { color: var(--blue-2); text-decoration: underline; } .legal__updated { color: var(--muted); font-size: .95rem; margin-bottom: 30px; } /* Milestone timeline (Who We Are) */ .timeline { position: relative; max-width: 760px; margin: 0 auto; } .timeline::before { content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background: linear-gradient(180deg, var(--blue), rgba(0,156,222,.18)); } .tl { position: relative; padding: 0 0 clamp(26px,4vw,42px) 46px; } .tl:last-child { padding-bottom: 0; } .tl::before { content:""; position:absolute; left:1px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--blue); box-shadow:0 0 0 4px rgba(0,156,222,.10); } .tl__year { font-family: var(--serif, Georgia, serif); font-size: clamp(1.5rem,2.6vw,2rem); color: var(--blue-2); line-height:1; margin-bottom:6px; } .tl__title { font-weight:700; margin:0 0 4px; } .tl__body { color: var(--muted); margin:0; } /* Cookie consent banner */ .cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999; max-width: 760px; margin: 0 auto; background: #0c1418; color: #eaf1f4; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 18px 20px; display: none; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; } .cookie.show { display: flex; opacity: 1; transform: none; } .cookie__text { font-size: .95rem; line-height: 1.55; max-width: 470px; color: #cdd9df; } .cookie__text a { color: #7fd3f4; text-decoration: underline; } .cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie .btn { padding: 11px 20px; font-size: .8rem; } @media (max-width: 600px){ .cookie { left: 10px; right: 10px; bottom: 10px; padding: 16px; } .cookie__actions { width: 100%; } .cookie__actions .btn { flex: 1; justify-content: center; } } /* Info note box (e.g. physical-copy callout) */ .note { background:#fff; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:12px; padding:16px 18px; color:var(--muted); line-height:1.6; } .note strong { color:var(--ink); } .card--muted { opacity:.92; } /* Modal — e-copy download gate */ .modal { position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000; overflow:auto; } .modal[hidden] { display:none !important; } .modal__overlay { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(6,12,16,.62); } .modal__card { position:relative; z-index:1; background:#fff; color:var(--ink); max-width:460px; margin:8vh auto 0; border-radius:16px; padding:30px clamp(22px,4vw,34px); box-shadow:0 30px 80px rgba(0,0,0,.45); } .modal__x { position:absolute; top:12px; right:16px; background:none; border:0; font-size:1.7rem; line-height:1; cursor:pointer; color:var(--muted); } .modal .field { display:block; margin-top:14px; } .modal .field span { display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; } .modal input[type=text], .modal input[type=email] { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font:inherit; color:var(--ink); background:#fff; } .modal input[type=text]:focus, .modal input[type=email]:focus { outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); } .modal .check { display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:.85rem; color:var(--muted); line-height:1.5; } .modal .check input { margin-top:3px; flex:none; } .modal .btn { margin-top:20px; } .modal__fine { font-size:.78rem; margin-top:14px; } .modal__fine a { color:var(--blue-2); text-decoration:underline; } @media (max-width:520px){ .modal__card { margin:0; position:absolute; left:0; right:0; bottom:0; max-width:none; border-radius:16px 16px 0 0; } }