/* * AHKETC — Diplomatic Modernism Design System * Pure CSS export for WordPress / static HTML migration * * Design philosophy: Diplomatic Modernism. * The visual system should feel institutional, documentary, and internationally credible. * Avoid startup gradients, excessive rounded corners, and generic centered landing-page patterns. * Every surface supports formal hierarchy, careful spacing, and government-style reading confidence. * * HOW TO EDIT: * - Colors: change CSS custom properties in :root below * - Fonts: swap Google Fonts links in of each HTML file * - Spacing: adjust --spacing-* variables * - Content: edit text directly in the HTML files */ /* ============================================================ 1. GOOGLE FONTS ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;500;600;700&display=swap'); /* ============================================================ 2. CSS CUSTOM PROPERTIES (Design Tokens) ============================================================ */ :root { /* Brand Colors */ --primary: #1e3a6e; /* Deep diplomatic navy */ --primary-light: #2a4f96; --primary-foreground: #faf8f4; --accent-red: #aa1b2f; /* ASEAN red accent */ /* Neutral Palette */ --background: #f9f7f2; /* Warm off-white */ --foreground: #1a2540; /* Deep navy text */ --card: #fdfcf9; --card-foreground: #1a2540; --muted: #f0ede6; --muted-foreground: #5a6480; --border: #d8d2c6; --border-light: rgba(41, 66, 122, 0.12); /* Contrast Section (dark navy panels) */ --contrast-bg: #24335b; --contrast-text: #faf8f4; /* Typography */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Source Sans 3', system-ui, sans-serif; /* Spacing */ --section-py: 5rem; --container-max: 1320px; --radius: 0; /* Shadows */ --shadow-card: 0 18px 45px rgba(23, 32, 57, 0.08); --shadow-card-hover: 0 24px 52px rgba(23, 32, 57, 0.12); --shadow-image: 0 24px 70px rgba(23, 32, 57, 0.12); } /* ============================================================ 3. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); background-color: var(--background); color: var(--foreground); line-height: 1.6; -webkit-font-smoothing: antialiased; background-image: radial-gradient(circle at top left, rgba(200, 165, 87, 0.08), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.5), rgba(245,241,233,0.92)); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); letter-spacing: -0.03em; line-height: 1; } a { color: var(--primary); text-decoration: underline; transition: color 180ms ease; } a:hover { color: var(--primary-light); } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ============================================================ 4. LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } } /* Grid helpers */ .grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); } .grid-3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); } .grid-4 { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); } .grid-auto-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (max-width: 767px) { .grid-2, .grid-3, .grid-4, .grid-auto-2 { grid-template-columns: 1fr; } } /* ============================================================ 5. BACKGROUND DECORATIONS ============================================================ */ .official-grid { position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(41, 66, 122, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(41, 66, 122, 0.02) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25), transparent 72%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.25), transparent 72%); z-index: 0; } /* ============================================================ 6. HEADER / NAVIGATION ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(41, 66, 122, 0.15); background: rgba(249, 247, 242, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .site-header .container { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 1024px) { .site-header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; } } .header-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; } .header-brand:hover { color: inherit; } .header-logo { height: 3.5rem; width: auto; max-width: 220px; object-fit: contain; } .header-brand-text { display: none; border-left: 1px solid var(--border); padding-left: 0.75rem; } @media (min-width: 1280px) { .header-brand-text { display: block; } } .header-org-name { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(30, 58, 110, 0.7); font-family: var(--font-sans); } .header-tagline { font-size: 0.875rem; color: var(--muted-foreground); font-family: var(--font-sans); } .header-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; } @media (min-width: 640px) { .header-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; } } @media (min-width: 1024px) { .header-actions { flex: 1; flex-wrap: nowrap; gap: 1rem; } } .site-nav { display: none; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: 1; } @media (min-width: 1024px) { .site-nav { display: flex; } } .site-nav a { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(26, 37, 64, 0.8); text-decoration: none; white-space: nowrap; transition: color 180ms ease; } .site-nav a:hover { color: var(--primary); } /* ============================================================ 7. LANGUAGE SWITCHER ============================================================ */ .lang-switcher { position: relative; display: flex; flex-direction: column; gap: 0.2rem; min-width: 188px; } .lang-switcher-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted-foreground); font-family: var(--font-sans); } .lang-switcher-select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--border); background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e3a6e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.75rem center; padding: 0.55rem 2.2rem 0.55rem 0.75rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; color: var(--foreground); cursor: pointer; transition: border-color 180ms ease; } .lang-switcher-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 58, 110, 0.1); } /* ============================================================ 8. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 100ms ease; cursor: pointer; border: 1px solid transparent; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-light); color: var(--primary-foreground); border-color: var(--primary-light); } .btn-outline { background: rgba(249, 247, 242, 0.7); color: var(--primary); border-color: rgba(30, 58, 110, 0.3); } .btn-outline:hover { background: rgba(30, 58, 110, 0.05); color: var(--primary); } .btn-lg { padding: 0.9rem 1.75rem; font-size: 1rem; } /* ============================================================ 9. SECTION SHELL ============================================================ */ .section-shell { position: relative; padding-top: var(--section-py); padding-bottom: var(--section-py); } .section-contrast { background: linear-gradient(180deg, rgba(36, 51, 91, 0.98), rgba(32, 45, 80, 0.98)); color: var(--contrast-text); } @media (max-width: 1023px) { .section-shell { padding-top: 4rem; padding-bottom: 4rem; } } /* ============================================================ 10. TYPOGRAPHY COMPONENTS ============================================================ */ .section-eyebrow { display: inline-block; border-top: 2px solid rgba(41, 66, 122, 0.55); padding-top: 0.75rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(30, 58, 110, 0.78); font-family: var(--font-sans); } .section-contrast .section-eyebrow { border-top-color: rgba(255, 255, 255, 0.3); color: rgba(255, 248, 239, 0.7); } .hero-title { font-size: clamp(2.75rem, 5.5vw, 5.7rem); line-height: 0.96; color: var(--foreground); text-wrap: balance; font-family: var(--font-serif); letter-spacing: -0.03em; } .hero-title .highlight { color: var(--primary); } .section-title { /* max-width: 16ch; */ font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 0.98; text-wrap: balance; font-family: var(--font-serif); } .section-title.wide { max-width: none; } .section-copy { /* max-width: 62ch; */ font-size: 1.05rem; line-height: 1.95; color: var(--muted-foreground); } /* ============================================================ 11. HERO SECTION ============================================================ */ .hero-slab { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247,243,236,0.94) 0%, rgba(247,243,236,0.9) 38%, rgba(247,243,236,0.38) 62%, rgba(247,243,236,0.1) 100%), linear-gradient(180deg, rgba(170,27,47,0.04), transparent 35%); } .hero-grid { display: grid; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; position: relative; z-index: 1; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: end; padding-top: 4rem; padding-bottom: 4rem; } } .hero-content { position: relative; z-index: 1; } .hero-description { max-width: 42rem; font-size: 1.125rem; line-height: 2; color: var(--muted-foreground); margin-top: 1.5rem; } @media (min-width: 1024px) { .hero-description { font-size: 1.25rem; } } .hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .metrics-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; } @media (min-width: 1280px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } } .metric-card { min-height: 8rem; border: 1px solid rgba(41, 66, 122, 0.14); background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(251,248,242,0.84)); padding: 1.2rem 1.15rem; box-shadow: 0 20px 50px rgba(22, 30, 54, 0.06); } .metric-value { font-family: var(--font-serif); font-size: 2.3rem; line-height: 1; color: var(--primary); } .metric-label { margin-top: 0.8rem; font-size: 0.94rem; line-height: 1.65; color: var(--muted-foreground); } /* ============================================================ 12. IMAGE PANELS ============================================================ */ .image-panel { position: relative; overflow: hidden; border: 1px solid rgba(41, 66, 122, 0.12); background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-image); } .image-panel::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.42); pointer-events: none; z-index: 2; } .image-panel.tall { min-height: 28rem; } .image-panel.medium { min-height: 20rem; } .image-panel.small { min-height: 18rem; } .image-panel img { height: 100%; width: 100%; object-fit: cover; transition: transform 500ms ease; } .image-panel:hover img { transform: scale(1.03); } .image-caption { position: absolute; left: 1rem; bottom: 1rem; max-width: 20rem; background: rgba(18, 28, 55, 0.78); padding: 0.9rem 1rem; font-size: 0.9rem; line-height: 1.6; color: rgba(255, 248, 239, 0.96); backdrop-filter: blur(12px); z-index: 2; } @media (max-width: 767px) { .image-panel.tall { min-height: 22rem; } } /* ============================================================ 13. OFFICIAL VISIT FIGURE ============================================================ */ .official-visit-figure { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(41, 66, 122, 0.15); background: var(--card); padding: 1rem; box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08); margin-top: 0; } @media (min-width: 768px) { .official-visit-figure { padding: 1.5rem; } } .official-visit-img-wrap { overflow: hidden; border: 1px solid rgba(41, 66, 122, 0.15); background: #f4f1ea; padding: 0.5rem; } @media (min-width: 768px) { .official-visit-img-wrap { padding: 0.75rem; } } .official-visit-img-wrap img { display: block; margin: 0 auto; max-height: 760px; width: 100%; object-fit: contain; } .official-visit-caption { border-top: 1px solid rgba(41, 66, 122, 0.15); padding-top: 1.25rem; margin-top: 1.25rem; } .official-visit-caption .section-eyebrow { margin-bottom: 1rem; } .official-visit-caption p { font-size: 1rem; line-height: 2; color: rgba(26, 37, 64, 0.84); margin-top: 1rem; } .official-visit-caption p:first-of-type { margin-top: 0; } /* ============================================================ 14. ABOUT GALLERY ============================================================ */ .about-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } .gallery-item { position: relative; overflow: hidden; border: 1px solid rgba(41, 66, 122, 0.15); background: rgba(253, 252, 249, 0.7); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; } .gallery-item:hover img { transform: scale(1.03); } .gallery-item.tall { aspect-ratio: 3/4; } .gallery-item.wide { aspect-ratio: 4/3; } .gallery-item.square { aspect-ratio: 1/1; } /* ============================================================ 15. MANDATE SECTION ============================================================ */ .mandate-grid { display: grid; gap: 2rem; } @media (min-width: 1024px) { .mandate-grid { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; } } .mandate-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 639px) { .mandate-cards { grid-template-columns: 1fr; } } .mandate-card { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); padding: 1.4rem; } .mandate-card h3 { font-size: 1.55rem; line-height: 1.08; color: var(--contrast-text); } .mandate-card p { margin-top: 0.85rem; line-height: 1.8; color: rgba(255, 248, 239, 0.88); } .note-panel { position: relative; align-self: end; border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: 1.5rem; color: rgba(255, 248, 239, 0.88); } .note-rule { width: 5rem; border-top: 2px solid rgba(203, 171, 101, 0.65); margin-bottom: 1rem; } .note-panel p { line-height: 1.8; margin-top: 0.85rem; font-size: 1rem; } .note-panel p:first-of-type { margin-top: 0; } /* ============================================================ 16. FUNCTION & SECTOR CARDS ============================================================ */ .card-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; background: rgba(41, 66, 122, 0.08); color: var(--primary); } .card-icon-wrap svg { width: 1.25rem; height: 1.25rem; } .card-icon-wrap.subtle { background: rgba(170, 27, 47, 0.06); color: var(--accent-red); } .official-card, .sector-card, .benefit-card, .update-card, .footer-card { border: 1px solid rgba(41, 66, 122, 0.12); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,246,239,0.88)); box-shadow: var(--shadow-card); padding: 1.35rem; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .official-card:hover, .sector-card:hover, .benefit-card:hover, .update-card:hover { transform: translateY(-4px); border-color: rgba(41, 66, 122, 0.22); box-shadow: var(--shadow-card-hover); } .official-card h3, .sector-card h3, .benefit-card h3, .update-card h3, .footer-card h3 { font-size: 1.55rem; line-height: 1.08; } .official-card p, .sector-card p, .benefit-card p, .update-card p, .footer-card p { margin-top: 0.85rem; line-height: 1.8; opacity: 0.88; } /* ============================================================ 17. MEMBERSHIP SECTION ============================================================ */ .membership-callout { border: 1px solid rgba(41, 66, 122, 0.12); border-left: 4px solid rgba(170, 27, 47, 0.72); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,246,239,0.88)); box-shadow: var(--shadow-card); padding: 1.35rem; font-size: 1.1rem; line-height: 1.95; } .membership-footnote { border: 1px solid rgba(41, 66, 122, 0.12); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,246,239,0.88)); box-shadow: var(--shadow-card); padding: 1.35rem; display: flex; flex-direction: column; gap: 1.2rem; } .membership-footnote p { line-height: 1.8; opacity: 0.88; } /* ============================================================ 18. LEADERSHIP CARDS ============================================================ */ .leader-card { border: 1px solid rgba(41, 66, 122, 0.12); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,246,239,0.88)); box-shadow: var(--shadow-card); overflow: hidden; } .leader-portrait-wrap { height: 360px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(41, 66, 122, 0.2); background: #f3f1ec; padding: 1rem; } .leader-portrait-wrap img { height: 100%; width: 100%; object-fit: contain; object-position: center; } .leader-card-body { padding: 1.5rem; } @media (min-width: 1280px) { .leader-card-body { padding: 2rem; } } .leader-role-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(30, 58, 110, 0.7); font-family: var(--font-sans); border-top: 2px solid rgba(41, 66, 122, 0.55); padding-top: 0.75rem; display: inline-block; } .leader-name { font-family: var(--font-serif); font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 0.98; color: #323181; margin-top: 0.5rem; } .leader-org { margin-top: 0.5rem; font-size: 1rem; line-height: 1.75; color: var(--muted-foreground); } .leader-bio { margin-top: 1.25rem; } .leader-bio p { font-size: 0.9375rem; line-height: 1.875; color: rgba(26, 37, 64, 0.8); margin-top: 1rem; } .leader-bio p:first-child { margin-top: 0; } /* ============================================================ 19. UPDATES SECTION ============================================================ */ .update-card span { display: inline-block; margin-bottom: 0.85rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(30, 58, 110, 0.8); font-family: var(--font-sans); } /* ============================================================ 20. COUNTRIES SECTION ============================================================ */ .country-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .country-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .country-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767px) { .country-grid { grid-template-columns: 1fr; } } .country-chip { border-top: 1px solid rgba(41, 66, 122, 0.18); padding-top: 0.9rem; font-size: 1rem; font-weight: 600; color: var(--foreground); } /* ============================================================ 21. FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--border); background: rgba(253, 252, 249, 0.75); } .footer-inner { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; } @media (min-width: 1024px) { .footer-inner { grid-template-columns: 0.78fr 1.22fr; padding-top: 3.5rem; padding-bottom: 3.5rem; } } .footer-logo { height: 4rem; width: auto; max-width: 260px; object-fit: contain; } .footer-desc { max-width: 42rem; font-size: 1rem; line-height: 1.75; color: var(--muted-foreground); margin-top: 1.25rem; } .footer-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 767px) { .footer-cards { grid-template-columns: 1fr; } } .footer-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.15rem; min-height: 100%; } @media (min-width: 640px) { .footer-card { padding: 1.35rem; } } .footer-card h3 { font-size: 1.55rem; line-height: 1.08; } .footer-card p { flex-grow: 1; line-height: 1.8; opacity: 0.88; margin-top: 0; } .footer-card a { display: inline-block; font-weight: 700; color: var(--primary); word-break: break-word; text-decoration: none; margin-top: 0; } .footer-card a:hover { text-decoration: underline; } .footer-copyright { border-top: 1px solid var(--border); padding: 1.25rem 0; font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; } /* ============================================================ 22. MEMBERSHIP APPLICATION PAGE ============================================================ */ /* Pricing Cards */ .pricing-card { display: flex; flex-direction: column; gap: 1rem; border: 1px solid rgba(30, 58, 110, 0.22); background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,241,236,0.96)); padding: 1.5rem; box-shadow: 0 16px 34px rgba(20, 35, 74, 0.08); } @media (min-width: 768px) { .pricing-card { padding: 1.75rem; } } .pricing-topline { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(30, 58, 110, 0.7); font-family: var(--font-sans); } .pricing-card h3 { font-family: var(--font-serif); font-size: clamp(1.85rem, 2.6vw, 2.3rem); line-height: 1; } .pricing-fee { font-size: 1.15rem; font-weight: 700; color: var(--primary); font-family: var(--font-sans); } .pricing-audience { color: rgba(26, 37, 64, 0.8); line-height: 1.8; } .pricing-divider { height: 1px; background: linear-gradient(90deg, rgba(20,60,124,0.35), rgba(20,60,124,0.04)); } .pricing-items { display: flex; flex-direction: column; gap: 0.5rem; } .pricing-item { position: relative; padding-left: 1rem; color: rgba(26, 37, 64, 0.8); line-height: 1.8; font-size: 0.9375rem; } .pricing-item::before { position: absolute; left: 0; top: 0.72rem; height: 0.34rem; width: 0.34rem; border-radius: 999px; background: var(--primary); content: ""; } /* Process Cards */ .process-card { position: relative; display: flex; flex-direction: column; gap: 1rem; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); padding: 1.5rem; color: rgba(255, 255, 255, 0.92); } @media (min-width: 768px) { .process-card { padding: 1.75rem; } } .process-card h3 { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: white; } .process-card p { line-height: 1.8; color: rgba(255, 255, 255, 0.78); } .process-index { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-family: var(--font-sans); } /* Info Chips */ .info-chip { display: flex; align-items: center; gap: 0.75rem; border: 1px solid rgba(30, 58, 110, 0.18); background: rgba(255, 255, 255, 0.93); padding: 0.95rem 1rem; color: rgba(26, 37, 64, 0.82); } .info-chip-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); color: white; flex-shrink: 0; } .info-chip-icon svg { width: 1.25rem; height: 1.25rem; } .info-chip-text h4 { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.1; color: var(--foreground); } .info-chip-text p { font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); margin-top: 0.25rem; } /* Consultation Form */ .form-card { display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid rgba(30, 58, 110, 0.22); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,243,238,0.98)); padding: 1.5rem; box-shadow: 0 22px 44px rgba(20, 35, 74, 0.08); } @media (min-width: 768px) { .form-card { padding: 2rem; } } .form-grid { display: grid; gap: 1rem; } .form-grid.two-col { grid-template-columns: 1fr; } @media (min-width: 768px) { .form-grid.two-col { grid-template-columns: repeat(2, 1fr); } } .field-block { display: flex; flex-direction: column; gap: 0.55rem; } .field-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(30, 58, 110, 0.68); font-family: var(--font-sans); } .field-input, .field-select, .field-textarea { width: 100%; border: 1px solid rgba(30, 58, 110, 0.3); background: rgba(255, 255, 255, 0.88); padding: 0.95rem 1rem; color: var(--foreground); font-family: var(--font-sans); font-size: 0.9375rem; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; appearance: none; -webkit-appearance: none; } .field-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e3a6e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .field-input:focus, .field-select:focus, .field-textarea:focus { border-color: rgba(30, 58, 110, 0.7); box-shadow: 0 0 0 4px rgba(28, 72, 148, 0.08); background: white; } .field-textarea { min-height: 9rem; resize: vertical; line-height: 1.7; } .form-footer-bar { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid rgba(30, 58, 110, 0.2); padding-top: 1.25rem; } .form-footer-bar p { color: rgba(26, 37, 64, 0.76); line-height: 1.75; font-size: 0.875rem; } /* ============================================================ 23. FAQ SECTION ============================================================ */ .faq-shell { border-top: 1px solid rgba(30, 58, 110, 0.16); background: linear-gradient(180deg, rgba(251,249,244,0.82), rgba(255,255,255,0.96)); } .faq-stack { display: grid; gap: 0.85rem; } .faq-card { border: 1px solid rgba(30, 58, 110, 0.22); background: rgba(255, 255, 255, 0.92); padding: 0 1.4rem; box-shadow: 0 14px 28px rgba(20, 35, 74, 0.05); } .faq-trigger { width: 100%; padding: 1.35rem 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 2.25vw, 1.9rem); line-height: 1.05; color: rgba(26, 37, 64, 0.92); background: none; border: none; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; transition: color 180ms ease; } .faq-trigger:hover, .faq-trigger[aria-expanded="true"] { color: var(--primary); } .faq-trigger-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.4rem; color: rgba(30, 58, 110, 0.76); transition: transform 220ms ease; } .faq-trigger[aria-expanded="true"] .faq-trigger-icon { transform: rotate(180deg); } .faq-content { overflow: hidden; max-height: 0; transition: max-height 280ms ease, padding 280ms ease; } .faq-content.open { max-height: 600px; padding-bottom: 1.35rem; } .faq-content p { color: rgba(26, 37, 64, 0.8); line-height: 1.85; font-size: 1rem; } /* ============================================================ 24. SUCCESS DIALOG / MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-box { background: var(--card); border: 1px solid rgba(41, 66, 122, 0.15); box-shadow: 0 32px 80px rgba(15, 23, 42, 0.2); padding: 2rem; max-width: 36rem; width: 100%; transform: scale(0.96); transition: transform 220ms ease; } .modal-overlay.open .modal-box { transform: scale(1); } .modal-title { font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--foreground); } .modal-desc { margin-top: 0.75rem; line-height: 1.8; color: var(--muted-foreground); } .modal-note { margin-top: 1rem; padding: 0.85rem 1rem; background: var(--muted); border-left: 3px solid rgba(41, 66, 122, 0.4); font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); } .modal-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } /* ============================================================ 25. MEMBERSHIP PAGE HERO ============================================================ */ .membership-hero-section { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); } .membership-hero-slab { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,51,91,0.97), rgba(32,45,80,0.97)); } .membership-hero-content { position: relative; z-index: 1; padding-top: 3rem; padding-bottom: 3rem; color: var(--contrast-text); } .membership-hero-eyebrow { display: inline-block; border-top: 2px solid rgba(255,255,255,0.3); padding-top: 0.75rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,248,239,0.7); font-family: var(--font-sans); } .membership-hero-title { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 0.98; color: white; margin-top: 1.5rem; max-width: 22ch; text-wrap: balance; } .membership-hero-desc { margin-top: 1.5rem; max-width: 52ch; font-size: 1.0625rem; line-height: 1.9; color: rgba(255,248,239,0.82); } .membership-metrics { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; } @media (max-width: 639px) { .membership-metrics { grid-template-columns: 1fr; } } .membership-metric { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); padding: 1.2rem; } .membership-metric-value { font-family: var(--font-serif); font-size: 2.3rem; line-height: 1; color: rgba(255,248,239,0.95); } .membership-metric-label { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.6; color: rgba(255,248,239,0.65); } /* ============================================================ 26. RETURN HEADER (Membership page) ============================================================ */ .return-header { border-bottom: 1px solid rgba(41, 66, 122, 0.15); background: rgba(249, 247, 242, 0.95); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 100; } .return-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.875rem; padding-bottom: 0.875rem; } .return-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); text-decoration: none; transition: color 180ms ease; } .return-link:hover { color: var(--primary-light); } .return-link svg { width: 1rem; height: 1rem; } /* ============================================================ 27. UTILITY CLASSES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .text-primary { color: var(--primary); } .text-muted { color: var(--muted-foreground); } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } /* Two-column layout helpers */ .two-col-layout { display: grid; gap: 2.5rem; } @media (min-width: 1024px) { .two-col-layout { grid-template-columns: 1fr 1fr; } .two-col-layout.left-wider { grid-template-columns: 0.92fr 1.08fr; } .two-col-layout.right-wider { grid-template-columns: 0.72fr 1.28fr; } .two-col-layout.left-narrow { grid-template-columns: 0.75fr 1.25fr; } .two-col-layout.functions-layout { grid-template-columns: 0.72fr 1.28fr; } .two-col-layout.sectors-layout { grid-template-columns: 1.15fr 0.85fr; } } .sticky-col { position: sticky; top: 7rem; } /* ============================================================ 28. TOAST NOTIFICATION ============================================================ */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast { background: var(--foreground); color: var(--primary-foreground); padding: 0.85rem 1.25rem; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); font-size: 0.9rem; line-height: 1.5; max-width: 22rem; pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; } .toast.show { opacity: 1; transform: translateY(0); } .toast-title { font-weight: 700; } .toast-desc { opacity: 0.8; margin-top: 0.2rem; font-size: 0.85rem; }