/* --------------------------------------------------------------------------- theme.css — PHASE 2 ONLY. Visual language: fonts, colour, shadow, radius. No layout. No structural changes. Touches nothing base.css owns. Brand: Evolve Advice — primary pink #D93686 / purple #581B6C. --------------------------------------------------------------------------- */ /* ── Fonts ─────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Semplicita Pro'; src: url('../fonts/SemplicitaPro-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-latin.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-latin-ext.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-cyrillic-ext.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Open Sans'; src: url('../fonts/open-sans-cyrillic.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ── Design tokens ──────────────────────────────────────────────────────────── */ :root { --header-h: 4.5rem; /* refined by JS after load */ /* Brand palette */ --brand-pink: #D93686; --brand-purple: #581B6C; --brand-blue: #273377; --brand-green: #19783F; --brand-yellow: #F7C631; --brand-orange: #E46E2A; --brand-red: #D83F30; /* Surface tokens */ --color-bg: #ffffff; --color-surface: #f8f6fa; /* very light purple tint for sidebar */ --color-border: #e2dce8; --color-border-subtle: #ede8f2; /* Text */ --color-text: #1a1118; /* near-black with a purple undertone */ --color-text-muted: #635670; --color-text-on-dark: #ffffff; /* Accent */ --color-accent: var(--brand-pink); --color-accent-dim: #fce8f3; /* <15% pink tint — brand guideline */ --color-primary: var(--brand-purple); --color-primary-dim: #f0ebf5; /* <15% purple tint */ /* Heading/link */ --color-heading: var(--brand-purple); --color-link: var(--brand-pink); --color-link-hover: #b52b6f; /* Typography */ --font-heading: 'Semplicita Pro', 'Trebuchet MS', system-ui, sans-serif; --font-body: 'Open Sans', system-ui, sans-serif; /* Type scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Radii */ --radius-sm: 4px; --radius-md: 8px; /* Shadows */ --shadow-sm: 0 1px 3px 0 rgb(88 27 108 / 0.1); --shadow-md: 0 4px 12px 0 rgb(88 27 108 / 0.15); } /* ── Chapter colour tokens ───────────────────────────────────────────────────── */ /* Applied to both (page content) and

(individual nav sections). --ch-primary = dominant accent for headings, bullets, borders, active link --ch-secondary = paired colour (gradient endpoint, future use) */ :root { /* Last-resort fallback — every real chapter is declared explicitly below */ --ch-primary: var(--brand-pink); --ch-secondary: var(--brand-purple); --ch-gradient: linear-gradient(to right, var(--brand-pink), var(--brand-purple)); } /* Each chapter declares --ch-primary, --ch-secondary, and --ch-gradient. Explicit on both body[data-chapter] and .nav-chapter[data-chapter] so nav sections are never contaminated by the body's current-page chapter colour. */ body[data-chapter="introduction"], .nav-chapter[data-chapter="introduction"] { --ch-primary: var(--brand-purple); --ch-secondary: var(--brand-pink); --ch-gradient: linear-gradient(to right, var(--brand-purple), var(--brand-pink)); } body[data-chapter="useful-resources"], .nav-chapter[data-chapter="useful-resources"] { --ch-primary: var(--brand-purple); --ch-secondary: var(--brand-pink); --ch-gradient: linear-gradient(to right, var(--brand-purple), var(--brand-pink)); } body[data-chapter="policy-and-practice"], .nav-chapter[data-chapter="policy-and-practice"] { --ch-primary: var(--brand-red); --ch-secondary: var(--brand-pink); --ch-gradient: linear-gradient(to right, var(--brand-red), var(--brand-pink)); } body[data-chapter="risk-management"], .nav-chapter[data-chapter="risk-management"] { --ch-primary: var(--brand-pink); --ch-secondary: var(--brand-purple); --ch-gradient: linear-gradient(to right, var(--brand-pink), var(--brand-purple)); } body[data-chapter="visit-planning"], .nav-chapter[data-chapter="visit-planning"] { --ch-primary: var(--brand-blue); --ch-secondary: var(--brand-green); --ch-gradient: linear-gradient(to right, var(--brand-blue), var(--brand-green)); } body[data-chapter="types-of-visit"], .nav-chapter[data-chapter="types-of-visit"] { --ch-primary: var(--brand-green); --ch-secondary: var(--brand-yellow); --ch-gradient: linear-gradient(to right, var(--brand-green), var(--brand-yellow)); } body[data-chapter="travel"], .nav-chapter[data-chapter="travel"] { --ch-primary: var(--brand-orange); --ch-secondary: var(--brand-red); --ch-gradient: linear-gradient(to right, var(--brand-orange), var(--brand-red)); } /* Unnumbered chapters get no left-bar on the active link */ .nav-chapter[data-chapter="introduction"] .nav-link--current, .nav-chapter[data-chapter="useful-resources"] .nav-link--current { border-inline-start-color: transparent; } /* ── Global ─────────────────────────────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); line-height: 1.25; } a { color: var(--color-link); } a:hover { color: var(--color-link-hover); } strong { font-weight: 600; } :focus-visible { outline-color: var(--brand-pink); } /* ── Skip link ───────────────────────────────────────────────────────────────── */ .skip-link { background: var(--brand-purple); color: #fff; font-family: var(--font-body); font-weight: 600; border: 0; border-radius: var(--radius-sm); z-index: 100; } /* ── Header ─────────────────────────────────────────────────────────────────── */ .app__header { position: sticky; top: 0; z-index: 20; background: linear-gradient(to right, var(--brand-purple), var(--brand-pink)); color: var(--color-text-on-dark); box-shadow: var(--shadow-md); } [dir="rtl"] .app__header { background: linear-gradient(to left, var(--brand-purple), var(--brand-pink)); } .masthead { border-block-end-color: rgb(255 255 255 / 0.15); } /* Logo — white ring on purple background per brand guidelines */ .masthead__logo { box-shadow: 0 0 0 2px #fff; object-fit: cover; } .masthead__title { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-text-on-dark); } .masthead__brand { color: var(--color-text-on-dark); } .masthead__brand:hover { color: var(--color-text-on-dark); opacity: 0.9; } /* Nav toggle (hamburger, mobile only) */ .nav-toggle { color: var(--color-text-on-dark); border-radius: var(--radius-sm); background: transparent; } .nav-toggle:hover { background: rgb(255 255 255 / 0.1); } .nav-toggle:focus-visible { outline-color: var(--brand-pink); } .nav-toggle__bar { background: var(--color-text-on-dark); } /* Animate bars → X when expanded */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Backdrop */ .nav-backdrop { background: rgb(0 0 0 / 0.5); } /* Mobile title — smaller so it fits alongside hamburger */ @media (max-width: 47.99em) { .masthead__title { font-size: var(--text-sm); } .lang-switch__label { display: none; } /* Flag-only on mobile — make it large enough to tap and see clearly */ .lang-switch__btn .lang-flag { font-size: 1.6em; margin-inline-end: 0; } .lang-switch__btn { padding: var(--space-2xs); } } @media (min-width: 48em) { .lang-switch__label { display: inline; } } /* ── Search ──────────────────────────────────────────────────────────────────── */ .search__input { border-color: rgb(255 255 255 / 0.3); border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.12); color: var(--color-text-on-dark); font-size: var(--text-sm); } .search__input::placeholder { color: rgb(255 255 255 / 0.55); } .search__input:focus-visible { outline-color: var(--brand-pink); background: rgb(255 255 255 / 0.2); border-color: transparent; } .search__results { background: var(--color-bg); border-color: var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md); color: var(--color-text); } .search__result { border-block-end-color: var(--color-border-subtle); } .search__result a { color: var(--color-text); text-decoration: none; } .search__result a:hover { background: var(--color-accent-dim); } .search__result[aria-selected="true"] a { background: var(--color-primary-dim); } .search__result-title { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-heading); } .search__crumb { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-block-start: 0.1em; } .search__crumb::before { color: var(--brand-pink); } /* ── Page kicker (chapter / group breadcrumb above h1) ──────────────────────── */ .page-kicker__chapter { font-family: var(--font-heading); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ch-primary); } .page-kicker__group { font-size: var(--text-sm); color: var(--color-text-muted); } /* ── Page version / timestamp ────────────────────────────────────────────────── */ .page-version { font-size: var(--text-xs); color: var(--color-text-muted); margin-block-start: calc(-1 * var(--space-xs)); } .page-version time { font-variant-numeric: tabular-nums; } /* ── Language switcher ──────────────────────────────────────────────────────── */ .lang-switch { position: relative; } .lang-flag { font-style: normal; font-size: 1.1em; line-height: 1; margin-inline-end: 0.25em; } .lang-switch__btn { background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.25); border-radius: var(--radius-sm); color: #fff; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; padding: 0.3em var(--space-2xs); cursor: pointer; white-space: nowrap; } .lang-switch__btn:hover { background: rgb(255 255 255 / 0.18); } .lang-switch__list { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: var(--space-3xs) 0; min-width: 10rem; max-height: 70vh; overflow-y: auto; z-index: 30; } .lang-option { display: block; padding: var(--space-3xs) var(--space-s); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; } .lang-option:hover { background: var(--color-accent-dim); color: var(--color-text); } .lang-option--active { font-weight: 700; color: var(--brand-purple); } /* ── Sidebar navigation ────────────────────────────────────────────────────── */ .app__nav { background: var(--color-surface); border-block-end-color: var(--color-border); } @media (min-width: 48em) { .app__nav { border-inline-end-color: var(--color-border); border-block-end: 0; } /* Extend sidebar background to full page height so it never looks cut off. */ .app:not(.app--home) { background: linear-gradient(to right, var(--color-surface) var(--sidebar-width), var(--color-bg) var(--sidebar-width)); } [dir="rtl"] .app:not(.app--home) { background: linear-gradient(to left, var(--color-surface) var(--sidebar-width), var(--color-bg) var(--sidebar-width)); } } /* Group labels within chapter accordion */ .nav-group__label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); margin-block-start: var(--space-2xs); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Third-level (N.G.P) links — smaller to fit long titles on one line */ .nav-link--sub { font-size: var(--text-xs); padding-inline: var(--space-2xs); } /* Numeric prefix badges — inherits --ch-primary from the enclosing nav-chapter */ .nav-link__num { font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: 700; color: var(--ch-primary); margin-inline-end: 0.15em; } /* Chapter headings — each nav-chapter sets --ch-primary via data-chapter */ .nav-chapter summary { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--ch-primary); border-radius: var(--radius-sm); } .nav-chapter summary:hover { background: color-mix(in srgb, var(--ch-primary) 10%, white); } /* Page links */ .nav-link { font-size: var(--text-sm); color: var(--color-text-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .nav-link:hover { color: var(--color-text); background: color-mix(in srgb, var(--ch-primary) 8%, white); text-decoration: none; } .nav-link--current { color: var(--ch-primary); font-weight: 600; border-inline-start-color: var(--ch-primary); background: color-mix(in srgb, var(--ch-primary) 10%, white); } .nav-link--current:hover { background: color-mix(in srgb, var(--ch-primary) 10%, white); } /* ── Main content ───────────────────────────────────────────────────────────── */ .app__main { background: var(--color-bg); } /* Page wrapper */ .page { display: flex; flex-direction: column; gap: var(--space-m); } .page > * { max-width: var(--measure); } /* Page title — text dark, gradient underline using chapter gradient */ .page-title { font-size: var(--text-3xl); font-family: var(--font-heading); color: var(--color-text); margin: 0; padding-block-end: var(--space-s); background-image: var(--ch-gradient); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat; } /* Section headings — H2 takes chapter accent, H3 stays near-black */ .section-heading { font-size: var(--text-xl); color: var(--ch-primary); margin: 0; margin-block-start: var(--space-xs); scroll-margin-top: calc(var(--header-h, 4.5rem) + var(--space-m)); } h3.section-heading { font-size: var(--text-lg); color: var(--color-text); font-weight: 700; } /* Body copy */ .page p { margin: 0; } /* Links in content */ .page a, .external-link { color: var(--color-link); text-decoration: none; } .page a:hover, .external-link:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 0.25em; } /* Lists */ .content-list { margin: 0; padding-inline-start: var(--space-m); display: flex; flex-direction: column; gap: var(--space-3xs); } .content-list li::marker { color: var(--ch-primary); } /* ── Definition items ────────────────────────────────────────────────────────── */ .definition-item { margin: 0; display: grid; grid-template-columns: minmax(8rem, 28%) 1fr; gap: var(--space-3xs) var(--space-s); padding: var(--space-xs); border-inline-start: 3px solid var(--ch-primary); background: color-mix(in srgb, var(--ch-primary) 10%, white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .definition-item__term { font-weight: 700; color: var(--ch-primary); font-size: var(--text-sm); padding-block-start: 0.1em; } .definition-item__desc { font-size: var(--text-sm); color: var(--color-text); } /* ── Callouts ────────────────────────────────────────────────────────────────── */ .callout { padding: var(--space-s) var(--space-m); border-radius: var(--radius-md); border: none; display: flex; flex-direction: column; gap: var(--space-xs); } .callout--box { background: color-mix(in srgb, var(--ch-primary) 10%, white); } .callout--highlight { background: var(--color-accent-dim); } .callout .section-heading { font-size: var(--text-base); color: var(--ch-primary); } /* ── FAQ items ───────────────────────────────────────────────────────────────── */ .faq-item { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; } .faq-item__q { margin: 0; padding: var(--space-xs) var(--space-s); background: color-mix(in srgb, var(--ch-primary) 10%, white); font-weight: 700; font-size: var(--text-sm); color: var(--color-text); } .faq-item__q::before { content: 'Q '; color: var(--ch-primary); font-family: var(--font-heading); } .faq-item__a { padding: var(--space-xs) var(--space-s); font-size: var(--text-sm); } .faq-item__a p { margin: 0; } /* ── Further reading ─────────────────────────────────────────────────────────── */ .further-reading { border-block-start: 1px solid var(--color-border-subtle); padding-block-start: var(--space-s); } .further-reading__heading { font-size: var(--text-sm); font-family: var(--font-heading); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-xs); } .further-reading__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3xs); } .further-reading__list li::before { content: '→ '; color: var(--ch-primary); font-weight: 700; } .external-link { word-break: break-all; } /* ── Section rail ────────────────────────────────────────────────────────────── */ .app__rail { border-inline-start: 1px solid var(--color-border-subtle); background: var(--color-surface); } .rail__hd { font-size: var(--text-xs); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin: 0 0 var(--space-xs); } .rail-list { display: flex; flex-direction: column; gap: 2px; } .rail-link { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; padding-inline-start: var(--space-xs); display: block; line-height: 1.4; padding-block: 2px; } .rail-link:hover { color: var(--brand-pink); border-inline-start-color: var(--brand-pink); } .rail-link--active { color: var(--ch-primary); border-inline-start-color: var(--ch-primary); font-weight: 600; } .rail-link--active:hover { color: var(--ch-primary); border-inline-start-color: var(--ch-primary); } /* ── Translation notice ──────────────────────────────────────────────────────── */ .translation-notice { background: var(--color-primary-dim); border: 1px solid var(--color-border); border-inline-start: 3px solid var(--brand-purple); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-s); font-size: var(--text-sm); color: var(--color-text-muted); } .translation-notice p { margin: 0; } .translation-notice__link { color: var(--brand-purple); font-weight: 600; white-space: nowrap; } .translation-notice__link:hover { color: var(--brand-pink); } /* ── Page actions (print / share) ────────────────────────────────────────────── */ .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .page-action { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); background: var(--color-surface); cursor: pointer; text-decoration: none; } .page-action:hover { border-color: var(--brand-pink); color: var(--brand-pink); background: var(--color-accent-dim); } .page-action--print::before { content: '⎙ '; } .page-action--email::before { content: '✉ '; } /* ── Footer ──────────────────────────────────────────────────────────────────── */ .site-footer { border-block-start-color: var(--color-border-subtle); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); } .site-footer__heading { font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin: 0 0 var(--space-3xs); } .site-footer__usage p { margin: 0; } .site-footer__usage a { color: var(--brand-purple); font-weight: 600; } .site-footer__usage a:hover { color: var(--brand-pink); } .site-footer__legal { margin: 0; padding-block-start: var(--space-xs); border-block-start: 1px solid var(--color-border-subtle); font-style: italic; font-size: var(--text-xs); } .site-footer__copy { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); } /* ── Useful resources ────────────────────────────────────────────────────────── */ .resource-item { border-color: var(--color-border); border-inline-start-color: var(--brand-pink); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-surface); } .resource-item__name { font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-heading); } .resource-item__link { color: var(--brand-pink); text-decoration: none; } .resource-item__link:hover { color: var(--color-link-hover); text-decoration: underline; } .resource-item__desc { font-size: var(--text-sm); color: var(--color-text-muted); } /* ── Print ───────────────────────────────────────────────────────────────────── */ @media print { .app__header, .app__nav, .app__rail, .nav-toggle, .page-actions, .translation-notice, .lang-switch, .site-footer { display: none !important; } .app { display: block; } .app__main { padding: 0; } body { font-size: 11pt; color: #000; background: #fff; } h1, h2, h3, h4, h5, h6 { color: #000; page-break-after: avoid; } .page-title { background-image: none; border-block-end: 2px solid #000; } .callout { border: 1px solid #ccc !important; background: #fff !important; } .definition-item { background: #f5f5f5; border-inline-start-color: #ccc; } /* Show URLs for external links only */ .page a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; word-break: break-all; } } .chapter-section__title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); border-block-end: 1px solid var(--color-border-subtle); padding-block-end: var(--space-3xs); margin-block-end: var(--space-2xs); } .chapter-section__pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2px; } .chapter-page-link { padding-block: var(--space-2xs); padding-inline-end: var(--space-xs); padding-inline-start: var(--space-s); /* deliberate extra room between bar and text */ background: var(--color-surface); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-sm); border-inline-start: 3px solid transparent; } .chapter-page-link:hover { border-inline-start-color: var(--ch-primary); background: color-mix(in srgb, var(--ch-primary) 8%, white); color: var(--color-text); text-decoration: none; }