:root{ /* Navy, white and amber (see DESIGN.md). Navy carries the brand, blue marks links and selected states, gold is reserved for the buttons that book. The blues all share the navy's hue so they read as one family. The older --green/--gold/--teal names are kept so every existing call site still resolves; only the values underneath changed. */ --green:#2360B5; --green-dark:#1A4C92; --green-tint:#EEF3FA; --gold:#F3B94A; --ink:#10233F; --ink-soft:#34455F; --muted:#5F6F86; --line:#DEE5EF; --bg:#F5F8FC; --surface:#FFFFFF; --white:#FFFFFF; --teal:#173B6C; --teal-dark:#0E2A4F; --teal-tint:#EEF3FA; --radius:14px; --radius-sm:10px; --shadow-sm:0 2px 10px rgba(16,35,63,.07); --shadow-md:0 14px 34px rgba(16,35,63,.13); --shadow-green:0 12px 26px -10px rgba(243,185,74,.9); --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1); --ink-fixed:#0B2242; --accent:#2360B5; --accent-hover:#1A4C92; --signal:#2360B5; --icon-stroke:#2360B5; --cta:#F3B94A; --cta-hover:#F6C76B; --cta-press:#DFA436; --font-display:'Manrope','Segoe UI',system-ui,sans-serif; --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif; --font-mono:'Source Sans 3','Segoe UI',system-ui,sans-serif; color-scheme:light; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* a faint grain on the sand background — paper texture instead of a flat fill; white cards and panels sit on top of it untextured, by design, so the grain only ever shows through the sand "bands" between them */ body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background-color .25s var(--ease),color .25s var(--ease)} h1,h2,h3,.h2,.brand-text strong,.checkout-tracker-num,.checkout-step-num{font-family:var(--font-display)} img,svg{display:block;max-width:100%} a{color:var(--accent)} a:hover{color:var(--accent-hover)} h1,h2,h3{letter-spacing:-0.015em;text-wrap:balance} .wrap{max-width:1120px;margin:0 auto;padding:0 32px} section[id]{scroll-margin-top:132px} :focus-visible{outline:3px solid var(--accent);outline-offset:2px} .skip-link{position:absolute;left:-999px;top:auto;background:var(--ink-fixed);color:#fff;padding:12px 18px;border-radius:10px;z-index:2000} .skip-link:focus{left:16px;top:16px} svg[stroke="#0D5A3B"]{stroke:var(--icon-stroke)} /* header */ .site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:color-mix(in srgb, var(--white) 92%, transparent);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease),background-color .25s var(--ease)} .site-header.scrolled{box-shadow:var(--shadow-sm)} .header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .brand-logo{height:38px;width:38px;object-fit:contain;display:block;flex-shrink:0;border-radius:10px;transition:background-color .25s var(--ease),padding .25s var(--ease)} .brand-text{display:flex;flex-direction:column;line-height:1.15} .brand-text strong{font-weight:800;font-size:20px;letter-spacing:-0.01em} .brand-text span{font-size:12.5px;color:var(--muted)} .nav-toggle{position:absolute;opacity:0;pointer-events:none} .nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;cursor:pointer;flex-shrink:0} .nav-burger:hover{background:var(--green-tint)} .site-nav{display:flex;align-items:center;gap:28px} /* Language picker and dark-mode toggle sit at the far right edge, past the nav links, matching the reference layout — reordered visually via flex order rather than moving them in the HTML, so the mobile burger menu's own structure (which relies on nav-toggle/nav-burger/nav-links staying adjacent) is untouched. */ .nav-links{order:1} .lang-picker{order:2} /* Any page with a full-bleed hero photo (homepage and every service/fleet detail page): the header floats transparently over the hero, absolutely positioned so the image runs behind it edge to edge, until the visitor scrolls past it, then it becomes the same solid sticky bar every other page already uses. Pages with no hero image keep the solid header always. */ body.page-hero-overlay .site-header{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none} body.page-hero-overlay .site-header.scrolled{position:fixed;background:color-mix(in srgb, var(--white) 92%, transparent);backdrop-filter:saturate(180%) blur(10px);border-bottom-color:var(--line)} body.page-hero-overlay .site-header:not(.scrolled) .nav-links a:not(.btn){color:#fff} body.page-hero-overlay .site-header:not(.scrolled) .brand-text strong, body.page-hero-overlay .site-header:not(.scrolled) .brand-text span{color:#fff} body.page-hero-overlay .site-header:not(.scrolled) .brand-logo{background:rgba(255,255,255,.92);padding:5px} body.page-hero-overlay .site-header:not(.scrolled) .nav-burger svg path{stroke:#fff} body.page-hero-overlay .site-header:not(.scrolled) .lang-picker-trigger{border-color:rgba(255,255,255,.4);color:#fff} body.page-hero-overlay .site-header:not(.scrolled) .lang-picker-trigger:hover{background:rgba(255,255,255,.16)} .nav-links{display:flex;align-items:center;gap:28px;font-size:16px} .nav-links a{text-decoration:none;font-weight:600;color:var(--ink);position:relative;padding:4px 0} .nav-links a:not(.btn)::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--gold);transition:right .25s var(--ease)} .nav-links a:not(.btn):hover::after{right:0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;text-decoration:none;border-radius:10px;min-height:46px;box-sizing:border-box;border:0;transition:transform .2s var(--spring),box-shadow .2s var(--ease),background-color .15s var(--ease);cursor:pointer;font-family:inherit;font-size:16px} .btn:hover{transform:scale(1.01)} .btn:active{transform:scale(.98);transition-duration:.07s} .btn-primary{background:var(--cta);color:#10233F;padding:12px 22px} .btn-primary:hover{background:var(--cta-hover);color:#10233F;box-shadow:var(--shadow-green)} .btn-primary:active{background:var(--cta-press)} .btn-gold{background:var(--cta);color:#10233F;padding:14px 24px;font-size:17px} .btn-gold:hover{background:var(--cta-hover);color:#10233F;box-shadow:var(--shadow-green)} .btn-gold:active{background:var(--cta-press)} .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);padding:12px 20px} .btn-ghost:hover{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)} .btn-ghost:active{background:var(--green-tint)} .btn-ghost-light{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);padding:12px 20px} .btn-ghost-light:hover{color:#FFFFFF;box-shadow:inset 0 0 0 1.5px #FFFFFF;background:rgba(255,255,255,.08)} .btn-ghost-light:active{background:rgba(255,255,255,.16)} .btn-sm{min-height:38px;padding:9px 16px;font-size:14.5px} /* hero — a full-bleed dusk-at-sea GRADIENT (no stock photography anywhere on the site, by design) used by the homepage and every service/fleet detail page; see body.page-hero-overlay above, which lets the header float transparently on top of it until scrolled. The section is a direct child of
, outside any .wrap, so the color always reaches both edges of the viewport; text content inside is capped to the site's normal .wrap width and left-aligned within it. .hero-scrim draws a thin horizon line with a soft brass "sun" glow low on it — the one recurring motif of the coastal palette — instead of a photo. */ .hero-section{position:relative} .hero-scrim{display:none} .hero-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;max-width:1180px;padding:130px 0 56px} .eyebrow{display:block;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;width:fit-content} .eyebrow-on-dark{color:var(--gold)} .hero-h1-light{font-family:var(--font-display);font-size:48px;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#FFFFFF;max-width:760px} .hero-lede-light{font-size:18.5px;line-height:1.55;color:rgba(255,255,255,.82);max-width:38em} .page-hero{min-height:52vh;display:flex;align-items:flex-end;background:var(--teal-dark)} .page-hero .hero-content{padding-top:176px;padding-bottom:64px;gap:18px} .page-hero .hero-h1-light{font-size:44px} .page-hero-crumb{font-size:13px;font-weight:600;color:rgba(255,255,255,.68)} .page-hero-crumb a{color:rgba(255,255,255,.85);text-decoration:none} .page-hero-crumb a:hover{text-decoration:underline} @media (min-width:861px){.page-hero{min-height:max(52vh,440px)}} @media (max-width:860px){.hero-photo{min-height:560px}.page-hero{min-height:480px}.page-hero .hero-content{padding-top:142px;padding-bottom:48px}.page-hero .hero-h1-light{font-size:32px}} .hero-cta{display:flex;gap:24px;flex-wrap:wrap;align-items:center} .link-cta{font-weight:700;font-size:15.5px;padding:12px 0;text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)} .link-cta svg{transition:transform .2s var(--ease)} .link-cta:hover svg{transform:translateX(4px)} .link-cta:hover{color:var(--accent)} /* front search bar */ .ticket{background:#fff;border:1px solid #DEE5EF;border-radius:14px;padding:8px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:0;box-sizing:border-box} .calc-bar-fields{display:flex;align-items:stretch;min-height:80px} .calc-field[hidden]{display:none} .calc-seg{display:flex;align-items:center;gap:12px;padding:0 20px;min-width:0;box-sizing:border-box} .calc-seg[data-seg="from"],.calc-seg[data-seg="to"]{flex:23 1 0} .calc-seg[data-seg="date"]{flex:18 1 0} .calc-seg-pax{flex:9 1 0;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px} .calc-seg-icon{flex-shrink:0;color:#5F6F86;display:flex} .calc-seg-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;cursor:pointer} .calc-seg-label{font-size:12.5px;color:#5F6F86;font-weight:600;line-height:1.2} .calc-seg-select,.calc-seg-input,.calc-seg-date{border:none;background:none;padding:0;margin:0;font-family:inherit;font-size:15.5px;font-weight:700;color:#10233F;width:100%;min-height:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;color-scheme:light} .calc-seg-select{cursor:pointer} .calc-seg-input{font-weight:500;cursor:text} #fromPointInput{cursor:pointer} .calc-seg-input::placeholder{color:#5F6F86;font-weight:500} .calc-seg-select:focus,.calc-seg-input:focus,.calc-seg-date:focus{outline:none} .calc-seg-date{cursor:pointer;font-family:var(--font-mono)} .calc-divider{width:1px;align-self:center;height:56%;background:#DEE5EF;flex-shrink:0} /* the "ticket stub" perforation — a dashed tear between the trip details and the price-reveal button, with two notches punched to the hero's own teal background so the card reads like it's been torn from it */ .calc-seg-date::-webkit-calendar-picker-indicator{opacity:.45} .calc-bar-submit{white-space:nowrap;padding:0 22px;align-self:stretch;height:auto;flex:13 1 0;border-radius:10px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px} .to-point-wrap{position:relative} .to-point-panel{position:absolute;top:calc(100% + 14px);left:-20px;right:auto;width:320px;z-index:60;background:#fff;border:1px solid #DEE5EF;border-radius:10px;box-shadow:var(--shadow-md);padding:8px;max-height:320px;overflow-y:auto} .to-point-panel[hidden]{display:none} .to-point-panel-header{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#5F6F86;padding:6px 10px} .to-point-option{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;border-radius:10px;padding:10px;font-family:inherit;font-size:14.5px;font-weight:600;color:#10233F;text-align:left;cursor:pointer} .to-point-option:hover{background:#EEF3FA} .to-point-option-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#EEF3FA;color:#2360B5;display:flex;align-items:center;justify-content:center} .to-point-empty{padding:14px 10px;font-size:13.5px;color:#5F6F86} .calc-return-btn{display:flex;align-items:center;justify-content:center;gap:8px;flex:13 1 0;padding:0 16px;border:none;background:transparent;color:#10233F;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap} .calc-return-btn svg{color:#5F6F86} .calc-return-btn[aria-pressed="true"]{color:#2360B5} .calc-return-btn[aria-pressed="true"] svg{transform:rotate(45deg);color:#2360B5} .calc-return-btn[hidden]{display:none} .pax-stepper{display:flex;align-items:center;gap:14px;border:none;padding:0;min-height:0} .pax-step-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid #DEE5EF;background:#fff;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#10233F;font-weight:700;flex-shrink:0;padding:0} .pax-step-btn:hover{border-color:#2360B5;color:#2360B5} .pax-step-btn:disabled{opacity:.35;cursor:not-allowed} .pax-step-btn:disabled:hover{border-color:#DEE5EF;color:#10233F} .pax-stepper-value{font-family:var(--font-mono);font-weight:700;font-size:15px;color:#10233F;min-width:14px;text-align:center} .hero-rating-stars{color:var(--gold);letter-spacing:1px;font-size:15px} .field{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:600} .field select,.field input{font-family:inherit;font-size:16px;color:var(--ink-fixed);background:#fff;border:2px solid #fff;border-radius:10px;padding:10px 12px;min-height:44px;box-sizing:border-box;width:100%;color-scheme:light} .field select:focus,.field input:focus{border-color:var(--gold)} .field input:user-invalid{border-color:#D64545} .field-err{font-size:13px;color:#FFD9D9;display:none} .field.err .field-err{display:block} .field.err select,.field.err input{border-color:#FF8A80} .pax-row{display:flex;gap:8px;flex-wrap:wrap} .pax-btn{min-width:44px;min-height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.7);background:transparent;color:#fff;font-family:inherit;font-weight:700;font-size:17px;cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease),color .15s var(--ease)} .pax-btn:hover{border-color:var(--gold)} .pax-btn.selected{border-color:var(--gold);background:var(--gold);color:var(--ink-fixed);font-weight:800} .luggage-note{font-size:13.5px;color:var(--muted);line-height:1.4;display:none} .luggage-note.show{display:block} .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .check-row{display:flex;gap:20px;flex-wrap:wrap;font-size:14.5px} .check-row label{display:flex;align-items:center;gap:9px;min-height:44px} .check-row input[type=checkbox]{width:21px;height:21px;accent-color:var(--gold)} .setup-warning{background:#FFF4D6;border:1px solid #E8C874;color:#5C4A0A;font-size:13.5px;line-height:1.5;padding:10px 14px;border-radius:10px;display:none} .setup-warning.show{display:block} /* essential-facts panel */ .facts-panel{display:flex;flex-direction:column;gap:24px} .facts-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)} .facts-updated{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);white-space:nowrap} .facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)} .facts-item{padding:20px 24px 20px 0;display:flex;flex-direction:column;gap:6px} .facts-item:not(:nth-last-child(-n+3)){border-bottom:1px solid var(--line)} .facts-item:nth-child(3n+1){padding-left:0} .facts-item span{font-size:13.5px;color:var(--muted)} .facts-item strong{font-size:16px;font-weight:700;color:var(--ink)} /* generic sections */ .section{padding:80px 0} .section-tight{padding:56px 0} .section-alt{background:var(--surface)} .section-dark{background:var(--teal-dark);color:#FFFFFF} .eyebrow-sm{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase} .h2{font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin-top:8px} .h2-light{color:#fff} .section-intro{display:flex;flex-direction:column;gap:10px;max-width:42em;margin-bottom:40px} .lede{font-size:18px;line-height:1.55;color:var(--ink-soft)} .lede-light{color:#C5CCD6} /* entrance animation: CSS-only and self-completing, never depends on JS or scroll position */ @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .reveal{animation:fadeUp .6s var(--ease) both} @media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none} html{scroll-behavior:auto}} .icon-badge{width:52px;height:52px;border-radius:10px;background:var(--green-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0} /* two-col / photo */ .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center} .photo-frame{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);position:relative;background:var(--green-tint)} .photo-frame img{width:100%;height:100%;object-fit:cover} .fee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:28px} .fee-item{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink-soft);background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 16px} .fee-item strong{color:var(--ink)} .fee-item [data-price-night-surcharge],.fee-item [data-price-return-discount]{font-family:var(--font-mono);font-weight:700;color:var(--accent)} /* occasions (weddings / schools / business) */ /* Service cards are always dark-surfaced, regardless of the site's own light/dark theme toggle — same deliberate exception as the booking bar staying always-white. Colors below are fixed, not theme variables. */ /* Service cards are icon + color, never a stock photo — a deliberate choice, not a placeholder. Always a fixed dark espresso surface regardless of the site's own light/dark toggle, same exception as the booking bar staying always-white. */ .occasion-card{background:#10233F;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:16px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)} .occasion-card:hover{border-color:rgba(255,255,255,.2);box-shadow:0 16px 36px rgba(0,0,0,.35);transform:translateY(-3px)} @media (prefers-reduced-motion:reduce){.occasion-card:hover{transform:none}} .occasion-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .occasion-icon{width:52px;height:52px;border-radius:10px;background:rgba(243,185,74,.14);display:flex;align-items:center;justify-content:center;color:#F3B94A;flex-shrink:0} .occasion-card-body{display:flex;flex-direction:column;gap:12px;flex:1} .occasion-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .occasion-card h3{font-family:var(--font-display);font-size:21px;font-weight:600;color:#FFFFFF;line-height:1.25} .occasion-card p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.62);flex:1} .occasion-arrow{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(243,185,74,.4);display:flex;align-items:center;justify-content:center;color:#F3B94A;transition:background .25s var(--ease),color .25s var(--ease)} .occasion-card:hover .occasion-arrow{background:#F3B94A;color:#10233F} .occasion-wa-link{align-self:flex-start;font-size:14px;font-weight:700;color:#F3B94A;text-decoration:none;display:inline-flex;align-items:center;gap:6px} .occasion-wa-link:hover{text-decoration:underline} .occasion-card .trip-price{color:#F3B94A} .occasion-card ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:rgba(255,255,255,.7)} .occasion-card ul li{display:flex;gap:8px;align-items:flex-start} .occasion-card ul li svg{flex-shrink:0;margin-top:3px} /* service / vehicle detail pages */ .check-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--ink-soft)} .check-list li{display:flex;gap:10px;align-items:flex-start} .check-list li svg{flex-shrink:0;margin-top:2px;color:var(--accent)} .related-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .related-card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)} .related-card span{font-size:12.5px;font-weight:700;color:var(--accent)} .related-card strong{font-size:16px;color:var(--ink)} @media (max-width:860px){.related-strip{grid-template-columns:1fr}} /* faq — a plain divided list, no card chrome, CSS-only +/× indicator */ .faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{cursor:pointer;font-weight:700;font-size:16px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--accent)} .faq-ind{position:relative;width:16px;height:16px;flex-shrink:0} .faq-ind::before,.faq-ind::after{content:"";position:absolute;background:var(--accent);border-radius:1px} .faq-ind::before{left:0;top:7px;width:16px;height:2px} .faq-ind::after{left:7px;top:0;width:2px;height:16px;transition:transform .25s var(--ease),opacity .25s var(--ease)} .faq-item[open] .faq-ind::after{transform:rotate(90deg);opacity:0} .faq-item p{margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--ink-soft)} /* footer */ footer{background:var(--ink-fixed);color:#C5CCD6;padding:56px 0 0;position:relative;overflow:hidden} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;font-size:15px;line-height:1.8;padding-bottom:40px} .footer-brand strong{font-weight:800;font-size:20px;color:#fff;display:block;margin-bottom:6px} .footer-col h3,.footer-col h4{color:#fff;font-size:14px;margin-bottom:12px} .footer-col a{color:#C5CCD6;text-decoration:none;display:block;padding:3px 0} .footer-col .cookie-manage-trigger{display:block;padding:3px 0;color:#C5CCD6;font-size:inherit;font-weight:inherit;text-decoration:none} .footer-col .cookie-manage-trigger:hover{color:var(--gold)} .footer-col a:hover{color:var(--gold)} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:13.5px;color:#8C97A6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} .footer-bottom a{color:#8C97A6} .footer-bottom a:hover{color:var(--gold)} /* back to top */ .to-top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s var(--ease),visibility .25s var(--ease),transform .25s var(--spring);z-index:90} .cookie-float-btn.cookie-manage-trigger{position:fixed;left:20px;bottom:20px;width:48px;height:48px;border-radius:50%;background:var(--ink-fixed);color:#fff;border:none;padding:0;align-self:auto;text-decoration:none;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);cursor:pointer;z-index:900} .cookie-float-btn.cookie-manage-trigger:hover{background:var(--green-dark);color:#fff} .to-top.show{opacity:1;visibility:visible;transform:none} /* cookie consent banner */ .cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:640px;margin:0 auto;background:var(--ink-fixed);color:#E6E9EE;border-radius:10px;padding:20px 22px;box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:1000;display:none;gap:10px;flex-direction:column} .cookie-banner.show{display:flex} .cookie-banner-title{font-size:16px;font-weight:800;color:#fff} .cookie-banner p{font-size:14.5px;line-height:1.5;color:#C5CCD6} .cookie-banner a{color:var(--gold)} .cookie-actions{display:flex;gap:12px;flex-wrap:wrap} .cookie-actions .btn{padding:10px 18px;min-height:40px;font-size:14.5px} .cookie-actions .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)} .cookie-actions .btn-ghost:hover{color:var(--gold);border-color:var(--gold)} .cookie-manage-trigger{align-self:flex-start;background:none;border:none;padding:0;font:inherit;font-size:13.5px;font-weight:700;color:#C5CCD6;text-decoration:underline;cursor:pointer} .cookie-manage-trigger:hover{color:var(--gold)} /* cookie preferences modal */ .cookie-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:20px} .cookie-modal[hidden]{display:none} .cookie-modal-backdrop{position:absolute;inset:0;background:rgba(16,35,63,.55)} .cookie-modal-panel{position:relative;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;max-width:480px;max-height:min(640px,85vh);display:flex;flex-direction:column;overflow:hidden} .cookie-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);flex-shrink:0} .cookie-modal-header h2{font-size:19px;font-weight:800;color:var(--ink)} .cookie-modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .cookie-modal-body{overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px} .cookie-modal-intro{font-size:14px;line-height:1.55;color:var(--muted)} .cookie-modal-intro a{color:var(--accent)} .cookie-category{border:1px solid var(--line);border-radius:10px;padding:14px 16px} .cookie-category-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:14.5px;color:var(--ink)} .cookie-category p{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:6px} .cookie-toggle-label{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;cursor:pointer} .cookie-toggle{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0} .cookie-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .cookie-toggle-knob{position:absolute;inset:0;background:var(--line);border-radius:10px;transition:background-color .15s var(--ease)} .cookie-toggle-knob::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s var(--ease)} .cookie-toggle input:checked ~ .cookie-toggle-knob{background:var(--accent)} .cookie-toggle input:checked ~ .cookie-toggle-knob::before{transform:translateX(16px)} .cookie-toggle-locked .cookie-toggle-knob{background:var(--accent);opacity:.6} .cookie-toggle-locked .cookie-toggle-knob::before{transform:translateX(16px)} .cookie-modal-footer{display:flex;flex-wrap:wrap;gap:10px;padding:16px 22px;border-top:1px solid var(--line);flex-shrink:0} .cookie-modal-footer .btn{padding:9px 16px;min-height:38px;font-size:13.5px} /* legal pages (privacy / terms) */ .legal{max-width:760px;margin:0 auto;padding:64px 32px 96px} .legal h1{font-size:38px;font-weight:800;margin-bottom:8px} .legal .updated{color:var(--muted);font-size:14.5px;margin-bottom:36px} .legal h2{font-size:22px;font-weight:800;margin:36px 0 12px} .legal h3{font-size:16.5px;font-weight:800;margin:22px 0 4px;color:var(--ink)} .legal p,.legal li{font-size:16.5px;line-height:1.7;color:var(--ink-soft)} .legal ul,.legal ol{padding-left:22px;display:flex;flex-direction:column;gap:8px;margin-top:8px} .legal a{font-weight:600} /* 404 page */ .error-page{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:64px 24px;text-align:center} .error-inner{max-width:520px;display:flex;flex-direction:column;align-items:center;gap:18px} .error-code{font-size:96px;font-weight:800;color:var(--accent);line-height:1} .error-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px} /* language switcher — Google Website Translator does the actual translating, but nothing of its own UI is ever shown: its widget renders its own default-locale label (e.g. "Επιλογή γλώσσας" instead of English, if the visitor's OS/browser is set to Greek), which reads as broken rather than multilingual. It's visually hidden but still functional; the globe/flag menu below drives it programmatically. */ .lang-switcher{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none} /* Google's current Website Translator widget injects its top banner and tooltip popups as