@layer reset, tokens, base, layout, components, pages, utilities; /* chip-row edge fade (components > chips): registered so it interpolates */ @property --chips-fade { syntax: ""; inherits: false; initial-value: 0px; } @keyframes chips-fade { 0%, 85% { --chips-fade: 3rem; } 100% { --chips-fade: 0px; } } /* ===================================================================== WeGrow site stylesheet: "Field Guide" design system. Single canonical stylesheet. Page-specific rules live in css/pages/.css inside `@layer pages { ... }`, linked only from that group's pages. Raw colour values appear ONLY in @layer tokens (plus the print block, which uses --print-* tokens). ===================================================================== */ /* ---------------------------------------------------------------- reset */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; } ol[class], ul[class] { padding: 0; list-style: none; } img, picture, svg, video, iframe { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } address { font-style: normal; } dialog { color: inherit; } [hidden] { display: none; } } /* --------------------------------------------------------------- tokens */ @layer tokens { :root { color-scheme: light dark; /* primitives */ --green-500: #34B574; --green-700: #176A41; --green-800: #10502F; --green-900: #155E3A; --green-950: #14301F; --green-400d: #4CC88A; --green-300d: #6FD49F; --green-band-d: #173A27; --green-ink-d: #0D1F15; --blue-500: #3691C8; --blue-700: #1F6A99; --blue-300d: #7DB8E0; --flag-600: #B4461A; --flag-700: #9A3A12; --flag-300d: #F08A55; --paper: #F6F2EA; --paper-raised: #FFFDF8; --sand: #EDE6D8; --sand-line: #D9D0BF; --stone: #7A847D; --ink: #1C2420; --ink-muted: #4F5A53; --night-0: #0B100D; --night-1: #101613; --night-2: #18201B; --night-3: #212B25; --night-line: #33403A; --night-stone: #6F7D74; --bone: #ECE7DC; --bone-muted: #A9B2AA; --band-muted: #C6D9CB; --footer-muted: #B9CFC0; --red-700: #B3261E; --red-300d: #F2A69E; --danger-bg-l: #F8E3E0; --danger-bg-d: #3A1A17; --success-bg-l: #E3EFE6; --success-bg-d: #1B3326; --white: #FFFFFF; --black: #000000; --overlay-l: rgb(11 16 13 / .92); --overlay-d: rgb(0 0 0 / .9); --shadow-1-l: 0 1px 2px rgb(28 36 32 / .08); --shadow-2-l: 0 18px 40px -18px rgb(28 36 32 / .35); --shadow-1-d: 0 1px 2px rgb(0 0 0 / .5); --shadow-2-d: 0 18px 40px -18px rgb(0 0 0 / .7); /* semantic: light */ --color-bg: var(--paper); --color-surface: var(--paper-raised); --color-surface-2: var(--sand); --color-text: var(--ink); --color-text-muted: var(--ink-muted); --color-border: var(--sand-line); --color-border-strong: var(--stone); --color-rule-strong: var(--ink); --color-accent: var(--green-500); --color-accent-ink: var(--green-700); --color-accent-ink-hover: var(--green-800); --color-on-accent: var(--white); --color-link: var(--green-700); --color-link-alt: var(--blue-700); --color-kicker: var(--flag-700); --color-marker: var(--flag-600); --color-on-marker: var(--white); --color-band: var(--green-900); --color-on-band: var(--paper); --color-on-band-muted: var(--band-muted); --color-band-rule: color-mix(in srgb, var(--paper) 22%, transparent); --color-footer-bg: var(--green-950); --color-footer-text: var(--bone); --color-footer-muted: var(--footer-muted); --color-contour: color-mix(in srgb, var(--ink) 9%, transparent); --color-contour-band: color-mix(in srgb, var(--paper) 10%, transparent); --color-focus: var(--blue-700); --color-danger: var(--red-700); --color-danger-bg: var(--danger-bg-l); --color-success: var(--green-700); --color-success-bg: var(--success-bg-l); --color-plate: var(--white); --overlay-lightbox: var(--overlay-l); --color-on-overlay: var(--bone); --shadow-1: var(--shadow-1-l); --shadow-2: var(--shadow-2-l); --print-bg: var(--white); --print-ink: var(--black); /* typography */ --font-sans: "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif; --font-display: "Noto Serif TC", "Songti TC", "PMingLiU", serif; --font-mono: "IBM Plex Mono", "Noto Sans TC", ui-monospace, monospace; --step--1: clamp(.8125rem, .79rem + .1vw, .875rem); --step-0: clamp(1rem, .97rem + .15vw, 1.0625rem); --step-1: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem); --step-2: clamp(1.3rem, 1.15rem + .7vw, 1.75rem); --step-3: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem); --step-4: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); --step-5: clamp(2.4rem, 1.6rem + 3.8vw, 4.75rem); --lh-body: 1.8; --lh-tight: 1.3; --lh-display: 1.18; --measure: 36em; --tracking-cjk: .02em; --tracking-mono: .08em; /* space, layout, radius, motion */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --section-pad: clamp(3.5rem, 2rem + 5vw, 7rem); --gutter: 16px; --max: 76rem; --header-h: 64px; --tap: 44px; --row-h: 56px; --radius-xs: 2px; --radius-s: 4px; --radius-m: 8px; --radius-pill: 999px; --dur-1: 120ms; --dur-2: 220ms; --dur-3: 320ms; --ease: cubic-bezier(.2, .7, .2, 1); --obj-square: 50% 35%; --tile-h: 16rem; } @media (min-width: 40em) { :root { --gutter: clamp(24px, 4vw, 48px); } } @media (min-width: 64em) { :root { --header-h: 76px; --tile-h: 18rem; } } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } } /* semantic: dark (written twice: OS preference, and explicit opt-in) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--night-1); --color-surface: var(--night-2); --color-surface-2: var(--night-3); --color-text: var(--bone); --color-text-muted: var(--bone-muted); --color-border: var(--night-line); --color-border-strong: var(--night-stone); --color-rule-strong: var(--bone); --color-accent: var(--green-500); --color-accent-ink: var(--green-400d); --color-accent-ink-hover: var(--green-300d); --color-on-accent: var(--green-ink-d); --color-link: var(--green-400d); --color-link-alt: var(--blue-300d); --color-kicker: var(--flag-300d); --color-marker: var(--flag-300d); --color-on-marker: var(--green-ink-d); --color-band: var(--green-band-d); --color-on-band: var(--bone); --color-on-band-muted: var(--footer-muted); --color-band-rule: color-mix(in srgb, var(--bone) 18%, transparent); --color-footer-bg: var(--night-0); --color-footer-text: var(--bone); --color-footer-muted: var(--bone-muted); --color-contour: color-mix(in srgb, var(--bone) 7%, transparent); --color-contour-band: color-mix(in srgb, var(--bone) 7%, transparent); --color-focus: var(--blue-300d); --color-danger: var(--red-300d); --color-danger-bg: var(--danger-bg-d); --color-success: var(--green-400d); --color-success-bg: var(--success-bg-d); --color-plate: var(--white); --overlay-lightbox: var(--overlay-d); --color-on-overlay: var(--bone); --shadow-1: var(--shadow-1-d); --shadow-2: var(--shadow-2-d); } } :root[data-theme="dark"] { color-scheme: dark; --color-bg: var(--night-1); --color-surface: var(--night-2); --color-surface-2: var(--night-3); --color-text: var(--bone); --color-text-muted: var(--bone-muted); --color-border: var(--night-line); --color-border-strong: var(--night-stone); --color-rule-strong: var(--bone); --color-accent: var(--green-500); --color-accent-ink: var(--green-400d); --color-accent-ink-hover: var(--green-300d); --color-on-accent: var(--green-ink-d); --color-link: var(--green-400d); --color-link-alt: var(--blue-300d); --color-kicker: var(--flag-300d); --color-marker: var(--flag-300d); --color-on-marker: var(--green-ink-d); --color-band: var(--green-band-d); --color-on-band: var(--bone); --color-on-band-muted: var(--footer-muted); --color-band-rule: color-mix(in srgb, var(--bone) 18%, transparent); --color-footer-bg: var(--night-0); --color-footer-text: var(--bone); --color-footer-muted: var(--bone-muted); --color-contour: color-mix(in srgb, var(--bone) 7%, transparent); --color-contour-band: color-mix(in srgb, var(--bone) 7%, transparent); --color-focus: var(--blue-300d); --color-danger: var(--red-300d); --color-danger-bg: var(--danger-bg-d); --color-success: var(--green-400d); --color-success-bg: var(--success-bg-d); --color-plate: var(--white); --overlay-lightbox: var(--overlay-d); --color-on-overlay: var(--bone); --shadow-1: var(--shadow-1-d); --shadow-2: var(--shadow-2-d); } :root[data-theme="light"] { color-scheme: light; } } /* ----------------------------------------------------------------- base */ @layer base { html { scroll-padding-top: calc(var(--header-h) + var(--space-4)); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font: 400 var(--step-0)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { height: auto; } h1, h2, h3, h4 { color: var(--color-text); letter-spacing: var(--tracking-cjk); line-height: var(--lh-tight); text-wrap: balance; /* CJK headings: normal CJK breaking with strict kinsoku, so balance can even out the lines and punctuation never starts a line. keep-all would turn a spaceless Chinese heading into one unbreakable word that only breaks on overflow and strands 1-2 glyphs. Phrases that must stay together are wrapped in .cta-band__nobr. */ word-break: normal; line-break: strict; overflow-wrap: anywhere; } h1 { font: 900 var(--step-4)/var(--lh-display) var(--font-display); } h2 { font: 700 var(--step-3)/var(--lh-display) var(--font-display); } h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--step-1); } h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--step-0); } p { text-wrap: pretty; } strong, b { font-weight: 700; } small { font-size: var(--step--1); } a { color: var(--color-link); text-underline-offset: .2em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); } .cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--color-on-band); } ::selection { background: var(--color-accent-ink); color: var(--color-on-accent); } main { display: block; } hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; } } /* --------------------------------------------------------------- layout */ @layer layout { .container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } .grid-12 { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); } @media (min-width: 64em) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); } } .bleed-grid { display: grid; grid-template-columns: [full-start] var(--gutter) [content-start split] minmax(0, 1fr) [content-end] var(--gutter) [full-end]; } @media (min-width: 64em) { .bleed-grid { grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, calc(var(--max) / 2)) [split] minmax(0, calc(var(--max) / 2)) [content-end] minmax(var(--gutter), 1fr) [full-end]; } } .section { padding-block: var(--section-pad); overflow-x: clip; } .section--alt { background: var(--color-surface-2); } /* two consecutive sections on the plain background share one gap */ .section:not(.section--alt) + .section:not(.section--alt) { padding-top: 0; } /* text column / media column split */ .split { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); } @media (min-width: 64em) { .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; } .split > .split__text { grid-column: 1 / span 6; } .split > .split__media { grid-column: 8 / -1; } } .split__media { --topo-inset: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); margin: 0 var(--space-3) var(--space-3) 0; } .split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); } @media (min-width: 64em) { .split__media { --topo-inset: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5); margin: 0 var(--space-5) var(--space-5) 0; } } /* sticky head + body (section-head--split) */ .split-head { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 64em) { .split-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); } .split-head > .section-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; margin-bottom: 0; } .split-head > .split-head__body { grid-column: 6 / -1; } } } /* ----------------------------------------------------------- components */ @layer components { /* ---------- skip link ---------- */ .skip-link { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 100; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); background: var(--color-surface); color: var(--color-text); font-weight: 700; border: 2px solid var(--color-text); border-radius: var(--radius-s); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .skip-link:focus, .skip-link:focus-visible { clip-path: none; width: auto; height: var(--tap); overflow: visible; } /* ---------- contour motif ---------- */ .topo { position: relative; isolation: isolate; } .topo::before { content: ""; position: absolute; inset: var(--topo-inset, 0); z-index: -1; pointer-events: none; background: var(--topo-color, var(--color-contour)); -webkit-mask: url("../images/topo.svg") center / var(--topo-size, 1200px) repeat; mask: url("../images/topo.svg") center / var(--topo-size, 1200px) repeat; } .topo--band { --topo-color: var(--color-contour-band); } /* ---------- control-flag marker ---------- */ /* Outlined flag: numeral top-left on the light half, orange corner bottom-right. The diagonal stop sits at 68% so a two-digit numeral (01-12) clears it at both sizes: 2.5rem (default) and 2rem (.marker inside .onpage / .form-index / .nav-panel__label / .related__route). */ .marker { --marker-size: 2.5rem; display: inline-grid; place-content: start; flex-shrink: 0; width: var(--marker-size); height: var(--marker-size); padding: .15rem .3rem; border: 2px solid var(--color-marker); border-radius: var(--radius-xs); background: linear-gradient(135deg, var(--color-surface) 0 68%, var(--color-marker) 68% 100%); color: var(--color-text); font: 600 var(--step--1)/1.2 var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; } :is(.onpage, .form-index, .nav-panel__label, .related__route) .marker { --marker-size: 2rem; } :is(.onpage, .form-index) .marker:not(.marker--solid) { padding: .1rem .2rem; font-size: .75rem; } .marker--solid { place-content: center; padding: 0; background: var(--color-marker); color: var(--color-on-marker); } /* route line: marker + mono route name */ .route-line { display: inline-flex; align-items: center; gap: var(--space-3); font: 600 var(--step--1)/1.2 var(--font-mono); letter-spacing: var(--tracking-mono); color: var(--color-kicker); } /* ---------- topographic plate ---------- */ .plate { --topo-size: 900px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); aspect-ratio: 4 / 3; padding: var(--space-5); background: var(--color-surface-2); color: var(--color-text); border-radius: var(--radius-s); overflow: hidden; } .plate__label { order: -1; font: 600 var(--step--1)/1.3 var(--font-mono); letter-spacing: var(--tracking-mono); color: var(--color-text-muted); } .plate__num { font: 600 clamp(4rem, 10vw, 9rem)/.9 var(--font-mono); letter-spacing: -.02em; color: var(--color-text); } .plate--night { --topo-color: var(--color-contour-band); background: var(--color-band); color: var(--color-on-band); } .plate--night .plate__num { color: var(--color-on-band); } .plate--night .plate__label { color: var(--color-on-band-muted); } /* ---------- eyebrow + breadcrumb ---------- */ .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-3); font: 600 var(--step--1)/1.4 var(--font-mono); letter-spacing: var(--tracking-mono); color: var(--color-kicker); } .eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--color-accent); } .breadcrumb { margin-bottom: var(--space-4); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; list-style: none; font: 600 var(--step--1)/1.3 var(--font-mono); letter-spacing: var(--tracking-mono); } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li + li::before { content: "/"; margin-inline: var(--space-2); color: var(--color-border-strong); } /* Each crumb link is a 44x44 target even when its text is two glyphs (首頁). The padding is pulled back by the same negative margin, so the text and the separators do not move; position + z-index let the padded area win the hit test over the neighbouring crumb. */ .breadcrumb a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: var(--tap); min-inline-size: var(--tap); padding-inline: var(--space-2); margin-inline: calc(-1 * var(--space-2)); color: var(--color-text-muted); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; color: var(--color-text); } .breadcrumb [aria-current="page"] { color: var(--color-text); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-s); border: 2px solid transparent; background: transparent; color: var(--color-text); font: 700 var(--step-0)/1.2 var(--font-sans); letter-spacing: var(--tracking-cjk); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1); } .btn:hover { text-decoration: none; } .btn-primary, .btn--primary, .btn-submit { background: var(--color-accent-ink); border-color: var(--color-accent-ink); color: var(--color-on-accent); } .btn-primary:hover, .btn--primary:hover, .btn-submit:hover { background: var(--color-accent-ink-hover); border-color: var(--color-accent-ink-hover); color: var(--color-on-accent); } .btn--secondary, .btn--whatsapp { background: transparent; border-color: var(--color-text); color: var(--color-text); } .btn--secondary:hover, .btn--whatsapp:hover { background: var(--color-surface-2); color: var(--color-text); } .btn--whatsapp .fa-whatsapp { color: var(--color-accent-ink); font-size: 1.15em; } .btn--on-band { background: var(--color-on-band); border-color: var(--color-on-band); color: var(--color-band); } .btn--on-band:hover { background: var(--color-on-band-muted); border-color: var(--color-on-band-muted); color: var(--color-band); } .btn--on-band .fa-whatsapp { color: var(--color-band); } .btn--ghost-band { background: transparent; border-color: var(--color-on-band); color: var(--color-on-band); } .btn--ghost-band:hover { background: var(--color-band-rule); color: var(--color-on-band); } .btn--ghost-band .fa-whatsapp, .btn--ghost-band.btn--whatsapp .fa-whatsapp { color: var(--color-on-band); } .btn--sm { min-height: 44px; padding: 0 var(--space-4); } .btn[disabled], .btn:disabled { opacity: .6; cursor: progress; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } @media (max-width: 39.99em) { .btn-row > .btn { width: 100%; } } .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: 10px; font-weight: 700; color: var(--color-link); text-decoration: none; } .link-arrow:hover { text-decoration: underline; } .link-arrow::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; clip-path: polygon(0 42%, 62% 42%, 40% 14%, 52% 4%, 100% 50%, 52% 96%, 40% 86%, 62% 58%, 0 58%); transition: translate var(--dur-1) var(--ease); } .link-arrow:hover::after { translate: 3px 0; } /* luggage tag (was .program-badge) */ .tag { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; width: fit-content; padding: .15rem .55rem .15rem .9rem; position: relative; border: 1.5px solid var(--color-marker); border-radius: var(--radius-xs); color: var(--color-kicker); font: 600 var(--step--1)/1.5 var(--font-mono); letter-spacing: var(--tracking-mono); } .tag::before { content: ""; position: absolute; left: .35rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--color-marker); } /* =================================================== header */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .site-header__inner { position: relative; display: flex; align-items: center; gap: var(--space-2); height: 100%; } .brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--tap); margin-right: auto; color: var(--color-text); text-decoration: none; } .brand__logo { height: 32px; width: auto; min-width: 0; } .brand__name { flex-shrink: 0; padding-left: var(--space-3); border-left: 1px solid var(--color-border-strong); color: var(--color-text); font: 700 var(--step-1)/1 var(--font-display); letter-spacing: var(--tracking-cjk); white-space: nowrap; } .site-nav__list { margin: 0; padding: 0; list-style: none; } .site-nav__link { display: flex; align-items: center; color: var(--color-text); text-decoration: none; } .site-nav__row { display: flex; align-items: center; } .site-nav__expand { display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--color-text); border-radius: var(--radius-s); } .site-nav__expand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--dur-2) var(--ease); } .site-nav__expand[aria-expanded="true"] svg { rotate: 180deg; } .nav-panel { --topo-inset: 40% 0 0 55%; --topo-size: 700px; } .nav-panel ul { margin: 0; padding: 0; list-style: none; } .nav-panel a { color: var(--color-text); text-decoration: none; } .nav-panel a:hover { text-decoration: underline; } .nav-panel__label { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; font: 700 var(--step-1)/1.3 var(--font-display); letter-spacing: var(--tracking-cjk); } .nav-panel__group ul a { display: flex; align-items: center; min-height: 44px; font: 500 var(--step-0)/1.3 var(--font-sans); } .nav-panel a[aria-current="page"] { color: var(--color-accent-ink); text-decoration: underline; text-decoration-thickness: 2px; } .nav-panel__all.link-arrow { color: var(--color-link); } .site-nav__quick a { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; color: var(--color-accent-ink); font-weight: 500; text-decoration: none; } .site-nav__quick i { width: 1.25rem; text-align: center; } .header-wa, .nav-toggle { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--color-text); } .header-wa { color: var(--color-accent-ink); font-size: 1.25rem; text-decoration: none; } .header-wa:hover { background: var(--color-surface-2); } .nav-toggle:hover { background: var(--color-surface-2); } .nav-toggle__icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .nav-toggle__icon path { transform-box: fill-box; transform-origin: center; transition: rotate var(--dur-2) var(--ease), translate var(--dur-2) var(--ease), opacity var(--dur-2); } .nav-toggle[aria-expanded="true"] .l1 { translate: 0 6px; rotate: 45deg; } .nav-toggle[aria-expanded="true"] .l2 { opacity: 0; } .nav-toggle[aria-expanded="true"] .l3 { translate: 0 -6px; rotate: -45deg; } /* ----- header: mobile + tablet (<64em) ----- */ @media (max-width: 63.99em) { .site-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg); padding: var(--space-4) var(--gutter) var(--space-8); transition: opacity var(--dur-2), translate var(--dur-2), visibility 0s linear 0s; } html.js .site-nav:not([data-open]) { visibility: hidden; opacity: 0; translate: 0 -8px; transition: opacity var(--dur-2), translate var(--dur-2), visibility 0s linear var(--dur-2); } html:not(.js) .site-header { height: auto; } html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--space-2); } html:not(.js) .site-nav { position: static; flex-basis: 100%; padding-inline: 0; } html:not(.js) .nav-toggle { display: none; } html.nav-open { overflow: hidden; } .site-nav__list { max-width: 40rem; margin-inline: auto; } .site-nav__item { border-bottom: 1px solid var(--color-border); } .site-nav__item > .site-nav__link, .site-nav__row > .site-nav__link { min-height: var(--row-h); font: 700 var(--step-2)/1.25 var(--font-display); letter-spacing: var(--tracking-cjk); } .site-nav__row > .site-nav__link { flex: 1; } .site-nav__expand { width: 48px; height: 48px; } .site-nav__expand svg { width: 20px; height: 20px; } .site-nav__link[aria-current="page"], .site-nav__link[aria-current="true"] { color: var(--color-accent-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; } .nav-panel { position: static; padding: 0 0 var(--space-4) var(--space-4); margin-bottom: var(--space-4); border-left: 2px solid var(--color-accent); } .nav-panel::before { display: none; } .nav-panel__all { min-height: 48px; } .nav-panel__group ul { padding-left: var(--space-4); } .nav-panel__group ul a { min-height: 48px; } .site-nav__item--cta { border-bottom: 0; } .site-nav__item--cta .btn { width: 100%; margin-top: var(--space-5); min-height: 52px; } .site-nav__quick { display: block; margin-top: var(--space-4); } } /* ----- header: desktop (>=64em) ----- */ @media (min-width: 64em) { .brand__logo { height: 40px; } .brand__name { font-size: 1.375rem; } .nav-toggle, .header-wa, .site-nav__quick { display: none; } .site-nav { height: 100%; } .site-nav__list { display: flex; align-items: center; gap: var(--space-1); height: 100%; } .site-nav__item { display: flex; align-items: center; height: 100%; } .site-nav__link { min-height: 44px; padding: 0 var(--space-3); font-weight: 500; border-radius: var(--radius-xs); } .site-nav__row > .site-nav__link { padding-right: var(--space-1); } .site-nav__link:hover { text-decoration: underline; text-underline-offset: .35em; } .site-nav__link[aria-current="page"], .site-nav__link[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--color-accent); } .site-nav__expand { width: var(--tap); height: var(--tap); } .site-nav__item--panel { position: static; } .site-nav__item--cta { margin-left: var(--space-3); } .nav-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-m) var(--radius-m); box-shadow: var(--shadow-2); visibility: hidden; opacity: 0; translate: 0 -4px; transition: opacity var(--dur-2), translate var(--dur-2), visibility 0s linear var(--dur-2); } .nav-panel[hidden] { display: grid; } .nav-panel__all { grid-column: 1 / -1; justify-self: stretch; margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); } .site-nav__item--panel:hover > .nav-panel, .site-nav__item--panel:focus-within > .nav-panel, .site-nav__item--panel[data-open] > .nav-panel { visibility: visible; opacity: 1; translate: 0 0; transition: opacity var(--dur-2), translate var(--dur-2), visibility 0s; } .site-nav__item--panel[data-dismissed]:not([data-open]) > .nav-panel { visibility: hidden; opacity: 0; translate: 0 -4px; } } /* =================================================== mastheads */ .masthead { border-bottom: 1px solid var(--color-border); overflow-x: clip; } .masthead--split { --topo-inset: 0 0 0 45%; } .masthead__text { grid-column: content-start / content-end; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-6) var(--space-7); } .masthead__text > .route-line, .masthead__text > .eyebrow { margin-bottom: var(--space-4); } .masthead__text h1 { font-size: var(--step-4); } .masthead__lede { max-width: 30em; margin-top: var(--space-4); font-size: var(--step-1); line-height: 1.7; color: var(--color-text-muted); } .masthead__text > .btn-row { margin-top: var(--space-6); } .masthead__media { grid-column: full-start / full-end; margin: 0; } .masthead__media > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .masthead__media > .plate { aspect-ratio: 3 / 2; border-radius: 0; } /* the 2048 square sources: crop off the bottom-right AI badge */ .masthead__media > img[width="2048"] { object-position: var(--obj-square); } @media (min-width: 64em) { .masthead__text { grid-column: content-start / split; padding-block: var(--space-7) var(--space-8); padding-right: var(--space-7); } .masthead__media { grid-column: split / full-end; } /* The photo fills the row (height:100%), but its contribution to the row height is a 3:2 box, never the source's own ratio: a square 2048 source would otherwise make the masthead square and show its badge corner. Row height = max(text column, 3:2 photo, 28rem). */ .masthead__media > img, .masthead__media > .plate { height: 100%; min-height: 28rem; aspect-ratio: 3 / 2; border-radius: var(--radius-s) 0 0 var(--radius-s); } .masthead--split .masthead__media { padding-block: var(--space-6); } } .masthead--compact { padding-block: var(--space-7) var(--space-6); } .masthead--compact .masthead__inner { display: grid; grid-template-columns: minmax(0, 1fr); } .masthead--compact .masthead__lede { max-width: var(--measure); } .masthead__field { display: none; } @media (min-width: 64em) { .masthead--compact .masthead__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: stretch; } .masthead--compact .masthead__body { grid-column: 1 / span 8; } .masthead__field { --topo-size: 800px; display: grid; place-items: center; grid-column: 9 / -1; min-height: 10rem; border-radius: var(--radius-m); } } .masthead__badge { display: grid; place-items: center; width: 4rem; height: 4rem; border: 2px solid var(--color-accent-ink); border-radius: var(--radius-s); background: var(--color-bg); color: var(--color-accent-ink); font-size: 1.5rem; } /* hero (index) */ .hero { overflow-x: clip; border-bottom: 1px solid var(--color-border); } .hero__text { grid-column: content-start / content-end; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-7) var(--space-7); } .hero__text h1 { font-size: var(--step-5); line-height: 1.12; } .hero__lede { max-width: 30em; margin-top: var(--space-4); font-size: var(--step-1); color: var(--color-text-muted); } .hero__text > .btn-row { margin-top: var(--space-6); } .hero__media { grid-column: full-start / full-end; margin: 0; } .hero__media::before { display: none; } .hero__media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .hero__media > .marker { position: absolute; top: var(--space-4); left: var(--space-4); } @media (min-width: 64em) { .hero { min-height: min(88svh, 52rem); } .hero__text { grid-column: content-start / split; padding-block: var(--space-8); padding-right: var(--space-7); } .hero__media { --topo-inset: var(--space-5) var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); grid-column: split / full-end; align-self: stretch; margin-block: var(--space-7); } .hero__media::before { display: block; } .hero__media > img { height: 100%; aspect-ratio: auto; border-radius: var(--radius-s) 0 0 var(--radius-s); } } /* =================================================== section head */ .section-head { border-top: 2px solid var(--color-rule-strong); padding-top: var(--space-4); margin-bottom: var(--space-6); } .section-head h2 { font-size: var(--step-3); } .section-head__lede { max-width: var(--measure); margin-top: var(--space-3); color: var(--color-text-muted); } .section-head > .link-arrow { margin-top: var(--space-2); } /* =================================================== spec ledger */ .program-details { list-style: none; padding: 0; margin: var(--space-4) 0 0; border-top: 1px solid var(--color-border); } .program-details li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--color-border); font-size: var(--step-0); line-height: 1.6; color: var(--color-text); } .program-details li i { color: var(--color-link-alt); text-align: center; padding-top: .35em; } .program-details strong { color: var(--color-text); font-weight: 700; } @media (min-width: 40em) { .program-details li { font-size: var(--step--1); } } /* =================================================== checkpoints (T2 program rows) */ .checkpoints { margin: 0; padding: 0; } .checkpoint { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--color-border); padding-block: var(--space-6); } .checkpoint__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-s); background: var(--color-surface-2); } .checkpoint__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--obj-square); } .checkpoint__media--logo { background: var(--color-plate); } .checkpoint__media--logo img { object-fit: contain; padding: var(--space-6); background: var(--color-plate); } .checkpoint__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-4); } /* the section head above already draws the top rule */ .section-head + .checkpoints > .checkpoint:first-child { border-top: 0; padding-top: 0; } .checkpoints > .checkpoint:last-child { padding-bottom: 0; } .checkpoint__body > .marker { margin-bottom: var(--space-1); } .checkpoint__body h3 { font-size: var(--step-2); } .checkpoint__body p { max-width: var(--measure); color: var(--color-text-muted); } .checkpoint__body .program-details { align-self: stretch; max-width: var(--measure); } @media (min-width: 64em) { .checkpoint { grid-template-columns: 7fr 5fr; column-gap: var(--space-7); align-items: center; padding-block: var(--space-7); } .checkpoint__media { aspect-ratio: 4 / 3; } .checkpoint__body { padding-top: 0; } .checkpoint:nth-child(even) { grid-template-columns: 5fr 7fr; } .checkpoint:nth-child(even) .checkpoint__media { order: 2; } } /* =================================================== catalogue cards */ .card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin: 0; padding: 0; } @media (min-width: 40em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 80em) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); overflow: hidden; transition: border-color var(--dur-1); } .card:hover { border-color: var(--color-border-strong); } .card__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-surface-2); } .card__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--obj-square); transition: scale var(--dur-3) var(--ease); } .card__media--logo { background: var(--color-plate); } .card__media--logo img { object-fit: contain; padding: var(--space-6); background: var(--color-plate); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .card:hover .card__media img { scale: 1.03; } } .card__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); } .card__body h3 { font-size: var(--step-1); } .card__body > p { color: var(--color-text-muted); } .card__body .program-details { margin-top: var(--space-2); } .card__body > .link-arrow { margin-top: auto; align-self: flex-start; } .card-grid--feature { grid-template-columns: minmax(0, 1fr); } @media (min-width: 40em) { .card-grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--feature > .card:first-child { grid-column: 1 / -1; } } @media (min-width: 64em) { .card-grid--feature { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; } .card-grid--feature > .card:first-child { grid-column: 1; grid-row: 1 / span 2; } .card-grid--feature > .card:first-child .card__media { aspect-ratio: 4 / 5; flex: 1; } .card-grid--feature > .card:not(:first-child) .card__media { aspect-ratio: 16 / 9; } } /* =================================================== field notes */ .field-notes { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; } @media (min-width: 40em) { .field-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); } } .field-note { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--space-4); align-content: start; padding-block: var(--space-5); border-top: 1px solid var(--color-border); } .field-note > i, .field-note > .icon { grid-row: 1 / span 2; font-size: 1.25rem; color: var(--color-accent-ink); padding-top: .2em; } .field-note > .icon i { color: var(--color-accent-ink); } .field-note h3 { grid-column: 2; font-size: var(--step-1); } .field-note p { grid-column: 2; margin-top: var(--space-1); color: var(--color-text-muted); } /* =================================================== route index (index) */ .routes { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; } .route { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; padding-block: var(--space-5); border-top: 1px solid var(--color-border); } .route:last-child { border-bottom: 1px solid var(--color-border); } .route__media { display: block; overflow: hidden; border-radius: var(--radius-s); background: var(--color-surface-2); } .route__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--obj-square); transition: scale var(--dur-3) var(--ease); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .route:hover .route__media img { scale: 1.03; } } .route__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .route__body h3 { font: 700 var(--step-2)/1.25 var(--font-display); } .route__body h3 a { color: var(--color-text); text-decoration: none; } .route__body h3 a:hover { text-decoration: underline; } .route__body > p { color: var(--color-text-muted); max-width: var(--measure); } .route__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; } .route__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text); font-weight: 500; text-decoration: none; transition: background-color var(--dur-1), border-color var(--dur-1); } .route__links a:hover { background: var(--color-surface-2); border-color: var(--color-text); } @media (min-width: 64em) { .routes { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); } .route { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); padding: 0; border: 0; } .route:last-child { border: 0; } .route:nth-child(4n+1), .route:nth-child(4n) { grid-column: span 7; } .route:nth-child(4n+2), .route:nth-child(4n+3) { grid-column: span 5; } .route:nth-child(4n+1) .route__media img, .route:nth-child(4n) .route__media img { aspect-ratio: 16 / 10; } .route__body { gap: var(--space-3); } } /* service route-head (services #panel-all groups) */ .route-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-8) 0 var(--space-5); padding-top: var(--space-4); border-top: 2px solid var(--color-rule-strong); } .route-head:first-child { margin-top: 0; } .route-head__title { font: 700 var(--step-3)/var(--lh-display) var(--font-display); } .route-head__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); flex-basis: 100%; } /* =================================================== trail (process) */ .trail { position: relative; margin: 0; padding: 0; list-style: none; } .trail .process-step { position: relative; padding: 0 0 var(--space-6) var(--space-7); } .trail .process-step::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 0; bottom: 0; border-left: 2px dashed var(--color-accent); } .trail .process-step:last-child::before { bottom: auto; height: 1.25rem; } .trail .step-number { position: absolute; left: 0; top: 0; display: grid; place-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xs); background: var(--color-marker); color: var(--color-on-marker); font: 600 var(--step--1)/1 var(--font-mono); } .trail .step-content h3 { font-size: var(--step-1); padding-top: .35rem; } .trail .step-content p { margin-top: var(--space-1); color: var(--color-text-muted); } @media (min-width: 64em) { .trail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); padding-top: 1.25rem; } .trail .process-step { padding: 0; border-top: 2px dashed var(--color-accent); } .trail .process-step::before { display: none; } .trail .step-number { position: static; margin-top: -1.25rem; margin-bottom: var(--space-4); } .trail .step-content h3 { padding-top: 0; } } /* =================================================== levels (school) */ .levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); margin: 0; padding: 0; list-style: none; } @media (max-width: 29.99em) { .levels { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 64em) { .levels { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .levels > * { border-left: 3px solid var(--color-accent); padding: var(--space-2) 0 var(--space-2) var(--space-4); text-align: left; } .levels .icon { margin-bottom: var(--space-2); font-size: 1.25rem; color: var(--color-link-alt); } .levels .icon i { color: var(--color-link-alt); } .levels h3 { font: 700 var(--step-2)/1.25 var(--font-display); } .levels p { margin-top: var(--space-2); color: var(--color-text-muted); } /* =================================================== program intro (T2) */ /* One template for all 8 program pages:

…

…

…

Ruled head like every section head; sticky in cols 1-4 from 64em. */ .intro__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); } .intro__head { border-top: 2px solid var(--color-rule-strong); padding-top: var(--space-4); } .intro__head h2 { font-size: var(--step-3); } .intro__body > p { max-width: var(--measure); color: var(--color-text-muted); } .intro__body > p + p { margin-top: var(--space-4); } .intro__body > .intro__lead { font-size: var(--step-1); line-height: 1.75; color: var(--color-text); } .intro__body > .onpage { margin-top: var(--space-7); } @media (min-width: 64em) { .intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); } .intro__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; } .intro__body { grid-column: 6 / -1; padding-top: var(--space-4); } } /* =================================================== related routes (T2) */ /*