/* Fzt. Barkın — palette built around #BDB76B (dark khaki). Light: white page, dark olive grounds, one warm accent carrying every call to action. Dark: the same palette re-grounded on warm near-black olive, accent lifted so it still reads as the one bright thing on the page. No inline styles anywhere: the CSP sets style-src 'self', which blocks them. Every colour is one light-dark() token. `color-scheme` below is what makes that work, and it also hands native form controls, scrollbars and text selection the right appearance for free. Theme choice is an attribute on : data-theme="dark" / data-theme="light" — explicit, set by the header toggle no attribute — follow the OS (the default) check.js reads both halves of every token and measures contrast in both themes, so a colour cannot be changed here without being re-measured. */ :root { color-scheme: light dark; /* grounds and surfaces — page recedes, surface advances, sand/cream are bands */ --page: light-dark(#FFFFFF, #15180E); --surface: light-dark(#FFFFFF, #1F2317); --sand: light-dark(#F4F1E4, #1B1F12); --cream: light-dark(#FBFAF4, #1C2013); --line: light-dark(#E3DFCC, #333827); /* dark grounds — hero, topbar, page heads, quote cards. Dark in both themes. */ --olive: light-dark(#2E3320, #22271A); --olive-mid: light-dark(#3F4429, #2E3421); /* text */ --ink: light-dark(#23261C, #E9E7D9); /* body copy on page/surface */ --muted: light-dark(#63614F, #ABA895); /* secondary copy */ --bright: light-dark(#FFFFFF, #F5F3E7); /* headings on a dark ground */ --on-dark: light-dark(#EFEDE0, #E4E2D3); /* body copy on a dark ground */ /* accent ramp. --khaki-deep is the accent as *text*, so it inverts with the ground: deep on a white page, light on a dark one. */ --khaki: light-dark(#BDB76B, #C8C179); --khaki-dark: light-dark(#8F8A45, #A9A25B); --khaki-deep: light-dark(#5F5C2E, #CFC98B); --khaki-hover:light-dark(#ADA75C, #D3CC84); --on-accent: light-dark(#23261C, #1A1D0F); /* label on a khaki fill — dark in both */ /* state */ --field: light-dark(#8B8770, #75785F); --ok-bg: light-dark(#E4EAD4, #23301A); --ok-fg: light-dark(#344A24, #A8D189); --warn-bg: light-dark(#EFECDC, #2B2E1D); --foot-bg: light-dark(#22261A, #0E1006); --foot-fg: light-dark(#B9B7A4, #A9A794); --foot-line: light-dark(#3A3E2C, #2A2E20); /* header material — content stays faintly visible through it as it scrolls under */ --glass: light-dark(rgba(255, 255, 255, .78), rgba(21, 24, 14, .72)); --glass-hi: light-dark(rgba(255, 255, 255, .92), rgba(21, 24, 14, .90)); --focus-glow: light-dark(rgba(143, 138, 69, .16), rgba(201, 193, 121, .20)); --radius: 20px; --radius-sm: 12px; --wrap: 1180px; /* Layered depth rather than one flat drop shadow — the near-transparent top layer is what keeps an edge from looking stamped on. A dark page has no light to cast a soft shadow, so the same layers go much deeper there. */ --sh-near: light-dark(rgba(35, 38, 28, .05), rgba(0, 0, 0, .40)); --sh-far: light-dark(rgba(35, 38, 28, .09), rgba(0, 0, 0, .55)); --shadow-1: 0 1px 2px var(--sh-near), 0 2px 8px var(--sh-near); --shadow-2: 0 2px 4px var(--sh-near), 0 12px 32px var(--sh-far); --shadow-3: 0 4px 8px var(--sh-near), 0 24px 56px var(--sh-far); /* The built-in CSS easings are too weak to read as deliberate. These are the three curves the whole site uses — nothing gets an ad-hoc bezier. ease-out for anything entering or responding to a press (it moves at the instant the user is watching most closely), ease-in-out for something travelling across the screen, and a single curve with a little overshoot reserved for motion that follows a physical gesture. ease-in is never used: it withholds the first frames and reads as lag. */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-spring: cubic-bezier(.34, 1.32, .64, 1); /* The soft edge under the sticky header, in place of a hairline rule. */ --edge-fade: light-dark(rgba(35, 38, 28, .085), rgba(0, 0, 0, .38)); } /* What actually decides which half of every light-dark() is used. Bare :root above says "light dark" — follow the OS — and these two override it when the visitor has picked a side. Nothing else in the file knows the theme exists. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--ink); /* rem, not px: 17px is iOS body size but hard-coding it ignores the reader's own text-size setting. Every other size in this file is already relative. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2 { font-family: Fraunces, Georgia, "Times New Roman", serif; font-optical-sizing: auto; font-weight: 600; margin: 0 0 .38em; text-wrap: balance; } h3, h4 { font-weight: 650; line-height: 1.3; margin: 0 0 .5em; letter-spacing: -.008em; } /* Size, leading and tracking move together: the larger the type, the tighter both. */ h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.0; letter-spacing: -.032em; } h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.022em; } h3 { font-size: 1.09rem; } p { margin: 0 0 1.1em; text-wrap: pretty; } a { color: var(--khaki-deep); } img { max-width: 100%; } :focus-visible { outline: 3px solid var(--khaki-deep); outline-offset: 3px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap.narrow { max-width: 740px; } .mt-s { margin-top: 22px; } .mt-m { margin-top: 34px; } .mt-l { margin-top: 52px; } /* HTML text collapses \n to a space by default — this is what actually renders the line breaks already in site.config.json's "address" value. */ .addr { white-space: pre-line; } /* ---------- utility strip ---------- */ .topbar { background: var(--olive); color: var(--on-dark); font-size: .84rem; } .topbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 30px; align-items: center; min-height: 44px; } .topbar span { display: flex; align-items: center; gap: 7px; } .topbar b { color: var(--khaki); font-weight: 600; } .topbar > .wrap > a { color: var(--khaki); text-decoration: none; display: flex; align-items: center; min-height: 44px; } .topbar > .wrap > a:hover { text-decoration: underline; } .topbar .social { margin-left: auto; } /* ---------- social icons ---------- */ .social { display: flex; gap: 2px; } .social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--khaki); } .social a { transition: background-color .2s var(--ease-out), transform .16s var(--ease-out); } .social a:active { transform: scale(.9); } .social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ---------- header ---------- A material, not a solid bar: content passes under it and stays faintly visible, which is what gives the page a sense of depth as you scroll. */ header { position: sticky; top: 0; z-index: 20; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); transition: background-color .3s var(--ease-out), backdrop-filter .3s var(--ease-out); } @supports not (backdrop-filter: blur(1px)) { header { background: var(--page); } } /* A scroll edge, not a divider: the separation exists only where content is actually passing under the bar, and fades in as it starts to. A 1px rule is drawn whether or not there is anything on the other side of it to separate. */ header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; opacity: 0; background: linear-gradient(var(--edge-fade), transparent); transition: opacity .3s var(--ease-out); } /* A thicker material once it is doing work — a bigger separation reads as a heavier pane of glass, not just a darker one. */ header.scrolled { background: var(--glass-hi); backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); } header.scrolled::after { opacity: 1; } .bar { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; min-height: 82px; } .logo { font-family: Fraunces, Georgia, serif; font-size: 1.4rem; font-weight: 600; color: var(--ink); text-decoration: none; margin-right: auto; letter-spacing: -.02em; } .logo span { color: var(--khaki-dark); font-size: .82em; letter-spacing: 0; } nav { display: flex; flex-wrap: wrap; gap: 2px; } nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: var(--radius-sm); text-decoration: none; color: var(--muted); font-size: .94rem; font-weight: 550; transition: color .2s var(--ease-out), background-color .2s var(--ease-out), transform .16s var(--ease-out); } nav a:active { transform: scale(.96); } nav a[aria-current="page"] { color: var(--khaki-deep); background: transparent; } /* The rule is always in the DOM and scales out from the middle, so moving between tabs reads as one mark travelling rather than two marks blinking. */ nav a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--khaki-dark); transform: scaleX(0); transition: transform .3s var(--ease-out); } nav a[aria-current="page"]::after { transform: scaleX(1); } /* Hidden above the mobile breakpoint — nav renders inline there, see the media query below for the collapsed/expanded panel behaviour. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; } .nav-toggle { transition: background-color .2s var(--ease-out), transform .16s var(--ease-out); } .nav-toggle:active { transform: scale(.92); } .nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; } /* ---------- segmented controls (language, theme) ---------- One control, two instances. A track with a single travelling pill rather than a filled segment — which is what makes it read as one control with a position, instead of a row of buttons that happen to sit together. The pill's position comes from :has() reading the pressed button, so the slide needs no JavaScript and cannot drift out of sync with the state the buttons already announce. */ .lang, .theme { position: relative; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--sand); } .lang::before, .theme::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--khaki); box-shadow: var(--shadow-1); } .lang::before { width: calc((100% - 6px) / 2); } .theme::before { width: calc((100% - 6px) / 3); } .lang:has(button:nth-child(2)[aria-pressed="true"])::before, .theme:has(button:nth-child(2)[aria-pressed="true"])::before { transform: translateX(100%); } .theme:has(button:nth-child(3)[aria-pressed="true"])::before { transform: translateX(200%); } /* The pill only travels once the page has settled. Both preferences are restored from localStorage after load, so without this it slides across from the markup default on every single page view. */ .ready .lang::before, .ready .theme::before { transition: transform .34s var(--ease-out); } .lang button, .theme button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; min-height: 44px; padding: 0; font: inherit; color: var(--muted); transition: color .2s var(--ease-out), transform .16s var(--ease-out); } .lang button { min-width: 46px; padding: 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; } .theme button { width: 42px; } .lang button[aria-pressed="true"], .theme button[aria-pressed="true"] { color: var(--on-accent); } .lang button:active, .theme button:active { transform: scale(.92); } .theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* the filled half of the auto glyph — the rest of the site's icons are strokes */ .theme .half { fill: currentColor; stroke: none; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 30px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: .96rem; border: 1.5px solid transparent; cursor: pointer; transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .16s var(--ease-out), border-color .2s var(--ease-out); } .btn:active { transform: scale(.97); } .btn-primary { background: var(--khaki); color: var(--on-accent); box-shadow: var(--shadow-1); } .btn-primary:active { box-shadow: var(--shadow-1); } .btn-ghost { border-color: var(--khaki-dark); color: var(--khaki-deep); background: transparent; } .btn-on-dark { border-color: rgba(189, 183, 107, .55); color: var(--khaki); background: rgba(189, 183, 107, .08); } .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .actions.center { justify-content: center; } /* ---------- pages / bands ---------- */ .page { display: none; } /* Switching tabs replaces the whole document body in one frame. A short fade is the smallest thing that stops that reading as a broken page — the movement is left to the section reveals below, so nothing shifts under the header while the dark page-head band is still arriving. Each route lands on a different element, so there is no running animation to interrupt and a keyframe is the honest tool. */ .page.active { display: block; animation: page-in .3s var(--ease-out) both; } @keyframes page-in { from { opacity: 0; } } .band { padding: clamp(64px, 9vw, 116px) 0; } .band-alt { background: var(--sand); } .band-dark { background: var(--olive); color: var(--on-dark); } .band-dark h2, .band-dark h3 { color: var(--bright); } .section-head { max-width: 680px; margin: 0 0 52px; } #home .section-head, .cta .section-head { margin-inline: auto; text-align: center; } .section-head p { color: var(--muted); margin-bottom: 0; font-size: 1.06rem; } .band-dark .section-head p { color: var(--on-dark); } /* The eyebrow carries a short rule — a hairline reads as considered where a bare uppercase label reads as unstyled. */ .eyebrow { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .15em; font-size: .76rem; font-weight: 700; color: var(--khaki-deep); margin-bottom: .9em; } .eyebrow::after { content: ""; flex: 0 0 34px; height: 1px; background: var(--khaki-dark); opacity: .55; } #home .eyebrow, .cta .eyebrow { justify-content: center; } #home .eyebrow::before, .cta .eyebrow::before { content: ""; flex: 0 0 34px; height: 1px; background: var(--khaki-dark); opacity: .55; } .band-dark .eyebrow { color: var(--khaki); } .band-dark .eyebrow::after, .band-dark .eyebrow::before { background: var(--khaki); } /* ---------- hero ---------- */ .hero { position: relative; isolation: isolate; background: var(--olive); color: var(--on-dark); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Scrim is opaque enough that the text contrast holds over any photograph — worst case (a white frame beneath) is measured in check.js. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(35, 38, 28, .96) 0%, rgba(35, 38, 28, .93) 48%, rgba(46, 51, 32, .90) 100%); } .hero .wrap { padding-top: clamp(88px, 13vw, 168px); padding-bottom: clamp(88px, 13vw, 168px); max-width: 1180px; } .hero h1 { color: var(--bright); max-width: 15ch; } .hero .lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); max-width: 54ch; margin-bottom: 0; color: var(--on-dark); } /* ---------- page header ---------- Every tab opens with the same gesture as the landing hero, at a smaller scale, so the tabs read as one site rather than a hero page plus five documents. */ .page-head { position: relative; isolation: isolate; background: var(--olive); color: var(--on-dark); overflow: hidden; } .page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 150% at 12% -20%, rgba(189, 183, 107, .16) 0%, rgba(189, 183, 107, 0) 60%); } .page-head .wrap { padding-top: clamp(56px, 7vw, 92px); padding-bottom: clamp(52px, 6.5vw, 84px); } .page-head .section-head { margin-bottom: 0; max-width: 720px; } .page-head h1 { color: var(--bright); margin-bottom: .3em; } .page-head .section-head p { color: var(--on-dark); } .page-head .eyebrow { color: var(--khaki); } .page-head .eyebrow::after, .page-head .eyebrow::before { background: var(--khaki); } /* credentials strip — real facts, not invented ratings */ .facts { display: flex; flex-wrap: wrap; gap: 24px 60px; align-items: baseline; justify-content: center; text-align: center; } .fact { min-width: 150px; } .fact b { display: block; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--khaki); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .fact span { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); margin-top: 12px; } /* ---------- value props ---------- */ .props { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .prop { text-align: center; padding: 0 10px; } .prop svg { width: 30px; height: 30px; stroke: var(--khaki-dark); fill: none; stroke-width: 1.6; margin-bottom: 16px; } .prop p { color: var(--muted); font-size: .96rem; margin-bottom: 0; } /* ---------- satisfaction ---------- */ .rating { display: flex; flex-wrap: wrap; gap: 20px 64px; align-items: baseline; justify-content: center; text-align: center; } .score { font-family: Fraunces, Georgia, serif; font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; color: var(--khaki); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .score small { display: block; font-family: inherit; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark); margin-top: 12px; letter-spacing: .13em; } .quotes { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 56px; } .quote { background: var(--olive-mid); border: 1px solid rgba(189, 183, 107, .18); border-left: 3px solid var(--khaki); border-radius: 0 var(--radius) var(--radius) 0; padding: 28px 30px; } .quote p { font-size: .97rem; } .quote cite { font-style: normal; font-weight: 650; color: var(--khaki); font-size: .88rem; } /* ---------- tiles ---------- */ .tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 28px 30px; box-shadow: var(--shadow-1); transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .2s var(--ease-out); } .tile p { font-size: .94rem; color: var(--muted); margin-bottom: 0; } .band-alt .tile { background: var(--surface); } /* ---------- editorial service rows ---------- Nine boxes read as a dump; nine rows on hairlines read as a list someone wrote. Same data as the home tiles, different presentation. */ .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: r; } .row { display: grid; grid-template-columns: 3.5rem minmax(180px, 1fr) 1.5fr; gap: 4px 30px; padding: 30px 20px 30px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background-color .2s var(--ease-out); } .row > *, .row::before { transition: transform .25s var(--ease-out); } .row::before { counter-increment: r; content: counter(r, decimal-leading-zero); font-family: Fraunces, Georgia, serif; font-size: .95rem; color: var(--khaki-dark); font-variant-numeric: tabular-nums; padding-left: 6px; } .row h3 { margin: 0; font-size: 1.22rem; font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.012em; } .row p { margin: 0; color: var(--muted); font-size: .96rem; } @media (max-width: 780px) { .row { grid-template-columns: 3rem 1fr; gap: 6px 16px; } .row p { grid-column: 2; } /* Nav and language collapse behind the toggle instead of wrapping across several rows and pushing all page content below the fold — logo and Randevu Al share row one, everything else lives in the dropdown panel, shown together via .bar.nav-open. */ .bar { gap: 10px 14px; } .nav-toggle { display: flex; order: 1; margin-left: auto; } .bar > .btn-primary { order: 2; padding: 0 20px; } #site-nav, .lang, .theme { display: none; } .bar.nav-open #site-nav, .bar.nav-open .lang, .bar.nav-open .theme { display: flex; } /* The bar's height still snaps — the panel is laid out in flow, not overlaid — so the contents cascade in to give that jump something to resolve into. Opening is the deliberate half; closing is instant, as a dismissal should be. */ .bar.nav-open #site-nav a, .bar.nav-open .lang, .bar.nav-open .theme { animation: panel-in .3s var(--ease-out) both; } .bar.nav-open #site-nav a:nth-child(2) { animation-delay: .04s; } .bar.nav-open #site-nav a:nth-child(3) { animation-delay: .08s; } .bar.nav-open #site-nav a:nth-child(4) { animation-delay: .12s; } .bar.nav-open #site-nav a:nth-child(5) { animation-delay: .16s; } .bar.nav-open .lang { animation-delay: .19s; } .bar.nav-open .theme { animation-delay: .21s; } #site-nav { order: 3; flex-direction: column; flex-wrap: nowrap; gap: 2px; width: 100%; margin-top: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* A full-width segmented row rather than the small inline pill, so it reads as a setting in the panel instead of a stray control. */ /* Both preferences share one row under the nav's divider — they are the same kind of thing, and stacking them full-width would push the panel past the fold. */ .lang, .theme { order: 4; margin-top: 16px; margin-bottom: 4px; } .lang { flex: 1 1 auto; } .lang button { flex: 1; } .theme { order: 5; flex: 0 0 auto; } } /* Between the mobile breakpoint and full width the bar now carries six children instead of five. Tighten the spacing across that band rather than let the "Randevu Al" call to action drop onto a second row — freeing row one for it is the whole point of the hamburger below 780px. */ @media (min-width: 781px) and (max-width: 1150px) { .bar { gap: 10px 12px; } nav { gap: 0; } nav a { padding: 0 10px; font-size: .9rem; } nav a::after { left: 10px; right: 10px; } .bar > .btn-primary { padding: 0 20px; } .lang button { min-width: 38px; padding: 0 8px; } .theme button { width: 38px; } } /* ---------- continuous corners ---------- A border-radius arc stays straight and then bends hard; a squircle curves through the whole corner, which is the shape Apple's hardware, icons and windows use and the reason their panels read as softer at the same radius. Progressive enhancement: without support these stay ordinary rounded rectangles. */ @supports (corner-shape: squircle) { /* Rounded rectangles only. A squircle at a capsule's radius is a superellipse, not a stadium — applying it to the pills would square them off. */ .tile, .post, .contact-card, .hours, .map-frame, .quote, .photo, .gallery figure, .nav-toggle, nav a, input, textarea, #form-status:not(:empty), .ph { corner-shape: squircle; } } /* ---------- pointer-only affordances ---------- Every hover state lives here. Touch devices synthesise :hover on tap, so a hover effect outside this query stays stuck on whatever was last tapped. */ @media (hover: hover) and (pointer: fine) { .social a:hover { background: rgba(189, 183, 107, .18); } nav a:hover { background: var(--sand); color: var(--ink); } .nav-toggle:hover { background: var(--sand); } .btn-primary:hover { background: var(--khaki-hover); box-shadow: var(--shadow-2); transform: translateY(-1px); } .btn-ghost:hover { background: var(--sand); } .btn-on-dark:hover { background: rgba(189, 183, 107, .2); border-color: var(--khaki); } .tile:hover { border-color: rgba(189, 183, 107, .7); box-shadow: var(--shadow-2); transform: translateY(-3px); } .post:hover { border-color: rgba(189, 183, 107, .7); box-shadow: var(--shadow-2); transform: translateY(-3px); } .contact-card:hover { border-color: var(--khaki); box-shadow: var(--shadow-2); transform: translateY(-2px); } .row:hover { background: var(--cream); } .row:hover > *, .row:hover::before { transform: translateX(12px); } .gallery figure:hover .photo { transform: scale(1.04); } /* :active still wins — a press is an answer to the pointer, not a hover state */ .btn:hover:active { transform: scale(.97); } .tile:hover:active, .post:hover:active { transform: translateY(-3px) scale(.99); } .contact-card:hover:active { transform: translateY(-2px) scale(.985); } } /* ---------- open / closed status ---------- */ .status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; font-size: .86rem; font-weight: 650; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .status.open { background: var(--ok-bg); color: var(--ok-fg); } .status.closed { background: var(--warn-bg); color: var(--khaki-deep); } /* ---------- map ---------- */ .map-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--line); background: var(--sand); } .map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- contact cards ---------- */ .contact-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .contact-card { display: flex; align-items: center; gap: 15px; padding: 19px 21px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: inherit; background: var(--surface); box-shadow: var(--shadow-1); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .16s var(--ease-out); } .contact-card:active { transform: scale(.985); } .contact-card svg { width: 22px; height: 22px; stroke: var(--khaki-dark); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .contact-card b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--khaki-deep); margin-bottom: 1px; } .contact-card span { font-size: .95rem; } /* ---------- numbered process ---------- */ .steps { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); counter-reset: step; } .step { position: relative; padding-top: 30px; border-top: 2px solid var(--line); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: -19px; left: 0; background: var(--page); padding-right: 14px; font-family: Fraunces, Georgia, serif; font-size: 1.6rem; color: var(--khaki-dark); line-height: 1; font-variant-numeric: tabular-nums; } .band-alt .step::before { background: var(--sand); } .step p { font-size: .94rem; color: var(--muted); margin-bottom: 0; } .steps-stack { grid-template-columns: 1fr; gap: 26px; } /* ---------- posts ---------- */ .posts { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .posts-feature .post:first-child { grid-column: 1 / -1; padding: clamp(30px, 4vw, 48px); } .posts-feature .post:first-child h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.1; max-width: 20ch; } .posts-feature .post:first-child p:last-child { font-size: 1.04rem; max-width: 58ch; } .post { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; height: 100%; box-shadow: var(--shadow-1); transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .16s var(--ease-out); } .post:active { transform: scale(.99); } .post p:last-child { margin-bottom: 0; color: var(--muted); font-size: .94rem; } .meta { font-size: .78rem; color: var(--khaki-deep); text-transform: uppercase; letter-spacing: .1em; font-weight: 650; } /* ---------- placeholder marker ---------- */ .ph { border: 1px dashed var(--khaki-dark); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 34px; max-width: 680px; font-size: .85rem; color: var(--khaki-deep); background: var(--sand); } #home .ph, .cta .ph { margin-inline: auto; text-align: center; } .band-dark .ph { background: var(--olive-mid); color: var(--khaki); border-color: var(--khaki-dark); } /* ---------- opening hours ---------- */ .hours { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); } .hours div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 22px; border-bottom: 1px solid var(--line); font-size: .96rem; } .hours div:last-child { border-bottom: 0; } .hours div:nth-child(odd) { background: var(--cream); } .hours dt { font-weight: 650; margin: 0; } .hours dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; } .hours .closed { color: var(--khaki-deep); font-weight: 600; } .hours .is-today { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--khaki-dark); } .hours .is-today dt { color: var(--khaki-deep); } .hours .today-tag { margin-left: 9px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--khaki-deep); vertical-align: .12em; } /* ---------- photos ---------- */ .photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--sand); box-shadow: var(--shadow-2); } .photo-wide { aspect-ratio: 16 / 9; } .photo-portrait { aspect-ratio: 3 / 4; } .gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 60px; } .gallery + .tiles, .gallery-after { margin-top: 60px; } .gallery figure { overflow: hidden; border-radius: var(--radius); } .gallery .photo { transition: transform .5s var(--ease-out); border-radius: var(--radius); } figure { margin: 0; } figcaption { font-size: .84rem; color: var(--muted); margin-top: 10px; text-align: center; } /* ---------- prose wrapping around photos ---------- */ .flow { max-width: 74ch; margin-inline: auto; } /* centred in the wrap, not stranded left */ .flow::after { content: ""; display: block; clear: both; } .flow p { line-height: 1.78; } .flow figure { width: min(320px, 42%); margin-bottom: 24px; } .figure-right { float: right; margin-left: 38px; shape-outside: inset(0 round var(--radius)); shape-margin: 20px; } .figure-left { float: left; margin-right: 38px; shape-outside: inset(0 round var(--radius)); shape-margin: 20px; } @media (max-width: 620px) { /* below this width a floated photo squeezes the text into unreadable ribbons */ .flow figure { float: none; width: 100%; margin: 28px 0; } } /* ---------- contact / forms ---------- */ .split { display: grid; gap: 52px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; } .info ul { padding: 0; margin: 0; } .info li { margin-bottom: 22px; list-style: none; } .info strong { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--khaki-deep); margin-bottom: 3px; } .tiles-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } form { display: grid; gap: 17px; } @media (min-width: 620px) { form { grid-template-columns: 1fr 1fr; } form > label:nth-child(n+4), form > button, form > #form-status { grid-column: 1 / -1; } } label { font-size: .85rem; font-weight: 650; color: var(--ink); display: grid; gap: 7px; } input, textarea { font: inherit; padding: 13px 15px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); width: 100%; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); } input:focus, textarea:focus { border-color: var(--khaki-deep); box-shadow: 0 0 0 4px var(--focus-glow); } textarea { min-height: 140px; resize: vertical; } button[type="submit"] { justify-self: start; } .hp { display: none; } /* honeypot — real visitors never see this field */ /* Status is the one thing on this page the visitor is waiting for, so it arrives rather than appearing — the selector flips when app.js writes the text, and the transition rides that change with no class to keep in sync. */ #form-status { opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); } #form-status:not(:empty) { opacity: 1; transform: none; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--sand); color: var(--ink); font-size: .9rem; } /* ---------- closing CTA ---------- */ .cta { text-align: center; } .cta .actions { justify-content: center; } /* ---------- footer ---------- */ footer { background: var(--foot-bg); color: var(--foot-fg); padding: 68px 0 36px; font-size: .92rem; } footer a { color: var(--khaki); } .foot-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-bottom: 40px; } .foot-grid h4 { color: var(--bright); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; } .foot-grid ul { padding: 0; margin: 0; list-style: none; } .foot-grid li { margin-bottom: 8px; } .foot-grid a { text-decoration: none; } .foot-grid a:hover { text-decoration: underline; } footer .social { margin-top: 12px; } .foot-bottom { border-top: 1px solid var(--foot-line); padding-top: 24px; font-size: .85rem; } /* ---------- display preferences ---------- Reduced motion is handled below. These two are the other half of the same contract: a visitor can ask for less translucency or more contrast, and a material-heavy design has to answer both or it simply ignores them. */ @media (prefers-reduced-transparency: reduce) { header, header.scrolled { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; } header.scrolled::after { opacity: 1; } } @media (prefers-contrast: more) { /* Only the two tokens that are deliberately quiet. Everything else already clears AAA and would only get louder for no reason. */ :root { --muted: light-dark(#4A4838, #C7C5B2); --line: light-dark(#B4AF99, #5A5F4A); } header, header.scrolled { background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; } header::after { display: none; } header.scrolled { border-bottom: 2px solid var(--line); } .tile, .post, .contact-card, .hours, .map-frame, .lang, .theme, input, textarea { border-width: 2px; } .btn { border-width: 2px; } .btn-primary { border-color: var(--khaki-deep); } } /* ---------- motion ---------- Reveal is opt-in from JS (html.js-reveal), so with scripting off nothing is hidden. One brief transition per element, never on repeated interactions. */ .js-reveal .reveal { opacity: 0; transform: translateY(14px); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } /* A grid row crosses the threshold together; landing all at once reads mechanical. The delay is per position in the grid, capped so a long list never feels slow. */ .js-reveal .reveal.is-visible:nth-child(2) { transition-delay: .05s; } .js-reveal .reveal.is-visible:nth-child(3) { transition-delay: .1s; } .js-reveal .reveal.is-visible:nth-child(4) { transition-delay: .15s; } .js-reveal .reveal.is-visible:nth-child(n+5) { transition-delay: .2s; } @keyframes panel-in { from { opacity: 0; transform: translateY(-8px); } } /* Apple: never snap the whole page's brightness. The class is on for the ~300ms around a theme flip only, so ordinary hovers and reveals keep their own timings and nothing pays for a document-wide transition the rest of the time. */ .theming, .theming *, .theming *::before, .theming *::after { transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), fill .3s var(--ease-out), stroke .3s var(--ease-out), box-shadow .3s var(--ease-out) !important; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal, .js-reveal .reveal.is-visible { opacity: 1; transform: none; transition: none; } *, *::before, *::after { transition: none !important; animation: none !important; } .gallery figure:hover .photo { transform: none; } }