/* ========================================================================== Kvorum — design system Deep navy, muted gold and warm cream. Serif display headings (Source Serif 4), a clean sans for everything else (Inter, Manrope for labels). Flat surfaces with fine borders; no glows, no gradients on text or buttons. Corners are softened but restrained: 6px on controls, 8px on cards. Sections 1 Fonts 8 Hero (home) + page hero 2 Tokens 9 Search panel 3 Base 10 Sections, headings, grids 4 Typography 11 Cards (category, consultant, service, company…) 5 Buttons, chips 12 Forms 6 Surfaces 13 Footer, toasts, modal 7 Header, menu 14 Utilities, motion, responsive Rules for this file · No inline styles anywhere (the CSP forbids them): per-item variation uses classes or :nth-child. · Never use the `font:` shorthand. It resets font-feature-settings, which turns the Bulgarian localized letterforms back on (т drawn as m). Use the longhands, as everywhere below. ========================================================================== */ /* 1 ─ Fonts ──────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-ext-wght-normal.woff2?v=50cd390a0f) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-wght-normal.woff2?v=2af1291983) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-garamond-latin-ext-wght-normal.woff2?v=cfa9a397d8) format('woff2'); 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: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-garamond-latin-wght-normal.woff2?v=d80df8ff5a) format('woff2'); 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: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-cyrillic-ext-wght-normal.woff2?v=c4fbd99940) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-cyrillic-wght-normal.woff2?v=11bd90b810) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-latin-ext-wght-normal.woff2?v=155f6e7010) format('woff2'); 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: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-latin-wght-normal.woff2?v=f2ea9c12d2) format('woff2'); 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: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-cyrillic-ext-wght-italic.woff2?v=99a84c1761) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-cyrillic-wght-italic.woff2?v=5b2aed1f60) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-latin-ext-wght-italic.woff2?v=2078240cee) format('woff2'); 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: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-latin-wght-italic.woff2?v=96e6393209) format('woff2'); 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: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-cyrillic-ext-wght-normal.woff2?v=de37de877d) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-cyrillic-wght-normal.woff2?v=8356af385a) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin-ext-wght-normal.woff2?v=3911b66d9f) format('woff2'); 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: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin-wght-normal.woff2?v=a30ddcd349) format('woff2'); 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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-cyrillic-ext-wght-normal.woff2?v=ca15706333) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-cyrillic-wght-normal.woff2?v=71d5ee93cc) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext-wght-normal.woff2?v=34b9c504ca) format('woff2'); 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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-wght-normal.woff2?v=3100e775e8) format('woff2'); 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; } /* 2 ─ Tokens ─────────────────────────────────────────────────────────────── */ :root { /* navy: the base */ --navy-950: #0E141F; --navy-900: #141C2A; --navy-850: #182131; --navy-800: #1C2637; --navy-700: #263247; --navy-600: #34425B; /* gold: the one accent. 500 for fills (with navy text), 700 for gold text on light backgrounds (AA contrast), 300 for gold text on navy. */ --gold-50: #FAF6EE; --gold-100: #F3EADB; --gold-200: #E6D5B5; --gold-300: #D9BF8D; --gold-400: #CBAA74; --gold-500: #BF9A5F; --gold-600: #A9854D; --gold-700: #8A6934; /* light surfaces */ --paper: #FBFAF7; --cream: #F5F1E9; --white: #FFFFFF; --line: #E6E0D5; --line-strong: #D6CEBF; /* text on light */ --text: #141C2A; --text-2: #444C5B; --text-3: #737A87; /* text on navy */ --on-dark: #F4F1EA; --on-dark-2: #C4C9D2; --on-dark-3: #8F97A6; --line-dark: rgba(244, 241, 234, .12); --green-600: #2F6B4F; --green-50: #EDF4EF; --red-600: #A43A3A; --red-50: #FBEFEE; --radius-xs: 4px; /* chips, small badges */ --radius-sm: 6px; /* buttons, inputs */ --radius: 8px; /* cards */ --radius-lg: 10px; /* large panels */ --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(20, 28, 42, .05); --shadow: 0 1px 2px rgba(20, 28, 42, .04), 0 10px 28px -16px rgba(20, 28, 42, .18); --shadow-lg: 0 2px 6px rgba(20, 28, 42, .05), 0 24px 48px -24px rgba(20, 28, 42, .3); --font-brand: 'Cormorant Garamond', Georgia, serif; /* the KVORUM wordmark only, to match logo.svg */ --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --container: 1280px; --gutter: 24px; --header-h: 80px; --section-y: clamp(72px, 8.5vw, 112px); --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* 3 ─ Base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* The canvas behind the page is ink: Safari on iOS paints the see-through status bar area (and the overscroll bounce) with it at the top of the page. */ /* The page's native scrollbar is hidden and a drawn gold one (.site-scrollbar, js/scrollbar.js) takes its place: it shows only while the page scrolls or the mouse is at the right edge, and toggling it only changes its own opacity, so it never restyles the page. Inner scroll areas keep their own bars. The track starts under the fixed header, so the thumb never draws over the nav. */ html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } .site-scrollbar { position: fixed; z-index: 310; top: var(--header-h); right: 0; bottom: 0; width: 14px; opacity: 0; transition: opacity .4s ease; } .site-scrollbar.is-off { display: none; } .site-scrollbar.is-visible, .site-scrollbar:hover, .site-scrollbar.is-dragging { opacity: 1; transition-duration: .15s; } .site-scrollbar__thumb { position: absolute; top: 0; right: 3px; width: 5px; min-height: 40px; border-radius: 5px; height: var(--sb-h, 0); transform: translateY(var(--sb-y, 0)); background: rgba(191, 154, 95, .55); will-change: transform; transition: width .2s ease, background-color .2s ease; } .site-scrollbar:hover .site-scrollbar__thumb, .site-scrollbar.is-dragging .site-scrollbar__thumb { width: 8px; background: rgba(191, 154, 95, .85); } @media not ((hover: hover) and (pointer: fine)) { .site-scrollbar { display: none; } } /* Large desktops (after nebesno.dk). Every size here is in px, so past ~1800px wide (a 24-inch iMac is 2240, a 27-inch 5K iMac 2560) the layout stopped growing and sat as an island in empty background. `zoom` scales every page at once, as if the screen were ~1560-1970px wide. Media queries still see the real width, so nothing flips breakpoint. `vh`/`svh` are scaled by zoom too, so every full-height rule divides by --page-zoom. */ @media (min-width: 1800px) { :root { --page-zoom: 1.15; } } @media (min-width: 2200px) { :root { --page-zoom: 1.3; } } html { zoom: var(--page-zoom, 1); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); overflow-x: clip; background: #0C1018; } body { margin: 0; min-height: calc(100vh / var(--page-zoom, 1)); /* Room for the fixed header, exactly as the sticky one took before. */ padding-top: var(--header-h); display: flex; flex-direction: column; background: var(--paper); color: var(--text-2); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65; /* 'locl' off: the Bulgarian localized letterforms (т as m, д as g) read as unusual in UI text; the standard Cyrillic shapes are what readers expect. */ font-feature-settings: 'cv11', 'ss01', 'locl' 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } main { flex: 1 0 auto; outline: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: 2px; } ::selection { background: rgba(191, 154, 95, .28); } [hidden] { display: none !important; } .icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--white); color: var(--text); font-weight: 600; box-shadow: var(--shadow); transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } .container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; } .container-narrow { width: min(820px, 100% - 2 * var(--gutter)); margin-inline: auto; } /* 4 ─ Typography ─────────────────────────────────────────────────────────── */ h1, h2, h3, h4, .h1, .h2, .h3, .display { color: var(--text); margin: 0; text-wrap: balance; } /* Display headings in the serif. */ .display, h1, .h1, h2, .h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.08; font-variant-numeric: lining-nums; } .display { font-size: clamp(44px, 5.2vw, 72px); line-height: 1.02; } h1, .h1 { font-size: clamp(40px, 4.4vw, 60px); } h2, .h2 { font-size: clamp(34px, 3.5vw, 48px); } /* Small headings and card titles in the sans. */ h3, .h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.012em; line-height: 1.3; } h3, .h3 { font-size: 19px; } h4 { font-size: 16px; } p { margin: 0; text-wrap: pretty; } .lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--text-2); } .muted { color: var(--text-3); } .small { font-size: 14px; } .tiny { font-size: 12.5px; } strong { font-weight: 650; color: var(--text); } /* Small uppercase label above a heading, with a short gold rule. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); } .eyebrow::before { content: ''; width: 16px; height: 1px; background: currentColor; } .center .eyebrow::after, .eyebrow.both::after { content: ''; width: 16px; height: 1px; background: currentColor; } .on-dark .eyebrow { color: var(--gold-300); } /* The emphasised part of a display heading: gold italic serif. */ .accent-text { font-style: italic; font-weight: 500; color: var(--gold-700); } .on-dark .accent-text { color: var(--gold-300); } .on-dark { color: var(--on-dark-2); } .on-dark :is(h1, h2, h3, h4, .h1, .h2, .h3, .display, strong) { color: var(--on-dark); } .on-dark .lead { color: var(--on-dark-2); } .on-dark .muted { color: var(--on-dark-3); } .prose { color: var(--text-2); font-size: 16.5px; line-height: 1.8; } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: 30px; margin-top: 1.6em; } .prose h3 { font-size: 18px; margin-top: 1.5em; } .prose ul, .prose ol { padding-left: 1.2em; } .prose li + li { margin-top: .4em; } .prose a { color: var(--gold-700); text-decoration: underline; text-decoration-color: rgba(138, 105, 52, .35); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: currentColor; } /* 5 ─ Buttons, chips, badges ─────────────────────────────────────────────── */ .btn { --btn-h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn-h); padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; -webkit-tap-highlight-color: transparent; } .btn .icon { width: 16px; height: 16px; stroke-width: 1.8; } .btn-sm { --btn-h: 40px; padding: 0 16px; font-size: 11.5px; } .btn-lg { --btn-h: 54px; padding: 0 30px; font-size: 13px; } .btn-block { width: 100%; } .btn:disabled, .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; } /* navy: the default action on light backgrounds */ .btn-primary { color: var(--on-dark); background: var(--navy-900); } .btn-primary:hover { background: var(--navy-700); } /* gold: the main action on navy, and the one highlight on light pages */ .btn-accent { color: var(--navy-900); background: var(--gold-500); } .btn-accent:hover { background: var(--gold-400); } .btn-light { color: var(--text); background: var(--white); border-color: var(--line-strong); } .btn-light:hover { border-color: var(--text-3); } .btn-ghost { color: var(--text); background: transparent; border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--text); } /* outline on navy */ .btn-glass, .btn-ghost-dark { color: var(--on-dark); background: transparent; border-color: rgba(244, 241, 234, .35); } .btn-glass:hover, .btn-ghost-dark:hover { border-color: var(--on-dark); background: rgba(244, 241, 234, .06); } .btn-danger { color: #fff; background: var(--red-600); } .btn-danger:hover { background: #8E3030; } .btn-icon { --btn-h: 42px; width: var(--btn-h); padding: 0; } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--text); padding-bottom: 6px; border-bottom: 1px solid var(--gold-500); } .link-arrow .icon { width: 15px; height: 15px; transition: transform .25s var(--ease); } .link-arrow:hover .icon { transform: translateX(3px); } .on-dark .link-arrow { color: var(--on-dark); border-bottom-color: var(--gold-400); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-xs); background: var(--cream); color: var(--text-2); font-family: var(--font-body); font-size: 12.5px; font-weight: 550; line-height: 1; white-space: nowrap; } .chip .icon { width: 14px; height: 14px; } .chip-neutral { background: var(--cream); color: var(--text-2); } .chip-aqua { background: var(--green-50); color: var(--green-600); } .chip-gold { background: transparent; color: var(--gold-700); border: 1px solid var(--gold-300); } .chip-green { background: var(--green-50); color: var(--green-600); } .chip-glass { background: transparent; color: var(--on-dark-2); border: 1px solid rgba(244, 241, 234, .22); } a.chip { transition: background-color .2s, color .2s, border-color .2s; } a.chip:hover { background: var(--gold-100); color: var(--text); } a.chip-glass:hover { background: transparent; border-color: var(--gold-400); color: var(--on-dark); } .badge-verified { display: inline-flex; flex: none; color: var(--gold-600); } .badge-verified .icon { width: 17px; height: 17px; stroke-width: 1.8; } .stars { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; color: var(--text); font-size: 14px; } .stars .icon { width: 15px; height: 15px; fill: var(--gold-500); stroke: var(--gold-500); } .stars .count { color: var(--text-3); font-weight: 500; } /* 6 ─ Surfaces ───────────────────────────────────────────────────────────── */ /* Class names kept from the first draft; they are now plain surfaces. */ .glass { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .glass-dark { background: var(--navy-850); border: 1px solid var(--line-dark); } .ring-gradient { position: relative; } .aurora, .grid-lines { display: none; } /* Film grain, the texture from andronov.dev (static/img/grain.webp, a pre-rendered noise tile: Safari re-rasterizes an SVG feTurbulence tile on every frame). The layer jumps to a new offset twelve times a second (steps, so it never slides) and reads as grain, not a moving pattern. Softer and slower than on andronov.dev: this is a law site. The layer overhangs by one tile, just enough for the jumps. */ body::after { content: ''; position: fixed; top: 0; left: 0; right: -160px; bottom: -160px; z-index: 290; pointer-events: none; opacity: .042; background-image: url(/img/grain.webp); will-change: transform; animation: grain-jump 2s steps(1, end) infinite; } @media (max-width: 760px) { body::after { opacity: .033; } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; transform: translate(-90px, -11px); } } @keyframes grain-jump { 0.0% { transform: translate(-90px, -11px); } 4.17% { transform: translate(-117px, -56px); } 8.33% { transform: translate(-29px, -2px); } 12.5% { transform: translate(-134px, -147px); } 16.67% { transform: translate(-30px, -84px); } 20.83% { transform: translate(-9px, -91px); } 25.0% { transform: translate(-101px, -30px); } 29.17% { transform: translate(-12px, -10px); } 33.33% { transform: translate(-29px, -49px); } 37.5% { transform: translate(-112px, -91px); } 41.67% { transform: translate(-112px, -17px); } 45.83% { transform: translate(-51px, -147px); } 50.0% { transform: translate(-134px, -110px); } 54.17% { transform: translate(-140px, -73px); } 58.33% { transform: translate(-143px, -82px); } 62.5% { transform: translate(-29px, -51px); } 66.67% { transform: translate(-41px, -49px); } 70.83% { transform: translate(-3px, -37px); } 75.0% { transform: translate(-116px, -57px); } 79.17% { transform: translate(-126px, -141px); } 83.33% { transform: translate(-116px, -24px); } 87.5% { transform: translate(-95px, -84px); } 91.67% { transform: translate(-39px, -73px); } 95.83% { transform: translate(-43px, -21px); } 100% { transform: translate(-90px, -11px); } } .section-cream { background: var(--cream); } .tint { position: relative; background: var(--cream); } /* 7 ─ Header & menu ──────────────────────────────────────────────────────── */ .site-header { /* Fixed, not sticky: Safari on iOS 26 only extends a fixed top bar's colour into the see-through status bar area while scrolling. body's padding-top keeps the layout exactly as it was. */ /* Above the film grain (290), like .safari-tint: the header, the tint strip and Safari's status bar colour are all the same flat ink, with no seam. */ position: fixed; top: 0; left: 0; right: 0; z-index: 295; height: var(--header-h); color: var(--on-dark); /* On the element itself as well as on ::before: Safari on iOS 26 extends the colour of a sticky top bar into the see-through status bar area, but only reads the bar's own background, so without this the page scrolled visibly behind the clock and battery. */ background-color: #0C1018; border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } /* What Safari on iOS 26 samples to colour its see-through status bar area: the topmost real (non-pseudo) element fixed at the top edge, at least 11px tall, opaque, without filters. The film grain overlay (fixed, above the header, nearly transparent) otherwise wins and the page shows through. Same ink as the header and over its empty top edge, so it is invisible. In full-screen (home-screen) mode it also covers the status bar inset. */ .safari-tint { position: fixed; top: 0; left: 0; right: 0; height: max(11px, env(safe-area-inset-top, 0px)); z-index: 300; background-color: #0C1018; pointer-events: none; } /* A solid ink bar (darker than the navy hero, so it reads as its own band) on every page and at every scroll position; only the bottom hairline waits for the page to move. */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #0C1018; } .site-header.is-scrolled { border-bottom-color: var(--line-dark); } /* Over the light page: frosted white. */ .site-header.is-light { color: var(--text); border-bottom-color: var(--line); } .site-header.is-light::before { opacity: 1; background: rgba(251, 250, 247, .9); } .header-inner { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; flex: none; } .brand { gap: 14px; } .brand-mark { width: 44px; height: 44px; flex: none; } .bm-ring { stroke: var(--gold-400); } .bm-ring-in { stroke-opacity: .45; } .bm-k { fill: var(--gold-300); } .is-light .bm-ring { stroke: var(--gold-600); } .is-light .bm-k { fill: var(--gold-700); } .brand-word { font-family: var(--font-brand); font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: .22em; text-transform: uppercase; margin-right: -.22em; } .main-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; } .main-nav a { position: relative; padding: 10px 12px; font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .8; white-space: nowrap; transition: opacity .2s, color .2s; } .main-nav a:hover { opacity: 1; color: var(--gold-300); } .main-nav a[aria-current='page'] { opacity: 1; color: var(--gold-300); } .is-light .main-nav a[aria-current='page'] { color: var(--gold-700); } /* Hover (after nebesno.dk): a gold underline grows in from the left; the current page shows it already drawn. Only colour and the pseudo-element change, so the bar's layout never moves. */ .main-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .main-nav a:hover::after, .main-nav a[aria-current='page']::after { transform: none; } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; } .auth-slot { display: flex; align-items: center; gap: 8px; } .site-header:not(.is-light) .auth-slot .btn-ghost { color: var(--on-dark); border-color: rgba(244, 241, 234, .35); } .site-header:not(.is-light) .auth-slot .btn-ghost:hover { border-color: var(--on-dark); } .site-header:not(.is-light) .auth-slot .btn-primary { color: var(--navy-900); background: var(--gold-500); } .site-header:not(.is-light) .auth-slot .btn-primary:hover { background: var(--gold-400); } /* BG | EN switch: a quiet text toggle with a sliding underline. */ .lang-switch { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; width: 64px; height: 32px; font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .08em; } .lang-switch::before { content: ''; position: absolute; left: 8px; bottom: 5px; width: 16px; height: 1px; background: var(--gold-400); transition: transform .35s var(--ease); } html[lang='en'] .lang-switch::before { transform: translateX(32px); } .lang-switch span { text-align: center; opacity: .55; transition: opacity .2s; } .lang-switch span.is-on { opacity: 1; } .is-light .lang-switch::before { background: var(--gold-600); } .lang-switch:hover span { opacity: 1; } /* In the desktop header (and the same in the mobile menu) it reads as a setting, not two more nav links: smaller, gold for the current language, a slash instead of the nav-style underline, and a hairline dividing it from the auth buttons. */ .header-actions > .lang-switch { display: inline-flex; width: auto; height: 22px; padding-right: 18px; margin-right: 8px; border-right: 1px solid rgba(244, 241, 234, .18); font-size: 11px; letter-spacing: .12em; } .lang-switch-menu { display: inline-flex; width: auto; height: 28px; font-size: 12px; letter-spacing: .12em; color: var(--on-dark); } :is(.header-actions > .lang-switch, .lang-switch-menu)::before { display: none; } :is(.header-actions > .lang-switch, .lang-switch-menu) span { padding: 0 2px; opacity: .45; } :is(.header-actions > .lang-switch, .lang-switch-menu) span.is-on { opacity: 1; color: var(--gold-300); } :is(.header-actions > .lang-switch, .lang-switch-menu) span + span::before { content: '/'; margin: 0 7px 0 5px; color: var(--on-dark); opacity: .5; } :is(.header-actions > .lang-switch, .lang-switch-menu):hover span { opacity: 1; } /* Signed-in state (rendered by app.js). */ .account-chip { display: inline-flex; align-items: center; gap: 11px; height: 42px; padding: 0 4px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--on-dark); } /* A round monogram with a thin gold ring, echoing the logo mark. */ .account-chip .avatar { width: 36px; height: 36px; border-radius: 50%; font-size: 15px; outline: 0; box-shadow: 0 0 0 1px rgba(203, 170, 116, .55); transition: box-shadow .25s var(--ease); } .account-chip-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; } .account-chip .icon { width: 15px; height: 15px; margin-left: -4px; opacity: .55; transition: transform .25s var(--ease), opacity .2s; } .account-chip:hover .avatar { box-shadow: 0 0 0 1px var(--gold-300); } .account-chip:hover .account-chip-name { color: var(--gold-300); } .account-chip:hover .icon { opacity: 1; transform: translateX(2px); } .is-light .account-chip { color: var(--text); } .menu-toggle { display: none; align-items: center; gap: 12px; height: 46px; padding: 0; border: 0; border-radius: 23px; background: transparent; color: inherit; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .menu-toggle-text { position: relative; display: block; height: 16px; overflow: hidden; } .menu-toggle-text span { display: block; height: 16px; line-height: 16px; transition: transform .45s var(--ease-out); } /* The icon: two lines in a thin gold ring, a match for the ringed K at the other end of the header. The short gold line grows on hover; open, the lines turn into an X and the ring goes full gold. */ .menu-toggle-icon { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(203, 170, 116, .55); transition: box-shadow .4s var(--ease-out); } .menu-toggle-icon i { position: absolute; left: 13px; right: 13px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .4s var(--ease-out), left .4s var(--ease-out), background-color .4s var(--ease-out); } .menu-toggle-icon i:last-child { left: 20px; background: var(--gold-400); } /* Mouse and trackpad only: a tap leaves :hover stuck on touch screens, so the closed burger kept its hover look until the next tap elsewhere. */ @media (hover: hover) and (pointer: fine) { .menu-toggle:hover .menu-toggle-icon { box-shadow: inset 0 0 0 1px var(--gold-400); } .menu-toggle:hover .menu-toggle-icon i:last-child { left: 13px; } } html.menu-open .menu-toggle-icon { box-shadow: inset 0 0 0 1px var(--gold-400); } html.menu-open .menu-toggle-icon i:last-child { left: 13px; background: currentColor; } .menu-toggle-icon i:first-child { transform: translateY(-4px); } .menu-toggle-icon i:last-child { transform: translateY(4px); } html.menu-open .menu-toggle-text span { transform: translateY(-100%); } /* Open: the two lines meet in the middle and cross into a plain X (the ring does not spin; a 225-degree turn felt like a backflip). */ html.menu-open .menu-toggle-icon i:first-child { transform: rotate(45deg); } html.menu-open .menu-toggle-icon i:last-child { transform: rotate(-45deg); } /* Phones: a 68px header puts a 46px ring's top at 10.5px, under the 11px status-bar tint strip, which shaved its top edge. 44px clears it. */ @media (max-width: 760px) { .menu-toggle { height: 44px; } .menu-toggle-icon { width: 44px; height: 44px; } .menu-toggle-icon i { left: 12px; right: 12px; } .menu-toggle-icon i:last-child { left: 19px; } html.menu-open .menu-toggle-icon i:last-child { left: 12px; } } @media (max-width: 760px) and (hover: hover) and (pointer: fine) { .menu-toggle:hover .menu-toggle-icon i:last-child { left: 12px; } } /* Staggered sheet: two layers slide in first, the panel follows, then the rows rise one by one. Pure CSS; app.js only toggles html.menu-open. */ .mobile-menu { display: none; } /* Not rendered on desktop: unstyled it counted as visible, so crossing into the burger layout while resizing flashed the blurred backdrop as it faded. */ .menu-backdrop { display: none; } @media (max-width: 1180px) { .main-nav, .auth-slot { display: none; } .menu-toggle { display: inline-flex; } .header-actions > .lang-switch { display: none; } .mobile-menu { display: block; position: fixed; top: var(--header-h); right: 0; bottom: 0; width: min(440px, 100%); z-index: 90; pointer-events: none; } html.menu-open .mobile-menu { pointer-events: auto; } .mm-layer, .mm-panel { position: absolute; inset: 0; transform: translateX(calc(100% + 40px)); transition: transform .5s cubic-bezier(.65, 0, .35, 1); } .mm-layer:nth-child(1) { background: var(--gold-500); } .mm-layer:nth-child(2) { background: var(--navy-700); } .mm-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 28px 28px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--navy-900); color: var(--on-dark); } /* The laurel wreath of the dark bands, faint and cropped at the bottom right corner of the open menu. It fades in after the links. */ .mm-panel::before { content: ''; position: absolute; z-index: 0; right: 0; bottom: 0; width: 300px; height: 260px; pointer-events: none; /* Cropped inside its own box (330px wreath, 30px off the right, 70px off the bottom): overhanging the panel let the open menu scroll sideways. */ background: url(/img/watermark.svg) left top / 330px 330px no-repeat; opacity: 0; transition: opacity .25s; } html.menu-open .mm-panel::before { opacity: .07; transition: opacity 1.2s .5s; } .mm-panel > * { position: relative; z-index: 1; } /* Closing runs in reverse: the panel leaves first, the gold layer last. */ .mm-layer:nth-child(1) { transition-delay: .1s; } .mm-layer:nth-child(2) { transition-delay: .05s; } html.menu-open .mm-layer, html.menu-open .mm-panel { transform: translateX(0); transition: transform .8s cubic-bezier(.22, 1, .36, 1); } html.menu-open .mm-layer:nth-child(1) { transition-delay: 0s; } html.menu-open .mm-layer:nth-child(2) { transition-delay: .08s; } html.menu-open .mm-panel { transition-delay: .16s; } .mm-list { list-style: none; margin: 0; padding: 0; } .mm-list a { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-dark); } .mm-num { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--gold-400); letter-spacing: .08em; } .mm-text { font-family: var(--font-serif); font-size: clamp(30px, 8vw, 38px); font-weight: 600; line-height: 1.05; color: var(--on-dark); } .mm-list a[aria-current='page'] .mm-text { color: var(--gold-300); font-style: italic; } /* Hover (mouse and trackpad only): the title eases right and turns gold, the number brightens, and a gold line draws along the divider from the left, like the header nav underline. */ .mm-list a { position: relative; } .mm-list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-400); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); } .mm-text, .mm-num { transition: color .35s var(--ease-out), translate .45s var(--ease-out); } .mm-meta a:not(.lang-switch) { transition: color .25s var(--ease-out); } @media (hover: hover) { .mm-list a:hover::after { transform: none; } .mm-list a:hover .mm-text { color: var(--gold-300); translate: 6px 0; } .mm-list a:hover .mm-num { color: var(--gold-300); } .mm-meta a:not(.lang-switch):hover { color: var(--gold-300); } } .mm-list li { opacity: 0; transform: translateY(26px); transition: opacity .25s, transform .3s; } html.menu-open .mm-list li { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1); } html.menu-open .mm-list li:nth-child(1) { transition-delay: .3s; } html.menu-open .mm-list li:nth-child(2) { transition-delay: .36s; } html.menu-open .mm-list li:nth-child(3) { transition-delay: .42s; } html.menu-open .mm-list li:nth-child(4) { transition-delay: .48s; } html.menu-open .mm-list li:nth-child(5) { transition-delay: .54s; } html.menu-open .mm-list li:nth-child(6) { transition-delay: .6s; } .mm-footer { display: grid; gap: 22px; opacity: 0; transition: opacity .25s; } html.menu-open .mm-footer { opacity: 1; transition: opacity .6s .62s; } .mm-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mm-auth .btn-primary { color: var(--navy-900); background: var(--gold-500); } .mm-auth .btn-primary:hover { background: var(--gold-400); } /* Solid, not see-through: the laurel watermark runs behind the buttons. */ .mm-auth .btn-ghost-dark { background: var(--navy-900); } .mm-auth .btn-ghost-dark:hover { background: color-mix(in srgb, var(--navy-900), #F4F1EA 6%); } .mm-meta { display: grid; gap: 8px; font-size: 15px; color: var(--on-dark-2); } .mm-label { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 4px; } .mm-meta .lang-switch { margin-top: 10px; margin-left: -2px; } .menu-backdrop { display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 80; /* The page behind the open menu goes soft, as in the Kirovdent menu. */ background: rgba(14, 20, 31, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .45s .1s, visibility 0s .55s; } html.menu-open .menu-backdrop { opacity: 1; visibility: visible; transition: opacity .45s; } html.menu-open .cookie-notice { opacity: 0; visibility: hidden; } html.menu-open { touch-action: none; } html.menu-open .site-header { color: var(--on-dark); border-bottom-color: var(--line-dark); } } /* Language switch wash (app.js, intro-boot.js), after nebesno.dk: a solid navy layer fades up on the page being left and out on the new one. Only opacity animates and nothing is larger than the screen. */ .lang-veil, html.lang-veil-in::before { position: fixed; inset: 0; z-index: 99999; pointer-events: none; background: var(--navy-900); } .lang-veil { opacity: 0; } html.lang-veil-in::before { content: ''; opacity: 1; transition: opacity .22s ease-out; } html.lang-veil-in.lang-veil-out::before { opacity: 0; } /* Back to top (app.js): bottom left, a navy disc with a thin gold ring. */ .to-top { position: fixed; z-index: 340; left: 24px; bottom: 24px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--navy-900); color: var(--gold-300); box-shadow: 0 0 0 1px rgba(203, 170, 116, .5), var(--shadow-lg); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s .45s, box-shadow .25s; } .to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), box-shadow .25s; } .to-top .icon { width: 20px; height: 20px; transition: transform .25s var(--ease); } .to-top:hover { box-shadow: 0 0 0 1px var(--gold-300), var(--shadow-lg); } .to-top:hover .icon { transform: translateY(-2px); } .to-top:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; } html.menu-open .to-top { opacity: 0; visibility: hidden; } @media (max-width: 760px) { .to-top { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 42px; height: 42px; } } /* Cookie notice (app.js, once per browser): a quiet paper card, bottom right. */ .cookie-notice { position: fixed; z-index: 350; right: 24px; bottom: 24px; width: min(380px, calc(100% - 32px)); padding: 20px 22px; background: var(--paper); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s .6s; } .cookie-notice.is-in { opacity: 1; transform: none; visibility: visible; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); } .cookie-title { margin: 0; font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); } .cookie-text { margin: 10px 0 0; font-size: 14px; line-height: 1.55; } .cookie-actions { display: flex; align-items: center; gap: 18px; margin-top: 16px; } .cookie-actions .link-arrow { font-size: 13.5px; } @media (max-width: 760px) { .cookie-notice { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; padding: 18px; } } /* 8 ─ Hero ───────────────────────────────────────────────────────────────── */ .hero-dark { position: relative; isolation: isolate; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); background: var(--navy-900); color: var(--on-dark-2); overflow: hidden; } .hero-dark > .container { position: relative; z-index: 1; } /* The hero fills the first screen on every device, as on nebesno.dk: header, hero and strip together are one screen tall (svh, so a phone's collapsing browser bars never cut it), the copy is centred in the space and the strip sits on the bottom edge. Taller content simply grows. */ .home-hero { display: flex; flex-direction: column; min-height: 100vh; min-height: calc(100svh / var(--page-zoom, 1)); padding-bottom: 0; } .home-hero > .container { display: flex; flex: 1 0 auto; flex-direction: column; } .home-hero-grid { flex: 1 0 auto; } .home-hero .hero-strip { flex: none; } .home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 64px; padding: 48px 0 56px; } .hero-kicker { margin-bottom: 26px; } .home-hero h1 { max-width: 12em; } /* Desktop: the headline, spacing and strip scale with the screen height as well as its width, so a 13-inch laptop still gets the whole hero and strip on its first screen. Filling the screen also keeps BG and EN the same height (the Bulgarian headline wraps to one more line). */ @media (min-width: 1081px) { .home-hero-grid { padding: clamp(24px, calc(4svh / var(--page-zoom, 1)), 48px) 0 clamp(28px, calc(4.5svh / var(--page-zoom, 1)), 56px); } .home-hero .display { font-size: clamp(44px, min(5.2vw, calc(7.4svh / var(--page-zoom, 1))), 72px); } .home-hero .lead { margin-top: clamp(18px, calc(2.6svh / var(--page-zoom, 1)), 26px); } .home-hero .search-panel { margin-top: clamp(24px, calc(3.6svh / var(--page-zoom, 1)), 36px); } } /* Phones: the Bulgarian height at each width where its headline or lede gains a line (measured; re-measure after copy edits). */ @media (max-width: 760px) { .home-hero-grid { min-height: 497px; } } @media (max-width: 524px) { .home-hero-grid { min-height: 542px; } } @media (max-width: 434px) { .home-hero-grid { min-height: 614px; } } @media (max-width: 384px) { .home-hero-grid { min-height: 659px; } } @media (max-width: 346px) { .home-hero-grid { min-height: 675px; } } @media (max-width: 323px) { .home-hero-grid { min-height: 698px; } } .home-hero .lead { max-width: 33em; margin-top: 26px; } .lead-short { display: none; } /* Right-hand composition: a booking card, flat, on the navy. */ .hero-visual { position: relative; } /* The scale of justice (src/lib/scale.mjs). Thin gold strokes, no fills. */ .hero-scale { display: block; width: min(100%, 460px); height: auto; margin-left: auto; overflow: visible; fill: none; stroke: var(--gold-400); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .hs-ring { stroke: rgba(203, 170, 116, .16); stroke-width: 1; } .hero-scale .hs-in { stroke-opacity: .5; } .hero-scale .hs-art { stroke-width: 1.13; } .hs-ticks { stroke-dasharray: 1.5 9; stroke-width: 5; stroke: rgba(203, 170, 116, .12); transform-box: view-box; transform-origin: 240px 262px; animation: hs-turn 240s linear infinite; } .hs-beam { transform-box: view-box; transform-origin: 240px 128px; animation: hs-sway 9s ease-in-out infinite alternate; } .hs-pan { transform-box: view-box; animation: hs-level 9s ease-in-out infinite alternate; } .hs-pan-l { transform-origin: 94px 128px; } .hs-pan-r { transform-origin: 386px 128px; } @keyframes hs-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } } @keyframes hs-level { from { transform: rotate(2.4deg); } to { transform: rotate(-2.4deg); } } @keyframes hs-turn { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hs-ticks, .hs-beam, .hs-pan { animation: none; } } /* Inner-page hero */ /* Line illustration on the right of an inner-page hero (src/lib/art.mjs), centred in the space below the header; a faint watermark on small screens. */ .page-hero-art { position: absolute; z-index: 0; pointer-events: none; top: var(--header-h); bottom: 0; right: calc((100% - min(var(--container), 100% - 2 * var(--gutter))) / 2); display: flex; align-items: center; width: min(390px, 32vw); } .hero-art { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--gold-400); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .hero-art .ha-in { stroke-opacity: .5; } .ha-ring { stroke: rgba(203, 170, 116, .16); stroke-width: 1; } .ha-ticks { stroke-dasharray: 1.5 9; stroke-width: 5; stroke: rgba(203, 170, 116, .12); transform-box: view-box; transform-origin: 240px 220px; animation: hs-turn 240s linear infinite; } /* The slow movement after the drawing: pulses along the links, a line that keeps writing itself, a rocking quill, light moving across columns. */ .ha-pulse { stroke: var(--gold-300); stroke-width: 2.4; stroke-dasharray: .07 .93; opacity: 0; animation: ha-pulse 4.8s linear 2.8s infinite backwards; } .ha-pulse:nth-child(2) { animation-delay: 4.4s; } .ha-pulse:nth-child(3) { animation-delay: 6s; } @keyframes ha-pulse { 0% { stroke-dashoffset: 1.07; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } .ha-write { stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: ha-write 5.5s var(--ease) 2.8s infinite backwards; } @keyframes ha-write { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } .ha-quill { transform-box: view-box; transform-origin: 232px 256px; animation: ha-rock 5.5s ease-in-out 2.8s infinite alternate backwards; } @keyframes ha-rock { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } } .ha-col { animation: ha-light 6s ease-in-out 2.8s infinite backwards; } .ha-col:nth-child(2) { animation-delay: 3.3s; } .ha-col:nth-child(3) { animation-delay: 3.8s; } .ha-col:nth-child(4) { animation-delay: 4.3s; } .ha-col:nth-child(5) { animation-delay: 4.8s; } @keyframes ha-light { 0%, 100% { opacity: 1; } 18% { opacity: .35; } 36% { opacity: 1; } } /* How it works: a pulse walks leg one, then leg two. */ .ha-step { stroke: var(--gold-300); stroke-width: 2.4; stroke-dasharray: .08 .92; opacity: 0; animation: ha-step-a 5s linear 2.8s infinite backwards; } .ha-step:nth-child(2) { animation-name: ha-step-b; } @keyframes ha-step-a { 0% { stroke-dashoffset: 1.08; opacity: 0; } 4% { opacity: 1; } 40% { opacity: 1; } 44%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes ha-step-b { 0%, 50% { stroke-dashoffset: 1.08; opacity: 0; } 54% { opacity: 1; } 90% { opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } } /* About: the seal's dotted inner ring turns. */ .ha-dots { stroke: rgba(203, 170, 116, .45); stroke-width: 2; stroke-dasharray: 1 7; transform-box: view-box; transform-origin: 240px 210px; animation: hs-turn 90s linear infinite; } html.intro .ha-dots { opacity: 0; animation: intro-safe 0s 3s forwards, hs-turn 90s linear infinite; } html.intro-go .ha-dots { animation: fade-in 1.4s var(--ease-fade) .8s both, rise-up 1.4s var(--ease-lux) .8s both, hs-turn 90s linear infinite; } /* Contact: the letter floats in and out of the envelope. */ .ha-bubble { transform-box: view-box; animation: ha-float 4.5s ease-in-out 2.6s infinite alternate backwards; } @keyframes ha-float { from { transform: translateY(0); } to { transform: translateY(-7px); } } /* Why: the check draws a little bolder than the outline. */ .ha-check { stroke-width: 2.2; } /* FAQ: the dot of the question mark bobs. */ .ha-bob { transform-box: view-box; animation: ha-bob 2.4s ease-in-out 2.6s infinite alternate backwards; } @keyframes ha-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } } /* Request: the magnifying glass drifts across the card. */ .ha-lens { transform-box: view-box; animation: ha-drift 7s ease-in-out 2.6s infinite alternate backwards; } @keyframes ha-drift { from { transform: translate(0, 0); } to { transform: translate(-96px, -84px); } } /* News: the back page leafs gently about its lower left corner. */ .ha-leaf { transform-box: view-box; transform-origin: 152px 336px; animation: ha-leaf 5s ease-in-out 2.6s infinite alternate backwards; } @keyframes ha-leaf { from { transform: rotate(0deg); } to { transform: rotate(3deg); } } /* Cookies: crumbs fall from the bite, one after another. */ .ha-crumb { fill: var(--gold-400); stroke: none; opacity: 0; animation: ha-crumb 3.6s ease-in 2.8s infinite backwards; } .ha-crumb:nth-child(2) { animation-delay: 3.9s; } .ha-crumb:nth-child(3) { animation-delay: 5s; } @keyframes ha-crumb { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; transform: translateY(70px); } } /* Privacy: the shackle lifts and settles. */ .ha-shackle { transform-box: view-box; animation: ha-lift 5s ease-in-out 2.8s infinite backwards; } @keyframes ha-lift { 0%, 55%, 100% { transform: none; } 70% { transform: translateY(-10px); } } /* Data protection: the safe dial turns a combination, then rests. */ .ha-dial { transform-box: view-box; transform-origin: 240px 218px; animation: ha-dial 12s ease-in-out 2.8s infinite backwards; } @keyframes ha-dial { 0%, 90%, 100% { transform: rotate(0deg); } 20%, 26% { transform: rotate(-42deg); } 46%, 52% { transform: rotate(30deg); } 70%, 76% { transform: rotate(-14deg); } } /* Terms: the bookmark sways under the book. */ .ha-ribbon { transform-box: view-box; transform-origin: 240px 335px; animation: ha-sway 4.5s ease-in-out 2.8s infinite alternate backwards; } @keyframes ha-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } } /* How it works: a beaded ring inside each medallion, faded in with the drawing. */ .ha-beads { stroke: rgba(203, 170, 116, .45); stroke-width: 1.7; stroke-dasharray: 0 5.3; } html.intro .ha-beads { opacity: 0; animation: intro-safe 0s 3s forwards; } html.intro-go .ha-beads { animation: ha-appear 1.2s var(--ease-lux) .9s both; } @keyframes ha-appear { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ha-crumb { opacity: .7; } .ha-ticks, .ha-pulse, .ha-write, .ha-quill, .ha-col, .ha-step, .ha-dots, .ha-bubble, .ha-bob, .ha-lens, .ha-leaf, .ha-crumb, .ha-shackle, .ha-dial, .ha-ribbon { animation: none; } .ha-write { stroke-dashoffset: 0; opacity: 1; } } /* Text never runs into the illustration: long titles wrap instead. */ @media (min-width: 1081px) { .page-hero.has-art .container > * { max-width: calc(100% - min(390px, 32vw) - 48px); } } @media (max-width: 1080px) { /* Anchored to the bottom of the hero, so pages with a short intro have the drawing where the space would otherwise be empty. */ .page-hero-art { top: auto; bottom: -26px; right: -10%; width: min(72vw, 360px); opacity: .2; display: block; } } .page-hero { padding: calc(var(--header-h) + clamp(28px, 4vw, 48px)) 0 clamp(56px, 6vw, 80px); } /* Every inner page's hero is the same height (sized for the tallest, the directories with a search and About), content anchored to the top so the breadcrumbs and title never move between pages. */ .page-hero:not(.nf-hero) { min-height: 540px; } @media (max-width: 1180px) { .page-hero:not(.nf-hero) { min-height: 510px; } } /* Phones: tighter type and spacing so the shared height can be lower (530px left a big empty band under shorter pages); 465px fits the tallest (How it works) at 360px. */ @media (max-width: 760px) { .page-hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 40px; } .page-hero h1 { margin-top: 14px; font-size: 34px; } .page-hero .lead { margin-top: 12px; font-size: 15.5px; line-height: 1.6; } .page-hero .dir-search { margin-top: 22px; } .page-hero:not(.nf-hero) { min-height: 465px; } } .page-hero h1 { max-width: 16em; margin-top: 20px; } .page-hero .lead { max-width: 40em; margin-top: 20px; } .page-hero.center { text-align: center; } .page-hero.center h1, .page-hero.center .lead { margin-inline: auto; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--on-dark-3); } .breadcrumbs a:hover { color: var(--on-dark); } .breadcrumbs .icon { width: 13px; height: 13px; opacity: .6; } /* 9 ─ Search panel ───────────────────────────────────────────────────────── */ .search-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 215px) auto; gap: 0; margin-top: 36px; max-width: 700px; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6); } .search-field { position: relative; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 18px; background: transparent; } .search-field + .search-field { border-left: 1px solid var(--line); } .search-field .icon { width: 18px; height: 18px; color: var(--gold-600); } .search-field input, .search-field select { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15.5px; font-weight: 500; -webkit-appearance: none; appearance: none; } .search-field input::placeholder { color: #8E929B; } .search-field select { cursor: pointer; padding-right: 22px; } .search-field .chev { position: absolute; right: 16px; width: 15px; height: 15px; pointer-events: none; color: var(--text-3); } .search-field:focus-within { background: var(--white); } .search-panel .btn { height: auto; border-radius: 0; padding: 0 28px; } .search-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; color: var(--on-dark-3); } .search-suggest > span { margin-right: 4px; } .search-alt { margin-top: 24px; font-size: 15px; color: var(--on-dark-2); } .search-alt a { color: var(--gold-300); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(217, 191, 141, .4); } .search-alt a:hover { border-bottom-color: var(--gold-300); } .search-alt .icon { width: 15px; height: 15px; transition: transform .25s var(--ease); } .search-alt a:hover .icon { transform: translateX(3px); } /* Strip at the foot of the hero */ .hero-strip { border-top: 1px solid var(--line-dark); border-bottom: 1px solid rgba(203, 170, 116, .3); background: var(--navy-950); } .hero-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); } .hero-strip-item { display: flex; align-items: flex-start; gap: 16px; padding: 28px 22px; } .hero-strip-item + .hero-strip-item { border-left: 1px solid var(--line-dark); } .hero-strip-item .ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(203, 170, 116, .45); color: var(--gold-300); } .hero-strip-item .ic .icon { width: 19px; height: 19px; } .hero-strip-item b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--on-dark); } .hero-strip-item div > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--on-dark-3); } @media (min-width: 1081px) { .hero-strip-item { padding-block: clamp(18px, calc(2.8svh / var(--page-zoom, 1)), 28px); } } /* 10 ─ Sections ──────────────────────────────────────────────────────────── */ .section { position: relative; padding: var(--section-y) 0; } .section-tight { padding: calc(var(--section-y) * .65) 0; } .section-white { background: var(--white); } .section-dark { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); color: var(--on-dark-2); } .section-dark > .container { position: relative; z-index: 1; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(36px, 4vw, 56px); } .section-head-text { max-width: 660px; } .section-head h2 { margin-top: 18px; } .section-head .lead { margin-top: 16px; } .section-head.center { flex-direction: column; align-items: center; text-align: center; } .section-head.center .section-head-text { margin-inline: auto; } /* Ornamental divider: a hairline with the illustrations' rosette at its centre. Under centred section heads, above legal sections, in the footer. */ .section-head.center::after, .prose h2:not(:first-child)::before { content: ''; display: block; width: min(220px, 60%); height: 14px; background: url(/img/rosette.svg) center / 14px 14px no-repeat, linear-gradient(var(--gold-200), var(--gold-200)) left center / calc(50% - 14px) 1px no-repeat, linear-gradient(var(--gold-200), var(--gold-200)) right center / calc(50% - 14px) 1px no-repeat; } .section-head.center::after { margin-top: 26px; } .prose h2:not(:first-child)::before { margin: 0 0 1.3em; } /* Legal headings open with a gold section sign. */ .prose-legal h2 > .sect { color: var(--gold-600); margin-right: .3em; } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .cards-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Tabs (clients / consultants) */ .tabs { display: inline-flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--white); } .tab { height: 44px; padding: 0 22px; border: 0; background: transparent; color: var(--text-2); font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s, color .2s; } .tab + .tab { border-left: 1px solid var(--line-strong); } .tab[aria-selected='true'] { background: var(--navy-900); color: var(--on-dark); } .tab:not([aria-selected='true']):hover { color: var(--text); background: var(--cream); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .step { position: relative; padding: 30px 26px 28px; border-radius: var(--radius); } /* Step numbers: serif Roman numerals in a double ring. */ .step-num { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border: 1px solid var(--gold-300); border-radius: 50%; font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: .06em; color: var(--gold-600); } .step h3 { margin-bottom: 10px; } .step p { font-size: 15px; color: var(--text-2); } .step .icon-bg { position: absolute; right: 24px; top: 30px; width: 24px; height: 24px; color: var(--gold-500); stroke-width: 1.4; } /* 11 ─ Cards ─────────────────────────────────────────────────────────────── */ .card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); transition: border-color .45s var(--ease-out), box-shadow .55s var(--ease-out), translate .55s var(--ease-out), background-color .45s var(--ease-out); } /* Clickable cards: a gentle lift with a softer, deeper shadow and the gold border, eased in and out. `translate` (not transform) so it never fights the scroll reveal. Mouse and trackpad only; touch gets no sticky hover. */ @media (hover: hover) { a.card:hover, .card.is-link:hover { border-color: var(--gold-300); box-shadow: 0 2px 4px rgba(20, 28, 42, .04), 0 18px 34px -20px rgba(20, 28, 42, .28); translate: 0 -2px; } } a.card:active, .card.is-link:active { translate: 0 -1px; transition-duration: .12s; } /* The lift moves the card 2px up; this strip under it keeps the hover while the cursor sits on the bottom edge, so the card does not bounce. */ a.card::before, .card.is-link::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 3px; } /* Featured (paid placement) cards: a 2px gold top edge, drawn as the top border plus a 1px inset shadow so the content does not shift down. The card also carries a "Featured" chip that explains it. */ .card.is-featured { border-top-color: var(--gold-500); box-shadow: inset 0 1px 0 var(--gold-500), var(--shadow-sm); } /* A faint inner frame set in from the border, like the drawings' double frames. */ .card.is-featured::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(191, 154, 95, .2); border-radius: calc(var(--radius) - 3px); pointer-events: none; } @media (hover: hover) { .card.is-featured.is-link:hover { border-top-color: var(--gold-500); box-shadow: inset 0 1px 0 var(--gold-500), 0 2px 4px rgba(20, 28, 42, .04), 0 18px 34px -20px rgba(20, 28, 42, .28); } } /* The big cards (consultants, firms, services, news) read a lift as more movement than the small tiles do: 1px and a lighter shadow. */ @media (hover: hover) { :is(.pro-card, .co-card, .svc-card, .news-card).is-link:hover { translate: 0 -1px; box-shadow: 0 1px 3px rgba(20, 28, 42, .04), 0 14px 28px -20px rgba(20, 28, 42, .22); } :is(.pro-card, .co-card).is-featured.is-link:hover { box-shadow: inset 0 1px 0 var(--gold-500), 0 1px 3px rgba(20, 28, 42, .04), 0 14px 28px -20px rgba(20, 28, 42, .22); } } .co-card .pro-tags { margin-top: 14px; } .stretched::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .stretched:focus-visible { outline: none; } .stretched:focus-visible::after { outline: 2px solid var(--gold-600); outline-offset: 2px; } /* category tile */ .cat-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Desktop: every row as tall as the tallest, so rows never differ. */ @media (min-width: 1101px) { .cat-grid { grid-auto-rows: 1fr; } } .cat-card { padding: 26px; gap: 18px; } .cat-top { display: flex; align-items: center; justify-content: space-between; } /* The hover fill is a navy disc that grows from the centre on a symmetric curve (the expo ease-out snapped the colour in, which flickered when the cursor swept across the grid), after a short intent delay so tiles the cursor only passes over stay still. Leaving has no delay. */ .cat-ic { --ic-ease: cubic-bezier(.45, 0, .25, 1); position: relative; isolation: isolate; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold-200); color: var(--gold-600); transition: color .5s var(--ic-ease), border-color .5s var(--ic-ease), scale .6s var(--ic-ease); } .cat-ic::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: 50%; background: var(--navy-900); scale: .4; opacity: 0; transition: scale .5s var(--ic-ease), opacity .4s var(--ic-ease); } .cat-ic .icon { width: 22px; height: 22px; stroke-width: 1.4; } /* Medallion icons: a faint inner ring inside the gold one, like the logo's double ring and the rings in the hero illustrations. */ .cat-ic::after, .feature-ic::after, .help-ic::after, .hero-strip-item .ic::after, .empty-state .ic::after, .step-num::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid currentColor; opacity: .3; pointer-events: none; } .cat-card:hover .cat-ic { border-color: var(--navy-900); color: var(--gold-300); scale: 1.06; transition-delay: 60ms; } .cat-card:hover .cat-ic::before { scale: 1; opacity: 1; transition-delay: 60ms; } .cat-arrow { color: var(--text-3); transition: color .5s var(--ease-out), transform .6s var(--ease-out); } .cat-arrow .icon { width: 17px; height: 17px; } .cat-card:hover .cat-arrow { color: var(--gold-600); transform: translateX(5px); transition-delay: 60ms; } .cat-card h3 { font-size: 17px; } .cat-card p { font-size: 14px; color: var(--text-3); margin-top: 6px; line-height: 1.55; } /* 14 categories + this tile = 16 cells: full rows at 4, 3 and 2 columns. */ /* The dark tile: copy on the left (eyebrow, two-line heading, text, button), the Request page's line illustration filling the right. */ .cat-more { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 30px 12px 30px 32px; overflow: hidden; background: var(--navy-900); border-color: var(--navy-900); } .cat-more h3 { margin-top: 14px; max-width: 12em; font-family: var(--font-serif); font-size: clamp(26px, 2.3vw, 31px); font-weight: 600; line-height: 1.15; color: var(--on-dark); letter-spacing: 0; } .cat-more-copy { flex: 1 1 auto; min-width: 0; max-width: 340px; } .cat-more-copy .btn { margin-top: 22px; } /* Desktop (four columns): the tile must fit the height its light neighbours need, or it stretches their row. No eyebrow (the heading says it), a 26px heading and tighter spacing. */ @media (min-width: 1101px) { .cat-more { padding-top: 26px; padding-bottom: 26px; } .cat-more .eyebrow { display: none; } .cat-more h3 { margin-top: 0; font-size: 26px; } .cat-more-copy .btn { margin-top: 16px; } } .cat-more .eyebrow { color: var(--gold-300); } .cat-more-art { flex: 0 1 290px; min-width: 190px; margin: -18px 0; display: flex; align-items: center; } .cat-more-art .hero-art { width: 100%; stroke-width: 1.5; } .cat-more p.muted { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--on-dark-3); } /* The dark tile's hover shadow: the light tiles' exact geometry, only a little darker so it reads against the navy edge as theirs does. */ @media (hover: hover) { a.card.cat-more:hover { border-color: var(--navy-900); background: var(--navy-800); box-shadow: 0 2px 4px rgba(8, 11, 18, .05), 0 18px 34px -20px rgba(8, 11, 18, .36); } } .cat-more .btn { transition: background-color .45s var(--ease-out); } .cat-more:hover .btn { background: var(--gold-400); } @media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cat-more { grid-column: span 1; flex-direction: column; align-items: flex-start; padding: 26px; } .cat-more-art { display: none; } } /* Tablets: two columns, with the dark tile across the row and its drawing, as on phones (at three columns it was too narrow for its button). */ @media (min-width: 761px) and (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-more { grid-column: span 2; flex-direction: row; align-items: center; padding: 28px 10px 28px 30px; } .cat-more-art { display: flex; flex: 0 0 36%; min-width: 0; margin: -14px 0; } .cat-more-copy { max-width: 520px; } .cat-more h3 { max-width: none; font-size: clamp(30px, 3.6vw, 38px); } .cat-more p.muted { font-size: 15.5px; } } @media (max-width: 760px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-more { grid-column: span 2; flex-direction: row; align-items: center; padding: 22px 6px 22px 22px; } .cat-more-art { display: flex; flex: 0 0 38%; min-width: 0; margin: -10px 0; } .cat-card { padding: 18px; } .cat-card p { display: none; } .cat-card h3 { font-size: 15px; } .cat-more h3 { font-size: 23px; } } @media (max-width: 340px) { .cat-grid { grid-template-columns: 1fr; } .cat-more { grid-column: span 1; } } /* Monogram avatar: gold serif initials on navy. A photo replaces it when set. */ .avatar { font-variant-numeric: lining-nums; display: grid; place-items: center; flex: none; overflow: hidden; width: 56px; height: 56px; border-radius: 50%; outline: 1px solid rgba(191, 154, 95, .5); outline-offset: 3px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--gold-300); background: var(--navy-800); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar .icon { width: 22px; height: 22px; } /* .hue-N (from kt.js) varies the navy only slightly, so monograms stay a set. */ .hue-2, .hue-6 { background: var(--navy-700); } .hue-3, .hue-7 { background: #2A3A45; } .hue-4, .hue-8 { background: #33303A; } /* consultant card */ .pro-card { padding: 24px; gap: 16px; } .pro-top { display: flex; align-items: flex-start; gap: 16px; } .avatar-wrap { position: relative; flex: none; } .pro-id { min-width: 0; flex: 1; } .pro-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; } /* A long name wraps rather than pushing the checkmark past the card edge; the mark follows the last word inline. */ .pro-name .badge-verified { margin-left: 6px; vertical-align: -3px; } /* Narrow cards (the home page's four-up row): a smaller avatar and name give a two-word name and its checkmark room for one line. */ .pro-card { container-type: inline-size; } @container (max-width: 320px) { .pro-top { gap: 12px; } .pro-top .avatar { width: 46px; height: 46px; font-size: 18px; } .pro-name { font-size: 15.5px; } .pro-name .badge-verified { margin-left: 5px; } .pro-name .badge-verified .icon { width: 15px; height: 15px; } } .pro-headline { font-size: 14px; color: var(--text-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Same shape on every consultant card: headline always two lines tall, languages on their own row, one row of tags. */ .pro-card .pro-headline { min-height: calc(2 * 1.6em); line-height: 1.6; } .pro-card .pro-langs { flex-basis: 100%; } .pro-card .pro-tags { flex-wrap: nowrap; overflow: hidden; min-height: 28px; } .pro-card .pro-tags { gap: 5px; } .pro-card .pro-tags .chip { flex: none; padding: 0 9px; } .pro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13.5px; color: var(--text-3); } .pro-meta > span { display: inline-flex; align-items: center; gap: 5px; } .pro-meta .icon { width: 15px; height: 15px; } .pro-tags { display: flex; flex-wrap: wrap; gap: 6px; } .pro-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); } /* Prices in serif lining numerals, like the headings: they read engraved. */ .price { font-family: var(--font-serif); font-size: 25px; font-weight: 600; line-height: 1.05; color: var(--text); letter-spacing: 0; font-variant-numeric: lining-nums; } .price small { font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1; color: var(--text-3); letter-spacing: 0; } .price-from { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1; color: var(--text-3); margin-bottom: 4px; letter-spacing: 0; } .price-na { font-size: 14px; font-weight: 600; color: var(--text-2); } .pro-cta { flex: none; } /* service card */ .svc-card { padding: 24px; gap: 14px; } .svc-cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--gold-700); letter-spacing: .1em; text-transform: uppercase; } .svc-cat .icon { width: 15px; height: 15px; } .svc-card h3 { font-size: 18px; } .svc-card p { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Same shape on every service and firm card: fixed-height title, description and tag rows, so cards never differ in size. */ .svc-card h3 { line-height: 1.3; min-height: calc(2 * 1.3em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .svc-card p { line-height: 1.6; -webkit-line-clamp: 2; min-height: calc(2 * 1.6em); } .co-card .pro-headline { line-height: 1.6; min-height: calc(2 * 1.6em); } .co-card .pro-tags { min-height: 28px; } .svc-foot { min-height: 51px; } .svc-by { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); } .svc-by .avatar { width: 30px; height: 30px; font-size: 13px; outline-offset: 2px; } .svc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } /* company card */ .co-card { padding: 24px; gap: 14px; } .co-logo { width: 60px; height: 60px; border-radius: var(--radius-sm); outline: 1px solid rgba(191, 154, 95, .5); outline-offset: 3px; display: grid; place-items: center; overflow: hidden; flex: none; background: var(--navy-800); color: var(--gold-300); font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1; } .co-logo img { width: 100%; height: 100%; object-fit: cover; } .co-card h3 { font-size: 18px; } .co-stats { display: flex; gap: 16px; font-size: 13.5px; color: var(--text-3); } .co-stats b { color: var(--text); font-weight: 700; } .co-city { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--text-3); white-space: nowrap; } .co-city .icon { width: 15px; height: 15px; } /* skeleton placeholder while data loads */ .skeleton { pointer-events: none; } .skeleton .sk { border-radius: var(--radius-xs); background: linear-gradient(90deg, #EEEAE2 25%, #E6E1D7 37%, #EEEAE2 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .sk-avatar { width: 56px; height: 56px; } .sk-line { height: 12px; } .sk-line.w40 { width: 40%; } .sk-line.w60 { width: 60%; } .sk-line.w80 { width: 80%; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .empty-state { display: grid; justify-items: center; gap: 12px; padding: 56px 24px; text-align: center; border-radius: var(--radius); } .empty-state .ic { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--gold-200); color: var(--gold-600); } .empty-state .ic .icon { width: 24px; height: 24px; } .empty-state h3 { font-size: 19px; } .empty-state p { max-width: 30em; color: var(--text-3); } /* feature grid on navy */ .bento { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); } .bento-item { padding: 36px 32px; background: var(--navy-900); } .feature-ic { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 50%; border: 1px solid rgba(203, 170, 116, .45); color: var(--gold-300); } .feature-ic .icon { width: 21px; height: 21px; stroke-width: 1.4; } .bento-item h3 { font-size: 18px; margin-bottom: 10px; } .bento-item p { font-size: 15px; color: var(--on-dark-2); } /* callout band */ .cta-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 5vw, 72px); border-radius: var(--radius-lg); } /* A faint laurel wreath (static/img/watermark.svg) in the dark bands. */ .cta-band::before, .site-footer::before { content: ''; position: absolute; z-index: 0; pointer-events: none; background: url(/img/watermark.svg) center / contain no-repeat; opacity: .07; } .cta-band::before { width: 440px; height: 440px; right: 3%; top: 50%; translate: 0 -46%; } .site-footer::before { width: 420px; height: 420px; right: 4%; bottom: 10px; opacity: .05; } @media (max-width: 760px) { .cta-band::before { width: 320px; height: 320px; right: -40px; top: auto; bottom: -30px; translate: none; } .site-footer::before { width: 300px; height: 300px; right: -30px; bottom: 30px; } } .site-footer > * { position: relative; z-index: 1; } .cta-band-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; } .cta-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; } .cta-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--on-dark-2); } .cta-list .icon { width: 19px; height: 19px; color: var(--gold-400); margin-top: 3px; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* Desktop: the pair stacks in the band's narrow right column; a one-column grid sized to the wider button makes both the same length. */ .cta-actions-end { display: grid; justify-content: end; margin-top: 0; } /* Phones: stacked buttons share the full width, so a pair never ends up two different lengths. */ @media (max-width: 760px) { .cta-actions .btn { flex: 1 1 100%; min-width: 0; height: auto; min-height: var(--btn-h); padding: 12px 18px; line-height: 1.35; white-space: normal; text-align: center; } .cta-band .cta-actions-end { grid-auto-flow: row; width: auto; justify-content: stretch; } } .cta-stats { display: grid; gap: 14px; } .cta-stat { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border: 1px solid var(--line-dark); border-radius: var(--radius); } .cta-stat span { font-size: 14px; color: var(--on-dark-3); } .cta-stat b { font-variant-numeric: lining-nums; font-family: var(--font-serif); font-size: 40px; font-weight: 600; line-height: 1; color: var(--on-dark); } .cta-stat b.accent-text { color: var(--gold-300); } /* Help + FAQ block on the home page */ .pt-0 { padding-top: 0 !important; } .home-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; } .help-card { position: relative; padding: clamp(32px, 4vw, 48px); border-radius: var(--radius); } .help-ic { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border-radius: 50%; border: 1px solid var(--gold-200); color: var(--gold-600); } .help-ic .icon { width: 22px; height: 22px; stroke-width: 1.4; } .faq-heading { font-family: var(--font-serif); font-size: clamp(32px, 3.2vw, 42px); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 20px; } /* FAQ accordion (native details/summary) */ .faq-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); } .faq-item { border-bottom: 1px solid var(--line-strong); background: transparent; border-radius: 0; } .faq-item.glass { background: transparent; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 16.5px; font-weight: 650; line-height: 1.4; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .pm { position: relative; width: 22px; height: 22px; flex: none; transition: transform .3s var(--ease); } .faq-item summary .pm::before, .faq-item summary .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--gold-600); transition: transform .3s var(--ease); } .faq-item summary .pm::after { transform: rotate(90deg); } .faq-item[open]:not(.is-closing) summary .pm::after { transform: rotate(0); } .faq-item.is-animating { overflow: hidden; } .faq-body { padding: 0 2px 24px; color: var(--text-2); font-size: 15.5px; line-height: 1.75; max-width: 60em; } .faq-body p + p { margin-top: .7em; } /* 12 ─ Forms ─────────────────────────────────────────────────────────────── */ .form { display: grid; gap: 18px; } .form-row { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .field { display: grid; gap: 7px; min-width: 0; align-content: start; } .field > label, .field-label { font-family: var(--font-display); font-size: 13.5px; font-weight: 650; line-height: 1.3; color: var(--text); } .field .req { color: var(--red-600); margin-left: 2px; } .field .hint { font-size: 13px; color: var(--text-3); } .input, .select, .textarea { width: 100%; min-width: 0; height: 50px; padding: 0 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--white); color: var(--text); font-size: 15.5px; outline: none; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .textarea { height: auto; min-height: 140px; padding: 13px 15px; line-height: 1.6; resize: vertical; } .select { padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737A87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; } .input::placeholder, .textarea::placeholder { color: #9B9FA8; } .input:hover, .select:hover, .textarea:hover { border-color: #BFB6A5; } .input:focus, .select:focus, .textarea:focus { border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(191, 154, 95, .18); } /* Validation shows only after the user has interacted (the old site showed red errors on page load). :user-invalid does exactly that; .was-validated is set on submit for browsers without it. */ .input:user-invalid, .select:user-invalid, .textarea:user-invalid, .was-validated .input:invalid, .was-validated .select:invalid, .was-validated .textarea:invalid { border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(164, 58, 58, .1); } .field-error { display: none; font-size: 13px; color: var(--red-600); } .field:has(:user-invalid) .field-error, .was-validated .field:has(:invalid) .field-error { display: block; } .input-group { position: relative; } .input-group .input { padding-right: 48px; } .input-group .btn-icon { position: absolute; right: 5px; top: 5px; --btn-h: 40px; color: var(--text-3); background: transparent; border: 0; } .input-group .btn-icon:hover { color: var(--text); } .check { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--text-2); cursor: pointer; } .check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--navy-900); cursor: pointer; } .check a { color: var(--gold-700); text-decoration: underline; text-underline-offset: 3px; } .choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .choice { position: relative; } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice label { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 16px; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--white); transition: border-color .2s, background-color .2s; } .choice label .icon { width: 21px; height: 21px; color: var(--gold-600); margin-top: 1px; } .choice label b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); } .choice label span { display: block; font-size: 13px; color: var(--text-3); margin-top: 3px; line-height: 1.45; } .choice input:checked + label { border-color: var(--navy-900); background: var(--gold-50); box-shadow: inset 0 0 0 1px var(--navy-900); } .choice input:focus-visible + label { outline: 2px solid var(--gold-600); outline-offset: 2px; } .chip-check { position: relative; display: inline-flex; } .chip-check input { position: absolute; opacity: 0; pointer-events: none; } .chip-check span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--white); font-size: 14px; font-weight: 550; color: var(--text-2); cursor: pointer; transition: all .2s; } .chip-check input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); } .chip-check input:focus-visible + span { outline: 2px solid var(--gold-600); outline-offset: 2px; } .chip-set { display: flex; flex-wrap: wrap; gap: 8px; } .switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14.5px; color: var(--text-2); } .switch input { position: absolute; opacity: 0; } .switch .track { position: relative; width: 42px; height: 24px; flex: none; border-radius: 99px; background: var(--line-strong); transition: background-color .25s; } .switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .25s var(--ease); } .switch input:checked + .track { background: var(--navy-900); } .switch input:checked + .track::after { transform: translateX(18px); } .switch input:focus-visible + .track { outline: 2px solid var(--gold-600); outline-offset: 2px; } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14.5px; } .form-note .icon { width: 18px; height: 18px; margin-top: 2px; } .form-note.ok { background: var(--green-50); color: var(--green-600); } .form-note.err { background: var(--red-50); color: var(--red-600); } .form-note.info { background: var(--gold-50); color: var(--gold-700); } /* 13 ─ Footer, toasts, modal ─────────────────────────────────────────────── */ .site-footer { position: relative; overflow: clip; margin-top: auto; background: var(--navy-950); color: var(--on-dark-3); padding: 80px 0 32px; border-top: 3px solid var(--gold-500); } .footer-aurora { display: none; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; } .footer-brand .brand { color: var(--on-dark); } .footer-brand p { margin-top: 20px; max-width: 26em; font-size: 14.5px; line-height: 1.75; color: var(--on-dark-3); } .footer-social { display: flex; gap: 10px; margin-top: 24px; } .footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--on-dark-2); transition: border-color .2s, color .2s; } .footer-social a:hover { border-color: var(--gold-400); color: var(--gold-300); } .footer-social .icon { width: 17px; height: 17px; } .footer-social .brand-glyph { width: 16px; height: 16px; stroke: none; } .footer-title { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 20px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer-col a { font-size: 14.5px; transition: color .2s; } .footer-col a:hover { color: var(--on-dark); } .footer-contact { position: relative; display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 56px; padding-top: 34px; } .footer-contact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: url(/img/rosette.svg) center / 14px 14px no-repeat, linear-gradient(var(--line-dark), var(--line-dark)) left center / calc(50% - 16px) 1px no-repeat, linear-gradient(var(--line-dark), var(--line-dark)) right center / calc(50% - 16px) 1px no-repeat; } .footer-contact a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--on-dark-2); } .footer-contact a:hover { color: var(--on-dark); } .footer-contact .icon { width: 16px; height: 16px; color: var(--gold-400); } .footer-credit { color: var(--on-dark-2); text-decoration: underline; text-decoration-color: rgba(203, 170, 116, .45); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; } .footer-credit:hover { color: var(--gold-300); text-decoration-color: var(--gold-300); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; font-size: 13px; color: var(--on-dark-3); } .toast-region { position: fixed; z-index: 400; right: 20px; bottom: 20px; display: grid; gap: 10px; width: min(380px, calc(100% - 40px)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--navy-900); color: var(--on-dark); font-size: 14.5px; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in .4s var(--ease-out); } .toast .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-300); } .toast.err .icon { color: #E7A3A3; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } } .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(14, 20, 31, .55); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity .25s; } .modal-card { width: min(560px, 100%); max-height: calc(100dvh / var(--page-zoom, 1) - 40px); overflow: auto; padding: 30px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg); transform: translateY(10px); transition: transform .3s var(--ease-out); } .modal.is-open .modal-card { transform: none; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .modal-head h2 { font-size: 30px; } /* 14 ─ Utilities, motion, responsive ─────────────────────────────────────── */ .stack-xs > * + * { margin-top: 8px; } .stack-sm > * + * { margin-top: 14px; } .stack > * + * { margin-top: 22px; } .row { display: flex; align-items: center; gap: 12px; } .row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .center { text-align: center; } .mt-0 { margin-top: 0 !important; } .mt-sm { margin-top: 14px; } .mt { margin-top: 24px; } .mt-lg { margin-top: 40px; } .divider { height: 1px; background: var(--line); border: 0; margin: 24px 0; } /* Reveal on scroll (app.js adds .is-in); visible by default without JS. Opacity eases evenly (--ease-fade): on the expo ease-out it reached ~80% in the first tenth of a second and read as a pop on phones. Only the rise keeps the long ease-out. No will-change: Safari re-rendered each card's text when it was dropped after the reveal, a visible snap. */ :root { --ease-fade: cubic-bezier(.4, 0, .2, 1); } .js .reveal { opacity: 0; transform: translateY(18px); } .js .reveal:not(.reveal-done) { transition: opacity .65s var(--ease-fade) var(--rd, 0s), transform .8s var(--ease-out) var(--rd, 0s); } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal.d1 { --rd: .06s; } .js .reveal.d2 { --rd: .12s; } .js .reveal.d3 { --rd: .18s; } /* Phones: no scroll reveal at all. A timed fade popped on an iPhone (Safari started it mid-swipe, with the element already on screen), and so did a scroll-driven one (Safari updates it on the main thread, which lags behind momentum scrolling). Content is simply there as it scrolls in. */ @media (max-width: 760px) { .js .reveal, .js .reveal:not(.reveal-done), .js .card.reveal:not(.reveal-done) { opacity: 1; transform: none; } .js .reveal:not(.reveal-done) { transition: none; } } /* A card hovered while it is still revealing keeps its own hover easing (without the stagger delay), instead of snapping. */ .js .card.reveal:not(.reveal-done) { transition: opacity .65s var(--ease-fade) var(--rd, 0s), transform .8s var(--ease-out) var(--rd, 0s), border-color .45s var(--ease-out), box-shadow .55s var(--ease-out), translate .55s var(--ease-out), background-color .45s var(--ease-out); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } } @media (max-width: 1320px) { /* Narrow desktops: the Bulgarian labels are long, so tighten the header. */ .header-inner { gap: 18px; } .main-nav a { padding-inline: 9px; } .main-nav a::after { left: 9px; right: 9px; } .header-actions > .lang-switch { padding-right: 14px; margin-right: 4px; } } @media (max-width: 1180px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 1080px) { .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; position: relative; } .home-hero-grid > :first-child { position: relative; z-index: 1; } .hero-visual { position: absolute; z-index: 0; top: 0; right: -22%; width: min(86vw, 420px); opacity: .22; pointer-events: none; } .cta-band-grid, .home-help { grid-template-columns: minmax(0, 1fr); } .hero-strip-item:nth-child(3) { border-left: 0; } .hero-strip-item:nth-child(n+3) { border-top: 1px solid var(--line-dark); } } /* Phone search keyboard focus (see the ring in the 760px block). */ @media (max-width: 760px) and (any-pointer: fine) { .home-hero .search-field + .search-field:has(select:focus-visible)::after { opacity: 1; } } /* Tablets: the whole scale in view on the right, centred on the hero, as a faint watermark behind the copy (phones keep the cropped one). */ @media (min-width: 761px) and (max-width: 1080px) { .hero-visual { top: 50%; right: -4%; width: min(52vw, 480px); translate: 0 -50%; opacity: .16; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta-actions-end { grid-auto-flow: column; grid-auto-columns: 1fr; justify-content: start; width: fit-content; } .hero-strip-inner { grid-template-columns: repeat(2, 1fr); } .cards-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { :root { --gutter: 18px; --header-h: 68px; } .brand-mark { width: 38px; height: 38px; } .brand-word { font-size: 17px; letter-spacing: .18em; } .brand { gap: 11px; } .menu-toggle-text { display: none; } .search-panel { grid-template-columns: 1fr; } .search-field + .search-field { border-left: 0; border-top: 1px solid var(--line); } .search-panel .btn { height: 54px; } /* Home hero on phones, decluttered: a shorter lede, a two-row search (the input, then the field select beside a square button), a quieter "not sure" link and a compact 2x2 strip. The scale keeps its faint watermark size. */ .home-hero .lead { margin-top: 20px; font-size: 16.5px; line-height: 1.65; } .lead-full { display: none; } .lead-short { display: inline; } .home-hero .search-panel { grid-template-columns: minmax(0, 1fr) auto; } .home-hero .search-field:first-child { grid-column: 1 / -1; } .home-hero .search-field + .search-field { height: 60px; background: #EFEAE0; } /* The select keeps its tint when focused: iOS leaves a select focused after its picker closes, so a focus colour would stick until the next tap. */ .home-hero .search-field + .search-field:focus-within { background: #EFEAE0; } /* Keyboard focus: a rounded ring set in from the row's edges, so it never meets the panel's rounded corner or the divider above. Touch-only devices skip it: iOS counts a tapped select as focus-visible. */ .home-hero .search-field + .search-field::after { content: ''; position: absolute; inset: 6px; border: 1.5px solid var(--gold-500); border-radius: var(--radius-sm); opacity: 0; pointer-events: none; transition: opacity .2s; } .home-hero .search-panel .btn { width: 60px; height: 60px; padding: 0; } /* Directory search: same as the home search, a full-height square button with just the icon (the 54px stacked-button height left a gap). */ .dir-search { grid-template-columns: minmax(0, 1fr) auto; } .dir-search .btn { width: 60px; height: 60px; padding: 0; } .dir-search .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .home-hero .search-panel .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* The popular chips duplicate the field select and the categories section below, so phones leave them out. */ .home-hero .search-suggest { display: none; } .home-hero .search-alt { margin-top: 18px; font-size: 13.5px; color: var(--on-dark-3); } .home-hero .search-alt a { display: block; width: fit-content; margin-top: 6px; text-wrap: balance; font-weight: 500; border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(217, 191, 141, .3); text-decoration-thickness: 1px; text-underline-offset: 5px; } .home-hero .search-alt .icon { display: inline-block; width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; } /* Tighter padding around the copy, so the hero and most of its strip share the first phone screen (nebesno.dk was the reference). */ .home-hero-grid { padding: 30px 0 32px; } .home-hero .hero-kicker { align-items: flex-start; margin-bottom: 18px; font-size: 11px; line-height: 1.5; letter-spacing: .14em; } /* Its short rule sits on the first line when the kicker wraps. */ .home-hero .hero-kicker::before { flex: none; margin-top: .75em; } /* The strip: an even 2x2 of centred cells (medallion, title, subtitle), divided by a cross of hairlines that stops short of the edges, with the rosette of the section dividers where they meet. Rows are equal, so the cross sits in the true centre. */ .hero-strip-inner { position: relative; grid-auto-rows: 1fr; } .hero-strip-item, .hero-strip-item:nth-child(n) { flex-direction: column; align-items: center; gap: 9px; padding: 18px 10px; border: 0; text-align: center; } .hero-strip-inner::before, .hero-strip-inner::after { content: ''; position: absolute; pointer-events: none; } .hero-strip-inner::before { left: 50%; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(var(--line-dark) calc(50% - 16px), transparent 0 calc(50% + 16px), var(--line-dark) 0); } .hero-strip-inner::after { left: 0; right: 0; top: 50%; height: 14px; translate: 0 -50%; background: url(/img/rosette.svg) center / 12px 12px no-repeat, linear-gradient(90deg, var(--line-dark) calc(50% - 16px), transparent 0 calc(50% + 16px), var(--line-dark) 0) center / 100% 1px no-repeat; } .hero-strip-item .ic { width: 32px; height: 32px; } .hero-strip-item .ic .icon { width: 16px; height: 16px; } .hero-strip-item b { font-size: 13.5px; } .hero-strip-item div > span { margin-top: 2px; font-size: 12px; line-height: 1.45; } .section-head { flex-direction: column; align-items: flex-start; } .grid-2, .grid-3, .grid-4, .form-row, .choice-grid, .cards-grid.cols-3, .cards-grid.cols-2 { grid-template-columns: 1fr; } .steps, .bento { grid-template-columns: 1fr; } .hero-strip-inner { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .site-footer { padding-top: 60px; } .toast-region { right: 12px; bottom: 12px; width: calc(100% - 24px); } } /* ── Directories ────────────────────────────────────────────────────────── */ .dir-search { grid-template-columns: minmax(0, 1fr) auto; max-width: 640px; margin-top: 32px; } .dir { background: var(--cream); padding-top: 48px; } .dir-grid { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 32px; align-items: start; } .dir-filters { position: sticky; top: calc(var(--header-h) + 20px); padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); } .dir-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .dir-filters-head .h3 { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); } .dir-filters .form { gap: 16px; } .dir-filters .select { height: 44px; font-size: 14.5px; } .dir-filters .field > label { font-size: 12.5px; } .dir-filter-actions { display: grid; gap: 8px; margin-top: 4px; } .dir-filter-actions .btn-primary { display: none; } .dir-close, .dir-open { display: none !important; } .dir-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; min-height: 44px; } .dir-count { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--text); font-variant-numeric: lining-nums; } .dir-sort { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-3); white-space: nowrap; } .dir-sort .select { height: 42px; width: auto; min-width: 200px; font-size: 14.5px; } .dir-active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .dir-active .chip { height: 32px; cursor: pointer; background: var(--white); } .dir-active .chip .icon { width: 13px; height: 13px; } /* Two wide cards per row beside the filters (three-up felt cramped); one on phones. */ .dir-results { grid-template-columns: repeat(2, minmax(0, 1fr)); transition: opacity .2s; } @media (max-width: 760px) { .dir-results { grid-template-columns: minmax(0, 1fr); } } .dir-results.is-loading { opacity: .55; } .dir-results .empty-state { grid-column: 1 / -1; } .pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; } .pager-info { font-size: 14px; color: var(--text-3); } @media (max-width: 900px) { .dir-grid { grid-template-columns: minmax(0, 1fr); } .dir-open { display: inline-flex !important; } .dir-close { display: inline-flex !important; } .dir-filter-actions .btn-primary { display: inline-flex; } .dir-filters { position: fixed; z-index: 310; left: 0; right: 0; bottom: 0; top: auto; max-height: 86dvh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .4s var(--ease-out); box-shadow: 0 -20px 60px -20px rgba(14, 20, 31, .5); } .dir-filters.is-open { transform: none; } html.sheet-open { overflow: hidden; } html.sheet-open::after { content: ''; position: fixed; inset: 0; z-index: 305; background: rgba(14, 20, 31, .45); } .dir-sort span { display: none; } .dir-sort { min-width: 0; } .dir-sort .select { min-width: 0; width: 100%; max-width: 200px; } .dir-toolbar .row { min-width: 0; } .dir-count { font-size: 22px; white-space: nowrap; } } /* ── Profile pages ──────────────────────────────────────────────────────── */ .profile-hero { padding: calc(var(--header-h) + 28px) 0 56px; } .profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; margin-top: 32px; } .avatar.avatar-xl, .co-logo.avatar-xl { width: 120px; height: 120px; font-size: 46px; border: 1px solid rgba(203, 170, 116, .4); outline-offset: 5px; } .profile-id h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: clamp(38px, 4vw, 54px); } .profile-id h1 .badge-verified .icon { width: 26px; height: 26px; color: var(--gold-300); } .profile-id .lead { margin-top: 10px; } .profile-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; font-size: 14.5px; color: var(--on-dark-2); } .profile-meta > span { display: inline-flex; align-items: center; gap: 7px; } .profile-meta .icon { width: 16px; height: 16px; color: var(--gold-300); } .profile-meta a { color: var(--on-dark); border-bottom: 1px solid rgba(217, 191, 141, .5); } .on-dark .stars { color: var(--on-dark); } .on-dark .stars .count { color: var(--on-dark-3); } .on-dark .chip-neutral { background: rgba(244, 241, 234, .08); color: var(--on-dark-2); } .profile-price { display: grid; gap: 14px; justify-items: end; text-align: right; } .on-dark .price { color: var(--on-dark); font-size: 30px; } .on-dark .price small, .on-dark .price-from { color: var(--on-dark-3); } .profile-body { background: var(--cream); padding-top: 48px; } .profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; } .profile-main { display: grid; gap: 28px; min-width: 0; } .svc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .svc-steps li { display: grid; gap: 14px; align-content: start; } .svc-step-n { font-family: var(--font-serif); font-size: 34px; font-style: italic; font-weight: 500; line-height: 1; color: var(--gold-600); font-variant-numeric: lining-nums; } .svc-steps h3 { font-size: 16px; } .svc-steps p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); } .svc-more .block-title { margin-bottom: 16px; } .svc-facts { display: grid; margin: 0; } .svc-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); } .svc-facts > div:first-child { border-top: 0; padding-top: 0; } .svc-facts dt { font-size: 14px; color: var(--text-3); } .svc-facts dd { margin: 0; text-align: right; font-size: 15px; font-weight: 600; color: var(--text); } .svc-facts dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-3); } .svc-facts dd a { color: var(--gold-700); text-decoration: underline; text-decoration-color: var(--gold-300); text-underline-offset: 3px; } @media (max-width: 760px) { .svc-steps { grid-template-columns: 1fr; gap: 18px; } .svc-steps li { grid-template-columns: 36px 1fr; gap: 12px; } } .profile-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; } .profile-block { padding: 32px; border-radius: var(--radius); } .block-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 20px; } .mb-sm { margin-bottom: 20px; } .svc-row { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); } .svc-row:first-child { border-top: 0; padding-top: 0; } .svc-row h3 { font-size: 17px; } .svc-row p { font-size: 14.5px; margin-top: 4px; } .svc-row-side { display: grid; gap: 10px; justify-items: end; align-content: start; text-align: right; flex: none; } .review-list { display: grid; gap: 0; } .review { position: relative; margin: 0; padding: 20px 0 20px 46px; border-top: 1px solid var(--line); } /* A large serif opening quote beside each review. */ .review::before { content: '\201C'; position: absolute; left: 0; top: 8px; font-family: var(--font-serif); font-size: 64px; font-weight: 600; line-height: 1; color: var(--gold-300); } .review:first-child::before { top: -12px; } .review:first-child { border-top: 0; padding-top: 0; } .review-stars { display: flex; gap: 2px; } .review-stars .icon { width: 15px; height: 15px; stroke: var(--gold-500); } .review-stars .icon.on { fill: var(--gold-500); } .review blockquote { margin: 10px 0 8px; font-family: var(--font-serif); font-size: 21px; line-height: 1.4; color: var(--text); font-style: italic; } .review figcaption { font-size: 13.5px; color: var(--text-3); } .booking { padding: 28px; border-radius: var(--radius); } .booking .form { gap: 18px; } /* The strip scrolls sideways and always shows whole days: tile width is worked out from the space available (--n tiles per view, from a container query) and scrolling snaps tile by tile. No edge fade: it smeared a selected day into a grey gradient. */ .day-field { container-type: inline-size; } .day-strip { --n: 5; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--n) - 1) * 8px) / var(--n)); gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-snap-type: x mandatory; } .day-strip > * { scroll-snap-align: start; } @container (max-width: 321px) { .day-strip { --n: 4; } } @container (min-width: 398px) { .day-strip { --n: 6; } } @container (min-width: 466px) { .day-strip { --n: 7; } } @container (min-width: 532px) { .day-strip { --n: 8; } } @container (min-width: 598px) { .day-strip { --n: 9; } } @container (min-width: 664px) { .day-strip { --n: 10; } } .day, .slot { border: 1px solid var(--line-strong); background: var(--white); border-radius: var(--radius-sm); color: var(--text); transition: border-color .2s, background-color .2s; } .day { display: grid; gap: 2px; padding: 8px 0; text-align: center; } .day small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); } .day b { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .slot { height: 42px; font-family: var(--font-display); font-size: 14px; font-weight: 650; } .day:hover:not(:disabled), .slot:hover:not(:disabled) { border-color: var(--navy-700); } .day.is-on, .slot.is-on { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); } .day.is-on small { color: var(--gold-300); } .day:disabled, .slot:disabled { opacity: .4; cursor: not-allowed; } .slot:disabled { text-decoration: line-through; } .hours-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; font-size: 14.5px; } .hours-list dt { color: var(--text-3); text-transform: capitalize; } .hours-list dd { margin: 0; color: var(--text); text-align: right; } /* Office address with a Google Map. The map loads on request (Google sets its own cookies), so until then the frame is a quiet cream panel with a medallion button; the iframe fades in over it once loaded. */ .office-addr { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); } .office-addr .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold-600); } .office-map { position: relative; margin-top: 18px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background-color: var(--cream); } .office-map-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; width: 100%; padding: 16px; border: 0; background: none; color: var(--text); cursor: pointer; transition: opacity .4s ease; } .office-map-load .ic { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; border: 1px solid var(--gold-200); color: var(--gold-600); transition: border-color .3s, color .3s, background-color .3s; } .office-map-load .ic::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid currentColor; opacity: .3; pointer-events: none; } .office-map-load .icon { width: 22px; height: 22px; stroke-width: 1.4; } .office-map-btn { font-family: var(--font-display); font-size: 14px; font-weight: 650; letter-spacing: .02em; } .office-map-note { font-size: 12.5px; color: var(--text-3); } @media (hover: hover) { .office-map-load:hover .ic { border-color: var(--navy-900); background-color: var(--navy-900); color: var(--gold-300); } } .office-map-load:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -4px; } .office-map.is-loading .office-map-load { pointer-events: none; } .office-map.is-loading .office-map-btn { opacity: .55; } .office-map.is-loaded .office-map-load { opacity: 0; visibility: hidden; } .office-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s ease; } .office-map.is-loaded iframe { opacity: 1; } .office-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-display); font-size: 13.5px; font-weight: 650; color: var(--gold-700); } .office-link .icon { width: 14px; height: 14px; } @media (hover: hover) { .office-link:hover { color: var(--navy-900); } } /* Firm pages: the office sits beside "About the company" on desktop. */ .company-intro > * + * { margin-top: 22px; } @media (min-width: 981px) { .company-intro.has-office { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; } .company-intro.has-office > * + * { margin-top: 0; } .company-intro .office-map { aspect-ratio: 16 / 10; } } .page-profile .svc-by { align-items: flex-start; } .page-profile .svc-by .avatar { width: 48px; height: 48px; font-size: 19px; } @media (max-width: 980px) { .profile-grid { grid-template-columns: 1fr; } .profile-side { position: static; } .profile-head { grid-template-columns: auto minmax(0, 1fr); } .profile-price { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: start; gap: 20px; } } @media (max-width: 600px) { .profile-head { grid-template-columns: 1fr; gap: 20px; } .avatar.avatar-xl, .co-logo.avatar-xl { width: 88px; height: 88px; font-size: 34px; } .profile-block, .booking { padding: 22px; } .svc-row { flex-direction: column; gap: 10px; } .svc-row-side { display: flex; align-items: center; justify-content: space-between; text-align: left; } } /* ── Content pages ──────────────────────────────────────────────────────── */ .split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; color: var(--on-dark); } .check-list .icon { width: 20px; height: 20px; color: var(--gold-400); margin-top: 3px; } .dark-check li { font-size: 15px; color: var(--text-2); } .dark-check .icon { color: var(--gold-600); } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .feature { padding: 32px; border-radius: var(--radius); } .feature .cat-ic { margin-bottom: 22px; } .feature h3 { margin-bottom: 10px; } .feature p { font-size: 15px; } .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 36px 32px; border-radius: var(--radius); } .plan.is-featured { border: 1px solid var(--gold-500); box-shadow: var(--shadow); } .plan-flag { position: absolute; top: -14px; left: 32px; background: var(--white); } .plan h2 { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); } .plan-price { font-family: var(--font-serif); font-size: 44px; font-weight: 600; line-height: 1.1; color: var(--text); margin-top: 12px; font-variant-numeric: lining-nums; } .plan .check-list { margin: 24px 0 32px; } .plan .btn { margin-top: auto; } .faq-page { display: grid; gap: 56px; max-width: 860px; } .faq-group h2 { font-size: 34px; margin-bottom: 18px; } .contact-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; } .contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .contact-lines li { display: flex; gap: 14px; align-items: flex-start; } .contact-lines .icon { width: 20px; height: 20px; color: var(--gold-600); margin-top: 12px; } .contact-lines div { display: grid; gap: 2px; } .contact-lines a, .contact-lines span:not(.muted) { font-size: 16px; color: var(--text); font-weight: 550; } .mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .mini-steps li { display: flex; gap: 16px; align-items: baseline; } .mini-steps li { align-items: center; } .mini-steps .step-num { flex: none; width: 38px; height: 38px; margin: 0; font-size: 15px; } .mini-steps .step-num::after { inset: 2.5px; } .news-tabs { margin-bottom: 8px; } .news-tabs .tab[aria-pressed='true'] { background: var(--navy-900); color: var(--on-dark); } .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .news-card { padding: 28px; gap: 12px; } .news-card .svc-cat { margin-bottom: 4px; } .news-card h3 { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: 0; } .news-card p { font-size: 15px; } .news-date { font-size: 13px; color: var(--text-3); margin-top: auto; padding-top: 12px; } .article-body { font-size: 18px; } .nf-hero { min-height: calc(70vh / var(--page-zoom, 1)); display: grid; align-items: center; } .nf-actions { justify-content: center; margin-top: 32px; } /* 404: the hero scale, smaller and off balance: the beam rocks around a tilt. */ .nf-scale { width: min(280px, 64vw); margin: 0 auto 6px; } .nf-scale .hero-scale { width: 100%; margin: 0; } .hero-scale.is-tipped .hs-beam { animation-name: hs-tipped; animation-duration: 6s; } .hero-scale.is-tipped .hs-pan { animation-name: hs-tipped-pan; animation-duration: 6s; } @keyframes hs-tipped { from { transform: rotate(-8.5deg); } to { transform: rotate(-11deg); } } @keyframes hs-tipped-pan { from { transform: rotate(8.5deg); } to { transform: rotate(11deg); } } @media (prefers-reduced-motion: reduce) { .hero-scale.is-tipped .hs-beam { transform: rotate(-10deg); } .hero-scale.is-tipped .hs-pan { transform: rotate(10deg); } } @media (max-width: 980px) { .split, .contact-grid { grid-template-columns: 1fr; gap: 28px; } .feature-grid, .plans, .news-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .feature-grid, .plans, .news-grid { grid-template-columns: 1fr; } } /* ── Sign-in, sign-up, account ──────────────────────────────────────────── */ .auth-page { min-height: calc(100vh / var(--page-zoom, 1)); } .auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start; gap: clamp(40px, 7vw, 104px); padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 104px); } .auth-copy { position: sticky; top: calc(var(--header-h) + 24px); padding-top: clamp(16px, 2.5vw, 40px); } .auth-copy h1 { max-width: 11em; } .oauth { display: grid; gap: 18px; } .oauth-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .btn-oauth { gap: 10px; color: var(--text); background: var(--white); border-color: var(--line-strong); font-family: var(--font-body); font-size: 14.5px; font-weight: 550; letter-spacing: 0; text-transform: none; } .btn-oauth:hover { border-color: var(--text); } .btn-oauth .icon { width: 18px; height: 18px; } /* Brand marks keep their own fills; the .icon outline stroke would distort them. */ .btn-oauth :is(.oauth-g, .oauth-li) { stroke: none; } .oauth-or { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 13px; color: var(--text-3); } .oauth-or::before, .oauth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .auth-copy .lead { max-width: 28em; margin-top: 20px; } .auth-points { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line-dark); } .auth-points li { font-size: 16px; color: var(--on-dark-2); } .auth-card { padding: clamp(26px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--paper); color: var(--text-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } .auth-card :is(h2, h3, .h2, .h3, b, strong) { color: var(--text); } .field-top label { font-family: var(--font-display); font-size: 13.5px; font-weight: 650; line-height: 1.3; color: var(--text); } .auth-card .h2 { font-size: 34px; } .auth-card .form + .form { margin-top: 0; } .field-top { justify-content: space-between; } .link-muted { color: var(--text-3); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color .2s; } .link-muted:hover { color: var(--gold-700); } .auth-alt { font-size: 14.5px; color: var(--text-3); text-align: center; } .auth-alt a { color: var(--gold-700); font-weight: 600; } .role-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; } .role-grid { display: grid; gap: 8px; } .role-grid .choice label { padding: 13px 15px; } .btn-block { width: 100%; } .btn.is-busy, .file-btn.is-busy { opacity: .6; pointer-events: none; } .cf-turnstile { min-height: 65px; } .account-hero { padding-bottom: clamp(36px, 4vw, 52px); } .account-hero .container { padding-top: clamp(28px, 4vw, 48px); } .account-body { padding: clamp(32px, 4vw, 48px) 0 var(--section-y); background: var(--paper); } .account-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; } .account-nav { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 14px; } .acc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .acc-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: background-color .2s, color .2s; } .acc-link .icon { width: 18px; height: 18px; color: var(--text-3); transition: color .2s; } .acc-link:hover { background: var(--cream); color: var(--text); } .acc-link[aria-current] { background: var(--navy-900); color: var(--on-dark); } .acc-link[aria-current] .icon { color: var(--gold-300); } /* Log out sits apart from the section links: a hairline above it with a gap, and the same rounded hover as every other link (it used to hover as a square block fused to the line). */ .acc-logout { position: relative; margin-top: 13px; } /* Dashboard spawn (account.js): the menu rises in item by item on arrival, and the panels of each section rise in one after another. */ .acc-arrive .acc-links > li, .acc-arrive .acc-logout { animation: fade-in .9s var(--ease-fade) .35s both, rise-up .9s var(--ease-lux) .35s both; } .acc-arrive .acc-links > li:nth-child(2) { animation-delay: .4s; } .acc-arrive .acc-links > li:nth-child(3) { animation-delay: .45s; } .acc-arrive .acc-links > li:nth-child(4) { animation-delay: .5s; } .acc-arrive .acc-links > li:nth-child(5) { animation-delay: .55s; } .acc-arrive .acc-links > li:nth-child(6) { animation-delay: .6s; } .acc-arrive .acc-links > li:nth-child(7) { animation-delay: .65s; } .acc-arrive .acc-links > li:nth-child(n+8) { animation-delay: .7s; } .acc-arrive .acc-logout { animation-delay: .75s; } .account-main.acc-spawn > :not(.acc-form), .account-main.acc-spawn > .acc-form > * { animation: fade-in .9s var(--ease-fade) var(--acc-d, 0s) both, rise-up .9s var(--ease-lux) var(--acc-d, 0s) both; } .account-main.acc-spawn > :nth-child(2), .account-main.acc-spawn > .acc-form > :nth-child(2) { animation-delay: calc(var(--acc-d, 0s) + .08s); } .account-main.acc-spawn > :nth-child(3), .account-main.acc-spawn > .acc-form > :nth-child(3) { animation-delay: calc(var(--acc-d, 0s) + .16s); } .account-main.acc-spawn > :nth-child(4), .account-main.acc-spawn > .acc-form > :nth-child(4) { animation-delay: calc(var(--acc-d, 0s) + .24s); } .account-main.acc-spawn > :nth-child(n+5), .account-main.acc-spawn > .acc-form > :nth-child(n+5) { animation-delay: calc(var(--acc-d, 0s) + .32s); } .acc-logout::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 1px; background: var(--line); } .acc-logout:hover { color: var(--text); } .account-main { display: grid; gap: 24px; min-width: 0; } .acc-loading { padding: 48px 0; text-align: center; color: var(--text-3); } .acc-panel { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); } .acc-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; } .acc-panel-head .h3 { font-family: var(--font-serif); font-size: 28px; font-weight: 600; } .acc-panel > .form, .acc-form .acc-panel { display: grid; gap: 18px; } .acc-form .acc-panel .acc-panel-head { margin-bottom: 4px; } .acc-form { gap: 24px; } .acc-save { position: sticky; bottom: 16px; z-index: 2; display: flex; justify-content: flex-end; } .acc-save .btn { box-shadow: var(--shadow-lg); } .acc-pct { font-family: var(--font-serif); font-size: 30px; font-weight: 600; color: var(--gold-700); font-variant-numeric: lining-nums; } .acc-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 24px; border: 1px solid var(--line); border-left: 3px solid var(--gold-500); border-radius: var(--radius); background: var(--white); } .acc-status p { margin: 8px 0 0; color: var(--text-2); } .acc-status a:not(.btn) { color: var(--text); font-weight: 600; } .danger-zone { border-color: #E9C9C6; } .danger-zone .h3 { color: var(--red-600); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .stat-card { display: grid; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .stat-card .icon { width: 20px; height: 20px; color: var(--gold-600); margin-bottom: 10px; } .stat-card b { font-family: var(--font-serif); font-size: 38px; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: lining-nums; } .stat-card span { font-size: 13.5px; color: var(--text-3); } .progress { height: 6px; border-radius: 99px; background: var(--cream); overflow: hidden; } .progress span { display: block; width: var(--pct, 0%); height: 100%; background: var(--gold-500); transition: width .6s var(--ease-out); } .todo-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } .todo-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; } .todo-list .icon { width: 18px; height: 18px; color: var(--line-strong); flex: none; } .todo-list .is-done { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); } .todo-list .is-done .icon { color: var(--green-600); } .todo-list a { color: var(--text); font-weight: 550; text-decoration: underline; text-decoration-color: var(--gold-300); text-underline-offset: 3px; } .segmented { display: inline-flex; padding: 3px; border-radius: var(--radius-sm); background: var(--cream); } .segmented button { height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-xs); background: transparent; cursor: pointer; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--text-2); } .segmented button[aria-pressed="true"] { background: var(--white); color: var(--text); box-shadow: var(--shadow-sm); } .segmented .count { margin-left: 4px; color: var(--text-3); font-variant-numeric: tabular-nums; } .booking-list, .acc-list, .req-list { display: grid; gap: 0; } .booking-row, .acc-row, .req-row { padding: 20px 0; border-top: 1px solid var(--line); } .booking-list > :first-child, .acc-list > :first-child, .req-list > :first-child { border-top: 0; padding-top: 0; } .booking-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; } .date-block { display: grid; place-content: center; text-align: center; height: 72px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .date-block b { font-family: var(--font-serif); font-size: 30px; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: lining-nums; } .date-block span { margin-top: 4px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); } .booking-top h3, .acc-row h3, .req-top h3 { font-size: 17px; } .booking-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 14px; color: var(--text-2); } .booking-meta .icon { width: 15px; height: 15px; color: var(--text-3); } .booking-meta .sep { width: 1px; height: 14px; margin: 0 6px; background: var(--line-strong); } .booking-service { margin: 6px 0 0; font-size: 14.5px; color: var(--text); font-weight: 550; } .booking-note { margin: 10px 0 0; padding: 10px 14px; border-left: 2px solid var(--gold-300); background: var(--paper); font-size: 14px; color: var(--text-2); } .booking-link { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14.5px; } .booking-link .icon { width: 16px; height: 16px; color: var(--gold-600); } .booking-link a { color: var(--gold-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .booking-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .acc-row { display: flex; align-items: center; gap: 16px; } .acc-row.is-off .acc-row-main, .req-row.is-off { opacity: .6; } .acc-row-main { flex: 1; min-width: 0; } .acc-row-main p { margin: 6px 0 0; } .acc-row-main h3 a { color: inherit; } .acc-row-price { flex: none; font-size: 15px; color: var(--text); } .acc-row-actions { display: flex; flex: none; gap: 6px; } .req-desc { margin: 10px 0 6px; color: var(--text-2); font-size: 15px; white-space: pre-line; } .req-admin { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; } .req-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; } .req-meta .icon { width: 14px; height: 14px; color: var(--text-3); } .req-meta .sep { width: 1px; height: 13px; margin: 0 6px; background: var(--line-strong); } .req-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-left: 2px solid var(--gold-300); background: var(--paper); color: var(--text-2); } .req-note .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gold-600); } .acc-intro { margin: 0 0 18px; max-width: 70ch; } /* Offers on a client's request */ .offers { display: grid; gap: 12px; margin-top: 16px; } .offers-label { margin: 0; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); } .offer { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .offer.is-chosen { border-color: var(--gold-400); box-shadow: inset 0 1px 0 var(--gold-300); } .offer-head { display: flex; align-items: center; gap: 14px; } .offer-head .avatar { width: 48px; height: 48px; font-size: 18px; flex: none; } .offer-who { flex: 1; min-width: 0; } .offer-who h4 { margin: 0; font-size: 16px; } .offer-who h4 a { color: inherit; } .offer-who h4 a:hover { color: var(--gold-700); } .offer-who p { margin: 3px 0 0; } .offer-price { display: grid; justify-items: end; gap: 4px; flex: none; font-size: 15px; } .offer-msg { margin: 12px 0 0; color: var(--text-2); font-size: 15px; white-space: pre-line; } .offer-foot { justify-content: space-between; margin-top: 12px; } .offer-foot > .small { display: inline-flex; align-items: center; gap: 6px; } .offer-foot .icon { width: 15px; height: 15px; color: var(--text-3); } .avatar-edit { display: flex; align-items: center; gap: 22px; } .avatar-edit .avatar-xl { width: 96px; height: 96px; font-size: 36px; border: 1px solid var(--line); } .avatar.avatar-square { border-radius: var(--radius); } .avatar-edit .hint { margin: 10px 0 0; font-size: 13px; color: var(--text-3); } .file-btn { position: relative; overflow: hidden; } .file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .file-btn:focus-within { outline: 2px solid var(--gold-600); outline-offset: 2px; } .field.is-disabled { opacity: .5; } .hours-grid { display: grid; margin-top: 18px; } .hours-day { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); } .hours-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 650; color: var(--text); text-transform: capitalize; } .hours-ranges { display: grid; gap: 8px; } .hours-range { display: flex; align-items: center; gap: 8px; } .hours-range .input { width: 124px; height: 42px; } .hours-range.is-invalid .input { border-color: var(--red-600); } .hours-range > span { color: var(--text-3); } .modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 8px; } .modal-card .form { gap: 16px; } .contact-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; } .contact-dl dt { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; } .contact-dl dd { margin: 0; color: var(--text); font-weight: 550; } .contact-dl a { color: var(--gold-700); } .rating-set { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; } .rating-set .chip-check span { gap: 6px; } .rating-set .icon { width: 15px; height: 15px; color: var(--gold-500); } @media (max-width: 980px) { .auth-grid { grid-template-columns: 1fr; } .auth-copy { position: static; padding-top: 0; } .auth-copy .auth-points { display: none; } .account-grid { grid-template-columns: 1fr; gap: 20px; } /* Every section visible at once: compact pills that wrap (a sideways scrolling row hid most of them past the screen edge). */ /* An even two-column grid; an odd last item spans the full row. Log out lives in the burger menu here. */ .account-nav { position: static; display: block; } .acc-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .acc-links > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .acc-link { width: 100%; min-height: 40px; padding: 0 12px; gap: 8px; white-space: nowrap; font-size: 13.5px; border: 1px solid var(--line-strong); background: var(--white); } .acc-link span { overflow: hidden; text-overflow: ellipsis; } .acc-link .icon { width: 16px; height: 16px; flex: none; } .acc-link[aria-current] { border-color: var(--navy-900); } .acc-logout { display: none; } } @media (min-width: 760px) and (max-width: 980px) { .acc-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } .acc-links > li:last-child:nth-child(odd) { grid-column: auto; } } @media (max-width: 400px) { .acc-link { padding: 0 10px; gap: 7px; font-size: 13px; } } @media (max-width: 640px) { .todo-list { grid-template-columns: 1fr; } .oauth-buttons { grid-template-columns: 1fr; } .booking-row { grid-template-columns: 1fr; gap: 12px; } .date-block { display: flex; justify-content: flex-start; gap: 8px; align-items: baseline; height: auto; padding: 0; border: 0; background: none; } .date-block b { font-size: 24px; } .acc-row { flex-wrap: wrap; } .acc-row-price { order: 3; } .acc-row-actions { order: 4; margin-left: auto; } .req-admin { grid-template-columns: 1fr; } .offer-head { flex-wrap: wrap; } .offer-price { justify-items: start; grid-auto-flow: column; align-items: center; gap: 10px; width: 100%; padding-left: 62px; } .hours-day { grid-template-columns: 1fr auto; } .hours-ranges { grid-column: 1 / -1; grid-row: 2; } .hours-ranges, .hours-range { min-width: 0; } .hours-range .input { width: 0; flex: 1 1 0; min-width: 0; padding-inline: 10px; } .hours-range .btn-icon { flex: none; } .avatar-edit { align-items: flex-start; } .acc-save .btn { width: 100%; } } /* ── Entrance animation (see intro-boot.js and app.js) ──────────────────── */ :root { --ease-lux: cubic-bezier(.19, 1, .22, 1); } /* The hairline appears on the first pixel of scroll and fades in quickly. */ .site-header { transition: background-color .2s var(--ease), border-color .2s var(--ease); } /* Headline words fade in and rise a little, each on its own. There is no mask: a word rising out of an overflow-hidden box looked like clipped letters mid-way (and Safari's clip could cut descenders). */ .iw { display: inline-block; vertical-align: top; } .iw-in, .il { display: inline-block; } /* Safari clips a filtered or transformed inline-block to its own box, which cut the italic p's descender and overhangs. The padding (cancelled by the margin, so layout is unchanged) gives the glyphs room, the blur ends at filter: none, and the animation is dropped once the entrance is over. */ .il { padding: .25em .14em .38em; margin: -.25em -.14em -.38em; } html.intro-done .iw-in, html.intro-done .il { animation: none; } html.intro :where(.hero-dark h1, .hero-dark .eyebrow, .hero-dark .lead, .search-panel, .search-suggest, .search-alt, .hs-ring, .hero-dark .breadcrumbs, .profile-head, .hero-strip, .header-inner > *, .nf-actions, .page-hero + section > *, .profile-hero + section > *) { opacity: 0; animation: intro-safe 0s 3s forwards; /* never leave content hidden */ } @keyframes intro-safe { to { opacity: 1; transform: none; filter: none; } } html.intro-go .hero-dark h1 { opacity: 1; animation: none; } html.intro-go .iw-in { animation: fade-in 1s var(--ease-fade) calc(var(--i) * 65ms + 250ms) both, word-rise 1.2s var(--ease-lux) calc(var(--i) * 65ms + 250ms) both; } html.intro-go .il { animation: fade-in 1.1s var(--ease-fade) calc(var(--i) * 45ms + 250ms) both, letter-in 1.1s var(--ease-lux) calc(var(--i) * 45ms + 250ms) both; } @keyframes word-rise { from { transform: translateY(.35em); } to { transform: none; } } @keyframes letter-in { from { transform: translateY(.3em); filter: blur(10px); } to { transform: none; filter: none; } } /* The entrance fades use two animations: opacity on an even curve (on the expo ease it was ~80% visible in the first tenth of a second, which read as a pop) and the rise on the long ease-out. */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise-up { from { transform: translateY(22px); } to { transform: none; } } @keyframes fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @keyframes rise-in { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } html.intro-go .header-inner > * { animation: fade-down 1s var(--ease-lux) .05s both; } html.intro-go .header-inner > :nth-child(2) { animation-delay: .15s; } html.intro-go .header-inner > :nth-child(3) { animation-delay: .25s; } html.intro-go .hero-dark .breadcrumbs { animation: fade-in 1s var(--ease-fade) .1s both, rise-up 1s var(--ease-lux) .1s both; } html.intro-go .hero-dark .eyebrow { animation: fade-in 1s var(--ease-fade) .15s both, rise-up 1s var(--ease-lux) .15s both; } html.intro-go .hero-dark .eyebrow::before, html.intro-go .hero-dark .eyebrow::after { transform-origin: left; animation: rule-draw 1.2s var(--ease-lux) .2s both; } html.intro-go .hero-dark .lead { animation: fade-in 1.2s var(--ease-fade) .75s both, rise-up 1.2s var(--ease-lux) .75s both; } html.intro-go .search-panel { animation: fade-in 1.2s var(--ease-fade) .9s both, rise-up 1.2s var(--ease-lux) .9s both; } html.intro-go .search-suggest { animation: fade-in 1.2s var(--ease-fade) 1.02s both, rise-up 1.2s var(--ease-lux) 1.02s both; } html.intro-go .search-alt { animation: fade-in 1.2s var(--ease-fade) 1.12s both, rise-up 1.2s var(--ease-lux) 1.12s both; } html.intro-go .hs-ring { animation: fade-in 2s var(--ease-fade) .4s both, rise-up 2s var(--ease-lux) .4s both; } /* The scale draws itself: stand first, then the beam, then the pans. */ html.intro .hero-scale .d { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: hs-draw 0s 3s forwards; } html.intro-go .hero-scale .d { animation: hs-draw 1.8s var(--ease-lux) .3s both; } html.intro-go .hs-beam > .d { animation-delay: .75s; } html.intro-go .hs-pan .d { animation-duration: 1.5s; animation-delay: .95s; } html.intro .hero-art .d { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: hs-draw 0s 3s forwards; } html.intro-go .hero-art .d { animation: hs-draw 1.5s var(--ease-lux) .3s both; } html.intro-go .hero-art .ha-2 .d { animation-delay: .6s; } html.intro-go .hero-art .ha-3 .d { animation-delay: .85s; } /* Glyphs (the About K, the FAQ question mark, the section sign): drawn as an outline, then filled in gold like the logo; the fill follows its group. */ .hero-art .ha-k { fill: var(--gold-400); stroke-width: .8; } html.intro .hero-art .ha-k { fill-opacity: 0; } html.intro-go .hero-art .d.ha-k { animation: hs-draw 1.5s var(--ease-lux) .3s both, ha-fill 1s var(--ease-out) 1.25s both; } html.intro-go .hero-art .ha-2 .d.ha-k { animation-delay: .6s, 1.55s; } html.intro-go .hero-art .ha-3 .d.ha-k { animation-delay: .85s, 1.8s; } @keyframes ha-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } } html.intro .ha-ring { opacity: 0; animation: intro-safe 0s 3s forwards; } html.intro-go .ha-ring { animation: fade-in 2s var(--ease-fade) .3s both, rise-up 2s var(--ease-lux) .3s both; } /* Hidden until its own stroke starts: a zero-length dash still paints the round line caps, which showed as stray dots before the drawing began. */ @keyframes hs-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } html.intro-go .profile-head { animation: fade-in 1.2s var(--ease-fade) .3s both, rise-up 1.2s var(--ease-lux) .3s both; } html.intro-go .hero-strip { animation: fade-in 1.2s var(--ease-fade) 1.2s both, rise-up 1.2s var(--ease-lux) 1.2s both; } html.intro-go .auth-points { animation: fade-in 1.2s var(--ease-fade) .85s both, rise-up 1.2s var(--ease-lux) .85s both; } html.intro-go .auth-card { animation: fade-in 1.2s var(--ease-fade) .5s both, rise-up 1.2s var(--ease-lux) .5s both; } html.intro-go .nf-actions { animation: fade-in 1.2s var(--ease-fade) .8s both, rise-up 1.2s var(--ease-lux) .8s both; } /* The content under an inner-page hero joins the entrance instead of just sitting there while the hero animates. */ html.intro-go :is(.page-hero, .profile-hero) + section > * { animation: fade-in 1.2s var(--ease-fade) .85s both, rise-up 1.2s var(--ease-lux) .85s both; } /* Once finished, drop the animations so hover transitions behave normally. */ html.intro-done :is(.header-inner > *, .search-panel, .hs-ring, .page-hero + section > *, .profile-hero + section > *) { animation: none; opacity: 1; } /* Moving between pages: the header is already there (see intro-boot.js). */ html.intro-seen .site-header .header-inner > * { animation: none; opacity: 1; } /* Request page: the sign-in note shown to visitors without an account */ .form-note[data-request-signin] { margin-bottom: 20px; } .form-note[data-request-signin] a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Narrow phones (<360px): the half-width cells got cramped, so the strip becomes one column with the medallion beside the text. */ @media (max-width: 359px) { .hero-strip-inner { grid-template-columns: 1fr; grid-auto-rows: auto; } .hero-strip-inner::before, .hero-strip-inner::after { display: none; } .hero-strip .hero-strip-item, .hero-strip .hero-strip-item:nth-child(n) { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 0; border-left: 0; text-align: left; } .hero-strip .hero-strip-item + .hero-strip-item { border-top: 1px solid var(--line-dark); } .hero-strip-item .ic { margin-top: 1px; } }