/* ================================================================= HKIA 70 — Architecture N.O.W Design tokens. EVERY spacing / sizing value is a multiple of 4px. (1px is reserved only for hairline borders & SVG strokes.) ================================================================= */ /* ---- Client brand fonts (self-hosted woff2) ---- */ @font-face { font-family: "Acumin Variable Concept"; src: url("../assets/fonts/acumin-variable.woff2") format("woff2"); font-weight: 100 900; /* variable wght axis */ font-stretch: 50% 115%; /* variable wdth axis */ font-style: oblique 0deg 12deg;/* variable slnt axis */ font-display: swap; } @font-face { font-family: "Noto Sans CJK TC"; src: url("../assets/fonts/noto-cjk-tc-black.subset.woff2") format("woff2"); font-weight: 900; font-display: swap; /* only fetched when a CJK character is actually rendered */ unicode-range: U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; } :root { /* ---- brand palette ---- */ --navy: #192346; /* home background (theme-navy) */ --mint: #cbeeed; /* contact background (theme-mint) */ --teal-dark: #193f3a; /* sign-up band background */ --teal-ink: #194245; /* ink on mint (text, logo) */ --teal-line: rgba(25, 66, 69, 0.55); /* hairline / field underline on mint */ --gold: #b89043; /* ink on navy */ --gold-line: rgba(184, 144, 67, 0.65); /* hairline on navy */ /* ---- neutrals & status ---- */ --paper: #f2efe7; /* warm off-white (CTA text on navy) */ --white: #ffffff; /* input text on the dark band */ --error: #b03a2e; /* form error — light surfaces */ --error-on-dark:#ffb4ab; /* form error — dark sign-up band */ /* ---- footer (theme-independent) ---- */ --foot-bg: #e8e7e9; --foot-ink: #1c1c1c; /* ---- spacing scale — every value is a multiple of 4px ---- */ --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-72: 72px; --s-80: 80px; --s-96: 96px; --s-120: 120px; /* ---- type ---- */ --font-display: "Acumin Variable Concept", "Noto Sans CJK TC", "Jost", system-ui, sans-serif; --font-body: "Acumin Variable Concept", "Noto Sans CJK TC", "Inter", system-ui, sans-serif; /* ---- motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- theme bindings — a page sets ONE of these on ---- .theme-navy = home (navy bg / gold ink) · .theme-mint = contact (mint bg / teal ink) Components reference the semantic --bg / --ink / --line, never the raw brand tokens. */ .theme-navy { --bg: var(--navy); --ink: var(--gold); --line: var(--gold-line); } .theme-mint { --bg: var(--mint); --ink: var(--teal-ink); --line: var(--teal-line); } /* ================================================================= Reset ================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; color: inherit; cursor: pointer; } /* ================================================================= Page transition curtain ================================================================= */ .curtain { position: fixed; inset: 0; z-index: 999; background: var(--bg); transform-origin: top; pointer-events: none; } /* ================================================================= Stage — header / main / footer ================================================================= */ .stage { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* ---- top bar ---- */ .topbar { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s-32) var(--s-48); } .logo-now { display: inline-flex; align-items: flex-start; gap: var(--s-4); } .logo-now__img { width: 176px; height: auto; display: block; } /* Animated logo: the trailing words (…ET-ZERO / …PPORTUNITIES / …ELLBEING) collapse into the big N.O.W. Tails default hidden so the resting state (no-JS / reduced-motion) is the short N.O.W mark. */ .logo-anim { overflow: visible; } .logo-anim #logo-tails { opacity: 0; } .logo-anim .logo-tail { will-change: transform, opacity; } .logo-now__main { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: 0.12em; line-height: 1; } .logo-now__sub { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: 0.04em; line-height: 0.92; margin-top: var(--s-4); } .logo-now__sub i { font-style: normal; position: relative; } .logo-now__sub i::after { content: "."; position: absolute; right: -0.32em; bottom: 0.08em; } /* ---- brand seal — links to hkia.net ---- */ .brand-seal { display: inline-flex; align-items: center; gap: var(--s-12); transition: opacity 0.2s var(--ease); } .brand-seal:hover { opacity: 0.7; } .brand-seal__chop { width: 64px; height: 64px; } .brand-seal__70 { width: 64px; height: 64px; } .brand-seal__logo { height: 64px; width: auto; } /* ================================================================= HERO (home) ================================================================= */ .hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "events diagram" "copy diagram"; column-gap: var(--s-48); padding: var(--s-32) var(--s-48) var(--s-48); } .hero__copy { grid-area: copy; align-self: end; padding-bottom: var(--s-32); } .hero .diagram-wrap { grid-area: diagram; align-self: center; } .hero__lockup { line-height: 0; } .hero__wordmark { width: 560px; /* natural size, flush-left in its column */ max-width: 100%; height: auto; display: block; } /* "International Symposium & Guided Tours" — clickable text button (blinks via GSAP) */ .hero__events { grid-area: events; align-self: start; font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: 0.01em; color: var(--paper); text-decoration: none; cursor: pointer; } .hero__events:hover { color: var(--white); } /* ================================================================= Brand diagram (shared) ================================================================= */ .diagram-wrap { display: flex; align-items: center; justify-content: center; } .diagram { width: 100%; max-width: none; /* fill its column (full width of the 50% side) */ height: auto; color: var(--ink); overflow: visible; } .ln { stroke: var(--line); stroke-width: 2; } .ln-bold { stroke: var(--gold); stroke-width: 8; stroke-linecap: square; } .theme-mint .ln { stroke: var(--teal-ink); } /* contact diagram: solid uniform lines */ .theme-mint .ln-bold { stroke: var(--teal-ink); } .lbl { font-family: var(--font-display); font-weight: 400; font-size: 20px; /* SVG user units on the 1000-grid */ letter-spacing: 0.03em; fill: var(--ink); } .lbl-link .lbl { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .lbl-link:hover .lbl, .lbl-link:focus-visible .lbl { fill: var(--white); } /* ================================================================= CONTACT (form page) ================================================================= */ /* ---- symposium info zone (mint) ---- */ .sym { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-48); padding: var(--s-24) var(--s-48) var(--s-64); } .sym__info { max-width: 560px; } .sym__title { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 0.96; letter-spacing: 0.01em; } .sym__title .line { display: block; } .sym__title--sub { margin-top: var(--s-56); font-size: 52px; } /* SVG titles (INTERNATIONAL SYMPOSIUM / GUIDED TOURS). The min() pair keeps the main:sub size ratio constant as the column narrows — no breakpoint rules. */ .sym__title-img { display: block; width: min(504px, 100%); height: auto; } .sym__title-img--sub { width: min(388px, 77%); } .sym__meta { margin-top: var(--s-32); } .sym__row { margin-top: var(--s-24); } .sym__row:first-child { margin-top: 0; } .sym__label { font-size: 18px; opacity: 0.8; } .sym__value { margin-top: var(--s-4); font-size: 26px; font-weight: 300; line-height: 1.2; } /* ---- sign-up zone (dark teal) ---- */ .signup { background: var(--teal-dark); color: var(--mint); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--s-40); padding: var(--s-72) var(--s-48) var(--s-56); } .signup__intro { max-width: 520px; font-size: 28px; font-weight: 300; line-height: 1.32; } /* ---- form ---- */ .form { max-width: 640px; } .signup .form { display: flex; flex-direction: column; max-width: none; } .field { position: relative; margin-bottom: var(--s-20); } .field__input { width: 100%; border: 0; border-bottom: 1px solid var(--teal-line); background: transparent; color: var(--teal-ink); font-family: var(--font-body); font-size: 20px; line-height: 1.4; padding: var(--s-4) 0 var(--s-8); outline: none; border-radius: 0; } .field__input:focus { border-bottom-color: var(--teal-ink); } .field__label { position: absolute; left: 0; top: var(--s-8); font-size: 20px; color: var(--teal-ink); text-transform: capitalize; /* "Full Name", "Email Address (Primary Contact)", … */ pointer-events: none; transform-origin: left top; transition: transform 0.24s var(--ease), opacity 0.24s var(--ease); } .field__input:focus + .field__label, .field__input:not(.field__input--select):not(:placeholder-shown) + .field__label, .field__input--select:valid + .field__label { transform: translateY(-24px) scale(0.72); opacity: 0.72; } .field__input--select { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23194245' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 12px 8px; cursor: pointer; } .field__input--select:required:invalid { color: transparent; } /* ---- custom dropdown (Attendance) ---- */ .cselect__trigger { position: relative; text-align: left; cursor: pointer; padding-right: 24px; /* room for the chevron */ } /* hold the input height even when empty, so the underline can't ride up into the label and read as a strikethrough */ .cselect__value { display: block; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cselect__chevron { position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.24s var(--ease); } .field--select.is-open .cselect__chevron { transform: translateY(-50%) rotate(180deg); } /* lift the open field (and its list) above the Submit button, which GSAP leaves with a transform-induced stacking context */ .field--select.is-open { z-index: 40; } .cselect__list { position: absolute; top: calc(100% + var(--s-8)); left: 0; right: 0; z-index: 30; margin: 0; padding: var(--s-8) 0; list-style: none; background: var(--mint); /* #cbeeed — square, no radius */ color: var(--teal-dark); border-radius: 0; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } .cselect__list[hidden] { display: none; } .cselect__option { padding: var(--s-12) var(--s-16); font-family: var(--font-body); font-size: 18px; line-height: 1.2; cursor: pointer; transition: background 0.16s var(--ease), color 0.16s var(--ease); } .cselect__option.is-active, .cselect__option:hover { background: var(--teal-dark); color: var(--mint); } .cselect__option[aria-selected="true"] { font-weight: 500; } /* floating label for the custom select (no :placeholder-shown to key off) */ .field--select.is-open .field__label, .field--select.is-filled .field__label { transform: translateY(-24px) scale(0.72); opacity: 0.72; } .form__submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-12); min-width: 200px; margin-top: var(--s-8); padding: var(--s-16) var(--s-40); border: 1px solid var(--teal-ink); background: var(--teal-ink); color: var(--mint); font-family: var(--font-display); font-size: 20px; letter-spacing: 0.08em; border-radius: 0; transition: background 0.24s var(--ease), color 0.24s var(--ease); } .form__submit:hover { background: transparent; color: var(--teal-ink); } .form__submit[disabled] { opacity: 0.6; cursor: default; } .form__spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: none; } .form__submit.is-loading .form__spinner { display: inline-block; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .form__status { margin-top: var(--s-20); min-height: var(--s-24); font-size: 16px; line-height: 1.4; } .form__status.is-ok { color: var(--teal-ink); } .form__status.is-err { color: var(--error); } /* ---- form on the dark sign-up band (light on dark) ---- */ .signup .field__input { color: var(--white); border-bottom-color: rgba(203, 238, 237, 0.4); } .signup .field__input:focus { border-bottom-color: var(--mint); } .signup .field__label { color: rgba(203, 238, 237, 0.5); } .signup .field__input--select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23cbeeed' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .signup .form .field:last-of-type { margin-bottom: var(--s-12); } .signup .form__submit { align-self: flex-end; min-width: 0; margin-top: 0; padding: var(--s-8) 0; background: transparent; border: none; color: var(--mint); font-size: 20px; letter-spacing: 0.04em; } .signup .form__submit:hover { background: transparent; color: var(--white); text-decoration: underline; } .signup .form__status.is-ok { color: var(--mint); } .signup .form__status.is-err { color: var(--error-on-dark); } /* ================================================================= Footer (always light) ================================================================= */ .sitefoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24) var(--s-32); /* row-gap when wrapped, col-gap otherwise */ flex-wrap: wrap; background: var(--foot-bg); color: var(--foot-ink); padding: var(--s-72) var(--s-24) var(--s-24); /* top 72 · sides 24 · bottom 24 (all viewports) */ } .sitefoot__left { display: inline-flex; align-items: center; gap: var(--s-64); } .sitefoot__brand { display: inline-flex; align-items: center; gap: var(--s-12); } .sitefoot__seal { width: 48px; height: 48px; } .sitefoot__70 { width: 48px; height: 48px; } .sitefoot__logo { height: 40px; width: auto; display: block; } .sitefoot__copy { font-size: 16px; } /* links + social grouped on the right */ .sitefoot__right { display: inline-flex; align-items: center; gap: var(--s-24); } .sitefoot__links { display: inline-flex; align-items: center; gap: var(--s-16); font-size: 16px; } .sitefoot__links a:hover { text-decoration: underline; } .sitefoot__links .sep { opacity: 0.5; } /* nudge icons down 3px: their box centers on the row, but the link text's optical center sits ~3px lower (font baseline), so match it */ .social { display: inline-flex; align-items: center; gap: var(--s-20); transform: translateY(3px); } .social a { display: inline-flex; transition: opacity 0.2s var(--ease); } .social a:hover { opacity: 0.6; } .social__icon { width: 28px; height: 28px; display: block; } /* ================================================================= RESPONSIVE — Tablet (≤ 1024px) ================================================================= */ @media (max-width: 1024px) { .topbar { padding: var(--s-24) var(--s-32); } .hero, .sym, .signup { grid-template-columns: 1fr; gap: var(--s-40); } .hero, .sym { padding: var(--s-16) var(--s-32) var(--s-40); } .signup { padding: var(--s-48) var(--s-32); } /* HOME portrait: heading → diagram → wordmark, left-aligned */ .hero { grid-template-rows: none; grid-template-areas: none; justify-items: stretch; text-align: left; } .hero__events { grid-area: auto; align-self: auto; order: 1; } .hero .diagram-wrap { grid-area: auto; align-self: auto; order: 2; } .hero__copy { grid-area: auto; align-self: auto; padding-bottom: 0; order: 3; } .hero__wordmark { width: 560px; max-width: 100%; margin-inline: 0; } /* CONTACT portrait: diagram → info → form */ .sym .diagram-wrap { order: 1; } .sym__info { order: 2; max-width: none; } .sym__title { font-size: 56px; } .sym__title--sub { font-size: 44px; } .signup__intro { font-size: 24px; } /* footer → tablet/mobile: logo left · social/links/copyright stacked right */ .sitefoot { display: grid; grid-template-columns: auto 1fr minmax(0, max-content); grid-template-areas: "brand . social" "brand . links" "brand . copy"; align-items: start; row-gap: var(--s-16); column-gap: var(--s-32); padding: var(--s-72) var(--s-24) var(--s-24); } .sitefoot__left, .sitefoot__right { display: contents; } .sitefoot__brand { grid-area: brand; } .sitefoot__logo { height: 32px; } .social { grid-area: social; margin-bottom: var(--s-24); flex-wrap: wrap; } .sitefoot__links { grid-area: links; flex-wrap: wrap; } .sitefoot__copy { grid-area: copy; } } /* ================================================================= RESPONSIVE — Mobile (≤ 640px) ================================================================= */ @media (max-width: 640px) { .topbar { padding: var(--s-20) var(--s-20); } .logo-now__main { font-size: 20px; } .logo-now__img { width: 144px; } .brand-seal__chop, .brand-seal__70 { width: 48px; height: 48px; } .brand-seal__logo { height: 48px; } .hero, .sym { padding: var(--s-16) var(--s-20) var(--s-32); gap: var(--s-32); } .sym { padding-top: var(--s-32); } /* doubled gap between the logo and the diagram (16 → 32) */ .signup { padding: var(--s-40) var(--s-20); gap: var(--s-32); } .hero__events { font-size: 24px; margin-bottom: var(--s-32); } /* +32 on top of the 32 gap = doubled space before the diagram */ .hero__wordmark { width: 80%; } .sym__title { font-size: 40px; } .sym__title--sub { font-size: 36px; margin-top: var(--s-40); } .signup__intro { font-size: 20px; } .field { margin-bottom: var(--s-24); } .field__input, .field__label { font-size: 16px; } .signup .form__submit { font-size: 16px; } .diagram { max-width: none; } /* footer → phone: left-aligned vertical stack — logo · social · links · copyright */ .sitefoot { grid-template-columns: 1fr; grid-template-areas: "brand" "social" "links" "copy"; justify-items: start; text-align: left; column-gap: 0; row-gap: var(--s-40); /* 40px between each section */ padding: var(--s-40) var(--s-24); /* top = bottom = 40 */ } .sitefoot__brand { justify-content: flex-start; } .sitefoot__logo { height: 40px; } .sitefoot__copy { font-size: 12px; } .sitefoot__links { font-size: 12px; justify-content: flex-start; } .social { margin-bottom: 0; justify-content: flex-start; transform: none; } /* desktop icon nudge not needed in the centered stack */ } /* ================================================================= RESPONSIVE — Small phone (≤ 480px) 12px links no longer fit on one line beside the logo → stack them. ================================================================= */ @media (max-width: 480px) { .sitefoot__logo { height: 32px; } } /* ================================================================= Reduced motion ================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .curtain { display: none; } }