/* ========================================================================== MAROUSI VET CLINIC — styles.css -------------------------------------------------------------------------- Mobile-first. The base stylesheet targets a 360px viewport with no media query at all; every query below is min-width. There is deliberately not a single max-width query in this file — tools/check.js fails the build if one ever appears. -------------------------------------------------------------------------- 1 Tokens 10 Hours, info, map 2 Reset & base 11 Footer 3 Utilities 12 Fixed chrome 4 Buttons 13 Reveal 5 Header 14 >=768px 6 Mobile sheet 15 >=1180px 7 Hero 16 >=1320px 8 Cards & grids 17 Print 9 Bands ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ --bg: #F7F4EC; --surface: #FFFFFF; --surface-2: #F0EBDF; --ink: #1C2420; --muted: #5E6B63; --line: #DFD8C8; --primary: #234A3C; --primary-ink: #F7F4EC; --primary-2: #1A3A2E; /* primary, hovered */ --accent: #C97B3F; /* --accent is 2.9:1 on the cream — decorative only (dots, rules, borders, edges). Anything that is READ uses --accent-ink, which clears 4.5:1 on --bg (4.90), --surface (5.38) and --surface-2 (4.53). */ --accent-ink: #9C5A25; --hover-wash: rgba(35,74,60,.08); --shadow: 0 1px 2px rgba(28,36,32,.06), 0 8px 24px rgba(28,36,32,.07); --ok: #2F6B4F; --err: #A2422C; --serif: "Vollkorn", Georgia, "Times New Roman", serif; --sans: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 10px; --radius-s: 6px; --gutter: 20px; --header-h: 62px; --section: clamp(2.8rem, 8vw, 5rem); --maxw: 1180px; color-scheme: light; } /* Dark. --primary FLIPS to amber and --primary-ink to near-black, so every primary button, CTA band, emergency block and form submit inverts with it. Nothing below this point hardcodes a button colour, which is what makes a green-on-dark-green button impossible rather than merely unlikely. */ [data-theme="dark"]{ --bg: #0E1A16; --surface: #14231D; --surface-2: #1B2E27; --ink: #EDE7DA; --muted: #9AAAA1; --line: #24382F; --primary: #C97B3F; --primary-ink: #0E1A16; --primary-2: #D98D50; --accent: #E0A46B; --accent-ink: #E0A46B; --hover-wash: rgba(201,123,63,.12); --shadow: 0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.34); --ok: #7FBF9B; --err: #E08A72; color-scheme: dark; } /* First visit, no stored choice, no JS: follow the OS. The inline head script sets an explicit data-theme before paint, so this block only ever decides anything when JavaScript has not run. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0E1A16; --surface:#14231D; --surface-2:#1B2E27; --ink:#EDE7DA; --muted:#9AAAA1; --line:#24382F; --primary:#C97B3F; --primary-ink:#0E1A16; --primary-2:#D98D50; --accent:#E0A46B; --accent-ink:#E0A46B; --hover-wash:rgba(201,123,63,.12); --shadow:0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.34); --ok:#7FBF9B; --err:#E08A72; color-scheme: dark; } } /* ---------- 2. Reset & base ---------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; /* 17px floor */ font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.18; letter-spacing:-.01em; margin:0 0 .6em; text-wrap:balance; } h1{font-size:clamp(1.85rem, 6.4vw, 3rem)} h2{font-size:clamp(1.5rem, 5.2vw, 2.25rem)} h3{font-size:1.25rem} /* 20px — the Vollkorn floor */ h4{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:0} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} a{color:var(--accent-ink);text-underline-offset:.18em} a:hover{color:var(--ink)} img,svg,iframe{max-width:100%;display:block} ul,ol{margin:0 0 1.2em;padding-left:1.25rem} li{margin:0 0 .45em} hr{border:0;border-top:1px solid var(--line);margin:2rem 0} strong{font-weight:600} small{font-size:.875rem} /* 14px floor */ :focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--radius-s); } ::selection{background:var(--hover-wash)} .skip-link{ position:absolute;left:var(--gutter);top:-100px;z-index:200; background:var(--primary);color:var(--primary-ink); padding:.7rem 1.1rem;border-radius:var(--radius); font-weight:600;font-size:.9375rem;text-decoration:none; transition:top .15s; } .skip-link:focus{top:10px;color:var(--primary-ink)} /* ---------- 3. Utilities -------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section)} .section--tight{padding-block:calc(var(--section) * .62)} .section--alt{background:var(--surface-2)} .lede{font-size:1.15rem;line-height:1.6;color:var(--muted)} .muted{color:var(--muted)} .eyebrow{ font-family:var(--sans);font-weight:600;font-size:.875rem; letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink); margin:0 0 .7rem; } .center{text-align:center} .nowrap{white-space:nowrap} .measure{max-width:66ch} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Aspect-ratio boxes. The suffix must match the file's own ratio or the render crops — tools/check.js enforces that pairing. */ .ratio{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface-2)} .ratio > img,.ratio > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} .ratio--2-1{padding-top:50%} .ratio--4-3{padding-top:75%} .ratio--3-4{padding-top:133.3333%} .rule{ width:56px;height:3px;border:0;border-radius:2px; background:var(--accent);margin:0 0 1.4rem; } .center .rule{margin-inline:auto} .notice{ background:var(--surface-2);border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius);padding:1rem 1.1rem; font-size:1rem;color:var(--muted); } .notice strong{color:var(--ink)} .crumbs{font-size:.9375rem;color:var(--muted);padding-block:1rem 0} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .55rem} .crumbs li{margin:0;display:flex;align-items:center;gap:.55rem} .crumbs li + li::before{content:"\203A";color:var(--line);font-size:1.05rem;line-height:1} /* Breadcrumb links are navigation, so they carry the same 44px target as the rest of the nav. Inline links inside a sentence keep their natural height — that is the one documented exception to the rule. */ .crumbs a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px} .crumbs a:hover{color:var(--accent-ink)} .crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px} .crumbs [aria-current]{color:var(--ink);font-weight:600} /* ---------- 4. Buttons ---------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:48px;padding:.75rem 1.35rem; border:1px solid transparent;border-radius:var(--radius); font-family:var(--sans);font-weight:600;font-size:.875rem; letter-spacing:.05em;text-transform:uppercase; text-decoration:none;white-space:nowrap;cursor:pointer; transition:background-color .15s, color .15s, border-color .15s; } .btn--primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)} .btn--primary:hover{background:var(--primary-2);border-color:var(--primary-2);color:var(--primary-ink)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{background:var(--hover-wash);color:var(--ink);border-color:var(--accent)} .btn[disabled]{opacity:.6;cursor:not-allowed} .btn-row{display:flex;flex-direction:column;gap:.7rem} .btn-row .btn{width:100%} .link-more{ display:inline-flex;align-items:center;gap:.4rem;min-height:44px; font-weight:600;font-size:.9375rem;color:var(--accent-ink);text-decoration:none; } .link-more:hover{color:var(--ink)} .link-more::after{content:"\2192";transition:transform .15s} .link-more:hover::after{transform:translateX(3px)} /* ---------- 5. Header ----------------------------------------------------- */ .header{ position:sticky;top:0;z-index:90; background:var(--surface); border-bottom:1px solid var(--line); } .header__inner{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; min-height:var(--header-h); } .logo{ display:block;color:inherit;text-decoration:none; white-space:nowrap;padding-block:.45rem; } .logo:hover{color:inherit} .logo__name{ display:block;font-family:var(--serif);font-weight:600; font-size:1.2rem;line-height:1.08;letter-spacing:-.01em;color:var(--ink); transition:color .15s; } .logo__sub{ display:block;font-family:var(--sans);font-weight:600; font-size:.875rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);line-height:1.4;margin-top:.2rem; } /* At the 14px floor the full kicker is too wide for a 360px header next to three action buttons, so the locality is added back from 768px up. */ .logo__at{display:none} .logo:hover .logo__name{color:var(--accent-ink)} .nav{display:none} /* Kept out of the desktop block so it holds at every width, not only where the nav happens to be visible. */ .nav__link,.dropdown a,.lang-link{white-space:nowrap} .header__actions{display:flex;align-items:center;gap:.25rem} .header__cta{display:none} /* The phone is in the header at every width, as the brief requires: a 44px click-to-call icon on mobile, expanding to icon + number at >=1320px where there is finally room for it beside the full nav. */ .header__tel{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; width:44px;height:44px;flex:none;border-radius:var(--radius); color:var(--muted);text-decoration:none;white-space:nowrap; transition:background-color .15s, color .15s; } .header__tel:hover{background:var(--hover-wash);color:var(--ink)} .header__tel svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .header__tel span{display:none} /* EN lives in the drawer until the desktop header appears. */ .lang-link{display:none} .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:none; border:1px solid transparent;border-radius:var(--radius); background:transparent;color:var(--muted);cursor:pointer;text-decoration:none; transition:background-color .15s, color .15s; } .icon-btn:hover{background:var(--hover-wash);color:var(--ink)} .icon-btn svg{ width:21px;height:21px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .theme-toggle .i-moon{display:none} [data-theme="dark"] .theme-toggle .i-sun{display:none} [data-theme="dark"] .theme-toggle .i-moon{display:block} .lang-link{ align-items:center;justify-content:center; min-width:44px;height:44px;padding-inline:.5rem; border-radius:var(--radius);color:var(--muted);text-decoration:none; font-weight:600;font-size:.875rem;letter-spacing:.05em;white-space:nowrap; transition:background-color .15s, color .15s; } .lang-link:hover{background:var(--hover-wash);color:var(--ink)} .hamburger{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:none;border:0;background:transparent; border-radius:var(--radius);color:var(--ink);cursor:pointer;text-decoration:none; } .hamburger:hover{background:var(--hover-wash)} .hamburger svg{width:23px;height:23px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round} /* ---------- 6. Mobile sheet ----------------------------------------------- */ .sheet{ position:fixed;inset:0;z-index:95; background:var(--bg); padding:0 var(--gutter) calc(2rem + env(safe-area-inset-bottom)); overflow-y:auto;overscroll-behavior:contain; visibility:hidden;opacity:0;transition:opacity .2s, visibility .2s; } .sheet[data-open="true"]{visibility:visible;opacity:1} /* No-JS fallback: the hamburger is a real link to #sheet, so :target opens the menu. Scoped to .no-js so it can never fight the scripted state. */ .no-js .sheet:target{visibility:visible;opacity:1} .sheet__top{ display:flex;align-items:center;justify-content:space-between; min-height:var(--header-h);border-bottom:1px solid var(--line); margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter); position:sticky;top:0;background:var(--bg);z-index:2; } .sheet__nav{list-style:none;margin:0;padding:0} .sheet__nav > li{margin:0;border-bottom:1px solid var(--line)} .sheet__nav a,.sheet__nav summary{ display:flex;align-items:center;justify-content:space-between;gap:.5rem; min-height:56px;padding:.85rem 0; font-weight:600;font-size:1.0625rem;color:var(--ink);text-decoration:none; } .sheet__nav a[aria-current="page"]{color:var(--accent-ink)} .sheet__nav summary{cursor:pointer;list-style:none} .sheet__nav summary::-webkit-details-marker{display:none} .sheet__nav .chev{ width:15px;height:15px;flex:none;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s; } .sheet__nav details[open] summary .chev{transform:rotate(180deg)} .sheet__sub{list-style:none;margin:0 0 .8rem;padding:0} .sheet__sub li{border:0;margin:0} .sheet__sub a{ min-height:48px;padding:.5rem 0 .5rem 1.1rem; font-weight:400;font-size:1rem;color:var(--muted); } .sheet__sub a:hover{color:var(--accent-ink)} .sheet__foot{margin-top:1.6rem;display:grid;gap:.7rem} .sheet__meta{margin-top:1.4rem;font-size:.9375rem;color:var(--muted)} .sheet__meta a{color:var(--ink);font-weight:600;text-decoration:none} /* ---------- 7. Hero ------------------------------------------------------- */ /* Mobile: photo, open-now status, headline, subhead, then the CTAs. The photo leads in both DOM and layout. Inside .hero__inner the status is lifted above the h1 with `order` alone, so the DOM — and therefore the screen-reader reading order — still starts with the heading. The status is plain text, not focusable, so tab order is unaffected by the reorder. From 768px the desktop overlay puts the status back under the buttons. */ .hero{position:relative;display:flex;flex-direction:column;background:var(--surface-2)} .hero__media{position:relative;width:100%;border-radius:0} .hero__inner{ display:flex;flex-direction:column; padding:1.4rem var(--gutter) 2rem;width:100%; } .hero h1{margin-bottom:.5rem} .hero__sub{font-size:1.15rem;color:var(--muted);margin-bottom:1.4rem;max-width:52ch} .hero .status{order:-1;align-self:flex-start;margin-bottom:1.1rem} .status{ display:inline-flex;align-items:center;gap:.55rem; font-size:1rem;font-weight:600;color:var(--ink); background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:.5rem .85rem;min-height:44px; } .status__dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--muted)} .status__dot[data-open="true"]{background:var(--ok)} .status__dot[data-open="false"]{background:var(--err)} /* ---------- 8. Cards & grids ---------------------------------------------- */ .grid{display:grid;gap:1.1rem} .grid--3,.grid--2{grid-template-columns:1fr} /* Grid columns are minmax(auto,1fr) by default, so one wide child — a long nowrap button, say — silently widens the whole column past the viewport. min-width:0 contains the damage instead of scrolling the page sideways. */ .grid > *{min-width:0} .card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden; display:flex;flex-direction:column; transition:border-color .15s, box-shadow .15s; } .card:hover{border-color:var(--accent);box-shadow:var(--shadow)} .card .ratio{border-radius:0} .card__body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;flex:1} .card__body h3{margin-bottom:.35rem} .card__body p{color:var(--muted);font-size:1rem;margin-bottom:1rem} .card__body .link-more{margin-top:auto;align-self:flex-start} a.card{text-decoration:none;color:inherit} a.card:hover{color:inherit} a.card:hover h3{color:var(--accent-ink)} .trust{display:grid;gap:1.4rem;list-style:none;margin:0;padding:0} .trust li{margin:0;display:flex;gap:.9rem;align-items:flex-start} .trust__icon{ width:46px;height:46px;flex:none;border-radius:var(--radius); background:var(--surface-2);color:var(--accent-ink); display:flex;align-items:center;justify-content:center; } .trust__icon svg{width:23px;height:23px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .trust h3{margin-bottom:.2rem} .trust p{color:var(--muted);font-size:1rem} .split{display:grid;gap:1.6rem;align-items:center} .split__media{max-width:320px} /* ---------- 9. Bands ------------------------------------------------------ */ .band{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:1.5rem 1.25rem; } .band--calendar{background:var(--surface-2)} .band--emergency{border-left:4px solid var(--accent);box-shadow:var(--shadow)} .band h2{margin-bottom:.5rem} .band > p{color:var(--muted)} .band__num{ display:inline-flex;align-items:center;gap:.5rem;min-height:44px; font-family:var(--serif);font-weight:600;font-size:1.5rem; color:var(--ink);text-decoration:none;white-space:nowrap; } .band__num:hover{color:var(--accent-ink)} .band__list{list-style:none;margin:1rem 0 1.2rem;padding:0} .band__list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--muted);font-size:1rem} .band__list li::before{content:"\2014";color:var(--accent);flex:none} .cta-band{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)} .cta-band h2{color:var(--primary-ink)} .cta-band > p{color:var(--primary-ink);opacity:.88} /* On the primary band the buttons invert: the surface colour becomes the fill and --primary the label, so this stays correct when --primary flips to amber. */ .cta-band .btn--primary{background:var(--primary-ink);color:var(--primary);border-color:var(--primary-ink)} .cta-band .btn--primary:hover{background:var(--surface-2);color:var(--primary);border-color:var(--surface-2)} .cta-band .btn--ghost{background:transparent;color:var(--primary-ink);border-color:var(--primary-ink)} /* --hover-wash is a tint of the band's own colour here, so it would be invisible. Washing with the ink instead reads in both themes. */ .cta-band .btn--ghost:hover{background:rgba(255,255,255,.16);color:var(--primary-ink);border-color:var(--primary-ink)} .cta-band .btn--ghost:hover{background:color-mix(in srgb, var(--primary-ink) 16%, transparent)} /* ---------- 10. Hours, info, map ------------------------------------------ */ .hours{list-style:none;margin:0 0 1.2rem;padding:0} .hours li{ display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding:.55rem 0;border-bottom:1px solid var(--line);margin:0;font-size:1rem; } .hours li:last-child{border-bottom:0} .hours .d{color:var(--muted)} /* nowrap is right for a time value like 09:00–14:00, which must never split across lines. It is wrong for a sentence — see .schedule and .pricelist below, which reuse the row layout for text that has to wrap. */ .hours .t{font-weight:600;white-space:nowrap;text-align:right} /* The vaccination schedule tables: same rows, but the right column is a description, not a value, so it wraps and reads left-aligned. */ .schedule .t{white-space:normal;text-align:left;font-weight:400;color:var(--muted)} .schedule .d{flex:none;max-width:44%;font-weight:600;color:var(--ink)} .schedule li{gap:.9rem;align-items:baseline} /* A price can carry a parenthetical («180–320€ (ανάλογα με το βάρος)») that is too long to hold on one line at 360px. */ .pricelist .t{white-space:normal} .hours li[data-today="true"] .d{color:var(--ink);font-weight:600} .info{display:grid;gap:1.1rem} .info__item{display:flex;gap:.85rem;align-items:flex-start} .info__item svg{width:20px;height:20px;flex:none;margin-top:.3rem;fill:none; stroke:var(--accent-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* A phone number or an address is a tap target, not prose — 44px like any other, even though it sits on its own line rather than in a button. */ .info__item a,.footer__about a,.footer__legal a,.sheet__meta a{ display:inline-flex;align-items:center;min-height:44px; } .info__item a{color:var(--ink);text-decoration:none;font-weight:600} .info__item a:hover{color:var(--accent-ink)} .info__label{ display:block;font-size:.875rem;font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:var(--muted);margin-bottom:.1rem; } /* Click-to-load map. Nothing reaches Google before the button is pressed. */ .map{ position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);background:var(--surface-2); min-height:260px;display:flex;align-items:center;justify-content:center; } .map iframe{position:absolute;inset:0;width:100%;height:100%;min-height:260px} .map__ph{text-align:center;padding:1.6rem 1.2rem;max-width:36ch} .map__ph p{color:var(--muted);font-size:.9375rem;margin-bottom:1rem} /* ---------- 10b. Content lists ------------------------------------------- */ .ticks{list-style:none;margin:0 0 1.2rem;padding:0} .ticks li{position:relative;padding-left:1.75rem;margin:0 0 .65rem} .ticks li::before{ content:"";position:absolute;left:0;top:.55em; width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(-45deg); } .steps{list-style:none;margin:0 0 1.4rem;padding:0;counter-reset:step} .steps li{ counter-increment:step;position:relative; padding-left:2.6rem;margin:0 0 1rem;color:var(--muted); } .steps li strong{color:var(--ink)} .steps li::before{ content:counter(step);position:absolute;left:0;top:.05em; width:28px;height:28px;border-radius:50%; background:var(--surface-2);border:1px solid var(--line); color:var(--accent-ink);font-weight:600;font-size:.875rem; display:flex;align-items:center;justify-content:center; } /* The emergency list. Each row names what you see, then says to call. */ .urgent{list-style:none;margin:0;padding:0} .urgent li{ padding:.85rem 0 .85rem 1.1rem;margin:0; border-bottom:1px solid var(--line);border-left:3px solid var(--accent); padding-left:1rem;color:var(--muted);font-size:1rem; } .urgent li:last-child{border-bottom:0} .urgent strong{color:var(--ink)} .linklist{list-style:none;margin:0;padding:0} .linklist li{margin:0 0 .6rem} .linklist a{ display:block;padding:.9rem 1.05rem; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); text-decoration:none;color:var(--ink); transition:border-color .15s, background-color .15s; } .linklist a:hover{border-color:var(--accent);color:var(--ink)} .linklist strong{display:block;font-weight:600;margin-bottom:.15rem} .linklist span{display:block;color:var(--muted);font-size:1rem;line-height:1.5} .stack-blocks > * + *{margin-top:2rem} .pricelist{margin-bottom:.6rem} .faq details{ border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);margin-bottom:.7rem; } .faq summary{ cursor:pointer;list-style:none;padding:1rem 1.1rem;min-height:44px; font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:.8rem; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent-ink);font-size:1.4rem;line-height:1;flex:none} .faq details[open] summary::after{content:"\2212"} .faq details > p{padding:0 1.1rem 1.1rem;color:var(--muted);margin:0} /* ---------- 10c. Calculator & timeline ----------------------------------- */ .calc{ display:grid;gap:1.2rem; background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:1.3rem 1.2rem; } .calc__field{border:0;margin:0;padding:0;min-width:0} .calc__field legend,.calc__field > label{ display:block;font-weight:600;font-size:1rem;margin-bottom:.5rem;padding:0; } .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chip{position:relative;display:inline-flex} .chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .chip span{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:.6rem 1.1rem; border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);color:var(--ink); font-weight:600;font-size:1rem;white-space:nowrap; transition:border-color .15s, background-color .15s, color .15s; } .chip input:checked + span{border-color:var(--primary);background:var(--primary);color:var(--primary-ink)} .chip input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px} .timeline-wrap{margin-top:2rem} .timeline{list-style:none;margin:1.4rem 0 0;padding:0;position:relative} .timeline::before{ content:"";position:absolute;left:9px;top:8px;bottom:8px; width:2px;background:var(--line); } .timeline li{ position:relative;margin:0 0 1.3rem;padding-left:2.6rem; } .timeline li::before{ content:"";position:absolute;left:2px;top:.42em; width:16px;height:16px;border-radius:50%; background:var(--surface);border:2px solid var(--line); } .timeline li[data-state="past"]{opacity:.62} .timeline li[data-state="past"]::before{background:var(--line);border-color:var(--line)} .timeline li[data-state="next"]::before{background:var(--accent);border-color:var(--accent)} .timeline li[data-state="next"]{ background:var(--surface-2);border-radius:var(--radius); padding:.9rem 1rem .9rem 2.6rem;margin-left:-1rem;padding-left:3.4rem; } .timeline li[data-state="next"]::before{left:1.1rem} .tl__when{display:block;font-weight:600;color:var(--ink)} .tl__date{ display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap; font-size:1rem;color:var(--muted);margin-top:.1rem; } .tl__tag{ font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase; padding:.15rem .5rem;border-radius:var(--radius-s); background:var(--surface-2);color:var(--muted); } .tl__tag[data-tag="next"]{background:var(--accent);color:#1C2420} .tl__what{display:block;color:var(--muted);font-size:1rem;margin-top:.15rem} /* ---------- 10d. Form ----------------------------------------------------- */ .form{display:grid;gap:1.15rem} .field{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.4rem} .field > label,.field > legend{font-weight:600;font-size:1rem;padding:0} .req{color:var(--accent-ink)} /* .calc__field is included so the calendar's date input gets the same 48px box and 17px type as the booking form — without it the browser default applies and it renders at 13px, which iOS zooms into. */ .field input,.field select,.field textarea, .calc__field input,.calc__field select{ width:100%; font-family:var(--sans); font-size:1.0625rem; /* >=16px so iOS never zooms on focus */ line-height:1.5; color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:var(--radius); padding:.7rem .85rem;min-height:48px; transition:border-color .15s; } .field textarea{min-height:120px;resize:vertical} .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .8rem center;background-size:18px; padding-right:2.6rem; } [data-theme="dark"] .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AAAA1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)} .field__err{margin:0;color:var(--err);font-size:1rem;font-weight:600} .field__hint{margin:0} .field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--err)} .check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start; font-weight:400;font-size:1rem;cursor:pointer;min-height:44px} .check input{ width:24px;height:24px;min-height:24px;margin:.15rem 0 0;flex:none; accent-color:var(--primary); } .consent[data-invalid="true"] .check{color:var(--err)} /* Honeypot. Off-screen rather than display:none, which some bots skip. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form__status{ margin:0;padding:.85rem 1rem;border-radius:var(--radius); background:var(--surface-2);border-left:4px solid var(--err); color:var(--ink);font-size:1rem; } .form__status[data-show="false"]{display:none} /* ---------- 11. Footer ---------------------------------------------------- */ .footer{background:var(--surface);border-top:1px solid var(--line);padding-block:2.6rem 1.6rem} .footer__grid{display:grid;gap:1.9rem} .footer h4{ font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);margin:0 0 .7rem; } .footer ul{list-style:none;margin:0;padding:0} .footer li{margin:0} .footer li a{ display:inline-flex;align-items:center;min-height:44px; color:var(--ink);text-decoration:none;font-size:1rem; } .footer li a:hover{color:var(--accent-ink)} .footer__about p{color:var(--muted);font-size:1rem;max-width:46ch} /* Social row. Sits under the contact details in the brand column so the two link lists stay untouched. Icons carry no text, so each anchor is named by an aria-label; the row itself is named on the